/* ═══════════════════════════════════════════════════════════
   AirportShuttle KL — Custom Styles
   Tailwind CDN handles utilities; this file handles:
   • Flatpickr theme override
   • Stepper controls
   • Trip-type & airport card selection states
   • Animations & misc
════════════════════════════════════════════════════════════ */

/* ─── BASE ──────────────────────────────────────────────── */
html  { scroll-behavior: smooth; }
body  { font-family: 'Inter', ui-sans-serif, system-ui; background: #f5f5f7; }
[x-cloak] { display: none !important; }

/* ─── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; }
::-webkit-scrollbar-track  { background: #f1f1f1; }
::-webkit-scrollbar-thumb  { background: #FFB508; border-radius: 3px; }

/* ─── NAV ────────────────────────────────────────────────── */
.nav-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.09); }

/* ─── HERO ───────────────────────────────────────────────── */
.hero-bg {
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.52) 55%, rgba(84,89,95,.28) 100%),
    url('https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center 40%;
}

/* ─── CARDS – hover lift ─────────────────────────────────── */
.service-card { transition: transform .22s ease, box-shadow .22s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,.08); }

.fleet-card { transition: transform .22s ease, box-shadow .22s ease; }
.fleet-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(255,181,8,.18); }

/* ─── FORM INPUT FOCUS ───────────────────────────────────── */
.form-input { transition: border-color .2s ease, box-shadow .2s ease; }
.form-input:focus {
  outline: none;
  border-color: #FFB508;
  box-shadow: 0 0 0 3px rgba(255,181,8,.18);
}

/* ─── TRIP-TYPE CARDS ────────────────────────────────────── */
.trip-card {
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px 16px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  background: #f9fafb;
}
.trip-card:hover {
  border-color: #FFB508;
  background: rgba(255,181,8,.06);
}
.trip-card.selected {
  border-color: #FFB508;
  background: rgba(255,181,8,.10);
  box-shadow: 0 0 0 4px rgba(255,181,8,.12);
}
.trip-card .icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: #e5e7eb;
  transition: background .2s ease;
}
.trip-card.selected .icon-wrap { background: #FFB508; }
.trip-card.selected .icon-wrap svg { color: #1a1a1a; }

/* ─── AIRPORT CARDS ──────────────────────────────────────── */
.airport-card {
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  padding: 9px 10px;
  cursor: pointer;
  background: #f9fafb;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  text-align: left;
}
.airport-card:hover {
  border-color: #FFB508;
  background: rgba(255,181,8,.06);
}
.airport-card.selected {
  border-color: #FFB508;
  background: rgba(255,181,8,.10);
  box-shadow: 0 0 0 3px rgba(255,181,8,.12);
}
.airport-card .code-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: #FFB508;
  background: rgba(255,181,8,.15);
  padding: 1px 6px;
  border-radius: 5px;
  letter-spacing: .5px;
}

/* ─── STEPPER (quantity control) ─────────────────────────── */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  background: #f3f4f6;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  height: 44px;
  width: 130px;
}
.stepper-btn {
  width: 40px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  color: #54595F;
  transition: background .15s ease, color .15s ease;
  flex-shrink: 0;
}
.stepper-btn:hover { background: rgba(255,181,8,.18); color: #1a1a1a; }
.stepper-btn:disabled { opacity: .35; cursor: not-allowed; }
.stepper-val {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
  border-left: 1.5px solid #e5e7eb;
  border-right: 1.5px solid #e5e7eb;
}

/* ─── SECTION DIVIDER ────────────────────────────────────── */
.form-section-label {
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #f3f4f6;
}

/* ─── FLATPICKR THEME ────────────────────────────────────── */
.flatpickr-calendar {
  font-family: 'Inter', ui-sans-serif, system-ui !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
  overflow: hidden;
}
.flatpickr-months,
.flatpickr-month {
  background: #111827 !important;
  border-radius: 0 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months { background: #111827; }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: #1f2937; }
.flatpickr-current-month input.cur-year { color: #fff !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months { color: #fff; }
.flatpickr-months .flatpickr-month { color: #fff; }
.flatpickr-weekdays             { background: #111827 !important; }
.flatpickr-weekday              { color: #FFB508 !important; font-weight: 600; }
.flatpickr-prev-month svg,
.flatpickr-next-month svg       { fill: #fff !important; }
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: #FFB508 !important; }

.flatpickr-day                  { border-radius: 8px !important; font-family: 'Inter', sans-serif; }
.flatpickr-day:hover            { background: rgba(255,181,8,.18) !important; border-color: transparent !important; }
.flatpickr-day.today            { border-color: #FFB508 !important; color: #FFB508 !important; font-weight: 700; }
.flatpickr-day.today:hover      { background: rgba(255,181,8,.18) !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover   { background: #FFB508 !important; border-color: #FFB508 !important; color: #111827 !important; font-weight: 700; }
.flatpickr-day.inRange          { background: rgba(255,181,8,.12) !important; box-shadow: -5px 0 0 rgba(255,181,8,.12), 5px 0 0 rgba(255,181,8,.12) !important; }
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover   { color: #d1d5db !important; }

/* Time picker */
.flatpickr-time                 { border-top: 1px solid #f3f4f6 !important; }
.flatpickr-time input           { font-family: 'Inter', sans-serif !important; font-size: 22px !important; font-weight: 700 !important; }
.flatpickr-time input:focus     { background: rgba(255,181,8,.08) !important; }
.flatpickr-time .flatpickr-time-separator { color: #374151 !important; font-weight: 700; }

/* ─── WHATSAPP FAB PULSE ─────────────────────────────────── */
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  50%       { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
}
.fab-pulse { animation: pulse-green 2.5s infinite; }

/* ─── STAR RATING ────────────────────────────────────────── */
.stars { color: #FFB508; letter-spacing: 2px; }

/* ─── SUBMIT BUTTON LOADING SPIN ─────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; }

/* ─── SUCCESS CHECKMARK DRAW ─────────────────────────────── */
@keyframes draw-check {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
.check-draw { stroke-dasharray: 100; animation: draw-check .6s ease forwards .2s; }