/**
 * Store Locator CSS Overrides
 *
 * Restyling Agile Store Locator (ASL) plugin to match Phil & Fred design.
 * These styles override ASL's default template-0 styles.
 *
 * @package PhilFred
 */

/* ==========================================================================
   MAIN LAYOUT - Match Original Two-Column Design
   ========================================================================== */

/* The main section uses existing .geolocation styles from main-styles.css */
/* ASL shortcode goes inside .action-geolocation, map is separate */

/* Reset ASL's container to not interfere */
.philfred-store-locator #asl-storelocator.asl-p-cont {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	height: 960px !important;
}

/* ASL's internal flex row - we repurpose this for the two-column layout */
.philfred-store-locator #asl-storelocator .asl-loc-sec {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	gap: 48px;
	margin: 0 !important;
	width: 100% !important;
}

/* Remove Bootstrap row pseudo-elements */
.philfred-store-locator #asl-storelocator .asl-loc-sec::before,
.philfred-store-locator #asl-storelocator .asl-loc-sec::after {
	display: none !important;
	content: none !important;
}

@media (max-width: 1440px) {
	.philfred-store-locator #asl-storelocator .asl-loc-sec {
		gap: calc(16px + 32 * (100vw - 390px) / 1050);
	}
}

@media (max-width: 991px) {
	.philfred-store-locator #asl-storelocator .asl-loc-sec {
		flex-direction: column !important;
		gap: 2rem;
	}
}

/* ==========================================================================
   LEFT COLUMN: Store List Panel
   ========================================================================== */

/* Override Bootstrap column classes */
.philfred-store-locator #asl-storelocator .asl-panel {
	flex: 0 0 auto !important;
	width: 547px !important;
	min-width: 280px !important;
	max-width: 547px !important;
	height: 740px !important;
	float: none !important;
	position: relative !important;
	padding: 0 !important;
	order: 1 !important;
}

/* The storelocator-panel contains the list */
.philfred-store-locator #asl-storelocator .storelocator-panel {
	width: 100% !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	position: relative !important;
	top: auto !important;
	left: auto !important;
}

/* panel-cont wrapper */
.philfred-store-locator #asl-storelocator .panel-cont {
	display: block !important;
	width: 100% !important;
}

/* CRITICAL: Show panel-inner and style it as the results container (Figma Design Match) */
/* Note: Must override ASL's asl_responsive.css which sets overflow: hidden !important on #asl-storelocator.asl-p-cont #asl-list .panel-inner */
.philfred-store-locator #asl-storelocator.asl-p-cont #asl-list .panel-inner {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	background: #1d1d1d !important;
	border-radius: 8px 8px 0 0 !important;
	max-height: 464px !important;
	height: auto !important;
	overflow: auto !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	margin: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.philfred-store-locator #asl-storelocator.asl-p-cont #asl-list .panel-inner .sl-item:nth-child(2n) {
	background: #1d1d1d !important;
}

.philfred-store-locator #asl-storelocator.asl-p-cont #asl-list .panel-inner .sl-item {
	border-bottom: unset !important;
}

.philfred-store-locator #asl-storelocator.asl-p-cont #asl-list .panel-inner .sl-item.highlighted {
	background: #E5193A !important;
}

.philfred-store-locator #asl-storelocator.asl-p-cont.asl-bg-1 #style_2.infoWindow .address {
	color: #000 !important;
}

.philfred-store-locator #asl-storelocator.asl-p-cont.asl-bg-1 #style_2.infoWindow {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	border-radius: 8px !important;
}

.philfred-store-locator #asl-storelocator.asl-p-cont.asl-bg-1 .infoBox img {
	filter: invert(1);
}

.philfred-store-locator #asl-storelocator.asl-p-cont.asl-bg-1 #style_2.infoWindow h3 {
	color: #000;
	font-size: 16px;
	background: unset;
}

.philfred-store-locator div#asl-list {
	border-radius: 8px !important;
}

@media (max-width: 991px) {
	.philfred-store-locator #asl-storelocator .asl-panel {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		order: 2 !important;
	}

	.philfred-store-locator #asl-storelocator .panel-inner {
		max-height: 400px;
	}
}

/* ==========================================================================
   RIGHT COLUMN: Map
   ========================================================================== */

.philfred-store-locator #asl-storelocator .asl-map {
	flex: 1 1 auto !important;
	width: auto !important;
	float: none !important;
	position: relative !important;
	padding: 0 !important;
	margin: 0 !important;
	order: 2 !important;
	min-height: 740px !important;
	max-height: 740px !important;
}

.philfred-store-locator #asl-storelocator.container.storelocator-main.asl-p-cont {
	padding: 0 !important;
}

.philfred-store-locator #asl-storelocator #asl-map-canv {
	width: 100% !important;
	height: 100% !important;
	min-height: 740px !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	object-fit: cover !important;
}

@media (max-width: 991px) {
	.philfred-store-locator #asl-storelocator .asl-map {
		flex: none !important;
		width: 100% !important;
		margin: 0 -1.5rem !important;
		margin-top: 2rem !important;
		min-width: calc(100% + 3rem) !important;
		min-height: 400px !important;
		max-height: none !important;
		order: 1 !important;
	}

	.philfred-store-locator #asl-storelocator #asl-map-canv {
		position: relative !important;
		min-height: 400px !important;
	}
}

@media (max-width: 25rem) {
	.philfred-store-locator #asl-storelocator .asl-map {
		min-height: 22.625rem !important;
	}
}

/* ==========================================================================
   STORE LIST ITEMS - Styled inside panel-inner (Figma Design Match)
   ========================================================================== */

/* Items get transformed by JS to use .action-geolocation__* classes */
.philfred-store-locator .panel-inner .sl-item,
.philfred-store-locator .panel-inner .action-geolocation__item {
	background: #1d1d1d !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 24px !important;
	margin: 0 !important;
	width: 100% !important;
	transition: background-color 0.3s ease 0s !important;
	cursor: pointer !important;
	/* Use CSS Grid: column 1 = vertical line, column 2 = stacked content */
	display: grid !important;
	grid-template-columns: 2px 1fr !important;
	gap: 0 24px !important; /* row-gap: 0, column-gap: 24px */
	position: relative !important;
	box-sizing: border-box !important;
	flex-shrink: 0 !important;
}

/* Left border indicator - vertical white line (absolute positioned) */
.philfred-store-locator .panel-inner .sl-item::before,
.philfred-store-locator .panel-inner .action-geolocation__item::before {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	left: 24px !important;
	height: calc(100% - 48px) !important;
	width: 2px !important;
	background: #fff !important;
	display: block !important;
	border-radius: 1px !important;
}

/* All direct children go to column 2 */
.philfred-store-locator .panel-inner .sl-item > * {
	grid-column: 2 !important;
}

/* No margin needed - gap is handled by parent flex container */
.philfred-store-locator .panel-inner .sl-item:not(:last-child),
.philfred-store-locator .panel-inner .action-geolocation__item:not(:last-child) {
	margin-bottom: 0 !important;
}

/* Active/highlighted/hover state - red background */
.philfred-store-locator .panel-inner .sl-item.highlighted,
.philfred-store-locator .panel-inner .sl-item:hover,
.philfred-store-locator .panel-inner .sl-item.active,
.philfred-store-locator .panel-inner .sl-item._active,
.philfred-store-locator .panel-inner .action-geolocation__item.highlighted,
.philfred-store-locator .panel-inner .action-geolocation__item:hover,
.philfred-store-locator .panel-inner .action-geolocation__item._active {
	background: #e5193a !important;
}

/* ==========================================================================
   WRAPPER - Content container (Figma Design Match)
   ========================================================================== */

.philfred-store-locator .action-geolocation__wrapper {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

/* Remove the old wrapper pseudo-element - we use card-level ::before now */
.philfred-store-locator .action-geolocation__wrapper::before {
	display: none !important;
}

/* ==========================================================================
   STORE NAME (Figma: Roboto Medium 20px, line-height 28px)
   ========================================================================== */

.philfred-store-locator .action-geolocation__name,
.philfred-store-locator .panel-inner .sl-item p:first-of-type,
.philfred-store-locator .panel-inner .sl-item .p-title {
	font-family: "Roboto", sans-serif !important;
	font-weight: 500 !important;
	font-size: 20px !important;
	line-height: 28px !important;
	color: #fff !important;
	margin: 0 !important;
}

/* ==========================================================================
   STORE ADDRESS (Figma: Roboto Regular 16px, capitalized)
   ========================================================================== */

.philfred-store-locator .action-geolocation__address,
.philfred-store-locator .panel-inner .sl-item p:last-of-type,
.philfred-store-locator .panel-inner .sl-item .p-area {
	font-family: "Roboto", sans-serif !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: normal !important;
	font-style: normal !important;
	color: #fff !important;
	text-transform: capitalize !important;
	margin: 0 0 16px 0 !important;
}

/* ==========================================================================
   DISTANCE (shown after geolocation)
   ========================================================================== */

.philfred-store-locator .action-geolocation__distance {
	font-family: "Roboto", sans-serif !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: normal !important;
	color: #fff !important;
	margin: 0 0 8px 0 !important;
	opacity: 0.8;
}

/* ==========================================================================
   STORE HOURS/SCHEDULE (Figma: Roboto 16px with green dot and semibold time)
   ========================================================================== */

.philfred-store-locator .action-geolocation__shedule {
	font-family: "Roboto", sans-serif !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: normal !important;
	color: #fff !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* Hide empty schedule elements */
.philfred-store-locator .action-geolocation__shedule:empty {
	display: none !important;
}

/* Open status indicator (green dot) - 8px per Figma */
.philfred-store-locator .action-geolocation__shedule:not(:empty)::before {
	content: "" !important;
	display: inline-block !important;
	height: 8px !important;
	width: 8px !important;
	background: #66b07c !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
}

/* Closed status - show ! instead of dot */
.philfred-store-locator .action-geolocation__shedule-close::before {
	content: "!" !important;
	background: transparent !important;
	width: auto !important;
	height: auto !important;
	border-radius: 0 !important;
	font-weight: 400 !important;
}

/* Bold span inside schedule (time) */
.philfred-store-locator .action-geolocation__shedule span {
	font-weight: 600 !important;
}

/* ==========================================================================
   FOOTER & DIRECTIONS BUTTON (Hidden per Figma design - cards show only name, address, status)
   ========================================================================== */

.philfred-store-locator .action-geolocation__footer {
	display: none !important;
}

/* Directions button - hidden always per Figma design */
.philfred-store-locator .action-geolocation__button-route {
	display: none !important;
}

/* ==========================================================================
   HIDE ASL DEFAULT ELEMENTS (only truly unwanted ones)
   ========================================================================== */

/* Hide ASL default search/filter elements we don't need */
.philfred-store-locator #asl-storelocator .Filter_section,
.philfred-store-locator #asl-storelocator .sl-search-group {
	display: none !important;
}

/* Hide result count, print button, loading overlay, etc */
.philfred-store-locator #asl-storelocator .resut-found,
.philfred-store-locator #asl-storelocator .asl-print-btn,
.philfred-store-locator #asl-storelocator .directions-panel,
.philfred-store-locator #asl-storelocator .directions-cont,
.philfred-store-locator #asl-storelocator .sl-gdpr-cont,
.philfred-store-locator #asl-storelocator .asl-overlay {
	display: none !important;
}

/* Hide ASL default icons (location pin icons) */
.philfred-store-locator #asl-storelocator .sl-item .glyphicon,
.philfred-store-locator .panel-inner .sl-item .glyphicon {
	display: none !important;
}

/* Hide old .sl-dist (we show .s-distance instead) */
.philfred-store-locator .sl-dist {
	display: none !important;
}

/* Hide ASL store logos/images and directions button */
.philfred-store-locator .sl-item img[alt="logo"],
.philfred-store-locator .sl-item .sl-logo,
.philfred-store-locator .panel-inner .sl-item img,
.philfred-store-locator .panel-inner .sl-item .thumb-a,
.philfred-store-locator .panel-inner .sl-item .btn-asl,
.philfred-store-locator .panel-inner .sl-item .s-direction,
.philfred-store-locator .panel-inner .sl-item .sl-direction,
.philfred-store-locator .panel-inner .sl-item .col-md-3,
.philfred-store-locator .panel-inner .sl-item .col-xs-3,
.philfred-store-locator .panel-inner .sl-item .sm-pl-0 {
	display: none !important;
}

/* ==========================================================================
   RESET ASL's Bootstrap Grid - Make content flow naturally
   ========================================================================== */

/* Reset Bootstrap grid containers - use display:contents to flatten hierarchy */
.philfred-store-locator .panel-inner .sl-item .row,
.philfred-store-locator .panel-inner .sl-item .row-flex,
.philfred-store-locator .panel-inner .sl-item .addr-sec,
.philfred-store-locator .panel-inner .sl-item .col-md-9,
.philfred-store-locator .panel-inner .sl-item .col-xs-9,
.philfred-store-locator .panel-inner .sl-item .col-flex {
	display: contents !important; /* Flatten the hierarchy - children become grid items */
}

/* Remove Bootstrap row before/after pseudo-elements */
.philfred-store-locator .panel-inner .sl-item .row::before,
.philfred-store-locator .panel-inner .sl-item .row::after,
.philfred-store-locator .panel-inner .sl-item .row-flex::before,
.philfred-store-locator .panel-inner .sl-item .row-flex::after {
	display: none !important;
	content: none !important;
}

/* ==========================================================================
   STYLE ASL's NATIVE CONTENT ELEMENTS (after geolocation)
   ========================================================================== */

/* Store name - .p-title */
.philfred-store-locator .panel-inner .sl-item .p-title {
	display: block !important;
	grid-column: 2 !important;
	font-family: "Roboto", sans-serif !important;
	font-weight: 500 !important;
	font-size: 20px !important;
	line-height: 28px !important;
	color: #fff !important;
	margin: 0 0 4px 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

/* Address - .p-area */
.philfred-store-locator .panel-inner .sl-item .p-area {
	display: block !important;
	grid-column: 2 !important;
	font-family: "Roboto", sans-serif !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: normal !important;
	color: #fff !important;
	text-transform: capitalize !important;
	margin: 0 0 4px 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

/* Distance - .s-distance (shown after geolocation) */
.philfred-store-locator .panel-inner .sl-item .s-distance {
	display: block !important;
	grid-column: 2 !important;
	font-family: "Roboto", sans-serif !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: normal !important;
	color: #fff !important;
	opacity: 0.8 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

/* Hide the mock data UL created by fallback JS */
.philfred-store-locator .storelocator-panel > .store-list {
	display: none !important;
}

/* ==========================================================================
   ASL SEARCH BAR STYLING
   ========================================================================== */

/* Search filter container - show it now */
.philfred-store-locator #asl-storelocator .search_filter {
	display: block !important;
	padding: 0 !important;
	margin-bottom: 24px !important;
}

/* Hide the "Lieu de recherche" label */
.philfred-store-locator #asl-storelocator .search_filter > p {
	display: none !important;
}

/* Remove border from search_filter.inside container */
.philfred-store-locator #asl-storelocator .search_filter.inside {
	border: none !important;
}

/* Search input wrapper - match Figma design */
.philfred-store-locator #asl-storelocator .asl-store-search {
	display: flex !important;
	align-items: center !important;
	background: transparent !important;
	border: 2px solid #636363 !important;
	border-radius: 8px !important;
	padding: 16px 24px !important;
	height: auto !important;
	position: relative !important;
	overflow: hidden !important;
}

/* Search input field - match existing style */
.philfred-store-locator #asl-storelocator #auto-complete-search {
	display: block !important;
	flex: 1 !important;
	border: none !important;
	background: transparent !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 16px !important;
	color: #1d1d1d !important;
	outline: none !important;
	padding: 0 !important;
	height: 100% !important;
	box-shadow: none !important;
}

.philfred-store-locator #asl-storelocator #auto-complete-search::placeholder {
	color: #636363 !important;
}

/* Geolocation icon styling */
.philfred-store-locator #asl-storelocator .span-geo {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 69px !important;
	height: 70px !important;
	margin-left: 12px !important;
	cursor: pointer !important;
}

.philfred-store-locator #asl-storelocator.asl-p-cont.asl-bg-1 .store-locator h4 {
	color: #000 !important;
	font-size: 16px !important;
}

/* Icon font size */
#asl-storelocator.asl-p-cont .inside.search_filter span > i {
	font-size: 28px !important;
}

/* Icon line-height */
.asl-p-cont [class*=" icon-"]:before {
	line-height: 2.5em !important;
}

/* Clear button styling */
.philfred-store-locator #asl-storelocator .asl-search-clr {
	background: transparent !important;
	border: none !important;
	color: #636363 !important;
	cursor: pointer !important;
	padding: 8px !important;
}

.philfred-store-locator #asl-storelocator .asl-search-clr:hover {
	color: #e5193a !important;
}

/* ==========================================================================
   STORE COUNT (Num_of_store) STYLING
   ========================================================================== */

/* Store count display */
.philfred-store-locator #asl-storelocator .Num_of_store {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 16px 0 !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 14px !important;
	color: #636363 !important;
	background: transparent !important;
	position: relative !important;
	top: auto !important;
	left: auto !important;
}

.philfred-store-locator #asl-storelocator .Num_of_store span {
	color: #636363 !important;
}

.philfred-store-locator #asl-storelocator .Num_of_store .count-result {
	font-weight: 600 !important;
	color: #1d1d1d !important;
}

/* ==========================================================================
   HIDE CUSTOM SEARCH ELEMENTS (we now use ASL's native search)
   ========================================================================== */

/* Hide custom search form elements (we now use ASL's native search) */
.philfred-store-locator #philfred-store-search-form .action-geolocation__body,
.philfred-store-locator #philfred-search-btn {
	display: none !important;
}

/* Keep the "Vous êtes localisé(e)" label but hide it by default (shown via JS) */
.philfred-store-locator .action-geolocation__label-located {
	display: none !important;
}

.philfred-store-locator .action-geolocation__label-located[hidden="false"],
.philfred-store-locator .action-geolocation__label-located:not([hidden]) {
	display: flex !important;
}

/* ==========================================================================
   SCROLLBAR STYLING
   ========================================================================== */

.philfred-store-locator .panel-inner::-webkit-scrollbar {
	width: 6px;
}

.philfred-store-locator .panel-inner::-webkit-scrollbar-track {
	background: #1d1d1d;
}

.philfred-store-locator .panel-inner::-webkit-scrollbar-thumb {
	background: #636363;
	border-radius: 3px;
}

.philfred-store-locator .panel-inner::-webkit-scrollbar-thumb:hover {
	background: #e5193a;
}

/* ==========================================================================
   INFO WINDOW (Map Popup)
   ========================================================================== */

.philfred-store-locator .infoWindow {
	font-family: "Roboto", sans-serif;
}

.philfred-store-locator .infoWindow h3 {
	color: #e5193a;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 600;
}

/* ==========================================================================
   FALLBACK MESSAGE (when ASL not available)
   ========================================================================== */

.philfred-store-locator .philfred-asl-fallback {
	background: #f5f5f5;
	padding: 2rem;
	border-radius: 0.5rem;
	text-align: center;
	color: #636363;
}

/* ==========================================================================
   HIGHLY SPECIFIC ASL OVERRIDES (must come last to override ASL defaults)
   ========================================================================== */

/* Fix p-area margin/padding - highly specific selector */
.philfred-store-locator #asl-storelocator.asl-p-cont .panel-inner .addr-sec .p-area {
	margin: 0 !important;
	padding: 0 !important;
}

/* Fix p-title margin - highly specific selector */
.philfred-store-locator #asl-storelocator.asl-p-cont.storelocator-main .panel-cont .sl-item .p-title {
	margin: 0 !important;
}

/* Fix sl-item row-gap for proper spacing */
.philfred-store-locator #asl-storelocator.asl-p-cont #asl-list .panel-inner .sl-item {
	row-gap: 4px !important;
}