/* ---- Spinner animation (shared) ---- */
@keyframes snowspin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.snow-spinner {
  animation: snowspin 2s linear infinite;
  font-size: 3rem;
  color: pink;
}

/* ---- App loading overlay ---- */
#app-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transition: opacity 0.6s ease;
}
#app-loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
#app-loading-overlay .fa-snowflake {
  font-size: 4rem;
  color: pink;
  animation: snowspin 2s linear infinite;
}
#app-loading-overlay .loading-text {
  font-family: 'virgil', sans-serif;
  font-size: 1.2rem;
  color: #666;
}

/* ---- LCP route overlay spinner ---- */
#lcp-overlay .fa-snowflake {
  font-size: 4rem;
  color: pink;
  animation: snowspin 2s linear infinite;
}

/* ---- EasyButton icons (map toolbar) ---- */
.easy-button-button { font-size: 1.797em; }

/* ---- Keep EasyButton bar above custom dropdown ---- */
.leaflet-top.leaflet-left { z-index: 950 !important; }

/* ---- Search bar input text ---- */
.leaflet-control-search .search-input { font-size: 16px; }



/* ---- Dropdown button (map controls) ---- */
.custom-dropdown {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 900;
  opacity: 0.9;
  display: flex;
  align-items: flex-end;
}
.custom-dropdown .dropdown-toggle::after {
  content: none;
}

/* ---- Wind legend ---- */
.wind-legend {
  border-radius: 12px;
  transform: scale(0.65);
  transform-origin: bottom right;
}

/* ---- Fullscreen modals ---- */
.modal-fullscreen .modal-body .plotly { height: 100% !important; }
.modal-fullscreen .modal-body { display: flex; flex-direction: column; }
.modal-fullscreen .modal-body .html-widget { flex: 1; }

/* ---- Frost station modal ---- */
.frost-modal .modal-dialog {
  width: 100vw; max-width: 100vw; margin: 0;
  height: 100vh; height: -webkit-fill-available; height: 100dvh;
  max-height: 100vh; max-height: 100dvh; overflow: hidden;
}
.frost-modal .modal-content { height: 100%; max-height: 100%; border-radius: 0; display: flex; flex-direction: column; overflow: hidden; }
.frost-modal .modal-body { flex: 1; display: flex; padding: 0; overflow: hidden; }
.frost-modal .modal-body > div { width: 100%; height: 100%; }
.frost-modal .modal-body .plotly { width: 100% !important; height: 100% !important; }

/* ---- Observations modal ---- */
.obs-modal .modal-dialog {
  width: 100vw; max-width: 100vw; margin: 0;
  height: 100vh; height: -webkit-fill-available; height: 100dvh;
  max-height: 100vh; max-height: 100dvh; overflow: hidden;
}
.obs-modal .modal-content { height: 100%; max-height: 100%; border-radius: 0; display: flex; flex-direction: column; overflow: hidden; }
.obs-modal .modal-body { flex: 1; display: flex; padding: 0; overflow: hidden; }
.obs-modal .modal-body > .html-fill-container { width: 100%; height: 100%; }
.obs-modal .modal-body .plotly { width: 100% !important; height: 100% !important; }

/* ---- 3D terrain containers ---- */
.terrain3d-container, .terrain3d-container * { touch-action: none; }
.route3d-container, .route3d-container * { touch-action: none; }

/* ---- Windrose overlay (on 3D terrain) ---- */
.windrose-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 8px;
  max-width: 320px;
}

/* ---- 3D zoom buttons (mobile only, overlaid on plot) ---- */
.zoom-3d, .zoom-3d-route {
  display: none;
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 5;
  flex-direction: column;
  gap: 4px;
}
.zoom-3d button, .zoom-3d-route button {
  touch-action: manipulation;
  opacity: 0.85;
}
.modal .zoom-3d, .modal .zoom-3d-route { bottom: 80px; }

/* ---- Mountain/weather modal: flex layout for all screens ---- */
.mobile-fullscreen .modal-content { display: flex; flex-direction: column; height: 85vh; }
.mobile-fullscreen .modal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mobile-fullscreen .modal-footer { flex-shrink: 0; }
.mobile-fullscreen .modal-body .html-widget-output { flex: 1; min-height: 200px; }
/* Fullscreen toggle on desktop */
.modal-dialog.modal-fullscreen { width: 100vw; max-width: none; height: 100vh; margin: 0; }
.modal-dialog.modal-fullscreen .modal-content { height: 100vh; max-height: 100vh; border-radius: 0; }

/* ---- Mobile-specific ---- */
@media (max-width: 768px) {
  /* Modals fill screen — Safari needs -webkit-fill-available, modern uses dvh */
  .mobile-fullscreen .modal-dialog {
    width: 100vw; max-width: 100vw; margin: 0;
    height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
  }
  .mobile-fullscreen .modal-content {
    height: 100%; max-height: 100%;
    border-radius: 0; overflow: hidden;
  }
  .mobile-fullscreen .modal-footer {
    flex-shrink: 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .mobile-fullscreen .modal-body { padding: 8px; }

  /* Search tooltip above control on mobile */
  .leaflet-control-search .search-tooltip {
    top: auto !important;
    bottom: 100% !important;
    margin-bottom: 4px;
    max-height: 35vh;
    overflow-y: auto;
  }

  /* Show 3D zoom buttons */
  .zoom-3d, .zoom-3d-route { display: flex; }

  /* Hide fullscreen toggle (mobile is already fullscreen) */
  .btn-fullscreen-toggle { display: none !important; }

  /* Windrose: column layout on mobile */
  .wr-container { flex-direction: column; }
  .wr-container > div { max-width: 100% !important; }
}

/* ---- Windrose hidden panel (toggle, all screen sizes) ---- */
.wr-mobile-hidden { display: none !important; }

/* ---- Map wrapper (leaflet + mapgl toggle) ---- */
.map-wrapper { position: relative; width: 100%; height: 100vh; }
.mapgl-wrapper { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 500; }

/* ---- Tap-draw: hide Leaflet.Draw polyline, use pencil EasyButton on all screens ---- */
.leaflet-draw-draw-polyline { display: none !important; }

/* ---- Tap-draw hint toast ---- */
#draw-hint {
  display: none;
  position: fixed;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1002;
  background: rgba(37, 99, 235, 0.88);
  color: white;
  border-radius: 20px;
  padding: 7px 14px 7px 18px;
  font-family: 'Virgil', sans-serif;
  font-size: 14px;
  white-space: nowrap;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
#draw-hint button {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.8;
}
#draw-hint button:hover { opacity: 1; }

/* ---- Mobile tap-draw action bar (floating, shown by JS while drawing) ---- */
#mobile-draw-container {
  display: none; /* toggled by JS */
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 24px;
  padding: 7px 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  gap: 10px;
  align-items: center;
}

/* ---- Cicerone / driver.js popover sizing ---- */
.driver-popover {
  min-width: 340px !important;
  max-width: 420px !important;
}
.driver-popover-title { font-size: 1.15rem !important; }
.driver-popover-description { font-size: 1rem !important; line-height: 1.5 !important; }
.driver-popover-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 10px !important;
}
.driver-close-btn,
.driver-prev-btn,
.driver-next-btn {
  font-size: 0.9rem !important;
  padding: 5px 12px !important;
  white-space: nowrap !important;
}

/* ---- Leaflet.draw vertex markers: small round dots ---- */
.leaflet-marker-icon.leaflet-div-icon.leaflet-editing-icon,
.leaflet-marker-icon.leaflet-div-icon {
  border-radius: 50% !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: -7px !important;
  margin-top: -7px !important;
}