/* Base styles */
v\:* {behavior:url(#default#VML);}

html, body { 
    overflow: hidden; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    font-family: 'Alegreya Sans', sans-serif;
    font-weight: 400;
    margin: 0;
    background: #002131 url('../images/bg.png'); /* Background for the entire page */
}

#container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Map container */
#map { 
    flex: 1;
    background: #002131 url('../images/bg.png'); /* Separate background for map */
    overflow: hidden;
    position: relative; /* For crosshair positioning */
    /* Prevents the blue flash on mobile when tapping, which can interfere with feature selection */
    -webkit-tap-highlight-color: transparent;
}

/* When the underground map is active, switch to a simple black background */
#map.underground-active {
    background: #000000;
}


/* OpenLayers overrides */
.ol-layer canvas {
    background: transparent !important;
}

.ol-attribution {
    background: rgba(0, 0, 0, 0.6) !important;
    color: white !important;
    font-family: 'Alegreya Sans', sans-serif !important;
    font-weight: 400;
    /* Move attribution above the fixed footer */
    bottom: calc(32px + 0.5em);
    /* Move to the left side */
    right: auto;
    left: 0.5em;
}

.ol-attribution a {
    color: rgba(153, 204, 255, 0) !important;
}

.ol-zoom button {
    width: 1.75em;
    height: 1.75em;
    font-size: 1.3em; /* Makes the button and icon larger */
}

/* Filter Menu styles */
.filter-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    z-index: 1000;
    overflow: hidden;
    /* Use transform to hide/show, not display, to allow for animations */
    /* and to keep child elements like the FAB visible. */
    transform: translateX(100%); /* Default to hidden off-screen */
}

.filter-menu-header {
    flex-shrink: 0; /* Prevent header from shrinking */
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
    z-index: 1; /* Ensure header is below the main menu container for stacking */
    background-color: rgba(0, 0, 0, 0.5);
}

.filter-menu-title {
    font-size: 1.2em;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
}

/* When the menu is open, bring it into view */
.filter-menu.open {
    transform: translateX(0);
}

.filter-menu-toggle {
    cursor: pointer;
    /* Style as a modern, circular button */
    background-color: rgba(255, 255, 255, 0.1);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: white;
    font-size: 20px;
    padding: 0;
}

.filter-menu-content {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Same transparency as the header */
    overflow-y: scroll; /* Always show scrollbar to prevent layout shift */
    box-sizing: border-box; /* Include padding in the element's total width */
    padding-right: 10px; /* Create space for the scrollbar */
}

.filter-menu-content-inner {
    /* Padding is now on the parent, just add the base padding here */
    padding: 15px; /* Symmetrical padding */
}

.filter-menu-section {
    margin-bottom: 20px;
}

.filter-menu-section h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: 700;
    color: #F5D76E;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

.control-item {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.control-item label {
    margin-left: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* Page footer */
.page-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 32px; /* Increased height slightly for better padding */
    padding: 6px 20px;
    background-color: rgb(0, 0, 0); /* Made background more opaque */
    border-top: 1px solid #444;
    color: white;
    z-index: 1001;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


#mouse-position {
    color: #F5D76E;
    font-size: 14px;
    font-family: monospace;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    line-height: 20px; /* Helps with vertical alignment */
    flex-shrink: 0; /* Prevent coordinates from being squished */
    white-space: nowrap;
}

/* Switch control styles */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #444;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #F5D76E;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* Tooltip styles */
.marker-tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    border: 1.5px solid rgba(128, 128, 128, 0.5);
    border-radius: 8px;
    padding: 6px 10px;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    box-sizing: border-box;
    white-space: nowrap; /* Keep tooltip content on a single line */
    display: flex;
    flex-direction: column; /* Stack text and info vertically by default for labels */
    align-items: center;
    color: #ffffff;
}

.marker-tooltip.flex-row {
    flex-direction: row;
}

.tooltip-icon {
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooltip-text {
    flex: 1;
    text-align: center; /* Center the main text */
}

.tooltip-info {
    font-size: 0.9em;
    color: #F5D76E; /* Gold color to match other UI elements */
    margin-top: 4px;
    text-align: center; /* Center the info text */
    white-space: normal; /* Allow info text to wrap if needed */
    /* Set a width to control wrapping for longer text */
    min-width: 200px;
    max-width: 300px;
    line-height: 1.2;
}

/* Toggle Buttons */
.toggle-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 5px;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

/* Style the master toggle buttons to span the width of the 3-column grid below them */
#show-all-labels,
#show-all-underground-labels,
#show-all-markers,
#show-all-underground-markers,
#show-all-monsters {
    grid-column: 1 / -1; /* Span all columns of the grid */
    width: auto; /* Let the grid handle the width */
    margin: 0 auto 10px; /* Center and add bottom margin */
    justify-content: center; /* Center the icon and text inside */
}

.toggle-btn.active {
    border-left-color: #F5D76E;
    color: white;
}

.toggle-btn.inactive {
    border-left-color: transparent;
    color: #888;
}

.toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.toggle-btn .material-symbols-outlined {
    margin-right: 8px;
    width: 20px;
    text-align: center;
}

/* --- Masonry Grid Layout for Toggles --- */
#label-toggles,
#underground-label-toggles,
#marker-toggles,
#monster-toggles {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    /* Add a bit more gap for better visual separation. */
    gap: 15px;
    /* Add some padding to separate from the 'Show All' button above. */
    padding-top: 10px;
}

/* --- Marker Category Rows --- */
.marker-category-row {
    /* This style applies to both overworld and underground marker rows */
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    align-items: stretch; /* Allow child button to stretch full width */
}

/* Generic styles for custom SVG icons in marker toggle buttons */
.toggle-btn-icon-img {
    margin-right: 8px;
    width: 24px; /* Slightly larger icon for headers */
    height: 24px;
    object-fit: contain;
}

.marker-category-row > .toggle-btn {
    flex-direction: row; /* Icon and text side-by-side */
    width: 100%; /* Stretch to full width */
    height: auto;
    border-bottom: 3px solid transparent; /* Add transparent bottom border for active state */
    margin-bottom: 0;
    justify-content: flex-start; /* Align content to the left */
    gap: 0;
    border-left-width: 0;
    padding-bottom: 5px; /* Adjust padding to account for new border */
}

.marker-category-row .toggle-btn.active {
    border-bottom-color: #F5D76E; /* Add yellow bottom border for active state */
}

/* Override generic icon styles for the main category button's icon */
.marker-category-row > .toggle-btn .toggle-btn-icon-img {
    margin-right: 8px;
}

.marker-category-row .toggle-btn span {
    font-size: 16px;
    white-space: nowrap; /* Prevent main category title from wrapping */
    font-weight: 600;
}

.marker-subtype-container,
#underground-marker-toggles .marker-subtype-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* Responsive grid */
    gap: 8px; /* Reduced gap for more space */
    justify-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.marker-subtype-btn,
#underground-marker-toggles .marker-subtype-btn {
    flex-direction: column;
    height: 90px; /* Adjusted height */
    width: 90px; /* Adjusted width to fit grid */
    justify-content: center;
    align-items: center; 
    padding: 5px;
    border-bottom-width: 3px;
    border-left-width: 0; /* Remove left border inherited from .toggle-btn */
    gap: 5px; /* Reduced space between icon and text */
}

.marker-subtype-btn .toggle-btn-icon-canvas,
#underground-marker-toggles .marker-subtype-btn .toggle-btn-icon-canvas {
    /* Style the canvas element directly for full control */
    width: 50px;
    height: 50px;
    /* margin-right is not needed as canvas doesn't inherit it like the img did */
}

.marker-subtype-btn span:not(.material-symbols-outlined),
#underground-marker-toggles .marker-subtype-btn span:not(.material-symbols-outlined) {
    font-size: 12px;
    white-space: normal; /* Allow text to wrap */
    line-height: 1.2;
    text-align: center;
    font-weight: 400; /* Match label button font weight */
    flex: 0 1 auto; /* Allow text to take up space but not shrink icon */
}

/* Add yellow bottom border to active subtype buttons */
.marker-subtype-container .marker-subtype-btn.active,
#underground-marker-toggles .marker-subtype-container .marker-subtype-btn.active {
    border-left: none; /* Reset the left border completely */
    border-bottom: 3px solid #F5D76E; /* Apply only the bottom border */
}

/* Keep label toggles as they were */
#monster-toggles .toggle-btn {
/* This style is not used, but kept for reference */
    flex-direction: column;
    height: 90px;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-left-width: 0;
    border-bottom: 3px solid transparent;
    text-align: center;
}

#label-toggles .toggle-btn.active,
#underground-label-toggles .toggle-btn.active,
#monster-toggles .toggle-btn.active {
    border-left-color: transparent;
    border-bottom-color: #F5D76E;
}

/* --- New Padded Container for Label Grids --- */
/* This ensures the label grids have the same inset padding as the marker rows. */
.label-grid-container {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}


/* --- New Grid Layout for Label Toggles --- */
#label-toggles {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Create a 2-column grid */
    gap: 10px;
}

/* Underground labels get a 3-column grid */
#underground-label-toggles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Create a 3-column grid */
    gap: 10px;
}

#label-toggles .toggle-btn, 
#underground-label-toggles-grid .toggle-btn {
    flex-direction: column;
    height: 80px; /* Adjusted height for a more compact look */
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-left-width: 0;
    border-bottom: 3px solid transparent;
    text-align: center;
}

#label-toggles .toggle-btn .material-symbols-outlined,
#underground-label-toggles-grid .toggle-btn .material-symbols-outlined {
    margin: 0 0 5px 0;
    font-size: 28px;
}

/* Style for custom SVG icons used in label toggles */
.toggle-btn-icon-svg {
    width: 28px;
    height: 28px;
    margin: 0 0 5px 0;
    object-fit: contain;
    /* The SVGs are white, so no filter is needed */
}


#label-toggles .toggle-btn span:not(.material-symbols-outlined),
#underground-label-toggles-grid .toggle-btn span:not(.material-symbols-outlined) {
    font-size: 12px;
    white-space: normal;
}

.sub-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 14px;
}

/* Default settings for Google Material Symbols */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

/* Animation for Google Icons */
.g-icon-beat {
    animation: g-icon-beat 1.5s ease-in-out infinite;
}

@keyframes g-icon-beat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* --- Quick Tips Container --- */
.quick-tips-container {
    position: absolute;
    top: 10px; /* Positioned at the top of the map container */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000; /* Above map tiles, below modals */
    border: 1px solid #505050;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    transition: background-color 0.3s, transform 0.2s;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-tips-container:hover {
    background-color: rgba(20, 20, 20, 0.9);
    transform: translateX(-50%) scale(1.02);
}

.quick-tips-container .material-symbols-outlined {
    margin-right: 10px;
    font-size: 20px;
    color: #FFD700; /* Gold, to match other UI elements */
}

#quick-tips-text {
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

/* --- Generic Modal Styles --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Ensure it's on top of everything */
}

.modal-content {
    background-color: #1e1e1e;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    position: relative;
    width: 90%;
    max-width: 800px; /* Adjust as needed */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border: 1px solid #444;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover {
    color: #fff;
}

.modal-content h2 {
    margin-top: 0;
    color: #F5D76E;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.modal-content h2 {
    flex-shrink: 0; /* Prevent the header from shrinking */
}

.modal-body {
    flex-grow: 1;
    overflow-y: auto;
    color: #ccc;
}

/* --- Tips Modal --- */
/* Override the flex layout of the generic .modal-body for the simpler tips modal */
#tips-modal .modal-body {
    display: block;
    overflow-y: auto;
    padding: 0 25px 15px 25px; /* Adjust padding */
}

#tips-modal-body h3 {
    color: #FFD700;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

#tips-modal-body ul {
    list-style-type: none;
    padding-left: 0;
}

#tips-modal-body li {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 12px;
    margin-bottom: 8px;
    border-left: 3px solid #DBC12F;
    font-size: 15px;
    line-height: 1.4;
    color: #FFFFFF;
}

/* Info Flyout Panel */
.info-flyout {
    position: fixed;
    bottom: 32px; /* Position above the footer */
    left: 0;
    right: 0;
    height: 50vh;
    background-color: rgba(0, 0, 0, 0.85);
    border-top: 2px solid #444;
    color: white;
    z-index: 1500; /* Above map, below modals */
    transform: translateY(calc(100% + 32px)); /* Start hidden below the viewport */
    transition: transform 0.4s ease-in-out, height 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -3px 15px rgba(0,0,0,0.5);
}

.info-flyout.visible {
    transform: translateY(0);
}

.info-flyout.fullscreen {
    height: calc(100vh - 32px); /* Full height minus footer */
}

.info-flyout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: rgba(15, 25, 35, 0.8);
    border-bottom: 1px solid #444;
    flex-shrink: 0;
}

.info-flyout-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: #F5D76E;
}

.info-flyout-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

.info-flyout-control-btn {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
}

.info-flyout-control-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.info-flyout-control-btn .material-symbols-outlined {
    font-size: 24px;
}

.info-flyout-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    color: #ccc;
}
.info-flyout-content .flyout-main-content {
    display: flex;
    flex-direction: column; /* Standard order for mobile: image on top, text on bottom */
    gap: 20px; /* Increased gap for better separation */
}

.flyout-image-column {
    flex-shrink: 0;
    flex-basis: auto; /* Allow the column to size based on its content */
}

.info-flyout-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border-radius: 4px;
}



.info-flyout-image-container img {
    /* Default (small view): Scale image to fit container while maintaining aspect ratio */
    object-fit: contain;
    object-position: center;
    max-height: 250px; /* Constrain the image height directly */
}

/* --- Fullscreen Flyout Adjustments --- */
.info-flyout.fullscreen .info-flyout-image-container {
    max-height: none; /* Remove max-height in fullscreen */
}

.info-flyout.fullscreen .info-flyout-image-container img {
    /* Fullscreen view: Use natural image size, don't scale up */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* --- Desktop Layout for Flyout --- */
@media (min-width: 769px) {
    /* On desktop, make the initial flyout height smaller */
    .info-flyout {
        height: 400px;
    }

    .info-flyout-content .flyout-main-content {
        flex-direction: row; /* Revert to standard row layout on desktop */
    }
    .flyout-image-column {
        flex: 0 0 40%; /* Image column takes up 40% of the width */
    }
    .flyout-text-column {
        flex-grow: 1;
        overflow-y: auto; /* Allow only the text column to scroll on desktop */
        padding-right: 10px; /* Add some padding for the scrollbar */
    }
}

/* --- Flyout Layout for Map Previews (Desktop) --- */
@media (min-width: 769px) {
    /* For map previews, make the parent container fill the flyout's height */
    .flyout-main-content.map-layout {
        height: 100%;
    }

    /* Make the map column take up the full height of its container */
    .flyout-main-content.map-layout .flyout-image-column {
        height: 100%;
    }
}

/* --- Flyout Map Preview Styles --- */
.flyout-map-preview-container {
    position: relative; /* Needed for absolute positioning of the button */
    width: 100%;
    height: 100%; /* Fill available height by default (for desktop) */
    min-height: 200px; /* Ensure it has a minimum size */
    border-radius: 4px;
    overflow: hidden; /* Clip the map corners */
    background-color: #000; /* Black background while map loads */
}

/* When the mini-map is showing the overworld, use the overworld background */
.flyout-map-preview-container.overworld-preview {
    background: #002131 url('../images/bg.png');
}

.flyout-minimap {
    width: 100%;
    height: 100%;
}

.flyout-go-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 48px;
    height: 48px;
    background-color: #F5D76E;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    transition: transform 0.2s, background-color 0.2s;
    z-index: 10; /* Ensure it's above the map canvas */
}

.flyout-go-btn::before {
    content: '→'; /* Simple arrow as a fallback */
    font-size: 28px;
    color: #111;
    line-height: 48px; /* Vertically center the arrow */
}

/* --- Dark Mode Scrollbar for Filter Menu --- */
.filter-menu-content::-webkit-scrollbar {
    width: 10px;
}

.filter-menu-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2); /* Transparent track */
}

.filter-menu-content::-webkit-scrollbar-thumb {
    background-color: #555; /* Dark grey thumb */
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.filter-menu-content::-webkit-scrollbar-thumb:hover {
    background-color: #777; /* Lighter on hover */
}

/* --- Generic FAB Styles --- */
.fab-btn {
    width: 56px;
    height: 56px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #ccc;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s, background-color 0.2s, color 0.2s, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    position: relative; /* For pseudo-elements if needed */
}

.fab-btn:hover {
    transform: scale(1.05);
}

.fab-btn.active {
    background-color: #F5D76E;
    color: #111;
}

.fab-btn.active:hover {
    background-color: #f7e08b;
}

.fab-btn:disabled {
    background-color: rgba(0, 0, 0, 0.4);
    color: #666;
    cursor: not-allowed;
    transform: none;
}

/* --- Specific FAB Styles --- */
/* Use a pseudo-element to display and color the icon */
#mobile-filters-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../icons/toggles.svg') no-repeat center center;
    background-size: 60%;
    /* Invert the color of the SVG to make it black */
    filter: invert(100%);
    /* For Webkit browsers */
    -webkit-filter: invert(100%);
}

/* The container for the floating action buttons */
.fab-container {
    position: fixed;
    bottom: 52px; /* Above footer + some margin */
    right: 20px;
    z-index: 1002; /* Above map, below modals */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Add vertical space between the buttons */
}

/* Primary FAB style for the main action (filters) */
.fab-btn.fab-btn-primary {
    background-color: #F5D76E;
    color: #111;
}
.fab-btn.fab-btn-primary:hover {
    background-color: #F5D76E; /* Keep the background color the same on hover */
    transform: scale(1); /* Disable the hover scaling effect */
}

.desktop-filters-btn {
    display: none; /* Hidden by default, shown on desktop */
}
/* The close button in the header is always an 'X' */


.filter-menu-toggle .material-symbols-outlined {
    transform: none !important; /* Override desktop rotation */
    font-size: 0; /* Hide the original 'chevron_left' icon text */
}
.filter-menu-toggle .material-symbols-outlined::before {
    content: 'close'; /* The name of the 'X' icon */
    font-size: 24px; /* Restore the icon size */
}

/* --- Desktop and Tablet Styles --- */
@media (min-width: 769px) {
    :root {
        --fab-width: 56px;
        --fab-right-offset: 20px;
        --fab-gap: 20px; /* The desired space between the menu and the FABs */
    }

    /* On desktop, transform the filter menu into a right-side panel */
    .filter-menu {
        left: auto; /* Unset the left position */
        right: 0; /* Anchor to the right */
        width: 450px; /* Increased width for 4-column marker grid */
        height: 100%;
        transform: translateX(100%); /* Start off-screen to the right */
        transition: transform 0.4s ease-in-out;
        box-shadow: -5px 0 15px rgba(0,0,0,0.3); /* Add a shadow for depth */
    }

    .filter-menu-content {
        background-color: transparent; /* The parent already has the background */
    }
    /* On desktop, center the inner content, not the whole panel */
    .filter-menu-content-inner {
        width: 100%;
        max-width: 550px; /* Max width for the content area */
        margin: 0 auto; /* Center the inner container */
    }

    .filter-menu.open {
        /* When open, slide it into view from the right, leaving space for the FABs */
        transform: translateX(0);
        right: calc(var(--fab-width) + var(--fab-right-offset) + var(--fab-gap));
    }

    /* Increase marker sub-type button width on desktop */
   

    /* Use a 4-column grid for labels on desktop */
    #label-toggles,
    #underground-label-toggles-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    }
    

    /* Add a dedicated desktop button */
    .desktop-filters-btn {
        display: flex; /* Show the desktop button */
    }
}

/* --- Mobile and Tablet Styles --- */
@media (max-width: 768px) {
    /* On mobile, the menu is a full-screen slide-up panel */
    
    .filter-menu { /* Anchor to the bottom for slide-up behavior */
        top: auto;
        bottom: 0;
        height: 90vh; /* Take up 90% of the screen height */
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        /* Animation setup */
        transform: translateY(100%);
        transition: transform 0.4s ease-in-out;
    }.filter-menu.open {
        transform: translateY(0);
    }

    /* On mobile, give the map preview a fixed height like the static images */
    .flyout-map-preview-container {
        height: 250px;
    }

    /* Transform the quick tips bar into a simple icon button */
    .quick-tips-container {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
    }

    #quick-tips-text {
        display: none;
    }

    .quick-tips-container .material-symbols-outlined {
        margin-right: 0;
        font-size: 24px; /* Make icon slightly larger to fill the circle */
    }
}

/* Fix for browser deprecation warning: "Specifying overflow: visible on img, video and canvas tags..." */
/* This ensures that content on these elements is clipped to their bounds, improving rendering consistency. */
/* See: https://github.com/WICG/shared-element-transitions/blob/main/debugging_overflow_on_images.md */
img, canvas {
    overflow: clip;
}