/**
 * ComprasGuate — cascading place picker.
 *
 * Deliberately self-contained: the same markup renders inside the vendor
 * dashboard (which already loads vendor-dashboard.css) and inside the cart
 * (which does not), so it can't rely on either stylesheet being present.
 * Values are matched to .cgmp-form-field so it looks native in the dashboard.
 *
 * @since 3.93.0
 */

.cgmp-geo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	align-items: end;
}

/* Grid items default to min-width:auto and refuse to shrink below their
   intrinsic content width — long municipio names would blow the row out. */
.cgmp-geo > * { min-width: 0; }

.cgmp-geo-f {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
}

.cgmp-geo-f > span {
	font-size: 12.5px;
	font-weight: 700;
	color: #374151;
	line-height: 1.3;
}

.cgmp-geo-f > select {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #E5E7EB;
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	color: #111827;
	background: #fff;
	/* iOS Safari zooms the page when a font-size under 16px gets focus; 14px is
	   fine here because the dashboard viewport meta pins the scale, and the
	   mobile rule below bumps it anyway. */
	transition: border-color 0.15s, box-shadow 0.15s;
}

.cgmp-geo-f > select:focus {
	outline: none;
	border-color: #1e73be;
	box-shadow: 0 0 0 3px rgba(30, 115, 190, 0.18);
}

.cgmp-geo-f > select:disabled {
	background: #F9FAFB;
	color: #9CA3AF;
	cursor: not-allowed;
}

/* [hidden] loses to display:flex on specificity, so restate it. */
.cgmp-geo-f[hidden] { display: none; }

/* Fetching another country's dataset. Dim, don't collapse — a collapsing row
   would shift everything under it while the request is in flight. */
.cgmp-geo.is-loading { opacity: 0.6; }
.cgmp-geo.is-loading select { cursor: progress; }

@media (max-width: 700px) {
	.cgmp-geo {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.cgmp-geo-f > select {
		font-size: 16px; /* stops iOS from zooming on focus */
	}
}