/* ============================================================================
	styles.css — Organized sections for Store Locator (Bootstrap 5 + Leaflet)
============================================================================ */

/* ============================================================================
	1) Base Overrides & Theme
---------------------------------------------------------------------------- */

/* Header gradient override for Bootstrap */
.bg-primary {
	 background: #007bff !important; /* Solid blue background */
}


/* ============================================================================
	2) Map UI (Leaflet) — Popups, Attribution, Marker Shadows
---------------------------------------------------------------------------- */

#map {
	 border-radius: var(--bs-border-radius);
}

/* Mobile responsiveness adjustments */
@media (max-width: 767.98px) {
	/* Use a more square aspect ratio on mobile */
	.ratio-16x9 {
		--bs-aspect-ratio: 75%; /* 4:3 aspect ratio for mobile */
	}
	
	/* Mobile view switching - show store list by default, hide map */
	.main {
		display: none;
	}
	
	.main.show-mobile {
		display: block;
	}
	
	.sidebar.hide-mobile {
		display: none;
	}
}

.leaflet-container {
	border-radius: var(--bs-border-radius);
}

/* Leaflet popup custom styling */
.leaflet-popup-content-wrapper {
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.leaflet-popup-content {
	margin: 0;
	min-width: 200px;
}

/* Hide Leaflet attribution */
.leaflet-control-attribution {
	display: none !important;
}

/* Ensure marker shadows are properly styled */
.blue-marker .leaflet-marker-shadow, .red-marker .leaflet-marker-shadow {
	filter: none;
}

/* Leaflet marker color customization */
.blue-marker.leaflet-marker-icon {
	opacity: 0.75;
}

.red-marker.leaflet-marker-icon {
	filter: hue-rotate(155deg) saturate(1.35) brightness(1.2);
}


/* ============================================================================
	3) Sidebar with Store List
---------------------------------------------------------------------------- */

.sidebar {
	position: relative;
}

.store-locations-card {
	height: calc(100vh - 24px - 89px - 24px - 48px - 12px);
}

@media (min-width: 768px) {
	.store-locations-card {
		position: absolute;
		width: 100%;
		height: 100%;
	}
}

.store-locations-card > .card-body {
	overflow-y: scroll;
}

/* Fade effect for bottom of store list */
.store-list-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 40px;
	background: linear-gradient(transparent, white);
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 10;
	border-bottom-left-radius: var(--bs-border-radius);
	border-bottom-right-radius: var(--bs-border-radius);
}

.store-list-fade.hidden {
	opacity: 0;
}

.store-item:hover {
	background-color: #f8f9fa;
	border-color: #667eea !important;
	transition: all 0.3s ease;
}


/* ============================================================================
	4) Animations & Keyframes
---------------------------------------------------------------------------- */

/* Loading animation */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}