/* Nautical Map Theme - Premium Marine Navigation Style */
/* Module: Map Styling
Version: 1.0.2+ios-touch
Date: 2025-12-15
Author: Alex Moustris
Description: Premium nautical color scheme for Leaflet.js map with custom navigation fonts
Changes: [1.0.2] iOS Safari fixes - z-index adjustments for UI above overlay, touch-action, 100dvh viewport fix
Status: STABLE */

@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap&subset=greek');

/* Light Nautical Color Palette */
:root {
/* Dark blue tones for sea */
--sea-deep: rgb(15, 20, 25);
--sea-medium: rgb(46, 92, 138);
--sea-light: rgb(74, 144, 226);

/* Sandy/beige tones for land */
--land-sand: rgb(245, 245, 220);
--land-beige: rgb(232, 220, 192);
--land-light: rgb(240, 230, 199);

/* Contour and accent colors */
--contour-line: rgba(0, 0, 0, 0.2);
--coast-line: rgba(0, 0, 0, 0.4);
--accent-primary: rgb(34, 68, 135);
--accent-gold: rgb(212, 175, 55);
--accent-silver: rgb(192, 192, 192);

/* UI Elements */
--panel-bg: rgba(30, 58, 95, 0.95);
--panel-border: rgba(74, 144, 226, 0.3);
--text-primary: rgb(255, 255, 255);
--text-secondary: rgba(255, 255, 255, 0.7);
}

/* Global layout */
body {
margin: 0;
padding: 0;
font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
background: rgb(30, 53, 95);
color: rgb(255, 255, 255);
overflow: hidden;
}

/* Map Style Dynamic Variables */
body.map-style-light {
  --wind-arrow-stroke: #000000;
}
body.map-style-dark,
body.map-style-satellite {
  --wind-arrow-stroke: #FFFFFF;
}

/* Map Loading Splash Screen */
.map-splash-loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(30, 53, 95);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
}

.map-splash-loader--hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}

.map-splash-loader__content {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}

.map-splash-loader__logo {
width: 120px;
height: auto;
padding: 16px 20px;
background: rgba(255, 255, 255, 0.95);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.map-splash-loader__spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.2);
border-top-color: rgb(74, 144, 226);
border-radius: 50%;
animation: splash-spin 0.8s linear infinite;
}

@keyframes splash-spin {
to {
transform: rotate(360deg);
}
}

.map-splash-loader__text {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.05em;
}

.map-container {
height: 100vh;
height: 100dvh; /* Phase B5: iOS Safari viewport fix - dynamic viewport height */
width: 100vw;
position: relative;
will-change: transform;
contain: layout style paint;
}

.map-header {
position: absolute;
bottom: 72px;
left: 20px;
z-index: 1000;
background: rgba(30, 58, 95, 0.95);
padding: 15px 20px;
border-radius: 8px;
border: 1px solid rgba(74, 144, 226, 0.3);
backdrop-filter: blur(10px);
color: rgb(255, 255, 255);
opacity: 1;
transform: translateY(0);
transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.map-header--hidden {
opacity: 0;
transform: translateY(20px);
pointer-events: none;
}

.map-header-toggle {
position: absolute;
bottom: 20px;
left: 20px;
z-index: 1001;
width: 40px;
height: 40px;
border-radius: 999px;
border: none;
background: var(--accent-primary);
color: rgb(255, 255, 255);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(15, 30, 61, 0.45);
cursor: pointer;
padding: 0;
}

.map-header-toggle i {
font-size: 18px;
}

.map-header-toggle:hover {
background: rgb(26, 53, 95);
}

.map-home-button {
    position: absolute !important;
    top: calc(80px + env(safe-area-inset-top, 0px)) !important;
    left: 16px !important;
z-index: 1300; /* Phase B1: Above nautical overlay (1200) */
width: 40px;
height: 40px;
border-radius: 999px;
border: none;
background: var(--accent-primary);
color: rgb(255, 255, 255);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(15, 30, 61, 0.45);
cursor: pointer;
padding: 0;
touch-action: manipulation; /* Phase B5: iOS Safari touch fix */
-webkit-tap-highlight-color: transparent;
}

.map-home-button i {
font-size: 18px;
}

.map-home-button:hover {
background: rgb(26, 53, 95);
}

.map-header h1 {
margin: 0;
font-size: 16px;
font-weight: 300;
letter-spacing: 1px;
}

.map-header p {
margin: 5px 0 0 0;
font-size: 12px;
opacity: 0.8;
}

.map-logo {
position: absolute;
top: 16px;
left: 16px;
z-index: 1000;
display: inline-flex;
align-items: center;
justify-content: flex-start;
}

.map-logo__img {
max-height: 56px;
width: auto;
display: block;
}

/* Leaflet Map Overrides for Nautical Theme */
.leaflet-container {
background: var(--sea-deep) !important;
font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
cursor: default !important;
}

/* WindGL Canvas Layer */
.meteonav-windgl-canvas {
background: transparent !important;
pointer-events: none;
z-index: 650 !important;
}

/* Wind Color Legend */
.leaflet-top.leaflet-left .wind-legend {
position: fixed !important;
top: 20px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 1000 !important;
margin: 0 !important;
}

.wind-legend {
background: rgba(30, 58, 95, 0.95) !important;
border: 1px solid rgba(74, 144, 226, 0.3) !important;
border-radius: 6px !important;
padding: 6px 8px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
backdrop-filter: blur(10px) !important;
font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
pointer-events: auto !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
will-change: contents;
contain: layout style;
}

.wind-legend--hidden {
display: none !important;
}

/* Wind Legend Close Button */
.wind-legend__close {
width: 20px;
height: 20px;
border-radius: 4px;
border: none;
background: rgba(255, 255, 255, 0.15);
color: rgb(255, 255, 255);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
font-size: 12px;
font-weight: 600;
transition: background 150ms ease;
margin-left: 8px;
flex-shrink: 0;
}

.wind-legend__close:hover {
background: rgba(255, 255, 255, 0.25);
}

.wind-legend__close:active {
background: rgba(255, 255, 255, 0.35);
}

.wind-legend__title {
color: rgb(255, 255, 255) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}

.wind-legend__items {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 3px !important;
align-items: center !important;
}

.wind-legend__item {
display: flex !important;
align-items: center !important;
padding: 0 !important;
}

.wind-legend__color {
width: 28px !important;
height: 22px !important;
border-radius: 2px !important;
border: 1px solid rgb(255, 255, 255) !important;
flex-shrink: 0 !important;
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

.wind-legend__label {
color: rgb(255, 255, 255) !important;
font-size: 10px !important;
font-weight: 600 !important;
white-space: nowrap !important;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.8), 0 0 1px rgba(0, 0, 0, 0.8) !important;
line-height: 1 !important;
}


/* Sea/Land Styling for CartoDB Positron (Light) - use provider's native colors */
.leaflet-tile-pane {
/* Χωρίς φίλτρα: η Carto δίνει ήδη ισορροπημένη light παλέτα με φυσικό μπλε στη θάλασσα */
filter: none;
}

/* Control Panel Styling */
.leaflet-control-container .leaflet-control {
background: var(--panel-bg) !important;
border: 1px solid var(--panel-border) !important;
border-radius: 6px !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
backdrop-filter: blur(10px) !important;
}

.leaflet-control-container .leaflet-control a {
color: var(--text-primary) !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
}

.leaflet-control-container .leaflet-control a:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 3px !important;
}

/* Zoom Control Specific Styling */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
border-bottom: 1px solid var(--panel-border) !important;
border-radius: 0 !important;
}

.leaflet-control-zoom-in {
border-top-left-radius: 5px !important;
border-top-right-radius: 5px !important;
}

.leaflet-control-zoom-out {
border-bottom-left-radius: 5px !important;
border-bottom-right-radius: 5px !important;
border-bottom: none !important;
}

/* MeteoNav Zoom Control - Disabled state for Global View */
.meteonav-zoom-disabled,
.leaflet-control-zoom-in.meteonav-zoom-disabled,
.leaflet-control-zoom-out.meteonav-zoom-disabled {
opacity: 0.35 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}

.meteonav-zoom-disabled:hover,
.leaflet-control-zoom-in.meteonav-zoom-disabled:hover,
.leaflet-control-zoom-out.meteonav-zoom-disabled:hover {
background: transparent !important;
}

/* Attribution Styling */
.leaflet-control-attribution {
background: rgba(30, 58, 95, 0.9) !important;
color: var(--text-secondary) !important;
font-size: 10px !important;
border-radius: 4px !important;
border: 1px solid rgba(74, 144, 226, 0.3) !important;
}

.leaflet-control-attribution a {
color: var(--accent-gold) !important;
}

/* Popup Styling */
.leaflet-popup-content-wrapper {
background: var(--panel-bg) !important;
border: 1px solid var(--panel-border) !important;
border-radius: 8px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
backdrop-filter: blur(15px) !important;
}

.leaflet-popup-content {
color: var(--text-primary) !important;
margin: 15px !important;
font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
font-size: 14px !important;
line-height: 1.4 !important;
}

.leaflet-popup-tip {
background: var(--panel-bg) !important;
border: 1px solid var(--panel-border) !important;
}

/* Close Button - White */
.leaflet-popup-close-button {
color: white !important;
}

/* Station Marker */
.station-marker {
background: transparent;
border: none;
}

.station-marker-inner {
transition: transform 0.2s ease;
}

.station-marker-inner:hover {
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important;
}

/* Bottom Right Controls Group - Coordinates, Zoom, Scale */
.leaflet-bottom.leaflet-right {
display: flex;
flex-direction: column;
gap: 8px;
bottom: 20px;
right: 10px;
}


.leaflet-control-coordinates,
.leaflet-control-zoom-indicator {
display: none !important;
}

/* Scale Control Styling - Hidden but functional */
.leaflet-control-scale {
opacity: 0;
pointer-events: none;
}

/* Position zoom controls below logo, aligned left */
.leaflet-top.leaflet-left {
top: 16px;
left: 16px;
}

.leaflet-top.leaflet-left .leaflet-control-zoom {
top: 120px !important; /* Fixed overlap - below Home button (64px) with ample gap */
left: 0 !important;
margin-left: 0 !important;
margin-top: 0 !important;
}

/* === Marine Wind Navigator Control Panel === */

/* Anchor toggle button */
.nav-panel-toggle,
.settings-panel-toggle {
    position: absolute !important;
    top: calc(64px + env(safe-area-inset-top, 0px)) !important; /* 16px + 40px + 8px gap */
    right: 20px !important;
z-index: 1300; /* Phase B1: Above nautical overlay (1200) */
width: 40px;
height: 40px;
border-radius: 999px;
border: none;
background: var(--accent-primary);
color: rgb(255, 255, 255);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(15, 30, 61, 0.45);
cursor: pointer;
padding: 0;
touch-action: manipulation; /* Phase B5: iOS Safari touch fix */
-webkit-tap-highlight-color: transparent;
}

.settings-panel-toggle {
    top: calc(112px + env(safe-area-inset-top, 0px)) !important; /* 64px + 40px + 8px gap */
}

.nav-panel-toggle i,
.settings-panel-toggle i {
font-size: 18px;
}

.nav-panel-toggle:hover,
.settings-panel-toggle:hover {
background: rgb(26, 53, 95);
}

.nav-panel-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.25);
/* PERFORMANCE: Removed backdrop-filter blur - expensive on mobile */
opacity: 0;
pointer-events: none;
transition: opacity 100ms ease-out;
z-index: 1240; /* Phase B1: Above nautical overlay (1200) */
will-change: opacity;
}

.nav-panel-backdrop--visible {
opacity: 1;
pointer-events: auto;
}

.nav-panel {
position: fixed;
z-index: 1250; /* Phase B1: Above nautical overlay (1200) */
background: rgba(248, 249, 252, 0.98);
color: rgb(17, 24, 39);
box-shadow: 0 18px 45px rgba(15, 24, 40, 0.28);
border-radius: 16px 16px 0 0;
max-height: 75vh;
width: calc(100% - 20px);
left: 10px;
bottom: 0;
transform: translateY(100%);
transition: transform 120ms cubic-bezier(0.19, 1, 0.22, 1);
display: flex;
flex-direction: column;
padding: 14px 18px 18px 18px;
box-sizing: border-box;
will-change: transform;
}

.nav-panel--open {
transform: translateY(0);
}

/* Universal Info Button - Now positioned below settings button */
.map-info-button {
    position: absolute !important;
    top: calc(160px + env(safe-area-inset-top, 0px)) !important; /* 112px + 40px + 8px gap */
    right: 20px !important;
width: 40px;
height: 40px;
border-radius: 999px;
background: var(--accent-primary);
color: rgb(255, 255, 255);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1300;
box-shadow: 0 10px 24px rgba(15, 30, 61, 0.45);
border: none;
padding: 0;
transition: filter 150ms ease;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}

.map-info-button__icon {
width: 20px;
height: 20px;
object-fit: contain;
}

.map-info-button:hover {
background: rgb(26, 53, 95);
}

/* Locate Me Button - Below info button */
.locate-me-button {
    position: absolute !important;
    top: calc(208px + env(safe-area-inset-top, 0px)) !important; /* 160px + 40px + 8px gap */
    right: 20px !important;
width: 40px;
height: 40px;
border-radius: 999px;
background: var(--accent-primary);
color: rgb(255, 255, 255);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1300;
box-shadow: 0 10px 24px rgba(15, 30, 61, 0.45);
border: none;
padding: 0;
font-size: 18px;
transition: filter 150ms ease;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}

.locate-me-button:hover {
background: rgb(26, 53, 95);
}

/* Help Button - Below locate me button */
.map-help-button {
    position: absolute !important;
    top: calc(256px + env(safe-area-inset-top, 0px)) !important; /* 208px + 40px + 8px gap */
    right: 20px !important;
width: 40px;
height: 40px;
border-radius: 999px;
background: var(--accent-primary);
color: rgb(255, 255, 255);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1300;
box-shadow: 0 10px 24px rgba(15, 30, 61, 0.45);
border: none;
padding: 0;
font-size: 18px;
text-decoration: none;
transition: filter 150ms ease;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}

.map-help-button:hover {
background: rgb(26, 53, 95);
color: rgb(255, 255, 255);
}

/* User location marker */
.user-location-marker {
background: transparent;
border: none;
}

.user-location-marker-inner {
width: 16px;
height: 16px;
border-radius: 50%;
background: #e53935;
border: 3px solid #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* NOTE: Info panel styles moved to css/meteonav_info_panel.css */

@media (max-width: 768px) {
.map-home-button,
.nav-panel-toggle,
.settings-panel-toggle,
.map-info-button,
.locate-me-button {
width: 38px;
height: 38px;
right: calc(16px + env(safe-area-inset-right, 0px));
}

/* Recalculate vertical positions for 38px buttons with 6px gap */
.map-home-button {
top: calc(80px + env(safe-area-inset-top, 0px)) !important;
}

.nav-panel-toggle {
top: calc(56px + env(safe-area-inset-top, 0px)) !important; /* 12px + 38px + 6px */
}

.settings-panel-toggle {
top: calc(100px + env(safe-area-inset-top, 0px)) !important; /* 56px + 38px + 6px */
}

.map-info-button {
top: calc(144px + env(safe-area-inset-top, 0px)) !important; /* 100px + 38px + 6px */
}

.locate-me-button {
top: calc(188px + env(safe-area-inset-top, 0px)) !important; /* 144px + 38px + 6px */
}

.map-help-button {
top: calc(232px + env(safe-area-inset-top, 0px)) !important; /* 188px + 38px + 6px */
}
}

/* === Premium UI Tooltips ===
   Note: We do NOT use position: relative on [data-tooltip] because
   map buttons already have position: absolute, which acts as a containing block.
*/
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.95);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 2000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    border: 1px solid rgba(74, 144, 226, 0.3);
    backdrop-filter: blur(4px);
    letter-spacing: 0.02em;
}

/* Right side buttons - Tooltip appears to the LEFT */
.nav-panel-toggle::after,
.settings-panel-toggle::after,
.map-info-button::after,
.locate-me-button::after,
.map-help-button::after {
    right: 52px;
}

/* Left side buttons - Tooltip appears to the RIGHT */
.map-home-button::after {
    left: 52px;
}

/* Hover State */
[data-tooltip]:hover::after {
    opacity: 1;
}

/* Mobile: Disable tooltips to prevent UI clutter and touch conflicts */
@media (max-width: 768px) {
    [data-tooltip]::after {
        display: none !important;
    }
}

@media (max-width: 767px) {

.nav-panel {
bottom: max(0px, env(safe-area-inset-bottom));
padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

/* MOBILE HEADER: Close button LEFT, Title CENTERED */
.nav-panel__header {
position: relative;
flex-direction: row;
justify-content: flex-start;
}

/* Move close button to the LEFT */
.nav-panel__close {
order: -1; /* Puts it first (left side) */
width: 36px !important;
height: 36px !important;
min-width: 36px;
min-height: 36px;
font-size: 22px;
z-index: 9999 !important;
position: relative;
flex-shrink: 0;
margin-right: 12px;
}

/* Center the titles using flex-grow */
.nav-panel__titles {
flex: 1;
text-align: center;
padding-right: 48px; /* Balance for the close button width */
}

.nav-panel-backdrop {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}

.map-logo {
top: calc(16px + env(safe-area-inset-top)) !important;
}



.leaflet-top.leaflet-left .wind-legend {
    top: calc(10px + env(safe-area-inset-top, 10px)) !important;
    left: 105px !important;
    width: fit-content !important;
    max-width: calc(100vw - 115px) !important;
    transform: none !important;
    position: fixed !important;
}

.wind-legend {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 8px !important;
    padding: 4px 6px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
}

.wind-legend__title {
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.01em !important;
}

.wind-legend__items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.wind-legend__items::-webkit-scrollbar {
    display: none;
}

.wind-legend__color {
    width: 18px !important;
    height: 16px !important;
    border-radius: 2px !important;
}

.wind-legend__label {
    font-size: 8px !important;
    font-weight: 700 !important;
}

.leaflet-top.leaflet-left .leaflet-control-zoom {
top: calc(120px + env(safe-area-inset-top)) !important;
right: auto !important;
left: 0 !important;
margin-left: 0 !important;
margin-top: 0 !important;
transform: scale(0.85) !important;
transform-origin: top left !important;
}

.leaflet-bottom.leaflet-right {
display: none !important;
}

.mobile-info-button,
.mobile-info-panel {
display: none !important;
}
}

@media (min-width: 768px) {
.nav-panel {
top: 64px;
bottom: 24px;
right: 70px; /* Moved left to avoid overlap with side buttons */
left: auto;
width: 360px;
max-height: calc(60vh - 48px);
border-radius: 16px;
transform: translateX(120%);
padding: 18px 20px 20px 20px;
}

.nav-panel--open {
transform: translateX(0);
}
}

.nav-panel__handle {
width: 40px;
height: 4px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.9);
margin: 4px auto 10px auto;
touch-action: pan-y; /* Phase B5: Allow vertical swipe for panel close */
}

@media (min-width: 768px) {
.nav-panel__handle {
display: none;
}
}

.nav-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.nav-panel__titles {
display: flex;
flex-direction: column;
gap: 2px;
}

.nav-panel__title {
font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.02em;
margin: 0;
color: rgb(15, 23, 42);
}

.nav-panel__subtitle {
font-size: 11px;
line-height: 1.4;
margin: 0;
color: rgb(107, 114, 128);
}

.nav-panel__close {
border: none;
background: var(--accent-primary);
border-radius: 999px;
width: 32px; /* Larger touch target for mobile */
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
color: white;
transition: background-color 140ms ease-out, color 140ms ease-out;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
z-index: 9999; /* Ensure clickable above other elements */
position: relative; /* Needed for z-index */
}

.nav-panel__close:hover {
background: rgba(15, 30, 61, 0.06);
color: rgb(17, 24, 39);
}

.nav-panel__content {
margin-top: 10px;
padding-top: 4px;
overflow-y: auto;
padding-right: 2px;
}

.nav-section {
padding: 10px 0 6px 0;
}

.nav-section + .nav-section {
border-top: 1px solid rgba(148, 163, 184, 0.3);
}

.nav-section__title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgb(107, 114, 128);
margin: 0 0 8px 0;
}

.nav-about {
padding: 8px 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
}

.nav-about__title {
font-size: 13px;
font-weight: 600;
color: rgb(17, 24, 39);
margin: 0 0 2px 0;
}

.nav-about__subtitle {
font-size: 10px;
color: rgb(107, 114, 128);
margin: 0 0 2px 0;
}

.nav-about__version {
font-size: 9px;
color: rgb(148, 163, 184);
margin: 0;
font-style: italic;
}

.nav-about__logo {
max-width: 120px;
height: auto;
flex-shrink: 0;
}

.nav-about__text {
display: flex;
flex-direction: column;
}

.nav-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 6px 0;
}

.nav-row--toggle + .nav-row--toggle {
border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.nav-row__label-group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}

.nav-row__sublabel {
font-size: 10px;
color: rgba(107, 114, 128, 0.8);
font-style: italic;
line-height: 1.3;
width: 100%;
}

/* Inline sublabel for text like "(Rocks, Reefs, Shallow waters)" */
.nav-row__sublabel--inline {
font-size: 9px;
width: auto;
}

/* Zoom hint badge - pulsing when below required zoom level */
.zoom-hint-badge {
  font-weight: 600;
  font-size: 9px;
  color: rgb(185, 28, 28);
  background: rgb(255, 255, 255);
  border: 1.5px solid rgba(220, 53, 69, 0.45);
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: 0.02em;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Active pulsing state (below required zoom) */
.zoom-hint-badge--active {
  animation: zoomHintPulse 3s ease-in-out infinite;
}

/* Hidden state (at or above required zoom) */
.zoom-hint-badge--hidden {
  display: none;
}

@keyframes zoomHintPulse {
  0%, 100% {
    opacity: 1;
    border-color: rgba(220, 53, 69, 0.45);
  }
  50% {
    opacity: 0.35;
    border-color: rgba(220, 53, 69, 0.15);
  }
}

.nav-row__label {
font-size: 13px;
font-weight: 500;
color: rgb(17, 24, 39);
}

/* Layer icons styling */
.nav-row__icon {
width: 18px;
height: 18px;
object-fit: contain;
flex-shrink: 0;
}

.nav-row__icon--small {
width: 14px;
height: 14px;
}


.nav-row__value {
font-size: 12px;
color: rgb(107, 114, 128);
}

/* Nautical Tools Submenu Styles */
.nav-submenu {
border-radius: 8px;
background: rgba(148, 163, 184, 0.08);
margin: 4px 0;
overflow: hidden;
}

/* Lighthouses submenu - light red accent */
#lighthousesSubmenu {
  background: rgba(220, 53, 69, 0.08);
}

#lighthousesSubmenu .nav-submenu__header {
  background: rgba(220, 53, 69, 0.12);
}

#lighthousesSubmenu .nav-submenu__header:hover {
  background: rgba(220, 53, 69, 0.18);
}

/* Nautical Tools submenu - light orange accent */
#nauticalToolsSubmenu {
  background: rgba(255, 152, 0, 0.08);
}

#nauticalToolsSubmenu .nav-submenu__header {
  background: rgba(255, 152, 0, 0.12);
}

#nauticalToolsSubmenu .nav-submenu__header:hover {
  background: rgba(255, 152, 0, 0.18);
}

.nav-submenu__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 12px;
cursor: pointer;
transition: background-color 150ms ease;
-webkit-tap-highlight-color: transparent;
}

.nav-submenu__header:hover {
background: rgba(148, 163, 184, 0.15);
}

.nav-submenu__arrow {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: rgb(107, 114, 128);
transition: transform 200ms ease;
font-size: 12px;
}

.nav-submenu--open .nav-submenu__arrow {
transform: rotate(180deg);
}

.nav-submenu__content {
max-height: 0;
overflow: hidden;
transition: max-height 250ms ease-out, opacity 200ms ease;
opacity: 0;
padding: 0 8px;
}

.nav-submenu--open .nav-submenu__content {
max-height: 200px;
opacity: 1;
padding: 4px 8px 8px 8px;
}

.nav-submenu__item {
padding: 6px 8px;
margin: 0;
border-radius: 6px;
background: rgba(255, 255, 255, 0.5);
}

.nav-submenu__item + .nav-submenu__item {
margin-top: 4px;
border-top: none;
}

.nav-submenu__item .nav-row__label {
font-size: 12px;
padding-left: 8px;
}

/* Settings submenu groups */
.nav-settings-group {
padding: 8px 4px;
}

.nav-settings-group + .nav-settings-group {
border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.nav-settings-group__title {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgb(107, 114, 128);
margin: 0 0 6px 0;
}

/* Settings submenu - neutral gray accent */
#settingsSubmenu {
  background: rgba(148, 163, 184, 0.08);
  margin-top: 8px;
}

#settingsSubmenu .nav-submenu__header {
  background: rgba(148, 163, 184, 0.12);
}

#settingsSubmenu .nav-submenu__header:hover {
  background: rgba(148, 163, 184, 0.18);
}

#settingsSubmenu .nav-submenu__content {
  max-height: 0;
}

#settingsSubmenu.nav-submenu--open .nav-submenu__content {
  max-height: 500px; /* Larger to fit all settings */
}

.nav-segmented {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
padding: 4px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.18);
}

/* Special styling for units segment (4 buttons) */
#unitsSegment.nav-segmented {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 3px;
padding: 3px;
}

/* Special styling for map style segment (4 buttons: Light, Dark, Auto, Satellite) */
#mapStyleSegment.nav-segmented {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 3px;
padding: 3px;
}

#mapStyleSegment .nav-segmented__button {
padding: 5px 6px;
font-size: 11px;
}

.nav-segmented--compact {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nav-segmented__button {
border: none;
border-radius: 999px;
padding: 6px 10px;
font-size: 12px;
font-weight: 500;
background: transparent;
color: rgb(75, 85, 99);
cursor: pointer;
transition: background-color 140ms ease-out, color 140ms ease-out, box-shadow 140ms ease-out;
white-space: nowrap;
touch-action: manipulation; /* Phase B5: iOS Safari touch fix */
-webkit-tap-highlight-color: transparent;
}

/* Smaller buttons for units segment */
#unitsSegment .nav-segmented__button {
padding: 5px 7px;
font-size: 11px;
font-weight: 500;
}

.nav-segmented__button--active {
background: var(--accent-primary);
color: rgb(249, 250, 251);
box-shadow: 0 8px 18px rgba(34, 68, 135, 0.45);
}

/* Disabled state for segmented buttons (e.g. Wind Visualization in global view) */
.nav-segmented__button--disabled {
opacity: 0.4;
pointer-events: none;
cursor: not-allowed;
}

/* Wind Visualization segment has only 2 buttons */
#windVisSegment.nav-segmented {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Time segment has only 2 buttons */
#timeSegment.nav-segmented {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nav-switch {
position: relative;
display: inline-flex;
align-items: center;
}

.nav-switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}

.nav-switch__track {
width: 38px;
height: 22px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.6);
display: inline-flex;
align-items: center;
padding: 2px;
box-sizing: border-box;
transition: background-color 140ms ease-out;
}

.nav-switch__thumb {
width: 18px;
height: 18px;
border-radius: 999px;
background: rgb(249, 250, 251);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
transform: translateX(0);
transition: transform 140ms ease-out;
}

.nav-switch input:checked + .nav-switch__track {
background: var(--accent-primary);
}

.nav-switch input:checked + .nav-switch__track .nav-switch__thumb {
transform: translateX(16px);
}

/* Disabled toggle state - for zoom-restricted toggles */
.nav-row--disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.nav-row--disabled .nav-switch__track {
  background: rgba(148, 163, 184, 0.3) !important;
}

.nav-row--disabled .nav-switch input:checked + .nav-switch__track {
  background: rgba(148, 163, 184, 0.5) !important;
}

.nav-switch input:disabled + .nav-switch__track {
  background: rgba(148, 163, 184, 0.3) !important;
  cursor: not-allowed;
}

.nav-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
border-radius: 999px;
background: rgba(209, 213, 219, 0.9);
outline: none;
}

.nav-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 999px;
background: var(--accent-primary);
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.35);
cursor: pointer;
margin-top: -6px;
}

.nav-slider::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 999px;
background: var(--accent-primary);
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.35);
cursor: pointer;
}

.nav-slider::-moz-range-track {
height: 4px;
border-radius: 999px;
background: rgba(209, 213, 219, 0.9);
}

.map-center-popup {
text-align: center;
font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
color: rgb(15, 23, 42);
}

/* Layer Control Styling */
.leaflet-control-layers {
background: var(--panel-bg) !important;
border: 1px solid var(--panel-border) !important;
border-radius: 8px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
backdrop-filter: blur(15px) !important;
}

.leaflet-control-layers-list {
background: transparent !important;
}

.leaflet-control-layers-base label,
.leaflet-control-layers-overlays label {
color: var(--text-primary) !important;
font-size: 13px !important;
margin: 8px 0 !important;
}

.leaflet-control-layers-base input,
.leaflet-control-layers-overlays input {
margin-right: 8px !important;
}

.leaflet-control-layers-separator {
border-top: 1px solid var(--panel-border) !important;
margin: 8px 0 !important;
}

/* Minimal Loading Animation */
.leaflet-tile-loading {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
animation: loading 1.5s infinite !important;
}

@keyframes loading {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

/* Crosshair Cursor for Navigation */
.leaflet-container.crosshair {
cursor: crosshair;
}

/* Zoom Indicator Panel */
.zoom-indicator-panel {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 12px;
  background-color: var(--accent-primary, rgb(34, 68, 135));
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  pointer-events: none;
  font-family: 'Inter', system-ui, sans-serif;
  z-index: 1000;
  min-width: 50px;
}
.zoom-indicator-panel.show {
  opacity: 1;
  visibility: visible;
}
.zoom-indicator-panel .zoom-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.9;
  line-height: 1;
  margin-bottom: 3px;
}
.zoom-indicator-panel .zoom-number {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.zoom-indicator-panel.global-mode {
  min-width: 65px;
}
.zoom-indicator-panel.global-mode .zoom-number {
  font-size: 13px;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .zoom-indicator-panel {
    margin-left: 8px;
    padding: 6px 10px;
  }
  .zoom-indicator-panel .zoom-text {
    font-size: 10px;
  }
  .zoom-indicator-panel .zoom-number {
    font-size: 16px;
  }
}

/* Lighthouse Markers */
.lighthouse-marker {
background: transparent;
border: none;
}

.lighthouse-popup-container .leaflet-popup-content {
font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.lighthouse-popup h4 {
margin: 0 0 8px 0;
font-weight: 600;
color: rgb(255, 255, 255);
font-size: 14px;
}

.lighthouse-popup__label {
font-weight: 700;
opacity: 0.9;
}

.lighthouse-popup {
font-size: 12px;
color: rgb(255, 255, 255);
line-height: 1.6;
}

.lighthouse-popup__details {
font-size: 12px;
color: rgb(255, 255, 255);
line-height: 1.6;
}

.lighthouse-popup__item {
margin-bottom: 4px;
}

.lighthouse-popup__item:last-child {
margin-bottom: 0;
}

.lighthouse-popup__item--sequence {
margin-top: 6px;
font-size: 11px;
color: rgb(255, 255, 255);
}

.lighthouse-popup-container .leaflet-popup-content-wrapper {
background: rgb(20, 46, 185) !important;
color: rgb(255, 255, 255) !important;
}

.lighthouse-popup-container .leaflet-popup-tip {
background: rgb(20, 46, 185) !important;
}

/* Port & Marina Markers */
.port-marker {
background: transparent;
border: none;
}

.port-popup-container .leaflet-popup-content-wrapper {
background: rgb(20, 138, 237) !important;
color: rgb(255, 255, 255) !important;
}

.port-popup-container .leaflet-popup-tip {
background: rgb(20, 138, 237) !important;
}

.port-popup h4 {
margin: 0 0 8px 0;
font-weight: 600;
color: rgb(255, 255, 255);
font-size: 14px;
}

.port-popup__label {
font-weight: 700;
opacity: 0.9;
}

.port-popup {
font-size: 12px;
color: rgb(255, 255, 255);
line-height: 1.6;
}

.port-popup__details {
font-size: 12px;
color: rgb(255, 255, 255);
line-height: 1.6;
}

.port-popup__item {
margin-bottom: 4px;
}

.port-popup__item:last-child {
margin-bottom: 0;
}

.port-popup__cluster-title {
margin: 0 0 12px 0;
font-weight: 600;
color: rgb(255, 255, 255);
font-size: 14px;
}

.port-popup__cluster-list {
font-size: 12px;
color: rgb(255, 255, 255);
line-height: 1.8;
max-height: 300px;
overflow-y: auto;
}

.port-popup__cluster-item {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.port-popup__cluster-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}

.port-popup__cluster-item-name {
font-weight: 600;
margin-bottom: 4px;
color: rgb(255, 255, 255);
}

.port-popup__cluster-item-detail {
font-size: 11px;
color: rgba(255, 255, 255, 0.8);
}

/* Shipwreck Markers */
.shipwreck-marker {
background: transparent;
border: none;
}

.shipwreck-marker__circle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: rgb(255, 255, 255);
border: 1px solid rgb(124, 46, 185);
border-radius: 50%;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.shipwreck-marker__image {
object-fit: contain;
}

.shipwreck-marker__cluster-badge {
position: absolute;
top: -2px;
right: -2px;
background: rgb(239, 68, 68);
color: rgb(255, 255, 255);
border-radius: 50%;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
border: 1px solid rgb(255, 255, 255);
}

.shipwreck-popup-container .leaflet-popup-content-wrapper {
background: rgb(124, 46, 185) !important;
color: rgb(255, 255, 255) !important;
}

.shipwreck-popup-container .leaflet-popup-tip {
background: rgb(124, 46, 185) !important;
}

.shipwreck-popup h4 {
margin: 0 0 8px 0;
font-weight: 600;
color: rgb(255, 255, 255);
font-size: 14px;
}

.shipwreck-popup__label {
font-weight: 700;
opacity: 0.9;
}

.shipwreck-popup {
font-size: 12px;
color: rgb(255, 255, 255);
line-height: 1.6;
}

.shipwreck-popup__details {
font-size: 12px;
color: rgb(255, 255, 255);
line-height: 1.6;
}

.shipwreck-popup__item {
margin-bottom: 4px;
}

.shipwreck-popup__item:last-child {
margin-bottom: 0;
}

.shipwreck-popup__item--description {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
font-style: italic;
}

.shipwreck-popup__item--source {
font-size: 11px;
color: rgba(255, 255, 255, 0.85);
margin-top: 4px;
}

.shipwreck-popup__cluster-title {
margin: 0 0 12px 0;
font-weight: 600;
color: rgb(255, 255, 255);
font-size: 14px;
}

.shipwreck-popup__cluster-list {
font-size: 12px;
color: rgb(255, 255, 255);
line-height: 1.8;
max-height: 300px;
overflow-y: auto;
}

.shipwreck-popup__cluster-item {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.shipwreck-popup__cluster-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}

.shipwreck-popup__cluster-item-name {
font-weight: 600;
margin-bottom: 4px;
color: rgb(255, 255, 255);
}

.shipwreck-popup__cluster-item-detail {
font-size: 11px;
color: rgba(255, 255, 255, 0.8);
}

/* Hazard Markers */
.hazard-marker {
background: transparent;
border: none;
}

.hazard-marker__circle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: rgb(255, 255, 255);
border: 1px solid rgb(100, 100, 100);
border-radius: 50%;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.hazard-marker__icon {
display: block;
}

.hazard-marker__path {
fill: currentColor;
stroke: rgb(0, 0, 0);
stroke-width: 0.5;
}

.hazard-marker--danger-3 .hazard-marker__path {
color: rgb(200, 30, 30);
}

.hazard-marker--danger-2 .hazard-marker__path {
color: rgb(230, 100, 20);
}

.hazard-marker--danger-1 .hazard-marker__path {
color: rgb(240, 180, 40);
}

.hazard-marker--danger-0 .hazard-marker__path {
color: rgb(180, 180, 180);
}

.hazard-marker__cluster-badge {
position: absolute;
top: -2px;
right: -2px;
background: rgb(239, 68, 68);
color: rgb(255, 255, 255);
border-radius: 50%;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
border: 1px solid rgb(255, 255, 255);
}

.hazard-popup-container .leaflet-popup-content-wrapper {
background: rgb(124, 46, 185) !important;
color: rgb(255, 255, 255) !important;
}

.hazard-popup-container .leaflet-popup-tip {
background: rgb(124, 46, 185) !important;
}

.hazard-popup h4 {
margin: 0 0 8px 0;
font-weight: 600;
color: rgb(255, 255, 255);
font-size: 14px;
}

.hazard-popup__label {
font-weight: 700;
opacity: 0.9;
}

.hazard-popup {
font-size: 12px;
color: rgb(255, 255, 255);
line-height: 1.6;
}

.hazard-popup__details {
font-size: 12px;
color: rgb(255, 255, 255);
line-height: 1.6;
}

.hazard-popup__item {
margin-bottom: 4px;
}

.hazard-popup__item:last-child {
margin-bottom: 0;
}

.hazard-popup__item--danger {
font-weight: 600;
margin-bottom: 6px;
}

.hazard-popup__item--danger-3 {
color: rgb(200, 30, 30);
}

.hazard-popup__item--danger-2 {
color: rgb(230, 100, 20);
}

.hazard-popup__item--danger-1 {
color: rgb(240, 180, 40);
}

.hazard-popup__item--danger-0 {
color: rgb(180, 180, 180);
}

.hazard-popup__item--codes {
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
margin-top: 8px;
font-style: italic;
}

.hazard-popup__separator {
height: 1px;
background: rgba(255, 255, 255, 0.2);
margin: 8px 0;
}

.hazard-popup__cluster-title {
margin: 0 0 12px 0;
font-weight: 600;
color: rgb(255, 255, 255);
font-size: 14px;
}

.hazard-popup__cluster-list {
font-size: 12px;
color: rgb(255, 255, 255);
line-height: 1.8;
max-height: 300px;
overflow-y: auto;
}

.hazard-popup__cluster-item {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.hazard-popup__cluster-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}

.hazard-popup__cluster-item-name {
font-weight: 600;
margin-bottom: 4px;
color: rgb(255, 255, 255);
}

.hazard-popup__cluster-item-detail {
font-size: 11px;
color: rgba(255, 255, 255, 0.8);
}

.hazard-popup__cluster-item-detail--danger-3 {
color: rgb(200, 30, 30);
}

.hazard-popup__cluster-item-detail--danger-2 {
color: rgb(230, 100, 20);
}

.hazard-popup__cluster-item-detail--danger-1 {
color: rgb(240, 180, 40);
}

.hazard-popup__cluster-item-detail--danger-0 {
color: rgb(180, 180, 180);
}

/* MeteoNav Time Navigation Panel */
.meteonav-time-panel {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
display: flex;
align-items: center;
gap: 14px;
background: rgba(30, 58, 95, 0.92);
backdrop-filter: blur(12px);
border: 1px solid rgba(74, 144, 226, 0.35);
border-radius: 10px;
padding: 12px 18px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
min-width: 300px;
justify-content: space-between;
font-family: 'Inter', 'Noto Sans', system-ui, sans-serif;
}

.meteonav-time-button {
background: rgba(74, 144, 226, 0.25);
border: 1px solid rgba(74, 144, 226, 0.45);
color: rgb(255, 255, 255);
width: 36px;
height: 36px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 500;
transition: background-color 100ms ease-out, border-color 100ms ease-out;
padding: 0;
user-select: none;
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.2);
touch-action: manipulation; /* PERFORMANCE: Remove 300ms touch delay */
-webkit-tap-highlight-color: transparent;
}

.meteonav-time-button:hover:not(:disabled) {
background: rgba(74, 144, 226, 0.45);
border-color: rgba(74, 144, 226, 0.65);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(15, 23, 42, 0.3);
}

.meteonav-time-button:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.2);
}

.meteonav-time-button:disabled {
opacity: 0.3;
cursor: not-allowed;
background: rgba(74, 144, 226, 0.08);
border-color: rgba(74, 144, 226, 0.15);
box-shadow: none;
}

.meteonav-time-button:disabled:hover {
transform: none;
box-shadow: none;
background: rgba(74, 144, 226, 0.08);
border-color: rgba(74, 144, 226, 0.15);
}

.meteonav-time-label-wrapper {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 0 8px;
}

.meteonav-time-progress {
width: 100%;
min-height: 20px;
background: rgba(30, 53, 95, 0.95);
border-radius: 4px;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid rgba(74, 144, 226, 0.6);
box-shadow: 0 2px 8px rgba(30, 53, 95, 0.5);
padding: 4px 8px;
box-sizing: border-box;
}

.meteonav-time-progress-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 30%;
background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.6), transparent);
border-radius: 0;
animation: meteonav-progress-indeterminate 1.4s ease-in-out infinite;
}

.meteonav-time-progress-text {
position: relative;
z-index: 10;
color: rgba(255, 255, 255, 0.9);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
font-family: 'Inter', 'Noto Sans', system-ui, sans-serif;
animation: meteonav-progress-pulse 1.2s ease-in-out infinite;
padding: 2px 0;
margin: 0;
}

@keyframes meteonav-progress-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}

@keyframes meteonav-progress-indeterminate {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(350%);
}
}

.meteonav-time-label {
color: rgb(255, 255, 255);
font-size: 11px;
font-weight: 500;
text-align: center;
white-space: nowrap;
font-family: 'Inter', 'Noto Sans', system-ui, sans-serif;
letter-spacing: 0.2px;
text-shadow: 0 1px 2px rgba(15, 23, 42, 0.3);
}

#meteonav-time-label {
font-size: 12px;
}

/* Wind and Wave Tooltips */
.wind-tooltip,
.wave-tooltip {
font-family: 'Inter', 'Noto Sans', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
color: rgb(15, 23, 42);
background-color: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(148, 163, 184, 0.4);
border-radius: 4px;
padding: 4px 6px;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
pointer-events: none;
white-space: nowrap;
}

.leaflet-tooltip.wind-tooltip,
.leaflet-tooltip.wave-tooltip {
background-color: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(148, 163, 184, 0.4);
color: rgb(15, 23, 42);
}

/* Wind and Wave Popups */
.wind-popup,
.wave-popup {
font-family: 'Inter', 'Noto Sans', system-ui, sans-serif !important;
font-size: 11px !important;
color: rgb(255, 255, 255) !important;
line-height: 1.5 !important;
}

.wind-popup__title,
.wave-popup__title {
margin: 0 0 8px 0 !important;
font-size: 12px !important;
font-weight: 600 !important;
color: rgb(255, 255, 255) !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}

.wind-popup__icon,
.wave-popup__icon {
width: 16px !important;
height: 16px !important;
display: inline-block !important;
filter: brightness(0) invert(1) !important;
flex-shrink: 0 !important;
}

.wind-popup__separator,
.wave-popup__separator {
margin: 6px 0 8px 0 !important;
color: rgba(255, 255, 255, 0.5) !important;
font-size: 10px !important;
letter-spacing: 1px !important;
user-select: none !important;
}

.wind-popup div,
.wave-popup div {
margin: 3px 0 !important;
line-height: 1.4 !important;
}

.wind-popup strong,
.wave-popup strong {
font-weight: 600 !important;
color: rgb(255, 255, 255) !important;
}

/* Wind Popup - Forecast Button */
.wind-popup__forecast-btn {
display: block;
width: 100%;
margin-top: 10px;
padding: 8px 12px;
background: rgba(74, 144, 226, 0.3);
border: 1px solid rgba(74, 144, 226, 0.5);
border-radius: 4px;
color: rgb(255, 255, 255);
font-family: 'Inter', 'Noto Sans', system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.wind-popup__forecast-btn:hover {
background: rgba(74, 144, 226, 0.5);
border-color: rgba(74, 144, 226, 0.7);
}

.wind-popup__forecast-btn:active {
background: rgba(74, 144, 226, 0.6);
}

/* Wind Popup - Forecast Container */
.wind-popup__forecast-container {
  margin-top: 8px;
}

/* Wind Popup - Loader */
.wind-popup__loader {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
color: rgba(255, 255, 255, 0.8);
font-size: 11px;
}

.wind-popup__spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: rgb(74, 144, 226);
border-radius: 50%;
animation: wind-popup-spin 0.8s linear infinite;
}

@keyframes wind-popup-spin {
to { transform: rotate(360deg); }
}

/* Wind Popup - Error and No Data */
.wind-popup__error,
.wind-popup__no-data {
  padding: 10px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-style: italic;
}

/* ========================================
   FORECAST SMART OVERLAY
   Custom overlay that positions itself optimally
   ======================================== */
.forecast-smart-overlay {
  background: rgb(34, 68, 135);
  border: 1px solid rgba(74, 144, 226, 0.5);
  border-radius: 8px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.7);
  color: #fff;
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-size: 13px;
  overflow: hidden;
}

.forecast-smart-overlay__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(74, 144, 226, 0.3);
}

.forecast-smart-overlay__header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.forecast-smart-overlay__close {
  background: rgba(255, 255, 255, 0.9);
  color: rgb(34, 68, 135);
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 18px;
  line-height: 24px;
  cursor: pointer;
  transition: background 0.2s;
}

.forecast-smart-overlay__close:hover {
  background: #fff;
}

.forecast-smart-overlay__info {
  padding: 10px 15px;
  background: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(74, 144, 226, 0.2);
  font-size: 12px;
}

.forecast-smart-overlay__info div {
  margin: 4px 0;
}

.forecast-smart-overlay__content {
  padding: 10px 15px;
  max-height: 280px;
  overflow-y: auto;
}

/* Forecast list styling within smart overlay */
.forecast-smart-overlay .wind-popup__forecasts-header {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

.forecast-smart-overlay .wind-popup__forecasts-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ========================================
   WIND SMART OVERLAY - Unified overlay system
   Replaces Leaflet popup for consistent behavior
   ======================================== */
.wind-smart-overlay {
  position: absolute;
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-size: 13px;
  z-index: 10000;
}

.wind-smart-overlay__content {
  background: rgb(34, 68, 135);
  border: 1px solid rgba(74, 144, 226, 0.5);
  border-radius: 8px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.7);
  color: #fff;
  overflow: hidden;
}

/* Dynamic Tip - positioned based on overlay direction */
.wind-smart-overlay__tip {
  position: absolute;
  width: 0;
  height: 0;
}

/* Tip on TOP (overlay is below marker) */
.wind-smart-overlay--tip-top .wind-smart-overlay__tip {
  top: -10px;
  left: var(--tip-offset, 50%);
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgb(34, 68, 135);
}

/* Tip on BOTTOM (overlay is above marker) */
.wind-smart-overlay--tip-bottom .wind-smart-overlay__tip {
  bottom: -10px;
  left: var(--tip-offset, 50%);
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgb(34, 68, 135);
}

/* Tip on LEFT (overlay is to the right of marker) */
.wind-smart-overlay--tip-left .wind-smart-overlay__tip {
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid rgb(34, 68, 135);
}

/* Tip on RIGHT (overlay is to the left of marker) */
.wind-smart-overlay--tip-right .wind-smart-overlay__tip {
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid rgb(34, 68, 135);
}

.wind-smart-overlay__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(74, 144, 226, 0.3);
}

.wind-smart-overlay__header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.wind-smart-overlay__close {
  background: rgba(255, 255, 255, 0.9);
  color: rgb(34, 68, 135);
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 22px;
  cursor: pointer;
  transition: background 0.2s;
}

.wind-smart-overlay__close:hover {
  background: #fff;
}

.wind-smart-overlay__body {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
}

.wind-smart-overlay__body div {
  margin: 2px 0;
}

.wind-smart-overlay__forecast-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  background: rgba(74, 144, 226, 0.4);
  border: 1px solid rgba(74, 144, 226, 0.6);
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.wind-smart-overlay__forecast-btn:hover {
  background: rgba(74, 144, 226, 0.6);
  border-color: rgba(74, 144, 226, 0.8);
}

.wind-smart-overlay__forecasts {
  border-top: 1px solid rgba(74, 144, 226, 0.3);
  padding: 10px 12px;
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Fix for smooth scrolling on iOS Safari */
  touch-action: pan-y; /* Ensure touch swiping doesn't pan the map */
}

/* Ensure scrollbars are visible on Safari (macOS & iOS) */
.wind-smart-overlay__forecasts::-webkit-scrollbar {
  width: 6px;
  display: block !important;
}

.wind-smart-overlay__forecasts::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.wind-smart-overlay__forecasts::-webkit-scrollbar-thumb {
  background: rgba(74, 144, 226, 0.6);
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.wind-smart-overlay__forecasts::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 144, 226, 0.8);
}

/* Active Point Highlight Circle */
.point-highlight-circle {
  pointer-events: none;
  z-index: 1000;
}

.point-highlight-circle svg circle {
  stroke: #ff3b30;
  stroke-width: 2.5px;
  fill: none;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: highlight-draw 0.6s ease-out forwards;
}

@keyframes highlight-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.point-highlight-circle--pulse svg circle {
  animation: highlight-draw 0.6s ease-out forwards, hl-pulse 2s infinite 0.6s;
}

@keyframes hl-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 0.4; }
  100% { transform: scale(1); opacity: 0.8; }
}

/* Ensure no nested scrolling inside the smart overlay */
.wind-smart-overlay .wind-popup__forecasts-header {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 12px;
}

.wind-smart-overlay .wind-popup__forecasts-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: visible !important;  /* No scroll here - parent handles it */
  max-height: none !important;
}

/* ========================================
   Smart Floating Overlay for WAVES
   Replaces Leaflet popup for consistent behavior
   ======================================== */
.wave-smart-overlay {
  position: absolute;
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-size: 13px;
  z-index: 10000;
}

.wave-smart-overlay__content {
  background: rgb(34, 68, 135);
  border: 1px solid rgba(74, 144, 226, 0.5);
  border-radius: 8px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.7);
  color: #fff;
  overflow: hidden;
}

/* Dynamic Tip - positioned based on overlay direction */
.wave-smart-overlay__tip {
  position: absolute;
  width: 0;
  height: 0;
}

/* Tip on TOP (overlay is below marker) */
.wave-smart-overlay--tip-top .wave-smart-overlay__tip {
  top: -10px;
  left: var(--tip-offset, 50%);
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgb(34, 68, 135);
}

/* Tip on BOTTOM (overlay is above marker) */
.wave-smart-overlay--tip-bottom .wave-smart-overlay__tip {
  bottom: -10px;
  left: var(--tip-offset, 50%);
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgb(34, 68, 135);
}

/* Tip on LEFT (overlay is to the right of marker) */
.wave-smart-overlay--tip-left .wave-smart-overlay__tip {
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid rgb(34, 68, 135);
}

/* Tip on RIGHT (overlay is to the left of marker) */
.wave-smart-overlay--tip-right .wave-smart-overlay__tip {
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid rgb(34, 68, 135);
}

.wave-smart-overlay__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(74, 144, 226, 0.3);
}

.wave-smart-overlay__header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.wave-smart-overlay__close {
  background: rgba(255, 255, 255, 0.9);
  color: rgb(34, 68, 135);
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 22px;
  cursor: pointer;
  transition: background 0.2s;
}

.wave-smart-overlay__close:hover {
  background: #fff;
}

.wave-smart-overlay__body {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
}

.wave-smart-overlay__body div {
  margin: 2px 0;
}

.wave-smart-overlay__forecast-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  background: rgba(74, 144, 226, 0.4);
  border: 1px solid rgba(74, 144, 226, 0.6);
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.wave-smart-overlay__forecast-btn:hover {
  background: rgba(74, 144, 226, 0.6);
  border-color: rgba(74, 144, 226, 0.8);
}

.wave-smart-overlay__forecasts {
  border-top: 1px solid rgba(74, 144, 226, 0.3);
  padding: 10px 12px;
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.wave-smart-overlay__forecasts::-webkit-scrollbar {
  width: 6px;
  display: block !important;
}

.wave-smart-overlay__forecasts::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.wave-smart-overlay__forecasts::-webkit-scrollbar-thumb {
  background: rgba(74, 144, 226, 0.6);
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.wave-smart-overlay__forecasts::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 144, 226, 0.8);
}

.wave-smart-overlay .wave-popup__forecasts-header {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 12px;
}

.wave-smart-overlay .wave-popup__forecasts-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: visible !important;
  max-height: none !important;
}

.wind-popup__error {
  color: rgb(255, 120, 120);
}

/* Wind Popup - Forecasts Header */
.wind-popup__forecasts-header {
font-weight: 600;
font-size: 11px;
color: rgb(255, 255, 255);
padding: 8px 0 6px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 6px;
}

/* Wind Popup - Forecasts List */
.wind-popup__forecasts-list {
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px;
}

/* Custom scrollbar for forecast list */
.wind-popup__forecasts-list::-webkit-scrollbar {
width: 6px;
}

.wind-popup__forecasts-list::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}

.wind-popup__forecasts-list::-webkit-scrollbar-thumb {
background: rgba(74, 144, 226, 0.5);
border-radius: 3px;
}

.wind-popup__forecasts-list::-webkit-scrollbar-thumb:hover {
background: rgba(74, 144, 226, 0.7);
}

/* Wind Popup - Forecast Row */
.wind-popup__forecast-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
margin-bottom: 1px;
background: rgba(0, 0, 0, 0.15);
border-radius: 3px;
font-size: 11px;
color: rgb(255, 255, 255);
}

.wind-popup__forecast-row:nth-child(even) {
background: rgba(255, 255, 255, 0.08);
}

.wind-popup__forecast-row:hover {
background: rgba(74, 144, 226, 0.3);
}

/* Highlight the row matching the current FTimeIndex (popup header time) */
.wind-popup__forecast-row--current {
background: rgba(212, 175, 55, 0.25) !important;
border-left: 3px solid #d4af37;
}

.wind-popup__forecast-time {
flex: 1;
font-size: 11px;
color: rgba(255, 255, 255, 0.95);
/* Let the time wrap to a second line if space is tight on very small screens */
}

.wind-popup__forecast-arrow {
flex: 0 0 18px;
display: flex;
align-items: center;
justify-content: center;
}

.wind-popup__forecast-speed {
flex: 0 0 105px;
text-align: right;
font-weight: 500;
white-space: nowrap;
}

/* Wind Arrow Popup - Same background as home button */
.wind-arrow-popup .leaflet-popup-content-wrapper {
  background: rgb(34, 68, 135) !important;
  border: 1px solid rgba(74, 144, 226, 0.5) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
  min-width: 400px !important;
}

.wind-arrow-popup .leaflet-popup-tip {
  background: rgb(34, 68, 135) !important;
}

.wind-arrow-popup .leaflet-popup-content {
  color: rgb(255, 255, 255) !important;
  margin: 10px !important;
  width: auto !important;
  min-width: 370px !important;
}

/* Wave Popup Container - Same background as home button */
.wave-popup-container .leaflet-popup-content-wrapper {
background: rgb(34, 68, 135) !important;
border: 1px solid rgba(74, 144, 226, 0.5) !important;
border-radius: 6px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

.wave-popup-container .leaflet-popup-tip {
background: rgb(34, 68, 135) !important;
}

.wave-popup-container .leaflet-popup-content {
color: rgb(255, 255, 255) !important;
margin: 10px !important;
}

/* Close button - white background for wind and wave popups */
.wind-arrow-popup .leaflet-popup-close-button,
.wave-popup-container .leaflet-popup-close-button {
background: rgb(255, 255, 255) !important;
color: rgb(34, 68, 135) !important;
width: 20px !important;
height: 20px !important;
line-height: 20px !important;
font-size: 14px !important;
border-radius: 3px !important;
opacity: 0.9 !important;
transition: opacity 0.2s ease !important;
top: 6px !important;
right: 6px !important;
}

.wind-arrow-popup .leaflet-popup-close-button:hover,
.wave-popup-container .leaflet-popup-close-button:hover {
  opacity: 1 !important;
  background: rgb(255, 255, 255) !important;
}

/* Wind Arrow Popup - BELOW variant (used for forecasts) */
/* Hide the tip since it doesn't look correct when popup is below marker */
.wind-arrow-popup--below .leaflet-popup-tip-container {
  display: none !important;
}

/* BELOW popup: No scrollbar on wrapper or content */
.wind-arrow-popup--below .leaflet-popup-content-wrapper {
  overflow: visible !important;
  max-height: none !important;
}

.wind-arrow-popup--below .leaflet-popup-content {
  overflow: visible !important;
  max-height: none !important;
}

/* Only the forecasts LIST should scroll (not the container) */
.wind-arrow-popup--below .wind-popup__forecasts-list {
  max-height: 250px !important;
  overflow-y: auto !important;
}

/* Wind Arrow Markers - ensure they don't interfere with map */
.wind-arrow-marker {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}

/* Wave Markers - ensure they don't interfere with map click in global view */
.wave-marker {
background: transparent !important;
border: none !important;
box-shadow: none !important;
pointer-events: none !important;
}

/* Wave Markers in LOCAL view - enable interaction for popups */
body.meteonav-local-view .wave-marker {
pointer-events: auto !important;
cursor: pointer !important;
}

/* Wind Diagnostic Markers */
.wind-diagnostic-marker {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}

/* Responsive Design */
@media (max-width: 768px) {
.leaflet-control-container .leaflet-control {
margin: 8px !important;
}

.leaflet-control-attribution {
font-size: 9px !important;
}

.meteonav-time-panel {
bottom: 10px;
left: 50%;
transform: translateX(-50%);
min-width: auto;
max-width: 75vw;
width: auto;
padding: 8px 12px;
padding-bottom: calc(8px + env(safe-area-inset-bottom, 8px));
}

.meteonav-time-label {
font-size: 10px;
}

.meteonav-time-progress {
height: 2.5px;
}

.meteonav-time-button {
width: 28px;
height: 28px;
font-size: 12px;
}
}

/* MeteoNav Wind Arrows (LOCAL mode) */
.meteonav-wind-arrow {
background: transparent !important;
border: none !important;
pointer-events: auto !important;
z-index: 651 !important;
display: block !important;
cursor: pointer !important;
will-change: transform;
contain: layout style paint;
}

.meteonav-wind-arrow svg {
display: block !important;
width: 100% !important;
height: 100% !important;
opacity: 0.9 !important;
pointer-events: none !important;
}

/* Ensure Leaflet marker container is visible and clickable */
.leaflet-marker-icon.meteonav-wind-arrow {
background: transparent !important;
border: none !important;
z-index: 651 !important;
pointer-events: auto !important;
cursor: pointer !important;
}

/* Ensure marker pane has correct z-index */
.leaflet-marker-pane .meteonav-wind-arrow {
z-index: 651 !important;
}

/* MeteoNav WindGL Canvas (GLOBAL and LOCAL streamlines) */
.meteonav-windgl-canvas {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
z-index: 650;
}

/* Nautical Tools - Compass Widget (bottom-left, above zoom controls and scale bar) */
.meteonav-compass {
position: fixed;
bottom: 100px;
left: 20px;
z-index: 1000;
width: 80px;
height: 80px;
background: rgba(30, 58, 95, 0.9);
border: 1px solid rgba(74, 144, 226, 0.3);
border-radius: 50%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
pointer-events: none;
}

.meteonav-compass__rose {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
}

.meteonav-compass__direction {
position: absolute;
color: rgb(255, 255, 255);
font-size: 9px;
font-weight: 600;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
line-height: 1;
}

.meteonav-compass__direction--n {
top: 4px;
left: 50%;
transform: translateX(-50%);
}

.meteonav-compass__direction--ne {
top: 12px;
right: 12px;
}

.meteonav-compass__direction--e {
top: 50%;
right: 4px;
transform: translateY(-50%);
}

.meteonav-compass__direction--se {
bottom: 12px;
right: 12px;
}

.meteonav-compass__direction--s {
bottom: 4px;
left: 50%;
transform: translateX(-50%);
}

.meteonav-compass__direction--sw {
bottom: 12px;
left: 12px;
}

.meteonav-compass__direction--w {
top: 50%;
left: 4px;
transform: translateY(-50%);
}

.meteonav-compass__direction--nw {
top: 12px;
left: 12px;
}

.meteonav-compass__center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 4px;
background: rgb(255, 200, 0);
border-radius: 50%;
}

.meteonav-compass__north-pointer {
position: absolute;
bottom: 50%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 18px solid rgb(255, 0, 0);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

/* Nautical Tools - Info Box */
.meteonav-tools-info {
position: absolute;
z-index: 1001;
background: rgba(30, 58, 95, 0.95);
border: 1px solid rgba(74, 144, 226, 0.3);
border-radius: 4px;
padding: 6px 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 11px;
color: rgb(255, 255, 255);
pointer-events: none;
white-space: nowrap;
transform: translateZ(0);
}

.meteonav-tools-info__bearing {
font-weight: 600;
margin-right: 8px;
}

.meteonav-tools-info__distance {
font-weight: 600;
color: rgb(255, 200, 0);
}

/* Nautical Tools - Popup Styles */
.meteonav-tools-popup-container .leaflet-popup-content-wrapper {
background: rgba(30, 58, 95, 0.95) !important;
border: 1px solid rgba(74, 144, 226, 0.3) !important;
border-radius: 6px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
backdrop-filter: blur(10px) !important;
padding: 0 !important;
}

.meteonav-tools-popup-container .leaflet-popup-content {
margin: 0 !important;
padding: 12px !important;
color: rgb(255, 255, 255) !important;
font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
font-size: 12px !important;
line-height: 1.5 !important;
min-width: 200px !important;
}

.meteonav-tools-popup__text {
margin: 4px 0;
color: rgb(255, 255, 255);
}

.meteonav-tools-popup__separator {
height: 1px;
background: rgba(74, 144, 226, 0.3);
margin: 8px 0;
}

.meteonav-tools-popup__row {
margin: 6px 0;
color: rgb(255, 255, 255);
}

.meteonav-tools-popup__row strong {
color: rgb(255, 200, 0);
font-weight: 600;
margin-right: 6px;
}

.meteonav-tools-popup__buttons {
display: flex;
gap: 8px;
margin-top: 8px;
justify-content: flex-end;
}

.meteonav-tools-popup__button {
padding: 6px 14px;
border: 1px solid rgba(74, 144, 226, 0.3);
border-radius: 4px;
background: rgba(74, 144, 226, 0.2);
color: rgb(255, 255, 255);
font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background-color 150ms ease-out;
}

.meteonav-tools-popup__button:hover {
background: rgba(74, 144, 226, 0.4);
}

.meteonav-tools-popup__button--clear {
background: rgba(220, 53, 69, 0.3);
border-color: rgba(220, 53, 69, 0.5);
}

.meteonav-tools-popup__button--clear:hover {
background: rgba(220, 53, 69, 0.5);
}

/* Placenames Labels - Permanent text labels (like old nautical charts) */
.placename-label-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
pointer-events: none !important;
text-align: left !important;
}

.placename-label {
font-family: 'Times New Roman', 'Georgia', 'Garamond', serif !important;
font-style: italic !important;
font-size: 13px !important;
font-weight: 400 !important;
color: rgba(0, 0, 0, 0.7) !important;
text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.9),
-1px -1px 3px rgba(255, 255, 255, 0.9),
1px -1px 3px rgba(255, 255, 255, 0.9),
-1px 1px 3px rgba(255, 255, 255, 0.9),
0 0 4px rgba(255, 255, 255, 0.8) !important;
white-space: nowrap !important;
pointer-events: none !important;
user-select: none !important;
opacity: 0.75 !important;
display: inline-block !important;
line-height: 1.2 !important;
}

/* Responsive font size based on zoom */
@media (min-width: 768px) {
.placename-label {
font-size: 14px !important;
}
}

/* Larger labels at higher zoom levels (via JavaScript adjustment if needed) */
.leaflet-zoom-anim .placename-label {
transition: opacity 250ms ease-out;
}

/* Island Labels - Vintage Nautical Chart Style (Classic British Admiralty) */
.island-label-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
pointer-events: none !important;
text-align: left !important;
}

.island-label {
font-family: 'EB Garamond', 'Garamond', 'DejaVu Serif', serif !important;
font-style: italic !important;
font-weight: 400 !important;
color: rgb(72, 64, 50) !important; /* Warm dark ink tone */
white-space: nowrap !important;
pointer-events: none !important;
user-select: none !important;
display: inline-block !important;
line-height: 1.3 !important;
letter-spacing: 0.8px !important;
}

/* Size-specific styles - Fixed font sizes (not zoom-scaled) */
.island-label--xl {
font-size: 17pt !important;
/* Halo: 1.2px buffer, color rgb(248, 247, 242) - cartographic buffer, no blur/glow */
text-shadow:
-1.2px -1.2px 0 rgb(248, 247, 242),
1.2px -1.2px 0 rgb(248, 247, 242),
-1.2px 1.2px 0 rgb(248, 247, 242),
1.2px 1.2px 0 rgb(248, 247, 242),
0 -1.2px 0 rgb(248, 247, 242),
0 1.2px 0 rgb(248, 247, 242),
-1.2px 0 0 rgb(248, 247, 242),
1.2px 0 0 rgb(248, 247, 242) !important;
}

.island-label--l {
font-size: 15pt !important;
    opacity: 0.9 !important;
/* Halo: 1.2px buffer, color rgb(248, 247, 242) - cartographic buffer, no blur/glow */
text-shadow:
-1.2px -1.2px 0 rgb(248, 247, 242),
1.2px -1.2px 0 rgb(248, 247, 242),
-1.2px 1.2px 0 rgb(248, 247, 242),
1.2px 1.2px 0 rgb(248, 247, 242),
0 -1.2px 0 rgb(248, 247, 242),
0 1.2px 0 rgb(248, 247, 242),
-1.2px 0 0 rgb(248, 247, 242),
1.2px 0 0 rgb(248, 247, 242) !important;
}

.island-label--m {
font-size: 12pt !important;
    opacity: 0.8 !important;
/* Halo: 1.2px buffer, color rgb(248, 247, 242) - cartographic buffer, no blur/glow */
text-shadow:
-1.2px -1.2px 0 rgb(248, 247, 242),
1.2px -1.2px 0 rgb(248, 247, 242),
-1.2px 1.2px 0 rgb(248, 247, 242),
1.2px 1.2px 0 rgb(248, 247, 242),
0 -1.2px 0 rgb(248, 247, 242),
0 1.2px 0 rgb(248, 247, 242),
-1.2px 0 0 rgb(248, 247, 242),
1.2px 0 0 rgb(248, 247, 242) !important;
}

.island-label--s {
font-size: 10pt !important;
    opacity: 0.7 !important;  /* Πιο διαφανή τα μικρά */
/* Halo: 1.0px buffer, color rgb(248, 247, 242) - cartographic buffer, no blur/glow */
text-shadow:
-1.0px -1.0px 0 rgb(248, 247, 242),
1.0px -1.0px 0 rgb(248, 247, 242),
-1.0px 1.0px 0 rgb(248, 247, 242),
1.0px 1.0px 0 rgb(248, 247, 242),
0 -1.0px 0 rgb(248, 247, 242),
0 1.0px 0 rgb(248, 247, 242),
-1.0px 0 0 rgb(248, 247, 242),
1.0px 0 0 rgb(248, 247, 242) !important;
}

.island-label--xs {
font-size: 9pt !important;
    opacity: 0.7 !important;  /* Πιο διαφανή τα μικρά */
/* Halo: 1.0px buffer, color rgb(248, 247, 242) - cartographic buffer, no blur/glow */
text-shadow:
-1.0px -1.0px 0 rgb(248, 247, 242),
1.0px -1.0px 0 rgb(248, 247, 242),
-1.0px 1.0px 0 rgb(248, 247, 242),
1.0px 1.0px 0 rgb(248, 247, 242),
0 -1.0px 0 rgb(248, 247, 242),
0 1.0px 0 rgb(248, 247, 242),
-1.0px 0 0 rgb(248, 247, 242),
1.0px 0 0 rgb(248, 247, 242) !important;
}

/* Smooth opacity transitions on zoom */
.leaflet-zoom-anim .island-label {
transition: opacity 250ms ease-out;
}

/* Nautical Tools - Transparent Overlay Layer */
.meteonav-nautical-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1200;
background: transparent;
pointer-events: auto;
cursor: crosshair;
}

/* Markers should have pointer cursor (nautical markers, rosette markers, etc.) */
.leaflet-marker-icon {
cursor: pointer !important;
}

/* Rosette markers should also have pointer cursor */
.rosette-center-icon,
.rosette-satellite-marker {
cursor: pointer !important;
}

/* ============================================================================
   HEATMAP LOADER OVERLAY
   Independent centered loader for Color Map (heatmap) layer rendering
   ============================================================================ */

.heatmap-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.heatmap-loader-overlay--visible {
  opacity: 1;
}

.heatmap-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 28px;
  background: rgba(30, 58, 95, 0.92);
  border: 1px solid rgba(74, 144, 226, 0.4);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}

.heatmap-loader-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgb(74, 144, 226);
  border-radius: 50%;
  animation: heatmap-spin 0.8s linear infinite;
}

@keyframes heatmap-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Row: icon + label side by side */
.heatmap-loader-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.heatmap-loader-mode-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.heatmap-loader-mode-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* Make icon white to match dark card */
  opacity: 0.9;
}

.heatmap-loader-text {
  color: rgb(255, 255, 255);
  font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ============================================================================
   COLOR MAP ACTIVE BADGE
   Persistent indicator that remains visible after loading completes.
   Positioned centered horizontally above the time panel with 15px gap.
   ============================================================================ */

.colormap-active-badge {
  position: fixed;
  bottom: 85px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  z-index: 1500;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  background: rgba(30, 58, 95, 0.88);
  border: 1px solid rgba(74, 144, 226, 0.35);
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}

.colormap-active-badge--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Wind variant: use a subtle blue-cyan accent border */
.colormap-active-badge--wind {
  border-color: rgba(74, 144, 226, 0.5);
}

/* Wave variant: use a subtle teal accent border */
.colormap-active-badge--wave {
  border-color: rgba(0, 188, 180, 0.5);
}

.colormap-badge-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.85;
  filter: brightness(0) invert(1);
}

.colormap-badge-text {
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .colormap-active-badge {
    /* Mobile: time panel at bottom ~10px, smaller height ~42px, plus 15px gap */
    bottom: 67px;
    padding: 4px 8px 4px 6px;
  }

  .colormap-badge-text {
    font-size: 10px;
  }

  .colormap-badge-icon {
    width: 14px;
    height: 14px;
  }
}
/* ======================================
   NGA Lighthouse Popup Styles
   ====================================== */

.nga-lighthouse-popup-wrapper .leaflet-popup-content-wrapper {
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(30, 58, 95, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nga-lighthouse-popup-wrapper .leaflet-popup-content {
  margin: 0;
}

.nga-lighthouse-popup-wrapper .leaflet-popup-tip {
  background: rgba(30, 58, 95, 0.95);
}

.nga-lighthouse-popup {
  color: white;
  min-width: 250px;
}

.nga-popup-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(20, 45, 75, 0.8);
  border-bottom: 1px solid rgba(74, 144, 226, 0.3);
}

.nga-popup-icon svg {
  width: 40px;
  height: 40px;
  fill: white;
  flex-shrink: 0;
}

.nga-popup-title {
  font-size: 15px;
  font-weight: 600;
  color: white;
  line-height: 1.3;
}

.nga-popup-body {
  padding: 12px 14px;
}

.nga-popup-id {
  font-size: 11px;
  color: rgba(200, 200, 200, 0.7);
  margin-bottom: 8px;
}

.nga-popup-table {
  width: 100%;
  border-collapse: collapse;
}

.nga-popup-table td {
  padding: 4px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

.nga-popup-table td:first-child {
  color: rgba(200, 200, 200, 0.7);
  padding-right: 16px;
  width: 85px;
}

.nga-popup-visibility {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(74, 144, 226, 0.2);
  font-size: 12px;
  color: rgba(200, 200, 200, 0.8);
}

.nga-popup-source {
  margin-top: 8px;
  font-size: 10px;
  color: rgba(150, 150, 150, 0.7);
}

.nga-popup-coords {
  margin-top: 4px;
  font-size: 10px;
  color: rgba(150, 170, 190, 0.7);
  font-family: 'Courier New', monospace;
}

/* Computed visibility arcs section with disclaimer */
.nga-popup-computed {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(74, 144, 226, 0.3);
}

.nga-popup-computed-label {
  font-size: 11px;
  color: rgba(180, 180, 180, 0.8);
  margin-bottom: 4px;
}

.nga-popup-computed-arcs {
  font-size: 12px;
  color: rgba(255, 220, 150, 0.9);
  margin-bottom: 6px;
}

.nga-popup-disclaimer {
  font-size: 9px;
  color: rgba(255, 180, 100, 0.85);
  line-height: 1.4;
  padding: 6px 8px;
  background: rgba(255, 150, 50, 0.12);
  border-radius: 4px;
  border-left: 2px solid rgba(255, 180, 100, 0.5);
}

/* ============================================================================
   FERRY ROUTES LAYER - Passive Cartographic Context
   ============================================================================ */

.ferry-route-icon-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.ferry-route-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none !important;
}

.ferry-route-icon svg {
  width: 14px;
  height: 14px;
}

.ferry-route-label-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  text-align: left !important;
}

.ferry-route-label {
  font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: rgba(80, 80, 80, 0.6) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  user-select: none !important;
  display: inline-block !important;
  line-height: 1.2 !important;
  letter-spacing: 0.3px !important;
}

/* Ferry Route Popup */
.ferry-route-popup .leaflet-popup-content-wrapper {
  background: #7ec8c8 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
  padding: 0 !important;
}

.ferry-route-popup .leaflet-popup-content {
  margin: 0 !important;
  padding: 0 !important;
}

.ferry-route-popup .leaflet-popup-tip {
  background: #7ec8c8 !important;
}

.ferry-route-popup .leaflet-popup-close-button {
  color: rgba(255,255,255,0.7) !important;
  font-size: 20px !important;
  top: 8px !important;
  right: 10px !important;
}

.ferry-route-popup .leaflet-popup-close-button:hover {
  color: #fff !important;
}

.ferry-popup {
  padding: 16px 20px;
  color: #2a5a5a;
  min-width: 200px;
}

.ferry-popup-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(42, 90, 90, 0.2);
  margin-bottom: 12px;
}

.ferry-popup-icon {
  font-size: 24px;
}

.ferry-popup-title {
  font-size: 18px;
  font-weight: 500;
  color: #1a4a4a;
}

.ferry-popup-name {
  font-size: 16px;
  font-weight: 600;
  color: #1a4a4a;
  margin-bottom: 4px;
}

.ferry-popup-seasonal {
  font-size: 14px;
  color: #2a5a5a;
  margin-bottom: 12px;
}

.ferry-popup-id {
  font-size: 12px;
  font-style: italic;
  color: rgba(42, 90, 90, 0.7);
}

/* Ferry Route Hitbox (invisible fat line for easier clicking) */
.ferry-route-hitbox {
  cursor: pointer !important;
}

/* Hazard Danger Zone Popup - Override Leaflet defaults */
.hazard-danger-popup .leaflet-popup-content-wrapper {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.hazard-danger-popup .leaflet-popup-content {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

.hazard-danger-popup .leaflet-popup-tip {
  background: #ffeb3b !important;
  border: 2px solid #ff4500 !important;
}