/* ============================================================
   RyTravel — Design System v3.0
   Palette extracted from brand logo:
     Navy  #1A365D | Orange #F68B1E | Sky #5BA4CF | Sky-Lt #D0E8F8
   Fonts: Fraunces (display) · DM Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Brand — from logo */
  --navy:        #1A365D;
  --navy-mid:    #2A5298;
  --navy-soft:   #3A6BBF;
  --navy-dark:   #0F2240;
  --orange:      #F68B1E;
  --orange-light:#FF9D42;
  --orange-pale: #FFF3E3;
  --orange-dark: #D4710F;
  --sky:         #5BA4CF;
  --sky-light:   #D0E8F8;
  --sky-pale:    #EBF4FF;
  --white:       #FFFFFF;
  /* Aliases (backward compat) */
  --gold:        #F68B1E;
  --gold-pale:   #FFF3E3;
  --amber:       #F4A828;
  --amber-lt:    #FFC85A;
  /* Text */
  --text:        #1A365D;
  --text-2:      #2d4a80;
  --text-3:      #6080a8;
  --text-inv:    rgba(255,255,255,.9);
  --text-muted:  rgba(255,255,255,.55);
  /* Surfaces */
  --surface-1:   #FFFFFF;
  --surface-2:   #F5F9FF;
  --surface-3:   #E8F0FA;
  --line:        #D0E0F5;
  /* Status */
  --success:     #0d6e4b;
  --success-bg:  #e8f6f0;
  --success-border:#86efac;
  --danger:      #b91c1c;
  --danger-bg:   #fef2f2;
  --danger-border:#fecaca;
  --warning:     #b45309;
  --warning-bg:  #fffbeb;
  --info:        #1d4ed8;
  --info-bg:     #eff6ff;
  --whatsapp:    #25D366;
  /* Shadows */
  --shadow-sm:  0 2px 8px  rgba(26,54,93,.07);
  --shadow-md:  0 8px 24px rgba(26,54,93,.12);
  --shadow-lg:  0 20px 50px rgba(26,54,93,.18);
  --shadow-xl:  0 32px 64px rgba(26,54,93,.22);
  /* Glow */
  --glow-navy:   0 0 0 3px rgba(26,54,93,.12);
  --glow-orange: 0 0 0 3px rgba(246,139,30,.18);
  /* Radii */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;
  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  /* Transitions */
  --t-fast: .15s ease;
  --t-base: .2s ease;
  --t-slow: .3s ease;
}

/* ── RESET ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html  { scroll-behavior:smooth }
body  { font-family:var(--font-body); color:var(--text); background:var(--white);
        -webkit-font-smoothing:antialiased; line-height:1.65; font-size:15px }
a     { text-decoration:none; color:inherit }
img   { max-width:100%; display:block }
button,input,select,textarea { font:inherit }
.container { width:min(1180px,calc(100% - 40px)); margin:0 auto }

/* ── TYPOGRAPHY ────────────────────────────────────────────── */
h1,h2,h3,h4 { font-family:var(--font-display); letter-spacing:-.02em; line-height:1.1 }

/* ── NAVBAR ─────────────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 12px rgba(26,54,93,.06);
  transition:box-shadow var(--t-base);
}
.nav-wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 0 }
.brand    { display:flex; align-items:center; gap:12px }
.brand-logo { height:44px; width:auto; object-fit:contain; display:block; background:transparent; image-rendering:auto }
img[src*="rytravel-logo.png"] { background:transparent }
.brand-text { display:flex; flex-direction:column }
.brand strong { font-family:var(--font-display); font-size:20px; color:var(--navy); line-height:1.1; display:block }
.brand small  { display:block; font-size:11px; color:var(--text-3); letter-spacing:.02em; margin-top:1px }
.nav-links { display:flex; align-items:center; gap:4px }
.nav-links a {
  color:var(--text-2); font-weight:500; font-size:14px;
  padding:8px 12px; border-radius:var(--r-sm);
  transition:color var(--t-base),background var(--t-base);
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:4px; left:12px; right:12px;
  height:2px; background:var(--orange); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-base);
}
.nav-links a:hover { color:var(--navy) }
.nav-links a:hover::after { transform:scaleX(1) }
.nav-links a.active { color:var(--navy); background:var(--sky-pale) }
.nav-links a.active::after { transform:scaleX(1) }
.nav-links .btn { margin-left:6px }
.nav-links .btn::after { display:none }
.nav-login { color:var(--text-2) !important }
.nav-toggle {
  display:none; border:none;
  background:var(--surface-3); border-radius:var(--r-sm);
  padding:10px 12px; color:var(--navy); font-size:20px;
  cursor:pointer; line-height:1; transition:background var(--t-fast);
}
.nav-toggle:hover { background:var(--line) }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--r-md);
  font-weight:600; font-size:14px; cursor:pointer; border:none;
  transition:transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
  white-space:nowrap;
}
.btn:hover { transform:translateY(-1px) scale(1.01) }
.btn:active { transform:translateY(0) scale(.99) }
.btn-sm  { padding:9px 16px; border-radius:var(--r-sm); font-size:13px }
.btn-lg  { padding:16px 28px; border-radius:var(--r-lg); font-size:16px }
.btn-block { width:100%; justify-content:center }

.btn-primary {
  background:var(--navy); color:var(--white);
  box-shadow:0 4px 14px rgba(26,54,93,.28);
}
.btn-primary:hover { background:var(--navy-mid); box-shadow:0 8px 20px rgba(26,54,93,.36) }

.btn-orange,.btn-gold {
  background:var(--orange); color:var(--white);
  box-shadow:0 4px 14px rgba(246,139,30,.38);
}
.btn-orange:hover,.btn-gold:hover { background:var(--orange-dark); box-shadow:0 8px 20px rgba(246,139,30,.48) }

.btn-secondary { background:var(--surface-3); color:var(--navy); border:1px solid var(--line) }
.btn-secondary:hover { background:var(--line); box-shadow:var(--shadow-sm) }

.btn-outline { background:transparent; color:var(--navy); border:1.5px solid var(--navy) }
.btn-outline:hover { background:var(--navy); color:var(--white) }

.btn-outline-light { background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.4) }
.btn-outline-light:hover { background:rgba(255,255,255,.12) }

.btn-light { background:var(--white); color:var(--navy) }
.btn-light:hover { background:var(--sky-pale) }

.btn-whatsapp { background:var(--whatsapp); color:var(--white) }
.btn-whatsapp:hover { background:#1aad57 }

/* ── BADGES / PILLS / TAGS ──────────────────────────────────── */
.badge,.pill,.tag { display:inline-flex; align-items:center; gap:5px; font-weight:600; border-radius:999px }
.badge {
  padding:5px 14px; font-size:11px;
  background:rgba(255,255,255,.15); color:rgba(255,255,255,.92);
  letter-spacing:.05em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(4px);
}
.badge.surface  { background:var(--surface-3); color:var(--navy); border-color:var(--line) }
.badge.gold     { background:var(--orange-pale); color:var(--orange); border:1px solid #ffd890 }
.badge.success  { background:var(--success-bg); color:var(--success); border:1px solid var(--success-border) }
.badge.danger   { background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-border) }
.badge.warning  { background:var(--warning-bg); color:var(--warning); border:1px dashed #fcd34d }
.pill { padding:5px 12px; font-size:11px; background:var(--navy); color:#fff }
.tag  { padding:5px 11px; font-size:12px; background:var(--surface-2); color:var(--text-2); border:1px solid var(--line) }
.section-kicker {
  display:inline-block; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:var(--orange); margin-bottom:10px
}

/* ── HERO ───────────────────────────────────────────────────── */
.hero-section {
  background:linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 45%, var(--navy-mid) 100%);
  padding:80px 0 60px; position:relative; overflow:hidden;
}
.hero-section::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 55% 70% at 82% 40%, rgba(246,139,30,.14) 0%, transparent 65%),
    radial-gradient(ellipse 40% 55% at 15% 75%, rgba(91,164,207,.10) 0%, transparent 60%);
}
.hero-section .container { position:relative; z-index:1 }
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center }
.hero-grid h1 {
  font-family:var(--font-display);
  font-size:clamp(40px,5.5vw,68px);
  line-height:1.03; letter-spacing:-.03em;
  color:var(--white); margin:16px 0 20px; font-weight:700;
}
.hero-grid h1 em { font-style:italic; color:var(--amber-lt) }
.hero-text { font-size:17px; color:rgba(255,255,255,.72); max-width:560px; line-height:1.7 }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px }
.stat-card {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg); padding:20px 18px;
  transition:background var(--t-base);
}
.stat-card:hover { background:rgba(255,255,255,.12) }
.stat-card strong { font-family:var(--font-display); font-size:30px; color:var(--white); display:block }
.stat-card span   { font-size:13px; color:rgba(255,255,255,.5); margin-top:4px; display:block }

/* ── SEARCH WIDGET (hero glass card) ───────────────────────── */
.glass-card {
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-xl); padding:28px;
}
.tab-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px }
.tab-btn {
  padding:9px 16px; border:1px solid rgba(255,255,255,.15);
  border-radius:999px; background:transparent;
  color:rgba(255,255,255,.6); font-weight:600; font-size:13px;
  cursor:pointer; transition:all var(--t-base);
}
.tab-btn.active { background:var(--white); color:var(--navy); border-color:var(--white) }
.tab-btn:hover:not(.active) { background:rgba(255,255,255,.12); color:rgba(255,255,255,.9) }
.search-card { background:var(--white); border-radius:var(--r-lg); padding:20px }
.compact-search .field-inline { display:grid; grid-template-columns:1fr 1fr; gap:12px }

/* ── FORMS ──────────────────────────────────────────────────── */
.field-group { display:flex; flex-direction:column; gap:7px; margin-bottom:16px }
.field-group label { font-weight:600; font-size:13px; color:var(--text-2) }
.field-group input,
.field-group select,
.sort-select {
  width:100%; padding:13px 16px;
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  background:var(--white); color:var(--text);
  outline:none;
  transition:border-color var(--t-base), box-shadow var(--t-base);
}
.field-group input:focus,
.field-group select:focus,
.sort-select:focus {
  border-color:var(--navy);
  box-shadow:var(--glow-navy);
}
.field-group input:hover:not(:focus),
.field-group select:hover:not(:focus) { border-color:var(--sky) }
.two-col-form { display:grid; grid-template-columns:1fr 1fr; gap:16px }

/* ── SECTIONS ──────────────────────────────────────────────── */
.section     { padding:88px 0 }
.section-alt { background:var(--surface-2) }
.section-head {
  display:flex; justify-content:space-between;
  align-items:flex-end; gap:20px; margin-bottom:32px;
}
.section-head h2 {
  font-family:var(--font-display);
  font-size:clamp(28px,3vw,42px);
  letter-spacing:-.025em; line-height:1.12;
  margin:8px 0 0; color:var(--navy);
}
.text-link { color:var(--orange); font-weight:600; font-size:14px; display:flex; align-items:center; gap:4px; white-space:nowrap }
.text-link:hover { color:var(--orange-dark) }

/* ── CARDS ──────────────────────────────────────────────────── */
.card {
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:#dbe7f5 }
.card-grid { display:grid; gap:20px }
.card-grid.three { grid-template-columns:repeat(3,1fr) }
.card-grid.two   { grid-template-columns:repeat(2,1fr) }

/* ── SERVICE CARDS ──────────────────────────────────────────── */
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.service-card {
  padding:28px 24px; border-radius:var(--r-lg);
  background:var(--white); border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  display:block;
}
.service-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--sky-light) }
.service-icon {
  width:56px; height:56px; border-radius:var(--r-md);
  background:var(--sky-pale); display:grid; place-items:center;
  font-size:26px; margin-bottom:18px;
  border:1px solid var(--sky-light);
}
.service-card h3 { font-family:var(--font-display); font-size:20px; margin-bottom:8px; color:var(--navy) }
.service-card p  { color:var(--text-2); font-size:14px; line-height:1.6 }

/* ── TRIP CARDS ─────────────────────────────────────────────── */
.trip-card { padding:24px; transition:transform var(--t-base),box-shadow var(--t-base) }
.trip-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md) }
.trip-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px }
.trip-card h3 { font-family:var(--font-display); font-size:20px; margin-bottom:8px; color:var(--navy) }
.trip-card p  { color:var(--text-2); font-size:14px }
.trip-meta {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:16px; padding-top:16px;
  border-top:1px solid var(--line); font-size:14px;
}
.trip-meta span { color:var(--text-3) }
.trip-meta a    { color:var(--orange); font-weight:600 }

/* ── MEDIA CARDS ────────────────────────────────────────────── */
.media-card { overflow:hidden; transition:transform var(--t-base),box-shadow var(--t-base) }
.media-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md) }
.media-placeholder {
  height:180px; background:var(--sky-pale);
  display:grid; place-items:center;
  color:var(--text-3); font-weight:600; font-size:14px;
  border-bottom:1px solid var(--sky-light);
}
.media-placeholder.tall { height:220px }
.gallery-placeholder.large { height:300px; background:var(--sky-pale); border-radius:var(--r-lg); display:grid; place-items:center; color:var(--text-3); font-weight:600 }
.card-body { padding:20px 22px }
.card-body h3  { font-family:var(--font-display); font-size:19px; color:var(--navy); margin-bottom:6px }
.card-body p   { color:var(--text-2); font-size:13px }
.price-row {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
}
.price-row strong { font-size:17px; color:var(--navy) }
.price-row a      { color:var(--orange); font-weight:600; font-size:14px }

/* ── FEATURE ────────────────────────────────────────────────── */
.two-col-feature { display:grid; grid-template-columns:1fr .95fr; gap:60px; align-items:center }
.feature-list  { display:grid; gap:14px; margin-top:24px }
.feature-item  {
  padding:18px 20px; border-radius:var(--r-md);
  background:var(--white); border:1px solid var(--line);
  border-left:3px solid var(--orange);
}
.feature-item strong { display:block; margin-bottom:4px; color:var(--navy) }
.feature-item p      { color:var(--text-2); font-size:14px; margin:0 }
.dark-card {
  background:var(--navy); border-radius:var(--r-lg);
  padding:32px; color:var(--white);
  border:1px solid rgba(255,255,255,.08);
}
.dark-card h3 { font-family:var(--font-display); font-size:20px; margin-bottom:12px; color:var(--white) }
.quote { font-family:var(--font-display); font-size:20px; line-height:1.5; font-style:italic; color:rgba(255,255,255,.85) }
.mini-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:22px }
.mini-grid > div {
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  border-radius:12px;
  padding:12px;
}
.mini-grid span   { font-size:11px; color:rgba(255,255,255,.55); display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em }
.mini-grid strong { color:var(--white); font-size:13px; line-height:1.35; display:block }

/* ── CTA ────────────────────────────────────────────────────── */
.cta-section { padding-top:0; padding-bottom:88px }
.cta-card {
  border-radius:var(--r-xl);
  background:linear-gradient(135deg, var(--navy-dark), var(--navy));
  color:var(--white); padding:48px 44px;
  display:flex; justify-content:space-between; align-items:center; gap:32px;
  border:1px solid rgba(246,139,30,.2);
  position:relative; overflow:hidden;
}
.cta-card::before {
  content:''; position:absolute; right:0; top:0; bottom:0; width:45%;
  background:radial-gradient(ellipse at right center, rgba(246,139,30,.18) 0%, transparent 70%);
}
.cta-card > * { position:relative }
.cta-card h2 { font-family:var(--font-display); font-size:clamp(22px,3vw,34px); color:var(--white); letter-spacing:-.02em; margin:8px 0 10px }
.cta-card p  { color:rgba(255,255,255,.65); font-size:15px; max-width:500px }

/* ── PAGE HERO ──────────────────────────────────────────────── */
.page-hero {
  padding:68px 0;
  background:linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, var(--navy-mid) 100%);
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 100% 50%, rgba(246,139,30,.12) 0%, transparent 60%);
}
.page-hero .container { position:relative }
.page-hero.slim { padding:48px 0 100px }
.page-hero h1 { font-family:var(--font-display); font-size:clamp(32px,4vw,52px); color:var(--white); margin:14px 0 10px; letter-spacing:-.03em; line-height:1.1 }
.page-hero p  { color:rgba(255,255,255,.65); font-size:16px }

/* ── OVERLAP ────────────────────────────────────────────────── */
.overlap-section { margin-top:-64px }

/* ── LAYOUTS ────────────────────────────────────────────────── */
.page-grid { display:grid; gap:24px }
.page-grid.has-sidebar { grid-template-columns:320px 1fr }
.page-grid.two-main    { grid-template-columns:1.15fr .85fr }
.checkout-grid  { display:grid; grid-template-columns:1.15fr .85fr; gap:24px }
.ticket-wrap    { display:grid; grid-template-columns:1.2fr .8fr; gap:24px }

/* ── CARD PADDING ───────────────────────────────────────────── */
.sidebar,.summary-card,.form-card,.details-card,.section-panel,.recommend-card,.ticket-card-main { padding:28px }
.sticky-card { position:sticky; top:88px }

/* ── QUICK SEARCH BAR (mobile) ──────────────────────────────── */
.section-quick-search { background:var(--white); padding:0; border-bottom:1px solid var(--line); display:none }
.quick-search-bar     { display:flex; align-items:stretch }
.quick-item {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; padding:14px 8px;
  color:var(--navy); font-size:12px; font-weight:600;
  text-decoration:none; transition:background var(--t-fast);
}
.quick-item:hover { background:var(--sky-pale); color:var(--navy) }
.quick-icon  { font-size:20px; line-height:1 }
.quick-divider { width:1px; background:var(--line); margin:10px 0 }

/* ── PASSENGER STEPPER ──────────────────────────────────────── */
.passenger-input-wrap {
  display:flex; align-items:center; height:48px;
  border:1.5px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; background:var(--white);
  transition:border-color var(--t-base);
}
.passenger-input-wrap:focus-within { border-color:var(--navy); box-shadow:var(--glow-navy) }
.pass-btn {
  width:48px; height:48px; border:none; background:var(--surface-3);
  color:var(--navy); font-size:22px; font-weight:600; cursor:pointer;
  transition:background var(--t-fast); flex-shrink:0;
  line-height:1; display:flex; align-items:center; justify-content:center;
}
.pass-btn:hover   { background:var(--sky-light) }
.pass-btn:disabled { opacity:.35; cursor:not-allowed }
.pass-count {
  flex:1; text-align:center; border:none; outline:none;
  font-size:16px; font-weight:700; color:var(--navy);
  background:transparent; min-width:0; padding:0;
}
.pass-count::-webkit-outer-spin-button,
.pass-count::-webkit-inner-spin-button { -webkit-appearance:none; margin:0 }
.pass-count[type=number]               { -moz-appearance:textfield }

/* ── SCHEDULE LIST ──────────────────────────────────────────── */
.stack-list { display:grid; gap:16px }

/* ── BUS CARD ───────────────────────────────────────────────── */
.bus-card {
  display:grid; grid-template-columns:160px 1fr auto;
  overflow:hidden;
  transition:box-shadow var(--t-base), transform var(--t-base);
}
.bus-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px) }

.bus-card-photo {
  position:relative; min-height:160px;
  background:var(--sky-pale);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; flex-shrink:0;
  border-right:1px solid var(--sky-light);
}
.bus-img { width:160px; height:100%; object-fit:cover; display:block }
.bus-img-placeholder {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  width:160px; padding:16px; text-align:center; min-height:160px;
}
.bus-class-badge {
  position:absolute; top:10px; left:10px;
  font-size:10px; font-weight:700; padding:3px 10px;
  border-radius:20px; text-transform:uppercase; letter-spacing:.05em;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.bus-class-badge.executive { background:var(--navy); color:#fff }
.bus-class-badge.reguler   { background:rgba(0,0,0,.60); color:#fff }
.bus-class-badge.express   { background:var(--orange); color:#fff }
.bus-class-badge.comfort   { background:#0d6e4b; color:#fff }
.bus-class-badge.premium   { background:var(--navy-mid); color:#fff }

.bus-card-info { padding:20px; flex:1 }
.bus-card-price {
  padding:20px; display:flex; flex-direction:column;
  align-items:flex-end; justify-content:center;
  border-left:1px solid var(--sky-light); min-width:188px;
  background:var(--surface-2);
}

/* Route time row */
.route-time-row { display:flex; align-items:center; gap:10px }
.rt-point { display:flex; flex-direction:column; gap:2px }
.rt-time  { font-size:20px; font-weight:700; color:var(--navy); line-height:1.1 }
.rt-city  { font-size:12px; color:var(--text-3) }
.rt-line  { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px }
.rt-dur   { font-size:11px; color:var(--text-3) }
.rt-dash  { width:100%; height:2px; background:linear-gradient(90deg,var(--sky-light),var(--sky),var(--sky-light)); border-radius:999px }
.rt-arrow { font-size:14px; color:var(--orange); font-weight:700 }

/* ── SEAT MAP ───────────────────────────────────────────────── */
.section-divider { height:1px; background:var(--line); margin:24px 0 }
.seat-legend {
  display:flex; gap:20px; flex-wrap:wrap; margin-bottom:20px;
  color:var(--text-2); font-size:13px; align-items:center;
}
.seat-box { display:inline-block; width:18px; height:18px; border-radius:6px; margin-right:6px; vertical-align:middle }
.seat-box          { background:var(--sky-light); border:1.5px solid var(--sky) }
.seat-box.selected { background:var(--navy); border-color:var(--navy) }
.seat-box.booked   { background:var(--surface-3); border-color:var(--line) }
.soft-card  { background:var(--sky-pale); border-color:transparent }
.seat-layout { padding:20px }
.driver-box {
  width:110px; padding:12px 16px; border-radius:var(--r-md);
  background:var(--navy); color:var(--white);
  text-align:center; font-weight:600; font-size:13px; margin-bottom:20px;
}
.seat-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px }
.seat {
  padding:14px 8px; border:none; border-radius:var(--r-md);
  font-weight:700; font-size:13px; cursor:pointer;
  transition:all var(--t-fast);
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.seat.available {
  background:var(--sky-light); color:var(--navy);
  border:1.5px solid var(--sky);
}
.seat.available:hover { background:var(--sky); color:var(--white); border-color:var(--sky) }
.seat.selected  { background:var(--navy); color:var(--white); border:1.5px solid var(--navy); box-shadow:0 3px 8px rgba(26,54,93,.25) }
.seat.booked    { background:var(--surface-3); color:var(--text-3); cursor:not-allowed; border:1.5px solid var(--line) }

/* ── SUMMARY ────────────────────────────────────────────────── */
.summary-card { border:1.5px dashed var(--orange) !important }
.summary-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 0; border-bottom:1px dashed var(--line); font-size:14px;
}
.summary-item span   { color:var(--text-2) }
.summary-item strong { color:var(--navy); font-weight:600 }
.summary-item.total  { border-bottom:none; font-size:17px; padding-top:18px; margin-top:4px }
.summary-item.total span   { color:var(--navy); font-weight:700 }
.summary-item.total strong { font-family:var(--font-display); font-size:22px; color:var(--navy) }

/* ── PAYMENT OPTION ─────────────────────────────────────────── */
.option-list { display:grid; gap:10px }
.option-card {
  display:flex; align-items:center; gap:12px;
  padding:16px; border:1.5px solid var(--line);
  border-radius:var(--r-md); font-weight:600;
  font-size:14px; cursor:pointer; transition:all var(--t-base);
}
.option-card.active { border-color:var(--orange); background:var(--orange-pale); color:var(--warning) }

/* ── E-TICKET ───────────────────────────────────────────────── */
.ticket-section { background:var(--sky-pale); min-height:calc(100vh - 80px); padding:48px 0 }
.ticket-card-main {
  background:var(--white); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  border-top:4px solid var(--navy);
}
.ticket-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding-bottom:22px; border-bottom:2px dashed var(--sky-light);
}
.ticket-header h1 { font-family:var(--font-display); font-size:28px; color:var(--navy); margin:8px 0 6px }
.qr-box {
  width:88px; height:88px; border-radius:var(--r-md);
  background:var(--sky-pale); display:flex; flex-direction:column;
  place-items:center; align-items:center; justify-content:center;
  font-weight:800; color:var(--navy); font-size:13px;
  border:2px dashed var(--sky); flex-shrink:0;
}
.ticket-route {
  display:flex; justify-content:space-between;
  padding:24px 0; border-bottom:2px dashed var(--sky-light); gap:16px;
}
.ticket-route div,.ticket-grid div { display:flex; flex-direction:column; gap:6px }
.ticket-route span,.ticket-grid span { color:var(--text-3); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em }
.ticket-route strong,.ticket-grid strong { color:var(--navy); font-size:15px }
.ticket-grid { padding-top:22px; display:grid; grid-template-columns:repeat(2,1fr); gap:20px }

/* ── DASHBOARD ──────────────────────────────────────────────── */
.dashboard-layout { display:grid; grid-template-columns:240px 1fr; gap:24px; align-items:start }
.dashboard-sidebar { overflow:hidden }
.dashboard-menu   { display:flex; flex-direction:column; gap:4px; padding:16px }
.dashboard-menu a {
  padding:12px 16px; border-radius:var(--r-md); color:var(--text-2);
  font-weight:600; font-size:14px; transition:all var(--t-fast);
  display:flex; align-items:center; gap:8px;
}
.dashboard-menu a.active { background:var(--navy); color:var(--white); box-shadow:0 3px 10px rgba(26,54,93,.25) }
.dashboard-menu a:hover:not(.active) { background:var(--sky-pale); color:var(--navy) }
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.stat-mini { padding:22px; transition:transform var(--t-base),box-shadow var(--t-base) }
.stat-mini:hover { transform:translateY(-2px); box-shadow:var(--shadow-md) }
.stat-num { font-family:var(--font-display); font-size:36px; font-weight:700; color:var(--navy); margin-top:8px; line-height:1 }
.booking-preview-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  padding:16px; background:var(--sky-pale);
  border-radius:var(--r-md); border:1px solid var(--sky-light);
}
.quick-action-card {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 12px; border-radius:var(--r-md);
  background:var(--sky-pale); border:1.5px solid var(--sky-light);
  color:var(--navy); font-size:13px; font-weight:600;
  transition:all var(--t-base); text-align:center;
}
.quick-action-card:hover { background:var(--navy); color:var(--white); border-color:var(--navy); transform:translateY(-2px); box-shadow:var(--shadow-md) }

/* ── TABLE ──────────────────────────────────────────────────── */
.table-wrap { overflow:auto; border-radius:0 0 var(--r-lg) var(--r-lg) }
.bookings-table { width:100%; border-collapse:collapse; min-width:760px }
.bookings-table thead tr { background:var(--sky-pale) }
.bookings-table th {
  padding:13px 16px; text-align:left;
  font-size:12px; font-weight:700; color:var(--text-3);
  text-transform:uppercase; letter-spacing:.06em;
  border-bottom:2px solid var(--sky-light);
}
.bookings-table td { padding:14px 16px; border-top:1px solid var(--line); font-size:14px; color:var(--text) }
.bookings-table tbody tr:hover { background:var(--sky-pale) }

/* ── ALERTS ─────────────────────────────────────────────────── */
.alert-box {
  padding:13px 16px; border-radius:var(--r-md);
  margin-bottom:14px; font-weight:500; font-size:14px;
  display:flex; align-items:flex-start; gap:10px;
}
.alert-box.success { background:var(--success-bg); color:var(--success); border:1px solid var(--success-border) }
.alert-box.success::before { content:'✓'; flex-shrink:0; font-weight:700 }
.alert-box.error   { background:var(--danger-bg);  color:var(--danger);  border:1px solid var(--danger-border) }
.alert-box.error::before   { content:'✕'; flex-shrink:0; font-weight:700 }

.selected-seats {
  background:var(--orange-pale); border:1px dashed var(--orange);
  padding:10px 14px; border-radius:var(--r-md);
  color:var(--warning); font-weight:600; letter-spacing:.04em;
}
.ok-text  { color:var(--success); font-weight:600 }
.no-text  { color:var(--danger); font-weight:600 }

/* ── AUTH ────────────────────────────────────────────────────── */
.auth-container      { max-width:520px }
.auth-wide-container { max-width:800px }

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer { background:var(--navy); color:rgba(255,255,255,.7); padding:60px 0 28px }
.footer-grid {
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:32px; padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand-footer { display:flex; align-items:center; gap:12px; margin-bottom:16px }
.brand-footer .brand-logo {
  height:38px;
  filter:brightness(0) invert(1);
  opacity:.92;
}
.brand-footer strong { font-family:var(--font-display); font-size:18px; color:var(--white); display:block }
.brand-footer small  { font-size:11px; color:rgba(255,255,255,.4); display:block; margin-top:1px }
.site-footer h4 { color:var(--white); font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; margin-bottom:16px }
.site-footer a  { display:block; color:rgba(255,255,255,.5); font-size:14px; margin:10px 0; transition:color var(--t-base) }
.site-footer a:hover { color:var(--orange) }
.footer-bottom { display:flex; justify-content:space-between; gap:16px; padding-top:24px; color:rgba(255,255,255,.28); font-size:13px; align-items:center }

/* ── HELPERS ────────────────────────────────────────────────── */
.muted       { color:var(--text-3) }
.small       { font-size:13px }
.text-center { text-align:center }
code { font-family:monospace; background:var(--surface-3); padding:2px 6px; border-radius:5px; font-size:.88em }
.full        { grid-column:1/-1 }
.hide-mobile { display:block }
.show-mobile { display:none }

/* ── MOBILE RESPONSIVE TABLE ────────────────────────────────── */
@media(max-width:640px){
  .hide-mobile { display:none }
  .show-mobile { display:block }
}

/* ── RESPONSIVE 1024px ──────────────────────────────────────── */
@media(max-width:1024px){
  .hero-grid,.two-col-feature,.footer-grid,
  .page-grid.has-sidebar,.page-grid.two-main,
  .checkout-grid,.ticket-wrap { grid-template-columns:1fr }
  .service-grid,.card-grid.three { grid-template-columns:1fr 1fr }
  .sticky-card     { position:static }
  .overlap-section { margin-top:-52px }
  .stats-grid      { grid-template-columns:repeat(3,1fr) }
  .dashboard-layout { grid-template-columns:1fr }
  .dashboard-sidebar { order:-1 }
  .dashboard-menu  { flex-direction:row; flex-wrap:wrap; padding:12px; gap:6px }
  .dashboard-menu a { padding:9px 14px; font-size:13px }
  .booking-preview-grid { grid-template-columns:repeat(2,1fr) }
  .stats-row       { grid-template-columns:repeat(3,1fr) }
}

/* ── RESPONSIVE 768px ───────────────────────────────────────── */
@media(max-width:768px){
  .nav-toggle        { display:block }
  .section-quick-search { display:block }
  .nav-links {
    position:absolute; left:16px; right:16px; top:72px;
    background:var(--white); border:1px solid var(--line);
    border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
    padding:16px; display:none; flex-direction:column; align-items:stretch; z-index:100;
  }
  .nav-links.show { display:flex }
  .nav-links a::after { display:none }
  .nav-links a { padding:12px 14px; border-radius:var(--r-sm) }
  .brand-logo      { height:36px }
  .brand strong    { font-size:16px }
  .brand small     { display:none }
  .hero-grid       { grid-template-columns:1fr; gap:28px }
  .hero-grid .glass-card { display:none }
  .hero-section    { padding:44px 0 36px }
  .hero-grid h1    { font-size:30px; margin:12px 0 14px }
  .hero-text       { font-size:15px }
  .stats-grid      { grid-template-columns:repeat(3,1fr); gap:10px; margin-top:24px }
  .stat-card       { padding:14px 10px }
  .stat-card strong { font-size:22px }
  .stat-card span  { font-size:11px }
  .hero-actions    { gap:10px }
  .hero-actions .btn { flex:1; min-width:0; padding:13px 16px; font-size:14px }
  .service-grid,.card-grid.three,.card-grid.two,
  .ticket-grid,.mini-grid { grid-template-columns:1fr }
  .compact-search .field-inline,.two-col-form { grid-template-columns:1fr }
  .page-hero h1    { font-size:28px }
  .cta-card        { flex-direction:column; align-items:flex-start; padding:28px 20px }
  .ticket-header,.ticket-route { flex-direction:column }
  .footer-bottom   { flex-direction:column; gap:8px; text-align:center }
  .footer-grid     { grid-template-columns:1fr 1fr }
  .container       { width:calc(100% - 28px) }
  .section         { padding:56px 0 }
  .page-hero.slim  { padding-bottom:80px }
  .seat-grid       { grid-template-columns:repeat(4,1fr) }
  .two-col-feature { grid-template-columns:1fr }
  .bus-card        { grid-template-columns:1fr }
  .bus-card-photo  { min-height:120px; flex-direction:row; gap:12px; padding:12px }
  .bus-img         { width:100px; height:80px; border-radius:var(--r-md) }
  .bus-img-placeholder { width:80px; min-height:80px; padding:8px }
  .bus-class-badge { top:8px; left:8px }
  .bus-card-info   { border-left:none; border-top:1px solid var(--sky-light); padding:14px }
  .bus-card-price  { border-left:none; border-top:1px solid var(--sky-light); padding:14px; align-items:flex-start; background:var(--surface-1) }
  .bus-card-price a { width:auto!important }
  .stats-row       { grid-template-columns:1fr 1fr }
  .booking-preview-grid { grid-template-columns:1fr 1fr }
}

/* ── RESPONSIVE 480px ───────────────────────────────────────── */
@media(max-width:480px){
  .seat-grid   { grid-template-columns:repeat(3,1fr) }
  .hero-grid h1 { font-size:28px }
  .footer-grid { grid-template-columns:1fr }
  .stats-row   { grid-template-columns:1fr 1fr }
}

/* ── DASHBOARD SCOPE THEMING ────────────────────────────────── */
.scope-badge-transport { background:#e6f4ff; color:#0b5cab; border:1px solid #bfe0ff }
.scope-badge-rental { background:#ecfdf3; color:#0f766e; border:1px solid #b7f3d0 }
.scope-badge-kuliner { background:#fff7ed; color:#9a3412; border:1px solid #fed7aa }

.dashboard-hero-scope-transport { background:linear-gradient(180deg,#f5faff 0%,#fff 100%) }
.dashboard-hero-scope-rental { background:linear-gradient(180deg,#f0fdf4 0%,#fff 100%) }
.dashboard-hero-scope-kuliner { background:linear-gradient(180deg,#fff7ed 0%,#fff 100%) }

/* ── UX POLISH: MOBILE FRIENDLY + ELEGANT ───────────────────── */
.btn { min-height:42px }
input,select,textarea { min-height:42px }

.table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
.table-wrap table { min-width:760px }

.rental-gallery { display:grid; grid-template-columns:2fr 1fr; gap:6px; padding:10px; background:#f8fafc }
.rental-main-photo { min-height:190px; border-radius:10px; overflow:hidden; background:#e5e7eb }
.rental-main-photo img,
.rental-thumb img { width:100%; height:100%; object-fit:cover; display:block }
.rental-thumbs { display:grid; grid-template-rows:repeat(3,1fr); gap:6px }
.rental-thumb { border-radius:8px; overflow:hidden; background:#e5e7eb; min-height:58px; position:relative }
.rental-thumb-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:11px }

@media(max-width:768px){
  .rental-gallery { grid-template-columns:1fr; gap:8px; padding:8px }
  .rental-main-photo { min-height:200px }
  .rental-thumbs { grid-template-columns:repeat(3,1fr); grid-template-rows:none }
  .rental-thumb { min-height:72px }
}

/* ── FINAL SWEEP: ELEGANT + LOW FRICTION UX ───────────────── */
.page-hero p,
.card p,
.muted { line-height:1.55 }

.bookings-table th,
.bookings-table td { vertical-align:top }

@media(max-width:1024px){
  .result-head.card { padding:14px }
  .bookings-table th,
  .bookings-table td { white-space:nowrap; font-size:13px }
}

@media(max-width:768px){
  .kuliner-mobile-list { display:grid; gap:10px }

  .btn,
  .btn.btn-sm { width:100%; justify-content:center }

  details > summary.btn { width:100% }

  .result-head.card {
    display:grid !important;
    gap:10px;
  }

  .dashboard-menu a {
    border-radius:10px;
    min-height:40px;
    display:flex;
    align-items:center;
  }

  .field-group label { font-size:13px }
  .field-group input,
  .field-group select,
  .field-group textarea { font-size:16px }
}