/* ======================================
   BRAND VARIABLES
====================================== */

:root {
  --navview-orange: #0d6efd;

  --map-control-size: 44px;
  --map-control-radius: 12px;

  --map-control-bg: rgba(0, 0, 0, 0.75);
  --map-control-bg-hover: rgba(0, 0, 0, 0.95);
  --map-control-border: rgba(255, 255, 255, 0.18);

  --map-control-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  --map-control-glow: 0 0 12px rgba(13, 110, 253, 0.45);

  --ll-crosshair-color: #d8d8d8;
  --ll-crosshair-shadow: rgba(0, 0, 0, 0.35);
  --ll-crosshair-glow: rgba(0, 0, 0, 0.85);
}

/* ======================================
   MAP LAYOUT
====================================== */

#map-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
}

#lake-map {
  width: 100%;
  height: 100%;
  position: relative;
}

.ll-map-logo {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 400;
  display: none;
}

/* ======================================
   GLOBAL Z-INDEX SYSTEM
====================================== */

.leaflet-container {
  z-index: 0;
}

.ll-crosshair,
.ll-coordbar,
.ll-map-logo,
.ll-notice,
.ll-navionics-attribution {
  z-index: 400;
}

.leaflet-control {
  z-index: 500;
}

.ll-debug-overlay {
  z-index: 600;
}

.modal-backdrop {
  z-index: 1050;
}

.modal {
  z-index: 1055;
}

/* ======================================
   LEAFLET CONTROL CLEANUP
====================================== */

.leaflet-top.leaflet-left {
  margin: 0;
}

.leaflet-top .leaflet-control {
  margin-top: 10px;
  margin-left: 10px;
}

.leaflet-top.leaflet-left .leaflet-control {
  background: transparent;
}

.leaflet-control-zoom {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-bottom: 10px !important; /* space before Measure / Share */
}

.leaflet-control-zoom a {
  margin: 0 !important;
  display: block;
}

/* ======================================
   CONTROL STYLING
====================================== */

.leaflet-control-zoom a,
.leaflet-control.leaflet-bar a {
  width: var(--map-control-size);
  height: var(--map-control-size);
  line-height: var(--map-control-size);

  background: var(--map-control-bg) !important;
  color: #fff !important;

  border-radius: var(--map-control-radius);
  border: 1px solid var(--map-control-border);

  box-shadow: var(--map-control-shadow);

  text-align: center;
  font-size: 18px;

  transition: all 0.15s ease;
}

/* tighter spacing between + / - */
.leaflet-control-zoom a + a {
  margin-top: 2px !important;
}

.leaflet-control-zoom a:hover,
.leaflet-control.leaflet-bar a:hover {
  background: var(--map-control-bg-hover) !important;
}

.leaflet-control-zoom a.is-on {
  color: var(--navview-orange) !important;
  border: 1px solid var(--navview-orange);

  box-shadow:
    var(--map-control-shadow),
    var(--map-control-glow);
}

/* zoom shape override: top rounded only / bottom rounded only */
.leaflet-control-zoom a {
  border-radius: 0 !important;
}

.leaflet-control-zoom a:first-child {
  border-top-left-radius: var(--map-control-radius) !important;
  border-top-right-radius: var(--map-control-radius) !important;
}

.leaflet-control-zoom a:nth-child(2) {
  border-bottom-left-radius: var(--map-control-radius) !important;
  border-bottom-right-radius: var(--map-control-radius) !important;
}

/* optional support if your custom controls are wrapped in a stack */
.ll-control-stack,
.ll-toolstack,
.ll-extra-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ======================================
   BASE MAP DIM (FIXED + CONTROLLED)
====================================== */

.leaflet-tile-pane {
  transition: filter 0.35s ease;
}

/* GLOBAL DIM CONTROL */
.ll-base-dim .leaflet-tile-pane {
  filter: brightness(0.9) contrast(1.02);
}

/* backwards compatibility */
.ll-water-emphasis .leaflet-tile-pane {
  filter: brightness(0.9) contrast(1.02);
}

/* REMOVED conflicting always-on dim */
/* .leaflet-pane.leaflet-tile-pane {
  filter: brightness(0.85) contrast(0.95);
} */

/* ======================================
   ATTRIBUTION CLEANUP
====================================== */

.leaflet-attribution-flag {
  display: none !important;
}

/* ======================================
   NAVIONICS BLUR SYSTEM (UPGRADED)
====================================== */

.leaflet-navionics-pane {
  position: relative;
  transition: filter 0.35s ease;
  will-change: filter;
}

/* EXISTING (kept) */
.leaflet-navionics-pane.navionics-blur {
  filter: blur(6px) !important;
}

/* NEW (clean toggle system) */
.ll-navionics-blur .leaflet-navionics-pane {
  filter: blur(3px) brightness(0.8) contrast(0.9) saturate(0.9);
}

/* ======================================
   GLASS UI SYSTEM (NEW)
====================================== */

.ll-glass {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}

/* ======================================
   COORDINATE BAR LOCK
====================================== */

#llCoordBar.locked .ll-coordbar-text {
  display: inline-block;
  filter: blur(2px);
  user-select: none;
}

#llCoordBar.locked #llCoordCopy {
  opacity: 0.35;
  pointer-events: none;
}

#llCoordBar.locked::after {
  content: "Upgrade to Pro to view.";
  font-size: 11px;
  margin-left: 8px;
  opacity: 0.7;
}

/* ======================================
   REMOVE BACKDROP BLUR FROM CONTROLS
====================================== */

.leaflet-control,
.leaflet-bar,
.leaflet-control a {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ======================================
   UI SYSTEM
====================================== */

.ll-navionics-upgrade {
  margin-top: 6px;
  text-align: center;
  z-index: 600 !important;
  pointer-events: none; /* ?? default OFF */
}

/* Only clickable when visible */
.ll-ui--fade-in .ll-navionics-upgrade {
  pointer-events: auto;
}

.ll-ui-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 550;
}

.ll-ui {
  position: absolute;
  pointer-events: none;
}

.ll-ui--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ll-ui--bottom-center {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.ll-ui--top-right {
  top: 10px;
  right: 10px;
}

.ll-ui--top-left {
  top: 10px;
  left: 10px;
}

.ll-ui--crosshair-below {
  top: 50%;
  left: 50%;
  transform: translate(-50%, 30px);
}

.ll-ui--hidden {
  opacity: 0;
  pointer-events: none;
}

.ll-ui--fade-in {
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* ======================================
   NAVIONICS UPGRADE BANNER
====================================== */

.ll-navionics-upgrade {
  pointer-events: none;

  background: rgba(0, 0, 0, 0.75);
  color: #fff;

  padding: 10px 16px;
  border-radius: 8px;

  font-size: 14px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;

  backdrop-filter: blur(6px);

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.ll-ui-close {
  margin-left: 10px;
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

/* ======================================
   CROSSHAIR CONTINUOUS PULSE
====================================== */

@keyframes ll-crosshair-pulse-loop {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.ll-crosshair--pulse {
  animation: ll-crosshair-pulse-loop 0.8s ease-in-out infinite;
}

/* ======================================
   MARKER FIXES
====================================== */

.ll-marker-icon {
  background: none !important;
  border: none !important;
}

.ll-marker-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ======================================
   MAP TOAST (EMBED-SAFE)
====================================== */

.ll-copy-toast {
  position: absolute; /* ?? inside map overlay */
  left: 50%;
  bottom: 80px;

  transform: translate(-50%, 20px);

  background: rgba(0, 0, 0, 0.9);
  color: #fff;

  padding: 10px 16px;
  border-radius: 8px;

  font-size: 14px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;

  opacity: 0;
  transition: all 0.25s ease;

  pointer-events: none;

  z-index: 10; /* ?? only needs to beat overlay siblings */
}

/* visible state */
.ll-copy-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ======================================
   NAVIONICS TOGGLE UI
====================================== */

.ll-nav-toggle {
  position: absolute;
  top: 10px;
  left: 60px;
  z-index: 1000;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  backdrop-filter: blur(4px);
}

.ll-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
}

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

.ll-switch .slider {
  position: absolute;
  cursor: pointer;
  background-color: #888;
  border-radius: 18px;
  inset: 0;
  transition: 0.2s;
}

.ll-switch .slider:before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  top: 2px;
  background-color: white;
  border-radius: 50%;
  transition: 0.2s;
}

.ll-switch input:checked + .slider {
  background-color: #00c853;
}

.ll-switch input:checked + .slider:before {
  transform: translateX(16px);
}

/* ======================================
   NAVIONICS INLINE TOGGLE (LAYER CONTROL)
====================================== */

.ll-nav-toggle-inline {
  padding: 8px 10px;
  margin-bottom: 6px;

  border-bottom: 1px solid rgba(255,255,255,0.12);

  display: flex;
  align-items: center;
  justify-content: space-between;

  font-size: 13px;
  font-weight: 600;

  background: rgba(0,0,0,0.35);
  border-radius: 6px;
}

.ll-nav-toggle-inline span {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* optional "PRO" badge look */
.ll-nav-toggle-inline span::after {
  content: "PRO";
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--navview-orange);
  color: #fff;
  opacity: 0.85;
}

/* checkbox alignment */
.ll-nav-toggle-inline input[type="checkbox"] {
  transform: scale(1.1);
  cursor: pointer;
}

/* ======================================
   NAVIONICS SLIDER CONTROL
====================================== */

.ll-nav-enhanced {
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 6px;
}

.ll-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}

.ll-nav-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
}

.ll-nav-badge {
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--navview-orange);
  color: #fff;
}

/* SLIDER */

.ll-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
}

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

.ll-switch .slider {
  position: absolute;
  cursor: pointer;
  background-color: #888;
  border-radius: 18px;
  inset: 0;
  transition: 0.2s;
}

.ll-switch .slider:before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  top: 2px;
  background-color: white;
  border-radius: 50%;
  transition: 0.2s;
}

.ll-switch input:checked + .slider {
  background-color: #00c853;
}

.ll-switch input:checked + .slider:before {
  transform: translateX(16px);
}

/* ======================================
   FIX FONT AWESOME IN LEAFLET BUTTONS
====================================== */
/* ======================================
   ZOOM CONTROLS (GROUPED)
====================================== */

.leaflet-control-zoom a {
  display: flex !important;
  align-items: center;
  justify-content: center;

  width: var(--map-control-size);
  height: var(--map-control-size);

  font-size: 16px;
  line-height: 1 !important;

  border-radius: 0 !important;
}

/* remove seam between + and - */
.leaflet-control-zoom .leaflet-control-zoom-in + .leaflet-control-zoom-out {
  margin-top: 0 !important;
  border-top: none !important;
}

/* top button rounded */
.leaflet-control-zoom a:first-child {
  border-top-left-radius: var(--map-control-radius) !important;
  border-top-right-radius: var(--map-control-radius) !important;
}

/* bottom button rounded */
.leaflet-control-zoom a:last-child {
  border-bottom-left-radius: var(--map-control-radius) !important;
  border-bottom-right-radius: var(--map-control-radius) !important;
}


/* ======================================
   TOOL BUTTONS (MEASURE / SHARE)
====================================== */

.ll-toolbtn {
  border-radius: var(--map-control-radius) !important;
}


/* ======================================
   SPACING SYSTEM
====================================== */

/* space AFTER zoom group */
.leaflet-control-zoom .leaflet-control-zoom-out + .ll-toolbtn {
  margin-top: 10px !important;
}

/* spacing between tool buttons */
.ll-toolbtn + .ll-toolbtn {
  margin-top: 0px !important;
}


.ll-control-stack {
	border: 0 !important;
	}

/* ======================================
   BASE BUTTON STYLE (shared)
====================================== */

.leaflet-control.leaflet-bar a,
.ll-control-btn {
  width: var(--map-control-size) !important;
  height: var(--map-control-size) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: var(--map-control-bg) !important;
  border: 1px solid var(--map-control-border) !important;
  color: #fff !important;

  box-shadow: var(--map-control-shadow);
  transition: all 0.15s ease;
  cursor: pointer;
}


/* ======================================
   HOVER EFFECT
====================================== */

.leaflet-control.leaflet-bar a:hover,
.ll-control-btn:hover {
  background: var(--map-control-bg-hover) !important;
  transform: translateY(-1px);
}


/* ======================================
   ICON FIX (Font Awesome)
====================================== */

.leaflet-control a i,
.ll-control-btn i {
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}


/* ======================================
   REMOVE DEFAULT LEAFLET OFFSET
====================================== */

.leaflet-top.leaflet-left {
  margin: 0;
}


.ll-overlay-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9999; /* above everything in map */
}


/* ======================================
   MOBILE: LAYER CONTROL BUTTON
====================================== */

.ll-mobile .leaflet-control-layers-toggle {
  width: 20px;
  height: 20px;
background-size: 22px 22px; /* shrink icon */
}

.ll-mobile .leaflet-control {
  margin: 6px;
}





.ll-qr-container {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.ll-qr-container.hidden {
  display: none;
}

.ll-qr-box {
  background: #fff;
  padding: 16px;
  border-radius: 10px;
  text-align: center;
}

#ll-qr-code {
  margin-bottom: 10px;
}

/* ======================================
   MAP FULLSCREEN MODE
====================================== */

/* ======================================
   MAP FULLSCREEN (FIXED FOR YOUR DOM)
====================================== */

/* ======================================
   FULLSCREEN FIX (YOUR STRUCTURE)
====================================== */

/* ======================================
   FULLSCREEN MAP (FINAL - WORKING)
====================================== */

/* ======================================
   FULLSCREEN MAP (FINAL - FIXED)
====================================== */

/* ======================================
   FULLSCREEN MAP (FINAL - NO WHITE SCREEN)
====================================== */

/* ======================================
   FULLSCREEN MAP (FINAL - NO WHITE SCREEN)
====================================== */

/* Expand ONLY the map container */
.ll-map-container.ll-map-fullscreen-active {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  margin: 0 !important;
  padding: 0 !important;

  z-index: 999999;
}

/* Fill inner map */
.ll-map-fullscreen-active #map-wrapper,
.ll-map-fullscreen-active #llMap {
  width: 100% !important;
  height: 100% !important;
}

/* Optional: dim background instead of removing */
body.ll-map-fullscreen {
  overflow: hidden;
}


.modal {
  z-index: 1000001 !important;
}

.modal-backdrop {
  z-index: 1000000 !important;
}





.ll-greyscale-layer {
    filter: grayscale(100%) contrast(0.9) brightness(1.08);
}