/* ==========================================================================
   TESIM — visual identity
   A night departure board (deep navy + amber readout) meets a stack of
   paper boarding passes. Destination cards are ticket stubs; selecting a
   package opens a full boarding-pass panel with a perforated tear line.
   ========================================================================== */

:root{
  --bg:        #0A1220;
  --bg-2:      #10192C;
  --bg-3:      #182742;
  --bg-line:   #24344F;

  --paper:     #F6F1E3;
  --paper-2:   #EEE4CC;
  --paper-line:#CBBE9C;
  --ink:       #1B2430;
  --ink-soft:  #5B6472;

  --amber:     #FFB300;
  --amber-deep:#C97A00;
  --green:     #2BC98F;
  --red:       #E8615A;

  --muted:     #8697B5;
  --white:     #F4F7FB;

  --display:   'Frank Ruhl Libre', 'Times New Roman', serif;
  --body:      'Heebo', 'Assistant', sans-serif;
  --mono:      'IBM Plex Mono', 'Courier New', monospace;

  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 26px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 12px 32px -8px rgba(0,0,0,.55);
  --shadow-paper: 0 18px 40px -12px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, #14213B 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #101C33 0%, transparent 55%),
    var(--bg);
  color:var(--white);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img,svg{ display:block; }
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------------------------------- Top bar ---------------------------------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(10,18,32,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bg-line);
}
.topbar__inner{
  max-width:1180px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; color:var(--amber); }
.brand__mark{ color:var(--amber); display:flex; }
.brand__word{
  font-family:var(--mono); font-weight:600; letter-spacing:.14em;
  font-size:16px; color:var(--white); display:flex; align-items:baseline; gap:6px;
}
.brand__dot{ color:var(--amber); }
.brand__sub{ font-family:var(--display); font-weight:500; letter-spacing:0; font-size:15px; color:var(--muted); }

.cart-btn{
  position:relative;
  background:var(--bg-3); border:1px solid var(--bg-line); color:var(--white);
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .15s;
}
.cart-btn:hover{ background:#1E2F4E; transform:translateY(-1px); }
.cart-btn__count{
  position:absolute; top:-4px; left:-4px;
  background:var(--amber); color:#231600; font-family:var(--mono); font-weight:700;
  font-size:11px; min-width:18px; height:18px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* ---------------------------------- Hero ---------------------------------- */
.hero{ padding:64px 24px 40px; }
.hero__inner{ max-width:820px; margin:0 auto; text-align:center; }
.hero__eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.12em;
  color:var(--amber); text-transform:uppercase; margin:0 0 18px;
}
h1.split-flap{
  font-family:var(--display); font-weight:900;
  font-size:clamp(34px, 6vw, 64px); line-height:1.08; margin:0 0 18px;
  color:var(--white);
}
.split-flap .flap{ display:inline-block; }
.hero__lede{
  color:var(--muted); font-size:16.5px; line-height:1.7; max-width:560px; margin:0 auto 34px;
}

.board-search{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-2); border:1px solid var(--bg-line);
  border-radius:999px; padding:6px 8px 6px 18px;
  max-width:560px; margin:0 auto; box-shadow:var(--shadow-1);
}
.board-search__icon{ color:var(--muted); flex-shrink:0; }
.board-search__input{
  flex:1; background:none; border:none; color:var(--white);
  font-size:15px; padding:10px 4px; min-width:0;
}
.board-search__input::placeholder{ color:#5D6C88; }
.board-search__count{
  font-family:var(--mono); font-size:12px; color:var(--bg);
  background:var(--amber); padding:8px 14px; border-radius:999px;
  white-space:nowrap; font-weight:600;
}

.board-stats{
  display:flex; justify-content:center; gap:0; margin:38px auto 0; max-width:420px;
  border-top:1px dashed var(--bg-line); padding-top:22px;
}
.board-stats__item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  border-left:1px dashed var(--bg-line);
}
.board-stats__item:last-child{ border-left:none; }
.board-stats__item dt{
  font-size:11px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; order:2;
}
.board-stats__item dd{
  margin:0; font-family:var(--mono); font-weight:600; font-size:20px; color:var(--white); order:1;
}
.board-stats__live{ display:flex; align-items:center; gap:6px; color:var(--green) !important; }
.pulse-dot{
  width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 rgba(43,201,143,.6);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(43,201,143,.55); }
  70%{ box-shadow:0 0 0 8px rgba(43,201,143,0); }
  100%{ box-shadow:0 0 0 0 rgba(43,201,143,0); }
}

/* ---------------------------------- Destinations grid ---------------------------------- */
.destinations{ max-width:1180px; margin:0 auto; padding:20px 24px 80px; }
.destinations__head{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  margin-bottom:20px;
}
.destinations__head h2{ font-family:var(--display); font-size:24px; margin:0; color:var(--white); }
.sort-group{ display:flex; gap:6px; background:var(--bg-2); border:1px solid var(--bg-line); border-radius:999px; padding:4px; }
.sort-btn{
  border:none; background:none; color:var(--muted); font-size:12.5px; font-weight:600;
  padding:7px 14px; border-radius:999px; transition:background .15s, color .15s;
}
.sort-btn.is-active{ background:var(--amber); color:#231600; }

.grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px;
}
.no-results{ color:var(--muted); text-align:center; padding:40px 0; font-size:15px; }

/* ticket-stub destination card */
.dcard{
  position:relative;
  background:var(--paper); color:var(--ink);
  border-radius:var(--radius-m);
  padding:18px 18px 16px;
  display:flex; flex-direction:column; gap:10px;
  text-align:right;
  border:none;
  box-shadow:var(--shadow-1);
  transition:transform .16s ease, box-shadow .16s ease;
  overflow:hidden;
}
.dcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.dcard::after{
  /* perforation notch, bottom-right, echoing a torn ticket corner */
  content:""; position:absolute; left:-9px; bottom:38px;
  width:18px; height:18px; border-radius:50%; background:var(--bg);
}
.dcard__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dcard__flag{ font-size:30px; line-height:1; }
.dcard__count{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-soft);
  background:var(--paper-2); border:1px solid var(--paper-line);
  padding:3px 8px; border-radius:999px; white-space:nowrap;
}
.dcard__name{ font-family:var(--display); font-weight:700; font-size:18px; margin:0; }
.dcard__divider{
  border-top:1.5px dashed var(--paper-line); margin:2px 0 0;
}
.dcard__meta{
  display:flex; align-items:baseline; justify-content:space-between;
  font-family:var(--mono);
}
.dcard__meta-label{ font-size:10.5px; color:var(--ink-soft); letter-spacing:.04em; }
.dcard__meta-value{ font-size:14px; font-weight:600; color:var(--ink); }
.dcard__cta{
  margin-top:2px; font-size:12.5px; font-weight:700; color:var(--amber-deep);
  display:flex; align-items:center; gap:4px;
}

/* ---------------------------------- Scrims & Drawer ---------------------------------- */
.scrim{
  position:fixed; inset:0; background:rgba(6,10,18,.6); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:50;
}
.scrim.is-open{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; top:0; bottom:0; left:0; width:min(420px, 92vw);
  background:var(--bg-2); z-index:60;
  transform:translateX(-102%); transition:transform .28s cubic-bezier(.2,.8,.25,1);
  overflow-y:auto; padding:20px;
  border-right:1px solid var(--bg-line);
}
.drawer.is-open{ transform:translateX(0); }
.drawer__close{
  background:var(--bg-3); border:1px solid var(--bg-line); color:var(--white);
  width:34px; height:34px; border-radius:50%; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}

/* ---------------------------------- Boarding pass (country detail) ---------------------------------- */
.pass{
  background:var(--paper); color:var(--ink); border-radius:var(--radius-l);
  box-shadow:var(--shadow-paper); overflow:hidden;
}
.pass__head{ padding:22px 22px 16px; position:relative; }
.pass__flag{ font-size:44px; }
.pass__title{ font-family:var(--display); font-weight:800; font-size:26px; margin:10px 0 2px; }
.pass__sub{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase; }

.pass__tear{
  position:relative; height:0; border-top:2px dashed var(--paper-line); margin:6px 0;
}
.pass__tear::before,.pass__tear::after{
  content:""; position:absolute; top:-11px; width:22px; height:22px; border-radius:50%; background:var(--bg-2);
}
.pass__tear::before{ left:-11px; }
.pass__tear::after{ right:-11px; }

.pass__body{ padding:14px 22px 22px; }
.pass__section-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 10px;
}

.pkg-list{ display:flex; flex-direction:column; gap:10px; }
.pkg{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1.5px solid var(--paper-line); border-radius:var(--radius-s);
  padding:12px 14px; background:var(--paper-2); cursor:pointer;
  transition:border-color .15s, background .15s;
}
.pkg:hover{ border-color:var(--amber-deep); }
.pkg.is-selected{ border-color:var(--amber-deep); background:#F4E3B8; }
.pkg__data{ display:flex; align-items:baseline; gap:8px; font-family:var(--mono); }
.pkg__gb{ font-size:19px; font-weight:700; color:var(--ink); }
.pkg__days{ font-size:12.5px; color:var(--ink-soft); }
.pkg__price{ font-family:var(--mono); font-weight:600; font-size:14px; color:var(--ink); white-space:nowrap; }
.pkg__price.is-tbd{ color:var(--ink-soft); font-size:11.5px; font-weight:500; }
.pkg__radio{
  width:18px; height:18px; border-radius:50%; border:2px solid var(--paper-line);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.pkg.is-selected .pkg__radio{ border-color:var(--amber-deep); }
.pkg.is-selected .pkg__radio::after{ content:""; width:9px; height:9px; border-radius:50%; background:var(--amber-deep); }
.pkg__left{ display:flex; align-items:center; gap:12px; }

.pass__actions{ margin-top:18px; display:flex; gap:10px; }

.pass__note{
  margin-top:16px; font-size:12.5px; color:var(--ink-soft); line-height:1.6;
  border-top:1px dashed var(--paper-line); padding-top:14px;
}

/* barcode strip footer for the confirmation boarding pass */
.barcode{
  height:46px; margin-top:18px; border-radius:4px;
  background-image:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 11px, var(--ink) 11px 14px, transparent 14px 17px);
  opacity:.85;
}
.barcode__code{
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-align:center;
  color:var(--ink-soft); margin-top:6px;
}

/* ---------------------------------- Buttons ---------------------------------- */
.btn{
  border:none; border-radius:999px; padding:13px 22px; font-weight:700; font-size:14.5px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .12s ease, filter .12s ease;
}
.btn:active{ transform:scale(.98); }
.btn--primary{ background:var(--amber); color:#241700; }
.btn--primary:hover{ filter:brightness(1.06); }
.btn--primary:disabled{ opacity:.45; cursor:not-allowed; }
.btn--ghost{ background:transparent; border:1.5px solid var(--paper-line); color:var(--ink); }
.btn--dark{ background:var(--ink); color:var(--paper); }
.btn--whatsapp{ background:#25D366; color:#062b16; }
.btn--block{ width:100%; }

/* ---------------------------------- Cart drawer ---------------------------------- */
.drawer--cart{ left:auto; right:0; border-right:none; border-left:1px solid var(--bg-line); transform:translateX(102%); }
.drawer--cart.is-open{ transform:translateX(0); }
.cart-panel h3{ font-family:var(--display); font-size:20px; margin:0 0 16px; color:var(--white); }
.cart-items{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.cart-item{
  background:var(--paper); color:var(--ink); border-radius:var(--radius-s);
  padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.cart-item__info{ display:flex; align-items:center; gap:10px; }
.cart-item__flag{ font-size:22px; }
.cart-item__name{ font-weight:700; font-size:14px; }
.cart-item__meta{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); }
.cart-item__remove{
  background:none; border:none; color:var(--red); font-size:16px; padding:4px 8px;
}
.cart-empty{ color:var(--muted); font-size:14px; text-align:center; padding:30px 10px; }

/* ---------------------------------- Checkout modal ---------------------------------- */
.checkout-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-46%) scale(.98);
  width:min(480px, 92vw); max-height:88vh; overflow-y:auto;
  background:var(--paper); color:var(--ink); border-radius:var(--radius-l);
  box-shadow:var(--shadow-paper); z-index:70; padding:26px;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.checkout-modal.is-open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.checkout-modal .drawer__close{ background:var(--paper-2); border-color:var(--paper-line); color:var(--ink); }

.field{ margin-bottom:14px; display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.field input, .field textarea{
  border:1.5px solid var(--paper-line); background:var(--paper-2); color:var(--ink);
  border-radius:var(--radius-s); padding:11px 12px; font-size:14.5px;
}
.field input:focus, .field textarea:focus{ background:var(--paper); }

.checkout-summary{
  background:var(--paper-2); border:1px dashed var(--paper-line); border-radius:var(--radius-s);
  padding:12px 14px; margin-bottom:16px; font-family:var(--mono); font-size:12.5px; color:var(--ink-soft);
}
.checkout-summary strong{ color:var(--ink); }

.order-code{
  font-family:var(--mono); font-size:22px; font-weight:700; letter-spacing:.08em;
  color:var(--amber-deep); text-align:center; margin:6px 0 2px;
}

/* ---------------------------------- Footer ---------------------------------- */
.site-footer{
  text-align:center; color:var(--muted); font-size:12.5px; padding:20px 24px 46px;
}

/* ---------------------------------- Responsive ---------------------------------- */
@media (max-width:640px){
  .hero{ padding:44px 18px 28px; }
  .board-search{ padding:6px 6px 6px 14px; }
  .board-search__count{ display:none; }
  .destinations{ padding:14px 16px 60px; }
  .grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; }
  .dcard{ padding:14px 14px 12px; }
  .drawer, .drawer--cart{ width:100vw; }
  .checkout-modal{ width:94vw; padding:20px; }
}