/* Round 14, 14.1: palette updated to the QA-approved design reference (thiimatch-market-design-
   reference.html), keeping every existing variable NAME so market.js's selectors and every rule
   below that already reads var(--ink)/var(--green)/etc. keep working unchanged -- only the VALUES
   moved to the reference's warmer, higher-contrast palette. --green-strong and --line-green are
   newly defined here (see bug note below and the LINE button rule further down).
   Font note: 'Chakra Petch'/'Sarabun' are declared first in the stacks below so that self-hosted
   .woff2 files can be dropped into fonts/ later and activate with zero further code changes -- see
   handoff/TO-QA.md for why the actual font files are not shipped this round (network policy blocks
   fonts.googleapis.com, GitHub raw, and every package registry in this build environment; verified
   from both the cloud workspace and this device). Real Thai-capable fallbacks keep body text
   legible in the meantime. */
:root {
  /* Round 63, 63.2: the "เขียวมรกต-ทอง" palette the owner chose (19 ต.ค.) -- same variable names, new
     values from the work order (every text pair >= 4.5:1, asserted in the round 63 test). */
  /* Round 64, 64.1: a white page; --soft is the light tint for boxes and bands. */
  --bg: #FFFFFF;
  --soft: #F3FAF6;
  --surface: #ffffff;
  --ink: #10291F;
  /* Round 14 contrast fix: the reference's --muted (#7A7169) measures 4.44:1 on --bg, just under
     the 4.5:1 normal-text minimum. Darkened here (same hue) to 5.3:1+ on both --bg and --surface --
     see qa/contrast, added this round, which computes and asserts this for every pair actually
     used as text-on-background in this file. */
  --muted: #45604F;
  --muted-2: #6F8A7B;
  --line: #CDEBDB;
  --line-2: #E1F4EA;
  --green: #047857;
  /* Bug fix (found round 14): market.css referenced var(--green-strong) in three rules below
     without ever defining it, silently falling back to no color. It IS defined in the separate
     admin styles.css (#185746) -- defining it here too keeps this file self-contained. */
  --green-strong: #065F46;
  --gold: #A16207;
  /* Round 14 contrast fix: the reference's --clay/accent (#C1592F) measures only 4.43:1 for white
     text on it and 4.11:1 for the color used as text on --bg -- both below the 4.5:1 minimum for
     normal-size text. Darkened (same hue) to #AD502A: white-on-clay 5.3:1, clay-on-bg 4.9:1. */
  --clay: #B45309;
  --blue: #356d8c;
  --line-green: #06C755;
  --line-green-dark: #06ad4b;
  --card-image: #D3EFE0;
  --font-heading: 'Chakra Petch', 'Kanit', 'Sarabun', 'Noto Sans Thai', Tahoma, sans-serif;
  --font-body: 'Sarabun', 'Noto Sans Thai', 'Leelawadee UI', Tahoma, Arial, sans-serif;
}

/* Round 15, 15.3: self-hosted brand fonts. Files are .ttf, not .woff2 -- this build environment has
   fontTools/pyftsubset but no brotli anywhere (network to PyPI is blocked, same policy documented in
   round 14), and the work order's own fallback clause permits shipping .ttf when that is the case.
   Each file below is already subsetted (Thai U+0E01-0E5B + Latin + digits + common punctuation,
   see app/fonts/ and TO-QA.md for before/after sizes). font-display: swap keeps text visible in the
   fallback stack (Kanit/Noto Sans Thai/system fonts, declared above) while the real font loads, so
   the page never blocks on these files. No external domain is referenced anywhere here. */
@font-face {
  font-family: 'Chakra Petch';
  src: url("fonts/ChakraPetch-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url("fonts/ChakraPetch-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sarabun';
  src: url("fonts/Sarabun-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sarabun';
  src: url("fonts/Sarabun-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sarabun';
  src: url("fonts/Sarabun-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sarabun';
  src: url("fonts/Sarabun-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  letter-spacing: 0;
  margin: 0;
  min-height: 100vh;
}

h1, h2, h3, .price, .package-card .package-price, .hero-title {
  font-family: var(--font-heading);
  font-weight: 700;
}

button, input, select, textarea { font: inherit; }

/* Round 46: one row -- the name, the header menu (links then buttons; on phones a panel opened by
   "เมนู"), "ลงประกาศทรัพย์". At most 88 px tall from 1024 px up (see the phone rules further down). */
/* Round 64, 64.1: sticky (still the containing block of the phone menu panel and the notice), white with a
   little see-through and blur, a thin line under it. */
.market-header {
  -webkit-backdrop-filter: blur(10px);
  align-items: center;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #E5EFE9;
  display: flex;
  gap: 8px 12px;
  justify-content: space-between;
  padding: 10px max(20px, calc((100vw - 1240px) / 2));
  position: sticky;
  top: 0;
  z-index: 30;
}

.market-header-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; min-width: 0; }
.market-header .header-menu { flex: 1 1 auto; }
.market-header .owner-status-button, .market-header .buyer-login-button, .market-header .account-menu-button, .market-header .header-listing-button { font-size: 14px; min-height: 44px; padding: 8px 12px; }
.market-header .header-listing-button { flex: 0 0 auto; }
.market-header a.header-listing-button { align-items: center; display: inline-flex; text-decoration: none; }
/* From 900 px: one row down to 1024 px -- long labels ("ดูแผนที่ทรัพย์ประกาศทั้งหมด", "เข้าสู่ระบบ (กำลังเตรียม)")
   may take two short lines inside their own 44 px+ box instead of pushing the row onto a second line. */
@media (min-width: 900px) {
  .market-header .header-menu { gap: 6px; }
  .market-header .header-link { max-width: 8.5em; padding: 0 4px; }
  .market-header .owner-status-button, .market-header .buyer-login-button, .market-header .account-menu-button, .market-header .header-listing-button { line-height: 1.2; padding: 6px 10px; }
  .market-header .buyer-login-button { max-width: 8em; }
}
/* Round 47, 47.3: the map link's short label between 900 and 1099 px (its aria-label keeps the full name). */
.map-label-short { display: none; }
@media (min-width: 900px) and (max-width: 1099px) {
  .market-header .map-label-full { display: none; }
  .market-header .map-label-short { display: inline; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .market-header .brand-name { font-size: 18px; line-height: 1.25; }
}
/* Text links, not boxed buttons (lighter than the buttons next to them). --green-strong on #fff 8.3:1. */
.header-link { align-items: center; border-radius: 6px; color: var(--green-strong); display: inline-flex; font-size: 14px; font-weight: 700; line-height: 1.25; max-width: 11em; min-height: 44px; padding: 0 6px; text-decoration: underline; text-underline-offset: 3px; }
.header-link:hover { background: #DDF3E7; }
.header-link[hidden] { display: none; }
/* (Beats .map-page-link, which the map link also carries for its older rules.) */
.market-header .header-link { justify-content: flex-start; text-align: left; text-decoration: underline; }
.header-link:focus-visible, .header-menu-button:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.header-menu-button { align-items: center; background: #fff; border: 1px solid var(--green); border-radius: 6px; color: var(--green); cursor: pointer; display: none; flex: 0 0 auto; font-size: 14px; font-weight: 700; gap: 6px; min-height: 44px; padding: 8px 10px; }
.header-menu-button[aria-expanded="true"] { background: #DDF3E7; }
.label-short { display: none; }
/* The note after logging in (and account action results) sits under the header, outside the menu. */
.market-header .buyer-auth-notice { max-width: min(360px, calc(100vw - 28px)); position: absolute; right: max(14px, calc((100vw - 1240px) / 2)); top: calc(100% + 6px); z-index: 31; }
.market-header .buyer-auth-notice[hidden] { display: none; }
.buyer-login-button { background: var(--green-strong); border: 1px solid var(--green-strong); border-radius: 6px; color: #fff; cursor: pointer; font-weight: 700; min-height: 38px; padding: 8px 12px; }
.buyer-login-button:disabled { background: #daddd6; border-color: #daddd6; color: #68736f; cursor: not-allowed; }
.buyer-data-button { background: #fff; border: 1px solid var(--green); border-radius: 6px; color: var(--green); cursor: pointer; min-height: 38px; padding: 8px 10px; }
.buyer-delete-button { background: #fff; border: 1px solid #b45a4b; border-radius: 6px; color: #8c3529; cursor: pointer; min-height: 38px; padding: 8px 10px; }
.buyer-auth-status { color: var(--muted); font-size: 11px; line-height: 1.35; max-width: 135px; }
.buyer-auth-notice { background: #DDF3E7; border: 1px solid #BDE5CF; color: var(--green); font-size: 11px; max-width: 180px; padding: 5px 7px; }
.buyer-auth-notice.error { background: #fff0ed; border-color: #e3b2a9; color: #8c3529; }
.payment-slip-preview { border: 1px solid var(--line); border-radius: 8px; max-height: 320px; max-width: 100%; object-fit: contain; }
.owner-submit-button { background: var(--clay); border: 1px solid var(--clay); border-radius: 6px; color: #fff; cursor: pointer; font-weight: 700; min-height: 38px; padding: 8px 12px; }
.owner-status-button { background: #fff; border: 1px solid var(--green); border-radius: 6px; color: var(--green); cursor: pointer; font-weight: 700; min-height: 38px; padding: 8px 12px; }
.owner-status-result { min-height: 18px; }
.owner-status-card { border-left: 4px solid var(--green); display: grid; gap: 5px; padding: 10px 12px; }
.owner-status-card strong { color: var(--ink); }
.owner-status-card span { color: var(--muted); font-size: 13px; }
.owner-status-result.error { color: #a13e36; font-size: 13px; font-weight: 700; }
.owner-status-timeline { border-top: 1px solid var(--line); display: grid; gap: 0; list-style: none; margin: 7px 0 0; padding: 8px 0 0; }
.owner-status-timeline li { border-left: 2px solid var(--green); display: flex; justify-content: space-between; gap: 12px; padding: 5px 0 5px 12px; }
.owner-status-timeline strong { font-size: 12px; }
.owner-status-timeline time { color: var(--muted); font-size: 11px; text-align: right; }

.eyebrow {
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 4px;
}

h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 25px; margin-bottom: 0; }
h2 { font-size: 20px; margin-bottom: 0; }
h3 { font-size: 16px; line-height: 1.4; margin-bottom: 0; }

.admin-link,
.map-button {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  display: inline-flex;
  min-height: 38px;
  padding: 8px 12px;
  text-decoration: none;
}

main { margin: 0 auto; max-width: 1280px; padding: 18px 20px 40px; }
.privacy-page { max-width: 760px; }
/* Round 17, 17.3 (QA finding): .privacy-draft-notice had no rule anywhere, so it rendered as a
   bare unstyled block sitting flush (0px) against the first card below it. Adding real spacing
   (well over the 8px minimum QA asked for) plus a light "this is a draft" visual treatment using
   the existing --gold token, consistent with the rest of the page's palette. */
.privacy-draft-notice { background: rgba(173, 122, 29, 0.12); border: 1px solid var(--gold); border-radius: 6px; color: var(--ink); font-size: 13px; font-weight: 700; margin-bottom: 16px; padding: 10px 14px; }
.privacy-page .detail-section { background: var(--surface); border: 1px solid var(--line); margin-bottom: 12px; padding: 18px; }
.privacy-page .detail-section p { color: var(--muted); line-height: 1.7; margin: 10px 0 0; }
.privacy-updated { color: var(--muted); font-size: 12px; }

/* Round 43, 43.2: plan cards that compare rights. >= 900 px three across, below one per row (in
   the page order: free, single, Premium). Contrast: --ink / --muted on #fff 15.6:1 / 5.9:1; #fff on
   --green-strong 8.3:1 (Premium card, "สมัคร Premium" text); --ink on #F6E3B4 12:1 ("แนะนำ"). */
.pricing-band { background: #DDF3E7; border: 1px solid #BDE5CF; border-radius: 8px; display: grid; gap: 16px; justify-items: stretch; margin-bottom: 18px; padding: 20px; }
.pricing-intro { text-align: center; }
.pricing-intro p:last-child { color: var(--muted); font-size: 13px; margin: 5px 0 0; }
.pricing-grid { align-items: stretch; display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-card { align-content: start; background: #fff; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 8px; grid-template-rows: auto auto auto auto 1fr auto; min-width: 0; padding: 20px 18px 18px; position: relative; }
.tm-icon.plan-icon { color: var(--green); height: 34px; stroke-width: 1.6; width: 34px; }
.plan-name { color: var(--green); font-size: 17px; }
.plan-price { align-items: baseline; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.plan-price b { font-family: var(--font-heading); font-size: 34px; line-height: 1.1; }
.plan-price span { color: var(--muted); font-size: 14px; }
.plan-fit { color: var(--muted); font-size: 13px; margin: 0; }
.plan-rights { align-content: start; border-top: 1px solid var(--line); display: grid; gap: 7px; list-style: none; margin: 4px 0 0; padding: 12px 0 0; }
.plan-rights li { align-items: flex-start; display: flex; font-size: 14px; gap: 8px; line-height: 1.45; min-width: 0; }
.plan-rights li > span { overflow-wrap: anywhere; }
.plan-rights .tm-icon { color: var(--green); height: 18px; margin-top: 1px; stroke-width: 2.2; width: 18px; }
/* "Not included": the row fades (grey cross, struck-through text) and screen readers hear "ไม่รวม:"
   first -- never colour alone. The text keeps --muted, 5.9:1 on #fff. */
.plan-rights .plan-excluded { color: var(--muted); }
.plan-rights .plan-excluded > span { text-decoration: line-through; text-decoration-color: rgba(109, 101, 94, 0.55); }
.plan-rights .plan-excluded .tm-icon { color: var(--muted-2); stroke-width: 2; }
.plan-button { background: #fff; border: 1px solid var(--green); border-radius: 6px; color: var(--green); cursor: pointer; font-size: 15px; font-weight: 700; margin-top: 6px; min-height: 44px; padding: 10px 14px; width: 100%; }
.plan-button-primary { background: var(--clay); border-color: var(--clay); color: #fff; }
.plan-card-premium { background: var(--green-strong); border-color: var(--green-strong); color: #fff; }
.plan-card-premium .tm-icon.plan-icon, .plan-card-premium .plan-rights .tm-icon { color: #F6E3B4; }
.plan-card-premium .plan-name { color: #F6E3B4; }
.plan-card-premium .plan-price span, .plan-card-premium .plan-fit { color: #E4EFE9; }
.plan-card-premium .plan-rights { border-top-color: rgba(255, 255, 255, 0.28); }
.plan-button-premium { background: #fff; border-color: #fff; color: var(--green-strong); }
.plan-badge { background: #F6E3B4; border-radius: 0 8px 0 8px; color: var(--ink); font-size: 13px; font-weight: 700; margin: 0; padding: 5px 14px; position: absolute; right: -1px; top: -1px; }
.pricing-band > .owner-submit-button { justify-self: center; min-height: 44px; }
.plan-button:focus-visible, .why-link:focus-visible, .stats-free-button:focus-visible, .owner-confirm button:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }

/* Round 43, 43.3: "ทำไมต้องเลือกเรา" -- three cards (>= 900 px), two (600-899 px), one (< 600 px). */
.why-band { margin: 22px 0 18px; }
.why-intro { margin-bottom: 12px; text-align: center; }
.why-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.why-card { align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 10px; min-width: 0; padding: 18px; }
.tm-icon.why-icon { color: var(--green); height: 32px; stroke-width: 1.6; width: 32px; }
.check-list { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; }
.check-list li { align-items: flex-start; display: flex; font-size: 14px; gap: 8px; line-height: 1.45; min-width: 0; }
.check-list li > span { overflow-wrap: anywhere; }
.check-list .tm-icon { color: var(--green); height: 18px; margin-top: 1px; stroke-width: 2.2; width: 18px; }
.why-link { align-items: center; background: #fff; border: 1px solid var(--green); border-radius: 6px; color: var(--green); cursor: pointer; display: inline-flex; font-size: 14px; font-weight: 700; justify-self: start; min-height: 44px; padding: 8px 14px; text-decoration: none; }
.why-link[hidden] { display: none; }
main.is-searching .why-band { display: none; }

/* Screen-reader-only text (e.g. "ไม่รวม:" before an excluded plan right). */
.sr-only { border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }

/* Round 43, 43.5: "ยังขายอยู่" / "ขายแล้ว / ปิดประกาศ" on the owner's status page. */
.owner-confirm { border-top: 1px solid var(--line); display: grid; gap: 8px; margin-top: 6px; padding-top: 10px; }
.owner-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.owner-confirm-actions button { min-height: 44px; }
.owner-status-card .owner-confirm-due { color: var(--ink); font-weight: 700; }
.owner-confirm-close, .owner-close-no { background: #fff; border: 1px solid var(--muted); border-radius: 6px; color: var(--ink); cursor: pointer; font-weight: 700; padding: 8px 14px; }
.owner-close-confirm { background: #fff6f3; border: 1px solid #e3b2a9; border-radius: 6px; display: grid; gap: 8px; padding: 10px 12px; }
.owner-close-confirm[hidden] { display: none; }
.owner-close-confirm p { color: var(--ink); font-size: 13px; margin: 0; }
.owner-close-yes { background: #a13e36; border: 1px solid #a13e36; border-radius: 6px; color: #fff; cursor: pointer; font-weight: 700; padding: 8px 14px; }
.owner-confirm-message { color: var(--muted); font-size: 13px; margin: 0; }
.owner-confirm-message:empty { display: none; }
.owner-confirm-message.success { color: var(--green-strong); font-weight: 700; }
.owner-confirm-message.error { color: #a13e36; font-weight: 700; }

.search-band {
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 12px;
  /* Round 49: one more select (งบขั้นต่ำ) in the first row. */
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(130px, 0.6fr));
  padding: 14px;
}

.area-filter { border: 0; display: grid; gap: 8px; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(90px, 150px)); margin: 0; padding: 2px 0 0; }
.area-filter legend { color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 5px; padding: 0; }
.area-filter label span { font-size: 10px; }
.warehouse-filter { border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 8px; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 11px; }
.warehouse-filter[hidden] { display: none; }
.warehouse-filter legend { color: var(--muted); font-size: 12px; font-weight: 700; padding: 0 5px; }
.warehouse-filter label { align-items: center; display: flex; font-weight: 400; gap: 7px; }
.warehouse-filter input { accent-color: var(--green); min-height: 18px; width: 18px; }
.warehouse-filter .warehouse-area-filter { align-items: flex-end; grid-column: 1 / -1; justify-content: space-between; }
.warehouse-area-filter > span { align-items: center; display: flex; gap: 6px; }
.warehouse-filter .warehouse-area-filter input { min-height: 38px; padding: 8px 10px; width: 150px; }
.filter-actions { align-items: center; border-top: 1px solid var(--line); display: flex; grid-column: 1 / -1; justify-content: space-between; padding-top: 11px; }
.filter-actions span { color: var(--muted); font-size: 11px; }
.filter-actions > div { display: flex; gap: 7px; }
.filter-actions button { background: #fff; border: 1px solid var(--line); border-radius: 6px; color: var(--green); cursor: pointer; font-size: 12px; font-weight: 700; min-height: 34px; padding: 6px 10px; }
.filter-actions button:disabled { color: var(--muted); cursor: default; opacity: 0.55; }
.active-filter-list { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1 / -1; }
.active-filter-list[hidden] { display: none; }
.active-filter-chip { align-items: center; background: #DDF3E7; border: 1px solid #BDE5CF; border-radius: 5px; color: var(--green); display: inline-flex; font-size: 11px; gap: 6px; min-height: 30px; padding: 4px 5px 4px 9px; }
.active-filter-chip button { align-items: center; background: transparent; border: 0; border-radius: 4px; color: var(--green); cursor: pointer; display: inline-flex; font-size: 16px; height: 22px; justify-content: center; line-height: 1; padding: 0; width: 22px; }
.active-filter-chip button:hover { background: #C3E8D3; }
.filter-status { color: var(--green); font-size: 11px; grid-column: 1 / -1; margin: -4px 0 0; min-height: 14px; text-align: right; }

label { color: var(--muted); display: grid; font-size: 12px; font-weight: 700; gap: 6px; }
input, select { background: #fff; border: 1px solid var(--line); border-radius: 6px; min-height: 40px; padding: 8px 10px; width: 100%; }
input:focus, select:focus, button:focus-visible { outline: 3px solid rgba(4, 120, 87, 0.22); outline-offset: 2px; }

.market-results { padding-top: 24px; }
.recent-section { border-bottom: 1px solid var(--line); padding: 20px 0; }
.recent-section[hidden] { display: none; }
.recent-head { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 10px; }
.recent-head button { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 6px; text-decoration: underline; }
.recent-list { display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow-x: auto; }
.recent-item { background: #fff; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); cursor: pointer; display: grid; gap: 5px; min-width: 170px; padding: 10px; text-align: left; }
.recent-item:hover { border-color: var(--green); }
.recent-item span, .recent-item small { color: var(--muted); font-size: 10px; }
.recent-item strong { font-size: 12px; line-height: 1.4; }
.result-head { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 12px; }
.result-controls { align-items: flex-end; display: flex; gap: 10px; }
.sort-control { gap: 3px; }
.sort-control span { font-size: 11px; }
.sort-control select { min-height: 40px; min-width: 170px; }
.view-switch {
  background: #e9ece7;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  gap: 3px;
  padding: 3px;
}
.view-option {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  min-height: 40px;
  padding: 8px 13px;
}
/* Round 15, 15.2 (QA finding L1): the inherited --muted text color measured 4.13-4.14:1 once
   composited against this translucent background over the .view-switch pill -- below the
   4.5:1 minimum. Overriding to --ink (11:1+ on either the inactive-tab or active-tab backdrop)
   fixes it without changing the badge's visual weight or position. */
.view-option strong { background: rgba(31, 42, 39, 0.08); border-radius: 4px; color: var(--ink); font-size: 11px; min-width: 24px; padding: 3px 6px; text-align: center; }
.view-option.is-active { background: #fff; border-color: #c8cec6; box-shadow: 0 1px 3px rgba(31, 42, 39, 0.12); color: var(--ink); }
.favorite-filter span { color: var(--clay); font-size: 17px; line-height: 1; }
.favorite-filter.is-active { background: var(--clay); border-color: var(--clay); color: #fff; }
.favorite-filter.is-active span { color: #fff; }
/* Round 15, 15.2: same fix as .view-option strong above, for the "รายการโปรด" count when the
   favorites tab is active. Raising the white overlay to 55% opacity (still visibly a chip on
   the clay pill, just lighter) and switching its text to --ink measures 7.2:1. */
.favorite-filter.is-active strong { background: rgba(255, 255, 255, 0.55); color: var(--ink); }
.market-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.property-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  min-width: 0;
  overflow: hidden;
  text-align: left;
}

.property-media { aspect-ratio: 16 / 9; background: var(--card-image); position: relative; }
.property-media img { height: 100%; object-fit: cover; width: 100%; }
.property-placeholder { align-items: center; color: var(--muted); display: flex; height: 100%; justify-content: center; }
.verified-badge { background: var(--green); border-radius: 5px; color: #fff; font-size: 11px; left: 9px; padding: 5px 7px; position: absolute; top: 9px; }
.favorite-button {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #b77864;
  cursor: pointer;
  display: flex;
  font-size: 22px;
  height: 38px;
  justify-content: center;
  position: absolute;
  right: 9px;
  top: 9px;
  width: 38px;
}
.favorite-button.is-favorite { background: var(--clay); border-color: var(--clay); color: #fff; }
.property-body { display: grid; gap: 9px; padding: 14px; }
.meta { color: var(--muted); font-size: 12px; margin-bottom: 0; }
.match-insight { align-items: center; background: #DDF3E7; border-left: 3px solid var(--green); display: grid; gap: 1px 8px; grid-template-columns: auto 1fr; padding: 7px 9px; }
.match-insight strong { color: var(--green); font-size: 18px; grid-row: 1 / 3; }
.match-insight span { color: var(--ink); font-size: 11px; font-weight: 700; }
.match-insight small { color: var(--muted); font-size: 10px; line-height: 1.35; min-height: 14px; }
/* Round 64, 64.4: dark (easier to read on white) and larger. */
.price { color: var(--ink); font-size: 24px; }
.unit-price { color: var(--muted); font-size: 11px; margin-top: -6px; }
.detail-row, .tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: #eef2ee; border-radius: 5px; color: #52605b; font-size: 11px; padding: 5px 7px; }
.tag { border: 1px solid #d8ddd6; border-radius: 5px; color: var(--blue); font-size: 11px; padding: 4px 7px; }
.compare-toggle { background: #fff; border: 1px solid var(--line); border-radius: 6px; color: var(--green); cursor: pointer; font-size: 12px; font-weight: 700; min-height: 36px; padding: 7px 9px; width: 100%; }
.compare-toggle.is-selected { background: #DDF3E7; border-color: var(--green); }
.empty-state { border: 1px dashed #bdc4bc; color: var(--muted); display: grid; gap: 7px; grid-column: 1 / -1; padding: 40px; text-align: center; }
.empty-state strong { color: var(--ink); font-size: 16px; }
.empty-clear-button { background: var(--green); border: 1px solid var(--green); border-radius: 6px; color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; justify-self: center; margin-top: 6px; min-height: 38px; padding: 8px 14px; }
.empty-clear-button:hover { background: var(--green-strong); }
.empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.empty-request-button { background: var(--clay); border: 1px solid var(--clay); border-radius: 6px; color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; min-height: 38px; padding: 8px 14px; }
.request-shell { max-width: 680px; }
.owner-listing-shell { max-width: 720px; }
.owner-area-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.submission-note { background: #f5f6f2; border-left: 3px solid var(--gold); color: var(--muted); font-size: 11px; line-height: 1.55; margin: 0; padding: 8px 10px; }
.request-shell .inquiry-form { border-top: 0; margin-top: 0; }
.inquiry-status.success { color: var(--green); font-weight: 700; }

.compare-bar { align-items: center; background: #1f2a27; border-radius: 7px; bottom: 14px; color: #fff; display: flex; gap: 10px; left: 50%; max-width: calc(100vw - 24px); padding: 10px 12px; position: fixed; transform: translateX(-50%); z-index: 8; }
.compare-bar[hidden] { display: none; }
.compare-bar span, .compare-bar p { font-size: 12px; margin: 0; white-space: nowrap; }
.compare-bar p { color: #d4ddd8; min-width: 130px; }
.compare-bar button { background: transparent; border: 1px solid #74807b; border-radius: 5px; color: #fff; cursor: pointer; min-height: 34px; padding: 6px 10px; }
.compare-bar .compare-open { background: var(--clay); border-color: var(--clay); font-weight: 700; }
.compare-bar .compare-open:disabled { cursor: not-allowed; opacity: 0.45; }
.compare-shell { max-width: 920px; }
.compare-table-wrap { overflow-x: auto; padding-top: 14px; }
.compare-table { border-collapse: collapse; min-width: 680px; width: 100%; }
.compare-table th, .compare-table td { border: 1px solid var(--line); font-size: 12px; line-height: 1.5; padding: 10px; text-align: left; vertical-align: top; }
.compare-table thead th { background: #DDF3E7; color: var(--green); }
.compare-table tbody th { background: #f5f6f2; min-width: 120px; }

dialog { border: 0; border-radius: 8px; max-width: min(760px, calc(100vw - 24px)); padding: 0; width: 760px; }
dialog::backdrop { background: rgba(31, 42, 39, 0.46); }
.dialog-shell { background: var(--surface); padding: 18px; }
.dialog-head { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding-bottom: 12px; }
.close-btn { background: #f2f3ef; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-size: 20px; height: 36px; width: 36px; }
/* Round 18, 18.4: replaces the old fixed 3-column grid of every photo (unusable once a listing can
   have up to 20) with one large main image plus a horizontally-scrolling thumbnail strip. */
.public-gallery { margin: 14px 0; }
.public-gallery:empty { display: none; }
.gallery-main { align-items: center; display: grid; gap: 6px; grid-template-columns: auto 1fr auto; }
.gallery-image { aspect-ratio: 4 / 3; border-radius: 8px; grid-column: 1 / -1; grid-row: 1; height: auto; object-fit: cover; width: 100%; }
.gallery-nav { background: rgba(15, 23, 42, 0.55); border: 0; border-radius: 999px; color: #fff; cursor: pointer; font-size: 20px; grid-row: 1; height: 36px; line-height: 1; width: 36px; z-index: 1; }
.gallery-prev { grid-column: 1; justify-self: start; margin-left: 8px; }
.gallery-next { grid-column: 3; justify-self: end; margin-right: 8px; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding-bottom: 4px; }
.gallery-thumb { background: none; border: 2px solid transparent; border-radius: 6px; cursor: pointer; flex: 0 0 auto; padding: 0; }
.gallery-thumb img { aspect-ratio: 4 / 3; border-radius: 4px; display: block; height: 60px; object-fit: cover; width: 80px; }
.gallery-thumb.is-active { border-color: var(--green, #0f766e); }
/* Round 65, 65.4: dark like the price on the cards (round 64, 64.4); the size is unchanged. */
.dialog-price { color: var(--ink); display: block; font-size: 26px; margin: 12px 0; }
.public-details { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
.detail-item { background: #f5f6f2; border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 3px; padding: 10px; }
.detail-item span { color: var(--muted); font-size: 11px; }
/* Round 21, 21.4: group subheadings + full-width rows inside the same .public-details grid. */
.detail-group-heading { border-top: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 700; grid-column: 1 / -1; margin-top: 4px; padding-top: 10px; }
.detail-group-heading:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.detail-full-row { grid-column: 1 / -1; }
.verification-list { color: var(--ink); display: grid; gap: 4px; grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; }
.verification-list li { font-size: 13px; }
.verification-fallback { color: #45514d; font-size: 13px; grid-column: 1 / -1; margin: 0; }
.public-description { background: #f7f8f5; border-left: 3px solid var(--green); color: #45514d; font-size: 13px; line-height: 1.65; margin: 12px 0 0; padding: 10px 12px; white-space: pre-wrap; }
.detail-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.map-button { background: var(--green); border-color: var(--green); color: #fff; margin: 0 0 12px; }
.map-button[hidden] { display: none; }
.dialog-favorite { background: #fff; border: 1px solid var(--clay); border-radius: 6px; color: var(--clay); cursor: pointer; min-height: 38px; padding: 8px 12px; }
.dialog-favorite.is-favorite { background: #f8ece8; font-weight: 700; }
.share-button { background: #fff; border: 1px solid var(--green); border-radius: 6px; color: var(--green); cursor: pointer; min-height: 38px; padding: 8px 12px; }
.share-status { color: var(--green); font-size: 12px; margin: 7px 0 0; min-height: 18px; }

.loan-calculator { background: #f5f7f3; border: 1px solid var(--line); border-radius: 7px; margin-top: 14px; padding: 0 12px; }
.loan-calculator summary { color: var(--green); cursor: pointer; font-size: 13px; font-weight: 700; padding: 12px 0; }
/* Round 21, 21.2: the owner form's optional extra-details group -- same collapsed-by-default
   pattern as .loan-calculator so it does not lengthen the form for owners who skip it. */
.owner-extra-details { background: #f5f7f3; border: 1px solid var(--line); border-radius: 7px; margin: 4px 0; padding: 0 12px 12px; }
.owner-extra-details summary { color: var(--green); cursor: pointer; font-size: 13px; font-weight: 700; padding: 12px 0; }
.owner-extra-details .inquiry-fields { margin-bottom: 10px; }
.loan-fields { border-top: 1px solid var(--line); display: grid; gap: 9px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 12px; }
.input-suffix { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 6px; display: flex; overflow: hidden; }
.input-suffix input { border: 0; border-radius: 0; min-width: 0; }
.input-suffix span { color: var(--muted); font-size: 12px; padding-right: 10px; }
.plan-summary { background: rgba(4, 120, 87, 0.07); border: 1px solid rgba(4, 120, 87, 0.2); border-radius: 8px; display: grid; gap: 4px; margin: 14px 0; padding: 12px; }
.plan-summary strong { color: var(--green-strong); }
.plan-summary span { color: var(--muted); font-size: 13px; }
.plan-summary ul { margin: 4px 0 0; padding-left: 18px; }
.plan-summary li { font-size: 13px; margin: 3px 0; }
.direct-contact a { color: var(--green-strong); font-weight: 700; }
.loan-result { display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.loan-result > div { background: #fff; border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 4px; padding: 10px; }
.loan-result span { color: var(--muted); font-size: 11px; }
.loan-result strong { color: var(--clay); font-size: 18px; }
.loan-calculator > p { color: var(--muted); font-size: 10px; margin: 9px 0 12px; }

.inquiry-form {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
}

.inquiry-criteria { background: #DDF3E7; border-left: 3px solid var(--green); color: #42504b; font-size: 12px; line-height: 1.6; margin: 0; padding: 9px 11px; }
.inquiry-criteria[hidden] { display: none; }

.inquiry-fields { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inquiry-form textarea { border: 1px solid var(--line); border-radius: 6px; min-height: 82px; padding: 9px 10px; resize: vertical; width: 100%; }
.consent-row { align-items: flex-start; display: flex; font-weight: 400; gap: 8px; }
.consent-row input { flex: 0 0 auto; min-height: 18px; width: 18px; }
.submit-inquiry { background: var(--clay); border: 1px solid var(--clay); border-radius: 6px; color: #fff; cursor: pointer; font-weight: 700; min-height: 42px; padding: 9px 12px; }
.submit-inquiry:disabled { cursor: wait; opacity: 0.65; }
.inquiry-status { color: var(--green); font-size: 12px; margin-bottom: 0; min-height: 18px; }
.inquiry-status.error { color: #a13e36; }
.owner-photo-field { display: grid; gap: 6px; }
.owner-photo-field > label { display: block; }
.owner-photo-field small { color: var(--muted); font-size: 12px; font-weight: 400; }
.owner-photo-field small.is-error { color: #a13e36; font-weight: 700; }

/* Round 44, 44.3: the owner's photos in the order they will be sent -- number, "รูปปก" on the first,
   ◀ ▶ × buttons at least 44 px (a finger on a phone). Two across on phones, up to four on a computer.
   --muted on #fff 5.9:1 · #fff on --green-strong 8.3:1 · #fff on #8c3529 8.4:1. */
.owner-photo-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); list-style: none; margin: 0; padding: 0; }
.owner-photo-list[hidden] { display: none; }
.owner-photo-tile { background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: grab; display: grid; gap: 6px; min-width: 0; padding: 6px; position: relative; }
.owner-photo-tile.is-dragging { opacity: 0.45; }
.owner-photo-tile.is-over-limit { background: #fbeeea; border-color: #e3b2a9; }
.owner-photo-tile.is-over-limit img { opacity: 0.5; }
.owner-photo-tile img { aspect-ratio: 4 / 3; border-radius: 5px; display: block; object-fit: cover; width: 100%; }
.owner-photo-number { background: var(--ink); border-radius: 999px; color: #fff; font-size: 12px; font-weight: 700; left: 12px; line-height: 24px; min-width: 24px; padding: 0 6px; position: absolute; text-align: center; top: 12px; }
.owner-photo-cover, .owner-photo-excess { border-radius: 4px; font-size: 12px; font-weight: 700; padding: 2px 7px; position: absolute; right: 12px; top: 12px; }
.owner-photo-cover { background: var(--green-strong); color: #fff; }
.owner-photo-excess { background: #8c3529; color: #fff; }
.owner-photo-actions { display: grid; gap: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.owner-photo-button { background: #fff; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); cursor: pointer; font-size: 16px; font-weight: 700; min-height: 44px; min-width: 44px; padding: 0; }
.owner-photo-button:disabled { color: var(--muted-2); cursor: not-allowed; opacity: 0.5; }
.owner-photo-remove { border-color: #e3b2a9; color: #8c3529; }
.owner-photo-status { color: var(--green); font-size: 12px; margin: 0; min-height: 18px; }
.owner-photo-status.is-error { color: #a13e36; font-weight: 700; }

/* Round 44, 44.4: "ตำแหน่งแปลง" -- the owner's link, the display level and Street View. */
.owner-location-fields { border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 12px; margin: 0; min-width: 0; padding: 12px; }
.owner-location-fields > legend { color: var(--ink); font-size: 13px; font-weight: 700; padding: 0 4px; }
.owner-map-link, .owner-street-view { display: grid; gap: 6px; min-width: 0; }
.owner-map-link > label, .owner-street-view > label { display: block; }
.owner-location-fields small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.owner-link-row { display: flex; gap: 8px; min-width: 0; }
.owner-link-row input { flex: 1 1 auto; min-width: 0; }
.owner-link-button { background: #fff; border: 1px solid var(--green); border-radius: 6px; color: var(--green); cursor: pointer; flex: 0 0 auto; font-weight: 700; min-height: 44px; padding: 8px 12px; }
.owner-link-status { color: var(--green); font-size: 12px; margin: 0; overflow-wrap: anywhere; }
.owner-link-status:empty { display: none; }
.owner-link-status.is-error { color: #a13e36; font-weight: 700; }
.owner-link-choices { display: grid; gap: 6px; }
.owner-link-choices[hidden] { display: none; }
.owner-link-choice { background: #fff; border: 1px solid var(--green); border-radius: 6px; color: var(--ink); cursor: pointer; display: grid; gap: 2px; min-height: 44px; padding: 8px 10px; text-align: left; }
.owner-link-choice span { color: var(--muted); font-size: 12px; }
.owner-link-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.owner-link-check { color: var(--green-strong); font-size: 13px; font-weight: 700; }
.owner-link-check[hidden], .owner-link-clear[hidden] { display: none; }
.owner-link-clear { background: none; border: 0; color: #8c3529; cursor: pointer; font-size: 13px; font-weight: 700; min-height: 44px; padding: 0 4px; text-decoration: underline; }
.owner-precision { border: 0; display: grid; gap: 6px; margin: 0; min-width: 0; padding: 0; }
.owner-precision legend { color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 4px; padding: 0; }
.owner-precision label { align-items: flex-start; color: var(--ink); cursor: pointer; display: flex; font-weight: 400; gap: 8px; line-height: 1.45; min-height: 44px; }
.owner-precision input { flex: 0 0 auto; margin: 2px 0 0; min-height: 20px; width: 20px; }
.owner-precision strong { color: var(--ink); }
.owner-street-view-preview { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.owner-street-view-preview[hidden] { display: none; }
.owner-street-view-preview iframe { aspect-ratio: 16 / 10; border: 0; display: block; width: 100%; }

.related-section { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.related-head { margin-bottom: 10px; }
.related-list { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.related-item { background: #f7f8f5; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); cursor: pointer; display: grid; gap: 5px; min-width: 0; padding: 10px; text-align: left; }
.related-item:hover { border-color: var(--green); }
.related-item span, .related-item small { color: var(--muted); font-size: 11px; }
.related-item strong { font-size: 13px; line-height: 1.45; }
.related-empty { color: var(--muted); font-size: 12px; }

@media (max-width: 899px) {
  .pricing-grid { grid-template-columns: 1fr; justify-self: center; max-width: 560px; width: 100%; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .why-grid { grid-template-columns: 1fr; }
  .pricing-band { padding: 16px 12px; }
  .plan-card { padding: 18px 14px 14px; }
}

@media (max-width: 900px) {
  .search-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-field { grid-column: 1 / -1; }
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .owner-submit-button { font-size: 12px; }
  .admin-link { font-size: 12px; }
  h1 { font-size: 20px; }
  main { padding: 12px; }
  .search-band, .market-grid, .public-details { grid-template-columns: 1fr; }
  .recent-list { grid-template-columns: none; grid-auto-columns: minmax(190px, 75vw); grid-auto-flow: column; }
  .search-field { grid-column: auto; }
  .area-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .warehouse-filter { grid-template-columns: 1fr; }
  .warehouse-filter .warehouse-area-filter { align-items: stretch; flex-direction: column; }
  .warehouse-filter .warehouse-area-filter input { width: 100%; }
  .filter-actions { align-items: flex-start; gap: 8px; }
  .filter-actions > div { flex-direction: column; }
  /* Round 18, 18.4: at 375px the thumbnail strip must scroll within itself, never the page. */
  .gallery-thumbs { max-width: 100%; }
  .gallery-thumb img { height: 48px; width: 64px; }
  .loan-fields, .loan-result { grid-template-columns: 1fr; }
  .related-list { grid-template-columns: 1fr; }
  .inquiry-fields { grid-template-columns: 1fr; }
  .result-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .result-controls { align-items: stretch; flex-direction: column; width: 100%; }
  .sort-control select { width: 100%; }
  .view-switch { align-self: stretch; }
  .view-option { flex: 1; justify-content: center; padding-inline: 9px; }
  .compare-bar { bottom: 8px; display: grid; grid-template-columns: 1fr auto auto; width: calc(100vw - 16px); }
  .compare-bar p { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
}

/* ============================================================================================
   Round 14, 14.1-14.10: new sections added by the market-page design refresh (utility bar, hero,
   quick category chips, listing-card type tag + updated-date, load-more, trust strip, site
   footer). Every color pair used as text-on-background here has been checked to be >=4.5:1 (or
   >=3:1 for large/bold text) via qa/contrast-check.js -- see handoff/TO-QA.md for the computed
   numbers. Existing classes/selectors above this line are UNCHANGED except where noted (:root
   values, .buyer-login-button color variables) so market.js's DOM bindings keep working exactly
   as before.
   ============================================================================================ */

.util-bar {
  align-items: center;
  background: var(--green);
  color: #fff;
  display: flex;
  font-size: 12px;
  gap: 10px;
  justify-content: space-between;
  padding: 6px max(20px, calc((100vw - 1240px) / 2));
}
.util-bar a { color: #fff; text-decoration: underline; }

.brand-name {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
/* Round 32, 32.1: house icon + site name, linking to a clean /market.html. Looks like the old
   plain name (no underline, same colour); hover turns it --green-strong and underlines the name;
   a 44px-tall hit area; clear focus ring. The name may wrap on very narrow phones instead of
   pushing the header buttons off-screen. */
.brand-home {
  align-items: center;
  border-radius: 6px;
  color: var(--ink);
  display: inline-flex;
  gap: 8px;
  min-height: 44px;
  min-width: 0;
  text-decoration: none;
}
.brand-home .brand-name { color: inherit; overflow-wrap: anywhere; }
.brand-home-icon { color: var(--green-strong); height: 24px; width: 24px; }
.brand-home:hover { color: var(--green-strong); }
.brand-home:hover .brand-name { text-decoration: underline; text-underline-offset: 4px; }
.brand-home:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }

/* Round 17, 17.1 (QA report: hero/quick-chips break at browser zoom-out / wide screens): the
   "max(20px, calc((100vw - 1240px) / 2))" formula centers a FULL-BLEED element (one placed
   OUTSIDE <main>, like .util-bar/.site-header/.trust-strip/.site-footer, which have no side
   padding of their own) against the viewport. .hero and .quick-chips are INSIDE <main>, which
   already has its own centering (max-width: 1280px; margin: 0 auto) and its own side padding
   (20px). Reusing the full-bleed formula here stacked a second, ever-growing 100vw-based padding
   on top of main's -- the wider the viewport (or the more the browser is zoomed out, which
   enlarges the CSS viewport), the more horizontal space it ate, until .hero-copy's content had
   nowhere left to go (QA measured it collapsing to 0 width with horizontal scroll appearing at
   50%/33% zoom on a 1920px screen). Fixed to plain, non-viewport-relative padding/margin -- QA
   validated this exact fix passes at 375/768/1280/1440px and zoom 100/90/80/67/50/33/25%. */
.hero {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 32px 28px;
}
.hero-copy { display: grid; gap: 12px; max-width: 720px; }
/* Round 48: on a listing / district page the hero heading is a <p class="hero-title"> (the page has
   its own H1) and looks exactly the same. */
.hero-copy h1, .hero-copy .hero-title { color: var(--ink); font-size: 30px; line-height: 1.3; margin: 0; }
.hero-copy p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }
.hero-copy .owner-submit-button { justify-self: start; }

.quick-chips {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
.chip-tab {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  min-height: 38px;
  padding: 8px 16px;
  white-space: nowrap;
}
.chip-tab.is-active { background: var(--clay); border-color: var(--clay); color: #fff; }

.type-tag {
  background: rgba(42, 36, 32, 0.82);
  border-radius: 5px;
  bottom: 9px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  left: 9px;
  padding: 4px 8px;
  position: absolute;
}
.updated-label { color: var(--muted); font-size: 11px; }

.load-more-button {
  background: var(--surface);
  border: 1px solid var(--green);
  border-radius: 6px;
  color: var(--green);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  grid-column: 1 / -1;
  justify-self: center;
  min-height: 42px;
  padding: 10px 20px;
}
.load-more-button:hover { background: var(--green); color: #fff; }

.trust-strip { border-top: 1px solid var(--line); margin-top: 28px; padding: 28px max(20px, calc((100vw - 1240px) / 2)); }
/* Round 15, 15.4 (owner order 23 Sep 2026): the loan-calculator ad-copy trust-strip item was
   removed from market.html (the actual loan calculator tool on the listing detail page is untouched --
   only this marketing blurb went). The work order's suggested replacement copy
   ("เทียบราคากับฐานประเมินรายอำเภอ") would claim a public over/under-assessed-value badge that does
   not exist -- publicValuePerRai is computed in server.js purely for internal admin risk-scoring and is
   never included in the /api/public/listings response, so showing that copy on the public page would be
   false. Building a real public-facing feature for it is out of this round's explicit scope ("ทำเฉพาะ
   ที่สั่ง ห้ามทำเกิน"), so the safer choice is to drop the strip to the two claims the site actually
   backs today. Grid now sizes for 2 items instead of 3. */
.trust-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trust-item { display: grid; gap: 6px; }
.trust-item strong { color: var(--ink); font-family: var(--font-heading); font-size: 15px; }
.trust-item p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }

.site-footer { background: #0B2E22; color: #fff; margin-top: 0; padding: 32px max(20px, calc((100vw - 1240px) / 2)) 0; }
.site-footer .brand-name { color: #fff; }
.footer-grid { display: grid; gap: 24px; grid-template-columns: 2fr 1fr 1fr; padding-bottom: 24px; }
.footer-brand p { color: #C9C2B8; font-size: 13px; line-height: 1.6; }
.footer-contact { margin-top: 8px; }
.footer-contact-name { color: #fff; font-size: 13px; font-weight: 700; margin: 0; }
.footer-contact p { color: #C9C2B8; font-size: 13px; margin: 2px 0 0; }
.footer-contact a { color: #C9C2B8; }
.footer-heading { color: #fff; font-size: 12px; font-weight: 700; margin: 0 0 10px; text-transform: uppercase; }
.footer-links ul { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.footer-links a, .footer-links button {
  background: transparent;
  border: 0;
  color: #C9C2B8;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  text-align: left;
  text-decoration: none;
}
.footer-links a:hover, .footer-links button:hover { color: #fff; text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.16); color: #C9C2B8; font-size: 12px; padding: 14px 0; }

/* Round 26, 26.2: self-hosted ad banners (server-rendered, see server.js renderAdBanner; renamed from .ad-banner* in round 28 so ad blockers' generic
   class rules don't hide them -- the visible "โฆษณา" label is unchanged). The
   picture box has a fixed 4:1 shape (the recommended upload is 1200x300; shown at most 800x200
   on wide screens since round 27) so nothing below it jumps
   while it loads, and object-fit: contain never crops an advertiser's artwork. The grid banner spans
   the whole row, so the listing cards around it keep their normal size at every breakpoint. The
   "โฆษณา" label is white on --ink (15.6:1) and the sponsor name --muted on white (5.9:1). */
.tm-feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  /* Round 27, 27.1: one centred column at most 800px wide, so on a desktop the picture tops out
     at 800x200 (still 4:1) and the "โฆษณา" row shares the picture's left edge. Below ~816px of
     banner width the column is simply the full width, exactly as in round 26 (phones unchanged). */
  grid-template-columns: minmax(0, 800px);
  justify-content: center;
  min-width: 0;
  padding: 8px;
}
.tm-feature--top { margin: 16px 0 0; }
.tm-feature--grid { grid-column: 1 / -1; }
.tm-feature-head { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.tm-feature-tag {
  background: var(--ink);
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  padding: 2px 8px;
}
.tm-feature-owner { color: var(--muted); font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.tm-feature-link { border-radius: 6px; display: block; min-width: 0; overflow: hidden; }
.tm-feature-link:focus-visible { outline: 3px solid var(--green-strong); outline-offset: 2px; }
.tm-feature-link img {
  aspect-ratio: 4 / 1;
  background: var(--card-image);
  display: block;
  height: auto;
  object-fit: contain;
  width: 100%;
}
/* Round 29, 29.2: the top frame's rotating slides (switched instantly -- no animation, so nothing
   to turn off for reduced motion). Only one slide is ever displayed and every
   slide has the same shape (one-line label row + the fixed 4:1 picture), so switching never moves
   the content below. The advertiser name is kept to one line (ellipsis) for the same reason. The
   dots are 24x24 tap targets drawn as a small ring; the current one is filled --green-strong. */
.tm-feature-slides { display: grid; min-width: 0; }
.tm-feature-slide { display: grid; gap: 6px; min-width: 0; }
.tm-feature-slide[hidden] { display: none; }
.tm-feature--top .tm-feature-head { flex-wrap: nowrap; }
.tm-feature--top .tm-feature-owner { overflow: hidden; overflow-wrap: normal; text-overflow: ellipsis; white-space: nowrap; }
.tm-feature-dots { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; min-width: 0; }
.tm-feature-dot {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  padding: 0;
  width: 24px;
}
.tm-feature-dot::before {
  border: 2px solid var(--muted);
  border-radius: 50%;
  content: "";
  height: 10px;
  width: 10px;
}
.tm-feature-dot[aria-current="true"]::before { background: var(--green-strong); border-color: var(--green-strong); }
.tm-feature-dot:focus-visible { outline: 3px solid var(--green-strong); outline-offset: 0; }

@media (max-width: 1440px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}

@media (max-width: 900px) {
  .trust-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  /* Round 46: one line on phones (the header is at most 120 px with this bar). */
  .util-bar { gap: 8px; padding: 6px 14px; }
  .util-bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .util-bar a { flex: 0 0 auto; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* Round 29, 29.4-29.6: quick toggle filters with the site's own line icons, the highlight row on
   listing cards, and the three sections above the search box. Colour pairs (text on background):
   --green on #fff 9.6:1 (quick filter), #fff on --green-strong 8.3:1 (pressed), --ink on #fff
   15.6:1, --muted on --bg 5.3:1 (empty district tile), #fff on --green 9.6:1 (numbers band). */
.icon-sprite { height: 0; overflow: hidden; position: absolute; width: 0; }
.tm-icon {
  fill: none;
  flex: 0 0 auto;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 18px;
}
.quick-filters {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
.quick-filter {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--green);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  min-height: 38px;
  padding: 7px 14px;
  white-space: nowrap;
}
.quick-filter:hover { border-color: var(--green); }
.quick-filter:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.quick-filter-check { display: none; }
.quick-filter[aria-pressed="true"] { background: var(--green-strong); border-color: var(--green-strong); color: #fff; }
.quick-filter[aria-pressed="true"] .quick-filter-check { display: inline; }
.quick-filter-note { color: var(--muted); font-size: 11px; margin: 4px 0 0; }

.card-highlights { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; margin: 0; min-width: 0; padding: 0; }
.card-highlights li { align-items: center; color: var(--ink); display: inline-flex; font-size: 12px; gap: 4px; min-width: 0; }
.card-highlights .tm-icon { color: var(--green); height: 16px; width: 16px; }

.market-section { padding: 20px 0 4px; }
.market-section[hidden], .stats-band[hidden] { display: none; }
.market-section-head { align-items: flex-end; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 12px; }
.market-section-link {
  background: #fff;
  border: 1px solid var(--green);
  border-radius: 6px;
  color: var(--green);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  min-height: 38px;
  padding: 8px 12px;
}
.latest-list { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.latest-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
}
.latest-card:hover { border-color: var(--green); }
.latest-body { align-content: start; display: grid; gap: 7px; min-width: 0; padding: 12px 14px 14px; }
.latest-body h3 { overflow-wrap: anywhere; }
.latest-body .meta { color: var(--muted); font-size: 12px; margin: 0; }

.district-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.district-tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 3px;
  min-height: 64px;
  min-width: 0;
  padding: 10px 12px;
  text-align: left;
  text-decoration: none;
}
.district-tile:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.district-tile[aria-current="page"] { border-color: var(--green-strong); box-shadow: inset 0 0 0 1px var(--green-strong); }
.district-tile strong { font-size: 14px; overflow-wrap: anywhere; }
.district-tile span { color: var(--green); font-size: 12px; font-weight: 700; }
.district-tile:hover { border-color: var(--green); }
.district-tile.is-empty { background: var(--bg); border-style: dashed; }
.district-tile.is-empty strong, .district-tile.is-empty span { color: var(--muted); font-weight: 400; }

.stats-band { background: var(--green); border-radius: 8px; color: #fff; margin: 20px 0 4px; padding: 14px 16px; }
.stats-band dl { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.stats-band dl > div { align-content: start; display: grid; gap: 2px; min-width: 0; }
.stats-band dt { font-size: 12px; overflow-wrap: anywhere; }
.stats-band dd { font-family: var(--font-heading); font-size: 24px; font-weight: 700; margin: 0; }
/* Round 43, 43.4: the 4th cell -- big "ฟรี", the "ลงประกาศ" button under it. --green on #fff 9.6:1. */
.stats-band .stats-free-action { font-family: var(--font-body); font-size: 14px; }
.stats-free-button { background: #fff; border: 1px solid #fff; border-radius: 6px; color: var(--green); cursor: pointer; font-size: 14px; font-weight: 700; justify-self: start; min-height: 44px; padding: 8px 16px; }

@media (max-width: 900px) {
  .latest-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .quick-filters { padding-left: 2px; padding-right: 2px; }
  .latest-list { grid-auto-columns: minmax(220px, 78%); grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; padding-bottom: 4px; }
  .district-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-band dd { font-size: 20px; }
  .stats-band dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Round 30, 30.2: small heading above the results on a /district/<slug> page (server-rendered). */
.district-heading { align-items: baseline; display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; min-width: 0; }
.district-heading h1 { font-size: 20px; overflow-wrap: anywhere; }
.district-heading a { color: var(--green); font-size: 13px; font-weight: 700; }

/* Round 31, 31.1: "searching" layout. market.js (or the server, on /district/<slug>) puts
   is-searching on <main> and moves the district tiles + pricing box after the results in the DOM;
   here only the two sections that are not about the search are hidden. */
main.is-searching .latest-section,
main.is-searching .stats-band { display: none; }

/* Round 31, 31.2: live count under the quick filters -- only while searching. min-height keeps
   the space steady while the count fills in, so nothing below jumps. --ink on --bg 13:1. */
.result-summary { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 8px 0 0; min-height: 40px; min-width: 0; }
main:not(.is-searching) .result-summary { display: none; }
/* When the row sits below the fold (the filters are near the bottom of the first screen, and on
   phones well below it) it stays pinned to the bottom edge of the screen, so "พบ N ประกาศ" is
   seen the moment a filter is pressed -- without scrolling the page. Once its own place scrolls
   into view it simply sits there. Below the compare bar (z-index 8). */
main.is-searching .result-summary {
  background: var(--bg);
  bottom: 0;
  box-shadow: 0 -8px 12px -10px rgba(42, 36, 32, 0.35);
  padding: 6px 0;
  position: sticky;
  z-index: 5;
}
/* Round 32, 32.3 (was 31b): with the fixed compare bar showing, the pinned summary moves up above
   it so neither "พบ N ประกาศ" nor ดูผลลัพธ์ is covered, and the bar's own buttons stay clickable.
   Measured top edge of the compare bar above the screen bottom: 69px at 1280, ~90px at 621-900
   (its text wraps), 89px at 390 and 110px at 320 (phone layout, two rows) -- each value below
   leaves at least 8px of room. */
main.is-searching.has-compare .result-summary { bottom: 104px; }
@media (max-width: 620px) {
  main.is-searching.has-compare .result-summary { bottom: 120px; }
}
.result-summary-text { color: var(--ink); font-size: 15px; font-weight: 700; margin: 0; }
.result-summary-jump,
.result-summary-clear {
  background: #fff;
  border: 1px solid var(--green);
  border-radius: 6px;
  color: var(--green);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  min-height: 38px;
  padding: 8px 12px;
}
.result-summary-jump { background: var(--green-strong); border-color: var(--green-strong); color: #fff; }
.result-summary-jump[hidden], .result-summary-clear[hidden] { display: none; }
.result-summary-jump:focus-visible, .result-summary-clear:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }

/* Round 31, 31.2/31.3: the results heading is the jump target (#results, tabindex=-1); leave room
   above it for the "ประกาศในอำเภอ…" line on district pages. */
.result-head h2[tabindex="-1"] { scroll-margin-top: 76px; }
/* Round 64, 64.1: + the sticky header's height (88 px at most from 1024 px up, see above). */
html { scroll-padding-top: 96px; }

/* Round 37, 37.1/37.3: share row in the listing detail + the QR dialog. Buttons and links are the
   existing .share-button look, 44px tall, icon + word (never an icon alone). --green on #fff 9.6:1. */
.share-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.share-row .share-button,
.qr-actions .share-button {
  align-items: center;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  min-height: 44px;
  text-decoration: none;
}
.share-row .share-button[hidden] { display: none; }
.share-row .share-button:hover { background: #DDF3E7; }
.share-row .share-button:focus-visible,
.qr-actions .share-button:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.share-manual { display: grid; gap: 4px; margin-top: 6px; }
.share-manual[hidden] { display: none; }
.share-manual label { font-size: 12px; }
.share-manual input { font-size: 13px; }
.qr-dialog { width: 360px; }
.qr-dialog-body { display: grid; gap: 10px; justify-items: center; padding: 16px; }
.qr-dialog-head { align-items: center; display: flex; justify-content: space-between; width: 100%; }
.qr-dialog-head h2 { font-size: 18px; }
.qr-image { background: #fff; height: auto; image-rendering: pixelated; max-width: 100%; width: 264px; }
.qr-caption { color: var(--muted); font-size: 13px; margin: 0; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }

/* Round 39, 39.3: the sign-in box -- LINE and/or email (6-digit code). Buttons and fields are 44px
   high; the code field is 16px text so phones do not zoom in. The header button is no longer
   LINE-only, so it takes the site's green instead of LINE's. */
.login-intro { color: var(--muted); font-size: 13px; }
.login-method { border-top: 1px solid var(--line); display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; }
.login-method[hidden], .login-form[hidden], .login-hint[hidden] { display: none; }
.login-method h3 { color: var(--ink); font-size: 15px; margin: 0; }
.login-method p { font-size: 13px; margin: 0; }
.login-form { display: grid; gap: 8px; }
.login-form label { display: block; }
.login-form input { font-size: 16px; min-height: 44px; }
#emailLoginCode { font-variant-numeric: tabular-nums; letter-spacing: 0.3em; }
.login-button { min-height: 44px; width: 100%; }
/* Round 47, 47.1: the LINE link -- looks like the button it was; greyed until "ยอมรับ" is ticked and the
   address is ready (#68736f on #daddd6 4.5:1, the same as the disabled login button). */
.line-login-link { align-items: center; display: inline-flex; justify-content: center; text-align: center; text-decoration: none; }
.line-login-link[aria-disabled="true"] { background: #daddd6; border-color: #daddd6; color: #68736f; cursor: not-allowed; }
.line-login-link:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.login-retry-note { background: #fff6f3; border-left: 3px solid #8c3529; color: var(--ink); font-size: 13px; margin: 0; padding: 6px 10px; }
.login-retry-note[hidden] { display: none; }
.login-secondary { display: flex; flex-wrap: wrap; gap: 8px; }
.login-link-button { background: #fff; border: 1px solid var(--green); border-radius: 6px; color: var(--green); cursor: pointer; flex: 1 1 140px; font-weight: 700; min-height: 44px; padding: 8px 12px; }
.login-link-button:disabled { border-color: #daddd6; color: #68736f; cursor: not-allowed; }
.login-hint { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.login-form .login-hint { margin: 0; }
.login-sent-to { color: var(--ink); font-weight: 700; }

/* Round 40, 40.2: the listing's position -- outbound links only (no embedded map). The links wrap
   on a phone and are 44px high; the approximate note says plainly it is not the plot itself. */
.location-block { border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 8px; margin: 0 0 12px; padding: 10px 12px; }
.location-block[hidden], .location-note[hidden] { display: none; }
.location-heading { align-items: center; display: flex; font-size: 14px; gap: 6px; margin: 0; }
.location-heading .tm-icon { color: var(--green); }
.location-note { color: #6b4a12; font-size: 12px; margin: 0; }
.location-links { display: flex; flex-wrap: wrap; gap: 8px; }
.location-links .map-button { justify-content: center; margin: 0; min-height: 44px; }
.location-links .map-button-secondary { background: #fff; border-color: var(--green); color: var(--green); }
/* Round 40, 40.1: nearby places in the detail view, nearest first. */
.nearby-list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nearby-list li { align-items: center; background: #f5f6f2; border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 8px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 8px 10px; }
.nearby-list .tm-icon { color: var(--green); }
.nearby-name { display: grid; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.nearby-name small { color: var(--muted); font-size: 11px; }
.nearby-list strong { font-size: 13px; text-align: right; white-space: nowrap; }
/* Round 41, 41.3: the click-to-load map / Street View frame -- 16:9, never taller than 320px. */
.map-embed { display: grid; gap: 6px; }
.map-embed[hidden], .map-embed-placeholder[hidden], .map-embed-close[hidden], .map-embed-button[hidden] { display: none; }
.map-embed-frame { aspect-ratio: 16 / 9; background: #eef1ec; border: 1px solid var(--line); border-radius: 8px; display: grid; max-height: 320px; overflow: hidden; place-items: center; width: 100%; }
.map-embed-frame iframe { border: 0; display: block; height: 100%; width: 100%; }
.map-embed-placeholder { display: grid; gap: 8px; justify-items: center; padding: 12px; text-align: center; }
.map-embed-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.map-embed-button { background: var(--green); border: 1px solid var(--green); border-radius: 6px; color: #fff; cursor: pointer; font-weight: 700; min-height: 44px; padding: 8px 14px; }
.map-embed-note { color: var(--muted); font-size: 12px; margin: 0; }
.map-embed-close { background: #fff; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); cursor: pointer; justify-self: end; min-height: 44px; padding: 8px 14px; }
/* Round 41, 41.4: on a narrow phone the distance/time goes under the name, which keeps the full width. */
@media (max-width: 400px) {
  .nearby-list li { grid-template-columns: auto minmax(0, 1fr); }
  .nearby-list strong { grid-column: 2; text-align: left; white-space: normal; }
}
/* Round 41, 41.4: "บัญชีของฉัน" -- one header button; the account actions drop down under it. */
.account-menu-wrap { position: relative; }
.account-menu-wrap[hidden], .account-menu[hidden], .buyer-login-button[hidden] { display: none; }
.account-menu-button { background: var(--green-strong); border: 1px solid var(--green-strong); border-radius: 6px; color: #fff; cursor: pointer; font-weight: 700; min-height: 44px; padding: 8px 12px; width: 100%; }
.account-menu-button[aria-expanded="true"] { box-shadow: inset 0 0 0 2px #fff; }
.account-menu { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(31, 42, 39, 0.18); display: grid; gap: 4px; min-width: 240px; padding: 8px; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; }
.account-menu-name { border-bottom: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 700; margin: 0 0 4px; overflow-wrap: anywhere; padding: 4px 4px 8px; }
.account-menu-item { background: #fff; border: 1px solid transparent; border-radius: 6px; color: var(--ink); cursor: pointer; min-height: 44px; padding: 8px 10px; text-align: left; }
.account-menu-item:hover, .account-menu-item:focus-visible { background: #DDF3E7; border-color: #BDE5CF; }
.account-menu-danger { color: #8c3529; }
/* Round 46: phones and tablets -- "ลงประกาศ" and "เมนู" next to the name; the rest opens under the header. */
@media (max-width: 899px) {
  .market-header { padding: 8px 14px; }
  .market-header .brand-name { font-size: 16px; line-height: 1.25; }
  .market-header .header-menu { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(31, 42, 39, 0.16); display: none; flex-direction: column; flex-wrap: nowrap; gap: 6px; left: 0; max-height: calc(100vh - 80px); overflow-y: auto; padding: 8px 14px 14px; position: absolute; right: 0; top: 100%; z-index: 40; }
  .market-header.is-menu-open .header-menu { display: flex; }
  .market-header .header-menu > * { width: 100%; }
  .market-header .header-menu .header-link { justify-content: flex-start; max-width: none; padding: 0 12px; text-decoration: none; }
  .market-header .header-menu .owner-status-button, .market-header .header-menu .buyer-login-button { text-align: left; }
  .header-menu-button { display: inline-flex; }
  .market-header .label-long { display: none; }
  .market-header .label-short { display: inline; }
  .market-header .header-listing-button { font-size: 14px; padding: 8px 12px; }
  .account-menu { margin-top: 6px; min-width: 0; position: static; }
}
@media (max-width: 479px) {
  .market-header .brand-home-icon { display: none; }
}
/* Round 41, 41.5: links to the all-listings map (hidden unless /map is set up). */
/* Round 42, 42.2: the longer "ดูแผนที่ทรัพย์ประกาศทั้งหมด" -- 44px, may wrap on a phone. */
.map-page-link { align-items: center; display: inline-flex; justify-content: center; line-height: 1.3; min-height: 44px; text-align: center; text-decoration: none; white-space: normal; }
.map-page-link[hidden], .result-summary-map[hidden] { display: none; }
.result-summary-map { align-items: center; background: #fff; border: 1px solid var(--green); border-radius: 6px; color: var(--green); display: inline-flex; font-size: 13px; font-weight: 700; min-height: 38px; padding: 8px 12px; text-decoration: none; }
.result-summary-map:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }

/* ---- Round 45: the "ตามหาทรัพย์" board (home section, /wanted, /wanted/<id>, member forms) ----------------
   Contrast (round 63 palette): --ink / --muted on #fff 15.5:1 / 6.9:1 · #fff on --clay 5.0:1 ("เสนอขาย") ·
   --green-strong on #DDF3E7 6.6:1 ("ตามหา") · #fff on --green 5.5:1 (the initial) · #fff on #8c3529 8.4:1 (new offers). */
.wanted-section-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.wanted-section-actions a.market-section-link { align-items: center; display: inline-flex; text-decoration: none; }
main.is-searching .wanted-section { display: none; }
.wanted-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.wanted-card { align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 10px; min-width: 0; padding: 14px; }
.wanted-card-head { align-items: center; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; }
.wanted-avatar { align-items: center; background: var(--green); border-radius: 50%; color: #fff; display: inline-flex; font-family: var(--font-heading); font-size: 18px; font-weight: 700; height: 40px; justify-content: center; width: 40px; }
.wanted-who { display: grid; min-width: 0; }
.wanted-who strong { overflow-wrap: anywhere; }
.wanted-who time { color: var(--muted); font-size: 12px; }
.wanted-badge { background: #DDF3E7; border-radius: 999px; color: var(--green-strong); font-size: 12px; font-weight: 700; padding: 3px 10px; }
.wanted-title { font-size: 16px; }
.wanted-title a { color: var(--ink); text-decoration: none; }
.wanted-title a:hover, .wanted-title a:focus-visible { text-decoration: underline; }
.wanted-facts { display: grid; gap: 4px; margin: 0; }
.wanted-facts > div { display: grid; gap: 8px; grid-template-columns: 5.5em minmax(0, 1fr); }
.wanted-facts dt { color: var(--muted); font-size: 13px; }
.wanted-facts dd { font-size: 13px; margin: 0; overflow-wrap: anywhere; }
.wanted-detail-text { -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--ink); display: -webkit-box; font-size: 13px; line-height: 1.55; margin: 0; overflow: hidden; overflow-wrap: anywhere; white-space: pre-line; }
.wanted-offer-button { align-items: center; background: var(--clay); border: 1px solid var(--clay); border-radius: 6px; color: #fff; cursor: pointer; display: inline-flex; font-weight: 700; justify-content: center; justify-self: start; min-height: 44px; padding: 8px 16px; text-decoration: none; }
.wanted-request-alt { color: var(--muted); font-size: 13px; margin: 0; }
.wanted-text-button { background: none; border: 0; color: var(--green-strong); cursor: pointer; font-weight: 700; min-height: 44px; padding: 0 2px; text-decoration: underline; }
.wanted-field-hint { color: var(--muted); font-size: 12px; margin-top: -6px; }
.wanted-choice { border: 1px solid var(--line); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; min-width: 0; padding: 10px 12px; }
.wanted-choice legend { color: var(--muted); font-size: 12px; font-weight: 700; padding: 0 4px; }
.wanted-choice label { align-items: center; color: var(--ink); cursor: pointer; display: flex; font-weight: 400; gap: 6px; min-height: 44px; }
.wanted-choice input { min-height: 20px; width: 20px; }
.wanted-choice .wanted-choice-all { flex-basis: 100%; font-weight: 700; }
.account-badge { background: #8c3529; border-radius: 999px; color: #fff; display: inline-block; font-size: 12px; font-weight: 700; line-height: 20px; margin-left: 6px; min-width: 20px; padding: 0 6px; text-align: center; }
.account-badge[hidden] { display: none; }
.my-wanted-list { display: grid; gap: 12px; }
.my-wanted-item { border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 8px; padding: 12px; }
.my-wanted-item h3 { font-size: 15px; overflow-wrap: anywhere; }
.my-wanted-item h4 { font-size: 14px; margin: 4px 0 0; }
.my-wanted-meta { color: var(--muted); font-size: 13px; margin: 0; overflow-wrap: anywhere; }
.my-wanted-status { border-radius: 4px; color: #fff; font-weight: 700; padding: 1px 7px; }
.my-wanted-status.status-pending { background: #7b5714; }
.my-wanted-status.status-approved { background: var(--green-strong); }
.my-wanted-status.status-rejected { background: #8c3529; }
.my-wanted-status.status-closed, .my-wanted-status.status-expired { background: #4b4540; }
.my-wanted-reason { background: #fff6f3; border-left: 3px solid #8c3529; font-size: 13px; margin: 0; padding: 6px 10px; }
.my-wanted-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.my-wanted-actions button { min-height: 44px; }
.my-wanted-message { color: #a13e36; font-size: 13px; margin: 0; }
.my-wanted-message:empty { display: none; }
.my-wanted-offers { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.my-wanted-offers li { background: #f7f8f5; border-radius: 6px; font-size: 13px; overflow-wrap: anywhere; padding: 8px 10px; }
.my-wanted-offers li.is-new { background: #fff4e0; }
.my-wanted-offers p { margin: 4px 0 0; white-space: pre-line; }
.my-wanted-offers a { color: var(--green-strong); font-weight: 700; }
/* /wanted and /wanted/<id> */
.wanted-page { display: grid; gap: 18px; }
.wanted-board { display: grid; gap: 14px; }
.wanted-board-head { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.wanted-board-head > div { max-width: 720px; min-width: 0; }
.wanted-intro { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 6px 0 0; }
.wanted-post-link, .market-header-actions a.owner-submit-button, .market-header-actions a.owner-status-button { align-items: center; display: inline-flex; text-decoration: none; }
.wanted-filters { align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; padding: 12px; }
.wanted-filter-actions { display: flex; gap: 8px; }
.wanted-filter-actions button { min-height: 44px; }
.wanted-filter-clear { background: none; border: 0; color: var(--green-strong); cursor: pointer; font-weight: 700; text-decoration: underline; }
.wanted-summary { color: var(--muted); font-size: 14px; margin: 0; }
.wanted-pages { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.wanted-pages[hidden] { display: none; }
.wanted-pages button { min-height: 44px; }
.wanted-back { color: var(--green-strong); font-weight: 700; }
.wanted-detail { display: grid; gap: 16px; }
.wanted-detail[hidden], .wanted-board[hidden], .wanted-matches[hidden] { display: none; }
.wanted-detail-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 12px; padding: 18px; }
.wanted-detail-card h1 { overflow-wrap: anywhere; }
.wanted-detail-who { color: var(--muted); margin: 0; }
.wanted-facts-wide > div { grid-template-columns: 7em minmax(0, 1fr); }
.wanted-facts-wide dt, .wanted-facts-wide dd { font-size: 15px; }
.wanted-detail-full { line-height: 1.7; margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.wanted-offer-main { justify-self: start; min-height: 48px; padding: 10px 20px; }
.wanted-offer-note { color: var(--muted); font-size: 13px; margin: 0; }
.wanted-offer-for { background: #DDF3E7; border-left: 3px solid var(--green); font-size: 13px; margin: 0 0 4px; overflow-wrap: anywhere; padding: 8px 10px; }
.wanted-match-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.wanted-match { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); display: grid; gap: 4px; min-width: 0; overflow: hidden; padding: 0 0 12px; text-decoration: none; }
.wanted-match img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; width: 100%; }
.wanted-match strong, .wanted-match span { overflow-wrap: anywhere; padding: 0 12px; }
.wanted-match strong { margin-top: 10px; }
.wanted-match span { color: var(--muted); font-size: 13px; }
.wanted-match .wanted-match-price { color: var(--clay); font-weight: 700; }
@media (max-width: 760px) {
  .wanted-filters { grid-template-columns: 1fr; }
  .wanted-facts-wide > div { grid-template-columns: 5.5em minmax(0, 1fr); }
}

/* ---- Round 48: what the server writes into the page (readable with JavaScript off) ---------------- */
/* 48.1: the listing at the top of /listing/<slug>-<id> -- the page's H1, the way back, the facts, the
   cover photo, the description, and the button that opens the detail dialog. */
.listing-summary { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 12px; margin-bottom: 18px; min-width: 0; padding: 16px; }
.listing-breadcrumb ol { display: flex; flex-wrap: wrap; font-size: 13px; gap: 4px 0; list-style: none; margin: 0; padding: 0; }
.listing-breadcrumb li { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.listing-breadcrumb li + li::before { color: var(--muted); content: "›"; padding: 0 8px; }
.listing-breadcrumb a { color: var(--green-strong); font-weight: 700; }
.listing-summary-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-width: 0; }
.listing-summary.no-photo .listing-summary-grid { grid-template-columns: minmax(0, 1fr); }
.listing-summary-photo { aspect-ratio: 4 / 3; background: var(--card-image); border-radius: 8px; height: auto; object-fit: cover; width: 100%; }
.listing-summary-body { align-content: start; display: grid; gap: 10px; min-width: 0; }
.listing-summary-body .eyebrow { margin: 0; }
.listing-summary-body h1 { font-size: 26px; line-height: 1.3; overflow-wrap: anywhere; }
.listing-summary-price { font-size: 26px; margin: 0; }
.listing-summary-facts { display: grid; gap: 6px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.listing-summary-facts > div { display: grid; gap: 2px; min-width: 0; }
.listing-summary-facts dt { color: var(--muted); font-size: 12px; }
.listing-summary-facts dd { font-size: 15px; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.listing-summary-description { color: #45514d; font-size: 14px; line-height: 1.7; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.listing-summary-open { justify-self: start; min-height: 44px; padding: 10px 18px; }
@media (max-width: 760px) {
  .listing-summary { padding: 12px; }
  .listing-summary-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .listing-summary-body h1 { font-size: 21px; }
  .listing-summary-price { font-size: 22px; }
  .listing-summary-open { justify-self: stretch; }
}

/* 48.2: one line of real numbers under a district page's H1. */
.district-lead { color: var(--muted); font-size: 14px; margin: -4px 0 12px; overflow-wrap: anywhere; }

/* 48.2/48.3: the server's cards are the script's cards with the title as a link; the link covers the
   whole card, and the compare button's row is kept so the script's cards take the same room. */
.property-card.is-static, .latest-card.is-static { position: relative; }
.static-card-link { color: inherit; text-decoration: none; }
.static-card-link::after { content: ""; inset: 0; position: absolute; }
.static-card-link:focus-visible { outline: none; }
.property-card.is-static:focus-within, .latest-card.is-static:focus-within { outline: 3px solid var(--clay); outline-offset: 2px; }
.property-card.is-static .property-body::after { content: ""; min-height: 36px; }

/* 48.4: the "กำลังโหลด..." line of /wanted/<id> before the script (the server now writes the post). */
.wanted-detail-loading { color: var(--muted); margin: 0; }

/* 48.5: the readable 404 page (not-found.html). */
.not-found-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 12px; margin: 24px auto 40px; max-width: 640px; padding: 24px; }
.not-found-card h1 { font-size: 24px; line-height: 1.35; overflow-wrap: anywhere; }
.not-found-text { color: var(--muted); line-height: 1.7; margin: 0; }
.not-found-links { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 4px 0 0; padding: 0; }
.not-found-links a { align-items: center; display: inline-flex; min-height: 44px; text-decoration: none; }
@media (max-width: 620px) {
  .not-found-card { margin: 12px 0 28px; padding: 18px; }
  .not-found-links, .not-found-links li, .not-found-links a { width: 100%; }
  .not-found-links a { justify-content: center; }
}

/* ---- Round 49 ----------------------------------------------------------------------------------- */
/* 49.1: "พิมพ์สิ่งที่คุณตามหา" in the hero -- one row (box + button), at least 44 px tall. */
.hero-search { display: grid; gap: 6px; max-width: 640px; }
.hero-search-label { color: var(--ink); font-size: 14px; font-weight: 700; }
.hero-search-row { display: flex; gap: 8px; min-width: 0; }
.hero-search-row input { background: #fff; border: 1px solid #b9b0a3; border-radius: 6px; color: var(--ink); flex: 1 1 auto; font-size: 15px; min-height: 46px; min-width: 0; padding: 10px 12px; }
.hero-search-row input:focus-visible { outline: 3px solid var(--clay); outline-offset: 1px; }
.hero-search-button { background: var(--green-strong); border: 1px solid var(--green-strong); border-radius: 6px; color: #fff; cursor: pointer; flex: 0 0 auto; font-weight: 700; min-height: 46px; padding: 10px 18px; }
.hero-search-button:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
/* "เข้าใจว่า: ..." above the results (empty = not shown). */
.search-understood { background: #DDF3E7; border-left: 3px solid var(--green); border-radius: 0 6px 6px 0; color: var(--ink); font-size: 14px; line-height: 1.6; margin: 0 0 12px; overflow-wrap: anywhere; padding: 8px 12px; }
.search-understood:empty { display: none; }
.search-understood-edit { color: var(--green-strong); font-weight: 700; margin-left: 4px; white-space: nowrap; }
.area-filter-max { grid-template-columns: minmax(90px, 200px); }
.empty-wanted-button { background: var(--green-strong); border: 1px solid var(--green-strong); border-radius: 6px; color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; min-height: 38px; padding: 8px 14px; }

/* 49.2: the alert switch and the listings a post was told about ("โพสต์ตามหาของฉัน"). */
.wanted-alerts-row { font-size: 13px; }
.my-wanted-alerts { align-items: center; display: flex; font-size: 14px; gap: 8px; margin: 8px 0 0; }
.my-wanted-alerts input { accent-color: var(--green); flex: 0 0 auto; height: 20px; width: 20px; }
.my-wanted-matches { display: grid; gap: 6px; list-style: none; margin: 0 0 8px; padding: 0; }
.my-wanted-matches li { background: #f7f8f5; border-radius: 6px; font-size: 13px; overflow-wrap: anywhere; padding: 8px 10px; }
.my-wanted-matches li.is-new { background: #fff4e0; }
.my-wanted-matches a { color: var(--green-strong); font-weight: 700; }
.not-found-links form { margin: 0; }
.not-found-links button { min-height: 44px; }

/* 49.3: the map strip after the numbers -- our own drawing behind the text (decorative only). */
.map-strip { align-items: center; background: #DDF3E7; border: 1px solid #BDE5CF; border-radius: 8px; display: grid; gap: 14px 24px; grid-template-columns: minmax(0, 1fr) auto; margin: 14px 0 4px; min-width: 0; overflow: hidden; padding: 20px 22px; position: relative; }
.map-strip[hidden] { display: none; }
main.is-searching .map-strip { display: none; }
.map-strip-art { height: 100%; inset: 0; opacity: 0.55; pointer-events: none; position: absolute; width: 100%; }
.map-art-field { fill: #CDEBDB; }
.map-art-field-2 { fill: #DDF3E7; }
.map-art-river { fill: none; stroke: #b9d6e3; stroke-linecap: round; stroke-width: 9; }
.map-art-road { fill: none; stroke: #ffffff; stroke-linecap: round; stroke-width: 5; }
.map-art-road-thin { stroke-width: 3; }
.map-art-pin path { fill: #c4683f; }
.map-art-pin circle { fill: #fff; }
.map-art-pin-2 path { fill: #047857; }
.map-strip-copy, .map-strip-actions { min-width: 0; position: relative; }
.map-strip-copy { background: rgba(221, 243, 231, 0.86); border-radius: 6px; display: grid; gap: 6px; padding: 4px 8px 4px 0; }
.map-strip-copy h2 { font-size: 21px; overflow-wrap: anywhere; }
.map-strip-copy p { color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.map-strip-copy .eyebrow { color: var(--green-strong); }
.map-strip-count strong { color: var(--green-strong); font-family: var(--font-heading); font-size: 22px; }
.map-strip-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.map-strip-actions a, .map-strip-actions button { align-items: center; border-radius: 6px; cursor: pointer; display: inline-flex; font-size: 14px; font-weight: 700; justify-content: center; min-height: 44px; padding: 10px 16px; text-decoration: none; }
.map-strip-open { background: var(--green-strong); border: 1px solid var(--green-strong); color: #fff; }
.map-strip-ask { background: #fff; border: 1px solid var(--green-strong); color: var(--green-strong); }
.map-strip-post { background: var(--clay); border: 1px solid var(--clay); color: #fff; }
.map-strip-actions a:focus-visible, .map-strip-actions button:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
@media (max-width: 760px) {
  .map-strip { grid-template-columns: minmax(0, 1fr); padding: 16px 14px; }
  .map-strip-actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .map-strip-actions a, .map-strip-actions button { width: 100%; }
}

/* ---- Round 50 ------------------------------------------------------------------------------------ */
/* 50.8: required fields say so in words; a message under each wrong field; a summary on top. */
.req-tag { background: #fdecec; border-radius: 4px; color: #8a1c1c; display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.4; margin-left: 4px; padding: 0 6px; vertical-align: 1px; }
.field-error { color: #8a1c1c; display: block; font-size: 13px; font-weight: 700; line-height: 1.5; margin: 4px 0 2px; }
.field-error::before { content: "! "; }
[aria-invalid="true"] { border-color: #b42318 !important; box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.18); }
.form-error-summary { background: #fdecec; border: 1px solid #b42318; border-radius: 8px; color: #8a1c1c; font-size: 14px; margin: 0 0 12px; padding: 10px 12px; }
.form-error-summary[hidden] { display: none; }
.form-error-summary a { color: #8a1c1c; font-weight: 700; }
/* 50.9: the red (full / run out) and yellow (last free one) boxes -- words + an icon, not colour alone. */
.plan-alert { border: 2px solid; border-radius: 10px; display: grid; gap: 4px 12px; grid-template-columns: auto minmax(0, 1fr); margin: 0 0 12px; padding: 12px 14px; }
.plan-alert[hidden] { display: none; }
.plan-alert--danger { background: #fdecec; border-color: #b42318; color: #6e1414; }
.plan-alert--warning { background: #fff4d6; border-color: #b7791f; color: #5c3d00; }
.plan-alert-icon { align-items: center; border-radius: 50%; color: #fff; display: inline-flex; font-weight: 800; height: 28px; justify-content: center; width: 28px; }
.plan-alert--danger .plan-alert-icon { background: #b42318; }
.plan-alert--warning .plan-alert-icon { background: #8a5a00; }
.plan-alert-body { display: grid; gap: 6px; min-width: 0; }
.plan-alert-body strong { font-size: 15px; overflow-wrap: anywhere; }
.plan-alert-body p, .plan-alert-body ul { font-size: 14px; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.plan-alert-body ul { padding-left: 18px; }
.plan-alert-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.plan-alert-button { background: #fff; border: 1px solid currentColor; border-radius: 6px; color: inherit; cursor: pointer; font-weight: 700; min-height: 44px; padding: 8px 14px; }
.plan-alert-button.is-primary { background: var(--green-strong); border-color: var(--green-strong); color: #fff; }
.plan-full-badge { background: #fdecec; border: 1px solid #b42318; border-radius: 999px; color: #8a1c1c; font-size: 13px; font-weight: 700; justify-self: start; margin: 0; padding: 2px 10px; }
.plan-button:disabled { cursor: not-allowed; opacity: 0.7; }
/* 50.3: why the login box opened; the result after sending; "ประกาศของฉัน". */
.login-purpose { background: #DDF3E7; border-left: 3px solid var(--green); border-radius: 0 6px 6px 0; color: var(--ink); font-weight: 700; margin: 0 0 10px; padding: 8px 12px; }
.owner-result { display: grid; gap: 12px; }
.owner-result[hidden] { display: none; }
.owner-result h3 { font-size: 20px; margin: 0; }
.owner-result-warning { background: #fff4d6; border-left: 3px solid #b7791f; color: #5c3d00; font-weight: 700; margin: 0; padding: 8px 12px; }
.owner-result-warning[hidden] { display: none; }
.owner-result-facts { display: grid; gap: 10px; margin: 0; }
.owner-result-facts > div { border-bottom: 1px solid var(--line); display: grid; gap: 2px; padding-bottom: 8px; }
.owner-result-facts > div[hidden] { display: none; }
.owner-result-facts dt { color: var(--muted); font-size: 14px; }
.owner-result-facts dd { font-size: 16px; margin: 0; overflow-wrap: anywhere; }
.copy-button { background: #fff; border: 1px solid var(--green); border-radius: 6px; color: var(--green-strong); cursor: pointer; font-size: 14px; font-weight: 700; margin-left: 6px; min-height: 36px; padding: 4px 10px; }
.owner-result-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.owner-result-actions button { min-height: 44px; }
.owner-result-note { color: var(--muted); font-size: 14px; margin: 0; }
.account-badge-pending { background: #b42318; color: #fff; }
.my-listings-usage { background: #DDF3E7; border-radius: 6px; font-weight: 700; margin: 0 0 8px; padding: 8px 12px; }
.my-listings-usage:empty { display: none; }
.my-listings-list { display: grid; gap: 12px; margin-bottom: 12px; }
.my-listing { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 6px; padding: 12px; }
.my-listing.owes-payment { border-color: #b42318; }
.my-listing h3 { font-size: 16px; margin: 0; overflow-wrap: anywhere; }
.my-listing h3 a { color: var(--green-strong); }
.my-listing-facts, .my-listing-confirm, .my-listing-reference { color: var(--muted); font-size: 14px; margin: 0; overflow-wrap: anywhere; }
.my-listing-status { color: var(--ink); font-weight: 700; }
.my-listing-due { color: #8a1c1c; font-weight: 700; margin: 0; }
.my-listing-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.my-listing-actions button { min-height: 44px; }
.my-listings-new { justify-self: start; min-height: 44px; }

/* ==== Round 51, 51.3: "ลงประกาศขายกับเรา" in six steps ==================================================
   Text 16 px, labels and hints 14 px (nothing under 13 px inside this dialog), cards with a 12 px radius,
   every button at least 44 px; "ถัดไป" stays at the bottom of the screen on a phone. */
#ownerListingDialog { font-size: 16px; max-height: calc(100dvh - 24px); }
#ownerListingDialog .dialog-shell { padding: 20px; }
#ownerListingDialog h2 { font-size: 22px; margin: 0; }
#ownerListingDialog label, #ownerListingDialog legend { font-size: 14px; }
#ownerListingDialog input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), #ownerListingDialog select { font-size: 16px; min-height: 44px; }
#ownerListingDialog textarea { font-size: 16px; }
#ownerListingDialog small, #ownerListingDialog .submission-note, #ownerListingDialog .inquiry-status,
#ownerListingDialog .owner-link-status, #ownerListingDialog .owner-link-choice span, #ownerListingDialog .owner-location-fields small,
#ownerListingDialog .owner-photo-field small, #ownerListingDialog .plan-summary span, #ownerListingDialog .plan-summary li,
#ownerListingDialog .owner-location-fields > legend, #ownerListingDialog .warehouse-filter legend, #ownerListingDialog .area-filter legend { font-size: 14px; }
#ownerListingDialog .area-filter label span { font-size: 14px; }
#ownerListingDialog .owner-photo-number, #ownerListingDialog .owner-photo-cover, #ownerListingDialog .owner-photo-excess { font-size: 13px; }
#ownerListingDialog .close-btn { height: 44px; width: 44px; }
#ownerListingDialog .eyebrow, #ownerListingDialog .req-tag { font-size: 13px; }
.owner-dialog-sub { color: var(--muted); font-size: 14px; margin: 4px 0 0; }

.owner-progress { display: grid; gap: 8px; margin: 16px 0 4px; }
.owner-step-label { color: var(--green-strong); font-size: 15px; font-weight: 700; margin: 0; }
.owner-progress-steps { display: grid; gap: 6px; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.owner-progress-steps li { background: var(--line); border-radius: 999px; height: 6px; }
.owner-progress-steps li.is-done { background: var(--green); }
.owner-progress-steps li.is-current { background: var(--clay); }

.owner-wizard { gap: 16px; }
.owner-step { display: grid; gap: 16px; min-width: 0; }
.owner-step[hidden] { display: none; }
.owner-step-title { font-family: var(--font-heading); font-size: 20px; margin: 0; }
.owner-step-title:focus { outline: none; }
.owner-step-title:focus-visible { outline: 3px solid rgba(4, 120, 87, 0.35); outline-offset: 4px; }

/* Type and plan: big buttons (radios); the selects they set are not shown. */
.owner-choices { border: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin: 0; min-width: 0; padding: 0; }
.owner-choices > legend { color: var(--ink); font-weight: 700; margin-bottom: 8px; padding: 0; }
.owner-plan-choices { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.owner-choice, .owner-plan-card { background: #fff; border: 2px solid var(--line); border-radius: 12px; color: var(--ink); cursor: pointer; display: grid; font-weight: 400; gap: 2px; min-height: 64px; padding: 12px 14px; position: relative; }
.owner-choice input, .owner-plan-card input { cursor: pointer; height: 100%; inset: 0; margin: 0; opacity: 0; position: absolute; width: 100%; }
.owner-choice:has(input:checked), .owner-plan-card:has(input:checked) { background: #DDF3E7; border-color: var(--green); }
.owner-choice:has(input:focus-visible), .owner-plan-card:has(input:focus-visible) { outline: 3px solid rgba(4, 120, 87, 0.35); outline-offset: 2px; }
.owner-choice-name, .owner-plan-name { font-size: 17px; font-weight: 700; }
.owner-choice-note, .owner-plan-note { color: var(--muted); font-size: 14px; }
.owner-plan-price { color: var(--clay); font-family: var(--font-heading); font-size: 20px; font-weight: 700; }
.owner-plan-card.is-disabled { background: #f3f1ec; cursor: not-allowed; }
.owner-plan-card.is-disabled .owner-plan-price { color: var(--muted); }
.owner-plan-full { color: #9a2f22; display: block; font-weight: 700; }
.owner-plan-full[hidden] { display: none; }
.owner-choice-source[hidden] { display: none; }
#ownerListingDialog .plan-summary { margin: 0; }

/* Highlights: chips that set the same fields as the full list. */
.owner-feature-chips { border: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; min-width: 0; padding: 0; }
.owner-feature-chips > legend { color: var(--ink); font-weight: 700; margin-bottom: 8px; padding: 0; }
.feature-chip { background: #fff; border: 1px solid #c9c1b4; border-radius: 999px; color: var(--ink); cursor: pointer; font-size: 15px; min-height: 44px; padding: 8px 16px; }
.feature-chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.feature-chip[aria-pressed="true"]::before { content: "✓ "; }
#ownerListingDialog .owner-extra-details { margin: 0; }
#ownerListingDialog .owner-extra-details summary { font-size: 15px; min-height: 44px; }
.owner-field-hint { color: var(--muted); display: block; font-weight: 400; }
.owner-unit-price { background: #f5f6f2; border-left: 3px solid var(--green); border-radius: 8px; color: var(--green-strong); font-weight: 700; margin: 0; padding: 10px 12px; }

/* Step 6: everything once more before sending, with "แก้". */
.owner-review { background: #f8f6f1; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 10px; padding: 14px; }
.owner-review h4 { font-family: var(--font-heading); font-size: 17px; margin: 0; }
.owner-review-groups { display: grid; gap: 10px; }
.owner-review-group { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; display: flex; gap: 10px; justify-content: space-between; padding: 8px 8px 8px 12px; }
.owner-review-text { min-width: 0; }
.owner-review-text strong { display: block; font-size: 15px; }
.owner-review-text p { font-size: 15px; margin: 2px 0 0; overflow-wrap: anywhere; }
.owner-review-label { color: var(--muted); font-size: 14px; }
.owner-review-edit { background: #fff; border: 1px solid var(--green); border-radius: 8px; color: var(--green-strong); cursor: pointer; flex: 0 0 auto; font-weight: 700; min-height: 44px; min-width: 56px; padding: 6px 12px; }

/* ย้อนกลับ / ถัดไป (and "ส่งให้ทีมงานตรวจ" on the last step) -- stays in view while the step scrolls. */
.owner-wizard-nav { align-items: center; background: #fff; border-top: 1px solid var(--line); bottom: 0; display: flex; gap: 10px; margin: 0 -20px -20px; padding: 12px 20px 16px; position: sticky; z-index: 2; }
.owner-nav-back { background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); cursor: pointer; font-weight: 700; min-height: 48px; padding: 10px 18px; }
.owner-nav-next, .owner-wizard-nav .submit-inquiry { background: var(--clay); border: 1px solid var(--clay); border-radius: 10px; color: #fff; cursor: pointer; flex: 1 1 auto; font-size: 16px; font-weight: 700; margin-left: auto; max-width: 360px; min-height: 48px; padding: 10px 18px; }
.owner-wizard-nav [hidden] { display: none; }
#ownerListingDialog .inquiry-status:empty { display: none; }

@media (max-width: 620px) {
  #ownerListingDialog .dialog-shell { padding: 16px; }
  .owner-wizard-nav { margin: 0 -16px -16px; padding: 10px 16px 14px; }
  .owner-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-plan-choices { grid-template-columns: 1fr; }
  .owner-plan-card { align-items: baseline; gap: 2px 12px; grid-template-columns: auto 1fr; }
  .owner-plan-card .owner-plan-note { grid-column: 1 / -1; }
  .owner-nav-next, .owner-wizard-nav .submit-inquiry { max-width: none; }
  #ownerListingDialog .inquiry-fields { grid-template-columns: 1fr; }
}

/* Round 52, 52.5 (L9): on a phone the form fills the screen at every step (a short step no longer shows the
   page behind it); "ย้อนกลับ / ถัดไป" sit at the bottom of the screen. */
@media (max-width: 620px) {
  #ownerListingDialog { border-radius: 0; height: 100dvh; margin: 0; max-height: 100dvh; max-width: 100vw; width: 100vw; }
  #ownerListingDialog .dialog-shell { display: flex; flex-direction: column; min-height: 100%; }
  #ownerListingDialog .owner-wizard { display: flex; flex: 1 0 auto; flex-direction: column; }
  #ownerListingDialog .owner-wizard-nav { margin-top: auto; }
}

/* Round 54, 54.5: "ทีมงานพักประกาศนี้ — ติดต่อทีมงาน" in "ประกาศของฉัน". */
.my-listing-paused-by { color: #8a332b; font-size: 14px; font-weight: 700; margin: 0; }

/* Round 55, 55.2/55.3: on a type / type x district page -- the intro, then links to the narrower pages
   (each with how many listings). Round 55, 55.4: "ประกาศอื่นใน{อำเภอ}" under a listing. */
.seo-intro { color: var(--ink); font-size: 15px; line-height: 1.7; margin: 0 0 8px; max-width: 72ch; overflow-wrap: anywhere; }
.seo-chips ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 14px; padding: 0; }
.seo-chips a { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--green-strong); display: inline-flex; font-size: 14px; font-weight: 700; gap: 6px; min-height: 36px; padding: 6px 12px; }
.seo-chips a span { color: var(--muted); font-weight: 600; }
.seo-chips a:hover, .seo-chips a:focus-visible { border-color: var(--green); }
.listing-related { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 10px; margin-bottom: 18px; min-width: 0; padding: 16px; }
.listing-related h2 { font-size: 18px; margin: 0; }
.listing-related ul { display: grid; gap: 8px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.listing-related li { display: grid; gap: 2px; min-width: 0; }
.listing-related li a { color: var(--green-strong); font-weight: 700; overflow-wrap: anywhere; }
.listing-related li span { color: var(--muted); font-size: 13px; }
.listing-related-all { color: var(--green); font-size: 14px; font-weight: 700; }
@media (max-width: 640px) {
  .listing-related ul { grid-template-columns: 1fr; }
}

/* Round 56, 56.2: "นับรวมประกาศฟรี … ที่ใช้เบอร์ 08x-xxx-1234 …" under "ฟรี N/3" in "ประกาศของฉัน". */
.my-listings-shared { background: #fff8e6; border: 1px solid #e3c27a; border-radius: 8px; color: #5c3d00; display: grid; font-size: 14px; gap: 4px; margin: 0 0 10px; padding: 10px 12px; }
.my-listings-shared[hidden] { display: none; }
.my-listings-shared p { margin: 0; overflow-wrap: anywhere; }
.my-listings-shared a { color: var(--green-strong); font-weight: 700; }

/* Round 56, 56.3: a type / type x district page opens with its heading block (above the hero, in the
   HTML); the hero under it is only the search box and the button. */
.seo-page-head { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 14px; min-width: 0; padding: 16px; }
.seo-page-head .district-heading { margin-bottom: 8px; }
.seo-page-head .district-heading h1 { font-size: 24px; line-height: 1.35; }
.seo-page-head .seo-chips ul { margin-bottom: 0; }
.hero.hero-compact { padding-bottom: 20px; padding-top: 20px; }
@media (max-width: 640px) {
  .seo-page-head { padding: 12px; }
  .seo-page-head .district-heading h1 { font-size: 21px; }
}

/* Round 63, 63.1: the page intro (#seoIntro) of a type / district / type x district page sits under the
   listings -- written there in the HTML by the server (no CSS order, no script). A readable measure. */
/* Round 64, 64.5: a soft box with round corners. */
.seo-intro-band { background: var(--soft); border-radius: 20px; margin: 28px 0 8px; min-width: 0; padding: 24px; }
.seo-intro-band .seo-intro { margin: 0; max-width: 760px; }
@media (max-width: 640px) {
  .seo-intro-band { margin-top: 18px; padding: 18px; }
  .seo-intro-band .seo-intro { font-size: 14px; line-height: 1.6; }
}

/* Round 63, 63.2: the "เขียวมรกต-ทอง" palette (values in :root above). Every text pair >= 4.5:1 -- white on
   #047857 5.5 · #0F766E 5.5 · #065F46 7.7 · #B45309 5.0 · #0369A1 5.9 · #A16207 4.9 · #BE123C 6.3 · #7E22CE 7.0;
   the dark text of each type on its light chip 6.6-8.1 (asserted in the round 63 test). */
.util-bar { background: linear-gradient(90deg, #047857, #0F766E); }
main h2 { color: var(--green-strong); }
/* The type chips: light with dark text; the chosen one solid with white text and a check mark, so it is
   not told apart by colour alone (aria-pressed stays as before). */
.chip-tab[data-quick-chip="land"] { background: #D1FAE5; border-color: #D1FAE5; color: #065F46; }
.chip-tab[data-quick-chip="house"] { background: #E0F2FE; border-color: #E0F2FE; color: #075985; }
.chip-tab[data-quick-chip="farm"] { background: #FEF9C3; border-color: #FEF9C3; color: #713F12; }
.chip-tab[data-quick-chip="commercial"] { background: #FFE4E6; border-color: #FFE4E6; color: #9F1239; }
.chip-tab[data-quick-chip="warehouse"] { background: #F3E8FF; border-color: #F3E8FF; color: #6B21A8; }
.chip-tab[data-quick-chip="land"].is-active { background: #047857; border-color: #047857; color: #fff; }
.chip-tab[data-quick-chip="house"].is-active { background: #0369A1; border-color: #0369A1; color: #fff; }
.chip-tab[data-quick-chip="farm"].is-active { background: #A16207; border-color: #A16207; color: #fff; }
.chip-tab[data-quick-chip="commercial"].is-active { background: #BE123C; border-color: #BE123C; color: #fff; }
.chip-tab[data-quick-chip="warehouse"].is-active { background: #7E22CE; border-color: #7E22CE; color: #fff; }
/* Round 64, 64.3: the check mark sits in the chip's top right corner (the chip is a column now). */
.chip-tab.is-active::before { content: "✓"; font-size: 14px; line-height: 1; position: absolute; right: 8px; top: 7px; }
/* The type tag on a card: solid in its type's colour, white text (the type comes from data-type). */
.type-tag { background: var(--green-strong); }
.type-tag[data-type="land"] { background: #047857; }
.type-tag[data-type="house"] { background: #0369A1; }
.type-tag[data-type="farm"] { background: #A16207; }
.type-tag[data-type="commercial"] { background: #BE123C; }
.type-tag[data-type="warehouse"] { background: #7E22CE; }

/* ============================================================================================
   Round 64: the "ทันสมัย" template -- the round 63 colours on a white page: a sticky header, pill
   buttons, a rounded hero (the owner's picture with hero.css's own shade, or a green gradient) with a
   pill search box, a floating category bar with line icons, picture-first cards. No CSS order.
   Text pairs (round 64 test): white on #065F46 7.7 / #0F766E 5.5 · #FEECA7 (the eyebrow) on #065F46 6.5 / #0F766E 4.6 ·
   #E7F5EE on #065F46 6.9 / #0F766E 4.9 · #3B2A05 on #FBBF24 8.3 · #065F46 on white 92% 7.4+ ·
   #C9C2B8 / white on #0B2E22 · --muted on --soft 6.4. Over the picture the shade of hero.css keeps
   #FEECA7 / #E7F5EE above 5:1 (its text column is never wider than 720 px from 24 + 32 px in).
   ============================================================================================ */

/* 64.1: pill buttons, at least 44 px to tap. */
.market-header .header-link, .market-header button, .market-header a.header-listing-button { border-radius: 999px; }
.market-header .header-link { padding: 0 10px; }
.owner-submit-button, .owner-status-button, .buyer-login-button, .hero-search-button, .plan-button, .why-link,
.stats-free-button, .market-section-link, .load-more-button, .result-summary-jump, .result-summary-clear, .result-summary-map {
  border-radius: 999px;
  min-height: 44px;
}

/* 64.2: the hero. Without a picture a green gradient; with one, hero.css's dark background, photo and
   shade (loaded after this file) take over the background. The text column keeps hero.css's measure. */
.hero {
  background: linear-gradient(90deg, #065F46, #0F766E);
  border: 0;
  border-radius: 28px;
  margin-top: 4px;
  overflow: hidden;
  padding: 72px 24px 72px;
}
/* The category bar overlaps the bottom of the hero -- only when it comes right after it (a top banner
   in between keeps its own place). */
.hero:has(+ .quick-chips) { padding-bottom: 96px; }
.hero.hero-compact { padding-bottom: 40px; padding-top: 40px; }
.hero.hero-compact:has(+ .quick-chips) { padding-bottom: 72px; }
.hero-copy { gap: 14px; margin-left: clamp(0px, 3vw, 32px); max-width: 720px; width: 100%; }
/* The work order's #FDE68A is 4.39:1 on the gradient's light end (#0F766E) -- the same amber a little lighter. */
.hero-copy .eyebrow, main .hero.has-hero-image .hero-copy .eyebrow { color: #FEECA7; }
.hero-copy h1, .hero-copy .hero-title { color: #fff; font-size: clamp(28px, 4.2vw, 48px); line-height: 1.2; }
.hero-copy p { color: #E7F5EE; font-size: 17px; }
main .hero.has-hero-image .hero-copy p:not(.eyebrow):not(.hero-title) { color: #E7F5EE; }
/* The search: a white pill with the box and the button on one line at every width. Its label is still
   read out by screen readers (not display: none). */
.hero-search { background: #fff; border-radius: 999px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); margin-top: 8px; max-width: 760px; padding: 8px 8px 8px 22px; }
.hero-search:focus-within { outline: 3px solid #FEECA7; outline-offset: 3px; }
.hero-search-label, .hero.has-hero-image .hero-copy .hero-search-label {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.hero-search-row { align-items: center; flex-direction: row; flex-wrap: nowrap; }
.hero-search-row input { background: transparent; border: 0; border-radius: 999px; font-size: 17px; min-height: 52px; padding: 0 4px; }
.hero-search-row input:focus-visible { outline: none; }
.hero-search-button { font-size: 17px; min-height: 52px; padding: 0 28px; width: auto; }
/* "เริ่มลงประกาศทรัพย์": a gold pill. */
.hero-copy .owner-submit-button { background: #FBBF24; border-color: #FBBF24; color: #3B2A05; font-size: 15px; margin-top: 6px; padding: 10px 22px; }
.hero-copy .owner-submit-button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* 64.3: the category bar -- a white floating box over the hero's bottom edge; each type a rounded tile with
   its line icon above its name. The first / last tile's auto margin centres the row when there is room and
   never hides a tile when it scrolls. */
.quick-chips {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(6, 40, 30, 0.12);
  gap: 10px;
  margin: 18px auto 8px;
  max-width: 1120px;
  padding: 14px;
  position: relative;
  scroll-snap-type: x proximity;
  z-index: 2;
}
.hero + .quick-chips { margin-top: -40px; }
.chip-tab {
  align-items: center;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  gap: 4px;
  min-height: 74px;
  min-width: 96px;
  padding: 12px 18px;
  position: relative;
  scroll-snap-align: start;
}
.chip-tab:first-child { margin-left: auto; }
.chip-tab:last-child { margin-right: auto; }
.chip-tab .chip-icon { height: 28px; stroke-width: 1.7; width: 28px; }
.chip-tab:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
/* The quick filters: soft pills in a row that scrolls sideways. */
.quick-filters { scroll-snap-type: x proximity; }
.quick-filter { background: var(--soft); border-color: transparent; min-height: 44px; scroll-snap-align: start; }

/* 64.4: picture-first cards -- no frame, a light shadow, the picture 4:3 with round corners. */
.latest-card, .property-card { background: #fff; border: 0; border-radius: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s, transform 0.2s; }
.latest-card:hover, .property-card:hover { box-shadow: 0 14px 30px rgba(6, 40, 30, 0.14); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .latest-card, .property-card { transition: none; }
  .latest-card:hover, .property-card:hover { transform: none; }
}
.property-media { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
/* The type: a pill in the picture's top left; "ตรวจข้อมูลแล้ว": a white pill in its bottom left (never on
   top of the type); the heart stays top right. */
.type-tag { border-radius: 999px; bottom: auto; left: 12px; padding: 4px 10px; top: 12px; }
.verified-badge { background: rgba(255, 255, 255, 0.92); border-radius: 999px; bottom: 12px; color: #065F46; font-weight: 700; left: 12px; padding: 4px 10px; top: auto; }
.latest-body, .property-body { padding: 14px 16px 16px; }

/* 64.5: section headings. */
main h2 { font-size: 26px; }

@media (max-width: 600px) {
  .hero { border-radius: 20px; padding: 36px 18px 56px; }
  .hero:has(+ .quick-chips) { padding-bottom: 72px; }
  .hero.hero-compact { padding-bottom: 28px; padding-top: 28px; }
  .hero.hero-compact:has(+ .quick-chips) { padding-bottom: 64px; }
  .hero-copy { margin-left: 0; }
  .hero-copy p { font-size: 16px; }
  .hero-search { padding: 6px 6px 6px 16px; }
  .hero-search-row input { font-size: 15px; min-height: 46px; }
  .hero-search-button { font-size: 15px; min-height: 46px; padding: 0 18px; }
  .quick-chips { border-radius: 18px; flex-wrap: nowrap; margin: 14px 12px 8px; overflow-x: auto; padding: 10px; }
  .hero + .quick-chips { margin-top: -36px; }
  .chip-tab { font-size: 14px; min-height: 66px; min-width: 84px; padding: 10px 12px; }
  .chip-tab .chip-icon { height: 24px; width: 24px; }
  main h2 { font-size: 22px; }
}