/* ============================================================
   NEXT TRIP — Design System
   Palette derived from the logo (bronze on white) and from the
   fleet photography (ink-black cabins, cobalt aisle LEDs, warm
   bronze leather). Cobalt is reserved for interaction only.
   ============================================================ */

:root{
  /* surfaces */
  --ink-900:#0A0C10;
  --ink-850:#0E1116;
  --ink-800:#141821;
  --ink-750:#191E29;
  --ink-700:#212836;

  /* brand */
  --bronze:#B98246;
  --bronze-deep:#8E5F2E;
  --gold:#E3C08A;
  --gold-dim:rgba(227,192,138,.55);

  /* interaction (the aisle light) */
  --cobalt:#4C6FFF;
  --cobalt-soft:rgba(76,111,255,.16);
  --cobalt-line:rgba(76,111,255,.45);

  /* status */
  --ok:#3FBF87;
  --warn:#E0A33E;
  --bad:#E2565A;

  /* text */
  --text:#EFEAE1;
  --text-2:#C3BCB1;
  --muted:#8D93A0;

  --line:rgba(227,192,138,.13);
  --line-strong:rgba(227,192,138,.26);
  --panel:rgba(255,255,255,.028);
  --panel-2:rgba(255,255,255,.05);
  --shadow:0 24px 70px -30px rgba(0,0,0,.85);

  /* type */
  --font-display:"Outfit","Readex Pro",system-ui,sans-serif;
  --font-body:"Readex Pro","Outfit",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* rhythm */
  --pad:clamp(1.15rem,4.2vw,2.75rem);
  --maxw:1220px;
  --r-s:10px;
  --r-m:16px;
  --r-l:24px;
  --sect:clamp(4rem,9vw,7.5rem);
}

[dir="rtl"]{ --font-display:"Readex Pro","Outfit",system-ui,sans-serif; }

[data-theme="light"]{
  --ink-900:#F7F3EC;
  --ink-850:#FFFFFF;
  --ink-800:#FFFFFF;
  --ink-750:#F3EDE3;
  --ink-700:#EBE3D5;
  --text:#1A1712;
  --text-2:#4A443B;
  --muted:#7A7266;
  --gold:#8E5F2E;
  --gold-dim:rgba(142,95,46,.6);
  --line:rgba(26,23,18,.11);
  --line-strong:rgba(142,95,46,.32);
  --panel:rgba(26,23,18,.028);
  --panel-2:rgba(26,23,18,.05);
  --shadow:0 22px 60px -34px rgba(60,45,25,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  background:var(--ink-900);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:300;
  font-size:15.5px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:4px}
::selection{background:var(--bronze);color:#fff}

.skip-link{position:fixed;inset-inline-start:-999px;top:12px;z-index:300;background:var(--bronze);color:#fff;padding:.6rem 1rem;border-radius:8px}
.skip-link:focus{inset-inline-start:12px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:300;margin:0;line-height:1.14;letter-spacing:-.01em}
h1{font-size:clamp(2.25rem,6.2vw,4.3rem)}
h2{font-size:clamp(1.75rem,4vw,2.9rem)}
h3{font-size:clamp(1.12rem,2vw,1.45rem)}
h4{font-size:1rem;font-weight:400}
p{margin:0}

/* The wordmark idiom, taken from the logo: light weight,
   uppercase, wide tracking. Used for eyebrows and labels. */
.eyebrow{
  font-family:var(--font-display);
  font-weight:300;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.42em;
  color:var(--gold);display:flex;align-items:center;gap:.85rem;
}
[dir="rtl"] .eyebrow{letter-spacing:.14em;font-size:.76rem;text-transform:none}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold-dim);flex:none}

.lede{color:var(--text-2);font-size:clamp(.95rem,1.5vw,1.06rem);max-width:62ch;font-weight:300}
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.gold{color:var(--gold)}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---------- layout ---------- */
.wrap{width:min(100% - (var(--pad)*2),var(--maxw));margin-inline:auto}
.section{padding-block:var(--sect);position:relative}
.section-tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section-head{display:flex;flex-direction:column;gap:.9rem;margin-bottom:clamp(2rem,4vw,3.25rem)}
.head-row{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:flex-end;justify-content:space-between}

.grid{display:grid;gap:1.15rem}
@media(min-width:700px){.g-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:720px){.g-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.g-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:620px){.g-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.g-4{grid-template-columns:repeat(4,1fr)}}

/* ---------- buttons ---------- */
.btn{
  --bg:transparent;--fg:var(--text);--bd:var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.78rem 1.35rem;border-radius:100px;border:1px solid var(--bd);
  background:var(--bg);color:var(--fg);cursor:pointer;
  font-family:var(--font-display);font-weight:400;font-size:.9rem;letter-spacing:.02em;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),background .25s,border-color .25s,box-shadow .25s,opacity .2s;
  white-space:nowrap;text-align:center;
}
.btn:hover{transform:translateY(-2px)}

/* Icon baseline. Without this an icon dropped into a container that has no
   rule of its own falls back to the SVG default box (300x150) and to solid
   black — which is what turned the search and WhatsApp glyphs into blobs.
   Anything with its own rule (.icon-btn svg, .social svg, …) still wins on
   specificity. */
.ic{
  width:1.05em;height:1.05em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.ic-solid{fill:currentColor;stroke:none}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.38;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary{--bg:linear-gradient(135deg,var(--bronze),var(--bronze-deep));--fg:#fff;--bd:transparent;box-shadow:0 14px 34px -16px rgba(185,130,70,.75)}
.btn-primary:hover{box-shadow:0 20px 44px -16px rgba(185,130,70,.9)}
.btn-ghost{--bg:var(--panel)}
.btn-ghost:hover{--bg:var(--panel-2)}
.btn-cobalt{--bg:var(--cobalt);--fg:#fff;--bd:transparent;box-shadow:0 14px 34px -16px rgba(76,111,255,.8)}
.btn-sm{padding:.5rem .9rem;font-size:.8rem}
.btn-lg{padding:1rem 1.9rem;font-size:1rem}
.btn-block{width:100%}
.btn-danger{--bd:rgba(226,86,90,.45);--fg:var(--bad)}
.btn-danger:hover{--bg:rgba(226,86,90,.1)}
.btn-row{display:flex;flex-wrap:wrap;gap:.65rem}

/* ---------- cards ---------- */
.card{
  background:linear-gradient(180deg,var(--panel),transparent 60%),var(--ink-850);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  transition:border-color .3s,transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s;
  position:relative;
}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.card-pad{padding:clamp(1.15rem,2.4vw,1.6rem)}

.tag{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.26rem .58rem;border-radius:6px;border:1px solid var(--line-strong);color:var(--gold);
  background:rgba(227,192,138,.06);white-space:nowrap;
}
[dir="rtl"] .tag{letter-spacing:0;font-size:.7rem}
.tag-cobalt{color:var(--cobalt);border-color:var(--cobalt-line);background:var(--cobalt-soft)}
.tag-ok{color:var(--ok);border-color:rgba(63,191,135,.4);background:rgba(63,191,135,.08)}
.tag-warn{color:var(--warn);border-color:rgba(224,163,62,.4);background:rgba(224,163,62,.08)}
.tag-bad{color:var(--bad);border-color:rgba(226,86,90,.4);background:rgba(226,86,90,.08)}
.tag-muted{color:var(--muted);border-color:var(--line);background:var(--panel)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
[dir="rtl"] .label{letter-spacing:0;font-size:.72rem}
.input,.select,.textarea{
  width:100%;background:var(--ink-800);border:1px solid var(--line);
  border-radius:var(--r-s);padding:.72rem .9rem;font-size:.92rem;font-weight:300;
  transition:border-color .2s,box-shadow .2s;
}
.input:hover,.select:hover,.textarea:hover{border-color:var(--line-strong)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-soft)}
.textarea{resize:vertical;min-height:110px}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-end:2.2rem}
[dir="ltr"] .select{background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%}
[dir="rtl"] .select{background-position:18px 52%,13px 52%}
.hint{font-size:.76rem;color:var(--muted)}
.err{font-size:.76rem;color:var(--bad)}
.input.invalid,.select.invalid,.textarea.invalid{border-color:var(--bad)}