/* =============================================================================
   CareMyTrip Quotation Builder — design system
   Brand: white + orange · Font: Poppins
   White-label agents can override --brand / --brand-2 at runtime.
   ========================================================================== */

:root {
  /* Brand (overridable per white-label agent) */
  --brand:      #F5821F;   /* CareMyTrip orange */
  --brand-2:    #FDB913;   /* warm amber */
  --brand-ink:  #E4610A;   /* deep orange for text on light */
  --accent:     #2E3138;   /* slate (cover bar in the PDF) */

  /* Neutrals */
  --bg:         #FFF9F3;   /* warm off-white page */
  --surface:    #FFFFFF;
  --line:       #F0E4D8;
  --ink:        #23262B;
  --muted:      #7A7A82;
  --muted-2:    #A9A6A0;

  --ok:         #1E9E64;
  --warn:       #E0A100;
  --danger:     #D9483B;

  --radius:     16px;
  --radius-sm:  10px;
  --radius-lg:  26px;
  --shadow:     0 1px 2px rgba(31,25,18,.04), 0 8px 24px rgba(228,97,10,.07);
  --shadow-lg:  0 24px 60px -18px rgba(196,86,12,.28);
  --ring:       0 0 0 4px rgba(245,130,31,.16);

  --maxw: 1180px;
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(253,185,19,.16), transparent 60%),
    radial-gradient(900px 480px at -10% 4%, rgba(245,130,31,.10), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, h4 { line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
a { color: var(--brand-ink); text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.center { text-align: center; }
.hidden { display: none !important; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.row { display: flex; gap: 12px; align-items: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.stack { display: grid; gap: 14px; }

/* ---------------------------------------------------------------- brand ---- */
.brandmark { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
/* Logos keep their own aspect ratio — square OR rectangular, never squished. */
.brandmark img, .brandmark svg { height: 40px; width: auto; max-width: 190px; object-fit: contain; display: block; }
.brandmark .dotcom { color: var(--brand); }
.brandmark b { font-weight: 700; }

/* --------------------------------------------------------------- buttons --- */
.btn {
  --_bg: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer;
  color: #fff; background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: 0 8px 20px -8px rgba(228,97,10,.6); transition: transform .16s, box-shadow .16s, filter .16s;
  text-align: center; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(228,97,10,.7); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.ghost { background: var(--surface); color: var(--brand-ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--brand); }
.btn.dark { background: linear-gradient(180deg, #3a3e46, var(--accent)); box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }
.btn.sm { padding: 8px 15px; font-size: .84rem; }

/* ---- touch ergonomics -------------------------------------------------- --
   Gated on `pointer: coarse`, NOT on width: a narrow desktop window is still a
   mouse, and growing every control there would just waste space. On a real
   touch screen the public pages were asking for 33-37px targets — a package
   card alone had three of them side by side — against the ~44px both Apple and
   Google publish as the comfortable minimum. The header stays a little tighter
   at 40px, because three rows of nav at 44px pushes the content off the fold. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn.sm { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .navlink { min-height: 40px; display: inline-flex; align-items: center; }
  .topbar .btn.sm { min-height: 40px; }
  /* The tile's three actions were 87 / 121 / 129 wide — a ragged row that read
     as three unrelated controls. Sharing the row makes them one control group. */
  .pkg-tile .row.wrap > .btn { flex: 1 1 auto; }
  /* Footer contact lines are the one place a phone number is meant to be TAPPED,
     and they were 22px of inline text. Block them out so the whole line is the
     target, without disturbing the surrounding copy. */
  footer a[href^="mailto:"], footer a[href^="tel:"], footer a[href*="wa.me"] {
    display: inline-flex; align-items: center; min-height: 40px;
  }
}

/* One hero decision, one button width. The two calls to action measured 245 and
   213, which on a phone reads as a mistake rather than a hierarchy. */
@media (max-width: 560px) {
  .hero .row.wrap > .btn { width: 100%; }
}
.btn.lg { padding: 15px 30px; font-size: 1.02rem; }
.btn.block { width: 100%; }
.btn-link { background: none; border: 0; color: var(--brand-ink); font: inherit; font-weight: 600; cursor: pointer; padding: 6px; }

/* ---------------------------------------------------------------- cards ---- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px;
}
.card.pad-lg { padding: 30px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; background: #FFF1E3; color: var(--brand-ink);
  border: 1px solid #FCE0C6; letter-spacing: .01em;
}
.chip.slate { background: #EEF0F3; color: var(--accent); border-color: #E1E4E9; }
.chip.ok { background: #E6F6EE; color: var(--ok); border-color: #CDEBDC; }

.badge-status { text-transform: capitalize; font-weight: 600; font-size: .74rem; padding: 4px 11px; border-radius: 999px; }
.badge-status.draft { background: #F1F0EE; color: #6b6b6b; }
.badge-status.sent { background: #FFF1E3; color: var(--brand-ink); }
.badge-status.pending { background: #FFF3E0; color: #B4690E; }
.badge-status.confirmed { background: #E6F6EE; color: var(--ok); }
.badge-status.converted { background: #E6F6EE; color: #127a4a; }
.badge-status.cancelled { background: #FBE7E4; color: var(--danger); }
/* inline status dropdown in tables */
select.statusSel { width: auto; padding: 6px 10px; font-size: .82rem; font-weight: 600; border-radius: 999px; }

/* --------------------------------------------------------------- inputs ---- */
label.field { display: block; }
.field > span { display: block; font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field > span .req { color: var(--brand); }
input, select, textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--brand); box-shadow: var(--ring); }
input[readonly] { background: #F8F9FB; color: var(--muted); cursor: default; }
textarea { resize: vertical; min-height: 92px; }

/* The browser default placeholder is far too faint on the warm page — hints
   like "Uttarakhand" or "Pick or type your own" were effectively invisible.
   Dark enough to read, still clearly lighter than a real value. */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

/* A <input list="..."> is a dropdown, but it renders as a plain text box, so on
   a form that also has real <select>s only the selects looked openable. Give it
   the same chevron, and space on the right so the text never runs under it.
   Clicking it opens the list (ui.js) rather than only typing into it. */
input[list] {
  padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237A7A82' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
input[list].mini { padding-right: 30px; background-position: right 10px center; }
input[list]::-webkit-calendar-picker-indicator { opacity: 0; }   /* ours replaces it */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* Grid items are min-width:auto by default, so a wide child (a data table, a
   long select) stretches its column past the screen instead of scrolling inside
   its own wrapper. Every column here is meant to fit the grid, not the reverse. */
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
/* Header rows (title + actions) and button rows must wrap on phones — unwrapped
   they stretch the page and everything to the right falls off the screen. */
@media (max-width: 720px) { .spread, .row { flex-wrap: wrap; gap: 8px; } }

/* ----------------------------------------------------- package live editor - */
.pkg-live-panel {
  background: #FFF9F3;
  border-color: #FBD9AE;
  padding: 14px;
  margin-bottom: 14px;
}
.pkg-live-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}
.pkg-live-head b { display: block; color: var(--ink); }
.pkg-live-head span { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.pkg-live-stats {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  min-width: 210px;
}
.pkg-live-stats span,
.pkg-live-stats b {
  border: 1px solid #F0E2CE;
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .82rem;
  white-space: nowrap;
}
.pkg-live-stats b { color: var(--brand-ink); }
.pkg-control-grid {
  display: grid;
  grid-template-columns: 88px 150px 150px 170px minmax(140px, 1fr) minmax(180px, 230px);
  gap: 10px;
  align-items: end;
}
.pkg-control-grid .field > span,
.pkg-route-row label > span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.pkg-control-grid input,
.pkg-control-grid select { padding: 9px 10px; font-size: .9rem; }
.pkg-actions-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.pkg-route-editor {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #FBD9AE;
}
.pkg-route-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.pkg-route-summary > div {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.pkg-route-summary b { color: var(--ink); }
.pkg-route-summary span {
  color: var(--muted);
  background: #fff;
  border: 1px solid #F0E2CE;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: .78rem;
}
.pkg-route-list { display: grid; gap: 8px; }
.pkg-route-row {
  display: grid;
  grid-template-columns: 30px minmax(170px, 1fr) 132px auto;
  gap: 8px;
  align-items: end;
  background: #fff;
  border: 1px solid #F0E2CE;
  border-radius: 10px;
  padding: 8px;
}
.pkg-route-index {
  width: 26px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #FFF1E3;
  color: var(--brand-ink);
  font-weight: 700;
}
.pkg-route-row input { padding: 8px 9px; font-size: .88rem; }
.pkg-stepper {
  display: grid;
  grid-template-columns: 34px 58px 34px;
  gap: 4px;
}
.pkg-stepper button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--brand-ink);
  cursor: pointer;
}
.pkg-stepper input { text-align: center; }
.pkg-route-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.btn.danger,
.btn.ghost.danger { color: var(--danger); }
/* Editable rate chart (package live editor) — trim which group-size rows show */
.pkg-rate-editor { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #FBD9AE; }
/* The package page runs ~8 screens. This bar sticks under the site nav so the
   price, the way back and the download buttons never scroll out of reach. */
.doc-toolbar {
  position: sticky; top: 67px; z-index: 30;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 14px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.doc-toolbar-title {
  flex: 1; min-width: 0; font-weight: 600; font-size: .92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-toolbar-price {
  font-weight: 700; color: var(--brand-ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .doc-toolbar { top: 0; }
  .doc-toolbar-title { flex-basis: 100%; flex-grow: 0; }
}

/* Summary of the folded rate chart — a whole 20-row table's worth of scroll. */
.pkg-rate-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
/* Which version of an agent's own document is on screen, and the way back. */
.pkg-mine-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 auto 12px; max-width: 900px;
  padding: 10px 14px; border-radius: var(--radius);
  background: #FFF9F3; border: 1px solid #FBD9AE;
  font-size: .88rem; color: #7a4a12;
}
.pkg-mine-bar span { flex: 1; min-width: 220px; }

.pkg-rate-tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px dashed #F0E2CE; margin-bottom: 10px;
}
.pkg-rate-tools select { width: auto; min-width: 92px; }
.pkg-rate-sep { width: 1px; height: 20px; background: #F0E2CE; }
.pkg-tier-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: .82rem; padding: 4px 9px; border: 1px solid var(--line);
  border-radius: 20px; background: var(--surface);
}
.pkg-tier-chip input { width: auto; margin: 0; }
.pkg-tier-chip.is-off { opacity: .55; text-decoration: line-through; }
.pkg-rate-cell input {
  width: 100%; min-width: 92px; border: 1px solid transparent; background: transparent;
  padding: 4px 6px; border-radius: 6px; font-size: .85rem; text-align: right;
  font-variant-numeric: tabular-nums;
}
.pkg-rate-cell input:hover { border-color: var(--line); }
.pkg-rate-cell input:focus { border-color: var(--brand); background: #fff; outline: none; }
.pkg-rate-cell.is-edited input { border-color: var(--brand); background: #FFF7ED; font-weight: 600; }
details.pkg-rate-editor > summary.pkg-rate-head { cursor: pointer; list-style: revert; }
details.pkg-rate-editor > summary.pkg-rate-head::-webkit-details-marker { display: revert; }
.pkg-rate-scroll { overflow-x: auto; border: 1px solid #F0E2CE; border-radius: 10px; }
.pkg-rate-table { width: 100%; border-collapse: collapse; font-size: .85rem; background: #fff; }
.pkg-rate-table th,
.pkg-rate-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid #F5EADB; white-space: nowrap; }
.pkg-rate-table th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); background: #FFF8EF;
}
.pkg-rate-table tr:last-child td { border-bottom: 0; }
.pkg-rate-del { width: 40px; }
.pkg-rate-del button {
  border: 1px solid var(--line); background: #fff; color: var(--danger);
  border-radius: 7px; width: 28px; height: 28px; cursor: pointer; line-height: 1;
}
.pkg-rate-del button:hover { background: #FFF1F0; }
/* Trimmed-row styling — shared by the package editor (.pkg-rate-table) and the
   Cost Calculator chart (.data table). */
tr.row-off { opacity: .45; }
tr.row-off .pkg-rate-del button { color: var(--brand-ink); }
tr.row-off td:not(.pkg-rate-del) { text-decoration: line-through; }
@media (max-width: 920px) {
  .pkg-live-head,
  .pkg-route-summary { grid-template-columns: 1fr; }
  .pkg-live-stats { justify-content: flex-start; }
  .pkg-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pkg-route-row { grid-template-columns: 30px minmax(0, 1fr); }
  .pkg-route-row .pkg-nights-field { grid-column: 2; }
  .pkg-route-row > button { grid-column: 2; justify-self: start; }
}
@media (max-width: 640px) {
  .pkg-control-grid { grid-template-columns: 1fr; }
  .pkg-route-row { grid-template-columns: 1fr; }
  .pkg-route-index { width: 100%; }
  .pkg-route-row .pkg-nights-field,
  .pkg-route-row > button { grid-column: auto; }
}

/* ------------------------------------------------------------- top nav ----- */
.topbar {
  position: sticky; top: 0; z-index: 40; backdrop-filter: blur(10px);
  background: rgba(255,255,255,.82); border-bottom: 1px solid var(--line);
}
.topbar .inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.topbar nav { display: flex; align-items: center; gap: 6px; }
.navlink { padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--muted); }
.navlink:hover { color: var(--ink); background: #FFF3E8; }
.navlink.active { color: var(--brand-ink); background: #FFF1E3; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  color: #fff; background: linear-gradient(180deg, var(--brand-2), var(--brand)); }
@media (max-width: 640px) {
  .topbar .inner { height: auto; min-height: 64px; align-items: flex-start; flex-wrap: wrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .topbar .inner > .row { width: 100%; flex-wrap: wrap; gap: 7px; }
  .topbar #stepChip { display: none; }
  .topbar .brandmark { font-size: .92rem; gap: 8px; }
  .topbar .brandmark img, .topbar .brandmark svg { height: 32px; max-width: 145px; }
  .topbar .btn.sm { padding: 7px 10px; font-size: .76rem; }
}
/* The nav links outgrow the bar well before phone width (every admin page adds
   one), so wrap them early — an unwrapped bar stretches the page and gives every
   screen a sideways scroll. */
@media (max-width: 900px) {
  .topbar .inner { flex-wrap: wrap; }
  /* flex-start, not flex-end: once these wrap onto two or three rows, aligning
     each row to the right leaves a ragged staircase. Left-aligned they read as
     one tidy block, and unwrapped rows look identical either way because
     `.inner` is space-between and pushes the nav right regardless. */
  .topbar nav { flex-wrap: wrap; justify-content: flex-start; gap: 4px; row-gap: 6px; max-width: 100%; flex: 1 1 auto; }
  .navlink { padding: 7px 10px; font-size: .8rem; }
}

/* ------------------------------------------------------------ toast/loader- */
.toast-wrap { position: fixed; top: 18px; right: 18px; z-index: 400; display: grid; gap: 10px; }
.toast {
  background: var(--accent); color: #fff; padding: 13px 18px; border-radius: 12px; font-weight: 500;
  box-shadow: var(--shadow-lg); animation: slideIn .3s ease; max-width: 340px; font-size: .9rem;
}
.toast.ok { background: #12805a; } .toast.err { background: #c23b2f; }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

.overlay {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: radial-gradient(700px 500px at 50% 30%, rgba(255,246,236,.96), rgba(255,240,226,.99));
  backdrop-filter: blur(4px);
}
.loader-mark { width: 84px; height: 84px; animation: spin 1.5s cubic-bezier(.6,.1,.3,.9) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text { margin-top: 20px; font-weight: 600; color: var(--brand-ink); letter-spacing: .02em; }
.loader-sub { color: var(--muted); font-size: .86rem; margin-top: 4px; }
.dots::after { content: ''; animation: dots 1.4s steps(4,end) infinite; }
@keyframes dots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }

/* fade-in-up utility for staggered reveals */
.rise { animation: rise .5s both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =============================================================================
   LANDING + AUTH
   ========================================================================== */
.hero { position: relative; overflow: hidden; padding: 60px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.03em; }
.hero h1 .accent { color: var(--brand); }
.hero p.lede { font-size: 1.1rem; color: var(--muted); max-width: 30ch; margin: 18px 0 26px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .8rem;
  color: var(--brand-ink); background: #FFF1E3; border: 1px solid #FCE0C6; padding: 6px 14px; border-radius: 999px; }

.feature-row { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.feature { display: flex; gap: 11px; align-items: flex-start; max-width: 220px; }
.feature .ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: #FFF1E3; color: var(--brand-ink); font-size: 1rem; }
.feature b { display: block; font-size: .9rem; } .feature span { font-size: .8rem; color: var(--muted); }

/* auth card */
.auth-card { max-width: 430px; width: 100%; }
.auth-card .tabs { display: flex; background: #FBF1E7; border-radius: 999px; padding: 5px; margin-bottom: 22px; }
.auth-card .tabs button { flex: 1; border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted);
  padding: 9px; border-radius: 999px; cursor: pointer; transition: .18s; }
.auth-card .tabs button.active { background: #fff; color: var(--brand-ink); box-shadow: var(--shadow); }

/* Himalayan silhouette footer flourish */
.range { height: 120px; margin-top: 40px; background:
  linear-gradient(180deg, transparent, rgba(245,130,31,.05)),
  conic-gradient(from 210deg at 20% 100%, transparent 0 40deg, rgba(46,49,56,.08) 40deg 60deg, transparent 60deg);
  position: relative; }

/* =============================================================================
   WIZARD
   ========================================================================== */
.wizard { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; padding: 26px 0 60px; }
@media (max-width: 860px) { .wizard { grid-template-columns: 1fr; } .rail { position: static !important; } }
.wizard.quick-wizard { grid-template-columns: 1fr; max-width: 1180px; }
.quick-wizard .rail { display: none; }
.quick-wizard > section { width: 100%; }

.rail { position: sticky; top: 84px; }
.rail ol { list-style: none; display: grid; gap: 4px; }
.rail li { display: flex; gap: 13px; align-items: center; padding: 11px 12px; border-radius: 12px; color: var(--muted);
  font-weight: 600; font-size: .9rem; cursor: default; transition: .2s; }
.rail li .num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; background: #F1EAE1; color: var(--muted-2); transition: .2s; }
.rail li.done { color: var(--ink); }
.rail li.done .num { background: var(--ok); color: #fff; }
.rail li.current { color: var(--brand-ink); background: #FFF3E8; }
.rail li.current .num { background: linear-gradient(180deg,var(--brand-2),var(--brand)); color: #fff; box-shadow: var(--ring); }
.rail li.locked { cursor: not-allowed !important; opacity: .62; }

.draft-bg { position: fixed; inset: 0; z-index: 70; background: rgba(35,38,43,.34); backdrop-filter: blur(3px); }
.draft-modal {
  position: fixed; z-index: 71; top: 92px; left: 50%; transform: translateX(-50%);
  width: min(460px, calc(100vw - 28px)); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 20px;
}
.draft-modal h2 { font-size: 1.18rem; }

.step { min-height: 60vh; }
.step-head { margin-bottom: 20px; }
.step-head .kicker { color: var(--brand); font-weight: 600; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.step-head h2 { font-size: 1.7rem; margin-top: 4px; }
.step-head p { color: var(--muted); margin-top: 6px; max-width: 60ch; }

.wizard-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px;
  padding-top: 22px; border-top: 1px solid var(--line); }

.quick-head h2 { font-size: 1.9rem; }
.quick-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.quick-main { display: grid; gap: 16px; min-width: 0; }
.quick-section { border-radius: 14px; }
.quick-section-title { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; color: var(--brand-ink); }
.quick-section-title i { color: var(--brand); }
.quick-section-locked {
  background: linear-gradient(180deg,#fff,#F8FAFC);
  border-style: dashed;
  opacity: .82;
}
/* A button now, not a label: it names the empty field and jumps to it. */
.locked-note {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #F1F5F9;
  color: var(--muted);
  font-size: .92rem;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.locked-note[onclick]:hover,
.locked-note[onclick]:focus-visible { border-color: var(--brand); color: var(--text); }
.locked-note:not([onclick]) { cursor: default; }
.locked-note span { flex: 1; }
.locked-note i { color: #94A3B8; }
.locked-note[onclick]:hover i, .locked-note[onclick]:focus-visible i { color: var(--brand); }

/* Country -> State -> Trip type narrowing row above the package dropdown. */
.pkg-filter { padding: 12px; border: 1px dashed var(--line); border-radius: 12px; background: var(--bg); }
.pkg-filter .field span { font-size: 12px; }
.meal-picker { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.checkline {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 8px 12px; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.checkline input { width: auto; accent-color: var(--brand); }
.meal-summary, .meal-status { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.meal-chip {
  display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap;
}
.meal-chip.included { color: #13734B; background: #E6F6EE; border-color: #CDEBDC; }
.meal-chip.excluded { color: #8A4A00; background: #FFF4E0; border-color: #F2D1AA; }
.slim-table { box-shadow: none; border-radius: 10px; }
.slim-table table.data th { font-size: .68rem; padding: 10px; }
.slim-table table.data td { font-size: .84rem; padding: 11px 10px; vertical-align: top; }
.hotel-stays-table th:nth-child(1), .hotel-stays-table td:nth-child(1) { min-width: 190px; }
.hotel-stays-table th:nth-child(6), .hotel-stays-table td:nth-child(6) { min-width: 190px; }
.itinerary-table th:nth-child(3), .itinerary-table td:nth-child(3) { min-width: 260px; }
.hotel-calc {
  margin-top: 12px; padding: 14px; border: 1px solid var(--line);
  border-radius: 12px; background: #F8FAFC;
}
.hotel-calc-title {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  padding-bottom: 10px; border-bottom: 1px dashed var(--line);
}
.hotel-calc-title i { color: var(--brand-ink); margin-right: 6px; }
.hotel-calc-title strong { font-size: 1.08rem; color: var(--brand-ink); white-space: nowrap; }
.hotel-calc-grid { display: grid; gap: 10px; margin-top: 10px; }
.hotel-calc-card {
  padding: 11px; border: 1px solid #E5E7EB; border-radius: 10px; background: #fff;
}
.hotel-calc-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  margin-bottom: 8px;
}
.hotel-calc-head strong { color: var(--brand-ink); white-space: nowrap; }
.hotel-calc-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
  padding: 6px 0; border-top: 1px dashed #EDF0F3; font-size: .82rem;
}
.hotel-calc-line span { min-width: 0; }
.hotel-calc-line small { display: block; color: var(--muted); margin-top: 1px; }
.hotel-calc-line.muted-line b { color: var(--muted); font-weight: 600; }
.hotel-calc-total {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.hotel-calc-total span {
  display: inline-flex; gap: 6px; align-items: center;
  padding: 6px 10px; border: 1px solid #E5E7EB; border-radius: 999px;
  background: #fff; font-size: .8rem;
}
.hotel-calc-total .grand { color: #fff; background: var(--accent); border-color: var(--accent); }
.rate-sheet {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.rate-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.rate-sheet-head b { display: block; color: var(--ink); }
.rate-sheet-head span { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.rate-sheet-head strong { color: var(--brand-ink); white-space: nowrap; }
.rate-inputs input { padding: 9px 10px; font-size: .88rem; }
.rate-sheet-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.rate-sheet-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  gap: 10px;
  align-items: center;
  border: 1px solid #E5E7EB;
  background: #fff;
  border-radius: 8px;
  padding: 8px 9px;
}
.rate-sheet-row span {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  margin-top: 1px;
}
.rate-sheet-row strong { color: var(--ink); white-space: nowrap; }
.rate-sheet-row.is-hidden {
  background: #F8FAFC;
  opacity: .72;
}
.rate-sheet-row.is-hidden b,
.rate-sheet-row.is-hidden strong { color: var(--muted); }
@media (max-width: 680px) {
  .hotel-calc-title, .hotel-calc-head { display: grid; }
  .hotel-calc-line { grid-template-columns: 1fr; gap: 2px; }
  .hotel-calc-total { justify-content: flex-start; }
  .rate-sheet-head { display: grid; }
  .rate-sheet-row { grid-template-columns: minmax(0, 1fr) auto 34px; gap: 8px; }
}
.day-viewer {
  margin-top: 12px; padding: 12px; border: 1px solid var(--line);
  border-radius: 12px; background: #F8FAFC;
}
.day-detail {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: .9rem;
}
.day-detail p { margin-top: 4px; color: var(--muted); }
.route-ok, .route-errors {
  border-radius: 12px; padding: 11px 13px; font-size: .86rem; margin-bottom: 12px;
}
.route-ok { background: #E6F6EE; border: 1px solid #CDEBDC; color: #13734B; }
.route-errors { background: #FFF4E0; border: 1px solid #F2D1AA; color: #8A4A00; }
.route-errors ul { margin: 6px 0 0 18px; }
.quick-summary { position: sticky; top: 84px; }
.quick-summary-card { background: linear-gradient(160deg,var(--accent),#42474f); color: #fff; border-radius: 14px; padding: 20px; box-shadow: var(--shadow); }
.quick-total { font-size: 2.25rem; font-weight: 800; margin: 4px 0; }
.quick-price-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: .9rem; }
.quick-price-line span { opacity: .78; }
.quick-price-line b { text-align: right; }
.quick-cost-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); opacity: .78; font-size: .82rem; }
.quick-hotel-list { padding: 4px 2px 0; }
.quick-stay-row { display: grid; grid-template-columns: 1.1fr .7fr 1.2fr 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9rem; align-items: start; }
.quick-stay-row span { color: var(--muted); }
.quick-stay-edit-list, .quick-day-edit-list { display: grid; gap: 10px; }
.quick-stay-edit-row, .quick-day-edit-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}
.quick-day-edit-row.is-auto { background: #FFFDF8; border-style: dashed; }
/* The day the route error is about, marked where the agent is typing. */
.quick-day-edit-row.is-offroute { border-color: var(--danger); background: #FFF7F6; }
.quick-day-edit-row.is-offroute input[data-f="stay"] { border-color: var(--danger); }
.quick-edit-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.quick-edit-head .idx {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 8px;
  background: #FFF1E3;
  color: var(--brand-ink);
  font-weight: 700;
  font-size: .82rem;
}
.quick-edit-head b { min-width: 0; overflow-wrap: anywhere; }
.quick-stay-edit-grid {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) 86px minmax(190px, 1.4fr) minmax(140px, .9fr);
  gap: 10px;
  align-items: end;
}
.quick-stay-edit-grid .meal { grid-column: 1 / -1; }
.quick-day-edit-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(170px, 1fr) minmax(150px, .85fr) 110px minmax(120px, .8fr);
  gap: 10px;
  align-items: end;
}
.quick-day-edit-grid .desc { grid-column: 1 / -1; }
.quick-day-edit-grid .desc textarea { min-height: 62px; }
.quick-itinerary-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.quick-table-label {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 14px 0 8px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
}
@media (max-width: 980px) {
  .quick-layout { grid-template-columns: 1fr; }
  .quick-summary { position: static; }
}
@media (max-width: 720px) {
  .quick-stay-row { grid-template-columns: 1fr; gap: 3px; }
  .quick-stay-edit-grid, .quick-day-edit-grid { grid-template-columns: 1fr; }
  .quick-total { font-size: 1.9rem; }
  .quick-edit-head { flex-wrap: wrap; }
}

/* selectable option cards */
.opt-grid { display: grid; gap: 14px; }
.opt-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.opt-grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.opt-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 760px) { .opt-grid.cols-2, .opt-grid.cols-3, .opt-grid.cols-4 { grid-template-columns: 1fr; } }

.opt {
  position: relative; text-align: left; background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--radius); padding: 18px; cursor: pointer; transition: .18s; font: inherit; color: inherit;
}
.opt:hover { border-color: #F6C79A; transform: translateY(-2px); box-shadow: var(--shadow); }
.opt.selected { border-color: var(--brand); background: #FFFaf4; box-shadow: var(--ring); }
.opt.selected::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 12px; right: 12px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .8rem; }
.opt h4 { font-size: 1.05rem; }
.opt .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* package card */
.pkg-card .thumb { height: 132px; border-radius: 12px; margin: -18px -18px 14px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--accent), #4b5059); }
.pkg-card .thumb .glow { position: absolute; inset: 0; background:
  radial-gradient(120px 90px at 78% 20%, rgba(253,185,19,.6), transparent 70%),
  radial-gradient(160px 120px at 20% 90%, rgba(245,130,31,.45), transparent 70%); }
.pkg-card .thumb .dur { position: absolute; bottom: 10px; left: 12px; color: #fff; font-weight: 700; font-size: .82rem;
  background: rgba(0,0,0,.28); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); }
.pkg-card .price { font-weight: 700; color: var(--brand-ink); }

/* category cards (hotel tiers) */
.tier { display: grid; gap: 6px; }
.tier .stars { color: var(--brand-2); letter-spacing: 2px; }

/* hotel plan list in wizard summary */
.hotel-line { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px dashed var(--line); }
.hotel-line:last-child { border-bottom: 0; }
.night-pill { background: #FFF1E3; color: var(--brand-ink); font-weight: 700; font-size: .78rem; padding: 6px; border-radius: 8px; text-align: center; }
.thumb-mini { width: 100%; height: 100%; border-radius: 10px; background: linear-gradient(135deg,#e9d9c6,#f6ead9); display:grid; place-items:center; color: var(--brand-ink); font-weight:700; }

/* live preview panel */
.preview { position: sticky; top: 84px; }
.preview .doc { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; }
.preview .doc .cover { padding: 20px; color: #fff; background: linear-gradient(135deg, var(--accent), #444952); position: relative; }
.preview .doc .cover .swirl { position:absolute; inset:0; background: radial-gradient(150px 120px at 85% 10%, rgba(253,185,19,.5), transparent 65%); }
.preview .doc .body { padding: 18px; }

/* =============================================================================
   DASHBOARD / TABLES
   ========================================================================== */
/* Vertical only. `.page` is always used together with `.container`, and the
   shorthand `padding: 30px 0 60px` here — later in the file, same specificity —
   was quietly cancelling that container's `0 22px`. Every screen's text then sat
   flush against both edges of a phone, headings clipped at x=0. */
.page { padding-top: 30px; padding-bottom: 60px; }
/* 22px of each side is a lot of a 360px screen; give the content room to breathe. */
@media (max-width: 560px) { .container { padding-left: 16px; padding-right: 16px; } }
/* minmax(0,1fr), not 1fr: a bare 1fr floors at the content's min-content width,
   so a card with a long label refused to shrink and pushed the row past the
   viewport — which scrolls the whole page sideways and clips everything else. */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px){ .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px){ .stat-grid { grid-template-columns: minmax(0, 1fr); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.stat .n { font-size: 2rem; font-weight: 700; color: var(--brand-ink); letter-spacing: -.03em; }
.stat .l { color: var(--muted); font-size: .85rem; font-weight: 500; }
/* Tiles that answer "who do I ring first" are buttons that filter the list. */
.stat-action { text-align: left; font: inherit; cursor: pointer; width: 100%; }
.stat-action:hover, .stat-action:focus-visible { border-color: var(--brand); }
.stat-action.is-on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.stat-action.is-urgent .n { color: var(--danger); }

table.data { width: 100%; border-collapse: collapse; }
table.data th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  padding: 12px 14px; border-bottom: 2px solid var(--line); }
table.data td { padding: 14px; border-bottom: 1px solid var(--line); font-size: .92rem; vertical-align: middle; }
table.data tr:hover td { background: #FFFaf4; }
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }

.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty .big { font-size: 2.4rem; margin-bottom: 8px; }

/* Edit surface (branding / hotels / vehicles / …): a centred modal. The class is
   still .drawer because every page builds one, but it opens in the middle of the
   screen rather than sliding in from the edge. The inline max-width each caller
   sets (480–900px) still controls how wide its modal is. */
.drawer-bg { position: fixed; inset: 0; background: rgba(30,22,14,.5); z-index: 260; animation: slideIn .2s;
  backdrop-filter: blur(2px); }
/* Centred with inset+margin:auto rather than a translate, so the open animation
   never has to hand `transform` back — animating it left the box stuck off-centre. */
.drawer { position: fixed; inset: 0; margin: auto;
  /* width from the viewport, capped by max-width — so a caller setting
     style="max-width:900px" (the calculator's rate grids) gets a wider modal. */
  width: 94vw; max-width: 560px; height: max-content; max-height: 88vh;
  background: var(--surface); border-radius: var(--radius);
  z-index: 261; box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); padding: 26px; overflow-y: auto;
  animation: modalIn .18s ease-out; }
@keyframes modalIn { from { opacity: 0 } to { opacity: 1 } }
/* The title + Close stay put while the body scrolls. */
.drawer > .spread:first-of-type { position: sticky; top: -26px; z-index: 3; background: var(--surface);
  margin: -26px -26px 0; padding: 20px 26px 14px; border-bottom: 1px solid var(--line); }
/* Phones: the modal goes full-screen — a centred box with margins wastes the
   little space there is, and long forms need every pixel. */
@media (max-width: 720px) {
  /* Pin to all four edges rather than sizing by percentage — a fixed element's
     percentage resolves against the initial containing block, which overflows on
     zoomed mobile viewports and gives the whole page a sideways scroll. */
  .drawer { inset: 0; margin: 0; width: auto; max-width: none !important;
    height: 100dvh; max-height: none; border-radius: 0; padding: 0 14px 22px; }
  .drawer > .spread:first-of-type { top: 0; margin: 0 -14px; padding: 14px; }
  .drawer > .spread:first-of-type h2 { font-size: 1.05rem; }
  /* Controls sized by their content (long option labels, inline width:auto)
     must never push the page wider than the screen — that sideways scroll is
     what pushed half the drawer off-screen on phones. */
  input, select, textarea, .btn { max-width: 100%; }
}

/* tabs (admin) */
.tabbar { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.tabbar button { border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted); padding: 11px 16px;
  cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabbar button.active { color: var(--brand-ink); border-bottom-color: var(--brand); }
.swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.1); display:inline-block; vertical-align:middle; }

/* =============================================================================
   INLINE EDITORS (wizard: editable stays / itinerary / vehicles / pricing)
   ========================================================================== */
.edit-row { background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.edit-row .rowtop { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.edit-row .rowtop .idx { width: 26px; height: 26px; border-radius: 8px; background: #FFF1E3; color: var(--brand-ink); font-weight: 700; display: grid; place-items: center; font-size: .8rem; flex: none; }
.edit-row .rowtop .grow { font-weight: 600; }
.icon-btn { background: var(--surface); border: 1.5px solid var(--line); color: var(--muted); width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: .85rem; transition: .15s; }
.icon-btn:hover { border-color: var(--brand); color: var(--brand-ink); }
.icon-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
input.mini, select.mini, textarea.mini { padding: 8px 10px; font-size: .88rem; border-radius: 8px; }
.field-mini > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; display: block; }
.grid-nights { display: grid; grid-template-columns: 2fr 90px 2fr 1.4fr; gap: 10px; }
.grid-day { display: grid; grid-template-columns: 90px 1fr 130px; gap: 10px; }
@media (max-width: 760px){ .grid-nights, .grid-day { grid-template-columns: 1fr; } }
.addbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0 6px; }
.stay-rate { margin-top: 10px; padding: 8px 10px; border-radius: 9px; background: #F8FAFC; color: var(--muted); font-size: .78rem; }
.stay-rate i { color: var(--brand-ink); margin-right: 6px; }

/* pricing breakdown */
.breakdown { display: grid; gap: 8px; }
.breakdown .li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.breakdown .li.tot { border-bottom: 0; border-top: 2px solid var(--line); font-weight: 700; font-size: 1.15rem; padding-top: 12px; }
.margin-note { background: #E6F6EE; border: 1px solid #CDEBDC; color: #12805a; border-radius: 10px; padding: 10px 14px; font-size: .84rem; margin-top: 12px; }
.veh-cap { font-size: .78rem; color: var(--muted); }
.hotel-price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .85rem; }
.hotel-price-row:last-child { border-bottom: 0; }
@media (max-width: 680px){ .hotel-price-row { grid-template-columns: 1fr; } .hotel-price-row > div:last-child { text-align: left !important; } }

/* upload button */
.uploader { display: inline-flex; align-items: center; gap: 8px; }
.thumb-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.thumb-row .t { position: relative; width: 72px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #f6ead9; }
.thumb-row .t img { width: 100%; height: 100%; object-fit: cover; }
.thumb-row .t button { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.55); color: #fff; border: 0; border-radius: 6px; width: 20px; height: 20px; cursor: pointer; font-size: .7rem; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 14px; }
.media-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.media-card .ph { height: 110px; background: #f6ead9; display: grid; place-items: center; color: var(--brand-ink); }
.media-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.media-card .mc-body { padding: 8px 10px; }

/* =============================================================================
   B2C STOREFRONT (public, customer-facing)
   ========================================================================== */
.b2c-hero { position: relative; overflow: hidden; border-radius: 0 0 28px 28px;
  background: linear-gradient(135deg, var(--accent), #454b54); color: #fff; padding: 54px 0 60px; }
.b2c-hero::after { content: ''; position: absolute; inset: 0; background:
  radial-gradient(420px 260px at 85% 0%, rgba(253,185,19,.35), transparent 60%),
  radial-gradient(460px 300px at 8% 100%, rgba(245,130,31,.30), transparent 60%); }
.b2c-hero .inner { position: relative; z-index: 1; }
.b2c-hero h1 { font-size: clamp(2rem, 5vw, 3.3rem); letter-spacing: -.03em; max-width: 18ch; }
.b2c-hero p { color: rgba(255,255,255,.85); max-width: 46ch; margin-top: 12px; font-size: 1.05rem; }

.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px){ .pkg-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .pkg-grid { grid-template-columns: 1fr; } }
.pkg-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; display: flex; flex-direction: column; }
.pkg-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pkg-tile .ph { height: 190px; position: relative; background: linear-gradient(135deg,var(--accent),#4b5059); }
.pkg-tile .ph img { width: 100%; height: 100%; object-fit: cover; }
.pkg-tile .ph .cat { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.92); color: var(--brand-ink);
  font-weight: 700; font-size: .72rem; padding: 5px 11px; border-radius: 999px; }
.pkg-tile .ph .dur { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,.35); color: #fff;
  font-weight: 600; font-size: .76rem; padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); }
.pkg-tile .bd { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pkg-tile h3 { font-size: 1.18rem; }
.pkg-tile .pp { margin-top: auto; }
.pkg-tile .pp b { color: var(--brand-ink); font-size: 1.25rem; }
.pkg-tile .pp span { color: var(--muted); font-size: .82rem; }

.b2c-detail-hero { border-radius: 22px; overflow: hidden; position: relative; min-height: 360px;
  background: linear-gradient(135deg,var(--accent),#454b54); color: #fff; display: flex; align-items: flex-end; padding: 30px; }
.b2c-detail-hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.b2c-detail-hero .scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.65), transparent 60%); }
.b2c-detail-hero .in { position: relative; z-index: 1; }
.b2c-price-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px;
  box-shadow: var(--shadow); position: sticky; top: 84px; }
.b2c-price-card .big { font-size: 2.1rem; font-weight: 800; color: var(--brand-ink); letter-spacing: -.02em; }
.wa { background: #25D366 !important; }
.b2c-foot { background: var(--accent); color: #fff; padding: 34px 0; margin-top: 50px; }
.b2c-foot a { color: #fff; opacity: .85; }
.b2c-partners { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.b2c-partners span { font-size: .78rem; opacity: .7; }
@media (max-width: 820px){ .b2c-cols { grid-template-columns: 1fr !important; } .b2c-price-card { position: static !important; } }
.edit-row.blank-row { border-style: dashed; background: #FFFDF8; }
.edit-row.blank-row .idx { background: #FBD9AE; color: var(--brand-ink); }

/* ---------------------------------------------------- admin enquiry inbox -- */
/* Three panes like a mail client: accounts, list, reading pane. Collapses to a
   single column on narrow screens so the list stays usable on a phone. */
.inbox-wrap { display: grid; grid-template-columns: 190px minmax(280px, 360px) 1fr; gap: 14px; align-items: start; }
.inbox-list { max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.inbox-row {
  text-align: left; width: 100%; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; cursor: pointer; font: inherit;
  border-left: 3px solid transparent;
}
.inbox-row:hover { border-color: var(--brand); }
.inbox-row.unread { border-left-color: var(--brand); background: #FFFBF6; }
.inbox-row.unread .who, .inbox-row.unread .subj { font-weight: 700; }
.inbox-row.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(245,130,31,.14); }
.inbox-row .subj { margin-top: 2px; }
.inbox-row .prev { margin-top: 3px; }
.inbox-read { padding: 18px; min-height: 240px; }
.inbox-body {
  white-space: pre-wrap; word-break: break-word; font: inherit; font-size: .92rem;
  line-height: 1.6; background: #FAFAFB; border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; margin: 0; max-height: 52vh; overflow-y: auto;
}
@media (max-width: 900px) {
  .inbox-wrap { grid-template-columns: 1fr; }
  .inbox-list { max-height: none; }
}

/* ===================================================== brochure document ===
   The photo-led client document (brochureQuoteDoc in brochure.js). Lives in the
   shared stylesheet because pkgLocalStyles() inlines this file into the printed
   PDF and Word build — screen and paper stay one design. Tables and blocks
   only: Word ignores flex, so nothing here depends on it. */
.bd-doc { position: relative; color: #1a1a1a; font-size: 10.5pt; line-height: 1.55; }
.bd-doc p { margin: 0 0 9px; }

/* Diagonal trip-ref watermark, behind everything, never on the cover. */
.bd-water {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  transform: rotate(-28deg) scale(1.6); transform-origin: center;
  font-size: 15pt; font-weight: 700; color: rgba(120,120,120,.10);
  word-spacing: 14px; line-height: 2.6; letter-spacing: 1px;
}
.bd-doc > section, .bd-doc > .bd-foot { position: relative; z-index: 1; }

/* ---- cover ---- */
.bd-cover { position: relative; overflow: hidden; page-break-after: always; background: #2b2b2b; }
.bd-cover-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .95; }
.bd-cover-inner { position: relative; text-align: center; padding: 26px 20px 0; }
.bd-cover-logo { height: 44px; margin: 0 auto 16px; display: block; }
.bd-cover-brand { color: #fff; font-size: 20pt; font-weight: 800; margin-bottom: 16px; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.bd-strip { background: #fff; padding: 6px; border-radius: 4px; display: table; margin: 0 auto; }
.bd-strip-img { width: 92px; height: 200px; object-fit: cover; display: inline-block; margin: 0 2px; vertical-align: top; }
.bd-cover-title {
  margin-top: -18px; font-size: 46pt; font-weight: 900; letter-spacing: -1px;
  text-transform: uppercase; color: var(--brand, #F5821F);
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.bd-cover-sub { color: #fff; font-weight: 700; letter-spacing: 3px; font-size: 10pt; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.bd-cover-bar { position: relative; margin: 22px 0 0; background: #3a3a3a; color: #fff; display: table; width: 100%; }
.bd-cover-cell { display: table-cell; padding: 14px 18px; vertical-align: top; font-size: 9.5pt; }
.bd-cover-cell + .bd-cover-cell { border-left: 1px solid rgba(255,255,255,.18); width: 38%; }
.bd-trip b { color: var(--brand, #F5821F); }
.bd-who { margin-top: 2px; }
.bd-dates { margin-top: 10px; border-top: 1px dotted rgba(255,255,255,.35); padding-top: 8px; }
.bd-dates span + span { margin-left: 18px; }
.bd-consult-l { color: #d8d8d8; }
.bd-consult-n { font-weight: 700; margin: 3px 0 1px; }

/* ---- section heading: pink bar, crimson stripe ---- */
.bd-sec {
  position: relative; background: #FBE3EF; color: #B0286A; text-align: center;
  font-size: 13pt; font-weight: 700; margin: 0 0 16px; padding: 11px 14px; border-radius: 4px;
}
.bd-sec-bar { position: absolute; left: -4px; top: 4px; bottom: 4px; width: 6px; background: #C2185B; border-radius: 2px; }
.bd-page { page-break-before: always; padding-top: 4px; }
.bd-h3 { color: #B0286A; font-size: 11pt; margin: 14px 0 6px; }

/* ---- greeting meta row ---- */
.bd-meta { display: table; width: 100%; margin: 18px 0 22px; border-spacing: 0; }
.bd-meta > div { display: table-cell; padding: 0 14px 10px 0; vertical-align: top; }
.bd-meta-k { font-size: 8pt; letter-spacing: .08em; text-transform: uppercase; color: #7a7a7a; font-weight: 700; }
.bd-meta-v { font-size: 12pt; font-weight: 700; margin-top: 2px; }
.bd-total { border: 1px solid #e3e3e3; border-radius: 6px; overflow: hidden; }
.bd-total-h { background: #fafafa; border-bottom: 1px solid #e9e9e9; padding: 9px 14px; font-weight: 700; }
.bd-total-b { padding: 14px; }
.bd-total-n { font-size: 22pt; font-weight: 800; }
.bd-total-note { color: #6b6b6b; font-size: 9pt; margin-top: 2px; }

/* ---- hotel cards ---- */
.bd-card {
  border: 1px solid #e6e6e6; border-radius: 8px; padding: 14px 16px; margin-bottom: 14px;
  display: table; width: 100%; page-break-inside: avoid; background: #fff;
}
.bd-card-l { display: table-cell; vertical-align: top; }
.bd-card-r { display: table-cell; vertical-align: top; width: 250px; padding-left: 14px; }
.bd-shot { width: 118px; height: 78px; object-fit: cover; border-radius: 3px; margin: 0 2px 4px 0; }
.bd-nb {
  display: inline-block; background: #FBE3EF; color: #B0286A; font-weight: 700;
  border-radius: 5px; padding: 2px 8px; margin-right: 5px; font-size: 10pt;
}
.bd-nb-t { font-size: 11pt; }
.bd-nb-t b { font-size: 13pt; }
.bd-hotel { color: #C2185B; font-size: 13pt; font-weight: 700; margin: 8px 0 2px; }
.bd-hotel-alt { font-weight: 700; }
.bd-sm { color: #6b6b6b; font-size: 9pt; }
.bd-kv { display: table; width: 100%; margin-top: 10px; }
.bd-kv > div { display: table-cell; padding-right: 18px; vertical-align: top; }
.bd-kv-k { font-size: 8pt; letter-spacing: .08em; text-transform: uppercase; color: #7a7a7a; font-weight: 700; }
.bd-kv-v { font-weight: 700; }
.bd-sim { color: #C2185B; font-weight: 700; margin-top: 10px; }

/* ---- day blocks ---- */
.bd-day { display: table; width: 100%; margin-bottom: 22px; page-break-inside: avoid; }
.bd-day-badge {
  display: table-cell; width: 74px; vertical-align: top;
  border: 1px solid #F2C6DC; border-radius: 8px; text-align: center; padding: 10px 4px; background: #fff;
}
.bd-day-n { display: block; font-size: 17pt; font-weight: 800; color: #C2185B; }
.bd-day-l { display: block; font-size: 8.5pt; color: #7a7a7a; }
.bd-day-body { display: table-cell; vertical-align: top; padding-left: 16px; }
.bd-day-date { font-weight: 700; font-size: 9.5pt; }
.bd-day-title { color: #C2185B; font-size: 13pt; font-weight: 700; margin: 2px 0 3px; }
.bd-day-img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 4px; margin: 10px 0 12px; }

/* ---- tables + lists ---- */
.bd-tbl { width: 100%; border-collapse: collapse; font-size: 10pt; }
.bd-tbl caption.bd-cap { text-align: left; font-weight: 700; padding: 0 0 8px; }
.bd-tbl th, .bd-tbl td { border: 1px solid #e6e6e6; padding: 9px 12px; text-align: left; vertical-align: top; }
.bd-tbl th { background: #fafafa; font-weight: 700; }
.bd-td-day { width: 130px; }
.bd-ul { margin: 0; padding-left: 18px; }
.bd-ul li { margin-bottom: 4px; }
.bd-two { display: table; width: 100%; }
.bd-two > div { display: table-cell; width: 50%; vertical-align: top; padding-right: 16px; }

/* ---- footer ---- */
.bd-foot { margin-top: 26px; border-top: 2px solid var(--brand, #F5821F); padding-top: 10px; text-align: center; font-size: 9pt; }
.bd-foot-a { color: #6b6b6b; margin-top: 3px; }

@media print { .bd-cover { min-height: 96vh; } }

/* An agent's saved document renders in an iframe so its own stylesheet — which
   includes the print rules — cannot leak into this page's chrome. */
.pkg-saved-doc { width: 100%; border: 0; display: block; min-height: 70vh; }

/* ================================================== final A4 preview step ==
   Full-screen last look before printing: the document at true A4 width, still
   editable. The sheet is exactly 210mm so the page guides drawn inside the
   frame line up with real paper. */
#pkgA4 { position: fixed; inset: 0; z-index: 200; background: #EFF1F3; display: flex; flex-direction: column; }
#pkgA4 .a4-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line);
}
#pkgA4 .a4-title { flex: 1; min-width: 160px; font-weight: 700; }
#pkgA4 .a4-state { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); }
#pkgA4 .a4-pages { font-size: .82rem; color: var(--muted); white-space: nowrap; }
#pkgA4 .a4-hint { background: #FFF9F3; border-bottom: 1px solid #FBD9AE; padding: 8px 14px; font-size: .85rem; color: #7a4a12; }
#pkgA4 .a4-scroll { flex: 1; overflow: auto; padding: 20px 12px 60px; }
#pkgA4 .a4-sheet {
  width: 210mm; margin: 0 auto; background: #fff;
  box-shadow: 0 6px 30px rgba(16,24,40,.18);
}
#pkgA4 .a4-sheet iframe { width: 100%; border: 0; display: block; min-height: 297mm; }
@media (max-width: 780px) { #pkgA4 .a4-sheet { zoom: .55; } }
@media print { #pkgA4 { position: static; background: #fff; } #pkgA4 .a4-bar, #pkgA4 .a4-hint { display: none; } }

/* Page-boundary marks for the A4 step. Drawn in THIS document over the preview
   frame — inside it they sat behind the document's own table backgrounds. */
#pkgA4 .a4-sheet { position: relative; }
#pkgA4 .a4-cut {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px dashed #C2185B; pointer-events: none; z-index: 5;
}
#pkgA4 .a4-cut::after {
  content: attr(data-label); position: absolute; right: 0; top: 2px;
  background: #C2185B; color: #fff; font: 600 10px/1.7 sans-serif;
  padding: 1px 8px; border-radius: 0 0 6px 6px; white-space: nowrap;
}
#pkgA4 .a4-cut[data-forced] { border-top-color: #0F5F5A; }
#pkgA4 .a4-cut[data-forced]::after { background: #0F5F5A; content: attr(data-label); }
@media print { #pkgA4 .a4-cut { display: none !important; } }

/* ---- seasonal rate sheet (calculator drawer + hotels page) --------------
   Shared because both screens edit the same thing and a supplier's sheet has
   one shape; two copies would drift. */
/* The seasonal rate sheet, laid out the way a supplier writes one: room types
   down the side, each season across the top, EP/CP/MAP under every season.
   A real table because the season headings genuinely span their plan columns —
   colspan does that honestly and a CSS grid would have to fake it. */
.season-sheet-scroll { overflow-x:auto; }
.season-sheet { border-collapse:collapse; font-size:.78rem; }
.season-sheet th, .season-sheet td { border:1px solid var(--line); padding:3px 4px; text-align:center; }
.season-sheet thead th.seas { background:#2f6fb3; color:#fff; min-width:210px; }
.season-sheet thead tr.plans th { background:#e8eef5; font-weight:700; width:62px; }
.season-sheet th.rt { background:#f3f4f6; text-align:left; white-space:nowrap; font-weight:600; position:sticky; left:0; z-index:1; }
.season-sheet thead th.seas input { width:100%; padding:3px 5px; font-size:.74rem; margin-bottom:2px; }
.season-sheet thead th.seas .dates { display:flex; gap:3px; align-items:center; margin-bottom:2px; }
.season-sheet thead th.seas .dates input { flex:1; min-width:0; }
.season-sheet tbody input { width:100%; padding:4px 3px; font-size:.78rem; text-align:center; border-color:transparent; background:transparent; }
.season-sheet tbody input:focus { border-color:var(--brand); background:#fff; }
.season-sheet tbody input[type=number] { -moz-appearance:textfield; appearance:textfield; }
.season-sheet tbody input[type=number]::-webkit-outer-spin-button,
.season-sheet tbody input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
/* The season actually being applied to the travel date. */
.season-sheet td.season-active { background:#eaf7ee; }
/* The All year column: the hotel's own rates, distinct from a dated season. */
.season-sheet thead th.seas.allyear { background: #4b5563; min-width: 120px; vertical-align: top; }
.season-sheet thead th.seas.allyear .sub { display: block; font-weight: 400; font-size: .62rem; opacity: .8; margin-top: 2px; }
.season-sheet td.allyear { background: #fafafa; }
/* The probe's answer: the same sheet, read-only, so the shape matches the editor. */
.season-sheet.is-result td { padding: 6px 12px; text-align: right; font-size: .9rem; }
.season-sheet.is-result thead th.seas { min-width: 150px; }
/* A rule between the export actions and the send actions in the A4 bar. */
#pkgA4 .a4-sep { width: 1px; align-self: stretch; margin: 0 2px; background: var(--line); }
/* Per-season plan controls: drop a plan column, or add one that is not shown. */
.season-sheet thead tr.plans th .planx { border: 0; background: none; color: #94a3b8; cursor: pointer; font-size: .8rem; line-height: 1; padding: 0 0 0 3px; }
.season-sheet thead tr.plans th .planx:hover { color: #b91c1c; }
.season-sheet th.planadd, .season-sheet td.planadd { background: #f8fafc; width: 74px; }
.season-sheet th.planadd select { width: 100%; padding: 2px; font-size: .68rem; border-color: var(--line); }
/* The add-a-season column sits at the far right of the header. */
.season-sheet thead th.seas.addcol { background: #334155; min-width: 62px; padding: 4px; }
.season-sheet thead th.seas.addcol button { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.season-sheet thead th.seas.addcol span { font-size: .6rem; }
.season-sheet td.addcol { background: #fafafa; }