/* ============================================================
   Elvantra — shared styles
   Design tokens with a dark theme, contrast-checked pairs
   (body text >= 4.5:1 in both themes), focus states, print rules.
   Loaded by every page: index, privacy, terms, refunds, cookies, 404.
   ============================================================ */

/* ---- Tokens (light is the default) ---- */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --cream: #f7f4ee;
  --panel: #14213d;          /* dark card background (form box, CTA) */
  --panel-ink: #ffffff;
  --ink: #14213d;            /* primary text            ~15.6:1 on --bg */
  --muted: #5c6779;          /* secondary text           ~5.3:1 on --bg */
  --line: #e7e5df;
  --gold: #c69a52;           /* brand fill colour        (never used for text) */
  --gold-ink: #14213d;       /* text placed ON gold      ~5.6:1 on --gold  */
  --gold-text: #8f6626;      /* gold-coloured TEXT       ~5.9:1 on --bg    */
  --ok: #12734a;
  --err: #b3261e;
  --notice: #f7f0df;
  --footer: #0b1427;
  --footer-ink: #dbe2ed;
  --footer-muted: #aeb8c8;
  --focus: #8f6626;
  --shadow: 0 8px 25px #14213d0b;
  --radius: 12px;
  --bg-hover: color-mix(in srgb, var(--bg) 92%, var(--line));
  --surface-hover: color-mix(in srgb, var(--surface) 94%, var(--line));
  --line-strong: color-mix(in srgb, var(--line) 70%, var(--ink));
  --accent-soft: color-mix(in srgb, var(--gold) 14%, var(--bg));
}

html[data-theme="dark"] {
  --bg: #0d1524;
  --surface: #152038;
  --cream: #101a2e;
  --panel: #0f1830;
  --panel-ink: #e9edf7;
  --ink: #e9edf7;            /* primary text           ~14:1 on --bg      */
  --muted: #a8b3c9;          /* secondary text          ~7:1 on --bg      */
  --line: #2b3a5c;
  --gold: #d8b070;
  --gold-ink: #14213d;
  --gold-text: #e2b978;      /* gold text on dark bg    ~9:1 on --bg      */
  --ok: #5fd39a;
  --err: #ff9f92;
  --notice: #2a2313;
  --footer: #0a1120;
  --footer-ink: #d7dfef;
  --footer-muted: #a8b3c9;
  --focus: #e2b978;
  --shadow: 0 8px 25px #00000040;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  overflow-x: hidden;              /* guard: no horizontal scroll */
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.15; }
[hidden] { display: none !important; }

/* Visually hidden but still available to assistive technology */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Skip link (visible only while focused) ---- */
.skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 60;
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 0 0 8px 8px;
  transition: top 0.15s ease;
}
.skip:focus { top: 0; }

/* ---- Section rhythm ---- */
section { padding: 78px 7%; }
.sectionhead {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 30px;
}
.sectionhead h2 { font-size: 36px; margin: 0 0 8px; }
.sectionhead p { color: var(--muted); margin: 0; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold-text);
  margin: 0;
}
/* ---- Backdrop / warmth convention ------------------------------------
   Every page may use one of these introductions instead of bare --bg. The hero
   is a photo+gradient (credit in the page's source attribution line), soft-\r
   edge sections use a tinted fill, and inline art uses a muted photo strip.
   Attribution for borrowed photos is at the bottom of each page that uses them.
   ------------------------------------------------ */
.cream { background: var(--cream); }
.warm Intro { background: var(--cream); }
.lead {
  padding: 64px 7%;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cream) 70%, var(--bg)), var(--bg));
}
.lead h1 { font-size: 42px; }
.photoedge {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.photoedge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,22,42,0.55), rgba(11,22,42,0.18));
}
.photoedge > :last-child { position: relative; }
.panelsurface { background: var(--surface); }

/* ---- Hover system: independent per element, uniform in feel -----------
   Each interactive element has its own hover/focus/active that only touches its
   own paint (border, shadow, background, text). One element's hover never
   depends on another's state, so buttons, cards, plans, tabs, listings, links
   and inputs all feel distinct but consistent. ---------------- */
.btn {
  display: inline-block;
  padding: 13px 21px;
  border-radius: 7px;
  font-weight: 700;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 18%, transparent);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn.dark { background: var(--ink); color: var(--bg); }
.btn.dark:hover { background: color-mix(in srgb, var(--ink) 88%, var(--bg)); }
.btn.gold { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.btn.gold:hover { background: color-mix(in srgb, var(--gold) 88%, var(--bg)); border-color: color-mix(in srgb, var(--gold) 80%, var(--bg)); }
.btn.gold:active { background: color-mix(in srgb, var(--gold) 78%, var(--bg)); }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.iebtn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.iebtn:hover { border-color: var(--gold); background: var(--accent-soft); box-shadow: 0 4px 12px #0002; }
.iebtn:active { border-color: var(--gold-text); background: color-mix(in srgb, var(--accent-soft) 70%, var(--gold)); }

/* ---- Navigation (sticky) ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 6%;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.logo { font-weight: 800; font-size: 24px; letter-spacing: 0.5px; }
.logo span { color: var(--gold-text); }
.navlinks {
  display: flex;
  gap: 26px;
  align-items: center;
  margin-left: auto;
}
.navlinks a {
  font-size: 14px;
  font-weight: 600;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.navlinks a:hover { border-color: var(--gold); color: var(--gold-text); background: var(--accent-soft); }
.navlinks a[data-current="true"] { border-color: var(--gold-text); color: var(--ink); }
.navactions { display: flex; gap: 10px; align-items: center; }
.navtoggle { display: none; }

@media (max-width: 850px) {
  .navtoggle { display: inline-block; }
  .navlinks {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 8px 6% 14px;
    margin: 0;
  }
  .navlinks[data-open="true"] { display: flex; }
  .navlinks a { padding: 13px 4px; border-bottom: 1px solid var(--line); }
  .navlinks .btn { margin-top: 10px; border-bottom: 1px solid var(--ink); }
}

/* ---- Footer ---- */
footer { background: var(--footer); color: var(--footer-ink); padding: 45px 7% 25px; }
.foot { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.foot h3 { color: #fff; font-size: 16px; }
.foot p, .foot a { font-size: 14px; color: var(--footer-muted); line-height: 1.8; }
.foot a:hover { color: #fff; text-decoration: underline; }
.legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  border-top: 1px solid #ffffff18;
  margin-top: 28px;
  padding-top: 18px;
}
.legal a { font-size: 13px; color: var(--footer-muted); }
.copyright { font-size: 12px; color: #8793a7; margin-top: 14px; }
/* Contact line + copy button on the pages whose footer is otherwise bare
   (404, legal pages, chat) — scripts/add-footer-contact.mjs. */
.contactline {
  font-size: 13px;
  color: var(--footer-muted);
  text-align: center;
  margin: 14px auto 0;
}
.contactline a { color: var(--footer-muted); }
.contactline .copybtn { margin-left: 8px; }
.copybtn {
  border: 1px solid #ffffff30;
  background: transparent;
  color: var(--footer-ink);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 8px;
}
.copybtn:hover { border-color: var(--gold); }

/* ---- Status messages (forms, dialogs) ---- */
.note { font-size: 13px; line-height: 1.5; margin: 2px 0 8px; min-height: 18px; }
/* Success / error states read as banners everywhere at once: every form on the
   site calls setNote(el, msg, 'ok'|'err'), so this pair styles all of them —
   listing form, plan checkout, reserve, review, chat, staff add, account. */
.note.ok,
.note.err {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid;
  margin: 8px 0 12px;
}
.note.ok {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, var(--bg));
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
}
.note.err {
  color: var(--err);
  background: color-mix(in srgb, var(--err) 12%, var(--bg));
  border-color: color-mix(in srgb, var(--err) 45%, transparent);
}
/* Icons live in CSS so the JS never has to carry glyphs; empty messages
   (setNote(el, '')) collapse to nothing because the pseudo-element checks
   the :not(:empty) selector on the message itself. */
.note.ok::before { content: "\2713"; font-weight: 800; flex: 0 0 auto; }
.note.err::before { content: "\2717"; font-weight: 800; flex: 0 0 auto; }
.note:empty { display: none; }

/* ---- Skeleton loader (search results) ---- */
.skeleton { display: grid; gap: 10px; margin-top: 14px; }
.skeleton i {
  display: block;
  height: 16px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line) 25%, var(--cream) 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.1s linear infinite;
}
.skeleton i:nth-child(2) { width: 75%; }
.skeleton i:nth-child(3) { width: 55%; }
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---- Floating widgets ---- */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--gold);
  z-index: 55;
}
.totop {
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.totop.show { opacity: 1; visibility: visible; transform: translateY(0); }
.contactfab {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 800;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.contactfab:hover { filter: brightness(1.06); transform: translateY(-2px); }
.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--notice);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 10px 6%;
  font-size: 14px;
}
.notice a { text-decoration: underline; font-weight: 700; }

/* ---- Legal / doc pages ---- */
.doc { max-width: 800px; margin: 0 auto; padding: 60px 7% 40px; }
.doc h1 { font-size: 38px; margin: 10px 0 6px; }
.doc .updated { color: var(--muted); font-size: 13px; }
.doc h2 { font-size: 22px; margin: 34px 0 8px; }
.doc p, .doc li { color: var(--ink); font-size: 16px; line-height: 1.7; }
.doc ul { padding-left: 20px; }
.doc a { color: var(--gold-text); text-decoration: underline; }

/* ---- Print ---- */
@media print {
  .nav, .progress, .totop, .contactfab, .notice, .modal,
  #coverageMap, .skip, .copybtn, .searchbox { display: none !important; }
  body { color: #000; background: #fff; font-size: 12pt; }
  section, .doc { padding: 18pt 0; }
  a[href^="http"]::after, a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #444;
  }
  .btn { border: 1pt solid #000; color: #000; background: none; }
}

/* ---- Listing card (horizontal tile, single row height) ---- */
.listing {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  height: 160px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.listing:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--ink) 16%, transparent);
  border-color: var(--gold);
}
.listing__cover {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}
.listing__photo {
  height: 160px;
  width: 100%;
  object-fit: cover;
  background: transparent;
  pointer-events: none;
}
.listing__placeholder {
  height: 160px;
  width: 100%;
  background: linear-gradient(135deg, var(--cream), var(--line));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.listing__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--gold);
  color: var(--gold-ink);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 4px;
}
.listing__badge[data-seen="1"] { background: var(--ink); color: var(--bg); }
.listing__content {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  gap: 12px;
  background: var(--bg);
}
.listing__text { min-width: 0; flex: 1; }
.listing__location {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.listing__heading {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listing__price {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--gold-text);
  flex-shrink: 0;
  margin-left: auto;
}
.listing--rent .listing__price { color: var(--ink); }
.listing__open {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
}
.listing__open .modal {
  max-width: 480px;
  width: 100%;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 14px;
}
.listing__open .modal__photo {
  height: 168px;
}
.listing__open .modal__preview {
  height: 104px;
}
.listing__open .modal__controls {
  margin-top: 14px;
}
.listing__open .modal__actions {
  gap: 10px;
}
.listing.is-pending .listing__badge,
.listing.is-approved .listing__badge,
.listing.is-rejected .listing__badge {
  background: var(--ink);
  color: var(--bg);
  font-size: 10px;
  text-transform: uppercase;
}
.listing.is-rejected .listing__badge { background: var(--err); color: #fff; }
.listing.is-approved .listing__badge { background: var(--ok); color: #fff; }
.listing__pending-note {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--notice);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}
.listing__actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.listing__actions button {
  background: rgba(20, 33, 61, 0.7);
  color: #fff;
  border: none;
  border-radius: 4px;
  width: 26px;
  height: 26px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listing__actions button:hover { background: var(--ink); }
.listing[data-plan="rental"] .listing__cover::after {
  content: "Rental";
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gold-ink);
  background: rgba(198, 154, 82, 0.9);
  padding: 2px 6px;
  border-radius: 3px;
}
.listing[data-plan="premium"] .listing__cover::after {
  content: "Premium";
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gold-ink);
  background: rgba(198, 154, 82, 0.9);
  padding: 2px 6px;
  border-radius: 3px;
}
.listing[data-plan="business"] .listing__cover::after {
  content: "Business";
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gold-ink);
  background: rgba(198, 154, 82, 0.9);
  padding: 2px 6px;
  border-radius: 3px;
}
.listing--business .listing__price { color: var(--ink); }
.listing__photo-fallback-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  background: var(--cream);
}
.listing__photo-fallback {
  height: 160px;
  width: 100%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.listing__video-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--ink);
  color: var(--bg);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 6px;
  border-radius: 3px;
}

/* ---- Comparison table ---- */
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.compare th,
.compare td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare th {
  background: var(--cream);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink);
}
.compare th .rental,
.compare th .premium,
.compare th .business {
  font-weight: 800;
  font-size: 14px;
  display: block;
  margin-top: 2px;
}
.compare th .rental small,
.compare th .premium small,
.compare th .business small {
  font-weight: 600;
  color: var(--muted);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  display: block;
}
.compare td .plan-name {
  font-weight: 700;
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
}
.compare td .plan-price {
  font-size: 13px;
  color: var(--muted);
}
.compare td.yes { color: var(--ok); font-weight: 600; }
.compare td.no { color: var(--muted); }
.compare tr:last-child td,
.compare tr:last-child th {
  border-bottom: none;
}
.compare td:first-child {
  font-weight: 600;
  color: var(--ink);
}
.compare .rental-col { background: rgba(198, 154, 82, 0.04); }
.compare .premium-col { background: rgba(198, 154, 82, 0.07); }
.compare .business-col { background: rgba(198, 154, 82, 0.10); }
.compare th.rental { background: rgba(198, 154, 82, 0.10); }
.compare th.premium { background: rgba(198, 154, 82, 0.15); }
.compare th.business { background: rgba(198, 154, 82, 0.20); }

/* ---- Mobile breakpoints for the listing cards ---- */
@media (max-width: 1100px) {
  .listing { height: 160px; }
  .listing__cover { height: 160px; }
  .listing__photo { height: 160px; }
  .listing__placeholder { height: 160px; }
  .listing__photo-fallback { height: 160px; }
  .listing__text { min-width: 0; }
  .listing__heading {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .listing__location {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .listing__price {
    font-size: 14px;
    white-space: nowrap;
  }
  .listing__content {
    padding: 8px 10px;
    gap: 8px;
  }
}
@media (max-width: 768px) {
  .listing { height: 200px; }
  .listing__cover { height: 200px; }
  .listing__photo { height: 200px; }
  .listing__placeholder { height: 200px; }
  .listing__photo-fallback { height: 200px; }
  .listing__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
  }
  .listing__heading {
    font-size: 14px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .listing__location {
    font-size: 11px;
  }
  .listing__price {
    font-size: 15px;
    align-self: flex-start;
    margin-top: 4px;
  }
  .listing__actions {
    position: static;
    flex-direction: row;
    margin-top: 6px;
  }
  .listing__actions button {
    width: auto;
    padding: 0 8px;
    height: 26px;
    font-size: 12px;
  }
  .listing__badge {
    top: 8px;
    left: 8px;
    font-size: 10px;
    padding: 2px 6px;
  }
}

@media (max-width: 480px) {
  .listing { height: 180px; }
  .listing__cover { height: 180px; }
  .listing__photo { height: 180px; }
  .listing__placeholder { height: 180px; }
  .listing__photo-fallback { height: 180px; }
  .listing__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 10px;
  }
  .listing__heading {
    font-size: 13px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    margin-bottom: 2px;
  }
  .listing__price {
    font-size: 14px;
    align-self: flex-start;
    margin-top: 2px;
  }
  .listing__badge {
    top: 6px;
    left: 6px;
    font-size: 9px;
    padding: 2px 5px;
  }
}

/* ---- Listing grid (horizontal scrolling on mobile) ---- */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.listing-grid li { display: block; }
.listing-grid .listing { height: auto; }
.listing-grid .listing__cover { height: 180px; }
.listing-grid .listing__photo { height: 180px; }
.listing-grid .listing__placeholder { height: 180px; }
.listing-grid .listing__photo-fallback { height: 180px; }
.listing-grid .listing__content {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px 14px;
}
.listing-grid .listing__price {
  align-self: flex-start;
  margin-top: 2px;
}
.listing-grid .listing__heading {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.listing-grid .listing__location {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* ---- Listing card freeze/fixed height for map + card dual view ---- */
.listing-card-fixed {
  height: 160px;
  min-height: 160px;
}
.listing-card-fixed .listing__cover { height: 160px; }
.listing-card-fixed .listing__photo { height: 160px; }
.listing-card-fixed .listing__placeholder { height: 160px; }
.listing-card-fixed .listing__photo-fallback { height: 160px; }

@media (max-width: 720px) {
  .listing-card-fixed {
    height: 184px;
    min-height: 184px;
  }
  .listing-card-fixed .listing__cover { height: 184px; }
  .listing-card-fixed .listing__photo { height: 184px; }
  .listing-card-fixed .listing__placeholder { height: 184px; }
  .listing-card-fixed .listing__photo-fallback { height: 184px; }
}

/* ---- Sample listings: DEMO watermark over borrowed photos ------------------
   These photos are illustrative (Unsplash), not owned by any seller. Every
   surface that shows one must say so: a badge on the image, a repeating DEMO
   watermark across it, and a caption underneath. Live listings — the ones with
   real uploaded photos — get none of this. -------------------------------- */
.media { position: relative; display: block; overflow: hidden; background: var(--line, #e8e6e1); }
.media img { display: block; width: 100%; }
.demo-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-16deg, rgba(20, 33, 61, 0.16) 0 26px, rgba(255, 255, 255, 0.12) 26px 52px);
  pointer-events: none;
}
.demo-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-16deg);
  font-size: clamp(20px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 1;
}
.demo-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: #14213d;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 5px 9px;
  border-radius: 999px;
}
.demo-caption { font-size: 12.5px; line-height: 1.5; color: var(--muted, #6b7280); margin-top: 8px; }

/* ---- Reservation deposit dialog ---- */
.reserve-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line, #e8e6e1);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 14px;
}
.reserve-summary b { font-weight: 800; }
.fine { font-size: 12.5px; color: var(--muted, #6b7280); margin-top: 10px; line-height: 1.5; }
.result .reservebtn { margin-top: 10px; }
.result .reservebtn[disabled] { opacity: 0.6; cursor: progress; }

.result .media img { height: 150px; object-fit: cover; }
.result .media { border-radius: 8px; margin-top: 9px; }

/* ---- Account: role chooser + dashboards ---- */
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.rolecard {
  text-align: left;
  border: 1px solid var(--line, #e2e0dc);
  background: transparent;
  color: inherit;
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.rolecard:hover, .rolecard:focus-visible { border-color: #c69a52; transform: translateY(-2px); }
.rolecard b { display: block; font-size: 17px; margin-bottom: 6px; }
.rolecard span { display: block; font-size: 14px; line-height: 1.55; opacity: 0.85; }
.rolecard[disabled] { opacity: 0.6; cursor: progress; }
.dashtable { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.dashtable th, .dashtable td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line, #e2e0dc); vertical-align: middle; }
.dashtable th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--line, #e2e0dc); }
.pill.approved, .pill.paid { background: #d8f0dd; color: #14532d; }
.pill.pending, .pill.pending_payment { background: #fdf1d6; color: #7c4a03; }
.pill.rejected, .pill.cancelled { background: #fbe0e0; color: #7f1d1d; }
.pill.refunded { background: #dbe7ff; color: #1e3a8a; }
.minithumbs { display: inline-flex; gap: 4px; align-items: center; }
.minithumbs img { width: 34px; height: 26px; object-fit: cover; border-radius: 4px; }
@media (max-width: 760px) {
  .roles { grid-template-columns: 1fr; }
  .dashtable { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---- Print ---- */
@media print {
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .no-print {
    display: none !important;
  }
  
  .card, .plan, .sellerbox, .nav, .footer, .legal, .modal {
    display: none !important;
  }
  
  .print-page {
    visibility: visible !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    
  }
  
  body *:not(.print-page) {
    visibility: hidden;
  }
  
  body {
    background: white;
    color: black;
  }
}

/* ---- Chat page (public/chat.html + assets/chat.js) --------------------- */
.chatpage { padding: 46px 7% 70px; max-width: 1100px; margin: 0 auto; }
.chatpage h1 { font-size: 36px; margin: 6px 0 8px; }
.chatpage > .muted { margin-bottom: 22px; }

.chatgrid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 18px;
}
.threadlist {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius, 10px);
  padding: 16px;
}
.threadlist h2 { font-size: 16px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 1px; }
.threadlist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.threaditem {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.threaditem:hover { border-color: var(--gold); box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 12%, transparent); transform: translateY(-1px); }
.threaditem.active { border-color: var(--gold); background: var(--cream); }
.threaditem b { font-size: 14px; }
.threaditem span:not(.dot):not(.pill) { font-size: 12.5px; color: var(--muted); }
.threaditem .dot {
  position: absolute; top: 10px; right: 10px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 60%, var(--ink));
}

.threadpane {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius, 10px);
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}
.threadpane h2 { font-size: 18px; margin: 0 0 12px; }
.messages {
  flex: 1;
  overflow-y: auto;
  max-height: 46vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px 14px;
}
.msg {
  max-width: 74%;
  align-self: flex-start;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  padding: 9px 13px 6px;
}
.msg.mine {
  align-self: flex-end;
  background: color-mix(in srgb, var(--gold) 22%, var(--bg));
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  border-radius: 14px 14px 4px 14px;
}
.msg p { margin: 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.msg time { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; text-align: right; }

.chatform { display: flex; gap: 10px; margin-top: 8px; }
.chatform input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
.chatform input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.threadpane .fine { margin: 10px 0 0; }

@media (max-width: 820px) {
  .chatgrid { grid-template-columns: 1fr; }
  .messages { max-height: 52vh; }
  .msg { max-width: 88%; }
}

/* ---- Page backdrop band + photo credit (scripts/add-pageheroes.mjs) ----
   A short photographic header on every content page so no page opens as black
   text on white. The credit sits bottom-right of the photo, and the photo is
   decorative — the heading below it carries the meaning. ---------------- */
.pagehero {
  position: relative;
  height: clamp(150px, 24vw, 240px);
  background-size: cover;
  background-position: center 55%;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}
.pagehero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 22, 42, 0.45), rgba(11, 22, 42, 0.72));
}
.photo-credit {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 1;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(11, 22, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 3px 9px;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.photo-credit:hover, .photo-credit:focus-visible {
  color: #fff;
  background: rgba(11, 22, 42, 0.8);
  text-decoration: none;
}

/* Legal/doc pages: read as a warm card, not a bare white sheet. The backdrop
   band sits inside the card at its top, so clip it to the card's radius. */
.doc {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 34px auto 60px;
  overflow: hidden;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 6%, transparent);
}

/* ---- Seller / company profile page ----------------------------------- */
.companyactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.companyactions .btn { font-size: 14px; padding: 10px 16px; }
.company-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 18px;
  min-width: 96px;
  text-align: center;
}
.stat-number { display: block; font-size: 26px; font-weight: 800; color: var(--ink); }
.stat-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  font-weight: 700;
}
.company-info,
.company-listings,
.company-reviews {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  margin-top: 24px;
}
.company-info h3,
.company-listings h3,
.company-reviews h3 { margin: 0 0 6px; font-size: 20px; }
.company-branding {
  margin-top: 14px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--cream);
}
.company-branding h4 { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.reviews-list { display: grid; gap: 12px; margin-top: 14px; }
.review {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  padding: 14px 16px;
}
.reviewhead { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.reviewhead time { color: var(--muted); font-size: 12.5px; }
.reviewstars { color: var(--gold-text); letter-spacing: 2px; }
.review p { margin: 8px 0 0; line-height: 1.6; }
.reviewform {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
}
.reviewform h4 { margin: 0; font-size: 16px; }
.reviewform label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 5px;
}
.reviewform select,
.reviewform textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
.reviewform textarea { resize: vertical; min-height: 84px; }
.reviewform select:focus,
.reviewform textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.reviewrow { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.reviewrow .fine { margin: 0; }