/* ═══════════════════════════════════════════════════════════════════
   Fusion Polish — visual overlay applied to /booking, customer-php,
   and admin/quotations. Re-skins existing form chrome to match the V3
   Fusion homepage widget. Does NOT change form structure, IDs, names,
   or JS handlers — purely CSS overrides.
   Created: 2026-05-24
   ═══════════════════════════════════════════════════════════════════ */

/* ── /booking page (booking.php) — .bk-* ── */
.bk-tabs {
  background: linear-gradient(135deg,#0a1f44 0%,#142a5c 100%) !important;
  padding: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  gap: 0 !important;
}
.bk-tab {
  background: transparent !important;
  color: rgba(255,255,255,.65) !important;
  border-radius: 0 !important;
  padding: 14px 18px !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  letter-spacing: -.1px;
  position: relative;
  transition: all .2s cubic-bezier(.4,0,.2,1) !important;
}
.bk-tab i { color: rgba(255,255,255,.55); transition: color .2s; }
.bk-tab:hover {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
  box-shadow: 0 4px 14px rgba(10,31,68,.4) !important;
}
.bk-tab:hover i { color: #fbbf24 !important; }
.bk-tab.active:hover {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
  border-radius: 12px 12px 0 0 !important;
}
.bk-tab.active:hover i { color: #fbbf24 !important; }
/* Selected stays navy+amber — customer always sees which trip type is picked. */
.bk-tab.active {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
  border-radius: 12px 12px 0 0 !important;
  box-shadow: 0 4px 14px rgba(10,31,68,.4) !important;
}
.bk-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 18%;
  right: 18%;
  height: 3px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 3px 3px 0 0;
}
.bk-tab.active i { color: #fbbf24 !important; }
.offers-tab-link {
  background: linear-gradient(135deg,#fbbf24,#f59e0b) !important;
  border-radius: 12px 12px 0 0 !important;
  box-shadow: 0 -2px 6px rgba(245,158,11,.3) !important;
  padding: 14px 18px !important;
}

.bk-card {
  border-radius: 0 0 18px 18px !important;
  border: 1px solid #eef2f7 !important;
  box-shadow: 0 4px 8px rgba(10,31,68,.08), 0 24px 60px -12px rgba(10,31,68,.15) !important;
}

/* Package + trip pills — segmented control style */
.pkg-row {
  background: #f1f5f9;
  padding: 4px;
  border-radius: 10px;
  display: inline-flex !important;
  gap: 2px !important;
  margin-bottom: 1rem !important;
}
.pkg-pill label, .trip-toggle label {
  border: none !important;
  background: transparent !important;
  border-radius: 7px !important;
  padding: 8px 14px !important;
  color: #64748b !important;
  font-weight: 600 !important;
  letter-spacing: -.1px;
  transition: all .15s !important;
}
.pkg-pill label:hover, .trip-toggle label:hover {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
  box-shadow: 0 3px 10px rgba(10,31,68,.25) !important;
}
/* Selected pill stays navy+amber — same persistence rule as the cw-spp pills
   in the booking widget so the customer always sees their package/trip pick. */
.pkg-pill input:checked + label, .trip-toggle input:checked + label {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
  box-shadow: 0 3px 10px rgba(10,31,68,.25) !important;
  border: none !important;
}

/* Form inputs — amber focus glow (already similar, just refined) */
.fg input, .fg select, .fg textarea {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  transition: all .15s !important;
  font-weight: 600 !important;
}
.fg input:hover, .fg select:hover { border-color: #cbd5e1 !important; }
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: #f59e0b !important;
  background: #fffaf0 !important;
  box-shadow: 0 0 0 4px rgba(245,158,11,.15) !important;
}
.fg label {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .7px !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
}

/* Location dots — branded colors */
.loc-dot.pickup { background: #16a34a !important; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.loc-dot.drop   { background: #0a1f44 !important; box-shadow: 0 0 0 3px rgba(10,31,68,.15); }
.loc-dot.stop   { background: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245,158,11,.15); }

/* Add-stop button — amber dashed */
.add-stop-btn {
  background: #fffaf0 !important;
  border: 1.5px dashed #fbbf24 !important;
  color: #d97706 !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-size: 11.5px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px !important;
  transition: all .15s !important;
}
.add-stop-btn:hover {
  background: #fff7ed !important;
  border-style: solid !important;
  border-color: #f59e0b !important;
}

/* Primary CTAs — gradient amber → navy on hover */
.bk-btn-pri, .btn-primary.bk-btn-pri, button[type="submit"].bk-btn-pri {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 800 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  border-radius: 10px !important;
  padding: 14px 28px !important;
  box-shadow: 0 6px 16px rgba(245,158,11,.35) !important;
  transition: all .2s !important;
  position: relative;
  overflow: hidden;
}
.bk-btn-pri:hover {
  background: linear-gradient(135deg, #0a1f44 0%, #142a5c 100%) !important;
  color: #fbbf24 !important;
  box-shadow: 0 10px 24px rgba(10,31,68,.3) !important;
  transform: translateY(-1px);
}

/* ── Customer portal — .cp-* form chrome (customer-php) ── */
.cp-tabs, .cp-form-tabs {
  background: linear-gradient(135deg,#0a1f44 0%,#142a5c 100%) !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 0 !important;
}
.cp-tab, .cp-form-tab {
  background: transparent !important;
  color: rgba(255,255,255,.65) !important;
  font-weight: 700 !important;
  padding: 14px 18px !important;
  border-radius: 0 !important;
}
.cp-tab:hover, .cp-form-tab:hover {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
}
/* Selected tab stays navy+amber across customer portal pages. */
.cp-tab.active, .cp-form-tab.active {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
  border-radius: 12px 12px 0 0 !important;
  box-shadow: 0 4px 14px rgba(10,31,68,.4) !important;
}
.cp-form input, .cp-form select, .cp-form textarea {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  transition: all .15s !important;
}
.cp-form input:focus, .cp-form select:focus, .cp-form textarea:focus {
  border-color: #f59e0b !important;
  background: #fffaf0 !important;
  box-shadow: 0 0 0 4px rgba(245,158,11,.15) !important;
  outline: none !important;
}

/* ── Admin quotations builder — .q-* form (admin/quotations/new.php) ── */
.q-form input, .q-form select, .q-form textarea,
input.q-input, select.q-input, textarea.q-input,
form#qForm input, form#qForm select, form#qForm textarea {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  transition: all .15s !important;
}
.q-form input:focus, .q-form select:focus, .q-form textarea:focus,
input.q-input:focus, select.q-input:focus, textarea.q-input:focus,
form#qForm input:focus, form#qForm select:focus, form#qForm textarea:focus {
  border-color: #f59e0b !important;
  background: #fffaf0 !important;
  box-shadow: 0 0 0 4px rgba(245,158,11,.15) !important;
  outline: none !important;
}
.q-btn-primary, button.q-btn-primary, input[type="submit"].q-btn-primary {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 800 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  box-shadow: 0 6px 16px rgba(245,158,11,.35) !important;
  transition: all .2s !important;
}
.q-btn-primary:hover {
  background: linear-gradient(135deg, #0a1f44 0%, #142a5c 100%) !important;
  color: #fbbf24 !important;
  box-shadow: 0 10px 24px rgba(10,31,68,.3) !important;
}

/* ── Admin tab persistence (selected stays navy+amber) ──────────────── */
/* Used on customer detail / bookings detail pages where tabs have inline
   `style=...` — we use !important to override the inline rules. */
.cd-tab:hover {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
  border-bottom-color: #0a1f44 !important;
}
.cd-tab.cd-tab-active,
.cd-tab.cd-tab-active:hover,
button.cd-tab[class*="active"] {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
  border-bottom-color: #fbbf24 !important;
  border-radius: 6px 6px 0 0 !important;
}

/* Admin sidebar nav-item — match the same pattern */
.nav-item:hover {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
}
.nav-item.active,
.nav-item.active:hover {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
  border-left: 3px solid #fbbf24;
}

/* Customer portal sidebar `.navlink` — same pattern */
.navlink:hover {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
}
.navlink.is-active,
.navlink.is-active:hover {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
  border-left: 3px solid #fbbf24;
}

/* Customer portal legacy auth tabs (`.auth-card .tab`) */
.auth-card .tab:hover {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
}
.auth-card .tab.is-active,
.auth-card .tab.is-active:hover {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
  box-shadow: 0 3px 10px rgba(10,31,68,.25) !important;
}

/* Customer portal premium tab (`.pc-tab`) */
.pc-tab:hover {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
}
.pc-tab.is-active,
.pc-tab.is-active:hover {
  background: #0a1f44 !important;
  color: #fbbf24 !important;
}
.pc-tab.is-active i,
.pc-tab.is-active:hover i { color: #fbbf24 !important; }

/* ── Generic polish helpers — work on any matching elements ── */
button.fusion-pri, .btn.fusion-pri {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  border: none;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 12px 24px;
  box-shadow: 0 6px 16px rgba(245,158,11,.35);
  transition: all .2s;
  cursor: pointer;
}
button.fusion-pri:hover, .btn.fusion-pri:hover {
  background: linear-gradient(135deg, #0a1f44 0%, #142a5c 100%);
  color: #fbbf24;
  box-shadow: 0 10px 24px rgba(10,31,68,.3);
}