/* ============================================================
   HOLIDAYTIME — Booking / Cart / Checkout / Payment Styles
   Extends app.css — do not duplicate base tokens here
   ============================================================ */

/* ── Cart ───────────────────────────────────────────────────── */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: start;
  padding: 2.5rem 0;
}

.cart-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 1rem;
  transition: box-shadow var(--dur-normal);
}
.cart-item:hover { box-shadow: var(--shadow-md); }

.cart-item__inner {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem;
}

.cart-item__thumb {
  width: 96px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.cart-item__body { flex: 1; min-width: 0; }

.cart-item__type {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: .25rem;
}

.cart-item__title {
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-display);
  margin-bottom: .375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item__meta {
  display: flex;
  gap: 1rem;
  font-size: .8125rem;
  color: var(--gray-500);
  flex-wrap: wrap;
}

.cart-item__meta-chip {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.cart-item__price {
  flex-shrink: 0;
  text-align: right;
}

.cart-item__amount {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--blue-700);
  line-height: 1;
  margin-bottom: .25rem;
}

.cart-item__unit {
  font-size: .75rem;
  color: var(--gray-500);
  display: block;
  margin-bottom: .75rem;
}

.cart-remove-btn {
  font-size: .8125rem;
  color: var(--gray-400);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  transition: color var(--dur-fast);
}
.cart-remove-btn:hover { color: var(--orange-600); }

/* Coupon input row */
.coupon-row {
  display: flex;
  gap: .75rem;
}
.coupon-row .form-input { flex: 1; }

/* Coupon applied pill */
.coupon-applied {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Order summary sidebar */
.order-summary {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
}

.order-summary__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--gray-100);
}

.order-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .9375rem;
  padding: .375rem 0;
}

.order-summary__row.is-discount { color: var(--teal-600); }
.order-summary__row.is-balance  { color: var(--orange-600); }

.order-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 700;
  padding: .75rem 0 .875rem;
  border-top: 1px solid var(--gray-200);
  margin-top: .375rem;
}

.order-summary__total-amount { color: var(--blue-700); }

.deposit-note {
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-lg);
  padding: .875rem 1rem;
  font-size: .875rem;
  margin: .875rem 0;
}

.deposit-note__title {
  font-weight: 600;
  color: var(--blue-800);
  margin-bottom: .25rem;
}

.deposit-note__amount { color: var(--blue-700); }
.deposit-note__balance { color: var(--gray-500); font-size: .8125rem; }

.trust-row {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.trust-badge-img {
  height: 20px;
  opacity: .5;
  filter: grayscale(1);
}

/* ── Checkout ─────────────────────────────────────────────── */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2rem;
  align-items: start;
  padding: 2.5rem 0;
}

.checkout-section {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
}

.checkout-section__title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .625rem;
}

.step-num {
  width: 26px;
  height: 26px;
  background: var(--blue-600);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8125rem;
  font-weight: 700;
  flex-shrink: 0;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.field-error {
  font-size: .8125rem;
  color: #dc2626;
  margin-top: .25rem;
  display: flex;
  align-items: center;
  gap: .25rem;
}

/* Payment type selector */
.pay-type-option {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: all var(--dur-normal);
  display: flex;
  align-items: center;
  gap: .875rem;
  user-select: none;
}
.pay-type-option:hover { border-color: var(--blue-300); background: var(--blue-50); }
.pay-type-option.active {
  border-color: var(--blue-600);
  background: var(--blue-50);
  box-shadow: 0 0 0 3px rgba(30,77,183,.1);
}

/* Gateway cards */
.gateway-option {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: all var(--dur-normal);
  display: flex;
  align-items: center;
  gap: .875rem;
  user-select: none;
}
.gateway-option:hover { border-color: var(--blue-300); background: var(--blue-50); }
.gateway-option.active {
  border-color: var(--blue-600);
  background: var(--blue-50);
  box-shadow: 0 0 0 3px rgba(30,77,183,.1);
}

.gateway-option__icon { font-size: 1.5rem; flex-shrink: 0; }

.gateway-option__name { font-weight: 600; font-size: .9375rem; }
.gateway-option__desc { font-size: .8125rem; color: var(--gray-500); }

.sandbox-badge {
  font-size: .6875rem;
  background: #fef3c7;
  color: #92400e;
  padding: .125rem .5rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  display: inline-block;
  margin-top: .25rem;
}

.secure-badge-3d {
  font-size: .7rem;
  color: var(--teal-600);
  font-weight: 700;
  margin-left: auto;
  flex-shrink: 0;
}

/* Checkout sticky sidebar */
.checkout-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
}

.checkout-summary-item {
  display: flex;
  gap: .875rem;
  padding: .875rem 0;
  border-bottom: 1px solid var(--gray-100);
}
.checkout-summary-item:last-child { border-bottom: none; }

.checkout-summary-item__img {
  width: 56px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.checkout-summary-item__title {
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: .125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-summary-item__date {
  font-size: .8rem;
  color: var(--gray-500);
}

.checkout-summary-item__price {
  margin-left: auto;
  font-weight: 700;
  color: var(--blue-700);
  font-size: .9375rem;
  flex-shrink: 0;
}

/* ── Payment pages ────────────────────────────────────────── */
.payment-hero {
  background: linear-gradient(135deg, var(--blue-900), var(--blue-800));
  padding: 4rem 0;
  text-align: center;
  color: var(--white);
}

.payment-hero__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.payment-hero__icon--success { background: rgba(52, 211, 153, .2); }
.payment-hero__icon--fail    { background: rgba(239, 68, 68, .2); }

.payment-hero__ref {
  display: inline-block;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-full);
  padding: .375rem 1.25rem;
  font-size: .9375rem;
  font-weight: 600;
  margin-top: .75rem;
  letter-spacing: .05em;
}

/* Voucher download card */
.voucher-download-card {
  background: linear-gradient(135deg, var(--blue-50), #fff);
  border: 2px solid var(--blue-200);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}

.voucher-download-card__code {
  font-family: 'Courier New', monospace;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--blue-700);
  letter-spacing: .1em;
  background: var(--blue-100);
  display: inline-block;
  padding: .375rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}

/* What's next steps */
.next-steps {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.next-step {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .625rem 0;
  border-bottom: 1px solid var(--gray-100);
}
.next-step:last-child { border-bottom: none; }

.next-step__icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1.4; }
.next-step__title { font-weight: 600; font-size: .9375rem; margin-bottom: .25rem; }
.next-step__desc  { font-size: .875rem; color: var(--gray-500); }

/* ── Booking pages ────────────────────────────────────────── */
.booking-status-badge {
  font-size: .6875rem;
  font-weight: 700;
  padding: .25rem .875rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.booking-status-badge--pending   { background: #fef3c7; color: #92400e; }
.booking-status-badge--confirmed { background: #d1fae5; color: #065f46; }
.booking-status-badge--cancelled { background: #fee2e2; color: #991b1b; }
.booking-status-badge--completed { background: #ede9fe; color: #5b21b6; }

.booking-item-block {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--gray-100);
}
.booking-item-block:last-child { border-bottom: none; }

.booking-item-type {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue-600);
  margin-bottom: .375rem;
}

.booking-item-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

.payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0;
  border-bottom: 1px solid var(--gray-100);
}
.payment-row:last-child { border-bottom: none; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .cart-layout     { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-sidebar { position: static; }
}

@media (max-width: 640px) {
  .cart-item__inner { flex-wrap: wrap; }
  .cart-item__price { text-align: left; flex-basis: 100%; }
  .form-row-2       { grid-template-columns: 1fr; }
  .coupon-row       { flex-direction: column; }
}