/* ============================================================
   EasyCab V2.1 — forms.css
   Booking card · Fields · Tabs · Popovers · Quote strip · Route panel
   ============================================================ */

/* ===== Booking card shell ===== */
.book-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px;
  box-shadow: 0 30px 60px -40px rgba(20,20,16,.35),
              0 8px 18px -12px rgba(20,20,16,.18);
  position: relative;
}

/* ===== Tabs ===== */
.book-card .tabs {
  display: flex; gap: 6px;
  background: var(--paper-2); padding: 5px;
  border-radius: 999px; margin-bottom: 22px;
}
.book-card .tab {
  flex: 1; text-align: center; padding: 11px 14px;
  font-size: 14px; font-weight: 500; border-radius: 999px;
  color: var(--ink-2); transition: all .25s var(--ease); cursor: pointer;
}
.book-card .tab.on {
  background: var(--white); color: var(--ink);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.06);
}

/* ===== Fields ===== */
.field {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--paper);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field + .field { margin-top: 12px; }
.field:hover,
.field:focus-within { border-color: var(--ink); background: #fff; }

.field .pin {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--green); color: #fff;
  font-size: 12px; font-weight: 600;
  font-family: 'Geist Mono', monospace;
}
.field .pin.b { background: var(--orange); }
.field .meta { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.field .lbl {
  font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.field .val {
  font-size: 16.5px; color: var(--ink); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -.005em;
}
.field input.val {
  background: transparent; border: 0; outline: 0; width: 100%;
  font-family: inherit; padding: 0;
}
.field input.val::placeholder { color: var(--muted); font-weight: 400; }
.field .swap {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--paper-2); color: var(--ink);
  transition: background .2s, color .2s;
}
.field .swap:hover { background: var(--ink); color: var(--paper); }

/* ===== Book row (date + pax side by side) ===== */
.book-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-top: 12px; position: relative;
}
.book-row > .field { padding: 14px 18px; margin-top: 0; position: relative; }
#dropoffField { position: relative; }

/* ===== Quote strip ===== */
.quote-strip {
  margin-top: 16px; background: var(--ink); color: var(--paper);
  border-radius: 16px; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.quote-strip > .q-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quote-strip .lbl {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(245,242,236,.6);
}
.quote-strip .price {
  font-family: 'Instrument Serif', serif; font-size: 40px;
  line-height: 1; letter-spacing: -.02em; color: var(--paper);
}
.quote-strip .price small {
  font-size: 16px; opacity: .75; margin-left: 2px;
  font-family: 'Geist', sans-serif; font-weight: 500;
}
.quote-strip .btn-orange {
  height: 50px; padding: 0 22px; font-size: 14.5px; font-weight: 600;
  box-shadow: 0 14px 30px -14px rgba(232,90,31,.5);
}
.quote-strip.calc .price { opacity: .4; }
.quote-strip.calc .price::after {
  content: "\2022"; display: inline-block; margin-left: 6px; color: var(--orange);
  animation: dot-blink 1.2s infinite;
}
@keyframes dot-blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* ===== Footnote ===== */
.book-card .footnote {
  margin-top: 14px; font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.book-card .footnote span { display: inline-flex; align-items: center; gap: 6px; }
.book-card .footnote .tick {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: grid; place-items: center; font-size: 9px;
}

/* ===== Editable field (popover trigger) ===== */
.field.editable { cursor: pointer; }
.field.editable .val { user-select: none; }
.field.editable .chev {
  width: 10px; height: 10px; color: var(--muted);
  flex-shrink: 0; margin-left: auto; transition: transform .25s;
}
.field.editable.is-open .chev { transform: rotate(180deg); }

/* ===== Popover ===== */
.popover {
  position: absolute; z-index: 50; left: 0; right: 0;
  top: calc(100% + 6px);
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 44px -22px rgba(20,20,16,.32),
              0 4px 12px -6px rgba(20,20,16,.12);
  padding: 14px; opacity: 0; transform: translateY(-4px);
  pointer-events: none; transition: opacity .2s, transform .2s;
}
.popover.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pop-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 4px;
}
.pop-row + .pop-row { border-top: 1px solid var(--line); }
.pop-row .lbl-pop { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.pop-stepper { display: flex; align-items: center; gap: 6px; }
.pop-stepper button {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); cursor: pointer; display: grid; place-items: center;
  font-size: 14px; font-weight: 600; transition: all .2s var(--ease);
  font-family: inherit;
}
.pop-stepper button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pop-stepper .val-pop {
  min-width: 24px; text-align: center;
  font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--ink);
}
.pop-datetime {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--paper); outline: 0;
}
.pop-datetime:focus { border-color: var(--ink); background: #fff; }

/* ===== Add stop button ===== */
.add-stop-btn {
  position: relative; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-2);
  transition: all .25s var(--ease);
}
.add-stop-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.add-stop-btn:disabled {
  opacity: .45; cursor: not-allowed;
  background: var(--paper) !important; color: var(--ink-2) !important;
  border-color: var(--line) !important;
}
.add-stop-btn svg { width: 13px; height: 13px; stroke-width: 2.5; transition: transform .25s; }
.add-stop-btn:hover svg { transform: rotate(90deg); }

.stops-badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; vertical-align: 1px;
}
.stops-badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--orange);
}

/* ===== Stops popover ===== */
.stops-pop {
  position: absolute; z-index: 60; top: calc(100% + 10px); right: 0;
  width: min(360px, calc(100vw - 80px));
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 50px -22px rgba(20,20,16,.35), 0 6px 16px -8px rgba(20,20,16,.14);
  padding: 14px; opacity: 0; transform: translateY(-6px);
  pointer-events: none; transition: opacity .22s, transform .22s;
}
.stops-pop.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.stops-pop::before {
  content: ""; position: absolute; top: -7px; right: 14px;
  width: 12px; height: 12px; background: var(--white);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.stops-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.stops-pop-title {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.stops-pop-close {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper);
  color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center; transition: all .2s var(--ease);
}
.stops-pop-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stops-pop-close svg { width: 11px; height: 11px; }
.stops-pop-list { display: flex; flex-direction: column; gap: 8px; }
.stops-pop-list .stop-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); transition: border-color .2s, background .2s;
}
.stops-pop-list .stop-row:focus-within { border-color: var(--ink); background: #fff; }
.stops-pop-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 38px; margin-top: 10px;
  border-radius: 10px; border: 1px dashed var(--line);
  background: transparent; font-size: 12.5px; font-weight: 500;
  color: var(--ink-2); cursor: pointer; transition: all .2s var(--ease);
}
.stops-pop-add:hover { background: var(--ink); color: var(--paper); border-style: solid; border-color: var(--ink); }
.stops-pop-empty {
  padding: 18px 8px 4px; text-align: center;
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.stops-pop-list:not(:empty) ~ .stops-pop-empty { display: none; }
#stopsContainer:empty { display: none; }

/* ===== Route panel ===== */
.route-panel {
  position: absolute; top: 0;
  right: calc(100% + 18px);
  width: min(960px, 60vw); height: 100%;
  background: #0f1410; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  opacity: 0; transform: translateX(40px) scale(.96);
  transform-origin: right center; pointer-events: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  box-shadow: 0 30px 60px -40px rgba(20,20,16,.45), 0 8px 18px -12px rgba(20,20,16,.2);
  z-index: 5;
}
.route-panel.active { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
.route-panel-map { position: absolute; inset: 0; background: #0f1410; }
.rp-header {
  position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2;
  background: rgba(20,20,16,.82); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  padding: 12px 14px; display: flex; align-items: center; gap: 14px;
}
.rp-route-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rp-route-text .lbl {
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(245,242,236,.55);
}
.rp-route-text .endpts {
  color: var(--paper); font-size: 13px; line-height: 1.3; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-route-text .endpts .arrow { color: var(--orange); margin: 0 6px; font-size: 11px; }
.rp-traffic {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: var(--paper);
  border: 1px solid rgba(255,255,255,.10); cursor: pointer;
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase;
  transition: all .25s var(--ease);
}
.rp-traffic:hover { background: rgba(255,255,255,.13); }
.rp-traffic.on { background: var(--orange); border-color: var(--orange); }
.rp-traffic .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
}
.rp-traffic.on .dot { background: var(--paper); }
.rp-footer {
  position: absolute; bottom: 14px; left: 14px; right: 14px; z-index: 2;
  background: rgba(20,20,16,.85); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  padding: 14px 18px; display: flex; align-items: center; gap: 14px;
}
.rp-eta-block { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rp-eta-block .lbl {
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(245,242,236,.55);
}
.rp-eta-block .v {
  font-family: 'Instrument Serif', serif; font-size: 26px;
  line-height: 1; color: var(--paper); letter-spacing: -.015em;
}
.rp-eta-block .v small {
  font-size: 14px; opacity: .7; font-family: 'Geist', sans-serif;
  font-weight: 500; margin-left: 4px;
}
.rp-divider { width: 1px; height: 32px; background: rgba(255,255,255,.10); flex-shrink: 0; }

/* ===== Google Places autocomplete ===== */
.pac-container {
  font-family: 'Geist', -apple-system, sans-serif !important;
  border-radius: 14px; border: 1px solid var(--line);
  margin-top: 8px; background: var(--white);
  box-shadow: 0 20px 44px -22px rgba(20,20,16,.32), 0 4px 12px -6px rgba(20,20,16,.12);
  overflow: hidden; z-index: 9000;
}
.pac-container:after { display: none !important; }
.pac-item {
  padding: 11px 16px; font-size: 14px; color: var(--ink-2);
  border-top: 1px solid var(--line); cursor: pointer; line-height: 1.3;
}
.pac-item:first-child { border-top: 0; }
.pac-item:hover, .pac-item-selected { background: var(--paper-2); }
.pac-item-query { color: var(--ink); font-weight: 500; font-size: 14px; }
.pac-matched { color: var(--green); font-weight: 600; }
.pac-icon { margin-top: 3px; opacity: .55; }

/* ===== Responsive ===== */
@media (max-width: 1080px) {
  .route-panel {
    right: auto; left: 0; top: calc(100% + 14px);
    width: 100%; height: 340px;
    transform: translateY(-20px) scale(.97);
  }
  .route-panel.active { transform: translateY(0) scale(1); }
}
@media (max-width: 600px) {
  .book-row { grid-template-columns: 1fr; }
}