/* ============================================================
   PRIME MOBILITY — Frontend CSS v2
   Three services: Airport Transfer | Employee Commute | Student Commute
   Layout: map behind, floating panel with horizontal screen slider
   ============================================================ */

/* ── Variables ── */
:root {
  --pm-orange:   #FFA500;
  --pm-orange-h: #e69400;
  --pm-oran-bg:  rgba(255,165,0,.09);
  --pm-black:    #1a1a1a;
  --pm-white:    #ffffff;
  --pm-surface:  #ffffff;
  --pm-s2:       #f5f5f5;
  --pm-s3:       #ececec;
  --pm-border:   rgba(0,0,0,.09);
  --pm-border-m: rgba(0,0,0,.16);
  --pm-text:     #1a1a1a;
  --pm-muted:    rgba(26,26,26,.52);
  --pm-dim:      rgba(26,26,26,.32);
  --pm-green:    #22C55E;
  --pm-red:      #EF4444;
  --pm-radius:   18px;
  --pm-rsm:      12px;
  --pm-tr:       .28s cubic-bezier(.4,0,.2,1);
  --pm-sha:      0 4px 28px rgba(0,0,0,.13);
  --pm-sha-l:    0 -4px 24px rgba(0,0,0,.11);
  --pm-pw:       400px;   /* panel width on desktop */
  --pm-ph:       640px;   /* app height on desktop */
}

/* ── Global reset inside widget ── */
.pm-app *, .pm-app *::before, .pm-app *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.pm-app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  color: var(--pm-text);
  line-height: 1.5;
  position: relative;
  background: #ccc;
}

/* ══════════════════════════════════════════════════
   MAP  — always fills the container
══════════════════════════════════════════════════ */
#pm-map {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.leaflet-container { font-family: inherit; background: #e8e8e8 !important; }

/* ══════════════════════════════════════════════════
   FAB buttons (float over map)
══════════════════════════════════════════════════ */
.pm-fab {
  position: absolute;
  z-index: 30;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--pm-white);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: var(--pm-sha);
  transition: all var(--pm-tr);
  color: var(--pm-text);
}
.pm-fab:hover { background: var(--pm-orange); color: #fff; transform: scale(1.07); }
.pm-fab-gps { right: 14px; }

/* ══════════════════════════════════════════════════
   DESKTOP LAYOUT  (≥ 769px)
   App: fixed height box. Panel: left column. Map: right.
══════════════════════════════════════════════════ */
@media (min-width: 769px) {

  .pm-app {
    width: 100%;
    height: var(--pm-ph);
    overflow: hidden;
    border-radius: var(--pm-radius);
    box-shadow: var(--pm-sha);
  }

  #pm-map { border-radius: var(--pm-radius); }

  /* Panel sits on the left, full height */
  .pm-panel {
    position: absolute;
    top: 0; left: 0;
    width: var(--pm-pw);
    height: 100%;                  /* fill app height */
    z-index: 20;
    background: var(--pm-surface);
    display: flex;
    flex-direction: column;
    overflow: hidden;              /* ← clips the screen slider */
    border-radius: var(--pm-radius) 0 0 var(--pm-radius);
    box-shadow: 4px 0 32px rgba(0,0,0,.1);
  }

  .pm-panel-handle { display: none; }

  /* FAB position (desktop — right side of map area) */
  .pm-fab-gps { right: 14px; bottom: 80px; }
}

/* ══════════════════════════════════════════════════
   MOBILE LAYOUT  (≤ 768px)
   ┌──────────────────┐
   │   Map (160px)    │  flex-shrink:0
   ├──────────────────┤
   │  Nav  (fixed)    │  flex-shrink:0
   │  Progress        │  flex-shrink:0
   │  Fields scroll   │  flex:1  overflow-y:auto
   │                  │
   │  [  Button  ]    │  flex-shrink:0  STICKY
   └──────────────────┘
   NO position:fixed — won't overlap Astra header/footer.
══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* App = flex column, fills screen on mobile */
  .pm-app {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: 100% !important;
    height: calc(100dvh - 80px) !important;
    min-height: 480px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    box-shadow: var(--pm-sha) !important;
  }

  /* Map — compact fixed strip at top */
  #pm-map {
    position: relative !important;
    flex-shrink: 0 !important;
    height: 180px !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    inset: auto !important;
  }

  /* Panel — fills remaining screen space below map */
  .pm-panel {
    position: relative !important;
    flex: 1 1 0% !important;
    width: 100% !important;
    min-height: 0 !important;
    background: var(--pm-surface) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 2 !important;
  }

  /* HOME (step 0) — panel fills space, content scrolls if needed */
  .pm-panel[data-step="0"] {
    /* inherits flex:1 from .pm-panel */
  }
  .pm-panel[data-step="0"] .pm-screens {
    flex: 1 1 0% !important;
    min-height: 0 !important;
  }
  .pm-panel[data-step="0"] .pm-body {
    flex: 1 1 0% !important;
    overflow-y: auto !important;
    padding-bottom: 14px !important;
  }
  /* KEY FIX: collapse off-screen panels so they don't push height */
  .pm-panel[data-step="0"] .pm-screen:not(#pm-s0) {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  /* Same for success screen */
  .pm-panel[data-step="5"] .pm-screen:not(#pm-s5) {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* FORM SCREENS — fill panel (panel is flex:1 of app) */
  .pm-panel[data-step="1"] .pm-screens,
  .pm-panel[data-step="2"] .pm-screens,
  .pm-panel[data-step="3"] .pm-screens,
  .pm-panel[data-step="4"] .pm-screens,
  .pm-panel[data-step="5"] .pm-screens {
    flex: 1 1 0% !important;
    min-height: 0 !important;
  }

  /* ALL body on mobile: reduce 110px desktop padding.
     Bar is a flex sibling, NOT overlapping the body. */
  .pm-body {
    padding: 14px 16px 12px !important;
  }

  /* Bar: tighten padding */
  .pm-bar {
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom)) !important;
  }

  /* Drag handle */
  .pm-panel-handle {
    flex-shrink: 0;
    padding: 8px 0 2px;
    display: flex;
    justify-content: center;
    cursor: grab;
  }
  .pm-panel-handle::after {
    content: '';
    width: 36px; height: 4px;
    background: var(--pm-s3);
    border-radius: 2px;
  }

  .pm-fab-gps { display: none !important; }
}

/* ══════════════════════════════════════════════════
   SCREEN SLIDER
   KEY FIX:
   - .pm-screens must NOT have overflow:hidden (panel handles clipping)
   - .pm-screen must use width:100% (not min-width) + flex-shrink:0
   - translateX(-N*100%) works because 100% = width of .pm-screens = width of panel
══════════════════════════════════════════════════ */
.pm-screens {
  flex: 1 1 0%;              /* fill remaining height in column-flex panel */
  width: 100%;               /* must be explicit so 100% children compute correctly */
  min-height: 0;             /* allow shrinking below content size */
  display: flex;
  flex-direction: row;
  /* NO overflow:hidden here — panel clips */
  will-change: transform;
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}

.pm-screen {
  width: 100%;               /* exactly panel width */
  flex-shrink: 0;            /* never squish */
  display: flex;
  flex-direction: column;
  /* NO overflow:hidden — pm-body scrolls */
}

/* ══════════════════════════════════════════════════
   PANEL INNER ELEMENTS
══════════════════════════════════════════════════ */

/* Nav bar */
.pm-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 10px;
  flex-shrink: 0;
  background: var(--pm-surface);
  border-bottom: 1px solid var(--pm-border);
}
.pm-back {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--pm-s2);
  border: 1px solid var(--pm-border);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 300;
  color: var(--pm-text);
  flex-shrink: 0;
  transition: background var(--pm-tr);
  line-height: 1;
}
.pm-back:hover { background: var(--pm-s3); }
.pm-nav-title { font-size: 17px; font-weight: 700; letter-spacing: -.3px; flex: 1; }

/* Progress bar */
.pm-prog { height: 2px; background: var(--pm-s2); flex-shrink: 0; }
.pm-prog-fill { height: 100%; background: var(--pm-orange); transition: width .45s ease; }

/* Scrollable body */
.pm-body {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 18px 110px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pm-body::-webkit-scrollbar { display: none; }

/* Section label */
.pm-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pm-dim);
  margin: 20px 0 10px;
}
.pm-lbl:first-child { margin-top: 0; }

/* Sticky bottom action bar */
.pm-bar {
  flex-shrink: 0;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--pm-white) 70%, transparent);
}

/* CTA button */
.pm-cta {
  width: 100%; height: 52px;
  background: var(--pm-orange);
  color: #000;
  border: none;
  border-radius: 13px;
  font-family: inherit;
  font-size: 15px; font-weight: 800;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--pm-tr);
  letter-spacing: -.2px;
  text-decoration: none;
}
.pm-cta:hover:not(:disabled) { background: var(--pm-orange-h); }
.pm-cta:active:not(:disabled) { transform: scale(.97); }
.pm-cta:disabled { opacity: .32; cursor: not-allowed; }

/* Ghost button */
.pm-ghost {
  width: 100%; height: 46px;
  background: var(--pm-s2); color: var(--pm-text);
  border: 1px solid var(--pm-border);
  border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--pm-tr);
  margin-top: 8px;
}
.pm-ghost:active { transform: scale(.97); }

/* Spinner */
.pm-spin {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2.5px solid rgba(0,0,0,.2);
  border-top-color: #000;
  border-radius: 50%;
  animation: pm-spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════
   HOME SCREEN
══════════════════════════════════════════════════ */
.pm-logo-bar { padding: 18px 18px 8px; flex-shrink: 0; }
.pm-logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 3px;
}
.pm-logo-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--pm-orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.pm-logo-name { font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
.pm-logo-tag  { font-size: 12px; color: var(--pm-muted); padding-left: 46px; }

.pm-hero { margin: 8px 0 18px; }
.pm-hero h1 {
  color: var(--pm-text);
  font-size: 26px; font-weight: 800;
  letter-spacing: -.6px; line-height: 1.15;
  margin-bottom: 5px;
}
.pm-hero p { font-size: 13px; color: var(--pm-muted); }

/* Service cards */
.pm-svc-grid  { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.pm-svc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }

.pm-svc {
  background: var(--pm-surface);
  border: 1.5px solid var(--pm-border);
  border-radius: var(--pm-radius);
  padding: 18px 16px;
  cursor: pointer;
  transition: all var(--pm-tr);
  position: relative;
  overflow: hidden;
  user-select: none;
}
.pm-svc:active { transform: scale(.975); }
.pm-svc.featured {
  border-color: rgba(255,165,0,.45);
  background: linear-gradient(140deg, var(--pm-white) 55%, var(--pm-oran-bg));
}
.pm-svc-hot {
  position: absolute; top: 12px; right: 12px;
  background: var(--pm-orange); color: #000;
  font-size: 9px; font-weight: 800;
  padding: 3px 8px; border-radius: 20px;
  letter-spacing: .5px;
}
.pm-svc-ico {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 12px;
}
.pm-svc-ico.a { background: var(--pm-oran-bg); }
.pm-svc-ico.b { background: var(--pm-s2); }
.pm-svc-ico.c { background: var(--pm-s2); }
.pm-svc h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--pm-text); }
.pm-svc p  { font-size: 12px; color: var(--pm-muted); line-height: 1.45; }
.pm-svc-arrow {
  position: absolute; bottom: 16px; right: 16px;
  width: 28px; height: 28px;
  background: var(--pm-s2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--pm-muted);
}

/* Trust chips */
.pm-trust { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; }
.pm-trust::-webkit-scrollbar { display: none; }
.pm-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--pm-surface);
  border: 1.5px solid var(--pm-border);
  border-radius: 24px;
  padding: 7px 12px;
  font-size: 12px; font-weight: 500;
  color: var(--pm-muted);
  white-space: nowrap; flex-shrink: 0;
}
.pm-live {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pm-green);
  animation: pm-blink 2s infinite;
}
@keyframes pm-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ══════════════════════════════════════════════════
   FORM SCREEN — shared field components
══════════════════════════════════════════════════ */

/* Direction selector */
.pm-dir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.pm-dir-opt {
  border: 1.5px solid var(--pm-border);
  border-radius: var(--pm-rsm);
  padding: 14px 10px; text-align: center;
  cursor: pointer; transition: all var(--pm-tr);
  background: var(--pm-surface);
}
.pm-dir-opt:hover  { border-color: var(--pm-orange); }
.pm-dir-opt.active { border-color: var(--pm-orange); background: var(--pm-oran-bg); }
.pm-dir-icon  { font-size: 24px; margin-bottom: 6px; }
.pm-dir-label { font-size: 12px; font-weight: 700; }
.pm-dir-sub   { font-size: 10px; color: var(--pm-muted); margin-top: 2px; }

/* One-way / round trip */
.pm-toggle {
  display: flex;
  background: var(--pm-s2);
  border: 1.5px solid var(--pm-border);
  border-radius: var(--pm-rsm);
  padding: 4px; gap: 4px;
  margin-bottom: 12px;
}
.pm-tog {
  flex: 1; padding: 9px 8px;
  border: none; background: transparent;
  border-radius: 9px;
  color: var(--pm-muted);
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all var(--pm-tr);
}
.pm-tog.on {
  background: var(--pm-s3, #f4f4f4);   /* uses dark var --pm-s3 when in dark mode */
  color: var(--pm-text);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Field group */
.pm-fgrp {
  background: var(--pm-surface);
  border: 1.5px solid var(--pm-border);
  border-radius: var(--pm-rsm);
  overflow: visible;
  margin-bottom: 12px;
}
.pm-frow {
  display: flex; align-items: center;
  padding: 0 14px; gap: 10px; min-height: 52px;
  position: relative;
}
.pm-frow + .pm-frow { border-top: 1px solid var(--pm-border); }
.pm-frow input,
.pm-frow select {
  flex: 1; background: transparent;
  border: none; outline: none;
  color: var(--pm-text); font-family: inherit;
  font-size: 14px; font-weight: 500;
  min-width: 0; caret-color: var(--pm-orange);
}
.pm-frow select { -webkit-appearance: none; appearance: none; cursor: pointer; }
.pm-frow input::placeholder { color: var(--pm-dim); font-weight: 400; }
.pm-frow input[type="date"],
.pm-frow input[type="time"] { color-scheme: light; }
.pm-f-ico {
  font-size: 15px; flex-shrink: 0;
  width: 18px; text-align: center; opacity: .5;
}
.pm-swap-loc {
  width: 30px; height: 30px;
  background: var(--pm-s2); border: 1.5px solid var(--pm-border-m);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--pm-muted); font-size: 14px; flex-shrink: 0;
  transition: all var(--pm-tr);
}
.pm-swap-loc:active { transform: rotate(180deg); }

/* Autocomplete */
.pm-ac-wrap { position: relative; }
.pm-ac-list {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 2px);
  z-index: 800;
  background: var(--pm-white);
  border: 1.5px solid var(--pm-border-m);
  border-radius: 0 0 var(--pm-rsm) var(--pm-rsm);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  max-height: 220px; overflow-y: auto;
  display: none;
}
.pm-ac-list.open { display: block; }
.pm-ac-item {
  padding: 10px 14px; cursor: pointer;
  font-size: 13px; border-top: 1px solid var(--pm-border);
  color: var(--pm-text);
  display: flex; align-items: flex-start; gap: 10px;
  transition: background var(--pm-tr);
}
.pm-ac-item:first-child { border-top: none; }
.pm-ac-item:hover       { background: var(--pm-s2); }
.pm-ac-pin  { font-size: 13px; flex-shrink: 0; margin-top: 1px; opacity: .45; }
.pm-ac-main { font-weight: 600; font-size: 13px; }
.pm-ac-sub  { font-size: 11px; color: var(--pm-dim); display: block; margin-top: 1px; }

/* Counters */
.pm-cnt-card {
  background: var(--pm-surface);
  border: 1.5px solid var(--pm-border);
  border-radius: var(--pm-rsm);
  margin-bottom: 12px; overflow: hidden;
}
.pm-cnt-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px;
}
.pm-cnt-row + .pm-cnt-row { border-top: 1px solid var(--pm-border); }
.pm-cnt-lbl { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.pm-cnt-sub { font-size: 11px; color: var(--pm-dim); font-weight: 400; }
.pm-cnt-ctrl { display: flex; align-items: center; gap: 14px; }
.pm-cnt-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--pm-border-m);
  background: none; color: var(--pm-text); font-size: 17px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--pm-tr); line-height: 1;
}
.pm-cnt-btn:active   { background: var(--pm-s2); }
.pm-cnt-btn:disabled { opacity: .22; cursor: not-allowed; }
.pm-cnt-v { font-size: 16px; font-weight: 800; min-width: 18px; text-align: center; }

/* Meet & Greet checkbox */
.pm-check-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--pm-surface);
  border: 1.5px solid var(--pm-border);
  border-radius: var(--pm-rsm);
  margin-bottom: 12px; cursor: pointer;
}
.pm-check-row input[type="checkbox"] { accent-color: var(--pm-orange); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.pm-ck-label { font-size: 13px; font-weight: 600; flex: 1; }
.pm-ck-sub   { font-size: 11px; color: var(--pm-muted); }
.pm-ck-badge {
  background: var(--pm-oran-bg); border-radius: 6px;
  padding: 2px 7px; font-size: 10px; font-weight: 800; color: var(--pm-orange);
}

/* Return date row (hidden by default) */
#pm-return-wrap { display: none; }

/* ══════════════════════════════════════════════════
   MULTI-STOP (Commute forms)
══════════════════════════════════════════════════ */
.pm-stops-wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }

.pm-stop-card {
  background: var(--pm-surface);
  border: 1.5px solid var(--pm-border);
  border-radius: var(--pm-rsm);
}
.pm-stop-card:focus-within { border-color: var(--pm-border-m); }

.pm-stop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px 6px;
  border-bottom: 1px solid var(--pm-border);
}
.pm-stop-num {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .8px; color: var(--pm-muted);
}
.pm-stop-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--pm-orange); color: #000;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pm-stop-rm {
  background: none; border: none; cursor: pointer;
  color: var(--pm-dim); font-size: 20px; line-height: 1;
  padding: 0 2px; border-radius: 4px;
  transition: color var(--pm-tr);
}
.pm-stop-rm:hover { color: var(--pm-red); }

.pm-stop-addr-row {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; min-height: 48px; position: relative;
}
.pm-stop-addr-row input {
  flex: 1; background: transparent;
  border: none; outline: none;
  color: var(--pm-text); font-family: inherit;
  font-size: 14px; font-weight: 500;
  min-width: 0; caret-color: var(--pm-orange);
}
.pm-stop-addr-row input::placeholder { color: var(--pm-dim); font-weight: 400; }

.pm-stop-pax-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid var(--pm-border);
  font-size: 12px; color: var(--pm-muted);
}
.pm-stop-pax-ctrl { display: flex; align-items: center; gap: 10px; }
.pm-stop-pax-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--pm-border-m);
  background: none; color: var(--pm-text); font-size: 15px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: background var(--pm-tr);
}
.pm-stop-pax-btn:active   { background: var(--pm-s2); }
.pm-stop-pax-btn:disabled { opacity: .25; cursor: not-allowed; }
.pm-stop-pax-v { font-size: 14px; font-weight: 800; min-width: 16px; text-align: center; }

/* Add stop button */
.pm-add-stop {
  width: 100%; padding: 12px;
  border: 1.5px dashed var(--pm-border-m);
  border-radius: var(--pm-rsm);
  background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--pm-muted);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--pm-tr); margin-bottom: 12px;
}
.pm-add-stop:hover:not(:disabled)  { border-color: var(--pm-orange); color: var(--pm-orange); background: var(--pm-oran-bg); }
.pm-add-stop:disabled              { opacity: .4; cursor: not-allowed; }

/* Stop count + total pax summary */
.pm-stop-meta {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--pm-s2); border-radius: var(--pm-rsm);
  padding: 9px 14px; margin-bottom: 12px;
  font-size: 12px; color: var(--pm-muted); font-weight: 600;
}
.pm-stop-meta strong { color: var(--pm-orange); font-size: 15px; }

/* Final destination (black card) */
.pm-dest-card {
  background: var(--pm-black);
  border-radius: var(--pm-rsm);
  overflow: hidden; margin-bottom: 12px;
}
.pm-dest-label {
  padding: 8px 14px 0;
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255,255,255,.45);
}
.pm-dest-row {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 14px 12px; position: relative;
}
.pm-dest-row input {
  flex: 1; background: transparent;
  border: none; outline: none;
  color: #fff; font-family: inherit;
  font-size: 14px; font-weight: 600;
  min-width: 0; caret-color: var(--pm-orange);
}
.pm-dest-row input::placeholder { color: rgba(255,255,255,.3); font-weight: 400; }
.pm-dest-ico { font-size: 16px; flex-shrink: 0; }

/* Schedule grid */
.pm-sched-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 12px; }
.pm-sched-opt {
  border: 1.5px solid var(--pm-border);
  border-radius: 10px;
  padding: 10px 6px; text-align: center;
  cursor: pointer; transition: all var(--pm-tr);
}
.pm-sched-opt:hover  { border-color: var(--pm-orange); }
.pm-sched-opt.active { border-color: var(--pm-black); background: var(--pm-black); color: #fff; }
.pm-sched-opt.active .pm-sched-sub { color: rgba(255,255,255,.55); }
.pm-sched-icon { font-size: 18px; margin-bottom: 4px; }
.pm-sched-lbl  { font-size: 11px; font-weight: 800; }
.pm-sched-sub  { font-size: 10px; color: var(--pm-muted); margin-top: 2px; }

/* ══════════════════════════════════════════════════
   VEHICLES SCREEN
══════════════════════════════════════════════════ */
.pm-route-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--pm-s2); border: 1.5px solid var(--pm-border);
  border-radius: var(--pm-rsm); padding: 10px 14px; margin-bottom: 14px;
}
.pm-r-dot   { width: 8px; height: 8px; border-radius: 50%; background: var(--pm-orange); flex-shrink: 0; }
.pm-r-text  { flex: 1; font-size: 12px; color: var(--pm-muted); }
.pm-r-text strong { color: var(--pm-text); font-weight: 700; }
.pm-r-badge {
  background: var(--pm-white); border: 1px solid var(--pm-border);
  border-radius: 8px; padding: 3px 9px;
  font-size: 11px; font-weight: 700; color: var(--pm-muted); white-space: nowrap;
}

.pm-v-card {
  background: var(--pm-surface); border: 1.5px solid var(--pm-border);
  border-radius: var(--pm-radius); padding: 16px;
  margin-bottom: 10px; cursor: pointer; transition: all var(--pm-tr);
}
.pm-v-card:active { transform: scale(.98); }
.pm-v-card.sel    { border-color: var(--pm-orange); background: var(--pm-oran-bg); }

.pm-v-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.pm-v-emo {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--pm-s2); display: flex; align-items: center;
  justify-content: center; font-size: 24px; flex-shrink: 0;
}
.pm-v-info { flex: 1; min-width: 0; }
.pm-v-name { font-size: 15px; font-weight: 800; margin-bottom: 3px; }
.pm-v-desc { font-size: 12px; color: var(--pm-muted); margin-bottom: 6px; }
.pm-v-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.pm-v-tag  { background: var(--pm-s2); border-radius: 6px; padding: 3px 7px; font-size: 10px; font-weight: 700; color: var(--pm-muted); }
.pm-v-price { text-align: right; flex-shrink: 0; }
.pm-v-amt   { font-size: 20px; font-weight: 800; letter-spacing: -.4px; display: block; }
.pm-v-sub   { font-size: 11px; color: var(--pm-dim); display: block; margin-top: 1px; }
.pm-v-foot  { display: flex; gap: 14px; padding-top: 11px; border-top: 1px solid var(--pm-border); }
.pm-v-meta  { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--pm-muted); }
.pm-v-avail { margin-left: auto; color: var(--pm-green); font-weight: 700; font-size: 12px; }

.pm-empty { text-align: center; padding: 36px 20px; }
.pm-empty .ei { font-size: 40px; margin-bottom: 12px; }
.pm-empty h3  { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.pm-empty p   { font-size: 13px; color: var(--pm-muted); }

/* ══════════════════════════════════════════════════
   PRICE REVIEW SCREEN
══════════════════════════════════════════════════ */
.pm-sel-bar {
  display: flex; align-items: center; gap: 12px;
  background: var(--pm-s2); border: 1.5px solid var(--pm-border);
  border-radius: var(--pm-rsm); padding: 12px 14px; margin-bottom: 14px;
}
.pm-sel-emo { font-size: 24px; flex-shrink: 0; }
.pm-sel-nm  { font-size: 14px; font-weight: 700; }
.pm-sel-sb  { font-size: 12px; color: var(--pm-muted); margin-top: 2px; }

.pm-pb-card {
  background: var(--pm-surface); border: 1.5px solid var(--pm-border);
  border-radius: var(--pm-radius); padding: 16px; margin-bottom: 12px;
}
.pm-pb-hd {
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--pm-dim); margin-bottom: 14px;
}
.pm-pb-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; font-size: 13px;
}
.pm-pb-row .plbl { color: var(--pm-muted); }
.pm-pb-row .pval { font-weight: 600; }
.pm-pb-row .psur { color: var(--pm-orange); font-size: 12px; font-weight: 600; }
.pm-pb-div  { border: none; border-top: 1px solid var(--pm-border); margin: 10px 0; }
.pm-pb-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0 0;
}
.pm-pb-total .ptl { font-size: 15px; font-weight: 700; }
.pm-pb-total .ptv { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--pm-orange); }

.pm-det-card {
  background: var(--pm-surface); border: 1.5px solid var(--pm-border);
  border-radius: var(--pm-radius); overflow: hidden; margin-bottom: 12px;
}
.pm-det-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.pm-det-row + .pm-det-row { border-top: 1px solid var(--pm-border); }
.pm-det-ico {
  width: 34px; height: 34px; background: var(--pm-s2);
  border-radius: 9px; display: flex; align-items: center;
  justify-content: center; font-size: 14px; flex-shrink: 0;
}
.pm-det-k { font-size: 10px; color: var(--pm-dim); font-weight: 600; letter-spacing: .3px; margin-bottom: 2px; }
.pm-det-v { font-size: 13px; font-weight: 700; line-height: 1.3; }

/* ══════════════════════════════════════════════════
   CUSTOMER DETAILS SCREEN
══════════════════════════════════════════════════ */
.pm-inp {
  width: 100%; background: var(--pm-surface);
  border: 1.5px solid var(--pm-border); border-radius: var(--pm-rsm);
  padding: 14px; color: var(--pm-text); font-family: inherit;
  font-size: 14px; font-weight: 500; outline: none;
  transition: border-color var(--pm-tr); margin-bottom: 10px;
}
.pm-inp::placeholder { color: var(--pm-dim); }
.pm-inp:focus { border-color: var(--pm-border-m); }
.pm-inp.err   { border-color: var(--pm-red); }
.pm-inp-area  { min-height: 80px; resize: none; }

/* Payment — 3 equal cards */
.pm-pay-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 10px; }
.pm-pay-opt {
  border: 1.5px solid var(--pm-border); border-radius: var(--pm-rsm);
  padding: 11px 6px; text-align: center; cursor: pointer; transition: all var(--pm-tr);
}
.pm-pay-opt:hover  { border-color: var(--pm-orange); }
.pm-pay-opt.active { border-color: #000; background: #000; }
.pm-pay-opt.active .pm-pay-lbl { color: #fff; }
.pm-pay-ico { font-size: 21px; margin-bottom: 3px; }
.pm-pay-lbl { font-size: 10px; font-weight: 800; color: var(--pm-text); }

/* Mobile money sub-options */
.pm-mm-sec {
  background: #f0fdf4; border: 1.5px solid #c6e6c9;
  border-radius: var(--pm-rsm); padding: 12px; margin-bottom: 10px; display: none;
}
.pm-mm-sec.show { display: block; }
.pm-mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.pm-mm-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 9px; border: 1.5px solid var(--pm-border);
  border-radius: 9px; cursor: pointer;
  background: var(--pm-white); transition: border-color var(--pm-tr);
}
.pm-mm-opt input { accent-color: var(--pm-orange); }
.pm-mm-opt.sel   { border-color: var(--pm-orange); background: var(--pm-oran-bg); }
.pm-mm-opt span  { font-size: 12px; font-weight: 700; }
.pm-mm-phone {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid var(--pm-border); border-radius: 9px;
  font-size: 14px; outline: none; font-family: inherit;
}
.pm-mm-phone:focus { border-color: var(--pm-orange); }

.pm-total-preview {
  background: var(--pm-s2); border: 1.5px solid var(--pm-border-m);
  border-radius: var(--pm-rsm); padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px;
}
.pm-total-preview .tp-l { font-size: 13px; color: var(--pm-muted); }
.pm-total-preview .tp-v { font-size: 20px; font-weight: 800; color: var(--pm-orange); }

/* ══════════════════════════════════════════════════
   SUCCESS SCREEN
══════════════════════════════════════════════════ */
.pm-success-scr {
  flex: none;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: 24px 18px 24px;
  text-align: center;
  height: auto;
  overflow: visible;
}
.pm-ok-ring {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(34,197,94,.1); border: 2px solid rgba(34,197,94,.3);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  animation: pm-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes pm-pop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
.pm-ok-ring svg { animation: pm-draw .5s .3s ease both; }
@keyframes pm-draw { from{stroke-dashoffset:60} to{stroke-dashoffset:0} }
.pm-success-scr h2 { font-size: 24px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 7px; }
.pm-success-sub    { font-size: 13px; color: var(--pm-muted); max-width: 270px; margin: 0 auto 18px; }
.pm-ref-box {
  background: var(--pm-s2); border: 1.5px solid var(--pm-border);
  border-radius: var(--pm-rsm); padding: 12px 18px;
  text-align: center; width: 100%; margin-bottom: 14px;
}
.pm-ref-lbl { font-size: 10px; color: var(--pm-dim); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.pm-ref-num { font-size: 21px; font-weight: 800; letter-spacing: 2px; color: var(--pm-orange); }

/* ══════════════════════════════════════════════════
   LOADER + TOAST
══════════════════════════════════════════════════ */
.pm-loader {
  position: absolute; inset: 0; z-index: 200;
  background: rgba(255,255,255,.88);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.pm-loader.on { opacity: 1; pointer-events: all; }
.pm-loader-spin {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid var(--pm-s3); border-top-color: var(--pm-orange);
  animation: pm-spin .75s linear infinite;
}
.pm-loader p { margin-top: 14px; font-size: 13px; color: var(--pm-muted); font-weight: 600; }

.pm-toast {
  position: absolute; bottom: 90px; left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--pm-black); color: var(--pm-white);
  padding: 10px 18px; border-radius: 24px;
  font-size: 13px; font-weight: 600;
  z-index: 300;
  opacity: 0; transition: all .28s ease;
  white-space: nowrap; max-width: 92%; text-align: center;
}
.pm-toast.ok  { background: rgba(34,197,94,.95); }
.pm-toast.err { background: rgba(239,68,68,.95); }
.pm-toast.up  { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══════════════════════════════════════════════════
   TRACKING PAGE (standalone)
══════════════════════════════════════════════════ */
.pm-track-page { max-width: 680px; margin: 0 auto; padding: 20px; font-family: inherit; }
.pm-track-map  { width: 100%; height: 320px; border-radius: var(--pm-radius); margin-bottom: 16px; }

/* ══════════════════════════════════════════════════
   LAYOUT VARIANTS  (driven by shortcode 'layout' attribute)
══════════════════════════════════════════════════ */

/* TALL — 800px height on desktop */
@media (min-width: 769px) {
  .pm-app.pm-tall { height: 800px; }
}

/* FULLMAP — fills the full viewport (use on a dedicated booking page) */
.pm-app.pm-fullmap {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  height: 100svh !important;
  z-index: 9990 !important;
  border-radius: 0 !important;
}
.pm-app.pm-fullmap #pm-map { border-radius: 0; }

/* Custom height via CSS variable (set by shortcode height="" attribute) */
@media (min-width: 769px) {
  .pm-app[style*="--pm-ph"] {
    height: var(--pm-ph);
  }
}

/* Single-service layout: no grid — just one tall featured card */
.pm-svc-grid .pm-svc:only-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════
   HEADER / FOOTER CONFLICT FIX
   When booking page class is set, suppress theme chrome
══════════════════════════════════════════════════ */

/* For standalone booking pages — hide theme header & footer */
body.pm-booking-page {
  overflow: hidden !important;
  height: 100vh !important;
}
body.pm-booking-page #wpadminbar            { display: none !important; }
body.pm-booking-page header,
body.pm-booking-page .site-header,
body.pm-booking-page #site-header,
body.pm-booking-page #masthead,
body.pm-booking-page .header-wrap,
body.pm-booking-page #header                { display: none !important; }
body.pm-booking-page footer,
body.pm-booking-page .site-footer,
body.pm-booking-page #site-footer,
body.pm-booking-page #colophon,
body.pm-booking-page .footer-wrap,
body.pm-booking-page #footer                { display: none !important; }
body.pm-booking-page #page,
body.pm-booking-page #content,
body.pm-booking-page .site-content,
body.pm-booking-page main,
body.pm-booking-page .entry-content,
body.pm-booking-page .page-content          { padding: 0 !important; margin: 0 !important; }

/* Ensure widget z-index always beats sticky headers */
.pm-app          { isolation: isolate; }
.pm-panel        { z-index: 10000 !important; }
.pm-fab          { z-index: 10001 !important; }
.pm-loader       { z-index: 10002 !important; }
.pm-toast        { z-index: 10003 !important; }
.pm-ac-list      { z-index: 10004 !important; }

/* Embedded widget (not fullmap) — just needs high internal z-index */
.pm-app:not(.pm-fullmap) { position: relative; z-index: 1; }

/* ── Map pin hint overlay ── */
.pm-pin-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.75);
  color: #fff;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
  z-index: 10010;
  pointer-events: none;
  white-space: nowrap;
  animation: pm-fadein .2s ease;
}
@keyframes pm-fadein { from{opacity:0;transform:translate(-50%,-60%)} to{opacity:1;transform:translate(-50%,-50%)} }

/* ── Map-pin button (small, next to inputs) ── */
.pm-map-pin-btn {
  background: none; border: none; cursor: pointer;
  font-size: 16px; padding: 2px 4px;
  opacity: .6; transition: opacity .2s; flex-shrink: 0;
}
.pm-map-pin-btn:hover { opacity: 1; }

/* ── Airport intermediate stop row ── */
.pm-air-stop-row {
  border-top: 1px solid var(--pm-border);
}

/* ── Return trip toggle button ── */
.pm-return-toggle {
  width: 100%; padding: 11px 14px;
  border: 1.5px dashed var(--pm-border-m);
  border-radius: var(--pm-rsm);
  background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--pm-muted);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--pm-tr); margin-bottom: 12px;
}
.pm-return-toggle:hover  { border-color: var(--pm-orange); color: var(--pm-orange); }
.pm-return-toggle.active { border-color: var(--pm-green); color: var(--pm-green); background: rgba(34,197,94,.06); }

/* ── Wait hours row ── */
.pm-wait-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px;
  background: var(--pm-surface); border: 1.5px solid var(--pm-border);
  border-radius: var(--pm-rsm); margin-bottom: 12px;
}
.pm-wait-lbl { font-size: 13px; font-weight: 600; }
.pm-wait-sub { font-size: 11px; color: var(--pm-muted); margin-top: 2px; }

/* ══════════════════════════════════════════════════════
   THEME: DARK
   Applied when shortcode has theme="dark"
   Class .pm-dark is added to .pm-app
══════════════════════════════════════════════════════ */
.pm-app.pm-dark {
  --pm-surface:  #111111;
  --pm-s2:       #1c1c1c;
  --pm-s3:       #272727;
  --pm-white:    #1c1c1c;       /* prevents white bg in dark mode */
  --pm-oran-bg:  rgba(255,165,0,.08);
  --pm-border:   rgba(255,255,255,.08);
  --pm-border-m: rgba(255,255,255,.16);
  --pm-text:     #ffffff;
  --pm-muted:    rgba(255,255,255,.55);
  --pm-dim:      rgba(255,255,255,.32);
  background: #080808;
}
.pm-app.pm-dark .pm-panel,
.pm-app.pm-dark .pm-bar   { background: #111; }
.pm-app.pm-dark .pm-nav   { background: #111; border-bottom-color: rgba(255,255,255,.07); }
.pm-app.pm-dark .pm-fgrp  { background: #111; border-color: rgba(255,255,255,.09); }
.pm-app.pm-dark .pm-frow  { color: #f0f0f0; }
.pm-app.pm-dark .pm-frow input,
.pm-app.pm-dark .pm-frow select { color: #f0f0f0; }
.pm-app.pm-dark .pm-frow input[type=date],
.pm-app.pm-dark .pm-frow input[type=time] { color-scheme: dark; }
.pm-app.pm-dark .pm-svc      { background: #1c1c1c; border-color: rgba(255,255,255,.09); }
.pm-app.pm-dark .pm-svc.featured { background: linear-gradient(140deg,#1c1c1c 55%,rgba(255,165,0,.07)); }
.pm-app.pm-dark .pm-chip     { background: #1c1c1c; border-color: rgba(255,255,255,.09); }
.pm-app.pm-dark .pm-v-card   { background: #1c1c1c; border-color: rgba(255,255,255,.09); }
.pm-app.pm-dark .pm-v-card.sel { background: rgba(255,165,0,.06); }
.pm-app.pm-dark .pm-v-emo    { background: #272727; }
.pm-app.pm-dark .pm-v-tag    { background: #272727; }
.pm-app.pm-dark .pm-pb-card  { background: #1c1c1c; border-color: rgba(255,255,255,.09); }
.pm-app.pm-dark .pm-det-card { background: #1c1c1c; border-color: rgba(255,255,255,.09); }
.pm-app.pm-dark .pm-det-ico  { background: #272727; }
.pm-app.pm-dark .pm-inp      { background: #1c1c1c; border-color: rgba(255,255,255,.1); color: #f0f0f0; }
.pm-app.pm-dark .pm-inp::placeholder { color: rgba(240,240,240,.3); }
.pm-app.pm-dark .pm-pay-opt  { border-color: rgba(255,255,255,.1); }
.pm-app.pm-dark .pm-pay-opt.active { background: var(--pm-orange); border-color: var(--pm-orange); }
.pm-app.pm-dark .pm-pay-opt.active .pm-pay-lbl { color: #000; }
.pm-app.pm-dark .pm-cnt-card { background: #1c1c1c; border-color: rgba(255,255,255,.09); }
.pm-app.pm-dark .pm-stop-card{ background: #1c1c1c; border-color: rgba(255,255,255,.09); }
.pm-app.pm-dark .pm-dest-card{ background: #000; }
.pm-app.pm-dark .pm-route-bar{ background: #1c1c1c; border-color: rgba(255,255,255,.09); }
.pm-app.pm-dark .pm-sel-bar  { background: #1c1c1c; border-color: rgba(255,255,255,.09); }
.pm-app.pm-dark .pm-ref-box  { background: #1c1c1c; border-color: rgba(255,255,255,.09); }
.pm-app.pm-dark .pm-back     { background: #272727; border-color: rgba(255,255,255,.12); color: #f0f0f0; }
.pm-app.pm-dark .pm-tog      { color: rgba(255,255,255,.55) !important; }
.pm-app.pm-dark .pm-tog.on   { background: #383838 !important; color: #ffffff !important;
                                box-shadow: 0 1px 4px rgba(0,0,0,.4) !important; }
.pm-app.pm-dark .pm-toggle   { background: #1c1c1c !important; border-color: rgba(255,255,255,.09) !important; }
.pm-app.pm-dark .pm-logo-name,
.pm-app.pm-dark .pm-hero h1  { color: #ffffff !important; }
.pm-app.pm-dark .pm-prog     { background: #1c1c1c; }
.pm-app.pm-dark .pm-loader   { background: rgba(17,17,17,.92); }
.pm-app.pm-dark .pm-wait-row { background: #1c1c1c; border-color: rgba(255,255,255,.09); }
.pm-app.pm-dark .pm-add-stop { border-color: rgba(255,255,255,.15); }
.pm-app.pm-dark .pm-stop-meta{ background: #1c1c1c; }
.pm-app.pm-dark .pm-sched-opt{ border-color: rgba(255,255,255,.1); }
.pm-app.pm-dark .pm-sched-opt.active { background: var(--pm-orange); border-color: var(--pm-orange); color: #000; }
.pm-app.pm-dark .pm-total-preview { background: #1c1c1c; border-color: rgba(255,255,255,.12); }
.pm-app.pm-dark .pm-ac-list  { background: #1c1c1c !important; border-color: rgba(255,255,255,.12) !important; }
.pm-app.pm-dark .pm-ac-item  { color: #ffffff !important; background: #1c1c1c !important; }
.pm-app.pm-dark .pm-ac-item:hover { background: #2a2a2a !important; color: #ffffff !important; }
.pm-app.pm-dark .pm-ac-main  { color: #ffffff !important; }
.pm-app.pm-dark .pm-ac-sub   { color: rgba(255,255,255,.55) !important; }
.pm-app.pm-dark .pm-dir-opt  { background: #1c1c1c; border-color: rgba(255,255,255,.1); }
.pm-app.pm-dark .pm-dir-opt.active { background: rgba(255,165,0,.1); }
.pm-app.pm-dark .pm-mm-sec   { background: rgba(34,197,94,.06); }
.pm-app.pm-dark .pm-mm-opt   { background: #1c1c1c; border-color: rgba(255,255,255,.1); }
.pm-app.pm-dark .pm-check-row{ background: #1c1c1c; border-color: rgba(255,255,255,.1); }
.pm-app.pm-dark .pm-return-toggle { border-color: rgba(255,255,255,.15); color: rgba(240,240,240,.5); }
.pm-app.pm-dark .pm-ok-ring  { background: rgba(34,197,94,.08); }

/* ══════════════════════════════════════════════════════
   MAP="no" — no-map layout
   Panel takes full width, no map div shown
══════════════════════════════════════════════════════ */
.pm-app.pm-nomap {
  height: auto !important;
  background: transparent;
}
/* Hide map AND fab via CSS — map div is always in DOM so Leaflet doesn't crash */
.pm-app.pm-nomap #pm-map { display: none !important; visibility: hidden !important; }
.pm-app.pm-nomap .pm-fab  { display: none !important; }

@media (min-width: 769px) {
  .pm-app.pm-nomap {
    border-radius: var(--pm-radius);
    box-shadow: var(--pm-sha);
    overflow: hidden;
  }
  .pm-app.pm-nomap .pm-panel {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 500px;
    border-radius: var(--pm-radius) !important;
    box-shadow: none !important;
  }
}
@media (max-width: 768px) {
  .pm-app.pm-nomap {
    position: relative !important;
    height: auto !important;
  }
  .pm-app.pm-nomap .pm-panel {
    position: relative !important;
    height: auto !important;
    max-height: none !important;
    border-radius: var(--pm-radius) !important;
  }
  .pm-app.pm-nomap .pm-panel-handle { display: none; }
}
/* No-map: screens are full-height auto */
.pm-app.pm-nomap .pm-screens { flex: none; }
.pm-app.pm-nomap .pm-screen  { min-height: 400px; }

/* ══════════════════════════════════════════════════════
   LAYOUT: MINIMAL
   Compact single-column, no map, tighter spacing
══════════════════════════════════════════════════════ */
.pm-app.pm-minimal { height: auto; background: transparent; }
.pm-app.pm-minimal #pm-map,
.pm-app.pm-minimal .pm-fab    { display: none !important; }
.pm-app.pm-minimal .pm-panel  {
  position: relative !important; width: 100% !important; height: auto !important;
  border-radius: var(--pm-radius); box-shadow: var(--pm-sha); overflow: hidden;
}
.pm-app.pm-minimal .pm-panel-handle { display: none; }
.pm-app.pm-minimal .pm-logo-bar { display: none; }
.pm-app.pm-minimal .pm-trust    { display: none; }
.pm-app.pm-minimal .pm-hero p   { display: none; }
.pm-app.pm-minimal .pm-hero h1  { font-size: 20px; margin-bottom: 0; }
.pm-app.pm-minimal .pm-body     { padding: 14px 14px 90px; }
.pm-app.pm-minimal .pm-svc      { padding: 14px; }
.pm-app.pm-minimal .pm-svc-ico  { width: 36px; height: 36px; font-size: 16px; margin-bottom: 8px; }
.pm-app.pm-minimal .pm-svc h3   { font-size: 14px; }
.pm-app.pm-minimal .pm-svc p    { display: none; }
.pm-app.pm-minimal .pm-screens  { flex: none; }
.pm-app.pm-minimal .pm-screen   { min-height: 380px; }

/* ══════════════════════════════════════════════════════
   LAYOUT: MODERN (default — same as standard with card shadow)
══════════════════════════════════════════════════════ */
.pm-app.pm-layout-modern {
  border-radius: var(--pm-radius);
  box-shadow: 0 8px 48px rgba(0,0,0,.18);
}

/* ══════════════════════════════════════════════════════
   LAYOUT: CLASSIC
   No border-radius, more traditional look, slightly different card style
══════════════════════════════════════════════════════ */
.pm-app.pm-layout-classic { border-radius: 4px; }
.pm-app.pm-layout-classic .pm-panel { border-radius: 4px 0 0 4px; }
.pm-app.pm-layout-classic .pm-svc  { border-radius: 4px; }
.pm-app.pm-layout-classic .pm-fgrp { border-radius: 4px; }
.pm-app.pm-layout-classic .pm-v-card{ border-radius: 4px; }
.pm-app.pm-layout-classic .pm-cta  { border-radius: 4px; }
.pm-app.pm-layout-classic .pm-inp  { border-radius: 4px; }
.pm-app.pm-layout-classic .pm-back { border-radius: 4px; }
@media (max-width: 768px) {
  .pm-app.pm-layout-classic .pm-panel { border-radius: 4px 4px 0 0; }
}

/* ═══════════════════════════════════════════════
   MAP PIN BUTTON — on location inputs
═══════════════════════════════════════════════ */
.pm-map-pin-btn {
  background: none;
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  padding: 4px 7px;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--pm-muted);
  transition: all .18s;
  line-height: 1;
}
.pm-map-pin-btn:hover {
  background: var(--pm-orbg);
  border-color: var(--pm-orange);
  color: var(--pm-orange);
}

/* ═══════════════════════════════════════════════
   MAP PIN PICKER OVERLAY
   Slides panel down, reveals full map for tapping
═══════════════════════════════════════════════ */
#pm-map-picker-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 50;
  pointer-events: none;  /* always none — clicks pass through to map */
  opacity: 0;
  transition: opacity .25s;
}
#pm-map-picker-overlay.active {
  pointer-events: none;  /* still none — bar below handles its own events */
  opacity: 1;
}
.pm-mpo-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  pointer-events: all;  /* bar is clickable even though overlay isn't */
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4px 20px rgba(0,0,0,.12);
  border-radius: 16px 16px 0 0;
}
.pm-mpo-hint {
  font-size: 14px;
  font-weight: 700;
  color: var(--pm-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pm-mpo-cancel {
  background: var(--pm-s2);
  border: 1.5px solid var(--pm-border);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: var(--pm-text);
  font-family: inherit;
  transition: all .18s;
}
.pm-mpo-cancel:hover { background: var(--pm-red); color: #fff; border-color: var(--pm-red); }

/* When picking, map cursor becomes crosshair */
#pm-map-picker-overlay.active ~ #pm-map,
#pm-map-picker-overlay.active + * #pm-map {
  cursor: crosshair !important;
}
.pm-app:has(#pm-map-picker-overlay.active) #pm-map {
  cursor: crosshair !important;
}

/* ═══════════════════════════════════════════════
   MAP VISIBILITY PER DEVICE
═══════════════════════════════════════════════ */
/* Hide map on desktop only */
@media (min-width: 769px) {
  .pm-app.pm-nomap-desktop #pm-map,
  .pm-app.pm-nomap-desktop .pm-fab {
    display: none !important;
  }
  .pm-app.pm-nomap-desktop .pm-panel {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 500px;
    border-radius: var(--pm-radius) !important;
  }
}

/* Hide map on mobile only */
@media (max-width: 768px) {
  .pm-app.pm-nomap-mobile #pm-map {
    display: none !important;
    height: 0 !important;
    flex: none !important;
  }
  .pm-app.pm-nomap-mobile .pm-panel {
    min-height: 450px;
  }
}

/* ── Dark mode additions ── */
.pm-app.pm-dark .pm-body           { background: #111; }
.pm-app.pm-dark .pm-screen         { background: #111; }
.pm-app.pm-dark .pm-logo-bar       { background: #111; }
.pm-app.pm-dark .pm-hero p         { color: rgba(240,240,240,.5); }
.pm-app.pm-dark .pm-svc p          { color: rgba(240,240,240,.5); }
.pm-app.pm-dark .pm-svc-arrow      { background: #272727; color: rgba(240,240,240,.4); }
.pm-app.pm-dark .pm-stop-addr-row  { background: #1c1c1c; }
.pm-app.pm-dark .pm-stop-head      { background: #1c1c1c; border-color: rgba(255,255,255,.09); }
.pm-app.pm-dark .pm-stop-pax-row   { background: #1c1c1c; color: rgba(240,240,240,.55); border-color: rgba(255,255,255,.07); }
.pm-app.pm-dark .pm-stop-pax-btn   { border-color: rgba(255,255,255,.15); color: #f0f0f0; }
.pm-app.pm-dark .pm-dest-card      { background: #000; }
.pm-app.pm-dark .pm-dest-row input { color: #fff; }
.pm-app.pm-dark .pm-cnt-btn        { border-color: rgba(255,255,255,.15); color: #f0f0f0; }
.pm-app.pm-dark .pm-lbl            { color: rgba(240,240,240,.38); }
.pm-app.pm-dark .pm-stop-meta      { background: #1c1c1c; color: rgba(240,240,240,.55); }
.pm-app.pm-dark .pm-dir-opt        { background: #1c1c1c; border-color: rgba(255,255,255,.1); color: #f0f0f0; }
.pm-app.pm-dark .pm-dir-opt.active { background: rgba(255,165,0,.12); border-color: var(--pm-orange); }
.pm-app.pm-dark .pm-check-row      { background: #1c1c1c; border-color: rgba(255,255,255,.09); }
.pm-app.pm-dark .pm-return-toggle  { border-color: rgba(255,255,255,.15); color: rgba(240,240,240,.6); }
.pm-app.pm-dark .pm-mm-opt         { background: #1c1c1c; border-color: rgba(255,255,255,.1); color: #f0f0f0; }
.pm-app.pm-dark .pm-mm-sec         { background: #0d1f11; border-color: rgba(34,197,94,.3); }
.pm-app.pm-dark .pm-map-pin-btn    { border-color: rgba(255,255,255,.12); color: rgba(240,240,240,.6); }
.pm-app.pm-dark .pm-map-pin-btn:hover { background: rgba(255,165,0,.15); border-color: var(--pm-orange); }
.pm-app.pm-dark .pm-mpo-bar        { background: rgba(17,17,17,.97); }
.pm-app.pm-dark .pm-mpo-hint       { color: #f0f0f0; }
.pm-app.pm-dark .pm-mpo-cancel     { background: #272727; border-color: rgba(255,255,255,.15); color: #f0f0f0; }
.pm-app.pm-dark .pm-trust          { background: transparent; }
.pm-app.pm-dark .pm-chip           { background: #1c1c1c; border-color: rgba(255,255,255,.09); color: rgba(240,240,240,.55); }
.pm-app.pm-dark .pm-total-preview  { background: #1c1c1c; border-color: rgba(255,255,255,.09); }
.pm-app.pm-dark .pm-v-foot         { border-color: rgba(255,255,255,.07); }
.pm-app.pm-dark .pm-pb-row .plbl   { color: rgba(240,240,240,.5); }
.pm-app.pm-dark .pm-r-badge        { background: #1c1c1c; border-color: rgba(255,255,255,.09); color: rgba(240,240,240,.5); }
.pm-app.pm-dark .pm-empty h3       { color: #f0f0f0; }
.pm-app.pm-dark .pm-empty p        { color: rgba(240,240,240,.5); }
.pm-app.pm-dark .pm-add-stop       { border-color: rgba(255,255,255,.15); color: rgba(240,240,240,.5); }
.pm-app.pm-dark .pm-sched-grid     { background: transparent; }

/* ── Card headers always white in dark mode ── */
.pm-app.pm-dark .pm-svc h3 { color: #ffffff !important; }
.pm-app.pm-dark .pm-logo-name { color: #ffffff !important; }
.pm-app.pm-dark .pm-nav-title { color: #ffffff !important; }

/* ═══════════════════════════════════════════════
   FULLSCREEN MAP PICKER OVERLAY (pin-picking)
   position:fixed — works on ALL layouts, ALL modes
═══════════════════════════════════════════════ */
#pm-fullmap-picker {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  flex-direction: column;
}
#pm-fullmap-picker.open {
  display: flex;
}
#pm-fmp-header {
  flex-shrink: 0;
  height: 56px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  z-index: 2;
}
#pm-fmp-header span {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}
#pm-fmp-close {
  background: #f4f4f4;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: #1a1a1a;
}
#pm-fmp-map {
  flex: 1;
  width: 100%;
}
#pm-fmp-hint {
  flex-shrink: 0;
  background: #FFA500;
  color: #000;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  letter-spacing: .3px;
}

/* CTA button — always orange regardless of dark mode or one-way/round-trip */
.pm-app .pm-cta {
  background: var(--pm-orange) !important;
  color: #000 !important;
}
.pm-app .pm-cta:disabled {
  opacity: .35 !important;
}