/* ============================================================
   travel_booking/public/css/traveller.css
   Customer Portal Styles — Gold Theme (#C9A84C)
   Following public site standard (trips.html, trip_card.css)
   
   Font: Rubik (headings) + Jost (body) — loaded from base_travel.html
   ============================================================ */

/* ── Design Tokens (Gold Theme) ── */
:root {
  /* Gold Accent Palette */
  --c-gold:        #C9A84C;
  --c-gold-dark:   #B8983F;
  --c-gold-light:  #FBF8F0;
  --c-gold-mid:    #F5ECD7;
  --c-gold-text:   #7A6428;

  /* Backgrounds */
  --bg-page:       #F7F5F0;
  --bg-card:       #FFFFFF;
  --bg-secondary:  #FAFAF8;
  --bg-tertiary:   #F5F3EE;

  /* Text Colors */
  --text-primary:  #1E1C18;
  --text-secondary:#5C5850;
  --text-tertiary: #7D7A70;
  --text-muted:    #B0AC9F;

  /* Borders */
  --border-default:#E8E5DF;
  --border-light:  #F2EFE9;
  --border-focus:  #C9A84C;

  /* Status Colors */
  --c-success:     #10B981;
  --c-success-bg:  #D1FAE5;
  --c-success-text:#065F46;
  --c-warning:     #F59E0B;
  --c-warning-bg:  #FEF3C7;
  --c-warning-text:#92400E;
  --c-danger:      #EF4444;
  --c-danger-bg:   #FEE2E2;
  --c-danger-text: #991B1B;
  --c-info:        #3B82F6;
  --c-info-bg:     #DBEAFE;
  --c-info-text:   #1E40AF;

  /* Typography (Public Site Standard) */
  --font-heading:  'Rubik', sans-serif;
  --font-body:     'Jost', sans-serif;
  --font-accent:   'Satisfy', cursive;

  /* Spacing & Radii */
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-full:   9999px;

  /* Shadows */
  --shadow-sm:     0 1px 3px rgba(30,28,24,.06), 0 1px 2px rgba(30,28,24,.04);
  --shadow-md:     0 4px 16px rgba(30,28,24,.08), 0 2px 6px rgba(30,28,24,.04);
  --shadow-lg:     0 8px 32px rgba(30,28,24,.10), 0 4px 12px rgba(30,28,24,.06);
  --shadow-gold:   0 4px 14px rgba(201,168,76,.25);

  /* Transitions */
  --transition:    all .2s cubic-bezier(.4,0,.2,1);
}

/* ── Reset & Base ── */
.tv-page {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

/* ── Layout Containers ── */
.tv-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

.tv-container--narrow {
  max-width: 680px;
}

/* ── Navigation Bar ── */
.tv-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
}

.tv-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.tv-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
}

.tv-nav-logo img {
  height: 32px;
  width: auto;
}

.tv-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tv-nav-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.tv-nav-link:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.tv-nav-link.on {
  color: var(--text-primary);
  background: var(--c-gold-light);
  font-weight: 600;
}

.tv-nav-right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ── User menu trigger (profile photo) ── */
.tv-user-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-full);
  transition: var(--transition);
}

.tv-user-trigger:hover {
  background: var(--bg-secondary);
}

.tv-user-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.tv-user-trigger[aria-expanded="true"] .tv-user-chevron {
  transform: rotate(180deg);
}

.tv-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--c-gold);
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

/* ── User dropdown panel ── */
.tv-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  z-index: 200;
  overflow: hidden;
  animation: tv-menu-fade 0.15s ease;
}

@keyframes tv-menu-fade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tv-user-menu-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
}

.tv-menu-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-menu-email {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.tv-menu-link:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.tv-menu-link svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.tv-menu-logout {
  color: var(--c-danger-text, #C0392B);
}

.tv-menu-logout:hover {
  background: var(--c-danger-bg, #FDF0EF);
  color: var(--c-danger-text, #C0392B);
}

/* Sub-navigation (booking context) */
.tv-subnav {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
}

.tv-subnav-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.tv-breadcrumb {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.tv-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}

.tv-breadcrumb a:hover {
  color: var(--c-gold-dark);
}

.tv-subnav-tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.tv-tab {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.tv-tab:hover {
  color: var(--text-primary);
  background: var(--bg-card);
}

.tv-tab.on {
  color: var(--text-primary);
  background: var(--c-gold);
  font-weight: 600;
}

/* ── Cards ── */
.tv-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  transition: var(--transition);
}

.tv-card:hover {
  box-shadow: var(--shadow-md);
}

.tv-card--highlight {
  border-color: var(--c-gold);
  box-shadow: var(--shadow-gold);
}

.tv-card--muted {
  opacity: 0.72;
  pointer-events: none;
}

.tv-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
}

.tv-card__title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.tv-card__subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Card Section Divider */
.tv-sec {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px 0 12px;
  /* border-top: 1px solid var(--border-light); */
  margin-top: 16px;
}

.tv-sec:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* Rich flight itinerary HTML (admin-entered Text Editor content — trusted source) */
.tv-flight-itinerary-html {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.tv-flight-itinerary-html img { max-width: 100%; height: auto; }
.tv-flight-itinerary-html p { margin: 0 0 8px; }
.tv-flight-itinerary-html p:last-child { margin-bottom: 0; }

/* ── Booking Card (List View) ── */
.tv-bk-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.tv-bk-card__hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

/* Right column of the hero — REF chip + countdown */
.tv-bk-card__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.tv-bk-card__name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.tv-bk-card__ref {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-gold-dark);
  background: var(--c-gold-light);
  border: 1px solid var(--c-gold-mid);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tv-bk-card__ref-tag {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  color: var(--c-gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-right: 1px solid var(--c-gold-mid);
  padding-right: 6px;
}

.tv-bk-card__meta {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  /* gap: 16px; */
  flex-wrap: wrap;
}

/* Cruise route + sailing info (small, sits between name and meta) */
.tv-bk-card__info {
  margin: 6px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tv-bk-card__info-row {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.5;
}

.tv-bk-card__info-k {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}

.tv-bk-card__info-arrow {
  color: var(--text-muted);
  margin: 0 2px;
}

.tv-bk-card__info-sep {
  color: var(--text-muted);
  margin: 0 2px;
}

/* Trip-category chip (Cruise / Fly Package / Tour) — atas nama trip */
.tv-bk-card__hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.tv-bk-cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-gold-text);
  background: var(--c-gold-light);
  border: 1px solid var(--c-gold-mid);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  white-space: nowrap;
}

/* Subtitle di bawah nama trip — Sub 1 = Trip Group Date, Sub 2 = Package */
.tv-bk-card__sub {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-top: 3px;
  word-break: break-word;
}

.tv-bk-card__sub--group {
  font-weight: 600;
  color: var(--text-secondary);
}

.tv-bk-card__sub--pkg {
  font-weight: 400;
  color: var(--text-tertiary);
  font-size: 12px;
}

/* Facts strip — Departure · Return · Duration */
.tv-bk-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 12px;
}

.tv-bk-fact__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.tv-bk-fact__value {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

/* Flight / Cruise info block — aksen kiri ikut jenis */
.tv-bk-sec {
  border-left: 3px solid var(--c-gold);
  background: var(--bg-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 12px;
  margin-bottom: 10px;
}

.tv-bk-sec--cruise {
  border-left-color: var(--c-info);
}

.tv-bk-sec__head {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.5;
}

.tv-bk-sec__line {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 2px;
}

/* PNR — mono chip kecil dalam header flight */
.tv-bk-pnr {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-gold-dark);
  background: var(--c-gold-light);
  border: 1px solid var(--c-gold-mid);
  border-radius: 4px;
  padding: 1px 6px;
}

.tv-bk-card__badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tv-bk-card__fin-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.tv-bk-fin-item {
  text-align: center;
}

.tv-bk-fin-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.tv-bk-fin-value {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.tv-bk-fin-value--success { color: var(--c-success); }
.tv-bk-fin-value--warning { color: var(--c-warning-text); }

/* Payment-status cell — badge sits where the value normally goes */
.tv-bk-fin-item--badge {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tv-bk-fin-item--badge .tv-badge {
  font-size: 12px;
  padding: 4px 10px;
}

/* ── Booking Table (On-Behalf List View) ──
   Paparan jadual untuk /traveller/onbehalf — gantian konsep kad.
   Wrapper boleh scroll melintang pada skrin kecil (table kekal
   min-width supaya lajur tidak termampat). */
.tv-table-wrap {
  overflow-x: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}

.tv-bk-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  font-family: var(--font-body);
}

.tv-bk-table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
  padding: 12px 10px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-default);
}

.tv-bk-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

/* Lajur trip — had lebar supaya nama panjang wrap, bukan melebarkan
   table melebihi container (elak scrollbar pada desktop). */
.tv-bk-table__tripname {
  max-width: 190px;
  overflow-wrap: break-word;
  line-height: 1.35;
}

.tv-bk-table__num {
  text-align: right !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Baris tajuk kumpulan (Upcoming / Future / Past) */
.tv-bk-table__group td {
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-gold-dark);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-default);
}

/* Baris data — boleh diklik (data-href) */
.tv-bk-table__row { transition: background 0.15s ease; }
.tv-bk-table__row[data-href] { cursor: pointer; }
.tv-bk-table__row[data-href]:hover { background: var(--bg-tertiary); }
.tv-bk-table__row--highlight { background: var(--c-gold-light); }
.tv-bk-table__row--highlight[data-href]:hover { background: var(--c-gold-mid); }
.tv-bk-table__row--muted { opacity: 0.55; }

.tv-bk-table__cell { font-size: 13px; color: var(--text-primary); }
/* Identiti utama baris: customer name (besar) + email kecil */
.tv-bk-table__cust {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.tv-bk-table__sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Ref chip — sama bahasa dgn tv-bk-card__ref tetapi padat utk table */
.tv-bk-table__ref {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-gold-dark);
  background: var(--c-gold-light);
  border: 1px solid var(--c-gold-mid);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Departure — julat tarikh tak boleh pecah di tengah nilai */
.tv-bk-table__date {
  white-space: nowrap;
}

/* Countdown Badge */
.tv-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-info-text);
  background: var(--c-info-bg);
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

/* ── Badges / Pills ── */
.tv-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Status Badges */
.tv-badge--success  { background: var(--c-success-bg);  color: var(--c-success-text); }
.tv-badge--warning  { background: var(--c-warning-bg);  color: var(--c-warning-text); }
.tv-badge--danger   { background: var(--c-danger-bg);   color: var(--c-danger-text); }
.tv-badge--info     { background: var(--c-info-bg);     color: var(--c-info-text); }
.tv-badge--gold     { background: var(--c-gold-mid);    color: var(--c-gold-text); }
.tv-badge--neutral  { background: var(--bg-tertiary);    color: var(--text-tertiary); }

/* ── Trip Hero (Detail Page) ── */
.tv-trip-hero {
  background: linear-gradient(135deg, var(--c-gold-light) 0%, var(--bg-card) 100%);
  border-radius: var(--radius-md);
  padding: 28px;
  margin-bottom: 24px;
  border: 1px solid var(--c-gold-mid);
}

.tv-th-ref {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-gold-dark);
  margin-bottom: 8px;
}

.tv-th-name {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 8px;
  line-height: 1.2;
}

.tv-th-sub {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tv-th-status {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Progress Bar ── */
.tv-progress {
  width: 100%;
  height: 10px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 12px 0;
}

.tv-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-dark));
  border-radius: var(--radius-full);
  transition: width .4s ease;
}

.tv-progress__fill.done {
  background: linear-gradient(90deg, var(--c-success), #059669);
}

.tv-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
}

.tv-progress-label--success { color: var(--c-success); }

/* ── Collapsible Card ── */
.tv-collapse-header {
  padding: 4px 0;
  user-select: none;
}

.tv-collapse-arrow {
  display: inline-block;
  transition: transform .2s ease;
}

.tv-collapse-body {
  border-top: 1px solid var(--border-light);
  margin-top:16px;
}

/* ── Transaction Card (Collapsible, Standalone) ── */
.tv-tx-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  margin-bottom: 16px;
  transition: all .2s cubic-bezier(.4,0,.2,1);
}

.tv-tx-card:hover {
  border-color: var(--c-gold);
}

/* Card Header (Clickable - Trip Name as Title) */
.tx-card-header {
  padding: 4px 0;
  cursor: pointer;
  user-select: none;
}

.tx-card-header:hover {
  opacity: 0.8;
}

.tx-toggle-icon {
  transition: transform .2s ease;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Card Body (Collapsible Content) */
.tx-card-body {
  overflow: hidden;
  transition: opacity .2s ease, max-height .3s ease;
}

/* Pagination Controls */
.tx-pg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.tx-pg-num {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tx-pg-num:hover:not(.tv-btn--primary) {
  background: var(--c-gold-light);
  color: var(--c-gold-dark);
  border-color: var(--c-gold);
}

@media (max-width: 640px) {
  .tv-tx-card {
    padding: 16px;
  }
  /* 4-col grid becomes 2x2 on mobile */
  .tv-tx-card > div[style*="grid-template-columns:1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  /* Pagination stack on mobile */
  #tx-pagination > div {
    flex-direction: column;
    gap: 12px;
  }
  #tx-pagination > div > div:first-child,
  #tx-pagination > div > div:last-child {
    text-align: center;
  }
}

/* ── Info Grid (2-column) ── */
.tv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.tv-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {
  .tv-grid,
  .tv-grid--3col {
    grid-template-columns: 1fr;
  }
  .tv-bk-card__fin-row {
    grid-template-columns: 1fr 1fr;
  }
}

.tv-field__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.tv-field__value {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 500;
}

/* ── Summary Stats Row ── */
.tv-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 16px 0;
}

.tv-stat {
  text-align: center;
  padding: 16px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.tv-stat__value {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.tv-stat__label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Buttons ── */
.tv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  line-height: 1;
}

.tv-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary (Gold) */
.tv-btn--primary {
  background: var(--c-gold);
  color: var(--text-primary);
}

.tv-btn--primary:hover {
  background: var(--c-gold-dark);
  box-shadow: var(--shadow-gold);
  transform: translateY(-1px);
}

/* Ghost/Outline */
.tv-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}

.tv-btn--ghost:hover {
  color: var(--text-primary);
  border-color: var(--c-gold);
}

/* Success */
.tv-btn--success {
  background: var(--c-success);
  color: #fff;
}

.tv-btn--success:hover {
  background: #059669;
}

/* Small */
.tv-btn--sm {
  font-size: 12px;
  padding: 8px 16px;
}

/* Inline icon/logo inside a small ghost button (e.g. Google sign-in) */
.tv-btn-social-logo {
  height: 16px;
  width: auto;
  flex: 0 0 auto;
}

/* Link-style button */
.tv-btn-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-gold-dark);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.tv-btn-link:hover {
  color: var(--c-gold);
  text-decoration: underline;
}

/* ── Forms ── */
.tv-form-group {
  margin-bottom: 20px;
}

.tv-label {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.tv-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  transition: var(--transition);
  box-sizing: border-box;
}

.tv-input:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.15);
}

.tv-input::placeholder {
  color: var(--text-muted);
}

.tv-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237D7A70' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ── Bar carian & penapis (senarai on-behalf) ── */
.tv-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 18px;
}

.tv-filterbar__search {
  position: relative;
  flex: 1 1 220px;
  min-width: 200px;
}

.tv-filterbar__search .tv-input {
  padding-left: 38px;
}

.tv-filterbar__icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.tv-filterbar .tv-select {
  flex: 0 1 170px;
  min-width: 145px;
  width: auto;
}

.tv-filterbar__count {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 4px 16px;
}

/* Keputusan penapis kosong — buat kerja bila tiada padanan */
.tv-bk-nomatch {
  text-align: center;
  padding: 48px 24px;
  background: var(--bg-card);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  font-size: 14px;
}

.tv-bk-nomatch__icon {
  font-size: 28px;
  margin-bottom: 8px;
}

/* ── Tables ── */
.tv-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 14px;
}

.tv-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--border-default);
  background: var(--bg-secondary);
}

.tv-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.tv-table tr:last-child td {
  border-bottom: none;
}

.tv-table tr:hover td {
  background: var(--c-gold-light);
}

/* ════════════════════════════════════════════════════════
   BILLING PAGE — RESPONSIVE / MOBILE FRIENDLY
   ════════════════════════════════════════════════════════ */

/* Items table — horizontal scroll pada mobile (elit dipotong) */
.tv-items-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tv-items-scroll .tv-table {
  min-width: 520px; /* pastikan 4 lajur tak dipicit terlalu sempit */
}

/* Billing 2-col layout: Payment (flex:1) kiri + Transactions (flex:2) kanan.
   Mobile → column, PAYMENT KEKAL DI ATAS (aksi utama). */
@media (max-width: 768px) {
  .tv-billing-grid {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .tv-billing-payment,
  .tv-billing-transactions {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    width: 100%;
  }
  /* Table padding dipicit di mobile */
  .tv-table th,
  .tv-table td {
    padding: 10px 12px;
    font-size: 13px;
  }
  /* Hero grid (Total/Paid/Balance) — 3 col terlalu sempit → 1 col + row */
  .tv-hero-grid {
    grid-template-columns: 1fr 1fr;
  }
  .tv-hero-cell {
    padding: 10px 12px;
  }
  .tv-hero-value {
    font-size: 13px;
  }
  /* Bank details table — column labels dipicit */
  .tv-bank-table td {
    padding: 6px 10px;
    font-size: 12px;
    word-break: break-all;
  }
  /* Payment method radio — stack vertically */
  .tv-pay-methods {
    flex-direction: column;
    gap: 8px;
  }
  .tv-pay-method {
    width: 100%;
    justify-content: center;
  }
  /* Pay chips — wrap with smaller gap */
  .tv-pay-chips {
    gap: 6px;
  }
  .tv-pay-chip {
    padding: 6px 12px;
    font-size: 11.5px;
  }
  /* File upload zone — kurangkan padding */
  .tv-file-upload {
    padding: 20px 12px;
  }
  /* Info row (Status/Date/Currency) — column stack */
  .tv-billing-info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  /* Nav: tighten untuk billing */
  .tv-nav {
    position: static;
  }
}

@media (max-width: 480px) {
  .tv-hero-grid {
    grid-template-columns: 1fr;
  }
  .tv-table th,
  .tv-table td {
    padding: 8px 10px;
    font-size: 12px;
  }
  .tv-billing-payment,
  .tv-billing-transactions {
    padding: 0;
  }
}

/* ════════════════════════════════════════════════════════
   END BILLING RESPONSIVE
   ════════════════════════════════════════════════════════ */


/* ── Accordion (Billing SO cards) ── */
.tv-accordion {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  overflow: hidden;
}

.tv-acc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  cursor: pointer;
  background: var(--bg-card);
  transition: var(--transition);
  user-select: none;
}

.tv-acc-header:hover {
  background: var(--bg-secondary);
}

.tv-acc-header.open {
  background: var(--c-gold-light);
  border-bottom: 1px solid var(--c-gold-mid);
}

.tv-acc-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.tv-acc-body {
  display: none;
  padding: 20px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
}

.tv-acc-body.open {
  display: block;
}

/* ── Transaction List Item ── */
.tv-tx-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
}

.tv-tx-item:last-child {
  border-bottom: none;
}

.tv-tx-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.tv-tx-icon--online  { background: var(--c-info-bg);     color: var(--c-info); }
.tv-tx-icon--bank    { background: var(--c-gold-mid);    color: var(--c-gold-text); }

.tv-tx-details {
  flex: 1;
  min-width: 0;
}

.tv-tx-date {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}

.tv-tx-desc {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-top: 2px;
}

.tv-tx-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.tv-tx-amount {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.tv-tx-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Login Page Specific ── */
.tv-login-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--bg-page);
}

.tv-login-box {
  width: 100%;
  max-width: 360px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  box-shadow: var(--shadow-lg);
}

.tv-login-logo {
  text-align: center;
  margin-bottom: 32px;
}

.tv-login-logo img {
  height: auto;
  width: 50%;
}

.tv-login-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  margin: 0 0 8px;
}

.tv-login-subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 28px;
}

.tv-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  color: var(--text-muted);
  font-size: 13px;
}

.tv-divider::before,
.tv-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-default);
}

.tv-login-alt-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tv-login-footer {
  text-align: center;
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
}

.tv-login-footer a {
  color: var(--c-gold-dark);
  text-decoration: none;
  font-weight: 500;
}

.tv-login-footer a:hover {
  text-decoration: underline;
}

/* ── Second card: navigation to tour / cruise ── */
.tv-login-nav-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 24px 32px;
  box-shadow: var(--shadow-lg);
  margin-top: 16px;
  text-align: center;
}

.tv-login-nav-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.tv-login-nav-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 18px;
}

.tv-login-nav-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tv-login-nav-buttons .tv-btn {
  justify-content: center;
  font-size: 14px;
  padding: 12px 16px;
}

.tv-nav-brand-logo {
  height: 22px;
  width: auto;
  max-width: 36px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Screen switcher for login views */
.tv-view { display: none; }
.tv-view.on { display: block; }

/* ── Error / Success Messages ── */
.tv-msg {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

.tv-msg.on { display: block; }

.tv-msg--error {
  background: var(--c-danger-bg);
  color: var(--c-danger-text);
  border: 1px solid #fecaca;
}

.tv-msg--success {
  background: var(--c-success-bg);
  color: var(--c-success-text);
  border: 1px solid #a7f3d0;
}

.tv-msg--info {
  background: var(--c-info-bg);
  color: var(--c-info-text);
  border: 1px solid #bfdbfe;
}

.tv-msg--warning {
  background: var(--c-warning-bg);
  color: var(--c-warning-text);
  border: 1px solid #fde68a;
}

/* ── Empty State ── */
.tv-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted);
}

.tv-empty__icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.4;
}

.tv-empty__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.tv-empty__desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  max-width: 360px;
  margin: 0 auto 24px;
}

/* ── Section Headers ── */
.tv-section-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tv-section-title small {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}

/* Section Group Label (Upcoming / Future / Past) */
.tv-group-label {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 28px 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tv-group-label:first-child {
  margin-top: 0;
}

/* Collapsible past trips */
.tv-past-summary details {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.tv-past-summary summary {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tv-past-summary summary::-webkit-details-marker {
  display: none;
}

.tv-past-summary summary::after {
  content: '▾';
  font-size: 12px;
  transition: transform .2s;
}

.tv-past-summary[open] summary::after {
  transform: rotate(180deg);
}

.tv-past-list {
  padding: 8px;
}

/* ── Payment Form (Billing Page) ── */
.tv-pay-form {
  margin-top: 20px;
}

.tv-pay-chips {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.tv-pay-chip {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  cursor: pointer;
  transition: var(--transition);
}

.tv-pay-chip:hover {
  border-color: var(--c-gold);
}

.tv-pay-chip.on {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--text-primary);
}

/* ── Collapsible group cards (Manage Add-ons) ── */
.ma-group-card .ma-group-header {
  cursor: pointer;
  user-select: none;
}
.ma-group-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}
.ma-group-header:hover .ma-group-chevron {
  background: var(--bg-tertiary);
  color: var(--c-gold);
}
.ma-group-card.collapsed .ma-group-chevron {
  transform: rotate(-90deg);
}
.ma-group-body {
  overflow: hidden;
  transition: opacity 0.2s ease;
}
.ma-group-card.collapsed .ma-group-body {
  display: none;
}
.ma-group-card.collapsed .ma-group-header {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.tv-pay-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.tv-pay-method {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.tv-pay-method:hover {
  border-color: var(--c-gold);
}

.tv-pay-method.selected {
  border-color: var(--c-gold);
  background: var(--c-gold-light);
}

.tv-pay-radio {
  width: 18px;
  height: 18px;
  accent-color: var(--c-gold);
}

.tv-pay-panel {
  display: none;
  padding: 16px;
  margin-top: 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}

.tv-pay-panel.on {
  display: block;
}

/* Bank details table */
.tv-bank-table {
  width: 100%;
  font-family: var(--font-body);
  font-size: 13px;
}

.tv-bank-table td {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}

.tv-bank-table td:first-child {
  color: var(--text-tertiary);
  font-weight: 500;
  width: 120px;
}

.tv-bank-table td:last-child {
  font-weight: 600;
  color: var(--text-primary);
}

/* File upload area */
.tv-file-upload {
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-sm);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}

.tv-file-upload:hover {
  border-color: var(--c-gold);
  background: var(--c-gold-light);
}

.tv-file-upload__icon {
  font-size: 24px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.tv-file-upload__text {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
}

.tv-file-upload__hint {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Cabin / Traveller List ── */
.tv-cabin {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  overflow: hidden;
  background: #fff;
}

.tv-cabin__header {
  background: var(--bg-secondary);
  padding: 12px 16px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Collapsible — header cabin ialah <button> untuk buka/tutup senarai
     slot (default: semua collapsed). Butang "Add Traveller" berada dalam
     content panel (bukan header) supaya tiada elemen interaktif bersarang.
     Reset gaya button asli. */
  width: 100%;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 8px;
  border-bottom:1px solid var(--border-light);
}

button.tv-cabin__header:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: -2px;
}

.tv-cabin__title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tv-cabin__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.tv-cabin__chev {
  display: inline-block;
  transition: transform .2s ease;
}

.tv-cabin--open .tv-cabin__chev {
  transform: rotate(180deg);
}

.tv-cabin__body {
  padding: 12px 16px;
}

.tv-slot-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

.tv-slot-item:last-child {
  border-bottom: none;
}

.tv-slot-status {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-right: 12px;
}

.tv-slot-status--verified  { background: var(--c-success); }
.tv-slot-status--pending   { background: var(--c-warning); }
.tv-slot-status--empty     { background: var(--border-default); }
.tv-slot-status--problem   { background: var(--c-danger); }

.tv-slot-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}

.tv-slot-type {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Slot Share Button (mini) ── */
.tv-slot-share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; min-width: 32px;
  border: 1.5px solid var(--c-gold); border-radius: var(--radius-full);
  background: transparent; color: var(--c-gold);
  font-size: 14px; cursor: pointer;
  padding: 0; flex-shrink: 0;
  transition: all .2s ease;
}
.tv-slot-share-btn:hover {
  background: rgba(201,168,76,.1); transform: scale(1.08);
}
.tv-slot-share-btn:active { transform: scale(.95); }
.tv-slot-share-btn[disabled] {
  opacity: .5; cursor: not-allowed; transform: none;
}

/* ── Responsive ── */
@media (max-width: 800px) {
  .tv-nav-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 16px;
    gap: 12px;
  }

  .tv-nav-links {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .tv-subnav-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 16px;
    gap: 12px;
  }

  .tv-subnav-tabs {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    margin-top: 8px;
  }

  .tv-container {
    padding: 20px 16px 48px;
  }

  .tv-card {
    padding: 18px 16px;
  }

  .tv-stats {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }

  .tv-stat__value {
    font-size: 18px;
  }

  .tv-th-name {
    font-size: 22px;
  }

  .tv-bk-card__hero {
    flex-direction: column;
  }

  .tv-bk-card__side {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .tv-bk-card__ref {
    align-self: flex-start;
  }

  /* 5-col grid eases to 3 on tablet */
  .tv-bk-card__fin-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .tv-login-box {
    padding: 28px 20px;
  }
}

@media (max-width: 500px) {
  .tv-bk-card__fin-row {
    grid-template-columns: 1fr 1fr;
  }

  /* Tarikh panjang ("03 Sep 2026") — kecilkan sikit supaya 3 lajur muat */
  .tv-bk-fact__value {
    font-size: 12px;
  }

  .tv-bk-facts {
    gap: 8px;
    padding: 8px 10px;
  }

  .tv-stats {
    grid-template-columns: 1fr 1fr;
  }

  .tv-grid {
    grid-template-columns: 1fr;
  }

  .tv-login-alt-buttons {
    grid-template-columns: 1fr;
  }

  .tv-login-nav-buttons {
    grid-template-columns: 1fr;
  }

  .tv-tx-item {
    flex-wrap: wrap;
  }

  .tv-tx-amount {
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
  }
}

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

.tv-animate-in {
  animation: fadeIn .3s ease forwards;
}

/* Stagger children */
.tv-stagger > *:nth-child(1) { animation-delay: 0ms; }
.tv-stagger > *:nth-child(2) { animation-delay: 50ms; }
.tv-stagger > *:nth-child(3) { animation-delay: 100ms; }
.tv-stagger > *:nth-child(4) { animation-delay: 150ms; }
.tv-stagger > *:nth-child(5) { animation-delay: 200ms; }

/* ── Utility Classes ── */
.tv-text-center { text-align: center; }
.tv-text-right  { text-align: right; }
.tv-text-muted  { color: var(--text-muted); }
.tv-text-success{ color: var(--c-success); }
.tv-text-danger { color: var(--c-danger); }
.tv-text-gold   { color: var(--c-gold-dark); }
.tv-mt-0 { margin-top: 0; }
.tv-mb-0 { margin-bottom: 0; }
.tv-mt-16 { margin-top: 16px; }
.tv-mb-16 { margin-bottom: 16px; }
.tv-mb-24 { margin-bottom: 24px; }
.tv-flex { display: flex; }
.tv-flex-center { align-items: center; }
.tv-flex-between { justify-content: space-between; }
.tv-gap-8 { gap: 8px; }
.tv-gap-16 { gap: 16px; }

/* ── Info Grid Items (Booking Detail Hero) ── */
.tv-info-item {
  min-width: 0;
}

.tv-info-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  font-weight: 500;
}

.tv-info-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  word-break: break-word;
}

/* ── Hero Grid — 3-column layout for booking detail ── */
.tv-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 4px;
  border: 0.5px solid #eaeaea;
}

/* Besarkan status badge dalam hero */
.tv-hero-status .tv-badge {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 20px;
}

.tv-hero-cell {
  background: var(--bg-secondary);
  padding: 10px;
  min-width: 0;
}

.tv-hero-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
  font-weight: 600;
}

.tv-hero-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  word-break: break-word;
}

@media (max-width: 768px) {
  /* Disable sticky nav on mobile — biar scroll naturally dgn content */
  .tv-nav { position: static; }
  .tv-hero-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .tv-hero-grid {
    grid-template-columns: 1fr;
  }

  /* Nav: tighten user menu on phones */
  .tv-nav-right {
    gap: 8px;
  }
  .tv-user-menu {
    width: calc(100vw - 32px);
    max-width: 280px;
  }
}

/* ── Selectable Slot Card (List Mode — clickable, navigates) ── */
.selectable-slot {
  transition: background .15s ease;
  border-radius: var(--radius-sm);
  /* padding: 8px !important; */
  margin: -8px -12px;
}

.selectable-slot:hover {
  background: var(--c-gold-light);
}

.selectable-slot:active {
  background: var(--c-gold-mid);
}

/* Arrow indicator for clickable slots */
.tv-slot-item[data-url] .tv-slot-name::after {
  /* content: '›'; */
  font-size: 16px;
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
  transition: transform .15s ease, color .15s ease;
}

.tv-slot-item[data-url]:hover .tv-slot-name::after {
  color: var(--c-gold-dark);
  transform: translateX(3px);
}

/* ── Traveller Form Tabs (Detail Mode) ──
   Halaman travellers load portal.css SEBELUM traveller.css — portal.css
   ada .tvl-tab gaya pil (radius 20px). Property yang bertindih diulang
   DI SINI supaya gaya deterministik (bug 2026-09-13: pil + underline
   bercampur → tab nampak tidak kemas). */
.tvl-tabs {
  display: flex;
  gap: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  overflow: hidden;
  border-bottom: 2px solid var(--border-default);
  background: var(--bg-card);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.tvl-tab {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 13px 20px;
  cursor: pointer;
  position: relative;
  transition: color .2s ease, background .2s ease;
  flex: 1;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.tvl-tab:hover {
  color: var(--text-secondary);
  background: var(--bg-secondary);
}

.tvl-tab.on {
  color: var(--c-gold-dark);
  font-weight: 600;
  border-bottom-color: var(--c-gold);
  background: var(--c-gold-light);
}

/* ── Upload grid: contoh passport (kiri) + kawasan muat naik (kanan) ──
   Dipakai wizard Step 1 dan borang Passport (State B). */
.pp-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: center;
}

/* Tab Panels */
.tvl-panel {
  display: none;
  padding: 20px 0;
}

.tvl-panel.on {
  display: block;
  padding-top:0px;
}

/* Inline field error (replaces alert chain) */
.f-err {
  display: none;
  font-size: 11px;
  color: #C0392B;
  margin-top: 4px;
}

/* ── Passport Image Preview Zoom Effect ── */
#passport-preview {
  transition: all .3s ease;
  cursor: zoom-in;
}

#passport-preview.preview-zoom {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90vw;
  max-height: 90vh;
  z-index: 9999;
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
  border-radius: 12px;
  cursor: zoom-out;
}

/* Overlay for zoomed image */
#passport-preview.preview-zoom::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.6);
  z-index: -1;
}

/* ── Spinner Animation for Checking State ── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Responsive: Traveller Detail Page (mobile + tablet) ── */

/* Tablet: tips grid stays 2-col but tighter */
@media (max-width: 768px) {
  .wiz-tips-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Passport preview card: stack vertically */
  #passport-uploaded > div > div {
    flex-direction: column !important;
  }

  #passport-uploaded img#passport-preview {
    max-width: 100% !important;
    max-height: 200px !important;
  }

  /* Tab buttons: smaller text */
  .tvl-tab {
    font-size: 12px;
    padding: 10px 12px;
  }
}

/* Mobile: tips grid → 1 column, tabs scroll */
@media (max-width: 480px) {
  .wiz-tips-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tabs: sama lebar, teks kecil — tanpa scroll mendatar */
  .tvl-tab {
    font-size: 12px;
    padding: 10px 8px;
  }

  /* Contoh passport (kiri) + upload area (kanan) → stack menegak */
  .pp-upload-grid {
    grid-template-columns: 1fr;
  }

  .pp-upload-grid > div:first-child {
    max-width: 320px;
    margin: 0 auto;
  }

  /* Wizard upload area: less padding on mobile */
  #wiz-upload-area {
    padding: 28px 16px !important;
  }

  #wiz-upload-area > div:first-child {
    font-size: 36px !important;
  }

  /* Checking state: center spinner */
  #wiz-checking-state {
    padding: 24px 16px !important;
  }

  /* Form panels: less padding */
  .tvl-panel {
    padding: 16px 0;
  }

  /* Confirm button: full width */
  #tvl-confirm-btn {
    width: 100%;
    padding: 14px 20px !important;
  }

  /* Replace button: full width */
  #passport-replace-area {
    display: flex !important;
    justify-content: center;
    width: 100%;
  }

  /* PDPA card: tighter padding */
  .tv-card[style*="c-gold-light"] {
    padding: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Dashboard grid — booking detail (/traveller/booking)
   Row 1: Payment Summary (50%) · Traveller Summary (50%)
   Row 2: Add-ons & Extras (50%) · notis cabin sharing (50%)
   ═══════════════════════════════════════════════════════════ */
.tv-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
  align-items: stretch;
}

/* .tv-card bawa margin-bottom sendiri — dalam grid, jarak diurus grid */
.tv-dash-grid .tv-card {
  margin-bottom: 0;
  min-width: 0;
}

@media (max-width: 900px) {
  .tv-dash-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Numeric stat tiles (kad Payment / Traveller) ── */
.tv-num-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tv-num-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  text-align: center;
  min-width: 0;
}

.tv-num-card__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.tv-num-card__value {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  word-break: break-word;
}

.tv-num-card--success .tv-num-card__value { color: var(--c-success-text); }
.tv-num-card--warning .tv-num-card__value { color: var(--c-warning-text); }

/* ── Modal (pemilihan bill/SO) ── */
.tv-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(30, 28, 24, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.tv-modal-overlay[hidden] { display: none; }

.tv-modal {
  background: var(--bg-card);
  border-radius: 14px;
  max-width: 540px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  padding: 22px;
  box-shadow: 0 18px 48px rgba(30, 28, 24, 0.3);
}

.tv-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.tv-modal__title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.tv-modal__close {
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 8px;
}

.tv-modal__close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.tv-modal__sub {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 4px 0 14px;
  line-height: 1.5;
}

.tv-modal__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}

.tv-modal__row:last-child { border-bottom: none; }

.tv-modal__so {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.tv-modal__meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}