/* ============================================================
   kfs-overrides.css – hot-edit safe overrides
   ============================================================ */
   
/* ---------- 005: Font Family Override (Uses Central Variables) ---------- */
/* Inherits font definitions from kfs.css root variables */
body, main, .panel, .card {
  font-family: var(--kfs-main-font) !important;
}

h1, h2, h3, h4, h5, h6, p, div, span, a {
  font-family: var(--kfs-main-font) !important;
}

/* Brand title should use main font, not UI font */
.brand-title {
  font-family: var(--kfs-main-font) !important;
}

/* UI elements use system fonts */
.btn, button, input, select, textarea {
  font-family: var(--kfs-ui-font) !important;
}
/* /005 */

/* ---------- 010: Base / Map container ---------- */
#map { min-height: 420px; }
/* /010 */



/* ---------- 020: Overlay clarity (panel toggles) ---------- */
.ov { cursor: pointer; transition: all .15s ease; }
.ov.is-off { opacity: .55; filter: grayscale(.9); }
.ov.on { opacity: 1; filter: none; box-shadow: 0 0 0 2px rgba(0,0,0,.03) inset; }
/* /020 */

/* ---------- 030: Legend & divicons ---------- */
.kfs-legend{
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(140%) blur(2px);
  backdrop-filter: saturate(140%) blur(2px);
  padding: 6px 8px; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  font: 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: #0a1b2b; user-select: none;
}
.kfs-legend .kfs-legend-item { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; white-space: nowrap; }
.kfs-legend .i { display: inline-block; width: 24px; height: 24px; line-height: 0; }
.kfs-divicon { display: flex; align-items: center; justify-content: center; }
/* /030 */

/* ---------- 040: Layout spacing ---------- */
.map-wrap, #map, #miniMap { margin-bottom: 0 !important; }
#report .field textarea { margin-top: 6px; }
.kfs-footer .sep { margin: 0 .5rem; opacity: .5; }
/* /040 */

/* ---------- 050: Uniform icon sizing (overlay list & legend) ---------- */
#overlaysBox .item { 
  padding: 8px 12px; 
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#overlaysBox .item .left { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  flex: 1;
  min-width: 0; /* Prevents flex overflow */
}

/* IMG-based SVGs (e.g., /assets/icons/*.svg) - FIXED SIZING */
#overlaysBox .item img,
#overlaysBox .item .overlay-icon img { 
  width: 18px !important; 
  height: 18px !important; 
  max-width: 18px !important;
  max-height: 18px !important;
  display: block !important; 
  aspect-ratio: 1 / 1;
  object-fit: contain;
  flex-shrink: 0;
}

/* Inline SVG fallback */
#overlaysBox .item svg { 
  width: 18px; 
  height: 18px; 
  flex: 0 0 18px; 
}

/* Keep legend icons consistent */
.legend img { width: 18px; height: 18px; display: block; }

/* Specific overlay icon containers */
.overlay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#overlaysBox .dot { 
  width: 14px; 
  height: 14px; 
  border-radius: 50%; 
  flex-shrink: 0;
}
#overlaysBox .dot.blue { background: #2b7cff; }
#overlaysBox .dot.green { background: #31b24b; }
/* /050 */



/* ---------- 060: Header brand ---------- */
header .brand{
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* /060 */

/* ---------- 070: "Reload data" pill (on the map) ---------- */
#map { position: relative; } /* ensure absolute positioning works inside */
#map .reload-top{
  position: absolute;
  top: 10px; right: 10px;
  z-index: 500;
  background: #fff;
  color: #0a223a;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(10,31,51,.15);
  padding: 8px 12px;
  font-weight: 700;
}
/* /070 */

/* ---------- 080: Enhanced Active States for Map Overlays ---------- */
.overlays .item.active,
.overlays .item.active:hover {
  background: linear-gradient(135deg, #ff4e00, #ff4900) !important;
  color: white !important;
  border-color: #ff4e00 !important;
  box-shadow: 0 2px 8px rgba(255, 140, 0, 0.3) !important;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

.overlays .item.active .badge {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #ff4900 !important;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.overlays .item.active .fire-time-select {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(255,255,255,0.8) !important;
  color: #333 !important;
}
/* /080 */

/* ---------- 085: Fire Time Period Dropdown (Overlays Panel) ---------- */
.fire-time-select {
  background: #eef5fb;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  color: #333;
  cursor: pointer;
  margin-left: auto;
  margin-right: 8px;
  font-family: var(--kfs-ui-font);
  min-width: 65px;
  font-weight: 600;
}

.item.active .fire-time-select {
  background: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.8);
  color: #333;
}

.fire-time-select:hover {
  background: #d6eaff;
  border-color: #999;
}

.fire-time-select:focus {
  outline: 2px solid #0066cc;
  outline-offset: 1px;
}
/* /085 */

/* ---------- 090: Weather & legend text sizing ---------- */
#weatherBox h3 { font-size: 16px; }   /* title unchanged */
#weatherBox .row,
#weatherBox .row strong,
#weatherBox a.btn.pill { font-size: 14px; }
.legend-item span { font-size: 14px; }
/* /090 */

/* ---------- 100: Language button active state ---------- */
header .btn.lang-active{
  background: #0d2b4a;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.2);
}
/* /100 */

/* kfs-overrides.css */

/* ---------- 120: Colored layer UI (Leaflet layers control) ---------- */
.leaflet-control-layers label{
  display:flex;
  align-items:center;
  gap:0px;
  padding:4px 6px;
  border-radius:8px;
  position: relative;
}

/* Completely remove the native checkbox from layout */
.leaflet-control-layers-overlays label input[type="checkbox"],
.leaflet-control-layers-base label input[type="radio"] {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Remove any default spacing for inputs */
.leaflet-control-layers label input {
  margin-right: 0 !important;
}

/* Create our own checkbox that replaces the original */
.leaflet-control-layers-overlays label::before{
  content:"";
  display:inline-block;
  width:16px;
  height:16px;
  margin-right:8px;
  vertical-align:-2px;
  border-radius:3px;
  background:#fff;
  border:2px solid #4a5568;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
  flex-shrink: 0;
}

/* Color the text labels by content */
.leaflet-control-layers label span {
  font-weight: 600;
}

/* Checked state = WHITE box with DARK GREY border + BLACK checkmark */
.leaflet-control-layers-overlays label:has(input:checked)::before{
  background: #fff;
  border-color: #4a5568;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3 3 7-7'/></svg>");
  background-repeat:no-repeat;
  background-position:center;
  background-size: 10px 10px;
}

/* Fallback for browsers without :has() support */
.leaflet-control-layers-overlays label.leaflet-control-layers-selector::before {
  background: #fff;
  border-color: #4a5568;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3 3 7-7'/></svg>");
  background-repeat:no-repeat;
  background-position:center;
  background-size: 10px 10px;
}

/* Close button for overlay panel */
.leaflet-control-layers-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.leaflet-control-layers-close:hover {
  opacity: 1;
}

.leaflet-control-layers-close::before {
  content: "×";
  font-size: 20px;
  font-weight: bold;
  color: #666;
  line-height: 1;
}

.leaflet-control-layers-close:hover::before {
  color: #333;
}

/* Show close button only when panel is expanded */
.leaflet-control-layers-expanded .leaflet-control-layers-close {
  display: flex;
}

.leaflet-control-layers-close {
  display: none;
}

/* Hide the default Leaflet layers toggle icon */
.leaflet-control-layers-toggle {
  display: none !important;
  
  /* Force overlay panel positioning and content sizing */
.leaflet-control-layers-expanded {
  position: fixed !important;
  right: 40px !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
}

.leaflet-control-layers-list {
  transform: scale(0.8) !important;
  transform-origin: center center !important;
}

.leaflet-control-layers label {
  font-size: 11px !important;
  padding: 3px 5px !important;
  margin: 2px 0 !important;
}

.leaflet-control-layers-overlays label::before,
.leaflet-control-layers-base label::before {
  width: 14px !important;
  height: 14px !important;
  margin-right: 6px !important;
}
}
/*/120*/

/* ---------- 180: Mobile header unified with Greek text optimization ---------- */
@media (max-width: 480px){
  .header {
    background: #0A1F33 !important;
    color: #fff !important;
    padding: 6px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px;
    flex-wrap: nowrap;
    min-height: 40px;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }

  .brand-emoji {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
  }

  /* Unified across all languages (no Greek-specific downsizing) */
  .brand-title {
    font-size: 14px !important;
    line-height: 1.1;
    letter-spacing: 0.1px;
    margin: 0;
    white-space: nowrap;
    color: #fff !important;
    font-weight: 500 !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Scale down login and language icons on mobile */
  .header-btn .header-icon {
    width: 16px !important;
    height: 16px !important;
  }
}
/* /180 */

/* ---------- 200: Header enforcement (desktop and fallback) ---------- */
.header {
  background: #0A1F33 !important;
  color: #fff !important;
  padding: 14px 16px 0px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.header .brand-emoji {
  font-size: 27.5px !important; /* 25% bigger than 22px */
}

.header .brand-title {
  color: #fff !important;
  font-size: 25px !important; /* 25% bigger than 20px */
  font-weight: 600 !important;
  margin: 0 !important;
  font-family: var(--kfs-main-font) !important;
}

.header .lang .btn, 
.header .lang-switch .btn {
  background: #132b47 !important;
  color: #fff !important;
  border: none !important;
  font-size: 11px !important;
  padding: 5px 9px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-family: var(--kfs-ui-font) !important;
}

.header .lang .btn:hover,
.header .lang-switch .btn:hover {
  background: #1a3a5a !important;
}
/* /200 */

/* ---------- 210: Leaflet Layer Control - DISABLED (Moved to JS) ---------- */
/* All panel POSITIONING now handled inline in kfs-map.js block 040.7.3
   This section intentionally left empty - DO NOT add positioning rules here */
/* /210 */

/* ---------- 220: Bottom Navigation (FIXED Mobile Layout Issues) ---------- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #2e4063;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
  z-index: 1000;
  min-height: 60px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #fff;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  min-width: 50px;
  opacity: 0.7;
}

.nav-item.active {
  opacity: 1;
  background: rgba(255,255,255,0.1);
}

.nav-item:hover {
  opacity: 1;
  background: rgba(255,255,255,0.05);
}

.nav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon svg {
  width: 20px;
  height: 20px;
}

/* Icon size adjustments per requirements */
.nav-item[data-nav="report"] .nav-icon svg {
  width: 22px;  /* 10% bigger: 20px * 1.1 = 22px */
  height: 22px;
}

.nav-item[data-nav="help"] .nav-icon svg {
  width: 26px;  /* Much bigger for heart icon to match map height */
  height: 26px;
}

.nav-item[data-nav="volunteer"] .nav-icon svg {
  width: 22px;  /* 10% bigger: 20px * 1.1 = 22px */
  height: 22px;
}

.nav-bg {
  fill: transparent;
}

.nav-icon-path {
  fill: #fff;
}

.nav-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  font-family: var(--kfs-ui-font) !important;
}

/* Hamburger menu for MORE button */
.hamburger-menu {
  display: flex;
  flex-direction: column;
  width: 18px;
  height: 14px;
  justify-content: space-between;
}

.hamburger-menu span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: all 0.3s ease;
}

/* FIXED: Mobile body padding and map height - No conflicts */
@media (max-width: 768px) {
  body {
    padding-bottom: 70px;
  }
  
  /* Override any conflicting map height rules */
  #map {
    height: calc(100vh - 180px) !important;
    min-height: 400px !important;
  }
}

/* Desktop - hide bottom nav and reset body padding */
@media (min-width: 769px) {
  .bottom-nav {
    display: none;
  }
  
  body {
    padding-bottom: 0;
  }
  
  /* Desktop map height - no bottom nav interference */
  #map {
    height: calc(100vh - 120px) !important;
    min-height: 500px !important;
  }
}

/* Small mobile adjustments */
@media (max-width: 360px) {
  .nav-label {
    font-size: 9px;
  }
  
  .nav-icon {
    width: 20px;
    height: 20px;
  }
  
  .nav-icon svg {
    width: 16px;
    height: 16px;
  }
  
  /* Maintain special sizing on small screens */
  .nav-item[data-nav="report"] .nav-icon svg {
    width: 18px;
    height: 18px;
  }
  
  .nav-item[data-nav="help"] .nav-icon svg {
    width: 22px;
    height: 22px;
  }
  
  .nav-item[data-nav="volunteer"] .nav-icon svg {
    width: 18px;
    height: 18px;
  }

  /* Extra small screens - ensure minimum map visibility */
  body {
    padding-bottom: 65px;
  }
  
  #map {
    height: calc(100vh - 200px) !important;
    min-height: 350px !important;
  }
}
/* /220 */

/* ---------- 220.5: Force Bottom Navigation Visibility ---------- */
/* Emergency fix for missing navigation */
@media (max-width: 768px) {
  .bottom-nav,
  #kfs-bottom-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9990 !important;
    background: #2e4063 !important;
  }
  
  /* Ensure nav items are visible */
  .bottom-nav .nav-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure map doesn't cover navigation */
  #map {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Ensure body has padding for nav */
  body {
    padding-bottom: 70px !important;
  }
}

/* Desktop navigation visibility fix */
@media (min-width: 769px) {
  .desktop-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
/* /220.5 */

/* ---------- 230: Desktop Navigation Menu ---------- */
.desktop-nav {
  display: none; /* Hidden on mobile by default */
  gap: 4px;
  align-items: center;
  margin-right: 16px;
}

.desktop-nav .nav-link {
  color: #cfe6f2;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  font-family: var(--kfs-ui-font) !important;
  display: inline-block; /* Ensure links display properly */
}

.desktop-nav .nav-link:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.desktop-nav .nav-link.active {
  background: rgba(255,255,255,0.15);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

/* Show desktop nav on tablet and larger screens */
@media (min-width: 768px) {
  .desktop-nav {
    display: flex !important; /* Force display on desktop */
  }
  
  .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}
/* /230 */

/* ---------- 240: MORE Menu Slide-out Panel ---------- */
.more-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.more-menu-overlay.active {
  opacity: 1;
}

.more-menu-panel {
  position: absolute;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 400px;
  height: 100vh;
  background: #ffffff;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transition: right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.more-menu-panel.active {
  right: 0;
}

.more-menu-header {
  position: sticky;
  top: 0;
  background: linear-gradient(135deg, #0A1F33, #2e4063);
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.more-menu-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.close-btn:hover {
  opacity: 1;
}

.more-menu-content {
  padding: 0;
}

.menu-category {
  border-left: 4px solid #ddd;
  margin-bottom: 24px;
}

.menu-category.red { border-left-color: #dc3545; }
.menu-category.orange { border-left-color: #fd7e14; }
.menu-category.blue { border-left-color: #007bff; }
.menu-category.green { border-left-color: #28a745; }
.menu-category.purple { border-left-color: #6f42c1; }

.menu-category h4 {
  margin: 0 0 12px 0;
  padding: 16px 20px 0 20px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.menu-item-btn {
  width: 100%;
  background: white;
  border: none;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid #f5f5f5;
  font-family: inherit;
}

.menu-item-btn:hover {
  background: #f8f9fa;
}

.menu-item-btn:active {
  background: #e9ecef;
}

.menu-icon {
  font-size: 22px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.menu-text {
  flex: 1;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.menu-arrow {
  color: #666;
  font-size: 18px;
  opacity: 0.6;
  flex-shrink: 0;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .more-menu-panel {
    width: 90%;
  }
  
  .more-menu-header {
    padding: 16px;
  }
  
  .more-menu-header h3 {
    font-size: 16px;
  }
  
  .menu-item-btn {
    padding: 14px 16px;
    gap: 12px;
  }
  
  .menu-icon {
    font-size: 20px;
    width: 28px;
  }
  
  .menu-text {
    font-size: 14px;
  }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  .more-menu-panel {
    background: #1a1a1a;
    color: white;
  }
  
  .menu-category h4 {
    color: #e0e0e0;
    border-bottom-color: #333;
  }
  
  .menu-item-btn {
    background: #1a1a1a;
    color: white;
    border-bottom-color: #333;
  }
  
  .menu-item-btn:hover {
    background: #2a2a2a;
  }
  
  .menu-text {
    color: #e0e0e0;
  }
  
  .menu-arrow {
    color: #999;
  }
}

/* Coming Soon Modal */
.coming-soon-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.coming-soon-modal.active {
  opacity: 1;
}

.coming-soon-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    transform: translate(-50%, -60%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

.coming-soon-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.coming-soon-title {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 600;
  color: #0A1F33;
  font-family: var(--kfs-main-font);
}

.coming-soon-message {
  margin: 0 0 24px 0;
  color: #666;
  font-size: 16px;
  line-height: 1.4;
  font-family: var(--kfs-main-font);
}

.coming-soon-close-btn {
  background: linear-gradient(135deg, #ff4900, #ff3300);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s;
  font-family: var(--kfs-ui-font);
}

.coming-soon-close-btn:hover {
  transform: translateY(-1px);
}

/* Mobile adjustments for coming soon modal */
@media (max-width: 480px) {
  .coming-soon-content {
    padding: 24px;
    max-width: 320px;
  }
  
  .coming-soon-icon {
    font-size: 40px;
  }
  
  .coming-soon-title {
    font-size: 20px;
  }
  
  .coming-soon-message {
    font-size: 14px;
  }
  
  .coming-soon-close-btn {
    padding: 10px 24px;
    font-size: 14px;
  }
}

/* Dark theme support for coming soon modal */
@media (prefers-color-scheme: dark) {
  .coming-soon-content {
    background: #2a2a2a;
    color: white;
  }
  
  .coming-soon-title {
    color: #ffffff;
  }
  
  .coming-soon-message {
    color: #cccccc;
  }
}
/* /240 */

/* ---------- 250: Admin Mobile Responsive Enhancements ---------- */
/* Hide admin-specific action buttons on mobile to save space */
@media (max-width: 768px) {
  .admin-actions {
    display: none !important;
  }
  
  /* Ensure header content doesn't overflow */
  .header .actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  /* Show mobile admin menu on mobile */
  .admin-mobile-menu {
    display: block;
  }
}

/* Desktop - hide mobile admin menu */
@media (min-width: 769px) {
  .admin-mobile-menu {
    display: none;
  }
}

/* Admin Mobile Menu Styling */
.admin-mobile-menu {
  background: #f8f9fa;
  border-bottom: 2px solid #e9ecef;
  padding: 12px 16px;
  margin: 0;
}

.admin-menu-title {
  margin: 0 0 12px 0;
}

.admin-menu-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0a1b2b;
  font-family: var(--kfs-main-font) !important;
}

.admin-menu-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-menu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  text-decoration: none;
  color: #0a1b2b;
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
  transition: all 0.2s ease;
  font-family: var(--kfs-ui-font) !important;
}

.admin-menu-link:hover {
  background: #e9ecef;
  border-color: #adb5bd;
  color: #0a1b2b;
  text-decoration: none;
}

.admin-menu-link:active {
  background: #dee2e6;
  transform: translateY(1px);
}

.admin-menu-icon {
  font-size: 18px;
  line-height: 1;
}

/* Admin form mobile improvements */
@media (max-width: 480px) {
  .admin-mobile-menu {
    padding: 8px 12px;
  }
  
  .admin-menu-links {
    gap: 6px;
  }
  
  .admin-menu-link {
    padding: 8px 12px;
    font-size: 13px;
    min-width: 0;
    flex: 1;
    justify-content: center;
  }
  
  .admin-menu-icon {
    font-size: 16px;
  }
  
  /* Better mobile form inputs */
  .mapdata-row input.btn.pill,
  .mapdata-row textarea.btn.pill,
  .mapdata-row select.btn.pill {
    padding: 12px 10px;
    font-size: 14px;
    border-radius: 8px;
  }
  
  /* Touch-friendly buttons */
  .btn {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 14px;
  }
  
  /* Better spacing for mobile tables */
  .kfs-table {
    font-size: 13px;
  }
  
  .kfs-table th,
  .kfs-table td {
    padding: 8px 4px;
  }
  
  /* Horizontal scroll for wide tables */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Desktop admin page improvements */
@media (min-width: 769px) {
  .admin-actions .admin-btn {
    white-space: nowrap;
  }
}
/* /250 */

/* ---------- 260: Floating Report Button Position Fix ---------- */
#floatingReportBtn {
  position: fixed !important;
  bottom: 80px !important;
  right: 20px !important;
  z-index: 9999 !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, #ff4900, #ff3300) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(255, 51, 0, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-size: 24px !important;
}

#floatingReportBtn:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(255, 51, 0, 0.4) !important;
}

/* Mobile adjustments for floating button */
@media (max-width: 768px) {
  #floatingReportBtn {
    bottom: 90px !important; /* Above bottom navigation */
    right: 15px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 24px !important;
    font-size: 20px !important;
  }
}

/* Report Actions Panel */
#reportActions {
  position: fixed !important;
  bottom: 150px !important;
  right: 20px !important;
  z-index: 9998 !important;
}

@media (max-width: 768px) {
  #reportActions {
    bottom: 150px !important;
    right: 15px !important;
  }
}
/* ---------- END 260 ---------- */

/* ---------- 057: Fire Hazard Overlay - MOVED TO INLINE STYLING ---------- */
/* All fire hazard overlay styling is now controlled inline in kfs-map.js block 055 */
/* This prevents CSS conflicts and provides single-source control */
/* /057 */


/* ---------- 270: Modern Header Redesign ---------- */

/* ---------- 270.1: Header Container ---------- */
.modern-header {
  background: linear-gradient(135deg, #ff4900, #ff7700) !important;
  color: #fff !important;
  padding: 0 !important;
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.brand-container {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 24px;
}

.modern-header .brand {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.modern-header .brand:hover {
  transform: translateX(2px);
}
/* /270.1 */

/* ---------- 270.2: Brand Icon and Text ---------- */
/* SVG Fire Icon Styling */
.brand-icon-svg {
  width: 42px;
  height: 42px;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s ease;
}

.modern-header .brand:hover .brand-icon-svg {
  transform: scale(1.05);
}

/* Safari fix for SVGs */
.brand-icon-svg,
.header-icon,
.nav-icon svg,
.overlay-menu-toggle img,
.layers-menu-toggle img {
  max-width: 100% !important;
  max-height: 100% !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}

/* Brand text container - Desktop specific with higher specificity */
@media (min-width: 769px) {
  .modern-header .brand-container .brand .brand-text {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1 !important;
    margin-left: -8px !important; /* Move text 8px closer to fire icon on desktop */
    gap: 0 !important;
  }
}

/* Mobile - reset the margin */
@media (max-width: 768px) {
  .modern-header .brand-container .brand .brand-text {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1 !important;
    margin-left: 0 !important; /* No negative margin on mobile */
    gap: 0 !important;
  }
}

/* Main title (KYTHERA) stays put */
.brand-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: #fff !important;
  font-family: var(--kfs-main-font) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0.9 !important;
}

/* Subtitle (FIRE ALERT SYSTEM) moved DOWN by 3px vs previous (-2px → +1px) */
.brand-subtitle {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: rgba(255, 255, 255, 0.95) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  position: relative !important;
  top: 1px !important; /* ↓ down by 3px total compared to old -2px */
  font-family: var(--kfs-main-font) !important;
}

/* Mobile overrides for text sizing + maintain the 3px lower offset */
@media (max-width: 768px) {
  .brand-icon-svg {
    width: 38px !important;
    height: 38px !important;
  }
  
  .brand-title {
    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    margin-bottom: 2px !important;
  }
  
  .brand-subtitle {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    margin-top: 0 !important;
    position: relative !important;
    top: 1px !important; /* keep the +3px visual drop on mobile too */
  }
}
/* /270.2 */

/* ---------- 270.3: Header Actions and Buttons ---------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-right: 27px !important;
  height: 100%;
  position: relative;
  top: 5px;
}

/* Mobile-specific adjustments for header actions */
@media (max-width: 768px) {
  .header-actions {
    gap: 3px !important; /* Very small gap between buttons */
    padding-right: 12px !important; /* Right side padding */
    margin-right: 0 !important; /* Remove margin */
  }
}

/* Ensure the container respects the padding */
.modern-header {
  padding-right: 0 !important;
}

.header-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  font-family: var(--kfs-ui-font) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  height: 44px;
  box-sizing: border-box;
}

/* Mobile-specific header button adjustments */
@media (max-width: 768px) {
  .header-btn {
    padding: 6px !important; /* Small padding */
    margin: 0 !important; /* No margins */
    background: transparent !important;
    border: none !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    height: auto;
    min-width: auto !important;
    width: auto !important;
  }
  
  /* No individual button spacing - controlled by container gap */
  .header-btn.login-btn,
  .header-btn.lang-btn,
  .header-actions > a,
  .header-actions > button {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .header-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Icons with consistent vertical alignment */
.header-icon {
  width: 18px;
  height: 18px;
  color: currentColor;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Mobile: FORCE icon sizing with maximum specificity */
@media (max-width: 768px) {
  /* Default icon size for all icons (mobile) */
  .header-icon {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  
  /* Force ALL SVG elements to respect container size */
  .header-icon svg,
  .header-btn svg,
  .header-actions svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
  
  /* Globe icon stays at 22px */
  .header-icon.globe-icon {
    width: 22px !important;
    height: 22px !important;
  }
  
  /* ✅ Login icon = midpoint between 25px and 18px → 21.5px */
  .header-btn.login-btn .header-icon,
  .login-btn .header-icon,
  a[href*="profile"] .header-icon,
  .header-actions > a[href*="profile"] .header-icon {
    width: 21.5px !important;
    height: 21.5px !important;
    max-width: 21.5px !important;
    max-height: 21.5px !important;
    overflow: hidden !important;
  }

  /* Match nested SVG for login */
  .header-btn.login-btn svg,
  .login-btn svg,
  a[href*="profile"] svg,
  .header-actions > a[href*="profile"] svg {
    width: 21.5px !important;
    height: 21.5px !important;
    max-width: 21.5px !important;
    max-height: 21.5px !important;
  }
}

/* Globe icon specific styling - converts black SVG to white */
.header-icon.globe-icon {
  filter: brightness(0) invert(1);
}

.header-btn:hover .globe-icon {
  opacity: 0.9;
}

.header-btn-text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  display: block;
  line-height: 1;
  margin: 0;
  padding: 0;
}

/* Show text on larger screens ONLY */
@media (min-width: 769px) {
  .header-btn-text {
    display: block !important;
  }
}

/* FORCE HIDE text completely on mobile and tablet */
@media (max-width: 768px) {
  .header-btn-text {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
  
  /* Also target any span elements that might contain text */
  .header-btn span[data-i18n="login"],
  .header-btn span[data-i18n="language"],
  .login-btn .header-btn-text,
  .lang-btn .header-btn-text,
  .header-btn span:not(.header-icon) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
}
/* /270.3 */

/* ---------- 270.4.1: Mobile Icon Sizing (Safari Safe) ---------- */
/* Mobile: fire icon 18% bigger than current 32px = 38px */
.brand-icon-svg {
  width: 38px !important;
  height: 38px !important;
}

/* 🔒 SAFARI FIX: Prevent SVG blow-up on mobile */
.brand-icon-svg,
.header-icon,
.nav-icon svg,
.overlay-menu-toggle img,
.layers-menu-toggle img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
/* ---------- 270.4.2: Mobile Text Sizing ---------- */
/* Mobile: KYTHERA 1pt smaller (15px), FIRE ALERT SYSTEM 0.5pt bigger (10.5px) */
.brand-title {
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important; /* Normal spacing, not extended */
  margin-bottom: 2px !important; /* Closer spacing between lines */
}

.brand-subtitle {
  font-size: 10.5px !important;
  font-weight: 700 !important;  /* Bold */
  letter-spacing: 0 !important; /* Normal spacing, not extended */
  margin-top: 0 !important; /* Closer to KYTHERA */
}

/* ---------- 270.4.3: Header Actions (Safari Safe) ---------- */
.header-actions {
  gap: 8px !important; /* Icons closer together */
  padding-right: 0;
}

.header-btn {
  padding: 4px !important; /* Smaller padding for tighter layout */
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.header-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Mobile: icons 20% smaller than current 21px = 17px */
.header-icon {
  width: 17px !important;
  height: 17px !important;
}

/* Show button text on mobile */
.header-btn-text {
  display: block !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  font-family: 'Sansation', sans-serif !important;
}

/* Ensure globe icon stays white on mobile */
.header-icon.globe-icon {
  filter: brightness(0) invert(1);
}

/* ---------- 270.5: Greek Language Adjustments ---------- */
/* Remove Greek-specific downsizing so all languages match.
   (Keep letter-spacing tweaks out unless you observe real kerning issues.) */

/* Intentionally left neutral — no [lang="el"] overrides here. */
/* /270.5 */

/* ---------- 270.6: Language Menu Dropdown ---------- */
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 8px;
  display: none;
  z-index: 1000;
  min-width: 120px;
}

.lang-menu.active {
  display: block;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: #333;
  text-decoration: none;
  transition: background 0.2s;
  font-family: var(--kfs-ui-font);
  font-size: 14px;
  font-weight: 500;
}

.lang-option:hover {
  background: #f5f5f5;
}

.lang-option.active {
  background: #fff3e0;
  color: #ff4900;
  font-weight: 600;
}
/* /270.6 */

/* ---------- 270.7: Report Fire Button in Header ---------- */
.header-report-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff3300, #ff0000);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
  font-family: var(--kfs-ui-font);
  z-index: 10;
  white-space: nowrap;
}

.header-report-btn:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);
  background: linear-gradient(135deg, #ff4400, #ff1100);
}

.header-report-btn:active {
  transform: translateX(-50%) translateY(0);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .header-report-btn {
    padding: 8px 20px;
    font-size: 13px;
  }
}

/* Report Panel Slide-out */
.report-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.report-panel-overlay.active {
  display: block;
  opacity: 1;
}

.report-panel {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100vh;
  background: white;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
  transition: right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.report-panel.active {
  right: 0;
}

.report-panel-header {
  background: linear-gradient(135deg, #ff3300, #ff0000);
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-panel-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.report-panel-close {
  background: none;
  border: none;
  color: white;
  font-size: 32px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.report-panel-close:hover {
  opacity: 1;
}

.report-panel-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.report-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.report-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--kfs-ui-font);
  font-size: 14px;
  font-weight: 600;
}

.report-quick-btn:hover {
  background: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.report-quick-btn.emergency {
  background: #ffebee;
  border-color: #ffcdd2;
  color: #d32f2f;
}

.report-quick-btn.emergency:hover {
  background: #ffcdd2;
}

.report-quick-btn .icon {
  font-size: 24px;
}

.report-form-compact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.report-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--kfs-main-font);
}

.report-input:focus {
  outline: none;
  border-color: #ff4900;
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1);
}

.report-submit-btn {
  background: linear-gradient(135deg, #ff4900, #ff3300);
  color: white;
  border: none;
  padding: 14px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--kfs-ui-font);
}

.report-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 51, 0, 0.3);
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .report-panel {
    width: 100%;
    right: -100%;
  }
  
  .report-quick-actions {
    grid-template-columns: 1fr;
  }
}
/* /270.7 */

/* /270 */

/* ---------- 280: Report Fire Button on Map ---------- */
.leaflet-top.leaflet-right {
  top: 80px !important; /* Position below header */
}

.report-fire-map-btn {
  position: absolute;
  top: 24px;  /* Changed from 80px to (80-56) = 24px */
  right: 24px;  /* Changed from 26px to 24px (2px to the right) */
  z-index: 1000;
  background: linear-gradient(135deg, #ff3300, #ff0000);
  color: white;
  border: 1px solid #FFE200;  /* Changed from 2px to 1px (half width) */
  border-radius: 25px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 0, 0, 0.25);
  font-family: 'Sansation', var(--kfs-main-font);  /* Changed to use Sansation font */
  white-space: nowrap;
  text-transform: uppercase;
}

.report-fire-map-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.35);
  background: linear-gradient(135deg, #ff4400, #ff1100);
}

/* Overlay menu toggle button (below Report Fire) */
.overlay-menu-toggle {
  position: absolute;
  top: 74px;  /* Changed from 130px to (130-56) = 74px */
  right: 24px;  /* Changed from 26px to 24px (2px to the right) */
  z-index: 1000;
  width: 40px;
  height: 40px;
  background: white;
  border: 2px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.overlay-menu-toggle:hover {
  background: #f8f9fa;
  border-color: #999;
  transform: translateY(-1px);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .leaflet-top.leaflet-right {
    top: 70px !important;          /* header is 60 px, so 70 px puts us 10 px below it */
  }
  
  .report-fire-map-btn {
    top: 14px !important;          /* 70 - 60 = 10 px → 14 px gives 4 px extra breathing room */
    right: 22px !important;
    padding: 6px 16px;
    font-size: 11px;
    border: 1px solid #FFE200;
    font-family: 'Sansation', var(--kfs-main-font);
  }
  
  .overlay-menu-toggle {
    top: 54px !important;          /* 110 - 60 = 50 px → 54 px gives 4 px extra breathing room */
    right: 22px !important;
    width: 36px;
    height: 36px;
  }
}
/* /280 */
/* kfs-overrides.css */

/* 240 */
/* ---------- Layers Slide-out Panel ---------- */
.layers-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.layers-panel-overlay.active {
  display: block;
  opacity: 1;
}
.layers-panel {
  position: fixed;
  top: 0;
  right: -320px;
  width: 320px;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0,0,0,.15);
  border-radius: 8px 0 0 8px;
  transition: right .35s cubic-bezier(.25,.46,.45,.94);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  font-family: var(--kfs-main-font);
}
.layers-panel.active {
  right: 0;
}
.layers-panel-header {
  background: linear-gradient(135deg,#ff4900,#ff7700);
  color: #fff;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px 0 0 0;
}
.layers-panel-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .5px;
}
.layers-panel-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
  transition: opacity .2s;
}
.layers-panel-close:hover {
  opacity: 1;
}
.layers-panel-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.layers-panel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #eef2f7;
}
.layers-panel-item:last-child {
  border-bottom: none;
}
.layers-panel-label {
  font-size: 14px;
  color: #0a1f33;
  font-weight: 400;
}
.layers-panel-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  background: #e6eef4;
  border-radius: 11px;
  cursor: pointer;
  transition: background .25s;
}
.layers-panel-toggle.on {
  background: linear-gradient(135deg,#ff4e00,#ff4900);
}
.layers-panel-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .25s;
}
.layers-panel-toggle.on::after {
  transform: translateX(18px);
}
/* mobile tweaks */
@media (max-width: 768px) {
  .layers-panel {
    width: 90%;
    max-width: 320px;
  }
}
/*/240*/

/* ---------- 290: Language Dropdown Z-Index Fix ---------- */
/* Ensure language dropdown appears above all map controls */
.lang-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 10001 !important; /* Higher than map controls (1000-1001) */
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  padding: 8px !important;
  min-width: 120px !important;
  display: none;
}

.lang-dropdown.open {
  display: block !important;
}

/* Language button container positioning */
.header-btn.lang-btn {
  position: relative !important;
  z-index: 10002 !important; /* Even higher than dropdown */
}

/* Ensure proper stacking context */
.header-actions {
  position: relative !important;
  z-index: 10003 !important; /* Highest in header */
}
/* /290 */

/* ---------- 291: Language Dropdown Styles (for all pages) ---------- */
.lang-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  padding: 8px !important;
  min-width: 140px !important;
  z-index: 10001 !important;
  display: none;
}

.lang-dropdown.open {
  display: block !important;
}

.lang-dropdown .lang-option {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  color: #333 !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
  cursor: pointer !important;
}

.lang-dropdown .lang-option:hover {
  background: #f5f5f5 !important;
}

.lang-dropdown .lang-option.active {
  background: #fff3e0 !important;
  color: #ff4900 !important;
  font-weight: 600 !important;
}

.lang-dropdown .flag {
  font-size: 16px !important;
  line-height: 1 !important;
}

.lang-dropdown .name {
  font-size: 14px !important;
  font-family: var(--kfs-ui-font) !important;
}

/* Ensure proper positioning context */
.header-btn.lang-btn {
  position: relative !important;
}
/* /291 */

/* ---------- 295: Volunteer Page Specific Fixes ---------- */
/* Fix language button overflow */
.header-btn.lang-btn {
  max-width: 80px;
  overflow: hidden;
  white-space: nowrap;
}

/* Ensure bottom navigation shows on mobile volunteer pages */
@media (max-width: 768px) {
  .volunteer-container {
    padding-bottom: 80px; /* Space for bottom nav */
  }
}
/* /295 */