/*
 * BRED overrides for the Agile Store Locator plugin.
 *
 * The plugin is installed per-environment (and git-ignored), but these theme
 * overrides ARE version-controlled and deploy with the theme — so visual
 * customizations live here, survive plugin updates, and reach Kinsta via CI.
 * Selectors are scoped to ASL's containers (.asl-cont / .asl-store-pg) so the
 * file is safe to load site-wide. ASL ships fairly specific rules, so contested
 * properties use !important on top of the .asl-cont scope.
 */

.asl-cont {
	--bred-navy: var(--wp--preset--color--primary-dark, #192a6b);
	--bred-primary: var(--wp--preset--color--primary, #0069a5);
	--bred-cyan-10: var(--wp--preset--color--accent-mg-10, #e5f9fe);
	--bred-cyan-30: var(--wp--preset--color--accent-mg-30, #b2ecfb);
	--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);
	--bred-surface: var(--wp--preset--color--neutral-10, #f5f5f5);

	/* Feed ASL's own brand variables so elements it colours with them resolve
	   to BRED tones — beats ASL's high-specificity !important rules without
	   fighting them. ASL pins these on the #asl-storelocator id, so !important
	   on the custom properties is needed to win.
	   --sl-primary  → selected/active option fill (navy)
	   --sl-light-gray → hovered option fill (soft cyan) */
	--sl-primary: var(--bred-navy) !important;
	--sl-light-gray: var(--bred-cyan-10) !important;

	font-family: var(--wp--preset--font-family--body, "Roboto", sans-serif);
	color: var(--bred-ink);
}

/* ===================================================================
   SEARCH + FILTER BAR
   =================================================================== */
.asl-cont .Filter_section {
	padding: 24px;
	background-color: var(--bred-surface);
	border-radius: 12px;
	margin-bottom: 24px;
}
/* Field labels. */
.asl-cont .Filter_section label,
.asl-cont .asl-cntrl-lbl {
	font-weight: 700 !important;
	font-size: var(--wp--preset--font-size--sm, 14px) !important;
	color: var(--bred-ink) !important;
	margin-bottom: 8px !important;
}
/* The dropdown TRIGGERS share the BRED field look. The category/distance
   dropdowns are bootstrap-multiselect widgets: the visible control is
   `.multiselect.adropdown-toggle` (NOT the .asl-filter-cntrl wrapper, which
   only groups the label + dropdown). The search input is a pill (below). */
.asl-cont .multiselect.adropdown-toggle,
.asl-cont .asl-dist-ddl,
.asl-cont select {
	width: 100% !important;
	height: 48px !important;
	padding: 0 16px !important;
	border: 1px solid var(--bred-border) !important;
	border-radius: 8px !important;
	background-color: #fff !important;
	font-size: var(--wp--preset--font-size--md, 16px) !important;
	color: var(--bred-ink) !important;
	box-shadow: none !important;
}
/* Trigger button lays out the selected text + caret on one line. */
.asl-cont .multiselect.adropdown-toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	text-align: left !important;
}
.asl-cont .multiselect.adropdown-toggle .multiselect-selected-text {
	color: var(--bred-ink) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}
.asl-cont .multiselect.adropdown-toggle .caret {
	color: var(--bred-muted) !important;
}
/* The wrapper only groups label + dropdown — no field chrome on it. */
.asl-cont .asl-filter-cntrl {
	border: 0 !important;
	padding: 0 !important;
	height: auto !important;
	background: transparent !important;
}
.asl-cont .multiselect.adropdown-toggle:focus,
.asl-cont .multiselect.adropdown-toggle.asl-open,
.asl-cont select:focus {
	outline: none !important;
	border-color: var(--bred-navy) !important;
	box-shadow: 0 0 0 3px rgba(25, 42, 107, 0.12) !important;
}

/* ---- Search input: a single pill with the navy search button inside ---- */
.asl-cont .sl-search-group {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 4px !important;
	height: 48px !important;
	padding: 0 8px !important;
	overflow: hidden !important;
	border: 1px solid var(--bred-border) !important;
	border-radius: 8px !important;
	background-color: #fff !important;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.asl-cont .sl-search-group:focus-within {
	border-color: var(--bred-navy) !important;
	box-shadow: 0 0 0 3px rgba(25, 42, 107, 0.12) !important;
}
/* Borderless input filling the field — no chrome of its own (the group owns
   the border + focus ring), so nothing overflows on focus. */
.asl-cont .sl-search-group .asl-search-address,
.asl-cont .sl-search-group .asl-search-address:focus {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 8px !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	font-size: var(--wp--preset--font-size--md, 16px) !important;
	color: var(--bred-ink) !important;
}
/* Search button sits at the left of the field (Figma) — a plain navy icon,
   no filled background. */
.asl-cont .sl-search-group .input-group-append {
	order: -1 !important;
	margin: 0 !important;
}
.asl-cont .asl-search-event {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	min-width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 6px !important;
	background-color: transparent !important;
	color: var(--bred-navy) !important;
	transition: color 150ms ease;
}
.asl-cont .asl-search-event:hover {
	color: color-mix(in srgb, var(--bred-navy) 80%, #000) !important;
}
.asl-cont .asl-search-event i,
.asl-cont .asl-search-event .icon-search {
	color: inherit !important;
	font-size: 18px !important;
}

/* Open dropdown menu — BRED list styling + readable selected/hover state. */
.asl-cont .multiselect-container {
	border: 1px solid var(--bred-border) !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 24px rgba(20, 20, 20, 0.12) !important;
	overflow: hidden !important;
	padding: 4px !important;
}
.asl-cont .multiselect-container > li > a {
	display: block !important;
	padding: 10px 12px !important;
	border-radius: 6px !important;
	background-color: transparent !important;
	color: var(--bred-ink) !important;
}
.asl-cont .multiselect-container > li > a label,
.asl-cont .multiselect-container > li > a .checkbox {
	display: block !important;
	color: var(--bred-ink) !important;
	margin: 0 !important;
	padding: 0 !important;
	/* ASL ships line-height:16px + overflow:hidden + its own padding on the
	   label, which clips descenders. Let the row text breathe. */
	height: auto !important;
	line-height: 1.4 !important;
	overflow: visible !important;
	white-space: normal !important;
	font-weight: 400 !important;
	cursor: pointer !important;
}
/* Selected (.active) option → navy fill + white text. The hover fill comes
   from ASL's own rule, which we point at soft cyan via --sl-light-gray above;
   hover text stays dark (the base label colour) so it reads on the light fill. */
.asl-cont .multiselect-container > li.active > a {
	background-color: var(--bred-navy) !important;
	color: #fff !important;
}
.asl-cont .multiselect-container > li.active > a label,
.asl-cont .multiselect-container > li.active > a .checkbox {
	color: #fff !important;
}
/* ===================================================================
   STORE LIST
   =================================================================== */
/* Hide the "Nombre de magasins: N" count header (.Num_of_store is the navy bar
   itself). ASL has no setting to remove it — only its label text is editable —
   so we drop it here. BRED agencies are flat (no sub-branches), so the branch
   back-button this header would also host is unused. */
.asl-cont .Num_of_store {
	display: none !important;
}
/* Strip ASL's panel chrome — the stray grey border on the list panel and the
   white fill on its inner wrapper — so the cards sit on the section surface. */
.asl-cont .asl-panel {
	border: 0 !important;
	border-radius: 0 !important;
}
.asl-cont .asl-panel-inner {
	background-color: transparent !important;
}
/* List card. */
.asl-cont .sl-item {
	padding: 20px !important;
	border: 1px solid var(--bred-border) !important;
	border-radius: 12px !important;
	background-color: #fff !important;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
/* Gap between cards. ASL locks `margin:0` on .sl-item via a long id-level
   selector, so we match its full chain + a doubled class (.sl-item.sl-item) to
   win on specificity. margin-top on all but the first keeps the list flush top
   and bottom. */
#asl-storelocator.asl-cont .asl-wrapper .sl-main-cont .asl-panel-inner .sl-main-cont-box .sl-list-wrapper .sl-list .sl-item.sl-item + .sl-item.sl-item {
	margin-top: 16px !important;
}
.asl-cont .sl-item:hover {
	border-color: var(--bred-navy) !important;
	box-shadow: 0 4px 16px rgba(25, 42, 107, 0.08) !important;
}
/* Agency name. */
.asl-cont .sl-addr-list-title {
	--sl-font-family: var(--wp--preset--font-family--heading, "Gill Sans Nova", sans-serif);
	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;
	margin-bottom: 12px !important;
}
/* Address / phone / hours rows. */
.asl-cont .sl-addr-sec ul li,
.asl-cont .addr-loc ul li {
	color: var(--bred-muted) !important;
	font-size: var(--wp--preset--font-size--sm, 14px) !important;
	line-height: 1.5 !important;
	margin-bottom: 8px !important;
}
.asl-cont .sl-addr-sec ul li i,
.asl-cont .sl-addr-sec ul li svg,
.asl-cont .addr-loc ul li i {
	color: var(--bred-navy) !important;
}

/* ===================================================================
   BUTTONS (list + geo modal)
   =================================================================== */
/* Filled navy: list "Instructions", geo "Situer", detail "Direction"
   (.btn-info). Detail buttons use Bootstrap-style classes, hence the extra
   selectors. */
.asl-cont .btn-asl,
.asl-cont .asl-situate-btn,
.asl-cont .situate-btn,
.asl-store-pg .asl-content-box .btn-box .btn.btn-info {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 44px !important;
	padding: 10px 20px !important;
	border: 1px solid var(--bred-navy) !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;
	text-decoration: none !important;
	transition: background-color 150ms ease;
}
.asl-cont .btn-asl:hover,
.asl-store-pg .asl-content-box .btn-box .btn.btn-info:hover {
	background-color: color-mix(in srgb, var(--bred-navy) 90%, #000) !important;
}
/* Outline variant: list "Site web" (.btn-asl-outline), detail "Site web"
   (.btn-success). The detail rules match ASL's own ancestor chain + one extra
   class so they win over store-page.css's specific !important rules. */
.asl-cont .btn-asl-outline,
.asl-store-pg .asl-content-box .btn-box .btn.btn-success {
	background-color: transparent !important;
	border: 1px solid var(--bred-navy) !important;
	border-radius: 8px !important;
	color: var(--bred-navy) !important;
	text-decoration: none !important;
}
.asl-cont .btn-asl-outline:hover,
.asl-store-pg .asl-content-box .btn-box .btn.btn-success:hover {
	background-color: var(--bred-cyan-10) !important;
}

/* Hide the "Plus d'informations" button (ASL's renamed "Site web" / website
   button) on the single-store DETAIL page only — client request. It stays in
   the store list card (.btn-asl-outline). */
.asl-store-pg .asl-content-box .btn-box .btn.btn-success {
	display: none !important;
}

/* ===================================================================
   MAP
   =================================================================== */
.asl-cont .asl-map,
.asl-cont .asl-map-canv,
.asl-cont .asl-detail-map {
	border-radius: 12px !important;
	overflow: hidden !important;
}

/* ===================================================================
   STORE DETAIL PAGE (.asl-store-pg)
   =================================================================== */
.asl-store-pg .sl-store-title {
	--sl-font-family: var(--wp--preset--font-family--heading, "Gill Sans Nova", sans-serif);
	font-family: var(--wp--preset--font-family--heading, "Gill Sans Nova", sans-serif) !important;
	font-weight: 700 !important;
	font-size: clamp(26px, 3vw, 34px) !important;
	color: var(--bred-ink) !important;
}
.asl-store-pg .bottom-line {
	width: 64px !important;
	height: 3px !important;
	margin: 12px 0 20px !important;
	border: 0 !important;
	background-color: var(--bred-navy) !important;
	opacity: 1 !important;
}
/* Contact + hours rows. */
.asl-store-pg .sl-store-info {
	color: var(--bred-ink) !important;
	font-size: var(--wp--preset--font-size--md, 16px) !important;
	line-height: 1.6 !important;
	margin-bottom: 12px !important;
}
.asl-store-pg .sl-store-info i,
.asl-store-pg .sl-store-info svg {
	color: var(--bred-navy) !important;
}
/* Category chips → BRED pill. */
.asl-store-pg .asl-cat-tags li,
.asl-cont .asl-cat-tags li {
	display: inline-flex !important;
	align-items: center !important;
	padding: 6px 14px !important;
	border: 1px solid var(--bred-cyan-30) !important;
	border-radius: 999px !important;
	background-color: var(--bred-cyan-10) !important;
	color: var(--bred-navy) !important;
	font-size: var(--wp--preset--font-size--sm, 14px) !important;
	font-weight: 600 !important;
}

/* Hide the "Photo Gallery" section on the store detail page (heading is
   printed unconditionally by the plugin template, even with no photos). */
.asl-store-pg .asl-gallery-heading,
.asl-store-pg #asl-masonry-gallery {
	display: none !important;
}