:root {
  /* Base z-index scale for mobile layering */
  --z-map: 0;
  /* the map itself (interactive base layer) */
  --z-sbfab: 400;
  /* scooter summary card + buttons + FAB */
  --z-topbar: 600;
  /* topbar, menus, dropdowns that should sit above summary */
  --z-scooter-options: 800;
  /* fullscreen scooter options panel (topmost mobile sheet) */
  --z-modal: 900;
  /* modals / global overlays */
  --z-toast: 1000;
  /* toasts and ephemeral UI */
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
}

#map {
  height: 100%;
  width: 100%;
}

.point-pin {
  --pin-fill: #d14c0f;
  /* A base (orange) */
  --pin-stroke: #9a2f00;
  --pin-text: #ffffff;
  width: 36px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25));
}

.point-pin-svg {
  width: 100%;
  height: 100%;
}

.pin-shape {
  fill: var(--pin-fill);
  stroke: var(--pin-stroke);
  stroke-width: 2;
  stroke-linejoin: round;
}

.pin-letter-svg {
  fill: var(--pin-text);
  font-size: 12px;
  font-family: 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  dominant-baseline: middle;
}

.point-pin-a {
  --pin-fill: #ea580c;
  /* Orange-600 */
  --pin-stroke: #9a3412;
  /* Orange-800 */
}

.point-pin-b {
  --pin-fill: #059669;
  /* Emerald-600 */
  --pin-stroke: #065f46;
  /* Emerald-800 */
}

.charger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.charger-inner {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #60a5fa;
  /* lighter blue */
  border: 1.5px solid #1d4ed8;
  /* slimmer darker outline */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

.charger-cluster {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.charger-cluster-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: #1d4ed8;
  /* match dark blue outline of single bubble */
  border: 1.5px solid #1d4ed8;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
  font-weight: 700;
  line-height: 1.1;
  font-family: 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

.charger-cluster-icon.small {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.charger-cluster-icon.medium {
  width: 38px;
  height: 38px;
  font-size: 13px;
}

.charger-cluster-icon.large {
  width: 46px;
  height: 46px;
  font-size: 14px;
}

.charger-cluster-icon .cluster-lightning {
  color: #facc15;
  font-size: 0.9em;
  /* slightly smaller than the number */
}

.charger-cluster-icon .cluster-count {
  min-width: 12px;
  text-align: center;
  font-size: 1em;
}

.ring-red-500 {
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

[data-error-for] {
  background: rgba(254, 226, 226, 0.9);
  /* red-100-ish */
  border-radius: 999px;
  padding: 2px 8px;
}

.leaflet-marker-icon.no-default {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Base route styling */
.route-line {
  stroke: #4f46e5;
  /* indigo-ish, tweak as you like */
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Optional: make it sit above tiles a bit nicer */
.leaflet-overlay-pane .route-line {
  filter: drop-shadow(0 0 3px rgba(15, 23, 42, 0.4));
}

.route-anim {
  filter: drop-shadow(0 0 4px rgba(79, 70, 229, 0.7));
}

.route-anim-purple {
  stroke: #4f46e5;
  filter: drop-shadow(0 0 5px rgba(79, 70, 229, 0.6));
}

.route-anim-green {
  stroke: #15803d;
  /* Green 700 */
  filter: drop-shadow(0 0 5px rgba(21, 128, 61, 0.6));
}

.route-anim-red {
  stroke: #b91c1c;
  /* Red 700 */
  filter: drop-shadow(0 0 5px rgba(185, 28, 28, 0.6));
}

/* Mobile layout overrides */
@media (max-width: 767px) {
  :root {
    --mobile-sheet-height: 58vh;
    --floating-gap: 16px;
  }

  body {
    position: relative;
    overflow: hidden;
  }

  #map {
    position: absolute;
    inset: 0;
    z-index: var(--z-map);
  }

  #mobileTopBar {
    display: flex;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 12px;
    right: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    background: #ffffff;
    z-index: var(--z-topbar);
  }

  #sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    max-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    z-index: 20;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
  }

  #sidebarHeader {
    display: none;
  }

  #sidebarPages {
    height: 100%;
  }

  #sidebarPageConfig {
    padding-bottom: 180px;
    transform: none !important;
  }

  #sidebarPageAbout,
  #sidebarPageSuggest,
  #sidebarPageReport {
    transform: translateY(100%);
    /* hidden default (sheet) OR translateX if you use X-axis */
    transition: transform 300ms cubic-bezier(.22, .9, .3, 1), opacity 160ms linear;
    pointer-events: none;
    z-index: var(--z-sbfab);
    /* sit under summary when closed (only visual) */
  }

  #sidebarPageAbout.open,
  #sidebarPageSuggest.open,
  #sidebarPageReport.open {
    transform: translateY(0);
    pointer-events: auto;
    z-index: var(--z-scooter-options);
    /* should be above bars while open */
  }

  /* Compatibility for translate-x classes if your JS toggles them */
  #sidebarPageAbout.translate-x-full,
  #sidebarPageSuggest.translate-x-full,
  #sidebarPageReport.translate-x-full {
    transform: translateX(100%);
    pointer-events: none;
    z-index: var(--z-sbfab);
  }

  #sidebarPageAbout.translate-x-0,
  #sidebarPageSuggest.translate-x-0,
  #sidebarPageReport.translate-x-0 {
    transform: translateX(0);
    pointer-events: auto;
    z-index: var(--z-scooter-options);
  }



  #sidebarPageResults {
    display: none;
  }

  /* Hide route block title in sheet; float capsule instead */
  #routeSection {
    position: fixed;
    left: 14px;
    right: 102px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 32px);
    pointer-events: auto;
    z-index: 40;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  #routeSection .route-title {
    display: none;
  }

  #routeSection .space-y-2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #routeSection>* {
    width: 100%;
    max-width: 260px;
  }

  #routeSection .route-pill {
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    padding-left: 14px;
    padding-right: 14px;
    height: 52px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
    width: 100%;
  }

  #routeSection .location-btn {
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    height: 52px;
    width: 52px;
    /* Fixed width */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
    flex-shrink: 0;
    padding: 0;
  }

  #routeSection button span {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 1.15;
    vertical-align: middle;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: left;
  }

  /* Plan FAB + Donate Banner Container */
  #sidebarActionFooter:not(.hidden) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    border: none;
    z-index: var(--z-sbfab);
    pointer-events: none;
    /* let clicks pass through empty space */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Align FAB to right */
    justify-content: flex-end;
    gap: 12px;
    /* Ensure it sits above the map but below the sheet */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px);
    /* Move up */
    padding-right: 24px;
    /* Move left */
  }

  /* Children need pointer events back */
  #sidebarActionFooter>* {
    pointer-events: auto;
  }

  /* Default state (Map Mode): Show FAB, Hide Banner */
  #sidebarActionFooter .donate-banner-link {
    display: none;
  }

  #planButton {
    display: flex;
  }

  /* The Donate Banner in mobile footer (Default hidden, used in float now) */
  #sidebarActionFooter .donate-banner-link {
    display: none;
  }

  #sidebarActionFooter .donate-banner {
    /* Keep styles if needed for desktop or other views, but mobile uses float now */
    background: #EFFDF6;
    border: 1px solid #86efac;
    box-shadow: 0 8px 20px rgba(6, 95, 70, 0.15);
    margin: 0;
    border-radius: 16px;
  }

  /* Mobile Donate Float */
  #mobileDonateFloat {
    bottom: 24px;
    left: 0;
    right: 0;
    display: none;
    /* Hidden by default */
  }

  #mobileDonateFloat .donate-banner {
    background: #EFFDF6;
    border: 1px solid #86efac;
    box-shadow: 0 8px 20px rgba(6, 95, 70, 0.15);
    margin: 0;
    border-radius: 16px;
  }

  body.config-full-open #mobileDonateFloat {
    display: block;
  }

  #planButton {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.25);
    /* Ensure button stays on right */
    align-self: flex-end;
  }

  /* Selection prompt sheet */
  #pointSelectionOverlay {
    position: fixed;
    inset: auto 0 0 0;
    height: auto;
    display: block;
    transform: translateY(100%);
    transition: transform 160ms ease;
    z-index: 30;
    pointer-events: none;
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.18);
  }

  #pointSelectionLabel {
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
  }

  body.selecting-point #pointSelectionOverlay {
    transform: translateY(0);
    pointer-events: auto;
  }

  body.selecting-point #routeSection,
  body.selecting-point #sidebarActionFooter {
    opacity: 0;
    pointer-events: none;
  }

  body.showing-results #sidebar {
    transform: translateY(110%);
  }

  body.showing-results #routeSection,
  body.showing-results #sidebarActionFooter {
    opacity: 0;
    pointer-events: none;
  }

  body.showing-results #mobileTopBar,
  body.showing-results #mobileConfigSummary {
    display: none;
  }

  /* Tooltip errors on floating capsule */
  #routeSection [data-error-for] {
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translate(-50%, -6px);
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: auto;
    padding: 24px;
    text-align: center;
    font-size: 14px;
    color: #334;
    white-space: nowrap;
    z-index: var(--z-sbfab);
  }

  /* ============================================
   MOBILE-FIRST POPUP OVERLAY SYSTEM
   ============================================ */

  /* Popup Overlay - Full screen backdrop with content */
  .popup-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-scooter-options);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }

  .popup-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
  }

  /* Popup Content - The actual popup container */
  .popup-content {
    width: 100%;
    max-height: 90vh;
    background: white;
    border-radius: 24px 24px 0 0;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(0.22, 0.9, 0.3, 1);
    display: flex;
    flex-direction: column;
  }

  .popup-overlay:not(.hidden) .popup-content {
    transform: translateY(0);
  }

  /* Scooter Config Sheet - Needs flex layout for sticky footer */
  .scooter-config-sheet {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
  }

  .scooter-config-sheet #sidebarPageConfig {
    flex: 1;
    overflow-y: auto;
  }

  /* Desktop: Center popups instead of bottom sheet */
  @media (min-width: 768px) {
    .popup-overlay {
      align-items: center;
    }

    .popup-content {
      width: 480px;
      max-width: 90vw;
      max-height: 85vh;
      border-radius: 20px;
      transform: scale(0.95) translateY(20px);
    }

    .popup-overlay:not(.hidden) .popup-content {
      transform: scale(1) translateY(0);
    }

    /* Scooter config on desktop: positioned like sidebar */
    #scooterConfigPopup .popup-overlay {
      background: transparent;
      align-items: flex-start;
      justify-content: flex-start;
      pointer-events: none;
    }

    #scooterConfigPopup .popup-content {
      position: fixed;
      left: 16px;
      top: 164px;
      width: 384px;
      max-height: calc(100vh - 180px);
      border-radius: 16px;
      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.25);
      pointer-events: auto;
    }
  }

  /* Results bottom sheet */
  #sidebarPageResults {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70vh;
    max-height: 78vh;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 200ms ease;
    z-index: 28;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.22);
    border: 1px solid #e2e8f0;
  }

  body.showing-results #sidebarPageResults {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Mobile results overlays */

  /* 1. Hide Home UI when showing results */
  body.showing-results #mobileTopBar,
  body.showing-results #mobileConfigSummary,
  body.showing-results #routeSection,
  body.showing-results #sidebarActionFooter {
    display: none !important;
  }

  /* 2. Mobile Results Header (Floating Top Box) */
  #mobileResultsHeader {
    pointer-events: auto;
    /* Lower Z-index than sheet so sheet covers it when dragged up */
    z-index: 40;
  }

  /* Clean up injected content padding inside the header */
  #mobileResultsHeaderContent .results-header {
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: none;
    background: transparent;
  }

  /* 3. Mobile Results Bottom Sheet */

  /* Back button */
  .mobile-back-floating {
    position: fixed;
    left: 16px;
    /* <-- moved from right to left */
    bottom: calc(25vh + 12px);
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    z-index: 48;
    /* BELOW the sheet so the sheet covers it */
    pointer-events: auto;
    transition: bottom 180ms ease, opacity 120ms ease, transform 120ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-back-floating span {
    height: 56px;
    /* also increase inner circle */
    width: 56px;
  }

  .mobile-back-floating svg {
    width: 22px;
    /* scale SVG */
    height: 22px;
  }

  .mobile-back-floating.hidden {
    display: none !important;
  }

  /* make the handle explicitly interactive for pointer dragging */
  #mobileResultsSheetHandle {
    touch-action: none;
    /* ensure pointer events are routed to JS for dragging */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: grab;
  }

  #mobileResultsSheetHandle:active {
    cursor: grabbing;
  }


  #mobileResultsSheet {
    height: 35vh;
    /* Default starting height */
    max-height: 98vh;
    /* Allow it to go almost full screen */
    transition: height 180ms ease, transform 200ms ease;
    pointer-events: auto;
    /* Higher Z-index to cover the header */
    z-index: 50;
  }

  #mobileResultsSheet.dragging {
    transition: none;
  }

  #mobileResultsSheetContent {
    padding: 0 16px 24px 16px;
    /* Extra bottom padding for scroll */
  }

  .mobile-results-sheet-full {
    height: 98vh !important;
  }

  /* 4. Slide In Animation */
  .mobile-slide-in {
    animation: mobileSlideIn 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes mobileSlideIn {
    from {
      transform: translateX(100%);
      opacity: 0;
    }

    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  #mobileResultsHeader {
    pointer-events: auto;
  }

  #mobileResultsSheet {
    height: 33vh;
    max-height: 92vh;
    transition: height 180ms ease, transform 200ms ease, box-shadow 200ms ease;
    pointer-events: auto;
  }

  #mobileResultsSheet.dragging {
    transition: none;
  }

  #mobileResultsSheetContent {
    max-height: calc(92vh - 56px);
    padding: 0 16px 16px 16px;
  }

  .mobile-results-sheet-full {
    height: 92vh !important;
  }

  .mobile-slide-in {
    animation: mobileSlideIn 220ms ease;
  }

  @keyframes mobileSlideIn {
    from {
      transform: translateX(28px);
      opacity: 0;
    }

    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  /* Mobile menu dropdown covers sheet */
  #mobileMenu {
    z-index: 50;
  }
}

/* Donate banner (matches light-green route progress look) */
.donate-banner {
  border-radius: 12px;
  padding: 16px 16px;
  margin: 12px 0;
  background: #EFFDF6;
  /* mint/light-green fill similar to progress bar */
  border: 1px solid #86efac;
  /* subtle green stroke */
  box-shadow: 0 18px 36px rgba(6, 95, 70, 0.18);
}

.donate-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.donate-small {
  font-size: 12px;
  line-height: 1;
  color: #065f46;
  /* darker green for small label */
  font-weight: 500;
}

.donate-link {
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  color: #065f46;
  /* same green */
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Slightly tighter spacing for mobile */
@media (max-width: 767px) {
  .donate-banner {
    padding: 16px;
    margin: 10px 0 24px;
  }

  .donate-link {
    font-size: 16px;
  }
}

/* =========================================
   Revamped Desktop Layout (Unified with Mobile)
   ========================================= */

/* Hide the old desktop sidebar header */
#sidebarHeader {
  display: none !important;
}

/* Hide floating UI when showing results or search is active */
body.showing-results #mobileTopBar,
body.showing-results #mobileConfigSummary,
body.showing-results #homeSearchBar,
body.search-active #homeSearchBar {
  display: none !important;
}

/* Ensure results page slides in correctly inside the modal */
#sidebarPageResults {
  /* Override mobile fixed positioning */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  max-height: none !important;
  transform: translateX(100%);
  transition: transform 300ms ease;
  z-index: 20;
  background: #fff;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  opacity: 1 !important;
  /* Override mobile opacity 0 */
  pointer-events: auto !important;
}

body.showing-results #sidebarPageResults {
  transform: translateX(0) !important;
}

/* Adjust sidebar pages to fit in modal */
#sidebarPageConfig {
  padding-bottom: 80px;
  /* Space for footer */
  transform: none !important;
  /* Disable mobile transform tricks if any */
}

/* Ensure map takes full screen */
#map {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}

/* =========================================
   Desktop Results UI & Overlay Tweaks
   ========================================= */

/* =========================================
   Desktop Results UI - Separated Approach
   ========================================= */

@media (min-width: 768px) {

  /* 1. Hide Mobile Elements on Desktop */
  #mobileResultsHeader,
  #mobileResultsSheet,
  #mobileBackToConfig {
    display: none !important;
  }

  /* 2. Desktop Container Styling */
  #desktopResultsContainer {
    /* Layout handled by Tailwind classes in HTML: 
       fixed top-[88px] left-4 w-96 flex-col gap-0 rounded-2xl shadow-2xl 
    */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    opacity: 0;
    visibility: hidden;
    /* Ensure it's not clickable or visible on load */
    pointer-events: none;
    transform: translateX(-20px);
  }

  /* Show state */
  body.showing-results #desktopResultsContainer {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  /* 3. Desktop Header Styling */
  #desktopResultsHeader {
    /* Ensure no rounded bottom corners to merge with sheet */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* 4. Desktop Sheet Styling */
  #desktopResultsSheet {
    /* Ensure no rounded top corners to merge with header */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  /* 5. Hide mobile sheet handle on desktop only */
  #mobileResultsSheetHandle {
    display: none;
  }

  /* 6. Adjust mobile sheet content padding on desktop since handle is gone */
  #mobileResultsSheetContent {
    padding-top: 20px;
  }
}

/* Hide the floating back button on desktop since we have one in the header/sheet usually? 
     Actually mobile results header has a back button? No, it's in the sheet or header?
     Let's check index.html. #mobileBackToConfig is the floating one. 
     We might want to keep it or style it. 
     User said "Float it on the left side".
  */

/* 2. "Pilih titik di peta" Overlay Positioning on Desktop */
@media (min-width: 768px) {
  /* 
     The overlay is inside #sidebar. 
     When selecting a point, #sidebar might be hidden or pointer-events-none.
     We need to make sure the overlay is visible and positioned correctly.
  */

  /* Ensure sidebar container allows interaction with overlay */
  body.selecting-point #sidebar {
    display: flex !important;
    pointer-events: none;
    /* Container transparent */
    background: transparent;
    border: none;
    box-shadow: none;
  }

  /* Position the overlay itself */
  body.selecting-point #pointSelectionOverlay {
    position: fixed;
    top: 230px;
    /* Below search bar (approx 164px + height) */
    left: 16px;
    right: auto;
    bottom: auto;
    width: 384px;
    /* w-96 */
    height: auto;
    border-radius: 16px;
    z-index: 60;
    background: transparent;
    /* The inner div has the color */
    pointer-events: auto;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    display: block !important;
    transform: none !important;
  }

  /* Adjust the inner label styling if needed */
  body.selecting-point #pointSelectionLabel {
    border-radius: 16px !important;
    width: 100%;
  }
}

/* =========================================
   Desktop Sidebar (Left Panel) Refinements
   ========================================= */

@media (min-width: 768px) {
  /* 
     Sidebar Container:
     - Fixed on the left
     - Below navbar (top: 88px)
     - Width: 384px (w-96)
     - Hidden by default (translateX -120%)
     - Slides in when .config-full-open is present
  */


  /* Default state (hidden to the left) */
  #sidebar {
    display: flex !important;
    /* Always display flex so transition works */
    flex-direction: column;
    position: fixed;
    top: 88px;
    left: 16px;
    bottom: 24px;
    width: 384px;
    transform: translateX(-150%);
    /* Start off-screen left */
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 60;
    pointer-events: none;
    /* Click-through when hidden */
    background: #fff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    /* Ensure content is clipped */
    overflow: hidden;
  }

  /* When open, enable pointer events */
  body.config-full-open #sidebar {
    pointer-events: auto !important;
  }

  /* Hide backdrop on desktop since it's a side panel now */
  #sidebarBackdrop {
    display: none !important;
  }

  /* Ensure content container fills the sidebar */
  #sidebarContent {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    transform: translateY(0) !important;
    /* Container matches parent */
    box-shadow: none !important;
    transform: none !important;
    /* No inner transform */
    background: transparent !important;
  }

  /* Adjust config page padding */
  #sidebarPageConfig {
    padding-bottom: 0 !important;
    /* Footer is sticky inside */
  }

  /* Footer inside sidebar */
  #mobileConfigFooter {
    border-radius: 0 !important;
  }
}

/* =========================================
   Desktop Results UI Refinements (Step 96)
   ========================================= */

/* Obsolete desktop styling for mobile elements removed */

/* =========================================
   Fix Overlay Visibility (Mobile & Desktop)
   ========================================= */

/* Mobile: Ensure sidebar container is accessible for overlay */
body.selecting-point #sidebar {
  display: flex !important;
  pointer-events: none;
  background: transparent;
  z-index: 50;
}

/* Hide sidebar content (header, pages) so only overlay is visible */
body.selecting-point #sidebarHeader,
body.selecting-point #sidebarPages,
body.selecting-point #mobileConfigFooter {
  display: none !important;
}

body.selecting-point #sidebarBackdrop {
  display: none !important;
}

body.selecting-point #sidebarContent {
  transform: none !important;
  /* Remove transform trap */
  position: static !important;
  /* Allow children to reference viewport/sidebar */
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
  height: 100% !important;
  /* Full height to allow bottom positioning */
  width: 100% !important;
  /* Full width */
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Mobile Overlay Position: Bottom */
body.selecting-point #pointSelectionOverlay {
  display: flex !important;
  /* Override hidden */
  position: fixed !important;
  /* Fixed relative to viewport */
  bottom: 24px;
  left: 16px;
  right: 16px;
  top: auto;
  z-index: 60;
  pointer-events: auto;
  background: transparent;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body.selecting-point #pointSelectionLabel {
  width: 100%;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* Background color set by JS (bg-orange-500 / bg-emerald-500) */
  color: white;
}

/* Hide search bar and scooter summary when selecting point - both mobile and desktop */
body.selecting-point .search-bar-home-container,
body.selecting-point #mobileConfigSummary {
  display: none !important;
}

/* Popup Content Section - Wrapper for individual popup contents */
.popup-content-section {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.popup-content-section.hidden {
  display: none !important;
}

/* Desktop: Popup slides in from left, no backdrop */
@media (min-width: 768px) {
  .popup-overlay {
    background: transparent;
    /* No backdrop on desktop */
    pointer-events: none;
    /* Allow clicking through overlay */
    display: none;
    /* Hidden by default */
    justify-content: flex-start;
    /* Align left */
    align-items: flex-start;
  }

  .popup-overlay:not(.hidden) {
    display: flex;
    /* Show when not hidden */
  }

  .popup-content {
    position: fixed;
    left: 16px;
    top: 88px;
    /* Same as top navbar margin */
    width: 384px;
    /* w-96 */
    max-height: calc(100vh - 112px);
    /* 88px top + 24px bottom */
    background: white;
    /* White background */
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.15);
    transform: translateX(-120%);
    /* Start off-screen left */
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    /* Re-enable clicks on content */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .popup-overlay:not(.hidden) .popup-content {
    transform: translateX(0);
    /* Slide in */
  }
}

/* Desktop: Hide top UI when popup is active - use body class like search does */
@media (min-width: 768px) {

  /* When popup is open, hide scooter summary and search */
  body.popup-active #mobileConfigSummary,
  body.popup-active #homeSearchBar {
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out;
  }

  /* Default state - visible with fade in */
  #mobileConfigSummary,
  #homeSearchBar {
    opacity: 1;
    transition: opacity 300ms ease-in 100ms;
  }
}

/* Results Sheet Desktop Styling */
/* Conflicting media query removed */