/* ============================================================
   DriveEase — Booking System CSS
   Booking form, checkout, my-bookings, detail views
   ============================================================ */

/* ── Booking Page Layout ─────────────────────────────────────── */
.booking-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--sp-8);
  align-items: start;
}
.booking-form-col {}
.booking-summary-col {}

/* ── Booking Card ────────────────────────────────────────────── */
.booking-card__title {
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-text);
}
.booking-card__title svg { width: 16px; height: 16px; color: var(--c-gold); }

/* ── Availability Banner ─────────────────────────────────────── */
.availability-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  margin-top: var(--sp-4);
  font-size: .9rem;
  font-weight: 500;
  border: 1px solid;
  animation: fadeIn .3s ease;
}
.availability-banner--success {
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.3);
  color: var(--c-success);
}
.availability-banner--error {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.3);
  color: var(--c-error);
}
.availability-banner--loading {
  background: var(--c-surface2);
  border-color: var(--c-border);
  color: var(--c-muted);
}
.availability-banner__icon {
  font-size: 1.1rem;
  font-weight: 700;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Live Price Summary ──────────────────────────────────────── */
.price-summary {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-4);
  animation: fadeIn .3s ease;
}
.price-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) 0;
  font-size: .9rem;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-border);
}
.price-summary__row:last-child { border-bottom: none; }
.price-summary__row--total {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--c-text);
  padding-top: var(--sp-3);
}
.price-summary__row--total span:last-child { color: var(--c-gold); }

/* ── Car specs in booking sidebar ────────────────────────────── */
.booking-car-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.booking-car-spec {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: .85rem;
  color: var(--c-muted);
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
}
.booking-car-spec svg { width: 14px; height: 14px; color: var(--c-gold); flex-shrink: 0; }

/* ── Rate display in sidebar ─────────────────────────────────── */
.booking-rate-display {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
}
.booking-rate-display__amount {
  font-family: var(--f-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--c-gold);
}
.booking-rate-display__period { font-size: .88rem; color: var(--c-muted); }

/* ── Terms checkbox layout ───────────────────────────────────── */
.booking-terms {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: .88rem;
  color: var(--c-muted);
  line-height: 1.5;
}

/* ── Checkout Layout ─────────────────────────────────────────── */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sp-8);
  align-items: start;
}

/* ── Checkout dates ──────────────────────────────────────────── */
.checkout-dates {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.checkout-date__label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-muted);
  margin-bottom: var(--sp-1);
}
.checkout-date__value {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
}
.checkout-date__arrow { color: var(--c-gold); }
.checkout-date__arrow svg { width: 20px; height: 20px; }

/* ── Checkout price table ────────────────────────────────────── */
.checkout-price-table { display: flex; flex-direction: column; }
.checkout-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) 0;
  font-size: .9rem;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-border);
}
.checkout-price-row:last-child { border-bottom: none; }
.checkout-price-row--total {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--c-text);
  padding-top: var(--sp-4);
}
.checkout-price-row--total span:last-child { color: var(--c-gold); }

/* ── My Bookings: Status tabs ────────────────────────────────── */
.status-tabs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: var(--sp-4);
}
.status-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-muted);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  transition: all var(--t-fast);
  text-decoration: none;
}
.status-tab:hover { color: var(--c-text); border-color: var(--c-gold-dim); }
.status-tab--active {
  background: var(--c-gold-glow);
  border-color: var(--c-gold);
  color: var(--c-gold);
}
.status-tab__count {
  background: var(--c-surface2);
  border-radius: var(--r-full);
  padding: .1rem .45rem;
  font-size: .72rem;
  font-weight: 700;
}

/* ── My Bookings: List cards ─────────────────────────────────── */
.booking-list-card {
  display: flex;
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.booking-list-card:hover {
  border-color: var(--c-gold-dim);
  box-shadow: var(--shadow-md);
}
.booking-list-card__img {
  width: 180px;
  flex-shrink: 0;
  background: var(--c-surface2);
  overflow: hidden;
}
.booking-list-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.booking-list-card:hover .booking-list-card__img img { transform: scale(1.05); }
.booking-list-card__body {
  flex: 1;
  padding: var(--sp-5);
  min-width: 0;
}
.booking-list-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.booking-list-card__title {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--sp-1);
}
.booking-list-card__meta {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.booking-list-meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: .85rem;
  color: var(--c-muted);
}
.booking-list-meta-item svg { width: 14px; height: 14px; color: var(--c-gold); }
.booking-list-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* ── Booking Status Banner ───────────────────────────────────── */
.booking-status-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-5);
  border: 1px solid;
}
.booking-status-banner--pending   { background: rgba(107,114,128,.08); border-color: var(--c-border); }
.booking-status-banner--paid      { background: rgba(59,130,246,.08);  border-color: rgba(59,130,246,.3); }
.booking-status-banner--active    { background: var(--c-gold-glow);    border-color: var(--c-gold-dim); }
.booking-status-banner--completed { background: rgba(34,197,94,.08);   border-color: rgba(34,197,94,.3); }
.booking-status-banner--cancelled { background: rgba(239,68,68,.08);   border-color: rgba(239,68,68,.3); }

.booking-status-banner__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--c-surface2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.booking-status-banner--active    .booking-status-banner__icon { background: var(--c-gold-glow); color: var(--c-gold); }
.booking-status-banner--completed .booking-status-banner__icon { background: rgba(34,197,94,.15); color: var(--c-success); }
.booking-status-banner--cancelled .booking-status-banner__icon { background: rgba(239,68,68,.15); color: var(--c-error); }
.booking-status-banner--paid      .booking-status-banner__icon { background: rgba(59,130,246,.15); color: var(--c-info); }
.booking-status-banner__icon svg  { width: 22px; height: 22px; }

.booking-status-banner__label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-muted);
  margin-bottom: 2px;
}
.booking-status-banner__value {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: capitalize;
}

/* ── Booking Detail Grid ─────────────────────────────────────── */
.booking-detail-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--sp-6);
  align-items: start;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .booking-layout    { grid-template-columns: 1fr; }
  .checkout-layout   { grid-template-columns: 1fr; }
  .booking-detail-grid { grid-template-columns: 1fr; }
  .booking-summary-col { order: -1; }
}
@media (max-width: 640px) {
  .booking-list-card { flex-direction: column; }
  .booking-list-card__img { width: 100%; height: 180px; }
  .checkout-dates { flex-direction: column; gap: var(--sp-3); }
  .checkout-date__arrow { transform: rotate(90deg); }
  .status-tabs { gap: var(--sp-1); }
  .status-tab { font-size: .78rem; padding: var(--sp-2) var(--sp-3); }
}