/* NakKirim — warm commercial theme.
   Ink navy for structure, gold for the brand, coral for action, warm paper neutrals underneath.
   (Replaces the cold navy/blue-grey pass that read as "booking site".) */

:root {
  --bg: #FAF7F4;
  --surface: #FFFFFF;
  --surface2: #F5F1EC;
  --surface3: #EFEAE4;
  --line: #E8E1D9;
  --line2: #EFEAE4;

  --fg: #1C1B1A;
  --fg2: #45403B;
  --mut: #6B6259;
  --mut2: #A8A099;

  --ink: #16223D;
  --ink2: #22304F;
  --ink3: #2E3F63;
  --gold: #E9A23B;
  --gold-d: #B87A15;
  --gold-soft: #FFF6E6;
  --cta: #E4572E;
  --cta-h: #C7431F;
  --cta-soft: #FFF0EA;
  --teal: #0E7C6B;
  --teal-soft: #E6F6F3;

  --ok: #1B7A4B;      --okbg: #EAF7F0;   --okline: #BCE3CD;
  --warn: #A45A0B;    --warnbg: #FFF7E8; --warnline: #F2D9A8;
  --no: #A3281B;      --nobg: #FDEEEB;   --noline: #F3C7BF;
  --info: #1B5E8C;    --infobg: #EAF3FA; --infoline: #BFDCF0;

  --r: 14px;
  --r2: 10px;
  --sh1: 0 1px 2px rgba(28,27,26,.05), 0 1px 3px rgba(28,27,26,.07);
  --sh2: 0 6px 18px rgba(28,27,26,.09);
  --sh3: 0 20px 44px rgba(28,27,26,.18);
  --wrap: 1180px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.22; letter-spacing: -.015em; }
h1 { font-size: 40px; font-weight: 800; }
h2 { font-size: 26px; font-weight: 750; }
h3 { font-size: 19px; font-weight: 700; }
h4 { font-size: 15px; font-weight: 700; }
p { margin: 0 0 10px; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sm { font-size: 13.5px; }
.xs { font-size: 12.5px; }
.mut { color: var(--mut); }
.spacer { flex: 1 1 0; min-width: 0; }
.nowrap { white-space: nowrap; }
img { max-width: 100%; display: block; }

/* ---------------- top bar ---------------- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line2); position: sticky; top: 0; z-index: 50; }
.topbar .wrap { display: flex; align-items: center; gap: 16px; min-height: 66px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand-ink { font-size: 23px; font-weight: 800; letter-spacing: -0.03em; color: #347574; line-height: 1; white-space: nowrap; }
.brand-ink b { color: #EA8616; font-weight: 800; }
.brand-logo { display: none; }  /* replaced by the colored wordmark in the header */
.hero-flex { display: flex; align-items: center; gap: 30px; }
.hero-txt { flex: 1; min-width: 0; }
.hero-logo { margin: 0; flex: none; }
.hero-logo img { width: min(210px, 40vw); height: auto; filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)); }
@media (max-width: 760px) { .hero-flex { flex-direction: column; align-items: flex-start; gap: 14px; } .hero-logo img { width: min(190px, 50vw); } }
.foot-logo { width: 132px; height: auto; display: block; margin: 0 auto 12px; }
.brand .mark {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, var(--gold), var(--cta));
  color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 800;
  box-shadow: 0 2px 6px rgba(228,87,46,.28);
}
.brand span.tagline { font-size: 12px; font-weight: 600; color: var(--mut); letter-spacing: 0; }
.nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.nav a { color: var(--fg2); font-weight: 650; font-size: 14px; padding: 9px 12px; border-radius: 9px; text-decoration: none; }
.nav a:hover { background: var(--surface2); color: var(--ink); text-decoration: none; }
.nav a.on { color: var(--ink); background: var(--gold-soft); }
.nav a.nav-post { display: none; }
.right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.linklike { color: var(--fg2); font-weight: 650; font-size: 13.5px; padding: 8px 10px; border-radius: 9px; }
.linklike:hover { background: var(--surface2); color: var(--ink); text-decoration: none; }

.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.lang button { border: 0; background: var(--surface); color: var(--mut); font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 10px; cursor: pointer; }
.lang button + button { border-left: 1px solid var(--line); }
.lang button.on { background: var(--ink); color: #fff; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--cta); color: #fff; border: 1px solid var(--cta);
  padding: 11px 17px; border-radius: var(--r2); font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, box-shadow .15s, transform .05s;
}
.btn:hover { background: var(--cta-h); border-color: var(--cta-h); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: var(--surface); color: var(--fg2); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface2); color: var(--ink); }
.btn.dark { background: var(--ink); border-color: var(--ink); }
.btn.dark:hover { background: var(--ink2); border-color: var(--ink2); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #3A2703; }
.btn.gold:hover { background: #D8902C; border-color: #D8902C; }
.btn.sm { padding: 8px 13px; font-size: 13px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .6; cursor: default; }

/* ---------------- hero ---------------- */
.hero {
  background:
    radial-gradient(760px 300px at 14% -40%, rgba(233,162,59,.32), transparent 62%),
    radial-gradient(600px 260px at 92% -20%, rgba(228,87,46,.22), transparent 60%),
    linear-gradient(135deg, var(--ink) 0%, var(--ink2) 58%, var(--ink3) 100%);
  color: #fff;
  padding: 46px 0 92px;
}
.hero .kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #FFE0AE; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2);
  padding: 6px 11px; border-radius: 999px; margin-bottom: 16px;
}
.hero h1 { color: #fff; max-width: 22em; }
.hero .sub { color: #D9DEE9; font-size: 16.5px; max-width: 44em; margin-top: 12px; }
.hero .promise { margin-top: 14px; color: var(--gold); font-size: 13.5px; font-weight: 700; }
.hero.narrow { padding-bottom: 46px; }

/* search card overlapping the hero */
.searchcard { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh2); padding: 16px; margin-top: -62px; position: relative; z-index: 2; }
/* minmax(0,…) matters: a bare 1fr floors the track at the native date input's intrinsic width,
   which pushed the second date box 53px out of the card at 1440 and 1280 */
.searchcard form { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,1.6fr) auto; gap: 12px; align-items: end; }
.searchcard .daterow { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
.searchcard .field { margin: 0; }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px;
  background: var(--cta); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; }

/* the conversation: bubbles, milestones, stars */
.chat { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; max-height: 54vh; overflow: auto; padding: 4px 2px; }
.bubble { max-width: min(560px, 84%); padding: 10px 13px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--sh1); font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.mine { align-self: flex-end; background: var(--ink); color: #fff; border-color: var(--ink); }
.bubble .at { display: block; font-size: 11px; opacity: .62; margin-top: 5px; }
.chat-sys { align-self: center; text-align: center; font-size: 12px; color: var(--mut); background: var(--surface2);
  border: 1px dashed var(--line); border-radius: 10px; padding: 7px 13px; max-width: 82%; }
.chat-form { display: flex; gap: 10px; align-items: flex-end; margin-top: 12px; }
.chat-form textarea { flex: 1; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r2); resize: vertical; }
.stars { display: flex; gap: 2px; }
.star { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--line); cursor: pointer; padding: 0 2px; }
.star.on { color: var(--gold); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .two { grid-template-columns: 1fr; } }

.daterow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 8px; align-items: center; }
.daterow input, .daterow select, .daterow .field { min-width: 0; }
.daterow .sep { color: var(--mut); font-size: 13px; }

/* the credit ladder: small, honest, and readable on a phone */
.packtable { width: 100%; border-collapse: collapse; margin: 10px 0 6px; font-size: 13px; }
.packtable td { padding: 5px 0; border-bottom: 1px solid var(--line2); }
.packtable tr:last-child td { border-bottom: 0; }
.packtable tr.best td { font-weight: 600; }
.packtable td.mut { text-align: right; font-size: 12px; }
select.sm { font-size: 12px; padding: 6px 8px; max-width: 190px; }

/* sample photos: show a new poster what a useful photo looks like */
.photo-samples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.photo-samples img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 1px solid var(--line2); }
/* point 9: a paid urgent request gets one line on the traveller board */
#urgent-strip { display: grid; gap: 8px; margin-bottom: 12px; }
.urgent-card { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-decoration: none;
  border: 1px solid var(--gold); background: linear-gradient(90deg, #FFF8E8, var(--surface));
  border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.urgent-card b { font-size: 13px; }
.urgent-card .mut { font-size: 12px; }
@media (max-width: 700px) { .photo-samples { grid-template-columns: repeat(3, 1fr); gap: 6px; } }
.photo-samples figure { margin: 0; text-align: center; }
.photo-samples .ph {
  height: 74px; border-radius: 12px; display: grid; place-items: center; font-size: 26px;
  border: 1px dashed var(--line); background: var(--surface2);
}
.photo-samples .ph.a { background: linear-gradient(135deg, #FFF3E2, #FFE6C9); }
.photo-samples .ph.b { background: linear-gradient(135deg, #EAF4FF, #DCEBFF); }
.photo-samples .ph.c { background: linear-gradient(135deg, #EAF7EF, #DCF0E4); }
.photo-samples figcaption { font-size: 11.5px; color: var(--mut); margin-top: 5px; line-height: 1.3; }

/* ---------------- warning band ---------------- */
.warnband {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--warnbg); border: 1px solid var(--warnline); border-left: 5px solid var(--gold);
  border-radius: 12px; padding: 14px 16px; margin-top: 18px;
}
.warnband .ico { font-size: 19px; line-height: 1; margin-top: 1px; }
.warnband b { color: var(--warn); }
.warnband p { margin: 3px 0 0; color: #7A4408; font-size: 13.5px; }
.warnband.hard { background: var(--nobg); border-color: var(--noline); border-left-color: var(--cta); }
.warnband.hard b { color: var(--no); }
.warnband.hard p { color: #7E2A1F; }

/* ---------------- board layout ---------------- */
.board { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 22px; padding-bottom: 64px; }
.board.form-first { grid-template-columns: minmax(0, 1fr) 340px; }   /* form wide, preview rail narrow */
.rail { position: sticky; top: 84px; display: grid; gap: 14px; align-content: start; }
.panel { background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r); padding: 17px; box-shadow: var(--sh1); }
.panel h4 { margin-bottom: 10px; color: var(--ink); }
.panel.flat { box-shadow: none; }

.tabs { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--line2); border-radius: 12px; padding: 5px; box-shadow: var(--sh1); }
.tab { flex: 1 1 auto; border: 0; background: transparent; color: var(--fg2); font: inherit; font-weight: 700; font-size: 14px; padding: 10px 13px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.tab:hover { background: var(--surface2); }
.tab.on { background: var(--ink); color: #fff; }
.tab .cnt { color: inherit; opacity: .72; font-weight: 600; }
.results { display: grid; gap: 12px; }
/* 14-point batch: many travellers per screen instead of one per screen. The photo is small here and
   opens full size on a click, so the page is no longer ten screens of scrolling. */
/* one wide card per trip: a photo on the left and everything readable on the right.
   Tall grid cards looked like a phone app; this reads like a noticeboard. */
.card.row { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; align-items: start; }
.card.row .rowthumb { border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); background: var(--surface2); }
.card.row .rowthumb img { width: 100%; height: 152px; object-fit: cover; display: block; }
.card.row .rowbody { min-width: 0; }
/* a narrow column (the live preview on the post form, the account rail) gets the stacked card:
   in a ~300px column the two-column card squeezes the text to one letter per line */
#preview .card.row, .rail .card.row { grid-template-columns: minmax(0, 1fr); }
#preview .card.row .rowthumb img, .rail .card.row .rowthumb img { height: 132px; }
.card.row.req { cursor: pointer; }
.card.row.req:hover { border-color: var(--gold); }
.card.row.req:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nophoto-cover { height: 152px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, #F7F0E7, #EDE1D2); color: var(--ink2); }
.nophoto-cover .np-glyph { font-size: 26px; opacity: .45; }
.nophoto-cover .np-dest { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .65; text-align: center; padding: 0 10px; }
button.boostcard { text-align: left; font: inherit; cursor: pointer; }
@media (max-width: 760px) {
  .card.row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .card.row .rowthumb img, .nophoto-cover { height: 196px; }
}

/* ---------------- trip card ---------------- */
/* grid items must be allowed to shrink below their content, or one long line
   stretches the whole board and the phone gets a sideways scrollbar */
.results > *, .rail > *, .dashmain > *, .dashrail > * { min-width: 0; }
/* a buyer can type an 80-character item name with no spaces — it must wrap, not push the page */
.card, .panel, .bubble, .itemlist li, .plist li, .route, .who, .note-line { overflow-wrap: anywhere; }
.card { min-width: 0; background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r); padding: 17px 18px; box-shadow: var(--sh1); transition: box-shadow .15s, transform .12s, border-color .15s; }
.card:hover { box-shadow: var(--sh2); border-color: #DCD3C8; transform: translateY(-1px); }
.card .top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.av {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--ink3), var(--ink)); color: #fff; font-weight: 800; font-size: 16px;
}
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.sm { width: 34px; height: 34px; font-size: 13px; }
.who { font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
a.who-link { color: inherit; text-decoration: none; }
a.who-link:hover { text-decoration: underline; }
a.avlink { display: inline-block; line-height: 0; border-radius: 50%; }
.stars { color: var(--gold); letter-spacing: 1px; font-size: 12.5px; }
.route { font-size: 19px; font-weight: 750; margin-top: 12px; letter-spacing: -.01em; }
.dest { display: inline-flex; align-items: center; gap: 8px; }
.meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--fg2); background: var(--surface2); border: 1px solid var(--line2); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.tag.hi { background: var(--cta-soft); border-color: #F7CDBB; color: #9C3416; }
.tag.ok { background: var(--okbg); border-color: var(--okline); color: var(--ok); }
.tag.info { background: var(--teal-soft); border-color: #B9E2DA; color: var(--teal); }
.tag.gold { background: var(--gold-soft); border-color: #F2DDAE; color: var(--gold-d); }
.tag.warn { background: var(--warnbg); border-color: var(--warnline); color: var(--warn); }
.tag.no { background: var(--nobg); border-color: var(--noline); color: var(--no); }
.actions { display: flex; align-items: center; gap: 9px; margin-top: 15px; flex-wrap: wrap; }
.note-line { margin-top: 11px; color: var(--mut); font-size: 13.5px; line-height: 1.5; }
/* the note is the human part of a post: it is never clipped, the card just grows */
.thumb { margin-top: 12px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); background: var(--surface2); }
.thumb img { width: 100%; height: 168px; object-fit: cover; }

/* ---------------- fields ---------------- */
.field { display: block; }
.field label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; background: var(--surface); color: var(--fg); border: 1px solid var(--line);
  border-radius: var(--r2); padding: 11px 12px; font: inherit; font-size: 14px;
}
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(233,162,59,.35); outline-offset: 0; border-color: var(--ink); }
.field select { cursor: pointer; }
.field .hint { display: block; margin-top: 5px; font-size: 12.5px; color: var(--mut); }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.formgrid .full { grid-column: 1 / -1; }
.fee-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; }
.fee-row select, .fee-row input { min-width: 0; }
.chk { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; margin: 0 0 8px; cursor: pointer; color: var(--fg2); }
.chk input { accent-color: var(--cta); width: 17px; height: 17px; margin-top: 1px; flex: none; }
.chk.big { font-size: 14.5px; font-weight: 600; }
.stack { display: grid; gap: 12px; }
.section-title { display: flex; align-items: center; gap: 10px; margin: 24px 0 12px; padding-top: 16px; border-top: 1px solid var(--line2); }
.section-title:first-of-type { border-top: 0; padding-top: 0; margin-top: 6px; }
.section-title .num { width: 28px; height: 28px; border-radius: 9px; background: var(--gold-soft); color: var(--gold-d); display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: none; }
.section-title h3 { font-size: 16.5px; }

/* segmented control (business / holiday, local / abroad) */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; background: var(--surface); }
.seg label { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; font-size: 13.5px; font-weight: 650; color: var(--fg2); cursor: pointer; border-left: 1px solid var(--line); }
.seg label:first-child { border-left: 0; }
.seg input { display: none; }
.seg input:checked + span { color: var(--ink); }
.seg label:has(input:checked) { background: var(--gold-soft); color: var(--ink); }

/* ---------------- photos ---------------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
.photo-tile { position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; aspect-ratio: 1/1; background: var(--surface2); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile .kill { position: absolute; top: 5px; right: 5px; border: 0; background: rgba(22,34,61,.82); color: #fff; border-radius: 999px; width: 24px; height: 24px; font-size: 13px; line-height: 1; cursor: pointer; }
.photo-tile .cover { position: absolute; left: 5px; bottom: 5px; background: var(--gold); color: #3A2703; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.photo-add { border: 1px dashed var(--line); border-radius: 12px; aspect-ratio: 1/1; display: grid; place-items: center; color: var(--mut); cursor: pointer; font-size: 12.5px; font-weight: 650; text-align: center; background: var(--surface2); }
.photo-add:hover { border-color: var(--cta); color: var(--cta); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.gallery a { border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); }
.gallery img { width: 100%; height: 150px; object-fit: cover; }

/* ---------------- misc blocks ---------------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 13px; }
.box { background: var(--surface2); border: 1px solid var(--line2); border-radius: 12px; padding: 14px 15px; }
.box h4 { margin-bottom: 8px; color: var(--ink); }
.box ul { margin: 0; padding-left: 18px; }
.box li { margin-bottom: 3px; }
.notice { background: var(--okbg); border: 1px solid var(--okline); border-radius: 12px; padding: 13px 15px; font-size: 13.5px; color: #14563A; }
.notice a { color: #14563A; font-weight: 700; }
.notice.gold { background: var(--gold-soft); border-color: #F2DDAE; color: #7A4408; }
.notice-strip { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line2); border-left: 4px solid var(--gold); border-radius: 12px; padding: 11px 14px; font-size: 13px; color: var(--fg2); margin-top: 16px; }
.notice-strip b { color: var(--ink); }
.notice-strip .x { margin-left: auto; font-weight: 700; white-space: nowrap; }
.warn { background: var(--warnbg); border: 1px dashed var(--warnline); border-radius: 12px; padding: 13px 15px; font-size: 13.5px; color: #7A4408; margin-top: 14px; }
.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r); padding: 30px 22px; text-align: center; color: var(--mut); }
.empty b { color: var(--fg); }
.rowline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rowline > * { min-width: 0; }
.credits-box { background: linear-gradient(135deg, var(--gold-soft), #FFFDF8); border: 1px solid #F2DDAE; border-radius: 12px; padding: 15px; }
.credits-box .n { font-size: 26px; font-weight: 800; color: var(--gold-d); line-height: 1; }

/* ---------------- dialogs ---------------- */
dialog { border: 0; border-radius: 18px; padding: 0; width: min(480px, calc(100vw - 32px)); box-shadow: var(--sh3); background: var(--surface); color: var(--fg); }
dialog::backdrop { background: rgba(22,34,61,.58); backdrop-filter: blur(2px); }
dialog .dbody { padding: 24px; }
dialog h3 { margin-bottom: 6px; }
dialog .actions { margin-top: 18px; }

/* ---------------- footer ---------------- */
.foot { background: var(--surface); border-top: 1px solid var(--line2); padding: 26px 0; margin-top: 20px; }
.foot .wrap { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.foot .xs { color: var(--mut); max-width: 58em; }
.foot a { font-weight: 700; }
.foot .links { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------------- status chips ---------------- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid; }
.status.pending { background: var(--warnbg); border-color: var(--warnline); color: var(--warn); }
.status.approved { background: var(--okbg); border-color: var(--okline); color: var(--ok); }
.status.rejected { background: var(--nobg); border-color: var(--noline); color: var(--no); }

/* ---------------- responsive ---------------- */
@media (max-width: 1080px) {
  .board, .board.form-first { grid-template-columns: 1fr; }
  .rail { position: static; }
  .board.form-first .rail { order: -1; }
}
@media (max-width: 820px) {
  h1 { font-size: 31px; }
  h2 { font-size: 22px; }
  .searchcard form { grid-template-columns: 1fr; }
  .searchcard { margin-top: -46px; }
  .hero { padding-bottom: 70px; }
  .formgrid, .grid2 { grid-template-columns: 1fr; }
  .topbar .wrap { min-height: 0; }
  .nav { order: 3; width: 100%; }
  .nav a { padding: 8px 9px; }
  .right .post-cta, .right .help-cta { display: none; }
  .nav a.nav-post { display: inline-flex; }
  .nav a[href="dashboard.html"] { display: none; }
  .card .top { gap: 9px; }
  .route { font-size: 17px; }
  .board.form-first .rail { order: 2; }
  .right #nav-logout { display: none; }   /* log out lives in My account on a phone */
}
@media (max-width: 520px) {
  .wrap { padding: 0 14px; }
  h1 { font-size: 27px; }
  .hero { padding: 26px 0 56px; }
  .hero .sub { font-size: 15px; }
  .lang button { padding: 10px 13px; }
  .daterow { grid-template-columns: 1fr; }
  .daterow .sep { display: none; }
  .brand span.tagline { display: none; }
  .tab { font-size: 13px; padding: 9px 10px; }
    .actions .btn { flex: 1 1 auto; }
    .photo-grid { grid-template-columns: repeat(3, 1fr); }
  }
  /* touch-friendly: nothing a thumb taps may be smaller than ~40px on a phone */
  @media (max-width: 700px), (pointer: coarse) {
    .item-row .kill { min-height: 38px; min-width: 38px; padding: 9px 0; }
    .btn.sm { min-height: 40px; }
    .chips .chip { min-height: 36px; display: inline-flex; align-items: center; }
    .tab { min-height: 38px; }
    .xs { font-size: 13px; }           /* 12.5px was too small for eyes on a phone */
  }
@media print {
  .topbar, .foot, .rail, .searchcard { display: none; }
  body { background: #fff; }
}

/* ---------- account: two columns so the page stops reading as one long list ---------- */
.dashgrid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.dashmain, .dashrail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 940px) { .dashgrid { grid-template-columns: 1fr; } }
.av.big { width: 52px; height: 52px; font-size: 20px; }
/* your photo, changed the way every phone does it: tap the picture, there is a + on it */
.av.add { position: relative; cursor: pointer; }
.av.add .plus { position: absolute; right: -3px; bottom: -3px; width: 21px; height: 21px; border-radius: 50%;
  background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; border: 2px solid var(--surface); }
.av.add:hover .plus { background: var(--cta); }

/* a buyer's request, opened in full */
dialog.reqdlg { width: min(620px, calc(100vw - 32px)); }
.reqhero { margin: 12px 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); cursor: zoom-in; }
.reqhero img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.reqfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 16px; margin: 14px 0 0; }
.reqfacts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); margin-bottom: 2px; }
.reqfacts dd { margin: 0; font-size: 14px; }
@media (max-width: 620px) { .reqfacts { grid-template-columns: 1fr 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .tag { text-decoration: none; }
.tag.sub { background: var(--ink); color: #fff; border-color: var(--ink); }
.tag.warn { background: var(--warnbg); color: var(--warn); border-color: var(--warnline); }

/* ---------- the traveller's photos on the board ---------- */
.cardcover { position: relative; margin-top: 10px; border-radius: var(--r2); overflow: hidden; background: var(--surface2); }
.cardcover { cursor: zoom-in; }
.cardcover img { display: block; width: 100%; height: 172px; aspect-ratio: auto; object-fit: cover; }
.cardcover .zoom { position: absolute; left: 8px; bottom: 8px; background: rgba(22,34,61,.72); color: #fff;
  font-size: 12px; line-height: 1; padding: 4px 6px; border-radius: 8px; opacity: .85; }
.cardcover .more { position: absolute; right: 8px; bottom: 8px; background: rgba(22,34,61,.82); color: #fff;
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }

/* ---------- what you can buy for them: item + price rows ---------- */
.items-editor { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.item-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 34px; gap: 8px; align-items: center; }
.item-row input { font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
.item-row .kill { background: none; border: 1px solid var(--line); border-radius: var(--r2); color: var(--mut);
  font-size: 16px; line-height: 1; padding: 7px 0; cursor: pointer; }
.item-row .kill:hover { color: var(--no); border-color: var(--noline); }
@media (max-width: 620px) { .item-row { grid-template-columns: minmax(0, 1fr) 100px 34px; } }
.itemlist { list-style: none; padding: 0; margin: 0; }
.itemlist li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.itemlist li:last-child { border-bottom: 0; }
.itemlist b { color: var(--ink); white-space: nowrap; }

/* ---------- pricing ---------- */
.pricegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 940px) { .pricegrid { grid-template-columns: 1fr; } }
.pricecard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sh1); }
.pricecard.hi { border-color: var(--ink); border-width: 2px; box-shadow: var(--sh2); }
.pricecard .rec { position: absolute; top: -11px; left: 18px; background: var(--gold); color: #3A2A08;
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.ptier { font-weight: 800; letter-spacing: .01em; color: var(--ink); }
.pamount { font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.pamount span { font-size: 13px; font-weight: 500; color: var(--mut); }
.pwhy { margin: 0; font-size: 13px; color: var(--mut); min-height: 34px; }
.plist { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.plist li { padding-left: 20px; position: relative; color: var(--fg2); }
.plist li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.pricecard .btn { margin-top: auto; }
.ptable { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13.5px; }
.ptable th, .ptable td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.ptable th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); }
.ptable td:first-child { color: var(--fg2); }
.ptable tr:last-child td { border-bottom: 0; }


/* ---------- the new filter card, category chips, verification badge ---------- */
/* six fields now live in the search card, so let it wrap instead of squeezing */
@media (min-width: 900px) { .searchcard form { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1250px) { .searchcard form { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.searchcard form .btn { align-self: end; }

.chips .chip {
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line2); background: var(--surface); color: var(--fg2);
}
.chips .chip:hover { border-color: var(--ink2); }
.chips .chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.tag.cat { background: var(--surface2); }
.tag.verified { background: var(--okbg); border-color: var(--okline); color: var(--ok); }
.shopnote { font-size: 12.5px; color: var(--mut); margin: 6px 0 0; }

/* the trip-confirmation box (flight ticket check) */
.vbox { border: 1px solid var(--line2); background: var(--surface2); border-radius: 12px; padding: 12px; margin-top: 10px; }
.vbox .formgrid { margin-top: 8px; }
.vbox label { font-size: 12.5px; }

/* an element marked hidden must be hidden even when a class sets display */
[hidden] { display: none !important; }

/* the fee table on a trip page: the numbers written out, not only a tag at the top */
.feetable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.feetable tr { border-bottom: 1px dashed var(--line); }
.feetable tr:last-child { border-bottom: 0; }
.feetable th { text-align: left; vertical-align: top; font-weight: 700; color: var(--ink); padding: 9px 14px 9px 0; white-space: nowrap; width: 1%; }
.feetable td { vertical-align: top; color: var(--fg2); padding: 9px 0; }
.feetable td .xs { color: var(--mut); }
.feetable tr:last-child td b { color: var(--ok); }
@media (max-width: 560px) {
  .feetable th { white-space: normal; width: 38%; padding-right: 10px; }
}


/* ================= 14-point batch ================= */

/* the big photo: click any photo on the site and it opens here (point 2) */
dialog#lightbox { width: auto; max-width: 96vw; background: transparent; box-shadow: none; border-radius: 0; }
dialog#lightbox::backdrop { background: rgba(12,18,32,.88); backdrop-filter: blur(3px); }
.lbbox { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; }
.lbbox img { max-width: min(1400px, 88vw); max-height: 78vh; border-radius: 12px; display: block;
  background: #10182b; box-shadow: 0 18px 60px rgba(0,0,0,.5); }
.lbclose { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: #fff; font-size: 16px; cursor: pointer; }
.lbprev, .lbnext { width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 22px; line-height: 1; }
.lbprev:hover, .lbnext:hover { background: rgba(255,255,255,.3); }
.lbfoot { position: absolute; bottom: -34px; left: 0; right: 0; display: flex; justify-content: space-between;
  color: rgba(255,255,255,.8); font-size: 12px; }
.gallery .gphoto { padding: 0; border: 1px solid var(--line2); border-radius: 12px; overflow: hidden;
  background: none; cursor: zoom-in; display: block; }
.gallery .gphoto img { display: block; width: 100%; height: 132px; object-fit: cover; }

/* the paid slot: a labelled strip in the same place every time — it is an ad and it says so (point 9) */
#boost-strip { margin: 0 0 14px; }
.boosthead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.boostrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.boostcard { display: grid; gap: 6px; text-decoration: none; color: inherit; padding: 10px 12px;
  border: 1px solid var(--gold); border-radius: 12px; background: linear-gradient(180deg, #FFF9EA, var(--surface)); }
.boostcard img { width: 100%; height: 96px; object-fit: cover; border-radius: 8px; }
.boostcard .nophoto { display: flex; align-items: center; justify-content: center; height: 96px;
  border-radius: 8px; background: var(--surface2); font-size: 22px; }
.boostcard .bc-route { font-weight: 700; font-size: 14px; }
.boostcard:hover { border-color: var(--gold-d); }

/* the paid table: two columns, no line down the middle, room to breathe (point 8) */
.paidtable { margin-top: 4px; }
.paidtable thead th { color: var(--mut); font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.paidtable th.cost, .paidtable td.cost { text-align: right; white-space: nowrap; width: 1%; color: var(--ink); font-weight: 700; }
.paidtable tbody td { padding: 12px 0; border: 0; }
.paidtable tbody tr + tr td { border-top: 1px solid var(--line2); }
.paidtable tbody td:first-child { padding-right: 18px; color: var(--fg2); }

/* posting a request: the form takes the whole width, no list of other people's requests (point 7) */
.board.posting { grid-template-columns: minmax(0, 1fr); }
.board.posting .rail { display: none; }
.board.posting .formgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .board.posting .formgrid { grid-template-columns: 1fr; } }

/* unread messages shout; the rest of the account page can wait (point 12) */
.panel.unread { border-color: var(--cta); box-shadow: 0 0 0 3px rgba(217,86,63,.12); }
.boost-box { border-color: var(--gold); }

/* suggested replies in the chat */
.suggest { margin: 12px 0 8px; }
.suggest .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.suggest .chip { cursor: pointer; }
p.on { color: var(--ok); }

/* the five numbers at the top of a trip page — read once, no scrolling to a table */
.factcard { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:2px 22px;
  margin:16px 0 0; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface2); }
.fact { display:flex; gap:8px; align-items:baseline; padding:5px 0; border-bottom:1px dotted var(--line); min-width:0; }
.fact:last-child { border-bottom:0; }
.fk { flex:0 0 40%; color:var(--mut); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.fv { flex:1 1 auto; min-width:0; font-size:13.5px; }
/* the flight we checked, shown like an itinerary line */
.flightcard { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:10px; padding:11px 14px;
  border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:12px; background:var(--surface2); }
.flightcard .fl { font-size:13px; font-weight:600; letter-spacing:.01em; }
.leghead { margin:14px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); }
dialog .dlgform { display:block; }

/* clickable rating (Google-style reviews) */
button.rate-link { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
button.rate-link:hover span.stars { text-decoration: underline; }
.rate-tag { cursor: pointer; }
.rate-tag:hover { filter: brightness(1.06); }
.rv-overlay { position: fixed; inset: 0; background: rgba(20,18,16,.45); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rv-card { width: min(560px, 94vw); max-height: 86vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.25); padding: 22px; color: var(--fg); }
.rv-summary { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 14px; border-bottom: 1px solid var(--line2); margin-bottom: 12px; }
.rv-big { font-size: 44px; font-weight: 800; line-height: 1; color: var(--ink); }
.rv-of5 { font-size: 15px; color: var(--mut); font-weight: 600; }
.rv-bars { width: 100%; max-width: 360px; margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.rv-bar { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.rv-lb { width: 26px; text-align: right; color: var(--mut); font-weight: 700; }
.rv-track { flex: 1; height: 10px; background: var(--surface2); border-radius: 999px; overflow: hidden; }
.rv-fill { display: block; height: 100%; background: var(--gold); border-radius: 999px; }
.rv-n { width: 30px; color: var(--mut); }
.rv-item { padding: 12px 0; border-bottom: 1px solid var(--line2); }
.rv-item:last-child { border-bottom: none; }