/* ============================================================
   ABYSSINIA LUXURY COACH — stylesheet
   Design tokens live at the top; everything else derives from them.
   ============================================================ */

:root{
  /* --- palette, pulled from the fleet livery --- */
  --ink:        #0b0d10;   /* roof-band black */
  --ink-soft:   #14181d;
  --ink-line:   rgba(255,255,255,.14);
  --paper:      #f7f3e9;   /* ticket paper */
  --paper-dim:  #efe8d8;
  --gold:       #c99a2e;   /* grille gold */
  --gold-bright:#e9b93f;
  --lime:       #b7cf12;   /* chevron accent */
  --crimson:    #b5182c;   /* rear stripe accent, used sparingly */
  --ink-text:   #1b1a16;
  --muted:      #6b675c;
  --paper-line: rgba(20,18,10,.14);

  --font-display: "Fraunces", Georgia, serif;
  --font-script:  "Pinyon Script", cursive;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --radius: 14px;
  --shadow-lg: 0 24px 60px -20px rgba(11,13,16,.45);
  --shadow-sm: 0 8px 22px -12px rgba(11,13,16,.35);
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-text);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

h1,h2,h3,h4{ font-family:var(--font-display); margin:0 0 .4em; font-weight:600; letter-spacing:-.01em; }
.eyebrow{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.16em;
  font-size:.72rem; color:var(--gold); font-weight:600;
}
.lede{ color:var(--muted); font-size:1.05rem; max-width:56ch; }

:focus-visible{ outline:3px solid var(--gold-bright); outline-offset:3px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.9em 1.6em; border-radius:999px; border:1px solid transparent;
  font-weight:700; font-size:.95rem; cursor:pointer; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-gold{ background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#211a06; box-shadow:var(--shadow-sm); }
.btn-gold:hover{ box-shadow:0 12px 26px -10px rgba(201,154,46,.65); }
.btn-outline{ background:transparent; border-color:currentColor; color:inherit; }
.btn-outline:hover{ background:rgba(255,255,255,.08); }
.btn-dark{ background:var(--ink); color:var(--paper); }
.btn-dark:hover{ background:var(--ink-soft); }
.btn-whatsapp{ background:#25D366; color:#06210f; box-shadow:var(--shadow-sm); }
.btn-whatsapp:hover{ box-shadow:0 12px 26px -10px rgba(37,211,102,.6); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn-block{ width:100%; }
.btn-sm{ padding:.6em 1.1em; font-size:.82rem; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,13,16,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ink-line);
  color:var(--paper);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px; gap:16px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand img{ width:44px; height:44px; border-radius:50%; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text .script{ font-family:var(--font-script); font-size:1.55rem; color:var(--gold-bright); line-height:1; }
.brand-text small{ font-family:var(--font-mono); letter-spacing:.18em; font-size:.6rem; color:var(--lime); text-transform:uppercase; }

.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; font-size:.92rem; font-weight:600; color:var(--paper); opacity:.85; }
.nav-links a:hover{ opacity:1; }
.nav-cta{ display:flex; align-items:center; gap:10px; }

.nav-toggle{ display:none; background:none; border:1px solid var(--ink-line); color:var(--paper); border-radius:8px; padding:8px 10px; }

@media (max-width: 880px){
  .nav-links{ position:absolute; top:76px; left:0; right:0; background:var(--ink); flex-direction:column; align-items:flex-start; padding:18px 24px 26px; gap:16px; border-bottom:1px solid var(--ink-line); display:none; }
  .nav-links.open{ display:flex; }
  .nav-toggle{ display:inline-flex; }
  .nav-cta .btn span.long{ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; color:var(--paper); overflow:hidden;
  background:var(--ink);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,13,16,.55) 0%, rgba(11,13,16,.72) 45%, rgba(11,13,16,.94) 100%),
    var(--hero-img) center 30%/cover no-repeat;
}
.hero-top-band{
  position:relative; z-index:2;
  height:8px; width:100%;
  background:repeating-linear-gradient(90deg, var(--gold) 0 26px, var(--ink) 26px 30px, var(--lime) 30px 56px, var(--ink) 56px 60px);
}
.hero-inner{ position:relative; z-index:2; padding:88px 0 64px; }
.hero h1{ font-size:clamp(2.4rem,5.4vw,4.2rem); color:#fff; max-width:16ch; }
.hero h1 em{ font-style:normal; color:var(--gold-bright); }
.hero .lede{ color:rgba(247,243,233,.82); font-size:1.12rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

.hero-strip{
  position:relative; z-index:2; margin-top:56px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--ink-line);
}
.hero-strip div{ padding:18px 10px 6px; text-align:center; border-right:1px solid var(--ink-line); }
.hero-strip div:last-child{ border-right:none; }
.hero-strip strong{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--gold-bright); }
.hero-strip span{ font-size:.74rem; color:rgba(247,243,233,.7); text-transform:uppercase; letter-spacing:.08em; }

@media (max-width:700px){
  .hero-strip{ grid-template-columns:repeat(2,1fr); }
  .hero-strip div:nth-child(2){ border-right:none; }
}

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
section{ padding:88px 0; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.on-dark{ background:var(--ink); color:var(--paper); }
.on-dark .lede{ color:rgba(247,243,233,.72); }
.on-dim{ background:var(--paper-dim); }

/* chevron divider, echoes the livery */
.chevron-rule{
  height:14px; width:100%;
  background-image: linear-gradient(135deg, var(--lime) 25%, transparent 25%),
                     linear-gradient(225deg, var(--lime) 25%, transparent 25%);
  background-position: 0 0; background-size:22px 22px; opacity:.55;
}

/* ============================================================
   BOOKING — the "ticket stub" signature widget
   ============================================================ */
.booking{ background:var(--ink); color:var(--paper); position:relative; }

.ticket{
  background:var(--paper); color:var(--ink-text); border-radius:20px;
  box-shadow:var(--shadow-lg); position:relative; overflow:visible;
  display:grid; grid-template-columns:1.15fr .85fr;
}
.ticket::before, .ticket::after{
  content:""; position:absolute;
  width:34px; height:34px; background:var(--ink); border-radius:50%; z-index:2;
  left:calc(57.5% - 17px);
}
.ticket::before{ top:-17px; }
.ticket::after{ bottom:-17px; }
.ticket-tear{
  position:absolute; top:0; bottom:0; left:57.5%;
  border-left:2px dashed var(--paper-line); z-index:1;
}
@media (max-width:900px){
  .ticket{ grid-template-columns:1fr; }
  .ticket::before,.ticket::after,.ticket-tear{ display:none; }
  .ticket-tear-h{ display:block !important; }
}
.ticket-tear-h{ display:none; height:0; border-top:2px dashed var(--paper-line); margin:0 28px; }

.ticket-main{ padding:34px 38px; min-width:0; }
.ticket-stub{ padding:34px 32px; background:var(--paper-dim); border-radius:0 20px 20px 0; min-width:0; }
@media (max-width:900px){ .ticket-stub{ border-radius:0 0 20px 20px; } }
@media (max-width:480px){
  .ticket-main, .ticket-stub{ padding:26px 20px; }
}

.ticket-row-label{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-bottom:6px; display:block; }

.field-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-bottom:20px; }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field input, .field select{
  padding:12px 14px; border-radius:10px; border:1.5px solid var(--paper-line);
  font-family:var(--font-body); font-size:.95rem; background:#fff; color:var(--ink-text);
  width:100%; min-width:0;
}

.time-options{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:6px; }
.time-chip{
  padding:10px 16px; border-radius:999px; border:1.5px solid var(--paper-line);
  background:#fff; font-weight:700; font-family:var(--font-mono); font-size:.85rem; cursor:pointer;
}
.time-chip.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.days-note{ font-size:.78rem; color:var(--muted); margin-top:8px; }
.days-note strong{ color:var(--ink-text); }

.route-info-card{
  border:1.5px solid var(--paper-line); border-radius:14px; padding:18px 20px; background:#fff;
}
.route-info-card.warn{ border-color:var(--crimson); background:rgba(181,24,44,.06); font-size:.9rem; }
.route-info-top{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.route-info-fare{ font-family:var(--font-display); font-size:1.7rem; color:var(--crimson); }
.route-info-per{ font-size:.78rem; color:var(--muted); }
.route-info-service{ font-weight:700; margin:0 0 4px; font-size:.92rem; }
.route-info-time{ font-family:var(--font-mono); font-size:.82rem; color:var(--ink-text); margin:0 0 8px; }
.route-info-note{ font-size:.8rem; color:var(--muted); margin:0; }

/* seat map */
.seatmap-legend{ display:flex; gap:18px; margin-bottom:16px; flex-wrap:wrap; }
.seatmap-legend span{ display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--muted); }
.legend-swatch{ width:14px; height:14px; border-radius:4px; display:inline-block; }
.legend-swatch.available{ background:#fff; border:1.5px solid var(--paper-line); }
.legend-swatch.selected{ background:var(--gold); }
.legend-swatch.booked{ background:var(--muted); }

.bus-shell{
  border:1.5px solid var(--paper-line); border-radius:18px; padding:20px 16px 24px; background:#fff;
}
.driver-row{ display:flex; justify-content:flex-end; margin-bottom:14px; padding-right:6px; }
.driver-badge{
  width:34px; height:28px; border-radius:6px; border:1.5px solid var(--paper-line);
  display:flex; align-items:center; justify-content:center; font-size:.65rem; color:var(--muted); font-family:var(--font-mono);
}
.seat-grid{ display:flex; flex-direction:column; gap:8px; }
.seat-row{ display:grid; gap:8px; align-items:center; }
.seat{
  width:34px; height:34px; border-radius:8px 8px 10px 10px; border:1.5px solid var(--paper-line);
  background:#fff; font-family:var(--font-mono); font-size:.66rem; font-weight:700; color:var(--ink-text);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.seat.selected{ background:var(--gold); border-color:var(--gold); color:#211a06; }
.seat.booked{ background:var(--muted); color:rgba(255,255,255,.75); border-color:var(--muted); cursor:not-allowed; text-decoration:line-through; text-decoration-thickness:1.5px; }
.seat.aisle-gap{ visibility:hidden; }

.selected-summary{ margin-top:18px; font-size:.9rem; }
.selected-summary strong{ font-family:var(--font-mono); }

/* passenger + whatsapp */
.stub-total{ display:flex; justify-content:space-between; align-items:baseline; padding:16px 0; border-top:1px dashed var(--paper-line); border-bottom:1px dashed var(--paper-line); margin:18px 0; }
.stub-total .amt{ font-family:var(--font-display); font-size:1.8rem; color:var(--crimson); }
.stub-total .label{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.form-note{ font-size:.78rem; color:var(--muted); margin-top:10px; }
.ticket-code{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted); letter-spacing:.08em; }

/* ============================================================
   FLEET GALLERY
   ============================================================ */
.fleet-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:18px; }
.fleet-grid .fleet-main{ grid-row:span 2; }
.fleet-item{ position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); }
.fleet-item img{ width:100%; height:100%; object-fit:cover; }
.fleet-item .cap{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  background:linear-gradient(180deg, transparent, rgba(11,13,16,.85));
  color:#fff; font-size:.82rem; font-weight:600;
}
@media (max-width:820px){
  .fleet-grid{ grid-template-columns:1fr 1fr; }
  .fleet-grid .fleet-main{ grid-column:span 2; grid-row:auto; aspect-ratio:16/9; }
  .fleet-item{ aspect-ratio:1/1; }
}

/* ============================================================
   AMENITIES
   ============================================================ */
.amenities-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.amenity{ padding:26px 22px; border:1.5px solid var(--paper-line); border-radius:16px; background:#fff; }
.amenity .icon{ width:40px; height:40px; margin-bottom:14px; color:var(--gold); }
.amenity h3{ font-size:1.05rem; margin-bottom:.3em; }
.amenity p{ color:var(--muted); font-size:.9rem; margin:0; }
@media (max-width:820px){ .amenities-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .amenities-grid{ grid-template-columns:1fr; } }

/* ============================================================
   FARES
   ============================================================ */
#fareTables{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.fare-table-block{ background:var(--ink); color:var(--paper); border-radius:18px; padding:26px 28px; }
.fare-table-title{ font-family:var(--font-display); font-size:1.15rem; margin-bottom:16px; color:var(--gold-bright); }
.fare-table{ display:flex; flex-direction:column; }
.fare-row{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--ink-line); font-size:.92rem; }
.fare-row:first-child{ border-top:none; }
.fare-row .leg{ font-weight:600; }
.fare-row .price{ font-family:var(--font-mono); color:var(--gold-bright); font-weight:700; white-space:nowrap; }
@media (max-width:820px){ #fareTables{ grid-template-columns:1fr; } }

/* ============================================================
   JOURNEY / STOPS TIMELINE
   ============================================================ */
.journey-line{ display:flex; overflow-x:auto; gap:0; padding-bottom:14px; }
.journey-stop{ flex:0 0 auto; width:190px; position:relative; padding:0 18px 0 0; }
.journey-stop .dot{ width:12px; height:12px; border-radius:50%; background:var(--gold); margin-bottom:12px; position:relative; }
.journey-stop .dot::after{ content:""; position:absolute; top:5px; left:12px; width:178px; height:2px; background:var(--paper-line); }
.journey-stop:last-child .dot::after{ display:none; }
.journey-stop h4{ font-size:.95rem; margin-bottom:2px; }
.journey-stop span{ font-size:.76rem; color:var(--muted); }

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.contact-card{ background:#fff; border-radius:18px; padding:32px; border:1.5px solid var(--paper-line); }
.office{ padding:16px 0; border-top:1px solid var(--paper-line); }
.office:first-child{ border-top:none; }
.office h4{ margin:0 0 4px; font-size:1rem; }
.office p{ margin:0; color:var(--muted); font-size:.88rem; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

.site-footer{ background:var(--ink); color:rgba(247,243,233,.7); padding:56px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:36px; }
.footer-grid h4{ color:var(--paper); font-family:var(--font-body); font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.9rem; }
.footer-grid a{ text-decoration:none; color:inherit; }
.footer-grid a:hover{ color:var(--gold-bright); }
.footer-bottom{ border-top:1px solid var(--ink-line); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr; } }

/* whatsapp floating button */
.wa-float{
  position:fixed; bottom:22px; right:22px; z-index:60;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#06210f;
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 26px -8px rgba(0,0,0,.4);
  text-decoration:none;
}

.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }