/*
 * BRED agency picker — a reusable agency selector for Gravity Forms.
 *
 * Rendered by assets/js/agency-picker.js into any GF field carrying the
 * `bred-gf-agency` class. Two steps: pick a province ("ville"), then pick an
 * agency (Liste or Carte view). Styling mirrors the BRED form fields
 * (cyan radio pills, navy accents, 8px radius).
 */

.bred-agency-picker {
	--bred-navy: var(--wp--preset--color--primary-dark, #192a6b);
	--bred-cyan-10: var(--wp--preset--color--accent-mg-10, #e5f9fe);
	--bred-border: var(--wp--preset--color--neutral-30, #d0d0d0);
	--bred-ink: var(--wp--preset--color--neutral-200, #141414);
	--bred-muted: var(--wp--preset--color--neutral-100, #636362);

	max-width: 600px;
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--body, "Roboto", sans-serif);
	color: var(--bred-ink);
}

/* The underlying GF input is kept in the DOM (holds the value) but hidden. */
.bred-agency-input--hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* -- Heading (centered, generous spacing — Figma) -- */
.bred-agency-picker .bred-agency-picker__head {
	text-align: center !important;
	margin-bottom: 40px !important;
}
.bred-agency-picker .bred-agency-picker__eyebrow {
	margin: 0 0 12px !important;
	text-align: center !important;
	font-size: var(--wp--preset--font-size--md, 16px) !important;
	color: var(--bred-muted) !important;
}
.bred-agency-picker .bred-agency-picker__title {
	margin: 0 !important;
	text-align: center !important;
	font-family: var(--wp--preset--font-family--heading, "Gill Sans Nova", sans-serif) !important;
	font-weight: 700 !important;
	font-size: clamp(24px, 3vw, 32px) !important;
	line-height: 1.15 !important;
	color: var(--bred-ink) !important;
}

/* The field's own GF label is redundant — the picker has its own heading. */
.gfield.bred-gf-agency > .gfield_label,
.gfield.bred-gf-agency > legend.gfield_label {
	display: none !important;
}

/* -- Radio pill list (provinces + agencies, list view) --
   The picker renders inside the GF orbital form, whose framework styles bleed
   into our markup (buttons, flex containers), so contested properties are
   forced. */
.bred-agency-picker__list {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}
/* Agency step (list view) — provinces like Antananarivo have dozens of
   agencies (67+), which pushed the page's "Continuer" button far off-screen.
   Cap the list height and let it scroll so the button stays reachable. Scoped
   to the agency step (rendered inside __body); the province list sits directly
   under the picker and stays unconstrained (it's short). The right padding
   keeps the option focus ring / selected border off the scrollbar. */
.bred-agency-picker__body .bred-agency-picker__list {
	max-height: min(50vh, 440px) !important;
	overflow-y: auto !important;
	padding: 2px 6px 2px 2px !important;
	overscroll-behavior: contain !important;
}
/* The base option sets `min-height: 0`, which — inside the now height-capped
   flex column — lets the options flex-shrink and squish shorter than the
   (unconstrained) province items. Restore the automatic content minimum so
   each agency row keeps its natural height and the list scrolls instead. */
.bred-agency-picker__body .bred-agency-option {
	min-height: auto !important;
	flex-shrink: 0 !important;
}
.bred-agency-picker .bred-agency-option {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 16px !important;
	width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 18px 20px !important;
	border: 1px solid var(--bred-border) !important;
	border-radius: 12px !important;
	background-color: #fff !important;
	font-size: var(--wp--preset--font-size--md, 16px) !important;
	font-weight: 400 !important;
	color: var(--bred-ink) !important;
	text-align: left !important;
	cursor: pointer;
	transition: border-color 150ms ease, background-color 150ms ease;
}
.bred-agency-picker .bred-agency-option:hover {
	border-color: var(--bred-navy) !important;
	background-color: #fff !important;
}
.bred-agency-picker .bred-agency-option.is-selected {
	border-color: var(--bred-navy) !important;
	background-color: var(--bred-cyan-10) !important;
}
/* Faux radio dot. */
.bred-agency-picker .bred-agency-option__radio {
	display: block !important;
	flex-shrink: 0 !important;
	width: 22px !important;
	height: 22px !important;
	border: 2px solid var(--bred-border) !important;
	border-radius: 50% !important;
	background: transparent !important;
	position: relative;
}
.bred-agency-picker .bred-agency-option.is-selected .bred-agency-option__radio {
	border-color: var(--bred-navy) !important;
}
.bred-agency-picker .bred-agency-option.is-selected .bred-agency-option__radio::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background-color: var(--bred-navy);
}
.bred-agency-picker .bred-agency-option__label {
	flex: 1 1 auto !important;
}
.bred-agency-option__city {
	color: var(--bred-muted);
	font-size: var(--wp--preset--font-size--sm, 14px);
}

/* -- Liste / Carte toggle (bigger, centered — Figma) -- */
.bred-agency-picker .bred-agency-picker__toggle {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0 !important;
	width: 100% !important;
	max-width: 480px !important;
	margin: 0 auto 40px !important;
	border: 1px solid var(--bred-border) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
}
.bred-agency-picker .bred-agency-picker__toggle-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 16px 20px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: #fff !important;
	color: var(--bred-ink) !important;
	font-weight: 600 !important;
	font-size: var(--wp--preset--font-size--md, 16px) !important;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}
.bred-agency-picker .bred-agency-picker__toggle-btn.is-active {
	background-color: var(--bred-navy) !important;
	color: #fff !important;
}
.bred-agency-picker .bred-agency-picker__toggle-btn svg {
	width: 20px !important;
	height: 20px !important;
	flex-shrink: 0 !important;
}

/* -- Map view (bigger — Figma) -- */
.bred-agency-picker .bred-agency-picker__map {
	position: relative !important;
	width: 100% !important;
	height: 540px !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	border: 1px solid var(--bred-border) !important;
}
.bred-agency-picker .bred-agency-picker__map-canvas {
	width: 100% !important;
	height: 100% !important;
}
.bred-agency-picker__map-msg {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 24px;
	text-align: center;
	color: var(--bred-muted);
}
/* Selected-agency card overlaying the map bottom (Figma popin):
   photo · name + city · "Choisir cette agence" button. */
.bred-agency-picker .bred-agency-picker__map-card {
	position: absolute !important;
	left: 16px !important;
	right: 16px !important;
	bottom: 16px !important;
	display: flex !important;
	align-items: center !important;
	gap: 24px !important;
	margin: 0 !important;
	padding: 8px !important;
	border-radius: 8px !important;
	background-color: #fff !important;
	box-shadow: 0 4px 4px rgba(20, 20, 20, 0.2) !important;
}
.bred-agency-picker .bred-agency-picker__map-card.is-hidden {
	display: none !important;
}
/* Static variant (the chosen-confirmation card, not overlaying the map). */
.bred-agency-picker .bred-agency-picker__map-card--static {
	position: static !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	padding: 12px !important;
	border: 1px solid var(--bred-border) !important;
}
/* "Vous avez sélectionné" confirmation heading (map flow). */
.bred-agency-picker .bred-agency-picker__chosen-label {
	margin: 0 0 16px !important;
	text-align: center !important;
	font-family: var(--wp--preset--font-family--heading, "Gill Sans Nova", sans-serif) !important;
	font-weight: 700 !important;
	font-size: var(--wp--preset--font-size--xl, 20px) !important;
	color: var(--bred-ink) !important;
}
.bred-agency-picker .bred-agency-picker__map-card-thumb {
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	width: 132px !important;
	height: 96px !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	background-color: var(--bred-cyan-10) !important;
}
.bred-agency-picker__map-card-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
.bred-agency-picker .bred-agency-picker__map-card-info {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}
.bred-agency-picker .bred-agency-picker__map-card-title {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--heading, "Gill Sans Nova", sans-serif) !important;
	font-weight: 700 !important;
	font-size: var(--wp--preset--font-size--lg, 18px) !important;
	line-height: 1.2 !important;
	color: var(--bred-ink) !important;
}
.bred-agency-picker .bred-agency-picker__map-card-city {
	margin: 2px 0 0 !important;
	font-size: var(--wp--preset--font-size--md, 16px) !important;
	line-height: 1.5 !important;
	color: var(--bred-muted) !important;
}

/* -- Buttons -- */
.bred-agency-picker .bred-agency-picker__cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: auto !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 10px 20px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background-color: var(--bred-navy) !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: var(--wp--preset--font-size--sm, 14px) !important;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 150ms ease;
}
.bred-agency-picker .bred-agency-picker__cta:hover {
	background-color: color-mix(in srgb, var(--bred-navy) 90%, #000) !important;
}
/* Outline variant — the "Modifier" button on the chosen card. */
.bred-agency-picker .bred-agency-picker__cta--outline {
	background-color: transparent !important;
	border: 1px solid var(--bred-navy) !important;
	color: var(--bred-navy) !important;
}
.bred-agency-picker .bred-agency-picker__cta--outline:hover {
	background-color: var(--bred-cyan-10) !important;
}
.bred-agency-picker .bred-agency-picker__back {
	display: block !important;
	width: auto !important;
	min-height: 0 !important;
	margin: 24px auto 0 !important;
	padding: 4px 0 !important;
	background: none !important;
	border: 0 !important;
	color: var(--bred-navy) !important;
	font-weight: 600 !important;
	font-size: var(--wp--preset--font-size--md, 16px) !important;
	text-decoration: underline !important;
	text-underline-offset: 4px;
	cursor: pointer;
}

/* -- Chosen-agency summary (after selection) -- */
.bred-agency-picker__chosen {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--bred-navy);
	border-radius: 12px;
	background-color: var(--bred-cyan-10);
}
.bred-agency-picker__chosen-info { flex: 1; }
.bred-agency-picker__chosen-title { margin: 0; font-weight: 700; }
.bred-agency-picker__chosen-city {
	margin: 2px 0 0;
	font-size: var(--wp--preset--font-size--sm, 14px);
	color: var(--bred-muted);
}
.bred-agency-picker__change {
	background: none;
	border: 0;
	color: var(--bred-navy);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* Type-ahead agency search — shown for provinces with many agencies
   (e.g. Antananarivo). Filters the list live as the user types. */
.bred-agency-picker__search {
	margin-bottom: 12px !important;
}
.bred-agency-picker__search-input {
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 14px 18px !important;
	border: 1px solid var(--bred-border) !important;
	border-radius: 12px !important;
	background-color: #fff !important;
	font-family: var(--wp--preset--font-family--body, "Roboto", sans-serif) !important;
	font-size: var(--wp--preset--font-size--md, 16px) !important;
	line-height: 1.4 !important;
	color: var(--bred-ink) !important;
}
.bred-agency-picker__search-input::placeholder {
	color: var(--bred-muted) !important;
	opacity: 1;
}
.bred-agency-picker__search-input:focus {
	outline: none !important;
	border-color: var(--bred-navy) !important;
	box-shadow: 0 0 0 2px var(--bred-cyan-10) !important;
}
.bred-agency-picker__empty {
	margin: 0 !important;
	padding: 20px !important;
	text-align: center !important;
	color: var(--bred-muted) !important;
	font-size: var(--wp--preset--font-size--sm, 14px) !important;
}