/* ==========================================================================
   Glass UI Component Library
   ========================================================================== */

/*
 * Provides glass-style UI components using modifier classes:
 * - .glass-base: The base style for all glass elements.
 * - .glass-hover: Optional hover-enhanced style for interactive elements.
 * - .glass-static: A non-interactive version for display elements.
 */

/* --- Theme Configuration --- */
/*
 * Defines the core visual properties for the glass theme.
 * Change these values to easily re-theme all glass components.
 */
:root {
    --glass-bg-color: rgba(118, 117, 117, 0.3);
    --glass-blur: blur(5px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- Base Glass Style --- */
.glass-base {
    position: relative;
    background: var(--glass-bg-color);
    backdrop-filter: var(--glass-blur) saturate(140%) brightness(82%);
    border: var(--glass-border);
    border-radius: 2rem;
    box-shadow: 0 8px 32px rgba(27, 32, 105, 0.3),
    inset 0 4px 20px rgba(255, 255, 255, 0.3);
    transition: all 300ms ease-in-out;
}

/*
 * The ::after pseudo-element creates the subtle inner glow and drop shadow,
 * enhancing the 3D effect of the glass.
 */
.glass-base::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    backdrop-filter: blur(1px);
    box-shadow: inset -10px -8px 0 -11px rgba(255, 255, 255, 1),
    inset 0 -9px 0 -8px rgba(255, 255, 255, 1);
    opacity: 0.6;
    z-index: -1;
    filter: blur(1px) drop-shadow(10px 4px 6px #747474) brightness(115%);
    transition: all 300ms ease-in-out;
}


/* --- Style Modifiers --- */

/* Optional hover enhancement for interactive elements */
.glass-hover:hover {
    backdrop-filter: blur(3px) saturate(220%);
    box-shadow: 0 6px 24px rgba(31, 38, 135, 0.3),
    inset 0 6px 24px rgba(255, 255, 255, 0.4);
}

.glass-hover:hover::after {
    opacity: 0.75;
    filter: blur(1.5px) drop-shadow(12px 6px 8px black) brightness(200%);
}

/* Static variant for non-interactive elements */
.glass-static {
    user-select: none;
    cursor: default;
}


/* --- Specific Components --- */

/* Animated Progress Bar */
#progress-bar {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    height: 8px;
    border-radius: 2rem;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 1001; /* Ensure it's above the map but below modals */
}

#progress-bar-inner {
    height: 100%;
    width: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 1.0));
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* --- MapLibre Glass Controls --- */
/*
 * Overrides the default MapLibre navigation control styles
 * to apply the glass theme.
 */

/*
 * Target the main container of the navigation control.
 * Remove the default box-shadow and background so our glass styles can take over.
 */
.maplibregl-ctrl-group {
    background: transparent !important; /* Use !important to override inline styles */
    box-shadow: none !important;
    border-radius: 2rem; /* Match the glass-base border-radius */
}

/*
 * Target the individual buttons (zoom in, zoom out, compass).
 * We apply the .glass-base and .glass-hover styles to each button.
 * Note: MapLibre buttons are direct children of the .maplibregl-ctrl-group.
 */
.maplibregl-ctrl-group button {
    /* Apply the core glass styles */
    position: relative;
    background: var(--glass-bg-color);
    backdrop-filter: var(--glass-blur) saturate(140%) brightness(80%);
    border: var(--glass-border);
    box-shadow: 0 8px 32px rgba(27, 32, 105, 0.3),
    inset 0 4px 20px rgba(255, 255, 255, 0.3);
    transition: all 300ms ease-in-out;

    /* Override MapLibre's specific button dimensions and radius */
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important; /* Make the buttons perfectly circular */
}

/*
 * Recreate the inner glow pseudo-element for the buttons.
 */
.maplibregl-ctrl-group button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%; /* Match the button's circular radius */
    backdrop-filter: blur(1px);
    box-shadow: inset -10px -8px 0 -11px rgba(255, 255, 255, 1),
    inset 0 -9px 0 -8px rgba(255, 255, 255, 1);
    opacity: 0.6;
    z-index: -1;
    filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
    transition: all 300ms ease-in-out;
}

/*
 * Apply the hover effects,
 */
.maplibregl-ctrl-group button:hover {
    backdrop-filter: blur(3px) saturate(220%);
    box-shadow: 0 6px 24px rgba(31, 38, 135, 0.3),
    inset 0 6px 24px rgba(255, 255, 255, 0.4);
}

.maplibregl-ctrl-group button:hover::after {
    opacity: 0.75;
    filter: blur(1.5px) drop-shadow(12px 6px 8px black) brightness(200%);
}

/*
 * Style the icons (the '+' and '-' symbols) inside the buttons.
 * Make them white to stand out against the dark glass background.
 */
.maplibregl-ctrl-group .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
.maplibregl-ctrl-group .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
.maplibregl-ctrl-group .maplibregl-ctrl-compass .maplibregl-ctrl-icon {
    filter: brightness(0) invert(1); /* A trick to turn a black SVG/background-image white */
}


/*
 * Handle the rounded corners for the first and last buttons in the group.
 * The group itself has the main radius, but we need to adjust the buttons.
 * Let's make them individual circles instead of a connected block.
 */
.maplibregl-ctrl-group button + button {
    border-top: none; /* Remove the default separator line */
    margin-top: 10px; /* Add some space between the circular buttons */
}

/* --------------------------------*/
/*     MapLibre Glass Geocoder     */
/* --------------------------------*/

/*
 * Use a more specific selector to increase priority.
 * Target the geocoder only when it's a direct child of a map control container.
 * Also, move the font-size and min-width here for better override.
 */
.maplibregl-ctrl-top-left .maplibregl-ctrl-geocoder {
    /* Apply core glass styles */
    background: var(--glass-bg-color) !important;
    backdrop-filter: var(--glass-blur) saturate(140%) brightness(82%) !important;
    border: var(--glass-border) !important;
    border-radius: 2rem !important;
    box-shadow: 0 8px 32px rgba(27, 32, 105, 0.3),
    inset 0 4px 20px rgba(255, 255, 255, 0.3) !important;
    transition: all 300ms ease-in-out;

    /* Override plugin defaults */
    font-size: 13px;
    min-width: 180px;
    max-width: 180px; /* Prevent it from growing on focus */
}

/* Make sure our pseudo-element appears */
.maplibregl-ctrl-top-left .maplibregl-ctrl-geocoder::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    backdrop-filter: blur(1px);
    box-shadow: inset -10px -8px 0 -11px rgba(255, 255, 255, 1),
    inset 0 -9px 0 -8px rgba(255, 255, 255, 1);
    opacity: 0.6;
    z-index: -1;
    filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
    transition: all 300ms ease-in-out;
}

/* Apply hover effects with higher specificity */
.maplibregl-ctrl-top-left .maplibregl-ctrl-geocoder:hover {
    backdrop-filter: blur(3px) saturate(220%) !important;
    box-shadow: 0 6px 24px rgba(31, 38, 135, 0.3),
    inset 0 6px 24px rgba(255, 255, 255, 0.4) !important;
}
.maplibregl-ctrl-top-left .maplibregl-ctrl-geocoder:hover::after {
    opacity: 0.75;
    filter: blur(1.5px) drop-shadow(12px 6px 8px black) brightness(200%);
}

/*
 * Force the input field to be transparent.
 * The plugin's default style for this is very specific.
 */
.maplibregl-ctrl-geocoder,
.maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--input {
    background-color: transparent !important;
    color: white !important;
}

.maplibregl-ctrl-geocoder--input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.maplibregl-ctrl-geocoder--button {
    background-color: transparent;
}
.maplibregl-ctrl-geocoder--icon {
    filter: brightness(0) invert(1);
}
.maplibregl-ctrl-geocoder--icon-close:hover,
.maplibregl-ctrl-geocoder--icon-search:hover {
    filter: brightness(0) invert(0.8);
}
.maplibregl-ctrl-geocoder--suggestion-list {
    background: var(--glass-bg-color);
    backdrop-filter: var(--glass-blur) saturate(140%) brightness(82%);
    border: var(--glass-border);
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(27, 32, 105, 0.3);
    margin-top: 10px;
}
.maplibregl-ctrl-geocoder--suggestion {
    color: white;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.maplibregl-ctrl-geocoder--suggestion:hover,
.maplibregl-ctrl-geocoder--suggestion-active {
    background-color: rgba(255, 255, 255, 0.15);
}

/* --- MapLibre Glass Popup --- */

/* Target the custom class we added in the JavaScript */
.glass-popup .maplibregl-popup-content {
    /* Apply core glass styles */
    background: var(--glass-bg-color);
    backdrop-filter: var(--glass-blur) saturate(140%) brightness(82%);
    border: var(--glass-border);
    border-radius: 1rem; /* A less-rounded shape for content boxes */
    box-shadow: 0 8px 32px rgba(27, 32, 105, 0.3);

    /* Text and link styling */
    color: #e4e4e4;
    padding: 15px;
}

/* Style the popup's close button to be more visible */
.glass-popup .maplibregl-popup-close-button {
    color: white;
    font-size: 24px;
    padding: 0 5px;
}
.glass-popup .maplibregl-popup-close-button:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Style the popup's "tip" or "anchor" to be semi-transparent */
.glass-popup .maplibregl-popup-tip {
    border-top-color: var(--glass-bg-color) !important;
}

/* Style links within the popup */
.glass-popup a, .glass-popup a:visited {
    color: #a9b8cb; /* A light blue for links */
    text-decoration: none;
}
.glass-popup a:hover {
    text-decoration: underline;
}