/* =====================================================================
   SOREALTH theme — "Find a home. Feel at home."  อบอุ่น น่าเชื่อถือ ใช้งานง่าย ทุกคนเข้าถึงได้
   Palette (UI/UX spec): Primary #0F5D4E · Secondary #2E9E7A · Success #A7D7C5 · Warning #FFB38A ·
   Error #FF6B6B · Background #F7F9F8 · Text #1F2937.  Typeface: Prompt (Thai/English) 300–700.
   (Variable names --sr-navy / --sr-gold are historical: navy = primary green, gold = warm peach accent.)
   ===================================================================== */
:root {
  --sr-navy: #0F5D4E;
  --sr-navy-700: #13705E;
  --sr-green: #2E9E7A;
  --sr-success: #A7D7C5;
  --sr-warning: #FFB38A;
  --sr-error: #FF6B6B;
  --sr-navy-900: #0A4237;
  --sr-gold: #FFB38A;
  --sr-gold-600: #F2865A;
  --sr-gold-700: #B4532A;
  --sr-sage: #E6F2EC;
  --sr-cream: #F7F9F8;
  --sr-cream-2: #EEF3F0;
  --sr-gray: #F5F7FA;
  --sr-ink: #1F2937;
  --sr-muted: #5B6472;
  --sr-border: #E3EAE6;

  /* pastel tints for icon bubbles */
  --tint-gold: #FFF0E6;
  --tint-sage: #EEF4F0;
  --tint-navy: #E3F3EC;
  --tint-peach: #FFEDE3;
  --tint-mint: #E3F3EC;

  --sr-radius: 22px;
  --sr-radius-sm: 14px;
  --sr-shadow: 0 10px 30px -12px rgba(15, 93, 78, 0.18), 0 2px 6px rgba(15, 93, 78, 0.05);
  --sr-shadow-lg: 0 24px 50px -20px rgba(15, 93, 78, 0.28);
  --sr-glow: 0 10px 24px -8px rgba(242, 134, 90, 0.55);

  --font-head: "Prompt", system-ui, sans-serif;

  --bs-body-font-family: "Prompt", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--sr-ink);
  --bs-body-bg: var(--sr-cream);
  --bs-primary: #0F5D4E;
  --bs-primary-rgb: 15, 93, 78;
  --bs-secondary-color: var(--sr-muted);
  --bs-link-color: #0F5D4E;
  --bs-link-color-rgb: 15, 93, 78;
  --bs-link-hover-color: #0A4237;
  --bs-link-hover-color-rgb: 10, 66, 55;
  --bs-border-color: var(--sr-border);
  --bs-border-radius: 14px;
}

html { font-size: 16px; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(900px 520px at 105% -8%, rgba(167, 215, 197, 0.32), transparent 62%),
    radial-gradient(760px 480px at -12% 18%, rgba(255, 240, 230, 0.7), transparent 60%),
    var(--sr-cream);
  background-attachment: fixed;
}

body > .container { flex: 1 0 auto; }

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-head);
  color: var(--sr-navy);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.text-gold { color: var(--sr-gold-600) !important; }
.text-navy { color: var(--sr-navy) !important; }
.bg-sage { background: var(--sr-sage) !important; }
.bg-navy { background: var(--sr-navy) !important; }
.min-w-0 { min-width: 0; }

/* ---------- Buttons: soft pills ---------- */
.btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 0.6rem 1.35rem;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn:active { transform: scale(0.97); }
.btn-sm { padding: 0.38rem 0.95rem; }

.btn-primary {
  --bs-btn-bg: var(--sr-navy);
  --bs-btn-border-color: var(--sr-navy);
  --bs-btn-hover-bg: var(--sr-navy-700);
  --bs-btn-hover-border-color: var(--sr-navy-700);
  --bs-btn-active-bg: var(--sr-navy-900);
  --bs-btn-active-border-color: var(--sr-navy-900);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  box-shadow: 0 8px 18px -8px rgba(15, 93, 78, 0.6);
}

.btn-outline-primary {
  --bs-btn-color: var(--sr-navy);
  --bs-btn-border-color: rgba(15, 93, 78, 0.25);
  --bs-btn-bg: #fff;
  --bs-btn-hover-bg: var(--sr-navy);
  --bs-btn-hover-border-color: var(--sr-navy);
  --bs-btn-active-bg: var(--sr-navy-900);
  border-width: 1.5px;
}

.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-dark { border-width: 1.5px; background: #fff; }

.btn-gold {
  --bs-btn-color: #4A1F10;
  --bs-btn-bg: var(--sr-gold);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #4A1F10;
  --bs-btn-hover-bg: #FFA978;
  --bs-btn-active-color: #4A1F10;
  --bs-btn-active-bg: var(--sr-gold-600);
  background-image: linear-gradient(145deg, #FFC9AA, #FF9F6E);
  box-shadow: var(--sr-glow);
}

.btn-success { --bs-btn-bg: #2F7D5B; --bs-btn-border-color: #2F7D5B; --bs-btn-hover-bg: #276A4D; }

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--sr-gold);
  box-shadow: 0 0 0 0.25rem rgba(255, 179, 138, 0.3);
}

/* ---------- Forms: soft filled fields ---------- */
.form-control, .form-select {
  border-radius: 14px;
  border: 1.5px solid var(--sr-border);
  background-color: #FFFFFF;
  padding: 0.6rem 0.9rem;
}

.form-control-sm, .form-select-sm { border-radius: 12px; padding: 0.42rem 0.75rem; }
.form-control::placeholder { color: #A7AEB8; }

.form-check-input { border: 1.5px solid #CDBFA9; }
.form-check-input:checked { background-color: var(--sr-navy); border-color: var(--sr-navy); }

.form-label { font-weight: 600; color: var(--sr-navy); font-size: 0.92rem; }

/* ---------- Brand / desktop navbar ---------- */
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand-mark { width: 32px; height: 32px; }

.brand-name {
  font-family: "Prompt", sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--sr-navy);
  font-size: 1.25rem;
  line-height: 1;
}

.site-nav {
  /* Above page content (map filter bar, cards, Leaflet panes) so the account menu opens on top and stays clickable;
     below the bottom tab bar's overlays, offcanvas and modals. */
  position: relative;
  z-index: 1035;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--sr-border);
}
/* The account menu is long: on short screens it scrolls instead of running off the bottom. */
.site-nav .dropdown-menu { max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain; }

.site-nav .nav-link {
  color: var(--sr-navy);
  font-weight: 600;
  padding: 0.45rem 1rem !important;
  border-radius: 999px;
  margin: 0 0.15rem;
}

@media (max-width: 1199.98px) {
  .site-nav .nav-link { padding: 0.45rem 0.7rem !important; margin: 0; }
}

/* The whole width of the screen, always one line: when it is too narrow the account name goes first, then the last menu
   items move into "เมนูเพิ่มเติม" (script after the header in _Layout). */
.site-nav > .site-nav-bar { flex-wrap: nowrap; gap: 0.75rem; max-width: 1800px; padding-inline: clamp(16px, 2.5vw, 44px); }
.site-nav .brand, .site-nav .nav-tools { flex: none; }
.site-nav .navbar-nav { flex-wrap: nowrap; white-space: nowrap; }
.site-nav-bar.is-compact .nav-user-name { display: none; }
.site-nav [data-nav-more-menu] .dropdown-item { font-weight: 600; color: var(--sr-navy); }

.site-nav .nav-link:hover { background: var(--tint-gold); color: var(--sr-gold-700); }
.site-nav .nav-link.active { background: var(--sr-navy); color: #fff; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--sr-navy);
  color: rgba(255, 255, 255, 0.78);
  margin-top: 4rem;
  border-radius: 36px 36px 0 0;
}

.site-footer::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -160px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 2px solid rgba(255, 179, 138, 0.25);
  box-shadow: 0 0 0 40px rgba(255, 179, 138, 0.05);
}

.site-footer .brand-name { color: #fff; }
.site-footer a { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.site-footer a:hover { color: var(--sr-gold); }
.tagline { font-size: 0.7rem; letter-spacing: 0.22em; color: var(--sr-gold); }

/* ---------- Surfaces ---------- */
.surface {
  background: #fff;
  border-radius: var(--sr-radius);
  box-shadow: var(--sr-shadow);
  border: 0;
}

.card { border-radius: var(--sr-radius); border-color: var(--sr-border); }

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}

.section-title h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: 1.4rem;
}

.section-title h2::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: linear-gradient(145deg, #FFD3BA, var(--sr-gold-600));
}

.section-title a { font-weight: 600; text-decoration: none; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--sr-gold-700);
  background: var(--tint-gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
}

/* ---------- Icon bubbles ---------- */
.tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  flex: 0 0 auto;
  color: var(--sr-navy);
}

.tint-gold { background: var(--tint-gold); color: var(--sr-gold-700); }
.tint-sage { background: var(--tint-sage); color: #6C6450; }
.tint-navy { background: var(--tint-navy); color: var(--sr-navy); }
.tint-peach { background: var(--tint-peach); color: #A2603A; }
.tint-mint { background: var(--tint-mint); color: #2F7D5B; }

/* ---------- Greeting (signed-in, home) ---------- */
.greet {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.greet img { width: 46px; height: 46px; object-fit: contain; }
.greet .hello { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; color: var(--sr-navy); line-height: 1.2; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(420px 260px at 8% 110%, rgba(255, 179, 138, 0.28), transparent 70%),
    linear-gradient(125deg, #FFFFFF 0%, #EEF3F0 55%, var(--sr-sage) 100%);
  box-shadow: var(--sr-shadow-lg);
}

.hero-copy { padding: 3.2rem 2.75rem 3rem; position: relative; z-index: 2; }

.hero h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.2;
  font-weight: 700;
}

.hero h1 .accent {
  background: linear-gradient(120deg, #F2865A, #B4532A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-image {
  position: absolute;
  inset: 0 0 0 auto;
  width: 48%;
  background: url("/images/hero-building.png") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%);
  mask-image: linear-gradient(to right, transparent 0, #000 24%);
}

.hero-mascot {
  position: absolute;
  z-index: 3;
  right: 25%;
  bottom: -6px;
  width: 150px;
  animation: sr-float 4s ease-in-out infinite;
}

.hero-mascot img { width: 100%; }

.speech {
  position: absolute;
  left: 60%;
  top: -18px;
  white-space: nowrap;
  background: #fff;
  color: var(--sr-navy);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.5rem 0.9rem;
  border-radius: 16px 16px 16px 4px;
  box-shadow: var(--sr-shadow);
}

.speech-static {
  position: static;
  display: inline-block;
  margin-bottom: 0.75rem;
  border-radius: 16px;
  white-space: normal;
}

@keyframes sr-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mascot { animation: none; }
}

.search-tabs {
  display: inline-flex;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.75);
  padding: 0.35rem;
  border-radius: 18px 18px 0 0;
}

.search-tabs button,
.search-tabs a {
  border: 0;
  background: transparent;
  color: var(--sr-navy);
  font-weight: 600;
  padding: 0.5rem 1.6rem;
  border-radius: 14px;
  text-decoration: none;
}

.search-tabs .active { background: var(--sr-navy); color: #fff; box-shadow: 0 6px 14px -6px rgba(15, 93, 78, 0.6); }

.search-box {
  background: #fff;
  border-radius: 0 22px 22px 22px;
  padding: 0.55rem;
  box-shadow: var(--sr-shadow-lg);
}

.search-box .form-control,
.search-box .form-select { border: 0; background-color: transparent; }

.search-box .divider { width: 1px; background: var(--sr-border); align-self: stretch; }

/* ---------- Feature strip ---------- */
.features .feature { display: flex; gap: 0.9rem; align-items: center; }
.features .tile-icon { width: 50px; height: 50px; border-radius: 16px; }
.feature h3 { font-size: 1rem; margin-bottom: 0.1rem; }
.feature p { font-size: 0.85rem; color: var(--sr-muted); margin: 0; }

/* ---------- Property type tiles ---------- */
/* Icon on top, name + hint below, centred: six equal tiles in a row whatever the text length. */
.type-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  gap: 0.65rem;
  padding: 1.2rem 0.75rem 1.1rem;
  background: #fff;
  border-radius: var(--sr-radius);
  box-shadow: var(--sr-shadow);
  color: var(--sr-navy);
  text-decoration: none;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.type-tile:hover { box-shadow: var(--sr-shadow-lg); transform: translateY(-3px); color: var(--sr-navy); }
.type-tile > span:last-child { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 0; max-width: 100%; }
.type-tile strong { display: block; font-family: var(--font-head); font-weight: 600; white-space: nowrap; }
.type-tile small { display: block; max-width: 100%; color: var(--sr-muted); font-size: 0.8rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Listing card ---------- */
.listing-card {
  border: 0;
  border-radius: var(--sr-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sr-shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.listing-card:hover { box-shadow: var(--sr-shadow-lg); transform: translateY(-4px); }

.listing-card > a:first-child { display: block; overflow: hidden; }

.listing-card .cover {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  background: var(--sr-sage);
  transition: transform 0.4s ease;
}

.listing-card:hover .cover { transform: scale(1.05); }

.listing-card .cover-placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(160px 120px at 80% 10%, rgba(255, 179, 138, 0.25), transparent 70%),
    linear-gradient(135deg, #EEF3F0, var(--sr-sage));
  color: var(--sr-muted);
  font-size: 0.8rem;
}

.listing-card .cover-placeholder img { width: 48px; opacity: 0.85; }

.badge { border-radius: 999px; padding: 0.38em 0.75em; font-weight: 600; }
.badge-soft { background: var(--tint-navy); color: var(--sr-navy); }
.badge-gold { background: var(--tint-gold); color: var(--sr-gold-700); }

.badge-purpose {
  background: rgba(15, 93, 78, 0.88);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.badge-purpose.rent { background: rgba(255, 179, 138, 0.95); color: var(--sr-navy); }

.price {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--sr-navy);
}

/* ---------- Filters ---------- */
.filter-panel {
  background: #fff;
  border-radius: var(--sr-radius);
  padding: 1.35rem;
  box-shadow: var(--sr-shadow);
  position: sticky;
  top: 5rem;
}

.filter-panel .form-label { font-size: 0.85rem; }
.attr-locked { opacity: 0.5; }

/* ---------- Mascot ---------- */
.mascot { max-width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(15, 93, 78, 0.16)); }

.mascot-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(380px 260px at 15% 50%, rgba(255, 255, 255, 0.9), transparent 70%),
    linear-gradient(135deg, #F4F8F6 0%, var(--sr-sage) 100%);
  border-radius: 32px;
  padding: 2.25rem;
  box-shadow: var(--sr-shadow);
}

.mascot-name { font-family: "Prompt", sans-serif; letter-spacing: 0.12em; font-weight: 800; color: var(--sr-navy); }

.mascot-pose {
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 0.75rem 0.4rem;
}

.mascot-pose img { height: 104px; transition: transform 0.2s ease; }
.mascot-pose:hover img { transform: translateY(-4px) rotate(-3deg); }
.mascot-pose strong { display: block; font-family: var(--font-head); color: var(--sr-navy); margin-top: 0.35rem; }
.mascot-pose small { color: var(--sr-muted); }

.empty-state { text-align: center; padding: 2.75rem 1rem; }
.empty-state img { height: 150px; margin-bottom: 1rem; }

/* ---------- Auth ---------- */
.auth-card { overflow: hidden; }

.auth-aside {
  position: relative;
  background:
    radial-gradient(300px 220px at 50% 35%, rgba(255, 179, 138, 0.35), transparent 70%),
    linear-gradient(160deg, var(--sr-navy) 0%, var(--sr-navy-700) 100%);
  color: rgba(255, 255, 255, 0.85);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.auth-aside h2 { color: #fff; }
.auth-aside .mascot { height: 200px; align-self: center; margin-bottom: 1rem; animation: sr-float 4s ease-in-out infinite; }

/* ---------- Avatar / account ---------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tint-gold);
  color: var(--sr-gold-700);
  font-weight: 700;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.avatar-sm { width: 36px; height: 36px; font-size: 0.95rem; }
.avatar-lg {
  width: 68px;
  height: 68px;
  font-size: 1.7rem;
  background: linear-gradient(145deg, var(--sr-navy-700), var(--sr-navy));
  color: var(--sr-gold);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--tint-gold);
}

.profile-card {
  background:
    radial-gradient(260px 160px at 100% 0%, rgba(255, 179, 138, 0.25), transparent 70%),
    #fff !important;
}

.menu-list { overflow: hidden; padding: 0.35rem 0; }

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.8rem 1.1rem;
  color: var(--sr-navy);
  text-decoration: none;
  background: none;
  border: 0;
  text-align: left;
  font-weight: 600;
}

.menu-item + .menu-item { border-top: 1px solid #EAF0ED; }
.menu-item:hover { background: var(--sr-cream); color: var(--sr-navy); }
.menu-item.text-danger:hover { color: #b02a37; }

.menu-item svg {
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: 12px;
  background: var(--tint-gold);
  fill: none;
  stroke: var(--sr-gold-700);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.menu-item.text-danger svg { background: #FBE9E9; stroke: #B3404A; }

.menu-item:not(button)::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid #BCC7C2;
  border-top: 2px solid #BCC7C2;
  transform: rotate(45deg);
}

/* ---------- Chips & app search ---------- */
.chips { display: flex; gap: 0.4rem; }

.chip {
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 93, 78, 0.06);
  color: var(--sr-navy);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.chip.active { background: var(--sr-navy); color: #fff; box-shadow: 0 6px 14px -6px rgba(15, 93, 78, 0.6); }

.app-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border-radius: 999px;
  padding: 0.25rem 0.5rem 0.25rem 1rem;
  box-shadow: var(--sr-shadow);
}

.app-search .form-control { border: 0; background: transparent; padding-left: 0; }

/* ---------- Misc ---------- */
.breadcrumb a { text-decoration: none; }
.table > :not(caption) > * > * { padding: 0.9rem 0.8rem; }
.pagination { --bs-pagination-active-bg: var(--sr-navy); --bs-pagination-active-border-color: var(--sr-navy); --bs-pagination-color: var(--sr-navy); --bs-pagination-border-radius: 999px; gap: 0.3rem; }
.alert { border-radius: 18px; border: 0; font-weight: 500; }
.alert-success { background: #E6F3EC; color: #1E5B3A; }
.alert-danger { background: #FBECEC; color: #8A2626; }
.dropdown-menu { border-radius: 18px; padding: 0.5rem; box-shadow: var(--sr-shadow-lg) !important; }
.dropdown-item { border-radius: 10px; font-weight: 500; }
details > summary { cursor: pointer; }

/* ---------- Back office ---------- */
/* Phones/tablets: menu is one swipeable row above the page (edges fade to show there is more).
   Desktop: a sticky sidebar, grouped, so every section is always visible. */
.admin-shell { min-width: 0; }
.admin-main { min-width: 0; }
.admin-side { margin-bottom: 1.25rem; min-width: 0; }
.admin-side-head { margin-bottom: 0.75rem; }

.admin-nav {
  position: relative;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.15rem 0.25rem 0.4rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent);
}

.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav-group { display: none; }

.admin-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: var(--sr-navy);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(15, 93, 78, 0.07);
  white-space: nowrap;
}

.admin-nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--sr-gold-600);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-nav-item:hover { color: var(--sr-gold-700); background: var(--tint-gold); }
.admin-nav-item.active { background: var(--sr-navy); color: #fff; box-shadow: 0 8px 18px -8px rgba(15, 93, 78, 0.6); }
.admin-nav-item.active svg { stroke: var(--sr-gold); }

@media (min-width: 992px) {
  .admin-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 1.75rem; align-items: start; }
  .admin-side {
    position: sticky;
    top: 5.25rem;
    margin: 0;
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
    scrollbar-width: thin;
    background: #fff;
    border-radius: var(--sr-radius);
    box-shadow: var(--sr-shadow);
    padding: 1rem 0.75rem;
  }
  .admin-side-head { padding: 0 0.35rem; }
  .admin-nav { flex-direction: column; gap: 2px; overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .admin-nav-group {
    display: block;
    margin: 0.85rem 0.6rem 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--sr-muted);
  }
  .admin-nav-group:first-child { margin-top: 0.25rem; }
  .admin-nav-item { border-radius: 12px; box-shadow: none; background: transparent; padding: 0.55rem 0.7rem; white-space: normal; }
  .admin-nav-item.active { box-shadow: 0 8px 18px -10px rgba(15, 93, 78, 0.6); }
}


/* Breathing room under the top bar (phones/tablets get their own, smaller values further down). */
.app-content { padding-top: 2rem; padding-bottom: 2.5rem; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.page-head h1 { margin: 0; font-size: 1.45rem; }

.data-table { background: #fff; border-radius: var(--sr-radius); overflow: hidden; box-shadow: var(--sr-shadow); }
/* Wide tables scroll inside their card (overflow:hidden above would otherwise clip the extra columns). */
.data-table.table-responsive { overflow-x: auto; }
.data-table table { margin: 0; }
.data-table thead th {
  background: #F4F8F6;
  color: var(--sr-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--sr-border);
  white-space: nowrap;
}
.data-table tbody tr:hover { background: #F8FBFA; }
.data-table td { border-color: #EAF0ED; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.35rem; }
.dot-on { background: #2F9E6B; }
.dot-off { background: #C9CED6; }

.check-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1.5px solid var(--sr-border);
  background: #fff;
  cursor: pointer;
  font-weight: 500;
  user-select: none;
}

.check-pill input { accent-color: var(--sr-navy); }
.check-pill:has(input:checked) { border-color: var(--sr-navy); background: var(--tint-navy); }

.matrix th, .matrix td { text-align: center; vertical-align: middle; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix .form-check-input { width: 1.25em; height: 1.25em; }

.json-pre {
  max-height: 260px;
  overflow: auto;
  background: #F7F9F8;
  border-radius: 12px;
  padding: 0.75rem;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.verify-badge { font-size: 0.75rem; }

.feature-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
}

.feature-row + .feature-row { border-top: 1px solid #EAF0ED; }

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: #D9DEE5;
  transition: background-color 0.18s ease;
  cursor: pointer;
}

.switch .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 93, 78, 0.25);
  transition: transform 0.18s ease;
}

.switch.on { background: linear-gradient(145deg, #FFC3A0, var(--sr-gold-600)); }
.switch.on .knob { transform: translateX(22px); }
.switch:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem rgba(255, 179, 138, 0.35); }

.sso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--sr-border);
  background: #fff;
  color: var(--sr-ink);
  font-weight: 600;
  text-decoration: none;
}

.sso-btn:hover { border-color: var(--sr-gold); color: var(--sr-ink); box-shadow: var(--sr-shadow); }
.sso-btn.line { background: #06C755; border-color: #06C755; color: #fff; }
.sso-btn.line:hover { color: #fff; filter: brightness(0.95); }
.sso-btn.apple { background: #000; border-color: #000; color: #fff; }
.sso-btn.apple:hover { color: #fff; filter: brightness(1.25); }
.sso-btn.wechat { background: #07C160; border-color: #07C160; color: #fff; }
.sso-btn.wechat:hover { color: #fff; filter: brightness(0.95); }

.divider-text {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--sr-muted);
  font-size: 0.85rem;
  margin: 1.25rem 0;
}

.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--sr-border); }

.otp-input {
  font-size: 1.8rem;
  letter-spacing: 0.6em;
  text-align: center;
  font-weight: 700;
  padding-left: 0.6em;
}

/* =====================================================================
   Map search (rent) — map left, results right, filter bar on top
   ===================================================================== */
.app-full { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
.app-full-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }

body.page-map { height: 100vh; overflow: hidden; }
/* Desktop map page: the page is exactly one screen tall, so the frame must not grow with the result list —
   otherwise the list is cut off instead of scrolling inside its own column. */
@media (min-width: 992px) {
  body.page-map .app-full { flex: 1 1 0; min-height: 0; }
}

.map-search {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 46%);
  grid-template-rows: auto minmax(0, 1fr);
}

.map-filters {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.7rem 1.25rem;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--sr-border);
  z-index: 500;
}

.map-filters-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 320px;
  max-width: 460px;
  background: #fff;
  border-radius: 999px;
  padding: 0.2rem 0.25rem 0.2rem 0.9rem;
  box-shadow: 0 2px 10px rgba(15, 93, 78, 0.08);
}

.map-filters-search .form-control { border: 0; background: transparent; padding-left: 0; }
.map-filters-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1.5px solid var(--sr-border);
  background: #fff;
  color: var(--sr-navy);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.filter-chip:hover, .filter-chip[aria-expanded="true"] { border-color: var(--sr-gold); }
.filter-chip::after { content: none; }
.filter-chip span:not(:empty) { color: var(--sr-gold-700); }
.filter-menu { max-height: 60vh; overflow-y: auto; }

.map-pane { position: relative; grid-row: 2; grid-column: 1; min-height: 0; }
#map { position: absolute; inset: 0; background: #E9EEF2; }

.map-follow, .map-locate, .map-truncated {
  position: absolute;
  z-index: 450;
  background: #fff;
  box-shadow: var(--sr-shadow);
  border-radius: 999px;
}

.map-follow {
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sr-navy);
  cursor: pointer;
}

.map-locate {
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  color: var(--sr-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-truncated {
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #8A6A3B;
  background: var(--tint-gold);
}

.map-results {
  grid-row: 2;
  grid-column: 2;
  overflow-y: auto;
  padding: 1rem 1.25rem 2rem;
  border-left: 1px solid var(--sr-border);
  background: var(--sr-cream);
}

.map-results-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.map-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.map-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 93, 78, 0.07);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  outline: 2px solid transparent;
}

.map-card:hover, .map-card.active { box-shadow: var(--sr-shadow-lg); transform: translateY(-2px); }
.map-card.active { outline-color: var(--sr-gold); }
.map-card-link { color: inherit; text-decoration: none; display: block; }
.map-card-img { position: relative; aspect-ratio: 4 / 3; background: var(--sr-sage); overflow: hidden; }
.map-card-img > img { width: 100%; height: 100%; object-fit: cover; }
.map-card-img .badge { position: absolute; top: 10px; left: 10px; }

.map-card-noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(160px 120px at 80% 10%, rgba(255, 179, 138, 0.25), transparent 70%), linear-gradient(135deg, #EEF3F0, var(--sr-sage));
}

.map-card-noimg img { width: 44px; opacity: 0.85; }
.map-card-body { padding: 0.75rem 0.9rem 0.9rem; }
.map-card-body .price { font-size: 1.2rem; }
.map-card-body .price small, .pin-card .price small { font-size: 0.8rem; font-weight: 500; color: var(--sr-muted); }
.map-card-meta { font-size: 0.85rem; color: var(--sr-ink); font-weight: 500; }
.map-card-title { font-size: 0.85rem; color: var(--sr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-card-loc { font-size: 0.8rem; color: var(--sr-muted); }

.results-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; }
.results-empty .mascot { height: 110px; }

body.is-loading .map-results-grid { opacity: 0.55; transition: opacity 0.2s; }
body.is-loading .map-filters::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  margin-top: 2.6rem;
  background: linear-gradient(90deg, transparent, var(--sr-gold), transparent);
  animation: sr-load 1s linear infinite;
}

@keyframes sr-load { from { transform: translateX(-60%); } to { transform: translateX(60%); } }

/* ---------- markers ---------- */
.price-pin-wrap { background: none; border: 0; }

.price-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: #fff;
  color: var(--sr-navy);
  font: 600 0.8rem/1 "Prompt", sans-serif;
  box-shadow: 0 3px 10px rgba(15, 93, 78, 0.28);
  border: 1.5px solid var(--sr-navy);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.price-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--sr-navy);
  border-bottom: 0;
}

.price-pin:hover { transform: translate(-50%, -100%) scale(1.08); }
.price-pin.active { background: var(--sr-navy); color: var(--sr-gold); transform: translate(-50%, -100%) scale(1.12); }

.cluster-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--sr-navy);
  color: #fff;
  font: 600 0.8rem/1 "Prompt", sans-serif;
  box-shadow: 0 0 0 4px rgba(15, 93, 78, 0.18), 0 4px 12px rgba(15, 93, 78, 0.3);
}

.cluster-pin svg { width: 14px; height: 14px; fill: var(--sr-gold); }

.home-pin {
  position: absolute;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -100%) rotate(-45deg);
  transform-origin: center;
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(145deg, #FFC3A0, var(--sr-gold-600));
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(15, 93, 78, 0.35);
}

.pin-popup .leaflet-popup-content-wrapper { border-radius: 16px; padding: 0; overflow: hidden; }
.pin-popup .leaflet-popup-content { margin: 0; width: 240px !important; }
.pin-card { display: block; color: inherit; text-decoration: none; }
.pin-card-img { aspect-ratio: 16 / 9; background: var(--sr-sage); overflow: hidden; }
.pin-card-img > img { width: 100%; height: 100%; object-fit: cover; }
.pin-card-img .map-card-noimg img { width: 34px; }
.pin-card-body { padding: 0.6rem 0.8rem 0.75rem; }
.pin-card-body .price { font-size: 1.05rem; }
.pin-card-title { font-size: 0.8rem; color: var(--sr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.detail-map, .picker-map { height: 320px; border-radius: var(--sr-radius); overflow: hidden; box-shadow: var(--sr-shadow); margin-bottom: 0.5rem; }
.picker-map { height: 360px; cursor: crosshair; }

.view-toggle { display: none; }

@media (max-width: 991.98px) {
  body.page-map { height: auto; overflow: visible; }
  .map-search { display: block; }
  .map-filters { position: sticky; top: calc(58px + env(safe-area-inset-top)); padding: 0.6rem 0.75rem; gap: 0.5rem; }
  .map-filters-search { max-width: none; flex-basis: 100%; }
  .map-filters-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .map-filters-chips::-webkit-scrollbar { display: none; }
  .filter-chip { flex: 0 0 auto; }
  .map-results { border: 0; padding: 0.9rem 0.75rem 1rem; }
  .map-results-grid { grid-template-columns: 1fr; }

  .map-pane {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: calc(58px + env(safe-area-inset-top) + 7.4rem);
    bottom: 0;
    z-index: 400;
  }

  body.show-map .map-pane { display: block; }
  body.show-map .map-results { display: none; }

  .view-toggle {
    display: inline-flex;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 22px);
    z-index: 1031;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border: 0;
    border-radius: 999px;
    background: var(--sr-navy);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 10px 24px -6px rgba(15, 93, 78, 0.55);
  }

  .view-toggle .when-map, body.show-map .view-toggle .when-list { display: none; }
  body.show-map .view-toggle .when-map { display: inline-flex; align-items: center; gap: 0.4rem; }
  .view-toggle .when-list { display: inline-flex; align-items: center; gap: 0.4rem; }
  .map-truncated { bottom: calc(var(--tabbar-h) + 80px); }
}

/* =====================================================================
   Mobile "app" shell (below lg / 992px)
   ===================================================================== */
.app-header,
.tabbar { display: none; }

@media (max-width: 991.98px) {
  :root { --tabbar-h: 66px; }

  body {
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 6px);
    -webkit-tap-highlight-color: transparent;
    background-attachment: scroll;
  }

  .form-control, .form-select { font-size: 16px; }
  .app-content { padding-top: 0.9rem; padding-bottom: 1.5rem; }

  /* ---- Top app bar ---- */
  .app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: calc(58px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 0.85rem 0;
    background: rgba(247, 249, 248, 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }

  .app-header .brand-mark { width: 28px; height: 28px; }
  .app-header .brand-name { font-size: 1rem; }
  .app-header .btn { white-space: nowrap; flex-shrink: 0; }
  .app-header-title { min-width: 0; }
  .app-header-title { font-family: var(--font-head); font-weight: 600; color: var(--sr-navy); font-size: 1.05rem; }

  .app-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 93, 78, 0.08);
    color: var(--sr-navy);
  }

  /* ---- Bottom tab bar (flush with the bottom edge; the home-indicator area is padded) ---- */
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    align-items: center;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 0 0.3rem env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--sr-border);
    box-shadow: 0 -6px 20px -12px rgba(15, 93, 78, 0.3);
  }

  .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 54px;
    margin: 0 2px;
    border-radius: 18px;
    color: #8A93A1;
    text-decoration: none;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .tab svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .tab.active { color: var(--sr-navy); background: var(--tint-mint); }
  .tab.active svg { stroke: var(--sr-navy); stroke-width: 2.2; fill: var(--sr-success); }
  .tab:active { transform: scale(0.93); }

  .tab-cta { background: none !important; height: var(--tabbar-h); justify-content: flex-end; padding-bottom: 8px; gap: 0; }

  .tab-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -26px;
    margin-bottom: 12px;
    border-radius: 15px;
    transform: rotate(45deg);
    background: linear-gradient(145deg, #FFD3BA, var(--sr-gold-600));
    box-shadow: var(--sr-glow), 0 0 0 5px var(--sr-cream);
  }

  .tab-cta-btn svg { transform: rotate(-45deg); stroke: var(--sr-navy) !important; stroke-width: 2.6 !important; }
  .tab-cta.active { color: var(--sr-gold-700); }

  /* ---- Filter bottom sheet ---- */
  .filter-sheet.offcanvas-bottom { height: auto; max-height: 88vh; border-radius: 28px 28px 0 0; border: 0; }
  .filter-sheet .offcanvas-header { position: relative; padding-top: 1.5rem; }

  .filter-sheet .offcanvas-header::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    width: 44px;
    height: 5px;
    margin-left: -22px;
    border-radius: 3px;
    background: #CFD8D3;
  }

  .filter-sheet .offcanvas-body { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .filter-sheet .filter-panel { box-shadow: none; padding: 0; position: static; }

  /* ---- Lists: horizontal "row" cards ---- */
  .listing-list > .col { width: 100%; }
  .listing-list .listing-card { flex-direction: row; align-items: stretch; border-radius: 20px; }
  .listing-list .listing-card:hover { transform: none; }
  .listing-list .listing-card > a:first-child { flex: 0 0 38%; max-width: 150px; margin: 8px; border-radius: 14px; }

  .listing-list .listing-card .cover,
  .listing-list .listing-card .cover-placeholder { height: 100%; aspect-ratio: auto; min-height: 112px; border-radius: 14px; }

  .listing-list .listing-card .cover-placeholder img { width: 30px; }
  .listing-list .listing-card .cover-placeholder span { display: none; }
  .listing-list .listing-card .card-body { padding: 0.7rem 0.85rem 0.7rem 0.2rem; min-width: 0; }
  .listing-list .listing-card .price { font-size: 1.1rem; }
  .listing-list .badge-purpose { font-size: 0.65rem; }

  /* ---- Home: swipe carousel ---- */
  .scroller {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Sideways only: a row a few pixels taller inside (the "แนะนำสำหรับคุณ" reason line) also scrolled up / down, so a
       swipe was not held to the row — up / down belongs to the page. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-right: -0.75rem;
    padding-bottom: 1rem;
  }

  .scroller::-webkit-scrollbar { display: none; }
  .scroller > .col { flex: 0 0 76%; max-width: 76%; scroll-snap-align: start; }

  /* ---- Home ---- */
  .hero { border-radius: 26px; }
  .hero-image { position: relative; width: 100%; height: 175px; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); }
  .hero-copy { padding: 0.25rem 1rem 1.25rem; }
  .hero .eyebrow { display: none; }
  .hero h1 { font-size: 1.65rem; }
  .hero h1 br { display: none; }
  /* Sits on the photo, clear of the headline below it. */
  .hero-mascot { right: 8px; top: 66px; bottom: auto; width: 84px; }
  .hero-mascot .speech { display: none; }
  .search-tabs button, .search-tabs a { padding: 0.45rem 1.15rem; }

  .type-tile { flex-direction: column; text-align: center; gap: 0.45rem; padding: 0.85rem 0.3rem; border-radius: 20px; }
  .type-tile .tile-icon { width: 48px; height: 48px; border-radius: 16px; }
  .type-tile small { display: none; }
  .type-tile strong { font-size: 0.82rem; white-space: normal; line-height: 1.3; }

  .section-title h2 { font-size: 1.15rem; }
  .mascot-panel { padding: 1.35rem; border-radius: 26px; }
  .mascot-pose { padding: 0.5rem 0.2rem; }
  .mascot-pose img { height: 78px; }
  .mascot-pose small { display: none; }

  .empty-state { padding: 2rem 1rem; }
  .empty-state img { height: 120px; }

  .card-footer.sticky-actions {
    position: sticky;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px);
    z-index: 5;
    border-radius: 0 0 var(--sr-radius) var(--sr-radius);
    box-shadow: 0 -6px 16px -8px rgba(15, 93, 78, 0.15);
  }
}

@media (display-mode: standalone) {
  body { -webkit-user-select: none; user-select: none; }
  input, textarea { -webkit-user-select: text; user-select: text; }
}

/* =====================================================================
   Rental: leases, bills, payments, reports
   ===================================================================== */
.seg-nav {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3rem;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--sr-shadow);
  max-width: 100%;
  overflow-x: auto;
}
.seg-nav a {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  color: var(--sr-muted);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}
.seg-nav a:hover { color: var(--sr-navy); }
.seg-nav a.active { background: var(--sr-navy); color: #fff; }

.chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
a.filter-chip { text-decoration: none; }
a.filter-chip.active { background: var(--sr-navy); border-color: var(--sr-navy); color: #fff; }

.price-lg { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--sr-navy); line-height: 1.2; }
.price-lg small { font-size: 0.8rem; font-weight: 500; color: var(--sr-muted); }
.party-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--sr-gold-700); text-transform: uppercase; }

.lease-row { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.25rem; color: inherit; transition: transform .15s, box-shadow .15s; }
.lease-row:hover { transform: translateY(-1px); box-shadow: var(--sr-shadow-lg); }
.lease-row-main { flex: 1; min-width: 0; }
.lease-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; text-align: right; }
.lease-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--sr-radius-sm); flex-shrink: 0; }

.calc-box { background: var(--tint-gold); border-radius: var(--sr-radius-sm); padding: 0.9rem 1.1rem; display: grid; gap: 0.35rem; font-size: 0.92rem; }
.calc-box b { color: var(--sr-navy); }

.contract-doc, .invoice-doc { padding: 1.75rem; position: relative; overflow: hidden; }
.contract-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--tint-gold); }
.contract-section { padding: 1.25rem 0; border-bottom: 1px solid #EAF0ED; }
.contract-section:last-child { border-bottom: 0; padding-bottom: 0; }
.term-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.9rem 1.5rem; margin: 0; }
.term-grid dt { font-size: 0.78rem; font-weight: 500; color: var(--sr-muted); }
.term-grid dd { margin: 0; font-weight: 600; color: var(--sr-navy); }
.contract-terms { white-space: pre-line; font-size: 0.92rem; line-height: 1.75; background: var(--sr-cream); border-radius: var(--sr-radius-sm); padding: 1rem 1.25rem; }
.signature-box { border: 1.5px dashed var(--sr-gold); border-radius: var(--sr-radius-sm); padding: 1rem 1.25rem; background: #F8FBFA; }
.signature { font-family: "Prompt", cursive; font-size: 1.6rem; font-style: italic; color: var(--sr-navy); }
.sign-form { background: var(--tint-gold); border-radius: var(--sr-radius-sm); padding: 1.25rem; }
.signature-input { font-size: 1.15rem; font-style: italic; }

.bill-mini-list { display: grid; }
.bill-mini { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 1.5rem; color: inherit; text-decoration: none; border-top: 1px solid #EAF0ED; }
.bill-mini:hover { background: #F8FBFA; }

.bill-row { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.1rem; color: inherit; border-left: 4px solid transparent; }
.bill-row:hover { box-shadow: var(--sr-shadow-lg); }
.bill-row.is-overdue { border-left-color: #C0392B; }
.bill-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--tint-navy); color: var(--sr-navy); flex-shrink: 0; line-height: 1.05; }
.bill-date .d { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; }
.bill-date .m { font-size: 0.7rem; }

.invoice-lines td, .invoice-lines th { padding: 0.6rem 0; }
.invoice-lines tfoot th { border-bottom: 0; border-top: 2px solid var(--sr-navy); color: var(--sr-navy); }
.payment-log li { padding: 0.55rem 0; border-top: 1px solid #EAF0ED; }
.payment-log li:first-child { border-top: 0; padding-top: 0; }
.paid-stamp {
  position: absolute; right: 1.5rem; bottom: 4.5rem; transform: rotate(-14deg);
  border: 3px solid #2E8B57; color: #2E8B57; border-radius: 10px;
  padding: 0.2rem 1rem; font: 800 1.6rem/1.2 var(--font-head); letter-spacing: 0.15em; opacity: 0.55;
}

.qr-card { border-top: 4px solid var(--sr-gold); }
.qr-img { width: min(280px, 100%); aspect-ratio: 1; object-fit: contain; border-radius: 12px; border: 1px solid var(--sr-border); padding: 8px; background: #fff; }
.qr-steps { padding-left: 1.2rem; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.kpi { padding: 1.1rem 1.25rem; }
.kpi-label { font-size: 0.82rem; color: var(--sr-muted); font-weight: 500; }
.kpi-value { font-family: var(--font-head); font-size: 1.65rem; font-weight: 700; color: var(--sr-navy); line-height: 1.3; }
.kpi-sub { font-size: 0.8rem; color: var(--sr-muted); }

.legend-key { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--sr-ink); }
.legend-key i, .chart-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 0.35rem; }
.month-chart { position: relative; width: 100%; min-height: 260px; }
.month-chart svg { display: block; width: 100%; height: auto; }
.axis-text { font-size: 11px; fill: var(--sr-muted); }
.chart-hit { cursor: default; outline: none; }
.chart-hit.on { fill: rgba(15, 93, 78, 0.04); }
.chart-tip {
  position: absolute; top: 0; z-index: 2; pointer-events: none; min-width: 170px;
  background: #fff; border: 1px solid var(--sr-border); border-radius: 12px; box-shadow: var(--sr-shadow);
  padding: 0.55rem 0.75rem; font-size: 0.82rem; color: var(--sr-ink);
}
.report-filter .form-control { width: 150px; }

@media (max-width: 575.98px) {
  .contract-doc, .invoice-doc { padding: 1.25rem; }
  .lease-row { flex-direction: column; align-items: stretch; }
  .lease-row-side { flex-direction: row; justify-content: space-between; align-items: center; }
  .report-filter .form-control { width: 135px; }
}

@media print {
  .site-nav, .app-header, .tabbar, .site-footer, .no-print, .alert { display: none !important; }
  body { background: #fff; }
  .surface { box-shadow: none; }
  .app-content { padding: 0 !important; }
}

/* Grid items default to min-width:auto, so a long truncated title would push the card off-screen. */
.lease-row, .bill-row { min-width: 0; }
@media (max-width: 575.98px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
  .kpi { padding: 0.85rem 0.95rem; }
  .kpi-value { font-size: 1.25rem; }
  .bill-row { gap: 0.7rem; padding: 0.75rem 0.85rem; }
}

/* =====================================================================
   Listing detail page
   ===================================================================== */
.owner-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem; padding: 0.9rem 1.1rem; border-left: 4px solid var(--sr-gold); }
.owner-bar-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--tint-gold); display: grid; place-items: center; flex-shrink: 0; }
.owner-bar-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--sr-gold-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.owner-bar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Gallery: one large photo + up to four tiles */
.gallery { position: relative; display: grid; gap: 8px; border-radius: var(--sr-radius); overflow: hidden; height: clamp(240px, 42vw, 460px); }
.gallery-1 { grid-template-columns: 1fr; }
.gallery-2 { grid-template-columns: 2fr 1fr; }
.gallery-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.gallery-4, .gallery-5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.gallery-3 .gallery-item:first-child, .gallery-4 .gallery-item:first-child, .gallery-5 .gallery-item:first-child { grid-row: 1 / 3; }
.gallery-4 .gallery-item:nth-child(4) { grid-column: 2 / 4; }
.gallery-item { padding: 0; border: 0; background: var(--sr-sage); overflow: hidden; cursor: zoom-in; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-all {
  position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 0.4rem;
  border: 0; border-radius: 999px; padding: 0.5rem 0.95rem; font-weight: 600; font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.94); color: var(--sr-navy); box-shadow: var(--sr-shadow);
}
.gallery-all svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* No photos: a branded cover instead of an empty box */
.detail-cover {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.25rem;
  height: clamp(170px, 24vw, 250px); padding: 0 clamp(1.25rem, 4vw, 3rem); border-radius: var(--sr-radius);
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 179, 138, 0.45), transparent 45%),
    radial-gradient(circle at 10% 110%, rgba(255, 179, 138, 0.25), transparent 40%),
    linear-gradient(135deg, var(--sr-navy-900), var(--sr-navy) 55%, var(--sr-navy-700));
  color: #fff;
}
.detail-cover::after {
  content: ""; position: absolute; inset: 0; opacity: 0.08; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 28px 28px;
}
.detail-cover-icon { width: clamp(64px, 8vw, 92px); height: clamp(64px, 8vw, 92px); border-radius: 26px; background: rgba(255,255,255,.1); border: 1px solid rgba(255, 179, 138,.5); display: grid; place-items: center; z-index: 1; flex-shrink: 0; }
.detail-cover-icon svg { width: 55%; height: 55%; fill: none; stroke: var(--sr-gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.detail-cover-text { z-index: 1; min-width: 0; }
.detail-cover-type { font-family: var(--font-head); font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; }
.detail-cover-sub { color: rgba(255,255,255,.75); letter-spacing: .04em; }
.detail-cover-mascot { position: absolute; right: clamp(0.5rem, 4vw, 3rem); bottom: -6px; height: 95%; z-index: 1; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }

/* Title */
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin: 1.5rem 0 1.25rem; }
.detail-title { font-size: clamp(1.45rem, 2.6vw, 2.1rem); line-height: 1.25; margin-bottom: 0.4rem; }
.detail-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; color: var(--sr-ink); font-size: 0.95rem; }
.detail-posted { color: var(--sr-muted); }
.detail-posted::before { content: "· "; }
.detail-loc svg { width: 17px; height: 17px; fill: none; stroke: var(--sr-gold-600); stroke-width: 2; }
.detail-head-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--sr-border);
  background: #fff; color: var(--sr-navy); transition: border-color .15s, transform .15s;
}
.icon-btn:hover { border-color: var(--sr-gold); transform: translateY(-1px); }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.avail-pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--tint-navy); color: var(--sr-navy); }
.avail-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.avail-pill.is-now { background: var(--tint-mint); color: #1E7A4C; }
.avail-pill.is-now i { box-shadow: 0 0 0 3px rgba(30, 122, 76, 0.18); }

/* Key facts */
.fact-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 0.75rem; }
.fact-grid li { background: #fff; border-radius: 18px; padding: 0.9rem 1rem; box-shadow: var(--sr-shadow); display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: center; }
.fact-grid svg { grid-row: 1 / 3; width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: var(--tint-gold); fill: none; stroke: var(--sr-gold-700); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fact-grid b { font-family: var(--font-head); font-size: 1.2rem; color: var(--sr-navy); line-height: 1.15; }
.fact-grid span { font-size: 0.76rem; color: var(--sr-muted); line-height: 1.25; }

/* Content sections */
.detail-section { background: #fff; border-radius: var(--sr-radius); box-shadow: var(--sr-shadow); padding: 1.4rem 1.5rem; margin-bottom: 1rem; }
.detail-section h2 { display: flex; align-items: center; gap: 0.55rem; font-size: 1.12rem; margin-bottom: 1rem; }
.detail-section h2::before { content: ""; width: 9px; height: 9px; border-radius: 3px; transform: rotate(45deg); background: linear-gradient(145deg, #FFD3BA, var(--sr-gold-600)); }
.detail-desc { white-space: pre-line; line-height: 1.8; max-height: 10.8em; overflow: hidden; position: relative; }
.detail-desc:not(.is-open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5em; background: linear-gradient(rgba(255,255,255,0), #fff); }
.detail-desc.is-open { max-height: none; }
.detail-desc.is-open::after { display: none; }

.amenity-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem 1rem; }
.amenity-grid li { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; }
.amenity-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--tint-mint); display: grid; place-items: center; flex-shrink: 0; }
.amenity-icon svg { width: 18px; height: 18px; fill: none; stroke: #1E7A4C; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.amenity-grid li.is-no { color: var(--sr-muted); font-weight: 400; }
.amenity-grid li.is-no .amenity-icon { background: #EEF3F0; }
.amenity-grid li.is-no .amenity-icon svg { stroke: #A39A8C; }

.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; margin: 0; }
.spec-grid > div { display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: center; padding: 0.7rem 0.85rem; border-radius: 14px; background: var(--sr-cream); }
.spec-icon { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px; background: #fff; display: grid; place-items: center; }
.spec-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--sr-navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.spec-grid dt { font-size: 0.76rem; font-weight: 500; color: var(--sr-muted); }
.spec-grid dd { margin: 0; font-weight: 600; color: var(--sr-navy); }
.unit { font-weight: 400; font-size: 0.82em; color: var(--sr-muted); }

.location-card { border-radius: var(--sr-radius-sm); overflow: hidden; border: 1px solid var(--sr-border); }
.location-card .detail-map { border-radius: 0; box-shadow: none; margin: 0; height: 340px; }
.location-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; background: #F8FBFA; }
.loc-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; fill: none; stroke: var(--sr-gold-600); stroke-width: 2; }

/* Price card */
.price-card { position: relative; background: #fff; border-radius: var(--sr-radius); box-shadow: var(--sr-shadow-lg); overflow: hidden; }
.price-card-head { padding: 1.3rem 1.5rem 1.1rem; color: #fff; background: radial-gradient(circle at 100% 0, rgba(255, 179, 138,.4), transparent 55%), linear-gradient(135deg, var(--sr-navy-900), var(--sr-navy)); }
.price-card-amount { font-family: var(--font-head); font-size: 2.1rem; font-weight: 700; line-height: 1.1; }
.price-card-amount small { font-size: 0.95rem; font-weight: 500; opacity: 0.75; margin-left: 0.2rem; }
.price-card-sub { font-size: 0.8rem; color: var(--sr-gold); letter-spacing: 0.05em; margin-top: 0.15rem; }
.price-card-body { padding: 1.1rem 1.5rem 1.4rem; }
.cost-list { margin: 0; display: grid; }
.cost-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--sr-border); }
.cost-list dt { font-weight: 400; color: var(--sr-muted); }
.cost-list dd { margin: 0; font-weight: 600; color: var(--sr-navy); text-align: right; }
.move-in-total { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 16px; background: linear-gradient(135deg, #FFF4EC, var(--tint-gold)); }
.move-in-total .label { font-weight: 600; color: var(--sr-navy); font-size: 0.9rem; }
.move-in-total .hint { font-size: 0.74rem; color: var(--sr-gold-700); }
.move-in-total .amount { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; color: var(--sr-navy); white-space: nowrap; }

.how-card { background: #fff; border-radius: var(--sr-radius); box-shadow: var(--sr-shadow); padding: 1.1rem 1.25rem; }
.how-mascot { height: 46px; }
.how-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.how-steps li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; column-gap: 0.65rem; font-size: 0.85rem; }
.how-steps li::before { content: counter(step); grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; color: var(--sr-navy); background: var(--tint-gold); }
.how-steps b { color: var(--sr-navy); font-weight: 600; }
.how-steps span { color: var(--sr-muted); font-size: 0.78rem; }

/* Nearby */
.nearby-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }

.toast-lite { position: fixed; left: 50%; bottom: calc(var(--tabbar-h, 0px) + 24px); transform: translateX(-50%); z-index: 2000; background: var(--sr-navy); color: #fff; padding: 0.6rem 1.1rem; border-radius: 999px; box-shadow: var(--sr-shadow-lg); font-size: 0.9rem; }

@media (max-width: 991.98px) {
  .price-card { position: static; }
  .nearby-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 0.75rem 0.5rem; margin: 0 -0.75rem; }
  .nearby-item { flex: 0 0 72%; scroll-snap-align: start; }
}
@media (max-width: 575.98px) {
  .gallery { height: 260px; grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; margin: 0 -0.75rem; border-radius: 0; }
  .gallery .gallery-item:not(:first-child) { display: none; }
  .detail-cover { margin: 0 -0.75rem; border-radius: 0 0 24px 24px; height: 170px; }
  .detail-cover-mascot { height: 78%; right: 0.25rem; }
  .detail-cover-text { padding-right: 118px; }
  .detail-cover-icon { width: 58px; height: 58px; border-radius: 18px; }
  .detail-posted { flex-basis: 100%; padding-left: 1.35rem; font-size: 0.85rem; }
  .detail-posted::before { content: none; }
  /* phones: the action icons get their own row so the title keeps the full width */
  .detail-head { margin-top: 1.1rem; flex-direction: column-reverse; gap: 0.6rem; }
  .detail-head-actions { align-self: flex-end; margin-bottom: -0.2rem; }
  .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .fact-grid li { padding: 0.75rem 0.8rem; }
  .detail-section { padding: 1.15rem 1.1rem; }
  .owner-bar-actions { width: 100%; }
}

/* =====================================================================
   Listing form: photo manager
   ===================================================================== */
.photo-manager { border: 1.5px dashed var(--sr-border); border-radius: var(--sr-radius-sm); padding: 0.75rem; background: #F8FBFA; }
.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 0.6rem; }
.photo-grid:not(:empty) { margin-bottom: 0.75rem; }
.photo-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--sr-sage); cursor: grab; box-shadow: 0 2px 6px rgba(15, 93, 78, .08); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.photo-tile.is-cover { outline: 3px solid var(--sr-gold); outline-offset: -3px; }
.photo-tile.is-dragging { opacity: 0.4; }
.photo-cover-badge { display: none; position: absolute; top: 6px; left: 6px; background: var(--sr-gold); color: var(--sr-navy-900); font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; }
.photo-tile.is-cover .photo-cover-badge { display: block; }
.photo-actions { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 4px; padding: 6px; background: linear-gradient(transparent, rgba(10, 27, 51, .7)); opacity: 0; transition: opacity .15s; }
.photo-tile:hover .photo-actions, .photo-tile:focus-within .photo-actions { opacity: 1; }
.photo-actions button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; padding: 0; }
.photo-actions button svg { width: 15px; height: 15px; fill: none; stroke: var(--sr-navy); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.photo-actions button.danger svg { stroke: #B3404A; }
.photo-actions button:focus-visible { outline: 2px solid var(--sr-gold); }
.photo-tile.is-cover .photo-actions [data-act="cover"], .photo-tile:first-child .photo-actions [data-act="left"], .photo-tile:last-child .photo-actions [data-act="right"] { display: none; }
.photo-tile.is-uploading { cursor: progress; }
.photo-tile.is-uploading img { opacity: 0.45; filter: blur(1px); }
.photo-progress { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .7); overflow: hidden; }
.photo-progress::after { content: ""; display: block; height: 100%; width: var(--progress, 5%); background: var(--sr-gold-600); transition: width .2s; }
.photo-drop { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; padding: 1.1rem; border-radius: 12px; cursor: pointer; color: var(--sr-navy); transition: background .15s; margin: 0; }
.photo-drop:hover, .photo-drop.is-over { background: var(--tint-gold); }
.photo-drop svg { width: 34px; height: 34px; fill: none; stroke: var(--sr-gold-600); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.photo-drop small { color: var(--sr-muted); }
/* Touch screens have no hover: keep the buttons visible. */
@media (hover: none) { .photo-actions { opacity: 1; } }

/* Mouse/trackpad users cannot swipe: show a thin scrollbar on horizontal rows, and wrap the back-office menu. */
@media (hover: hover) and (pointer: fine) {
  .scroller, .map-filters-chips, .seg-nav, .nearby-row, .data-table.table-responsive { scrollbar-width: thin; }
  .scroller::-webkit-scrollbar, .map-filters-chips::-webkit-scrollbar { display: block; height: 6px; }
}
@media (hover: hover) and (pointer: fine) and (max-width: 991.98px) {
  .admin-nav { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

/* Phones: a table marked .table-stack shows each row as a small card (label : value) instead of squeezed columns. */
@media (max-width: 575.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: 0.75rem 1rem; border-bottom: 1px solid #EAF0ED; }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack > :not(caption) > * > * { padding: 0.15rem 0; border: 0; }
  .table-stack td[data-label] { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; text-align: right; }
  .table-stack td[data-label]::before { content: attr(data-label); color: var(--sr-muted); font-size: 0.85rem; text-align: left; white-space: nowrap; }
  .table-stack td.stack-title { padding-bottom: 0.35rem; }
}

/* =====================================================================
   Notifications: bell, dropdown, list page, toast, settings
   ===================================================================== */
.notif-btn { position: relative; }
.notif-badge {
  position: absolute; top: -3px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: #D64545; color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 19px; text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.notif-badge[hidden] { display: none; }

.notif-menu { width: min(380px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.notif-menu-head { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1rem 0.6rem; }
.notif-menu-list { max-height: min(420px, 60vh); overflow-y: auto; border-top: 1px solid #EAF0ED; border-bottom: 1px solid #EAF0ED; }
.notif-menu-foot { display: flex; justify-content: space-between; padding: 0.6rem 1rem; font-size: 0.88rem; font-weight: 600; }
.notif-menu-foot a { text-decoration: none; }
.notif-empty { padding: 1.5rem 1rem; text-align: center; color: var(--sr-muted); font-size: 0.9rem; }
.notif-empty img { height: 70px; margin-bottom: 0.4rem; }

.notif-item { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.8rem 1rem; color: inherit; text-decoration: none; position: relative; }
.notif-item + .notif-item { border-top: 1px solid #EAF0ED; }
.notif-item:hover { background: #F8FBFA; color: inherit; }
.notif-item.is-unread { background: #F8FBFA; }
.notif-item.is-unread:hover { background: #FFF4E2; }
.notif-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--tint-navy); }
.notif-icon svg { width: 19px; height: 19px; fill: none; stroke: var(--sr-navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notif-lease { background: var(--tint-navy); }
.notif-billing { background: var(--tint-gold); }
.notif-billing svg { stroke: var(--sr-gold-700); }
.notif-payment { background: var(--tint-mint); }
.notif-payment svg { stroke: #1E7A4C; }
.notif-listing { background: var(--tint-peach); }
.notif-listing svg { stroke: #B5562A; }
.notif-admin { background: var(--tint-sage); }
.notif-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.notif-title { font-weight: 600; color: var(--sr-navy); font-size: 0.92rem; line-height: 1.35; }
.notif-item:not(.is-unread) .notif-title { font-weight: 500; }
.notif-body { font-size: 0.83rem; color: var(--sr-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.notif-time { font-size: 0.75rem; color: var(--sr-gold-700); margin-top: 0.2rem; }
.notif-dot { width: 9px; height: 9px; border-radius: 50%; background: #D64545; flex-shrink: 0; margin-top: 0.4rem; }

.notif-list { overflow: hidden; }
.notif-list .notif-body { -webkit-line-clamp: 4; }
.notif-group-title { font-size: 0.8rem; font-weight: 600; color: var(--sr-muted); margin: 0 0 0.4rem 0.25rem; }

.notif-toast {
  position: fixed; right: 20px; bottom: 24px; z-index: 2100; width: min(360px, calc(100vw - 24px));
  display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 1rem; border-radius: 18px;
  background: #fff; box-shadow: var(--sr-shadow-lg); border-left: 4px solid var(--sr-gold); color: inherit; text-decoration: none;
  transform: translateY(150%); opacity: 0; transition: transform .3s ease, opacity .3s ease; pointer-events: none;
}
.notif-toast.show { transform: none; opacity: 1; pointer-events: auto; }
@media (max-width: 991.98px) {
  .notif-toast { right: 12px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); }
  .app-header-btn.notif-btn .notif-badge { top: 2px; right: 0; }
}

.notif-setting { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.15rem; border-bottom: 1px solid #EAF0ED; }
.notif-setting .form-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
.form-switch .form-check-input:checked { background-color: var(--sr-navy); border-color: var(--sr-navy); }

/* =====================================================================
   Engagement: save (♥), contact, chat, viewings, offers, agents, dashboard
   ===================================================================== */
/* ♥ on cards and the listing page */
.listing-card, .map-card { position: relative; }
.fav-chip {
  position: absolute; top: 8px; right: 8px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: grid; place-items: center; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(15, 93, 78, .18);
  transition: transform .15s;
}
.fav-chip:hover { transform: scale(1.08); }
.fav-chip svg, .fav-btn svg { width: 19px; height: 19px; fill: none; stroke: var(--sr-navy); stroke-width: 1.9; stroke-linejoin: round; }
.fav-chip[aria-pressed="true"] svg, .fav-btn[aria-pressed="true"] svg { fill: #E0475A; stroke: #E0475A; }
.fav-btn[aria-pressed="true"] { border-color: #F4C2C9; background: #FFF2F4; }
.msg-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Listing page: actions, interest, contact, open house */
.contact-actions { display: grid; gap: 0.5rem; margin-top: 1rem; }
.interest-line { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.85rem; font-size: 0.82rem; color: var(--sr-muted); }
.interest-line span { display: inline-flex; align-items: center; gap: 0.3rem; }
.interest-line svg { width: 15px; height: 15px; fill: none; stroke: var(--sr-gold-600); stroke-width: 2; stroke-linejoin: round; }
.contact-card, .openhouse-card { background: #fff; border-radius: var(--sr-radius); box-shadow: var(--sr-shadow); padding: 1.1rem 1.25rem; }
.contact-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.contact-initial { display: grid; place-items: center; background: linear-gradient(135deg, var(--sr-navy), var(--sr-navy-700)); color: var(--sr-gold); font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; }
.stars { color: #E2A33B; font-weight: 600; letter-spacing: .05em; }
.stars-off { color: #E3EAE6; }
.openhouse-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px dashed var(--sr-border); }
.openhouse-row:first-of-type { border-top: 0; }
.owner-price { position: relative; }
.owner-price summary { list-style: none; }
.owner-price summary::-webkit-details-marker { display: none; }
.owner-price-form { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 260px; background: #fff; border-radius: 14px; box-shadow: var(--sr-shadow-lg); padding: 0.85rem; }

.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.calc-result { margin: 0 0 0.75rem; display: grid; }
.calc-result > div { display: flex; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px dashed var(--sr-border); }
.calc-result dt { font-weight: 400; color: var(--sr-muted); }
.calc-result dd { margin: 0; font-weight: 600; color: var(--sr-navy); }
.calc-result .total dt { color: var(--sr-navy); font-weight: 600; }
.calc-result .total dd { font-family: var(--font-head); font-size: 1.15rem; }
.calc-highlight { background: linear-gradient(135deg, #FFF4EC, var(--tint-gold)); border-radius: 16px; padding: 1rem 1.1rem; }
.calc-big { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--sr-navy); line-height: 1.1; }

.sr-modal { border: 0; border-radius: var(--sr-radius); box-shadow: var(--sr-shadow-lg); }
.sr-modal .modal-header { border-bottom-color: #EAF0ED; }
.sr-modal .modal-footer { border-top-color: #EAF0ED; }

/* Saved */
.saved-item { position: relative; height: 100%; }
.saved-item.is-gone .listing-card { opacity: 0.55; }
.saved-note { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: #fff; color: var(--sr-muted); box-shadow: var(--sr-shadow); }
.saved-note.is-drop { background: #E0475A; color: #fff; }
.saved-item .badge-purpose { display: none; }
.saved-search { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.9rem 1.15rem; border-bottom: 1px solid #EAF0ED; }
.saved-search:last-child { border-bottom: 0; }

/* Conversations */
.conv-list { overflow: hidden; }
.conv-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1.1rem; color: inherit; text-decoration: none; border-bottom: 1px solid #EAF0ED; }
.conv-item:last-child { border-bottom: 0; }
.conv-item:hover { background: #F8FBFA; color: inherit; }
.conv-item.is-unread { background: #F8FBFA; }
.conv-thumb { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.conv-initial { display: grid; place-items: center; background: var(--tint-navy); color: var(--sr-navy); font-weight: 700; font-size: 1.2rem; }
.conv-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.conv-name { font-weight: 600; color: var(--sr-navy); }
.conv-item:not(.is-unread) .conv-name { font-weight: 500; }
.conv-time { font-size: 0.75rem; color: var(--sr-muted); white-space: nowrap; }
.conv-subject { font-size: 0.82rem; color: var(--sr-gold-700); }
.conv-preview { font-size: 0.85rem; color: var(--sr-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

.chat-shell { display: flex; flex-direction: column; height: calc(100vh - 11rem); min-height: 420px; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid #EAF0ED; }
.chat-listing { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; background: #F8FBFA; border-bottom: 1px solid #EAF0ED; color: inherit; text-decoration: none; }
.chat-listing img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
.chat-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; background: var(--sr-cream); }
.chat-msg { max-width: min(78%, 520px); display: flex; flex-direction: column; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.theirs { align-self: flex-start; }
.chat-sender { font-size: 0.72rem; color: var(--sr-muted); margin: 0 0.5rem 0.15rem; }
.chat-bubble { padding: 0.6rem 0.85rem; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.chat-msg.mine .chat-bubble { background: var(--sr-navy); color: #fff; border-bottom-right-radius: 6px; }
.chat-msg.theirs .chat-bubble { background: #fff; color: var(--sr-ink); border-bottom-left-radius: 6px; box-shadow: 0 1px 3px rgba(15, 93, 78, .08); }
.chat-time { font-size: 0.68rem; color: var(--sr-muted); margin: 0.15rem 0.5rem 0; }
.chat-form { display: flex; gap: 0.5rem; align-items: flex-end; padding: 0.75rem; border-top: 1px solid #EAF0ED; background: #fff; }
.chat-form textarea { resize: none; border-radius: 20px; max-height: 160px; }
.chat-send { width: 44px; height: 44px; border-radius: 50%; padding: 0; display: grid; place-items: center; flex-shrink: 0; }
.chat-send svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

/* Viewings & offers */
.viewing-row, .offer-row { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.15rem; min-width: 0; }
.viewing-date { display: flex; flex-direction: column; align-items: center; width: 60px; flex-shrink: 0; padding: 0.4rem 0; border-radius: 14px; background: var(--tint-navy); color: var(--sr-navy); line-height: 1.1; }
.viewing-date .d { font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; }
.viewing-date .m, .viewing-date .t { font-size: 0.72rem; }
.viewing-date .t { font-weight: 600; margin-top: 0.15rem; }
.viewing-actions, .offer-actions { display: grid; gap: 0.35rem; width: 150px; flex-shrink: 0; }
.viewing-actions summary, .offer-actions summary { list-style: none; }
.offer-thumb { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.offer-terms { margin: 0.15rem 0; }
.offer-terms b { font-family: var(--font-head); font-size: 1.1rem; color: var(--sr-navy); }
.openhouse-guests li { padding: 0.25rem 0; border-top: 1px dashed var(--sr-border); }

/* Dashboard */
.kpi-link { color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.kpi-link:hover { transform: translateY(-2px); box-shadow: var(--sr-shadow-lg); color: inherit; }
.dash-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.dash-item { padding: 0.55rem 0; border-top: 1px dashed var(--sr-border); }
.dash-item:first-of-type { border-top: 0; }

/* Agents */
.agents-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.75rem; overflow: hidden; }
.agents-hero h1 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.agents-hero-mascot { height: 150px; }
.agents-search { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; max-width: 640px; }
.agent-card { display: flex; gap: 0.9rem; align-items: center; padding: 1rem 1.1rem; height: 100%; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.agent-card:hover { transform: translateY(-2px); box-shadow: var(--sr-shadow-lg); color: inherit; }
.agent-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.agent-photo-lg { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; margin: 0 auto; font-size: 2.4rem; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--sr-gold); }
.agent-profile { text-align: center; position: sticky; top: 5.5rem; }
.agent-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 1rem 0; }
.agent-stats div { display: flex; flex-direction: column; padding: 0.6rem 0.25rem; border-radius: 14px; background: var(--sr-cream); }
.agent-stats b { font-family: var(--font-head); font-size: 1.25rem; color: var(--sr-navy); }
.agent-stats span { font-size: 0.72rem; color: var(--sr-muted); }
.agent-facts { text-align: left; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.agent-facts dt { font-size: 0.75rem; font-weight: 500; color: var(--sr-muted); }
.agent-facts dd { margin: 0; color: var(--sr-navy); font-weight: 500; }
.review-form { background: var(--sr-cream); border-radius: 16px; padding: 1rem; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 0.15rem; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { font-size: 1.8rem; line-height: 1; color: #E3EAE6; cursor: pointer; transition: color .1s; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: #E2A33B; }
.star-input input:focus-visible + label { outline: 2px solid var(--sr-gold); border-radius: 4px; }
.review-item { padding: 0.85rem 0; border-top: 1px solid #EAF0ED; }

@media (max-width: 991.98px) {
  .agent-profile { position: static; }
  .chat-shell { height: calc(100vh - var(--tabbar-h) - 8.5rem); }
}
@media (max-width: 575.98px) {
  .viewing-row, .offer-row { flex-wrap: wrap; }
  .viewing-actions, .offer-actions { width: 100%; grid-template-columns: 1fr 1fr; }
  .agents-search { grid-template-columns: 1fr; }
  .agents-hero { padding: 1.25rem; }
  .chat-msg { max-width: 88%; }
}

/* =====================================================================
   SOREALTH additions: quick chips, type-aware filters, compare, Street View,
   neighborhood ("รอบบ้านมีอะไรบ้าง"), my places, move-in breakdown, mobile action dock
   ===================================================================== */
.badge-mint { background: var(--tint-mint); color: var(--sr-navy); font-weight: 600; }

/* Home quick chips */
.quick-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.quick-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.85rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--sr-border); color: var(--sr-navy); font-weight: 600; font-size: 0.86rem;
  text-decoration: none; box-shadow: 0 2px 6px rgba(15, 93, 78, 0.06); transition: background .15s, transform .15s;
}
.quick-chip:hover { background: var(--tint-mint); transform: translateY(-1px); }
.quick-chip svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quick-chip.is-rail { background: var(--tint-mint); }
.quick-chip.is-pet svg { stroke: var(--sr-gold-600); }

/* Search: toggle chips, near-my-place menu, filter sheet note */
.filter-chip.chip-toggle[aria-pressed="true"], #nearChip.is-on { background: var(--sr-navy); border-color: var(--sr-navy); color: #fff; }
.filter-chip svg { flex-shrink: 0; }
.near-menu { width: 18.5rem; max-width: calc(100vw - 2rem); }
.near-places { display: grid; gap: 0.35rem; max-height: 14rem; overflow-y: auto; }
.near-place { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 12px; border: 1px solid var(--sr-border); cursor: pointer; }
.near-place:has(input:checked) { border-color: var(--sr-navy); background: var(--tint-mint); }
.near-place b { font-size: 0.88rem; color: var(--sr-navy); }
.more-filters-note { margin-top: 1rem; padding: 0.75rem 0.9rem; border-radius: 14px; background: var(--tint-sage); font-size: 0.82rem; color: var(--sr-muted); }
#typeHint { background: var(--tint-mint); border-radius: 12px; padding: 0.55rem 0.75rem; }

/* Rail line on cards */
.map-card-rail, .card-rail {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.3rem; padding: 0.12rem 0.5rem 0.12rem 0.35rem;
  border-radius: 999px; background: var(--tint-mint); color: var(--sr-navy); font-size: 0.74rem; font-weight: 600; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-card-rail svg, .card-rail svg { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Compare: card chip, page button, floating tray */
.cmp-chip {
  position: absolute; top: 8px; right: 50px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: grid; place-items: center; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(15, 93, 78, .18); transition: transform .15s;
}
.cmp-chip:hover { transform: scale(1.08); }
.cmp-chip svg, .cmp-btn svg, .cmp-inline svg { width: 18px; height: 18px; fill: none; stroke: var(--sr-navy); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cmp-chip[aria-pressed="true"], .cmp-btn[aria-pressed="true"] { background: var(--sr-navy); }
.cmp-chip[aria-pressed="true"] svg, .cmp-btn[aria-pressed="true"] svg { stroke: #fff; }
.cmp-inline { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tint-mint); vertical-align: middle; }
.cmp-inline svg { width: 15px; height: 15px; }
.living-actions [data-compare][aria-pressed="true"] { background: var(--sr-navy); color: #fff; }
.compare-tray {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 1040; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.6rem 0.55rem 1.1rem; border-radius: 999px; background: var(--sr-navy-900); color: #fff; box-shadow: var(--sr-shadow-lg);
  font-size: 0.88rem; max-width: calc(100vw - 24px);
}
.compare-tray[hidden] { display: none; }
.compare-tray-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.compare-tray .btn { white-space: nowrap; }
@media (max-width: 991.98px) {
  .compare-tray { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); }
  body:has(.action-dock) .compare-tray { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 84px); }
}

/* Maps: softened OSM tiles, Street View pegman / panel, place pins */
.leaflet-tile-pane .sr-tiles { filter: saturate(0.62) hue-rotate(-6deg) brightness(1.05) contrast(0.93); }
.sv-pegman {
  width: 40px; height: 40px; border-radius: 12px; border: 0; background: #fff; box-shadow: 0 2px 10px rgba(15, 93, 78, .22);
  display: grid; place-items: center; cursor: grab; touch-action: none; margin-bottom: 6px !important;
}
.sv-pegman svg { width: 24px; height: 24px; fill: #F2A23B; }
.sv-pegman:hover svg { fill: #F2865A; }
.sv-ghost { position: fixed; left: 0; top: 0; z-index: 3000; pointer-events: none; width: 30px; height: 40px; }
.sv-ghost svg { width: 30px; height: 40px; fill: #F2A23B; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.sv-dragging { cursor: crosshair !important; }
.sv-panel { position: absolute; inset: 0; z-index: 1100; background: #000; }
.sv-panel[hidden] { display: none; }
.sv-view { position: absolute; inset: 0; }
.sv-close {
  position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 0.3rem;
  border: 0; border-radius: 999px; padding: 0.45rem 0.9rem 0.45rem 0.6rem; background: #fff; color: var(--sr-navy); font-weight: 600; box-shadow: var(--sr-shadow);
}
.sv-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sv-notice {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 1100; background: var(--sr-navy); color: #fff;
  padding: 0.45rem 0.9rem; border-radius: 999px; font-size: 0.85rem; box-shadow: var(--sr-shadow); max-width: calc(100% - 24px); text-align: center;
}
.place-pin {
  position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid currentColor; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); color: var(--sr-navy);
}
.place-pin svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Category colours (map pins and list dots) */
.is-rail { --pc: #2F6FB5; --pb: #E6EFFA; }
.is-bus { --pc: #C0392B; --pb: #FBE7E4; }
.is-ev { --pc: #1B8A5A; --pb: #E0F5EA; }
.is-supermarket, .is-convenience { --pc: #D2691E; --pb: #FCEBDD; }
.is-mall, .is-market { --pc: #B4528A; --pb: #F7E5EF; }
.is-hospital { --pc: #D64545; --pb: #FBE6E6; }
.is-school, .is-university { --pc: #2E8B87; --pb: #E1F2F1; }
.is-park { --pc: #3D8B4F; --pb: #E3F2E4; }
.is-work, .is-other { --pc: var(--sr-navy); --pb: var(--tint-mint); }
.is-food, .is-restaurant { --pc: #C26A2E; --pb: #FBEADC; }
.is-cafe { --pc: #8A5A3C; --pb: #F3E9E1; }
.place-pin[class*="is-"] { color: var(--pc); }
.place-dot {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--pb, var(--tint-mint)); color: var(--pc, var(--sr-navy));
}
.place-dot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Listing page: contact phone, move-in breakdown */
.contact-phone {
  display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--sr-border); background: var(--tint-mint);
  border-radius: 999px; padding: 0.35rem 0.85rem; color: var(--sr-navy); font-weight: 600; font-size: 0.9rem; text-decoration: none;
}
.contact-phone svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.payer-tag { display: block; font-size: 0.72rem; font-weight: 600; color: var(--sr-navy-700); }
.payer-tag.is-unknown { color: var(--sr-gold-700); }
.cost-list .unit { font-weight: 400; color: var(--sr-muted); font-size: 0.8rem; }
.move-in-total { gap: 0.35rem; }
.move-in-lines { margin: 0.2rem 0 0; display: grid; gap: 0.15rem; font-size: 0.85rem; }
.move-in-lines > div { display: flex; justify-content: space-between; gap: 0.75rem; }
.move-in-lines dt { font-weight: 400; color: var(--sr-ink); }
.move-in-lines dt small { color: var(--sr-muted); }
.move-in-lines dd { margin: 0; font-weight: 600; color: var(--sr-navy); white-space: nowrap; }
.move-in-sum { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(180, 83, 42, .25); padding-top: 0.4rem; margin-top: 0.2rem; font-weight: 600; color: var(--sr-navy); }
.move-in-total .hint { line-height: 1.45; color: var(--sr-ink); opacity: .8; }

/* Listing page: neighborhood panel */
.living-loading { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; color: var(--sr-muted); font-size: 0.9rem; padding: 1rem; border-radius: 16px; background: #fff; }
.living-hls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.living-hl { display: flex; gap: 0.75rem; align-items: center; padding: 0.85rem 1rem; border-radius: 18px; background: #fff; box-shadow: var(--sr-shadow); min-width: 0; }
.living-hl b { display: block; color: var(--sr-navy); }
.living-hl small { display: block; color: var(--sr-muted); font-size: 0.78rem; }
.mode-tabs { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.25rem; background: #fff; border-radius: 999px; box-shadow: var(--sr-shadow); margin-bottom: 0.6rem; scrollbar-width: none; }
.mode-tab {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; border: 0; background: transparent;
  border-radius: 999px; padding: 0.45rem 0.9rem; color: var(--sr-navy); font-weight: 600; font-size: 0.88rem; white-space: nowrap;
}
.mode-tab svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mode-tab[aria-selected="true"] { background: var(--sr-navy); color: #fff; }
.place-list { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 18px; box-shadow: var(--sr-shadow); overflow: hidden; }
.place-list > li + li { border-top: 1px solid var(--sr-border); }
.place-row { display: flex; align-items: center; gap: 0.75rem; width: 100%; border: 0; background: none; padding: 0.65rem 0.9rem; text-align: left; }
.place-row:hover { background: var(--sr-cream); }
.place-name { flex: 1 1 auto; min-width: 0; }
.place-name b { display: block; color: var(--sr-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-name small { display: block; color: var(--sr-muted); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-dist { flex-shrink: 0; text-align: right; font-weight: 600; color: var(--sr-navy); font-size: 0.88rem; }
.place-dist small { display: block; font-weight: 400; color: var(--sr-muted); font-size: 0.76rem; }
.living-credit { font-size: 0.74rem; color: var(--sr-muted); margin: 0.5rem 0 0; }
.living-h3 { font-size: 1.05rem; margin: 1.6rem 0 0.7rem; display: flex; align-items: center; gap: 0.5rem; }
.commute-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.commute-card { display: flex; gap: 0.75rem; align-items: center; padding: 0.85rem 1rem; border-radius: 18px; background: #fff; box-shadow: var(--sr-shadow); min-width: 0; }
.commute-time { font-family: var(--font-head); font-weight: 700; color: var(--sr-navy); font-size: 1.15rem; }
.living-cta { display: flex; gap: 0.9rem; align-items: center; padding: 1rem 1.1rem; border-radius: 18px; background: linear-gradient(135deg, var(--tint-mint), #fff); }
.living-cta img { width: 64px; flex-shrink: 0; }
.monthly-result { background: #fff; border-radius: 18px; box-shadow: var(--sr-shadow); padding: 0.4rem 1.1rem; }
.monthly-result .is-note dt, .monthly-result .is-note dd { color: var(--sr-muted); font-weight: 400; font-size: 0.85rem; }
.living-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nearby-item { position: relative; }
.distance-badge {
  position: absolute; z-index: 4; left: 10px; top: 44px; background: rgba(255, 255, 255, .95); color: var(--sr-navy);
  border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.74rem; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
@media (max-width: 575.98px) {
  .living-hls { grid-template-columns: 1fr; }
  .mode-tab { padding: 0.45rem 0.7rem; }
}

/* Mobile action dock on the listing page (sits on top of the tab bar) */
.action-dock {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 1030;
  display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.75rem; background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--sr-border); box-shadow: 0 -8px 24px -12px rgba(15, 93, 78, .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.action-dock-price { margin-right: auto; line-height: 1.1; min-width: 0; }
.action-dock-price b { font-family: var(--font-head); color: var(--sr-navy); font-size: 1.1rem; }
.action-dock-price small { color: var(--sr-muted); font-size: 0.75rem; }
.dock-btn {
  display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--sr-border); background: #fff; color: var(--sr-navy);
  border-radius: 999px; padding: 0.5rem 0.8rem; font-weight: 600; font-size: 0.88rem; text-decoration: none; white-space: nowrap;
}
.dock-btn.is-primary { background: var(--sr-navy); border-color: var(--sr-navy); color: #fff; }
.dock-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 991.98px) {
  body:has(.action-dock) { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 76px); }
  body:has(.action-dock) .toast-lite { bottom: calc(var(--tabbar-h) + 90px); }
}
@media (max-width: 359.98px) {
  .action-dock-price { display: none; }
}

/* Login sheet */
.login-sheet-mascot { width: 92px; }
.login-sheet-why { text-align: left; font-size: 0.88rem; color: var(--sr-ink); padding-left: 1.2rem; margin: 0.75rem 0 1.1rem; }
.login-sheet-why li + li { margin-top: 0.3rem; }

/* My places page */
.places-hero { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.6rem; border-radius: var(--sr-radius); background: linear-gradient(135deg, #fff, var(--tint-mint)); box-shadow: var(--sr-shadow); }
.places-hero h1 { font-size: 1.7rem; }
.places-hero-mascot { width: 120px; flex-shrink: 0; }
.place-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.place-card { display: flex; gap: 0.9rem; padding: 1rem 1.1rem; border-radius: var(--sr-radius); background: #fff; box-shadow: var(--sr-shadow); min-width: 0; }
.place-map { height: 300px; border-radius: 16px; margin-top: 0.6rem; z-index: 0; }
.place-search { position: relative; }
.place-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1200; list-style: none; margin: 0; padding: 0.3rem;
  background: #fff; border-radius: 14px; box-shadow: var(--sr-shadow-lg); max-height: 260px; overflow-y: auto;
}
.place-results li.text-muted { padding: 0.5rem 0.7rem; font-size: 0.85rem; }
.place-results button { display: block; width: 100%; border: 0; background: none; text-align: left; padding: 0.5rem 0.7rem; border-radius: 10px; }
.place-results button:hover, .place-results button:focus { background: var(--tint-mint); }
.place-results b { display: block; color: var(--sr-navy); font-size: 0.9rem; }
.place-results small { display: block; color: var(--sr-muted); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
  .places-hero { padding: 1.1rem; }
  .places-hero-mascot { width: 76px; }
  .places-hero h1 { font-size: 1.35rem; }
  .place-cards { grid-template-columns: 1fr; }
}

/* Compare page */
.best-key { background: var(--tint-mint); color: var(--sr-navy); font-weight: 600; padding: 0 0.35rem; border-radius: 6px; }
.compare-wrap { overflow-x: auto; border-radius: var(--sr-radius); background: #fff; box-shadow: var(--sr-shadow); }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; font-size: 0.9rem; }
.compare-table th, .compare-table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--sr-border); vertical-align: top; }
.compare-table tbody th { position: sticky; left: 0; z-index: 1; background: #fff; width: 170px; min-width: 150px; color: var(--sr-navy); font-weight: 600; }
.compare-table thead th { background: #fff; vertical-align: bottom; min-width: 180px; }
.compare-corner { position: sticky; left: 0; z-index: 2; }
.compare-table td { min-width: 160px; }
.compare-table td.is-best { background: var(--tint-mint); color: var(--sr-navy); }
.compare-group th { background: var(--sr-cream) !important; font-family: var(--font-head); color: var(--sr-navy); font-size: 0.85rem; letter-spacing: .02em; }
.row-total th, .row-total td { background: #F8FBFA; }
.row-total td.is-best { background: var(--tint-mint); }
.compare-head { position: relative; display: grid; gap: 0.3rem; }
/* The photo is laid over the 4:3 box (not sized by height: 100%, which iPad Safari resolves to the photo's own height and then crops a zoomed-in strip). */
.compare-img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--sr-cream); }
.compare-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.compare-img img.noimg { object-fit: contain; padding: 25%; }
.compare-title { font-weight: 600; color: var(--sr-ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.compare-remove {
  position: absolute; right: 6px; top: 6px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .92); color: var(--sr-navy); font-size: 1.1rem; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.compare-head .badge { justify-self: start; }
@media (max-width: 575.98px) {
  .compare-table tbody th { width: 120px; min-width: 112px; font-size: 0.82rem; padding: 0.6rem; }
  .compare-table td, .compare-table thead th { min-width: 150px; }
}

/* =====================================================================
   SOREALTH design system (UI/UX spec) — "อบอุ่น น่าเชื่อถือ ใช้งานง่าย ทุกคนเข้าถึงได้"
   Accessibility first: visible focus, 44px touch targets on phones, AA contrast, reduced motion.
   ===================================================================== */

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 3000; padding: 0.65rem 1.1rem; border-radius: 12px;
  background: var(--sr-navy); color: #fff; font-weight: 600; text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 12px; color: #fff; }
main:focus { outline: none; }
:focus-visible { outline: 3px solid var(--sr-green); outline-offset: 2px; }
.btn:focus-visible, .filter-chip:focus-visible, .quick-chip:focus-visible, .tab:focus-visible { outline: 3px solid var(--sr-green); outline-offset: 2px; box-shadow: none; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--sr-green); box-shadow: 0 0 0 0.25rem rgba(46, 158, 122, 0.28);
}
::selection { background: var(--sr-success); color: var(--sr-ink); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Typography (Prompt) ---------- */
h1, h2, h3, .h1, .h2, .h3 { font-weight: 700; }
h4, h5, h6, .h4, .h5, .h6 { font-weight: 600; }
b, strong, .fw-bold { font-weight: 600; }
.text-muted { color: var(--sr-muted) !important; }
.form-text { color: var(--sr-muted); }
.form-label { font-weight: 500; }

/* ---------- Buttons (spec 1) ---------- */
.btn { font-weight: 500; min-height: 40px; padding: 0.5rem 1.2rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
.btn-sm { min-height: 34px; padding: 0.3rem 0.85rem; }
.btn-link { min-height: 0; }
.btn-primary { --bs-btn-disabled-bg: #8FB5AC; --bs-btn-disabled-border-color: #8FB5AC; font-weight: 600; }
.btn-outline-primary {
  --bs-btn-color: var(--sr-navy); --bs-btn-border-color: var(--sr-green);
  --bs-btn-hover-color: var(--sr-navy); --bs-btn-hover-bg: var(--tint-mint); --bs-btn-hover-border-color: var(--sr-green);
  --bs-btn-active-color: var(--sr-navy); --bs-btn-active-bg: var(--sr-success); --bs-btn-active-border-color: var(--sr-green);
  border-width: 1.5px; background: #fff;
}
.btn-check:checked + .btn-outline-primary { background: var(--sr-navy); border-color: var(--sr-navy); color: #fff; }
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .btn-link.btn-sm { min-height: 32px; }
}

/* ---------- Inputs & search (spec 2) ---------- */
.form-control, .form-select { border-radius: 14px; border-color: #D3DDD8; min-height: 44px; }
.form-control-sm, .form-select-sm { min-height: 36px; border-radius: 12px; }
textarea.form-control { min-height: 0; }
.form-control::placeholder { color: #7A8491; }
.form-check-input:checked { background-color: var(--sr-navy); border-color: var(--sr-navy); }

/* ---------- Chips (spec 2 / 9) ---------- */
.filter-chip { background: #fff; border: 1px solid var(--sr-border); color: var(--sr-ink); font-weight: 500; min-height: 38px; }
.filter-chip:hover { border-color: var(--sr-green); }
.filter-chip[aria-expanded="true"] { border-color: var(--sr-green); background: var(--tint-mint); }
.quick-chip { font-weight: 500; color: var(--sr-ink); }
.quick-chip svg { stroke: var(--sr-green); }
.quick-chip.is-pet svg { stroke: var(--sr-gold-600); }

/* ---------- Listing cards (spec 3) ---------- */
.listing-card, .map-card { border-radius: 20px; }
.card-specs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.85rem; margin: 0.45rem 0 0; padding: 0; font-size: 0.8rem; color: var(--sr-muted); }
.card-specs li { display: inline-flex; align-items: center; gap: 0.3rem; }
.card-specs svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--sr-green); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.map-card-rail, .card-rail { background: var(--tint-mint); color: var(--sr-navy); }
.badge-purpose { background: rgba(15, 93, 78, 0.9); }

/* ---------- Status pills (spec 13): soft tint, dark text, leading dot ---------- */
.badge[class*="text-bg-"] { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; padding: 0.38em 0.75em; border-radius: 999px; }
.badge[class*="text-bg-"]::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; opacity: 0.85; }
.badge.text-bg-success { background: #DDF1E8 !important; color: #0F5D4E !important; }
.badge.text-bg-warning { background: #FFE6D6 !important; color: #8A3D14 !important; }
.badge.text-bg-info { background: #E2EEFB !important; color: #1F4E8C !important; }
.badge.text-bg-danger { background: #FFE1E1 !important; color: #A32828 !important; }
.badge.text-bg-primary { background: var(--tint-mint) !important; color: var(--sr-navy) !important; }
.badge.text-bg-secondary, .badge.text-bg-light, .badge.text-bg-dark { background: #EDF0EF !important; color: #4B5563 !important; }
.avail-pill.is-now { background: #DDF1E8; color: #0F5D4E; }

/* ---------- Alerts / toasts ---------- */
.alert { border-radius: 16px; border-width: 1px; }
.alert-success { background: #E3F3EC; border-color: #A7D7C5; color: #0F5D4E; }
.alert-danger { background: #FFECEC; border-color: #FFC2C2; color: #9B2C2C; }
.alert-warning { background: #FFF2E9; border-color: #FFD3BA; color: #8A3D14; }
.alert-info { background: #E9F2FC; border-color: #C6DBF5; color: #1F4E8C; }

/* ---------- List rows (spec 7) ---------- */
.place-row { min-height: 58px; }
.place-chevron { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: #9AA4AF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-item { min-height: 52px; }

/* ---------- Bottom navigation (spec 8) ---------- */
.tab { font-size: 0.72rem; color: #6B7280; }
.tab span { font-weight: 500; }
.tab.active span { font-weight: 600; }

/* ---------- Modal (spec 12) ---------- */
.sr-modal { border: 0; border-radius: 24px; }
.welcome-modal { position: relative; padding: 1.6rem 1.4rem 1.1rem; }
.welcome-modal .btn-close { position: absolute; right: 14px; top: 14px; }
.welcome-mascot { display: block; width: 120px; margin: -0.2rem auto 0.4rem; }

/* ---------- Footer: soft green hills (decoration) ---------- */
.site-hills {
  height: 72px; margin-top: 3rem; margin-bottom: -1px;
  background: no-repeat bottom / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 52C200 18 380 16 560 44s340 36 520 4 260-22 360-6v50H0z' fill='%23A7D7C5' opacity='.55'/%3E%3Cpath d='M0 70c240-30 420-26 640-6s360 22 560-6c120-16 190-12 240-6v28H0z' fill='%232E9E7A' opacity='.55'/%3E%3Cpath d='M0 84c260-14 520-12 760-2s460 8 680-6v14H0z' fill='%230F5D4E'/%3E%3C/svg%3E");
}
.site-hills + .site-footer { margin-top: 0 !important; border-radius: 0; }
.search-box .btn, .map-filters-search .btn, .compare-tray .btn, .action-dock .btn { white-space: nowrap; flex-shrink: 0; }
.leaflet-container, .leaflet-container a, .leaflet-control { font-family: "Prompt", system-ui, sans-serif; }

/* ---------- Calendar picker (spec #6) ---------- */
.dp { position: relative; }
.dp-field {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left; cursor: pointer;
  background: #fff; color: var(--sr-ink);
}
.dp-field svg { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: var(--sr-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dp-field.is-empty .dp-text { color: #7A8491; }
.dp-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp.is-open .dp-field { border-color: var(--sr-green); box-shadow: 0 0 0 0.25rem rgba(46, 158, 122, 0.22); }
.dp-pop {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 1080; width: 320px; max-width: calc(100vw - 24px);
  padding: 0.9rem 0.9rem 0.75rem; background: #fff; border-radius: 20px; border: 1px solid var(--sr-border);
  box-shadow: 0 24px 48px -16px rgba(15, 93, 78, 0.35);
}
.dp-pop[hidden] { display: none; }
.dp-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--sr-ink); margin-bottom: 0.4rem; }
.dp-head svg { width: 20px; height: 20px; fill: none; stroke: var(--sr-navy); stroke-width: 1.9; }
.dp-nav { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.4rem; }
.dp-month { flex: 1; font-weight: 600; color: var(--sr-navy); font-size: 1.02rem; }
.dp-arrow { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; color: var(--sr-navy); }
.dp-arrow:hover:not(:disabled) { background: var(--tint-mint); }
.dp-arrow:disabled { opacity: 0.3; }
.dp-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dp-grid { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.dp-grid th { text-align: center; font-size: 0.76rem; font-weight: 500; color: var(--sr-muted); padding: 0.2rem 0; }
.dp-grid td { padding: 0; text-align: center; }
.dp-day {
  width: 100%; aspect-ratio: 1; max-height: 40px; border: 0; border-radius: 50%; background: transparent;
  color: var(--sr-ink); font-size: 0.9rem; font-variant-numeric: tabular-nums; display: grid; place-items: center; margin: 0 auto;
}
.dp-day:hover:not(:disabled) { background: var(--tint-mint); }
.dp-day.is-out { color: #A3ACB5; }
.dp-day.is-today { box-shadow: inset 0 0 0 1.5px var(--sr-green); font-weight: 600; }
.dp-day.is-selected { background: var(--sr-navy) !important; color: #fff; font-weight: 600; box-shadow: 0 6px 14px -6px rgba(15, 93, 78, 0.7); }
.dp-day:disabled { color: #C5CCD2; text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .15); cursor: not-allowed; }
.dp-times-label { font-size: 0.8rem; font-weight: 600; color: var(--sr-muted); margin: 0.5rem 0 0.3rem; }
.dp-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; max-height: 132px; overflow-y: auto; padding: 2px; }
.dp-time {
  border: 1px solid var(--sr-border); background: #fff; border-radius: 10px; padding: 0.35rem 0; font-size: 0.85rem;
  color: var(--sr-ink); font-variant-numeric: tabular-nums;
}
.dp-time:hover:not(:disabled) { border-color: var(--sr-green); background: var(--tint-mint); }
.dp-time.is-selected { background: var(--sr-navy); border-color: var(--sr-navy); color: #fff; font-weight: 600; }
.dp-time:disabled { color: #C5CCD2; background: #F7F9F8; cursor: not-allowed; }
.dp-foot { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--sr-border); }
.dp-error { color: #A32828; font-size: 0.82rem; margin-top: 0.3rem; }
.dp-sm .dp-field { min-height: 36px; font-size: 0.875rem; }
/* phones: the calendar becomes a bottom sheet so it never runs off screen */
@media (max-width: 575.98px) {
  .dp-pop {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; z-index: 2000;
    border-radius: 24px 24px 0 0; padding-bottom: calc(0.9rem + env(safe-area-inset-bottom));
    box-shadow: 0 -18px 40px -12px rgba(15, 93, 78, 0.4);
  }
  .dp-day { max-height: 44px; font-size: 0.95rem; }
}

/* ---------- Price slider (spec #9) ---------- */
.price-menu { width: 21rem; max-width: calc(100vw - 2rem); }
.price-out { font-weight: 600; color: var(--sr-navy); font-variant-numeric: tabular-nums; }
.price-range { position: relative; height: 34px; margin: 0.35rem 0.1rem 0.1rem; }
.price-track { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: #DCE5E1; }
.price-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--sr-navy); }
.price-thumb {
  position: absolute; left: 0; top: 0; width: 100%; height: 34px; margin: 0; z-index: 3;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.price-thumb:focus { outline: none; }
.price-thumb::-webkit-slider-runnable-track { background: transparent; height: 34px; }
.price-thumb::-moz-range-track { background: transparent; height: 34px; }
.price-thumb::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: grab; width: 24px; height: 24px; margin-top: 5px;
  border-radius: 50%; background: #fff; border: 3px solid var(--sr-navy); box-shadow: 0 2px 6px rgba(15, 93, 78, 0.35);
}
.price-thumb::-moz-range-thumb {
  pointer-events: auto; cursor: grab; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  border: 3px solid var(--sr-navy); box-shadow: 0 2px 6px rgba(15, 93, 78, 0.35);
}
.price-thumb:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(46, 158, 122, 0.4); }
.price-thumb:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(46, 158, 122, 0.4); }
.price-presets { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.75rem; }
.price-presets .filter-chip { min-height: 32px; padding: 0.2rem 0.7rem; font-size: 0.8rem; }
.price-presets .filter-chip[aria-pressed="true"] { background: var(--sr-navy); border-color: var(--sr-navy); color: #fff; }
@media (pointer: coarse) {
  .price-thumb::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: 3px; }
}
.dp-pop.dp-up { top: auto; bottom: calc(100% + 6px); }

/* ---------- Bills: pay in full or in part, late fee line ---------- */
.pay-choice { border: 0; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.pay-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border: 1px solid var(--sr-border); border-radius: 14px; cursor: pointer; background: #fff; }
.pay-option:has(input:checked) { border-color: var(--sr-navy); background: var(--tint-mint); }
.pay-option input { margin: 0; }
.pay-part { padding: 0.4rem 0.2rem 0; }
.invoice-lines tr.is-late-fee td { color: #A32828; }

/* ---------- Lease: deposit refund ---------- */
.deposit-card .move-in-lines dt { max-width: 70%; }
.deduction-rows { display: grid; gap: 0.35rem; }
.deduction-row { display: grid; grid-template-columns: 1fr 7.5rem; gap: 0.35rem; }

/* ---------- Resident reviews ---------- */
.verified-note { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--sr-navy); background: var(--tint-mint); border-radius: 999px; padding: 0.15rem 0.6rem; }
.verified-note svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.review-summary { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem 1.5rem; align-items: center; padding: 1rem 1.1rem; border-radius: 18px; background: #fff; box-shadow: var(--sr-shadow); margin-bottom: 1rem; }
.review-overall { text-align: center; }
.review-overall b { display: block; font-family: var(--font-head); font-size: 2.4rem; line-height: 1; color: var(--sr-navy); }
.review-overall small { display: block; margin-top: 0.2rem; }
.stars { color: #E2A33B; letter-spacing: 0.08em; }
.aspect-bars { margin: 0; display: grid; gap: 0.35rem; }
.aspect-bars > div { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: 0.75rem; align-items: center; font-size: 0.86rem; }
.aspect-bars dt { font-weight: 400; color: var(--sr-ink); }
.aspect-bars dd { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.aspect-bar { flex: 1; height: 8px; border-radius: 4px; background: #E3EAE6; overflow: hidden; }
.aspect-bar i { display: block; height: 100%; border-radius: 4px; background: var(--sr-green); }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.review-item { padding: 0.9rem 1rem; border-radius: 16px; background: #fff; box-shadow: var(--sr-shadow); }
.review-item.is-hidden { opacity: 0.6; }
.review-text { white-space: pre-line; }
.aspect-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.5rem 0 0; padding: 0; }
.aspect-chips li { font-size: 0.76rem; background: var(--sr-cream-2); border-radius: 999px; padding: 0.1rem 0.6rem; color: var(--sr-muted); }
.aspect-chips b { color: var(--sr-navy); }
.review-form-wrap { margin-top: 1rem; }
.review-form-wrap > summary { list-style: none; display: inline-flex; }
.review-form-wrap > summary::-webkit-details-marker { display: none; }
.review-form { margin-top: 0.8rem; padding: 1rem 1.1rem; border-radius: 18px; background: #fff; box-shadow: var(--sr-shadow); }
.aspect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.6rem 1.2rem; margin: 0.6rem 0 0.8rem; }
.star-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.star-field legend { font-size: 0.88rem; font-weight: 500; margin-bottom: 0.15rem; float: none; }
.star-input { display: flex; align-items: center; gap: 0.1rem; flex-wrap: wrap; }
.star-input .star { cursor: pointer; padding: 3px; border-radius: 8px; line-height: 0; }
.star-input .star svg { width: 28px; height: 28px; fill: #fff; stroke: #C9D2CE; stroke-width: 1.6; stroke-linejoin: round; transition: fill .1s, stroke .1s; }
.star-input .star.on svg { fill: #F5B740; stroke: #E2A33B; }
.star-input input:focus-visible + label { outline: 3px solid var(--sr-green); outline-offset: 1px; }
.star-skip { font-size: 0.75rem; color: var(--sr-muted); border: 1px solid var(--sr-border); border-radius: 999px; padding: 0.1rem 0.55rem; margin-right: 0.3rem; cursor: pointer; }
.star-input input:checked + .star-skip { background: var(--sr-cream-2); color: var(--sr-ink); }
.star-hint { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--sr-muted); max-width: 11.5rem; padding-left: 3.6rem; }
@media (max-width: 575.98px) {
  .review-summary { grid-template-columns: 1fr; }
  .aspect-bars > div { grid-template-columns: minmax(0, 9rem) 1fr; }
}

/* ---------- Neighborhood extras: day/night, construction, route source ---------- */
.is-daynight { --pc: #6B5BD6; --pb: #ECE9FB; }
.is-construction { --pc: #B4532A; --pb: #FFEDE3; }
.living-hl.is-warn { box-shadow: inset 0 0 0 1px #FFD3BA, var(--sr-shadow); }
.rush-tag, .route-tag { display: inline-block; font-size: 0.7rem; border-radius: 999px; padding: 0 0.45rem; font-weight: 600; }
.rush-tag { background: #FFE6D6; color: #8A3D14; }
.route-tag { background: #E2EEFB; color: #1F4E8C; }

/* ---------- น้อง SOREA helper (spec #14) ---------- */
.sorea-launcher {
  position: fixed; right: 18px; bottom: 22px; z-index: 1045; display: inline-flex; align-items: center; gap: 0.45rem;
  border: 0; border-radius: 999px; padding: 0.3rem 1rem 0.3rem 0.3rem; background: #fff; color: var(--sr-navy); font-weight: 600;
  box-shadow: 0 12px 28px -10px rgba(15, 93, 78, 0.45), 0 0 0 1px var(--sr-border);
}
.sorea-launcher img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--tint-mint); }
.sorea-launcher:hover { background: var(--tint-mint); }
body.sorea-open .sorea-launcher { display: none; }
body:has(.compare-tray:not([hidden])) .sorea-launcher { bottom: 80px; }
.sorea-panel {
  position: fixed; right: 18px; bottom: 22px; z-index: 1046; width: 370px; max-width: calc(100vw - 24px); height: min(600px, calc(100vh - 110px));
  display: flex; flex-direction: column; background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(15, 93, 78, 0.45), 0 0 0 1px var(--sr-border);
}
.sorea-panel[hidden] { display: none; }
.sorea-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.9rem; background: linear-gradient(135deg, var(--tint-mint), #fff); border-bottom: 1px solid var(--sr-border); }
.sorea-head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; background: #fff; }
.sorea-head b { display: block; color: var(--sr-navy); }
.sorea-head small { display: block; color: var(--sr-muted); font-size: 0.75rem; }
.sorea-reset { margin-left: auto; border: 0; background: transparent; color: var(--sr-navy); font-size: 0.8rem; text-decoration: underline; }
.sorea-log { flex: 1; overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; background: #F7F9F8; }
.sorea-msg { max-width: 88%; padding: 0.6rem 0.8rem; border-radius: 18px; font-size: 0.9rem; line-height: 1.5; }
.sorea-msg.is-bot { align-self: flex-start; background: #fff; border-bottom-left-radius: 6px; box-shadow: 0 2px 6px rgba(15, 93, 78, 0.08); }
.sorea-msg.is-me { align-self: flex-end; background: var(--sr-navy); color: #fff; border-bottom-right-radius: 6px; }
.sorea-msg ul { padding-left: 1.1rem; margin: 0.3rem 0; }
.sorea-msg.is-typing { display: inline-flex; gap: 4px; }
.sorea-msg.is-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--sr-green); animation: sorea-dot 1s infinite ease-in-out; }
.sorea-msg.is-typing span:nth-child(2) { animation-delay: .15s; }
.sorea-msg.is-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes sorea-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.sorea-card { display: flex; gap: 0.55rem; align-items: center; margin-top: 0.45rem; padding: 0.4rem; border: 1px solid var(--sr-border); border-radius: 14px; color: var(--sr-ink); text-decoration: none; background: #fff; }
.sorea-card:hover { border-color: var(--sr-green); }
.sorea-card img, .sorea-noimg { width: 56px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--tint-mint); }
.sorea-card b { display: block; color: var(--sr-navy); font-size: 0.9rem; }
.sorea-card b small { font-weight: 400; color: var(--sr-muted); }
.sorea-chips { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.5rem 0.75rem; border-top: 1px solid var(--sr-border); scrollbar-width: none; }
.sorea-chips .filter-chip { flex-shrink: 0; min-height: 32px; font-size: 0.8rem; }
.sorea-input { display: flex; gap: 0.4rem; padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--sr-border); }
.sorea-input input { flex: 1; min-width: 0; border: 1px solid #D3DDD8; border-radius: 999px; padding: 0.5rem 0.9rem; font-size: 16px; }
.sorea-input input:focus { outline: none; border-color: var(--sr-green); box-shadow: 0 0 0 0.2rem rgba(46, 158, 122, 0.25); }
.sorea-input button { width: 42px; height: 42px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--sr-navy); display: grid; place-items: center; }
.sorea-input button svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
/* map search: keep clear of the zoom buttons */
body.page-map .sorea-launcher { right: auto; left: 18px; }
@media (max-width: 991.98px) {
  .sorea-launcher { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); padding-right: 0.3rem; }
  .sorea-launcher span { display: none; }
  body:has(.action-dock) .sorea-launcher { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 84px); }
  body:has(.compare-tray:not([hidden])) .sorea-launcher { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 72px); }
  body.page-map .sorea-launcher { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 76px); }
  /* contact bar + compare bar both showing: sit above both */
  body:has(.action-dock):has(.compare-tray:not([hidden])) .sorea-launcher { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 146px); }
  .sorea-panel { right: 0; left: 0; bottom: 0; width: auto; max-width: none; height: min(78vh, 640px); border-radius: 24px 24px 0 0; z-index: 2001; }
}

/* =====================================================================
   คลิป — vertical video feed
   ===================================================================== */

/* Centre tab: the SOREALTH mark in a raised circle */
.tab-clips { background: none !important; justify-content: flex-end; padding-bottom: 6px; gap: 2px; }
.tab-clips-btn {
  display: grid; place-items: center; width: 54px; height: 54px; margin-top: -24px; border-radius: 50%;
  background: var(--sr-navy); color: #fff; box-shadow: 0 10px 20px -8px rgba(15, 93, 78, 0.65), 0 0 0 4px #fff;
  transition: transform .15s;
}
.tab-clips-btn svg { width: 30px; height: 30px; fill: none; stroke: none; }
.tab-clips-btn svg .heart { fill: var(--sr-error); }
.tab-clips.active .tab-clips-btn { background: var(--sr-green); }
.tab-clips:active .tab-clips-btn { transform: scale(0.94); }
.tab.tab-clips.active svg { fill: none; }

/* Page frame */
body.page-clips { background: #000; }
body.page-clips .site-footer, body.page-clips .site-hills, body.page-clips .compare-tray { display: none !important; }
.clips { position: relative; width: 100%; height: calc(100vh - 66px); min-height: 520px; max-width: 480px; margin: 0 auto; background: #000; color: #fff; overflow: hidden; }
@media (max-width: 991.98px) {
  body.page-clips { padding-bottom: 0 !important; }
  body.page-clips .app-header { display: none; }
  body.page-clips .tabbar { background: rgba(0, 0, 0, 0.92); border-top-color: #1d1d1d; }
  body.page-clips .tabbar .tab { color: #b8bfc6; }
  body.page-clips .tabbar .tab.active { background: transparent; color: #fff; }
  body.page-clips .tab-clips-btn { box-shadow: 0 0 0 4px #000; }
  .clips { position: fixed; left: 0; right: 0; top: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); height: auto; min-height: 0; max-width: none; z-index: 5; }
}
@media (min-width: 992px) {
  body.page-clips main.app-full-main { padding-top: 0; width: 100%; }
  .clips { border-radius: 0 0 24px 24px; }
}

.clips-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: flex; align-items: center; gap: 0.5rem;
  padding: calc(0.5rem + env(safe-area-inset-top)) 0.6rem 1.4rem; background: linear-gradient(rgba(0, 0, 0, .55), transparent);
}
.clips-tabs { flex: 1; display: flex; justify-content: center; gap: 1.1rem; }
.clips-tabs a, .clips-tabs span { color: rgba(255, 255, 255, .72); text-decoration: none; font-weight: 600; padding: 0.3rem 0; border-bottom: 2px solid transparent; }
.clips-tabs .active { color: #fff; border-bottom-color: #fff; }
.clips-icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .14); }
.clips-icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.clips-post { background: var(--sr-gold); color: #3b1a0b; }

.clips-feed { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.clips-feed::-webkit-scrollbar { display: none; }
.clips-feed:focus { outline: none; }

.clip { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; background: #000; overflow: hidden; }
.clip:focus { outline: none; }
.clip-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-video.is-wide { object-fit: contain; }
/* SOREALTH watermark shown on top until the server has burned it into the video (MediaWatermarker). */
.clip-watermark { position: absolute; left: 12%; top: 8%; z-index: 3; width: min(30%, 170px); opacity: .65; pointer-events: none; }
.clip-tap { position: absolute; inset: 0; z-index: 1; }
.clip-paused { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; display: none; place-items: center; background: rgba(0, 0, 0, .35); pointer-events: none; }
.clip-paused svg { width: 40px; height: 40px; fill: rgba(255, 255, 255, .92); margin-left: 6px; }
.clip.is-paused .clip-paused { display: grid; }
.clip-burst { position: absolute; left: 50%; top: 45%; z-index: 3; transform: translate(-50%, -50%) scale(0); pointer-events: none; opacity: 0; }
.clip-burst svg { width: 110px; height: 110px; fill: var(--sr-error); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
.clip-burst.go { animation: clip-burst .7s ease-out; }
@keyframes clip-burst { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } }
.clip-sound { position: absolute; right: 12px; top: calc(64px + env(safe-area-inset-top)); z-index: 4; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .4); color: #fff; }
.clip-sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.clip-flag { position: absolute; left: 12px; right: 60px; top: calc(64px + env(safe-area-inset-top)); z-index: 4; background: rgba(163, 40, 40, .85); border-radius: 10px; padding: 0.35rem 0.6rem; font-size: 0.8rem; }

/* Right-hand action rail */
.clip-rail { position: absolute; right: 8px; bottom: 96px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.clip-avatar { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff; overflow: hidden; display: grid; place-items: center; background: var(--sr-green); color: #fff; font-weight: 700; font-size: 1.2rem; text-decoration: none; margin-bottom: 0.2rem; }
.clip-avatar img { width: 100%; height: 100%; object-fit: cover; }
.clip-act { border: 0; background: none; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; min-width: 48px; font-size: 0.78rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.clip-act svg { width: 34px; height: 34px; fill: rgba(255, 255, 255, .95); stroke: rgba(0, 0, 0, .15); stroke-width: 0.8; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); transition: transform .12s; }
.clip-act:active svg { transform: scale(0.88); }
.clip-act[data-act="like"][aria-pressed="true"] svg { fill: var(--sr-error); }
.clip-act[data-act="save"][aria-pressed="true"] svg { fill: #F5B740; }
.clip-act-sm svg { width: 28px; height: 28px; }
.clip-act:focus-visible, .clip-avatar:focus-visible, .clip-sound:focus-visible { outline: 3px solid #A7D7C5; outline-offset: 3px; border-radius: 12px; }

/* Bottom: owner, caption, listing */
.clip-info { position: absolute; left: 0; right: 72px; bottom: 0; z-index: 4; padding: 2.2rem 0.9rem 1.1rem; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.clip-owner { color: #fff; font-weight: 700; text-decoration: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.clip-badge { display: inline-block; font-size: 0.68rem; font-weight: 600; background: var(--sr-green); border-radius: 999px; padding: 0 0.45rem; vertical-align: middle; }
.clip-caption { margin: 0.3rem 0 0; font-size: 0.9rem; line-height: 1.45; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clip-listing {
  display: flex; align-items: center; gap: 0.55rem; margin-top: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 14px;
  background: rgba(255, 255, 255, .92); color: var(--sr-ink); text-decoration: none; max-width: 340px;
}
.clip-listing svg { width: 26px; height: 26px; flex-shrink: 0; fill: none; stroke: var(--sr-navy); stroke-width: 2; stroke-linejoin: round; }
.clip-listing b { color: var(--sr-navy); font-size: 0.9rem; }
.clip-listing b small { font-weight: 400; color: var(--sr-muted); }
.clip-listing span { font-size: 0.78rem; }
.clip-listing-go { margin-left: auto; flex-shrink: 0; font-weight: 600; color: var(--sr-navy); }
.clip-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 3px; background: rgba(255, 255, 255, .2); }
.clip-progress i { display: block; height: 100%; width: 0; background: #fff; }
.clips-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; }
.clips-empty img { width: 120px; margin-bottom: 1rem; }

/* Bottom sheets (comments / more) */
.clips-backdrop { position: absolute; inset: 0; z-index: 7; background: rgba(0, 0, 0, .45); }
.clips-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; max-height: 72%; display: flex; flex-direction: column;
  background: #fff; color: var(--sr-ink); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 30px rgba(0, 0, 0, .3);
}
.clips-sheet[hidden], .clips-backdrop[hidden] { display: none; }
.clips-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1rem 0.6rem; border-bottom: 1px solid var(--sr-border); }
.clips-comments { list-style: none; margin: 0; padding: 0.5rem 1rem; overflow-y: auto; flex: 1; min-height: 160px; }
.clips-comment { display: flex; gap: 0.6rem; padding: 0.55rem 0; align-items: flex-start; }
.clips-comment + .clips-comment { border-top: 1px solid var(--sr-border); }
.clips-comment-avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; background: var(--tint-mint); color: var(--sr-navy); font-weight: 700; }
.clips-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.clips-comment p { font-size: 0.9rem; word-break: break-word; }
.clips-comment .min-w-0 { flex: 1; }
.clips-comment-form { display: flex; gap: 0.4rem; padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--sr-border); }
.clips-comment-form input { flex: 1; min-width: 0; border: 1px solid #D3DDD8; border-radius: 999px; padding: 0.5rem 0.9rem; font-size: 16px; }
.clips-comment-form input:focus { outline: none; border-color: var(--sr-green); box-shadow: 0 0 0 0.2rem rgba(46, 158, 122, 0.25); }
.clips-comment-form button { width: 42px; height: 42px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--sr-navy); display: grid; place-items: center; }
.clips-comment-form button svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.clips .toast-lite { position: absolute; bottom: 110px; }

/* Share sheet */
.share-grid { list-style: none; margin: 0; padding: 1rem 0.75rem 0.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem 0.25rem; }
.share-grid a, .share-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 100%; padding: 0.15rem 0; border: 0; background: none;
  color: var(--sr-ink); font-size: 0.78rem; text-decoration: none; line-height: 1.2; text-align: center; border-radius: 12px;
}
.share-grid small { color: var(--sr-muted); font-size: 0.66rem; margin-top: -0.2rem; }
.share-grid a:focus-visible, .share-grid button:focus-visible { outline: 3px solid rgba(46, 158, 122, 0.5); outline-offset: 2px; }
.share-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; transition: transform .15s ease; }
.share-grid a:hover .share-ico, .share-grid button:hover .share-ico { transform: scale(1.06); }
.share-ico svg { width: 28px; height: 28px; }
.share-ico-copy, .share-ico-more { background: var(--tint-mint); }
.share-ico-copy svg { fill: none; stroke: var(--sr-navy); stroke-width: 2; stroke-linecap: round; }
.share-ico-more svg { fill: var(--sr-navy); }
.share-link { display: flex; gap: 0.5rem; align-items: center; margin: 0.25rem 1rem calc(1rem + env(safe-area-inset-bottom)); padding: 0.35rem 0.35rem 0.35rem 0.85rem; border: 1px solid #D3DDD8; border-radius: 999px; }
.share-link input { flex: 1; min-width: 0; border: 0; background: none; font-size: 0.85rem; color: var(--sr-muted); }
.share-link input:focus { outline: none; }
.share-link .btn { border-radius: 999px; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .share-ico { transition: none; } }

/* Posting page */
.clip-new-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; }
.clip-drop {
  position: relative; display: grid; place-items: center; aspect-ratio: 9 / 16; width: 100%; border-radius: 20px; overflow: hidden; cursor: pointer;
  background: repeating-linear-gradient(45deg, var(--tint-mint), var(--tint-mint) 10px, #fff 10px, #fff 20px); border: 2px dashed var(--sr-green);
}
.clip-drop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.clip-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; padding: 1rem; color: var(--sr-navy); }
.clip-drop-empty svg { width: 46px; height: 46px; fill: none; stroke: var(--sr-green); stroke-width: 1.8; stroke-linejoin: round; }
.clip-drop-empty small { color: var(--sr-muted); }
.clip-new-grid:has(#clipFile:focus-visible) .clip-drop { outline: 3px solid var(--sr-green); outline-offset: 2px; }
.clip-cover { display: flex; gap: 0.9rem; align-items: center; }
.clip-cover canvas { width: 72px; height: 128px; border-radius: 10px; background: #000; flex-shrink: 0; }
#coverField { border: 0; padding: 0; margin: 0 0 1rem; }
#coverField:disabled { opacity: 0.5; }
#coverField legend { float: none; }
.clip-upload-progress { margin-top: 1rem; }
.clip-upload-progress .progress { height: 10px; border-radius: 5px; }
.clip-upload-progress .progress-bar { background: var(--sr-navy); }
@media (max-width: 575.98px) {
  .clip-new-grid { grid-template-columns: 1fr; }
  .clip-drop { max-width: 220px; margin: 0 auto; }
}

/* Library grid */
.clip-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.clip-tile { position: relative; }
.clip-tile > a { display: block; position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #000; }
.clip-tile img, .clip-tile video { width: 100%; height: 100%; object-fit: cover; }
.clip-tile-meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 0.6rem; padding: 1.5rem 0.5rem 0.4rem; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); color: #fff; font-size: 0.78rem; font-weight: 600; }
.clip-tile-flag { position: absolute; left: 6px; top: 6px; background: rgba(163, 40, 40, .9); color: #fff; border-radius: 999px; padding: 0 0.5rem; font-size: 0.72rem; }
.clip-tile.is-hidden > a { opacity: 0.7; }
.clip-tile-delete { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.1rem; line-height: 1; }

/* Profile photo */
.avatar-edit { position: relative; flex-shrink: 0; }
.avatar-photo { object-fit: cover; padding: 0; }
.avatar-edit-btn {
  position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--sr-navy); color: #fff; box-shadow: 0 0 0 3px #fff;
}
.avatar-edit-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.avatar-edit-btn:focus-within { outline: 3px solid var(--sr-green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .clips-feed { scroll-behavior: auto; }
}


/* ---------- Chat cards: requirements + viewings ---------- */
.chat-msg.has-card { max-width: min(88%, 420px); }
.chat-card { background: #fff; color: var(--sr-ink); border: 1px solid #DCE9E3; border-radius: 18px; padding: 0.8rem 0.9rem; box-shadow: 0 2px 8px rgba(15, 93, 78, .07); width: 100%; }
.chat-msg.mine .chat-card { border-bottom-right-radius: 6px; }
.chat-msg.theirs .chat-card { border-bottom-left-radius: 6px; }
.chat-card-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--sr-navy); margin-bottom: 0.55rem; }
.chat-card-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--tint-mint); flex-shrink: 0; }
.chat-card-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--sr-navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 0.9rem; margin: 0; }
.brief-grid div { min-width: 0; }
.brief-grid dt { font-size: 0.7rem; font-weight: 400; color: var(--sr-muted); }
.brief-grid dd { margin: 0; font-weight: 500; font-size: 0.9rem; overflow-wrap: anywhere; }
.brief-note { margin: 0.6rem 0 0; padding-top: 0.55rem; border-top: 1px dashed #DCE9E3; font-size: 0.86rem; white-space: pre-wrap; }
.viewing-card { display: flex; gap: 0.8rem; align-items: flex-start; }
.viewing-cal { width: 52px; flex-shrink: 0; border-radius: 12px; overflow: hidden; text-align: center; background: #fff; border: 1px solid #DCE9E3; }
.viewing-cal span { display: block; background: var(--sr-navy); color: #fff; font-size: 0.68rem; padding: 0.15rem 0; }
.viewing-cal b { display: block; font-size: 1.35rem; line-height: 1.6; color: var(--sr-navy); }
.viewing-card.is-ok .viewing-cal span { background: var(--sr-green); }
.viewing-card.is-no .viewing-cal span { background: #9AA3AE; }
.viewing-card.is-no .viewing-cal b { color: #9AA3AE; }
.viewing-title { font-weight: 600; color: var(--sr-navy); }
.viewing-card.is-no .viewing-title { color: var(--sr-muted); }
.viewing-when { font-size: 0.86rem; }
.viewing-status { display: inline-block; margin-top: 0.3rem; font-size: 0.72rem; font-weight: 500; padding: 0.1rem 0.55rem; border-radius: 999px; }
.viewing-status.is-pending { background: #FFF1E6; color: #A1501E; }
.viewing-status.is-ok { background: var(--tint-mint); color: var(--sr-navy); }
.viewing-status.is-no, .viewing-status.is-done { background: #EEF1F4; color: var(--sr-muted); }
.viewing-note { margin: 0.4rem 0 0; font-size: 0.84rem; color: var(--sr-muted); white-space: pre-wrap; }
.viewing-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.viewing-actions .btn-sm { border-radius: 999px; padding-inline: 0.85rem; }
.chat-tools { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.75rem 0; background: #fff; border-top: 1px solid #EAF0ED; overflow-x: auto; scrollbar-width: none; }
.chat-tools::-webkit-scrollbar { display: none; }
.chat-tools + .chat-form { border-top: 0; }
.chat-tool { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; border: 1px solid #CFE3DA; background: #fff; color: var(--sr-navy); border-radius: 999px; padding: 0.32rem 0.8rem; font-size: 0.84rem; font-weight: 500; }
.chat-tool svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-tool:hover { background: var(--tint-mint); }
.chat-tool:focus-visible { outline: 3px solid rgba(46, 158, 122, .45); outline-offset: 2px; }
.chat-tool.is-suggested { background: var(--sr-navy); border-color: var(--sr-navy); color: #fff; }
.chat-tools-hint { font-size: 0.74rem; color: var(--sr-muted); white-space: nowrap; }
.brief-quick { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }


/* ---------- Typed search → removable filter chips ---------- */
.nl-search .nl-spark { flex-shrink: 0; }
.nl-search input::placeholder { color: #8A94A1; }
.nl-chips { display: flex; gap: 0.4rem; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 0.15rem 0 0.1rem; }
.nl-chips::-webkit-scrollbar { display: none; }
.nl-chips[hidden] { display: none; }
.nl-chip { display: inline-flex; align-items: stretch; flex-shrink: 0; border-radius: 999px; background: var(--tint-mint); border: 1px solid #C9E5D9; overflow: hidden; }
.nl-chip button { border: 0; background: none; color: var(--sr-navy); font-size: 0.8rem; line-height: 1; }
.nl-chip-name { padding: 0.38rem 0.3rem 0.38rem 0.75rem; font-weight: 500; white-space: nowrap; }
.nl-chip-x { padding: 0 0.6rem 0 0.35rem; font-size: 1.05rem !important; opacity: 0.7; }
.nl-chip-x:hover { opacity: 1; background: rgba(15, 93, 78, .08); }
.nl-chip button:focus-visible { outline: 2px solid var(--sr-green); outline-offset: -2px; }
.nl-chip-all { flex-shrink: 0; border: 0; background: none; color: var(--sr-muted); font-size: 0.78rem; text-decoration: underline; padding: 0 0.4rem; white-space: nowrap; }
.nl-msg { font-size: 0.8rem; color: #A1501E; background: #FFF4EC; border-radius: 10px; padding: 0.35rem 0.7rem; }
.nl-msg[hidden] { display: none; }

/* ---------- "Still available" ---------- */
.card-confirmed { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; font-weight: 500; color: var(--sr-navy); background: var(--tint-mint); border-radius: 999px; padding: 0.12rem 0.55rem; margin: 0.2rem 0; }
.card-confirmed svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.confirm-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 500; border-radius: 999px; padding: 0.22rem 0.7rem; }
.confirm-pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.confirm-pill.is-fresh { background: var(--tint-mint); color: var(--sr-navy); }
.confirm-pill.is-aging { background: #F1F4F3; color: var(--sr-muted); }
.confirm-pill.is-stale { background: #FFF1E6; color: #A1501E; }
.owner-confirm { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; width: 100%; padding: 0.7rem 0.9rem; border-radius: 14px; background: var(--tint-mint); color: var(--sr-navy); }
.owner-confirm.is-aging { background: #FFF7EE; color: #7A4A12; }
.owner-confirm.is-stale { background: #FFEDE3; color: #8A3B12; box-shadow: inset 0 0 0 1px #FFC9A8; }
.owner-confirm:target { animation: sr-flash 1.6s ease 1; }
@keyframes sr-flash { 0%, 100% { box-shadow: inset 0 0 0 1px transparent; } 30% { box-shadow: 0 0 0 4px rgba(255, 179, 138, .7); } }
@media (prefers-reduced-motion: reduce) { .owner-confirm:target { animation: none; } }

/* ---------- Share sheet (share-sheet.js): bottom sheet on phones, dialog on desktop ---------- */
html.ss-lock { overflow: hidden; }
.ss-root { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: flex-end; justify-content: center; }
.ss-root[hidden] { display: none; }
.ss-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, .5); opacity: 0; transition: opacity .2s ease; backdrop-filter: blur(2px); }
.ss {
  position: relative; width: 100%; max-width: 440px; background: #fff; color: var(--sr-ink);
  border-radius: 24px 24px 0 0; padding: 0.4rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
  box-shadow: 0 -16px 40px rgba(0, 0, 0, .18); transform: translateY(100%); transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.ss-root.is-open .ss-backdrop { opacity: 1; }
.ss-root.is-open .ss { transform: none; }
.ss-grab { width: 40px; height: 4px; border-radius: 4px; background: #D6DDDA; margin: 0.25rem auto 0.4rem; }
.ss-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.ss-head h2 { font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--sr-navy); }
.ss-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #F1F4F3; display: grid; place-items: center; }
.ss-close svg { width: 16px; height: 16px; fill: none; stroke: var(--sr-ink); stroke-width: 2.2; stroke-linecap: round; }
.ss-close:hover { background: #E6ECE9; }
.ss-preview { display: flex; gap: 0.8rem; align-items: center; padding: 0.65rem; border-radius: 16px; background: var(--sr-cream, #F7F9F8); border: 1px solid #E6EEEA; margin-bottom: 1rem; }
.ss-thumb { flex-shrink: 0; border-radius: 10px; object-fit: cover; background: #DCE9E3; }
.ss-thumb.is-tall { width: 48px; height: 84px; }
.ss-thumb.is-wide { width: 84px; height: 62px; }
.ss-thumb-logo { background: var(--tint-mint) url("../images/logo-mark.svg") center / 46% no-repeat; }
.ss-meta { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.ss-meta b { font-size: 0.92rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-meta span { font-size: 0.8rem; color: var(--sr-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-meta small { font-size: 0.72rem; color: var(--sr-green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-apps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem 0.4rem; }
.ss-apps a { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--sr-ink); border-radius: 14px; padding: 0.2rem 0; }
.ss-ico { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(17, 24, 39, .12); transition: transform .15s ease; }
.ss-ico svg { width: 28px; height: 28px; }
.ss-name { font-size: 0.74rem; line-height: 1.2; text-align: center; }
.ss-apps a:hover .ss-ico { transform: translateY(-2px); }
.ss-apps a:focus-visible { outline: 3px solid rgba(46, 158, 122, .5); outline-offset: 2px; }
.ss-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.6rem; }
.ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 46px; border: 1px solid #CFE3DA; border-radius: 14px; background: #fff; color: var(--sr-navy); font-weight: 500; font-size: 0.9rem; }
.ss-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ss-btn:hover { background: var(--tint-mint); }
.ss-btn.is-done { background: var(--sr-navy); border-color: var(--sr-navy); color: #fff; }
.ss-btn:focus-visible, .ss-close:focus-visible { outline: 3px solid rgba(46, 158, 122, .5); outline-offset: 2px; }
@media (min-width: 576px) {
  .ss-root { align-items: center; padding: 1rem; }
  .ss { max-height: calc(100vh - 2rem); overflow-y: auto; border-radius: 24px; padding: 0.9rem 1.4rem 1.4rem; transform: translateY(12px) scale(.98); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
  .ss-root.is-open .ss { opacity: 1; }
  .ss-grab { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ss, .ss-backdrop, .ss-ico { transition: none; } }

/* Compare: share with the people you will live with */
.compare-share { display: inline-flex; align-items: center; gap: 0.45rem; border-radius: 999px; white-space: nowrap; }
.compare-share svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.compare-share-hint { font-size: 0.82rem; color: var(--sr-muted); margin: -0.5rem 0 1rem; }

/* Results header: wraps on phones instead of squeezing the title */
.map-results-head { flex-wrap: wrap; row-gap: 0.6rem; }
.map-results-head h1 { white-space: nowrap; }

/* Chat: success / error banners float over the thread instead of pushing the message box under the tab bar */
body:has(.chat-shell) main .alert-dismissible { position: fixed; left: 50%; transform: translateX(-50%); top: 76px; width: min(560px, calc(100% - 24px)); z-index: 1045; box-shadow: var(--sr-shadow-lg, 0 12px 30px rgba(0,0,0,.15)); }

/* Listing form: the address zooms the pin map and outlines the area */
.picker-wrap { position: relative; }
.picker-area { position: absolute; left: 10px; bottom: 10px; z-index: 500; max-width: calc(100% - 20px); background: rgba(255, 255, 255, .95); color: var(--sr-navy); font-size: 0.82rem; font-weight: 500; padding: 0.35rem 0.75rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(15, 93, 78, .15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.picker-area[hidden] { display: none; }

/* ---------- Reservations (จองห้อง + มัดจำจอง) ---------- */
.reserve-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; border-radius: 999px; padding: 0.22rem 0.7rem; background: #FFF1E6; color: #A1501E; }
.reserve-pill.is-mine { background: var(--tint-mint); color: var(--sr-navy); }
.reserve-pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.reserve-box { border: 1px solid #CFE3DA; background: linear-gradient(180deg, #F2FAF6, #fff); border-radius: 16px; padding: 0.85rem 1rem; margin-bottom: 0.75rem; color: var(--sr-navy); }
.reserve-box.is-held { border-color: #FFD7BD; background: #FFF8F2; color: #7A4A12; }
.reserve-amount { font-weight: 700; font-size: 1.05rem; }
.reserve-rules { padding-left: 1.1rem; font-size: 0.88rem; display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.card-reserved { position: absolute; top: 0; right: 0; margin: 0.5rem; z-index: 2; background: #A1501E; color: #fff; font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; }
.map-card-img .card-reserved { left: auto; right: 0.5rem; top: auto; bottom: 0.5rem; margin: 0; position: absolute; }
.reservation-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem; color: inherit; text-decoration: none; }
.reservation-row img, .reservation-noimg { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--tint-mint); }
.reservation-head { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem; color: inherit; text-decoration: none; }
.reservation-head img { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.resv-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; padding: 0; margin: 0 0 1rem; counter-reset: s; }
.resv-steps li { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; font-size: 0.76rem; color: var(--sr-muted); position: relative; }
.resv-steps li span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #EEF2F0; font-weight: 700; color: var(--sr-muted); position: relative; z-index: 1; }
.resv-steps li:not(:first-child)::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: #E2E8E5; }
.resv-steps li.is-done span { background: var(--sr-green); color: #fff; }
.resv-steps li.is-done:not(:first-child)::before, .resv-steps li.is-now:not(:first-child)::before { background: var(--sr-green); }
.resv-steps li.is-now span { background: var(--sr-navy); color: #fff; box-shadow: 0 0 0 4px rgba(46, 158, 122, .2); }
.resv-steps li.is-now, .resv-steps li.is-done { color: var(--sr-navy); font-weight: 600; }
.resv-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; margin: 0 0 1rem; }
.resv-facts dt { font-size: 0.72rem; font-weight: 400; color: var(--sr-muted); }
.resv-facts dd { margin: 0; font-size: 0.92rem; }
.resv-facts .span-2 { grid-column: 1 / -1; }
.resv-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.resv-actions form { margin: 0; }
.resv-rules { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 14px; background: #F4F7F6; color: var(--sr-muted); }
.resv-rules ul { margin: 0.35rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; }

/* ---------- Listing status tags ---------- */
.lt-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.35rem; padding: 0; }
.detail-head .lt-list { margin: 0; }
.lt { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 600; line-height: 1.2; padding: 0.2rem 0.55rem; border-radius: 999px; background: #F1F4F3; color: var(--sr-muted); white-space: nowrap; }
.detail-head .lt { font-size: 0.78rem; padding: 0.25rem 0.7rem; }
.lt-reserved { background: #FFF1E6; color: #A1501E; }
.lt-unavailable { background: #EEF1F4; color: #5B6472; }
.lt-featured { background: #FFF0CC; color: #8A5300; }
.lt-featured::before { content: "★"; }
.lt-pricedrop { background: #FFE6E3; color: #B42318; }
.lt-pricedrop::before { content: "↓"; }
.lt-openhouse { background: #EFEAFE; color: #5B3FB5; }
.lt-back { background: #DDF3EE; color: #0F6F62; }
.lt-new { background: #E3F3EC; color: #0F5D4E; }
.lt-popular { background: #FFEDE4; color: #C2501F; }
.lt-popular::before { content: "🔥"; font-size: 0.7rem; }
.lt-ready { background: #E3F3EC; color: #0F5D4E; }
.lt-ready::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2E9E7A; }
.lt-available { background: #F1F4F3; color: #3F4A55; }
.lt-owner { background: #E8F0FE; color: #1F4E9C; }
.card-manage { display: flex; gap: 0.4rem; padding: 0 0.85rem 0.85rem; position: relative; z-index: 2; }
.card-manage .btn { flex: 1; border-radius: 999px; }
.staff-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; margin-bottom: 0.75rem; border-radius: 12px; background: #FFF8E6; border: 1px dashed #F2C26B; color: #7A4A12; }
.staff-strip form { margin: 0; }

/* Address line: suggestions for the sub-district / district being typed */
.addr-line-wrap { position: relative; }
.addr-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1050; list-style: none; margin: 0; padding: 0.3rem; background: #fff; border: 1px solid #DCE9E3; border-radius: 14px; box-shadow: var(--sr-shadow-lg, 0 12px 30px rgba(0,0,0,.12)); max-height: 320px; overflow-y: auto; }
.addr-suggest[hidden] { display: none; }
.addr-suggest li { display: flex; flex-direction: column; padding: 0.45rem 0.7rem; border-radius: 10px; cursor: pointer; }
.addr-suggest li b { font-weight: 600; color: var(--sr-navy); font-size: 0.92rem; }
.addr-suggest li small { color: var(--sr-muted); font-size: 0.78rem; }
.addr-suggest li:hover, .addr-suggest li.is-active { background: var(--tint-mint); }

/* Back office: review queue tabs, history results and the approve confirmation */
.review-tabs { display: flex; gap: 0.35rem; padding: 0.3rem; background: var(--sr-cream-2); border-radius: 999px; width: fit-content; margin-bottom: 1rem; }
.review-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1.1rem; border-radius: 999px; color: var(--sr-muted); font-weight: 600; text-decoration: none; }
.review-tab:hover { color: var(--sr-navy); }
.review-tab.is-active { background: #fff; color: var(--sr-navy); box-shadow: var(--sr-shadow); }
a.check-pill { text-decoration: none; color: var(--sr-ink); }
a.check-pill.is-on { border-color: var(--sr-navy); background: var(--tint-navy); color: var(--sr-navy); font-weight: 600; }
.review-result { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.review-result.is-ok { background: var(--tint-mint); color: var(--sr-navy); }
.review-result.is-back { background: #FFE9E9; color: #B42318; }
.approve-summary { background: var(--sr-cream); border: 1px solid var(--sr-border); border-radius: var(--sr-radius-sm); padding: 0.85rem 1rem; display: grid; gap: 0.15rem; }

/* Listing form: what is around the pin (same blocks as the listing page) */
.form-nearby { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--sr-border); border-radius: var(--sr-radius-sm); background: #fff; }
.form-nearby .living-hls { margin-bottom: 0.75rem; }

/* =====================================================================
   Property management ("บริหารที่พัก")
   ===================================================================== */
.kpi-of { font-size: 1rem; color: var(--sr-muted); font-weight: 600; }

/* to-do list */
.mg-alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.mg-alert { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.75rem; border-radius: 12px; background: var(--sr-cream); }
.mg-alert-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--sr-green); }
.mg-alert.is-danger { background: #FFF1F0; } .mg-alert.is-danger .mg-alert-dot { background: #E5484D; }
.mg-alert.is-warning { background: var(--tint-gold); } .mg-alert.is-warning .mg-alert-dot { background: var(--sr-gold-600); }
.mg-alert.is-info .mg-alert-dot { background: #3E7BFA; }
.mg-alert-text { flex: 1; font-size: 0.9rem; }
.mg-alert .btn { white-space: nowrap; }

/* property cards */
.mg-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1rem; }
@media (max-width: 575.98px) { .mg-props { grid-template-columns: 1fr; } }
.mg-prop { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.mg-prop-cover { position: relative; display: block; aspect-ratio: 16 / 7; background: linear-gradient(135deg, var(--sr-sage), var(--tint-mint)); }
.mg-prop-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-prop.is-vacant .mg-prop-cover img { filter: saturate(0.55); }
.mg-prop-state { position: absolute; left: 0.75rem; top: 0.75rem; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: #fff; background: var(--sr-navy); box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.mg-prop-state.is-vacant { background: var(--sr-gold-600); }
.mg-prop-state.is-pending { background: #6B7280; }
.mg-prop-body { padding: 0.9rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.mg-prop-title { font-size: 1.02rem; margin: 0; line-height: 1.35; }
.mg-prop-title a { color: var(--sr-navy); text-decoration: none; }
.mg-prop-title a:hover { text-decoration: underline; }
.mg-prop-tenant { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.avatar-xs { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--tint-gold); color: var(--sr-gold-700); font-size: 0.75rem; font-weight: 700; }
.mg-chips { list-style: none; padding: 0; margin: 0.15rem 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.mg-chips li { font-size: 0.76rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--sr-cream-2); color: var(--sr-ink); }
.mg-chips li.is-danger { background: #FFE9E9; color: #B42318; }
.mg-chips li.is-warn { background: var(--tint-gold); color: var(--sr-gold-700); }
.mg-chips li.is-info { background: #E8F0FF; color: #2754C5; }
.mg-chips li.is-ok { background: var(--tint-mint); color: var(--sr-navy); }
.mg-prop-money { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; padding-top: 0.5rem; margin-top: auto; border-top: 1px dashed var(--sr-border); color: var(--sr-muted); }
.mg-prop-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }

/* tenancy hub */
.mg-hero { display: grid; grid-template-columns: 220px 1fr; overflow: hidden; padding: 0; }
.mg-hero-cover { background: linear-gradient(135deg, var(--sr-sage), var(--tint-mint)); min-height: 160px; }
.mg-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-hero-body { padding: 1rem 1.25rem; }
.mg-hero-people { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.mg-term .progress { height: 8px; border-radius: 999px; background: var(--sr-cream-2); }
.mg-term .progress-bar { background: linear-gradient(90deg, var(--sr-green), var(--sr-navy)); border-radius: 999px; }
@media (max-width: 767.98px) { .mg-hero { grid-template-columns: 1fr; } .mg-hero-cover { min-height: 0; aspect-ratio: 16 / 7; } }

.mg-tabs { display: flex; gap: 0.25rem; overflow-x: auto; padding: 0.3rem; background: #fff; border-radius: 999px; box-shadow: var(--sr-shadow); scrollbar-width: none; }
.mg-tabs::-webkit-scrollbar { display: none; }
.mg-tab { flex: none; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.95rem; border-radius: 999px; color: var(--sr-muted); font-weight: 600; font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
.mg-tab:hover { color: var(--sr-navy); }
.mg-tab.is-active { background: var(--sr-navy); color: #fff; }
.mg-tab-count { min-width: 1.3rem; height: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background: var(--sr-gold); color: #fff; font-size: 0.72rem; display: inline-grid; place-items: center; }
.mg-tab.is-active .mg-tab-count { background: #fff; color: var(--sr-navy); }

.mg-dl { margin: 0; display: grid; gap: 0.15rem; }
.mg-dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px dashed var(--sr-border); }
.mg-dl dt { font-weight: 500; color: var(--sr-muted); }
.mg-dl dd { margin: 0; text-align: right; font-weight: 600; }
.mg-dl .is-total { border-bottom: 0; }
.mg-dl .is-total dt, .mg-dl .is-total dd { color: var(--sr-navy); font-size: 1.05rem; }

.mg-list { list-style: none; padding: 0; margin: 0; }
.mg-list > li { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0; border-bottom: 1px solid var(--sr-border); }
.mg-list > li:last-child { border-bottom: 0; }
.mg-list-icon { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--sr-cream-2); }
.plate { display: inline-block; margin-left: 0.4rem; padding: 0 0.45rem; border: 1.5px solid var(--sr-ink); border-radius: 5px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; background: #fff; }
.mg-addform { padding-top: 0.75rem; border-top: 1px dashed var(--sr-border); }

/* repairs */
.mg-cats { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mg-cat input { position: absolute; opacity: 0; pointer-events: none; }
.mg-cat span { display: inline-block; padding: 0.3rem 0.7rem; border: 1px solid var(--sr-border); border-radius: 999px; font-size: 0.82rem; cursor: pointer; background: #fff; }
.mg-cat input:checked + span { border-color: var(--sr-navy); background: var(--tint-navy); color: var(--sr-navy); font-weight: 600; }
.mg-cat input:focus-visible + span { outline: 2px solid var(--sr-navy); outline-offset: 2px; }
.mg-repairs { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.mg-repair { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem; border-radius: 14px; border: 1px solid var(--sr-border); text-decoration: none; color: inherit; background: #fff; }
.mg-repair:hover { border-color: var(--sr-navy); }
.mg-repair-thumb { width: 52px; height: 52px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--sr-cream-2); font-size: 1.4rem; }
.mg-repair-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mg-repair-body { flex: 1; min-width: 0; }
.mg-repair-title { font-weight: 600; color: var(--sr-ink); }
.mg-photos { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mg-photos a { display: block; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--sr-border); }
.mg-photos a.is-before { opacity: 0.75; outline: 2px dashed var(--sr-muted); outline-offset: -2px; }
.mg-photos img { width: 100%; height: 100%; object-fit: cover; }
.mg-timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--sr-border); display: grid; gap: 0.9rem; }
.mg-timeline li { position: relative; }
.mg-timeline li::before { content: ""; position: absolute; left: -1.38rem; top: 0.3rem; width: 11px; height: 11px; border-radius: 50%; background: var(--sr-gold); border: 2px solid #fff; }
.mg-timeline li.is-owner::before { background: var(--sr-navy); }
.mg-done-box { padding: 0.75rem; border-radius: 12px; background: var(--sr-cream); }

/* photo picker */
.photo-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.pp-list { display: contents; }
.pp-item { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--sr-border); display: grid; place-items: center; background: var(--sr-cream); }
.pp-item img { width: 100%; height: 100%; object-fit: cover; }
.pp-item button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; line-height: 1; font-size: 0.9rem; }
.pp-add { width: 64px; height: 64px; border: 1.5px dashed var(--sr-border); border-radius: 10px; display: grid; place-items: center; cursor: pointer; font-size: 0.72rem; color: var(--sr-muted); text-align: center; }
.pp-add:hover { border-color: var(--sr-navy); color: var(--sr-navy); }
.pp-add[hidden] { display: none; }
.pp-msg:empty { display: none; }

/* condition report */
.mg-insp-list { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.mg-insp-item { padding: 0.55rem 0; border-bottom: 1px solid var(--sr-border); }
.mg-insp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mg-insp-name { flex: 1 1 180px; max-width: 320px; }
.mg-insp-extra { margin-top: 0.4rem; }
.mg-insp-extra[hidden] { display: none; }
.mg-insp-before { margin-top: 0.25rem; padding-left: 0.5rem; border-left: 3px solid var(--sr-border); }
.mg-cond { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.mg-cond-opt input { position: absolute; opacity: 0; pointer-events: none; }
.mg-cond-opt span { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--sr-border); font-size: 0.78rem; cursor: pointer; background: #fff; }
.mg-cond-opt input:focus-visible + span { outline: 2px solid var(--sr-navy); outline-offset: 2px; }
.mg-cond-opt.is-Good input:checked + span { background: var(--tint-mint); border-color: var(--sr-green); color: var(--sr-navy); font-weight: 600; }
.mg-cond-opt.is-Fair input:checked + span { background: var(--tint-gold); border-color: var(--sr-gold-600); color: var(--sr-gold-700); font-weight: 600; }
.mg-cond-opt.is-Damaged input:checked + span { background: #FFE9E9; border-color: #E5484D; color: #B42318; font-weight: 600; }
.mg-cond-opt.is-Missing input:checked + span { background: #374151; border-color: #374151; color: #fff; font-weight: 600; }
.mg-insp-actions { position: sticky; bottom: 0.75rem; z-index: 5; }
.mg-insp-view { list-style: none; padding: 0; margin: 0; }
.mg-insp-view > li { padding: 0.55rem 0; border-bottom: 1px solid var(--sr-border); }
.mg-insp-view > li:last-child { border-bottom: 0; }

/* expenses */
.mg-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.mg-bar { height: 7px; border-radius: 999px; background: var(--sr-cream-2); overflow: hidden; margin-top: 0.2rem; }
.mg-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--sr-gold), var(--sr-gold-600)); border-radius: 999px; }
.mg-hub-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.1rem; text-decoration: none; color: inherit; border: 1.5px solid transparent; }
.mg-hub-link > span:first-child { font-size: 1.5rem; }
.mg-hub-link > span:nth-child(2) { flex: 1; color: var(--sr-navy); }
.mg-hub-link:hover { border-color: var(--sr-navy); }

/* =====================================================================
   Property-management packages: pricing, checkout, my package, locks
   ===================================================================== */
.pp-hero { padding: 0.5rem 0 0; }
.pp-title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0.25rem 0 0.4rem; color: var(--sr-navy); }
.pp-current { display: inline-block; padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--tint-mint); color: var(--sr-navy); }
.pp-promo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border-radius: var(--sr-radius-sm); background: linear-gradient(90deg, var(--tint-gold), #FFF7F1); border: 1px dashed var(--sr-gold-600); }
.pp-promo-tag { padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--sr-gold-600); color: #fff; font-size: 0.75rem; font-weight: 700; }
.pp-cycle { display: inline-flex; gap: 0.25rem; padding: 0.3rem; background: #fff; border-radius: 999px; box-shadow: var(--sr-shadow); }
.pp-cycle-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pp-cycle-opt span { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 1.1rem; border-radius: 999px; font-weight: 600; color: var(--sr-muted); cursor: pointer; }
.pp-cycle-opt input:checked + span { background: var(--sr-navy); color: #fff; }
.pp-cycle-opt input:focus-visible + span { outline: 2px solid var(--sr-navy); outline-offset: 2px; }
.pp-save { font-size: 0.68rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--sr-gold); color: #fff; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; align-items: stretch; }
.pp-card { position: relative; display: flex; flex-direction: column; padding: 1.5rem 1.4rem 1.3rem; border-radius: var(--sr-radius); background: #fff; box-shadow: var(--sr-shadow); border: 1.5px solid transparent; }
.pp-card.is-featured { border-color: var(--sr-gold-600); box-shadow: var(--sr-glow); }
.pp-card.is-current { border-color: var(--sr-navy); }
.pp-badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); padding: 0.2rem 0.9rem; border-radius: 999px; background: var(--sr-gold-600); color: #fff; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.pp-name { font-size: 1.25rem; margin: 0 0 0.25rem; color: var(--sr-navy); }
.pp-desc { font-size: 0.86rem; color: var(--sr-muted); min-height: 2.5em; margin-bottom: 0.75rem; }
.pp-price-box { min-height: 5.2rem; margin-bottom: 0.75rem; }
.pp-price { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--sr-ink); line-height: 1.1; }
.pp-price span { font-size: 0.9rem; font-weight: 500; color: var(--sr-muted); margin-left: 0.15rem; }
.pp-was { font-size: 0.85rem; color: var(--sr-muted); text-decoration: line-through; }
.pp-per { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.8rem; color: var(--sr-muted); margin-top: 0.25rem; }
.pp-saving { padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--tint-mint); color: var(--sr-navy); font-weight: 600; font-size: 0.75rem; }
.pp-features { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.35rem; font-size: 0.88rem; flex: 1; }
.pp-features li { display: flex; gap: 0.5rem; align-items: baseline; }
.pp-features li::before { content: "✓"; flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.7rem; font-weight: 700; background: var(--tint-mint); color: var(--sr-navy); }
.pp-features li.is-off { color: #9AA3AE; text-decoration: line-through; }
.pp-features li.is-off::before { content: "–"; background: var(--sr-cream-2); color: #9AA3AE; }
.pp-actions { margin-top: auto; }

.co-options { display: grid; gap: 0.5rem; }
.co-option input { position: absolute; opacity: 0; pointer-events: none; }
.co-option-body { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem; align-items: center; padding: 0.8rem 1rem; border: 1.5px solid var(--sr-border); border-radius: var(--sr-radius-sm); cursor: pointer; }
.co-option-body .pp-saving { grid-column: 1; justify-self: start; }
.co-option-price { text-align: right; font-weight: 700; grid-row: span 2; }
.co-option input:checked + .co-option-body { border-color: var(--sr-navy); background: var(--tint-navy); }
.co-option input:focus-visible + .co-option-body { outline: 2px solid var(--sr-navy); outline-offset: 2px; }
.co-summary { position: sticky; top: 1rem; }

.sub-card .pp-features { margin-bottom: 0; }
.sub-renew { padding: 0.75rem; border-radius: var(--sr-radius-sm); background: var(--sr-cream); }
.sub-pending { border: 1.5px solid var(--sr-gold-600); background: #FFFBF8; }
.promo-code { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 6px; background: var(--tint-gold); color: var(--sr-gold-700); font-weight: 700; letter-spacing: 0.03em; }

.pkg-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding: 0.7rem 1.1rem; text-decoration: none; color: inherit; border: 1.5px solid transparent; }
.pkg-strip:hover { border-color: var(--sr-navy); }
.pkg-strip-name { color: var(--sr-navy); }
.pkg-strip-usage { font-size: 0.86rem; color: var(--sr-muted); }
.pkg-strip-cta { margin-left: auto; font-weight: 600; color: var(--sr-gold-700); }

.mg-locked { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: var(--sr-radius-sm); background: linear-gradient(90deg, #FFF7F1, #fff); border: 1px solid #F6D2BE; }
.mg-locked-icon { font-size: 1.4rem; }

/* Nearby places: Google star rating */
.place-rating { display: inline-flex; align-items: center; gap: 0.15rem; margin-right: 0.4rem; font-size: 0.78rem; font-weight: 700; color: #B4532A; white-space: nowrap; vertical-align: 1px; }
.place-name .place-rating small { display: inline; font-weight: 500; color: var(--sr-muted); font-size: 0.74rem; }
.place-star { color: #F5A623; font-size: 0.85rem; }
.place-price { margin-right: 0.4rem; font-size: 0.74rem; font-weight: 600; color: var(--sr-navy); white-space: nowrap; }
.place-price::after { content: "·"; margin-left: 0.4rem; color: var(--sr-muted); font-weight: 400; }

/* Language menu (TH / EN / 中文) */
.lang-switch .lang-btn { width: auto; padding: 0 0.6rem; gap: 0.3rem; display: inline-flex; align-items: center; }
.lang-switch .lang-code { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; }
.lang-switch .dropdown-item.active { background: var(--sr-primary, #0F5D4E); color: #fff; }

/* ---------- Commute / Neighborhood Score pills + verified owner ---------- */
.card-scores { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.35rem 0 0.15rem; }
.score-pill {
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.45rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 500; line-height: 1.5; white-space: nowrap; background: var(--sp-bg); color: var(--sp-fg);
}
.score-pill b { font-weight: 700; }
.score-pill svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.score-pill.is-high { --sp-bg: #DDF1E6; --sp-fg: #17663F; }
.score-pill.is-good { --sp-bg: #E8F2EE; --sp-fg: #2F6B57; }
.score-pill.is-mid { --sp-bg: #FFF2DC; --sp-fg: #8A5A12; }
.score-pill.is-low { --sp-bg: #F3EEEC; --sp-fg: #7A6A63; }
.score-pill.is-verified { --sp-bg: #E3EEFB; --sp-fg: #1F5FA8; }

/* ---------- score cards (listing page) ---------- */
.score-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.score-card { border: 1px solid var(--sr-line, #E6ECE9); border-radius: 16px; padding: 0.9rem 1rem; background: #fff; }
.score-head { display: flex; align-items: center; gap: 0.85rem; }
.score-ring {
  --c: #2F6B57; width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: radial-gradient(closest-side, #fff 76%, transparent 78% 100%), conic-gradient(var(--c) calc(var(--v) * 1%), #ECF1EF 0);
}
.score-ring b { font-size: 1.25rem; color: var(--c); }
.score-card.is-high .score-ring { --c: #17663F; }
.score-card.is-mid .score-ring { --c: #C27A12; }
.score-card.is-low .score-ring { --c: #9A8A82; }
.score-title { font-weight: 600; color: var(--sr-navy); }
.score-level { font-size: 0.85rem; font-weight: 600; color: #17663F; }
.score-card.is-mid .score-level { color: #C27A12; }
.score-card.is-low .score-level { color: #9A8A82; }
.score-details { margin-top: 0.6rem; }
.score-details summary { font-size: 0.82rem; color: var(--sr-muted); cursor: pointer; }
.score-parts { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.45rem; }
.score-parts li { display: grid; grid-template-columns: 1fr 70px 42px; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.score-parts b { display: block; font-weight: 600; }
.score-parts small { color: var(--sr-muted); }
.score-bar { height: 6px; border-radius: 3px; background: #ECF1EF; overflow: hidden; }
.score-bar i { display: block; height: 100%; background: #2F6B57; border-radius: 3px; }
.score-pts { text-align: right; color: var(--sr-muted); font-variant-numeric: tabular-nums; }

/* ---------- trust card (listing page) ---------- */
.trust-card { border: 1px solid var(--sr-line, #E6ECE9); border-radius: 16px; padding: 1rem; background: #fff; }
.trust-card .score-ring { --c: #1F5FA8; }
.trust-card.is-mid .score-ring { --c: #C27A12; }
.trust-level { font-size: 0.85rem; font-weight: 600; color: #1F5FA8; }
.trust-card.is-mid .trust-level { color: #C27A12; }
.trust-checks { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; gap: 0.35rem; font-size: 0.82rem; }
.trust-checks li { display: flex; align-items: baseline; gap: 0.45rem; }
.trust-dot { width: 1.1rem; height: 1.1rem; flex-shrink: 0; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.7rem; font-weight: 700; }
.trust-checks .is-pass .trust-dot { background: #DDF1E6; color: #17663F; }
.trust-checks .is-part .trust-dot { background: #FFF2DC; color: #8A5A12; }
.trust-checks .is-miss .trust-dot { background: #F3EEEC; color: #9A8A82; }
.trust-checks .is-miss span.flex-grow-1 { color: var(--sr-muted); }

/* ---------- ทำเลไหนเหมาะกับคุณ (FindArea) ---------- */
.findarea-hero { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 1rem; }
.findarea-mascot { width: 84px; height: auto; flex-shrink: 0; }
.findarea-intro { background: var(--tint-mint); border-radius: 14px; padding: 0.8rem 1rem; color: var(--sr-navy); }
.findarea-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.findarea-card { border: 1px solid var(--sr-line, #E6ECE9); border-radius: 18px; padding: 1rem 1.1rem; background: #fff; display: flex; flex-direction: column; }
.findarea-rank { width: 34px; height: 34px; border-radius: 50%; background: var(--sr-navy); color: #fff; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.findarea-ring { width: 56px; height: 56px; }
.findarea-ring.is-high { --c: #17663F; }
.findarea-ring.is-mid { --c: #C27A12; }
.findarea-ring.is-low { --c: #9A8A82; }
.findarea-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0.5rem; margin: 0.9rem 0 0.4rem; }
.findarea-facts b { display: block; color: var(--sr-navy); }
.findarea-facts small { color: var(--sr-muted); font-size: 0.75rem; }
.findarea-advice { font-size: 0.9rem; margin: 0.6rem 0 0; color: var(--sr-ink, #23302B); }
.findarea-card .btn { align-self: flex-start; margin-top: auto !important; }
@media (max-width: 575.98px) { .findarea-mascot { width: 64px; } .findarea-results { grid-template-columns: 1fr; } }

/* ---------- FindArea form: roomy steps ---------- */
.findarea-form { padding: 1.75rem 2rem; }
.findarea-step { margin: 0; padding: 0 0 1.5rem; border: 0; }
.findarea-step + .findarea-step { padding-top: 1.5rem; border-top: 1px dashed var(--sr-border); }
.findarea-step legend { float: none; width: auto; display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 600; color: var(--sr-navy); margin-bottom: 1rem; }
.findarea-step-no { width: 28px; height: 28px; border-radius: 50%; background: var(--sr-sage); color: var(--sr-navy); display: inline-grid; place-items: center; font-size: 0.85rem; font-weight: 700; }
.findarea-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.25rem; border-top: 1px solid var(--sr-border); }
@media (max-width: 575.98px) {
  .findarea-form { padding: 1.25rem 1.1rem; }
  .findarea-actions .btn { width: 100%; }
}

/* ---------- Verification documents (back office) ---------- */
.vdoc-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.45rem; color: var(--sr-ink); }
.vdoc-frame { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.3rem; height: 220px; border-radius: var(--sr-radius-sm); background: var(--sr-cream-2); border: 1px solid var(--sr-border); overflow: hidden; text-decoration: none; color: var(--sr-muted); }
.vdoc-frame img { width: 100%; height: 100%; object-fit: contain; }
.vdoc-frame.is-file { font-weight: 600; color: var(--sr-navy); }
.vdoc-frame.is-file span:first-child, .vdoc-frame.is-purged span:first-child { font-size: 1.8rem; }
.vdoc-frame.is-purged { border-style: dashed; background: var(--sr-gray); font-size: 0.85rem; text-align: center; padding: 0 1rem; }
.vdoc-meta { font-size: 0.78rem; color: var(--sr-muted); margin-top: 0.4rem; }
.vdoc-facts dt { color: var(--sr-muted); font-weight: 500; font-size: 0.78rem; }
.vdoc-facts dd { margin-bottom: 0.85rem; }
.vdoc-facts dd:last-child { margin-bottom: 0; }

/* =====================================================================
   Legal pages, consent and cookie banner (PDPA)
   ===================================================================== */
.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 991.98px) { .legal-layout { grid-template-columns: minmax(0, 1fr); } }
.legal-side-card { position: sticky; top: 90px; }
.legal-side-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sr-muted); margin-bottom: 0.4rem; }
.legal-docs, .legal-toc { display: flex; flex-direction: column; gap: 0.1rem; }
.legal-docs a, .legal-toc a { padding: 0.4rem 0.6rem; border-radius: 10px; color: var(--sr-ink); text-decoration: none; font-size: 0.9rem; line-height: 1.35; }
.legal-docs a:hover, .legal-toc a:hover { background: var(--sr-cream-2); }
.legal-docs a.is-active { background: var(--sr-sage); color: var(--sr-navy); font-weight: 600; }
.legal-toc a { font-size: 0.82rem; color: var(--sr-muted); }
.legal-doc { padding: 2rem 2.5rem; }
@media (max-width: 575.98px) { .legal-doc { padding: 1.25rem 1.1rem; } }
.legal-title { font-size: 1.75rem; margin: 0.4rem 0 0.5rem; color: var(--sr-navy); }
.legal-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.82rem; color: var(--sr-muted); padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--sr-border); }
.legal-toc-mobile { background: var(--sr-cream-2); border-radius: var(--sr-radius-sm); padding: 0.6rem 0.9rem; margin-bottom: 1.25rem; }
.legal-toc-mobile summary { font-weight: 600; cursor: pointer; }
.legal-body { line-height: 1.75; font-size: 0.97rem; }
.legal-body h2 { font-size: 1.2rem; color: var(--sr-navy); margin: 2rem 0 0.75rem; scroll-margin-top: 90px; }
.legal-body h3 { font-size: 1.02rem; margin: 1.4rem 0 0.5rem; }
.legal-body p, .legal-body ul, .legal-body ol { margin-bottom: 0.85rem; }
.legal-body li { margin-bottom: 0.3rem; }
.legal-body blockquote { background: var(--tint-gold); border-left: 4px solid var(--sr-gold); border-radius: 0 12px 12px 0; padding: 0.75rem 1rem; margin: 0 0 1.25rem; }
.legal-body blockquote p:last-child { margin-bottom: 0; }
.legal-table { font-size: 0.88rem; margin-bottom: 1.25rem; }
.legal-table th { background: var(--sr-cream-2); white-space: nowrap; }
.legal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.legal-card { display: flex; gap: 1rem; padding: 1.25rem 1.35rem; text-decoration: none; color: var(--sr-ink); transition: transform .15s ease, box-shadow .15s ease; }
.legal-card:hover { transform: translateY(-2px); box-shadow: var(--sr-shadow-lg); color: var(--sr-ink); }
.legal-card-icon { width: 44px; height: 44px; border-radius: 14px; background: var(--sr-sage); display: grid; place-items: center; flex-shrink: 0; }
.legal-card-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--sr-navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.legal-card-title { display: block; font-weight: 600; color: var(--sr-navy); }
.legal-card-hint { display: block; font-size: 0.85rem; color: var(--sr-muted); margin: 0.2rem 0 0.4rem; }
.legal-card-meta { display: block; font-size: 0.75rem; color: var(--sr-muted); }
.legal-editor { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.85rem; line-height: 1.55; }
.legal-save { border-top: 1px solid var(--sr-border); padding-top: 1.25rem; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 1rem; font-size: 0.8rem; }
.footer-legal .btn-link { color: rgba(255, 255, 255, 0.88); font-size: 0.8rem; text-decoration: none; }
.legal-mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.9rem; padding: 1.25rem 0 0.5rem; font-size: 0.78rem; }
.legal-mini a, .legal-mini .btn-link { color: var(--sr-muted); text-decoration: none; font-size: 0.78rem; }

/* consent prompt & sign-up */
.consent-card { text-align: left; }
.consent-mascot { display: block; width: 76px; margin: 0 auto 0.75rem; }
.consent-docs { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.6rem; }
.consent-docs li { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 1rem; border: 1px solid var(--sr-border); border-radius: var(--sr-radius-sm); }
.consent-doc-icon { font-size: 1.3rem; }
.consent-box { background: var(--sr-cream-2); border-radius: var(--sr-radius-sm); padding: 0.85rem 1rem; }

/* member privacy page */
.privacy-toggle { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.privacy-kinds { display: grid; gap: 0.5rem; }
.privacy-kind { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.7rem 0.9rem; border: 1px solid var(--sr-border); border-radius: var(--sr-radius-sm); cursor: pointer; }
.privacy-kind:has(input:checked) { border-color: var(--sr-navy); background: var(--sr-sage); }
.privacy-kind.is-busy { opacity: 0.6; cursor: not-allowed; }
.privacy-kind .form-check-input { margin-top: 0.3rem; flex-shrink: 0; }
.privacy-list { list-style: none; padding: 0; margin: 0; }
.privacy-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--sr-border); }
.privacy-list li:last-child { border-bottom: 0; padding-bottom: 0; }

/* cookie banner */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1045; max-width: 980px; margin: 0 auto; background: #fff; border-radius: var(--sr-radius); box-shadow: 0 18px 50px -12px rgba(15, 93, 78, 0.35); border: 1px solid var(--sr-border); padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cookie-banner[hidden] { display: none; }
.cookie-banner-text { display: flex; gap: 0.85rem; align-items: center; flex: 1 1 420px; font-size: 0.88rem; }
.cookie-banner-mascot { width: 52px; height: auto; flex-shrink: 0; }
.cookie-banner-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; flex: 0 0 auto; }
.cookie-option { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--sr-border); }
.cookie-option:last-child { border-bottom: 0; }
.cookie-option p { grid-column: 1 / -1; }
@media (max-width: 991.98px) {
  .cookie-banner { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px); padding: 0.9rem 1rem; }
  .cookie-banner-mascot { width: 40px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .btn-primary, .cookie-banner-actions .btn-outline-primary { flex: 1 1 0; }
}
@media print {
  .legal-side, .legal-mini, .cookie-banner, .legal-toc-mobile { display: none !important; }
  .legal-layout { display: block; }
  .legal-doc { padding: 0; }
}

/* Bus lines passing the home ("รอบบ้านมีอะไรบ้าง" → รถเมล์) */
.bus-lines { margin-top: 0.75rem; padding: 0.9rem 1rem; border-radius: var(--sr-radius-sm); background: var(--sr-cream-2); }
.bus-lines-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.6rem; color: var(--sr-navy); }
.bus-lines-title span { font-weight: 400; color: var(--sr-muted); font-size: 0.82rem; margin-left: 0.25rem; }
.bus-line-list { list-style: none; padding: 0; margin: 0 0 0.25rem; display: grid; gap: 0.5rem; }
.bus-line-list li { display: flex; align-items: flex-start; gap: 0.65rem; }
.bus-chip { min-width: 52px; padding: 0.2rem 0.5rem; border-radius: 8px; background: #C0392B; color: #fff; font-weight: 700; font-size: 0.85rem; text-align: center; flex-shrink: 0; letter-spacing: 0.01em; }
.bus-chip.is-express { background: #1F4E8C; }
.bus-line-route { font-size: 0.86rem; line-height: 1.35; min-width: 0; }
.bus-line-route small { display: block; color: var(--sr-muted); font-size: 0.75rem; margin-top: 0.1rem; }

/* =====================================================================
   Areas (district profiles) and the price check
   ===================================================================== */
.areas-hero, .area-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.25rem 0 1rem; }
.areas-search { display: grid; grid-template-columns: 1fr 220px auto; gap: 0.6rem; padding: 1rem 1.25rem; }
@media (max-width: 575.98px) { .areas-search { grid-template-columns: 1fr; } }
.areas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.area-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.25rem; color: var(--sr-ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.area-card:hover { transform: translateY(-2px); box-shadow: var(--sr-shadow-lg); color: var(--sr-ink); }
.area-card-name { font-weight: 700; font-size: 1.05rem; color: var(--sr-navy); }
.area-card-rent b { font-size: 1.35rem; color: var(--sr-navy); }
.area-card-rent small { color: var(--sr-muted); margin-left: 0.35rem; font-size: 0.78rem; }
.area-card-rent.is-thin b { font-size: 1rem; color: var(--sr-muted); }
.area-card-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; font-size: 0.8rem; color: var(--sr-muted); align-items: center; }
.trend-badge { font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--sr-cream-2); color: var(--sr-muted); white-space: nowrap; }
.trend-badge.is-up { background: #FDECEA; color: #B3261E; }
.trend-badge.is-down { background: #E3F4EA; color: #17663F; }
.area-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; margin-bottom: 1rem; }
@media (max-width: 991.98px) { .area-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.area-kpi { padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: 0.15rem; }
.area-kpi small { color: var(--sr-muted); font-size: 0.78rem; }
.area-kpi b { font-size: 1.35rem; color: var(--sr-navy); }
.area-kpi span { font-size: 0.75rem; color: var(--sr-muted); }
.trend-chart { width: 100%; height: auto; overflow: visible; }
.trend-chart .grid { stroke: var(--sr-border); stroke-width: 1; }
.trend-chart .axis { font-size: 11px; fill: var(--sr-muted); }
.trend-chart .line { fill: none; stroke: var(--sr-navy); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.trend-chart .dot { fill: #fff; stroke: var(--sr-gold-600); stroke-width: 2.5; }
.area-table th { font-size: 0.8rem; color: var(--sr-muted); font-weight: 500; }
.area-scores { display: flex; gap: 1.5rem; }
.area-scores > div { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--sr-muted); }
.area-subs { list-style: none; padding: 0; margin: 0; }
.area-subs li { display: grid; grid-template-columns: 1fr auto auto; gap: 0.75rem; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid var(--sr-border); font-size: 0.88rem; }
.area-subs li:last-child { border-bottom: 0; }

.price-check { padding: 1.1rem 1.25rem; }
.pc-badge { display: inline-block; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.9rem; }
.pc-badge.is-low { background: #E3F4EA; color: #17663F; }
.pc-badge.is-fair { background: var(--sr-sage); color: var(--sr-navy); }
.pc-badge.is-high { background: #FDECEA; color: #B3261E; }
.pc-text { margin: 0.5rem 0 0.75rem; font-size: 0.9rem; }
.pc-bar { position: relative; height: 10px; border-radius: 999px; background: var(--sr-cream-2); margin: 0.75rem 0 0.35rem; }
.pc-range { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--sr-success); }
.pc-mark { position: absolute; top: -5px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--sr-gold-600); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.pc-scale { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--sr-muted); margin-bottom: 0.6rem; }
.pc-note { font-size: 0.75rem; color: var(--sr-muted); }
.pc-samples { margin-top: 0.6rem; font-size: 0.85rem; }
.pc-samples summary { cursor: pointer; font-weight: 600; color: var(--sr-navy); }
.pc-samples ul { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.pc-samples li { padding: 0.35rem 0; border-bottom: 1px dashed var(--sr-border); }
.pc-samples li a { display: flex; gap: 0.5rem; justify-content: space-between; text-decoration: none; color: var(--sr-ink); min-width: 0; }
.pc-samples li small { color: var(--sr-muted); font-size: 0.72rem; }
.findarea-card .findarea-actions-row { margin-top: auto !important; padding-top: 0.5rem; }
.findarea-card .findarea-actions-row .btn { margin-top: 0 !important; align-self: auto; }

/* =====================================================================
   3D tour and floor plans
   ===================================================================== */
.tour-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--sr-radius-sm); overflow: hidden; background: linear-gradient(135deg, var(--sr-navy), var(--sr-navy-900)); }
.tour-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour-start { position: absolute; inset: 0; width: 100%; border: 0; background: none; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; cursor: pointer; }
.tour-start b { font-size: 1.15rem; }
.tour-start small { opacity: 0.85; }
.tour-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; transition: transform .15s ease; }
.tour-start:hover .tour-icon { transform: scale(1.08); }
.tour-icon svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
/* Floor plans: shown full width so the room names stay readable; small thumbnails switch between plans. */
.fp-main { position: relative; display: block; width: 100%; padding: 0.5rem; border: 1px solid var(--sr-border); border-radius: var(--sr-radius-sm); background: #fff; cursor: zoom-in; }
.fp-main img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; }
.fp-zoom { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.65rem; border-radius: 999px; background: rgba(15, 93, 78, 0.9); color: #fff; font-size: 0.78rem; font-weight: 600; }
.fp-zoom svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fp-thumbs { display: flex; gap: 0.5rem; margin-top: 0.6rem; overflow-x: auto; }
.fp-thumb { flex: 0 0 120px; border: 2px solid var(--sr-border); border-radius: 10px; background: #fff; padding: 0.25rem; aspect-ratio: 16 / 9; }
.fp-thumb.is-active { border-color: var(--sr-navy); }
.fp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.plan-viewer { overflow: auto; max-height: calc(100vh - 160px); background: #fff; cursor: zoom-in; text-align: center; -webkit-overflow-scrolling: touch; }
.plan-viewer img { width: 100%; height: auto; }
.plan-viewer.is-zoomed { cursor: zoom-out; text-align: left; }
.plan-viewer.is-zoomed img { width: auto; max-width: none; }
@media (max-width: 991.98px) { .plan-viewer { max-height: calc(100vh - 120px); } }
.media-badges { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 4px; z-index: 2; }
.media-badges span { background: rgba(15, 93, 78, 0.9); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 0.12rem 0.45rem; border-radius: 6px; letter-spacing: 0.02em; }
/* listing form */
.fp-grid { list-style: none; padding: 0; margin: 0 0 0.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.5rem; }
.fp-grid:empty { display: none; }
.fp-tile { position: relative; border: 1px solid var(--sr-border); border-radius: 12px; background: #fff; aspect-ratio: 4 / 3; padding: 0.3rem; }
.fp-tile img { width: 100%; height: 100%; object-fit: contain; }
.fp-actions { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; }
.fp-actions .btn { padding: 0 0.4rem; line-height: 1.5; font-size: 0.75rem; }

/* "แนะนำสำหรับคุณ" */
.foryou-head { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 1.25rem; }
.foryou-mascot { width: 76px; height: auto; flex-shrink: 0; }
.foryou-reason { font-size: 0.78rem; color: var(--sr-gold-700); background: var(--tint-gold); border-radius: 10px 10px 0 0; padding: 0.3rem 0.7rem; margin-bottom: -6px; position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) { .foryou-mascot { width: 56px; } }

/* Clip form: pin a listing */
.clip-pin-chosen { min-width: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.8rem; border: 1px solid var(--sr-border); border-radius: 12px; background: var(--sr-sage); }
.clip-pin-chosen span { flex: 1; min-width: 0; font-weight: 600; color: var(--sr-navy); }
.clip-pin-results { list-style: none; padding: 0; margin: 0.35rem 0 0; max-height: 240px; overflow-y: auto; border-radius: 12px; }
.clip-pin-results:empty { display: none; }
.clip-pin-results button { display: flex; flex-direction: column; width: 100%; text-align: left; border: 0; background: #fff; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--sr-border); min-width: 0; }
.clip-pin-results button:hover { background: var(--sr-cream-2); }
.clip-pin-results small { color: var(--sr-muted); }
.clip-pin-empty { font-size: 0.85rem; color: var(--sr-muted); background: var(--sr-cream-2); border-radius: 12px; padding: 0.6rem 0.8rem; }

/* ---------- voice / video calls (js/calls.js) ---------- */
.chat-call { display: flex; gap: 0.35rem; flex-shrink: 0; }
.chat-call .icon-btn svg { stroke: var(--sr-navy); }
.call-card { display: flex; align-items: center; gap: 0.75rem; }
.call-card b { display: block; color: var(--sr-navy); font-weight: 600; }
.call-card small { display: block; color: var(--sr-muted, #6B7C76); }
.call-card-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: #EEF3F1; }
.call-card-icon svg { width: 20px; height: 20px; fill: none; stroke: #6B7C76; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.call-card.is-ok .call-card-icon { background: #E0F5EA; }
.call-card.is-ok .call-card-icon svg { stroke: #1B8A5A; }
.call-card.is-missed .call-card-icon { background: #FDE8E6; }
.call-card.is-missed .call-card-icon svg { stroke: #C0392B; }
.call-card.is-missed b { color: #C0392B; }

body.call-open { overflow: hidden; }
.call-ui {
  position: fixed; inset: 0; z-index: 2000; color: #fff; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #1E6B5A 0%, #0B3D33 60%, #072A23 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: max(2.5rem, env(safe-area-inset-top)) 1rem max(1.75rem, env(safe-area-inset-bottom));
}
.call-ui[hidden] { display: none; }
.call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; display: none; }
.call-ui.is-video.has-remote-video .call-remote { display: block; }
.call-audio { display: none; }
.call-who { position: relative; text-align: center; margin-top: 6vh; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.call-ui.has-remote-video .call-who { margin-top: 0; }
.call-ui.has-remote-video .call-avatar { display: none; }
.call-avatar {
  width: 112px; height: 112px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 2.75rem; font-weight: 700; background: rgba(255, 255, 255, .14); border: 2px solid rgba(255, 255, 255, .35);
}
.call-ui[data-state="incoming"] .call-avatar, .call-ui[data-state="calling"] .call-avatar { animation: call-pulse 1.6s ease-out infinite; }
@keyframes call-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); }
  100% { box-shadow: 0 0 0 28px rgba(255, 255, 255, 0); }
}
.call-name { font-size: 1.5rem; font-weight: 700; }
.call-kind { opacity: .8; font-size: 0.9rem; margin-top: 0.15rem; }
.call-status { margin-top: 0.6rem; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.call-local {
  position: absolute; right: 1rem; top: max(1rem, env(safe-area-inset-top)); width: 112px; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 14px; background: #000; border: 2px solid rgba(255, 255, 255, .5); transform: scaleX(-1); display: none;
}
.call-local.is-back { transform: none; }
.call-ui.is-video .call-local { display: block; }
.call-ui.cam-off .call-local { opacity: .25; }
@media (min-width: 768px) { .call-local { width: 180px; } }
.call-controls { position: relative; display: flex; gap: 1.1rem; justify-content: center; flex-wrap: wrap; }
.call-controls[hidden] { display: none; }
.call-btn { border: 0; background: none; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font-size: 0.8rem; min-width: 64px; }
.call-btn svg {
  width: 60px; height: 60px; padding: 17px; border-radius: 50%; background: rgba(255, 255, 255, .18); backdrop-filter: blur(6px);
  fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.call-btn[aria-pressed="true"] svg { background: #fff; stroke: #0B3D33; }
.call-btn.is-end svg { background: #E5484D; fill: #fff; stroke: none; }
.call-btn.is-accept svg { background: #2EB872; fill: #fff; stroke: none; animation: call-shake 1.2s ease-in-out infinite; }
.call-btn:focus-visible { outline: none; }
.call-btn:focus-visible svg { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes call-shake { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-12deg); } 80% { transform: rotate(12deg); } 90% { transform: rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .call-avatar, .call-btn.is-accept svg { animation: none !important; } }
.dock-btn.is-icon { padding: 0.5rem; flex-shrink: 0; }
.dock-btn.is-icon svg { width: 19px; height: 19px; }
.call-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; white-space: nowrap; padding-left: 0.5rem; padding-right: 0.5rem; min-width: 0; }
.call-cta svg { flex-shrink: 0; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Area finder: places over the travel-time limit are listed apart, never ranked with the matches */
.findarea-over-head { grid-column: 1 / -1; margin: 1rem 0 .2rem; color: var(--sr-ink, #1b2a26); }
.findarea-card.is-over { opacity: .88; border-style: dashed; }
.findarea-card.is-over .findarea-rank { background: #eef0ef; color: #6b7a76; }

/* "คอนโด สาทร": in the district / around it / travel time to it */
.scope-choice { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .45rem 0 .2rem; font-size: .85rem; }
.scope-choice .scope-label { color: var(--sr-muted, #5d6b67); margin-right: .15rem; }
.scope-btn { border: 1px solid var(--sr-line, #E6ECE9); background: #fff; color: var(--sr-primary, #0F5D4E); border-radius: 999px; padding: .28rem .8rem; font-weight: 500; line-height: 1.3; }
.scope-btn:hover { border-color: var(--sr-primary, #0F5D4E); }
.scope-btn.is-on { background: var(--sr-primary, #0F5D4E); border-color: var(--sr-primary, #0F5D4E); color: #fff; }

/* Listing page: two main actions (ask / come and see), the rest folded under "ตัวเลือกอื่น" */
.contact-main .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding-top: .7rem; padding-bottom: .7rem; font-weight: 600; }
.contact-main .btn svg, .more-actions .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.more-actions { margin-top: .6rem; border: 1px solid var(--sr-line, #E6ECE9); border-radius: 14px; background: #fff; }
.more-actions > summary { cursor: pointer; padding: .55rem .8rem; font-weight: 600; font-size: .9rem; color: var(--sr-primary, #0F5D4E); list-style: none; display: flex; align-items: center; gap: .3rem; }
.more-actions > summary::-webkit-details-marker { display: none; }
.more-actions > summary::after { content: "▾"; margin-left: auto; transition: transform .15s; }
.more-actions[open] > summary::after { transform: rotate(180deg); }
.more-actions > summary span { font-weight: 400; color: var(--sr-muted, #5d6b67); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-actions-body { display: grid; gap: .5rem; padding: 0 .8rem .8rem; }
.more-actions-body .reserve-box { margin: 0; }
.more-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.more-actions > summary { white-space: nowrap; }
.more-actions > summary span { min-width: 0; flex: 1; }

/* Trust panel: confirmed facts first, the score only on request */
.trust-facts { list-style: none; padding: 0; margin: .3rem 0 .4rem; display: grid; gap: .35rem; font-size: .9rem; }
.trust-facts li { display: flex; gap: .5rem; align-items: flex-start; }
.trust-facts li.is-pass { color: var(--sr-ink, #1b2a26); }
.trust-facts li.is-miss { color: var(--sr-muted, #5d6b67); }
.trust-facts .trust-dot { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; margin-top: .1rem; }
.trust-facts .is-pass .trust-dot { background: #E3F4EC; color: #0F5D4E; }
.trust-facts .is-miss .trust-dot { background: #F1F3F2; color: #8a9692; }
.trust-detail { margin-top: .4rem; border-top: 1px dashed var(--sr-line, #E6ECE9); padding-top: .45rem; }
.trust-detail > summary { cursor: pointer; font-size: .85rem; color: var(--sr-primary, #0F5D4E); }
.trust-detail .trust-checks { margin-top: .4rem; }

/* Back office: reported listings */
.report-row.is-scam { border-left: 4px solid #C0392B; }
.report-detail { background: #F7F9F8; border-radius: 10px; padding: .45rem .7rem; font-size: .88rem; white-space: pre-line; }
.report-resolve { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.report-resolve .form-control { flex: 1 1 260px; }
/* Listing page: report link + sheet */
.report-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--sr-muted, #5d6b67); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.report-link:hover { color: #C0392B; }
.report-reasons { display: grid; gap: .4rem; }
.report-reasons label { display: flex; gap: .55rem; align-items: center; border: 1px solid var(--sr-line, #E6ECE9); border-radius: 12px; padding: .55rem .75rem; cursor: pointer; }
.report-reasons input:checked + span { font-weight: 600; color: var(--sr-primary, #0F5D4E); }

/* Nothing found: the nearest searches that do find homes */
.close-matches { margin-top: .9rem; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.close-match { border: 1px solid var(--sr-line, #E6ECE9); background: #fff; border-radius: 999px; padding: .4rem .95rem; font-size: .88rem; color: var(--sr-primary, #0F5D4E); }
.close-match:hover { border-color: var(--sr-primary, #0F5D4E); background: #F2F8F6; }
.close-match b { font-weight: 600; color: var(--sr-coral, #F2795F); }

/* Listing page: rental terms, with what the owner has not said spelled out */
.terms-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .1rem 1.5rem; margin: 0; }
.terms-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--sr-line, #E6ECE9); }
.terms-list dt { font-weight: 500; color: var(--sr-muted, #5d6b67); }
.terms-list dd { margin: 0; text-align: right; font-weight: 600; }
.terms-list .is-unknown dd { color: #A0AAA6; font-weight: 400; font-style: italic; }
.terms-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .8rem; background: #F7F9F8; border-radius: 12px; padding: .55rem .8rem; }

/* Bulk import */
.step-num { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--sr-primary, #0F5D4E); color: #fff; font-size: .8rem; margin-right: .3rem; }
.import-cols { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .35rem; font-size: .9rem; }
.import-table tr.is-error { background: #FFF6F5; }
.import-table tr.is-dup { background: #F4F8FF; }
.import-table td { vertical-align: top; }

/* Lead board: one column per stage (rows on phones) */
.lead-board { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: .9rem; align-items: start; overflow-x: auto; padding-bottom: .4rem; }
.lead-col { background: #F4F7F6; border-radius: 16px; padding: .6rem; min-height: 120px; }
.lead-col-head { display: flex; justify-content: space-between; align-items: center; font-size: .92rem; font-weight: 700; margin: .1rem .2rem .6rem; color: var(--sr-primary, #0F5D4E); }
.lead-card { background: #fff; border: 1px solid var(--sr-line, #E6ECE9); border-radius: 14px; padding: .7rem; margin-bottom: .55rem; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.lead-card.is-due { border-color: #F2A65A; box-shadow: 0 0 0 2px #FDE7CF; }
.lead-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.lead-avatar.is-letter { display: grid; place-items: center; background: #E3F1EC; color: var(--sr-primary, #0F5D4E); font-weight: 700; }
.lead-note { background: #FFFBEA; border-radius: 8px; padding: .3rem .5rem; font-size: .82rem; margin-top: .35rem; white-space: pre-line; }
.lead-links { display: flex; flex-wrap: wrap; gap: .25rem .7rem; font-size: .82rem; margin-top: .45rem; }
.lead-edit { margin-top: .4rem; font-size: .82rem; }
.lead-edit > summary { cursor: pointer; color: var(--sr-muted, #5d6b67); }
.lead-lost { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
@media (max-width: 991.98px) { .lead-board { grid-template-columns: 1fr; overflow: visible; } }

/* Commute steps: walk → line → change → walk */
.commute-legs { list-style: none; padding: 0; margin: .4rem 0 .15rem; display: grid; gap: .15rem; font-size: .82rem; }
.commute-legs .leg { display: flex; gap: .35rem; align-items: baseline; }
.commute-legs .leg.is-walk { color: var(--sr-muted, #5d6b67); }

/* Price card actions: the grid column must never grow past the card (the nowrap "ตัวเลือกอื่น" line used to widen it
   and push the buttons off the right edge). Long button text wraps or shrinks instead. */
.contact-actions { grid-template-columns: minmax(0, 1fr); }
.contact-actions > *, .more-actions, .more-actions-body > * { min-width: 0; max-width: 100%; }
.contact-main .btn { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more-actions-body .d-flex > .btn { min-width: 0; }
.more-actions .btn { white-space: normal; }
.reserve-box .d-flex { flex-wrap: wrap; }

/* Web Push: one-time invitation (push.js) and the panel on the notification settings page */
.push-ask { position: fixed; top: 76px; right: 16px; z-index: 1040; width: min(420px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius); box-shadow: 0 18px 50px -12px rgba(15, 93, 78, .35); padding: .85rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.push-ask[hidden], .push-panel[hidden], [data-push-state][hidden] { display: none; }
.push-ask-icon { font-size: 1.4rem; line-height: 1; }
.push-ask-text { flex: 1 1 220px; font-size: .88rem; color: var(--sr-ink, #1C2533); }
.push-ask-actions { display: flex; gap: .25rem; margin-left: auto; }
@media (max-width: 575.98px) {
  .push-ask { top: auto; bottom: 88px; right: 16px; left: 16px; width: auto; }
}

/* ---------- keeping listings up to date (rented elsewhere, never updated) ---------- */
.host-stars { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: .22rem .7rem; background: #FFF6DA; color: #7A5B00; }
.host-stars svg { width: 14px; height: 14px; fill: #F5B301; stroke: #C98F00; stroke-width: 1.2; }
.rented-banner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin: .25rem 0 .75rem; padding: .7rem .9rem; border-radius: 14px; background: #F1F4F3; color: var(--sr-ink); box-shadow: inset 0 0 0 1px var(--sr-border); }
.notify-btn .when-on { display: none; }
.notify-btn[aria-pressed="true"] { background: var(--tint-mint); border-color: var(--tint-mint); color: var(--sr-navy); }
.notify-btn[aria-pressed="true"] .when-on { display: inline; }
.notify-btn[aria-pressed="true"] .when-off { display: none; }
.owner-close { margin-top: .75rem; padding: .8rem .9rem; border-radius: 14px; background: var(--sr-cream); box-shadow: inset 0 0 0 1px var(--sr-border); }
.close-fields { min-width: 0; }
.close-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .2rem .75rem; }
.close-channels .form-check { margin: 0; }
.close-fields input[type="date"], .close-fields .dp { max-width: 260px; }
.quick-page { max-width: 520px; }
.quick-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; }
.bulk-status { padding: .75rem 1rem; }
.bulk-status summary { cursor: pointer; }
.bulk-list { max-height: 320px; overflow: auto; }
.bulk-list li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .35rem 0; border-bottom: 1px solid var(--sr-border); }
.bulk-list li .form-check-label { overflow-wrap: anywhere; }
.benefit-list { padding-left: 1.1rem; }
.benefit-list li { margin-bottom: .2rem; }

/* ---------- booking protection ---------- */
.resv-issue { padding: .8rem .9rem; border-radius: 14px; background: #FFF6EF; box-shadow: inset 0 0 0 1px #FFD9C2; }
.resv-issue-answer { padding: .55rem .7rem; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--sr-border); }
.deposit-shield { display: inline-flex; align-items: center; gap: .35rem; color: var(--sr-navy); margin-bottom: .25rem; }
.deposit-shield svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.deposit-shield-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; color: var(--sr-navy); background: var(--tint-mint); border-radius: 999px; padding: .18rem .6rem; }
.deposit-shield-pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- deals kept in SOREALTH ---------- */
.chat-risk { display: flex; align-items: flex-start; gap: .35rem; max-width: 85%; margin-top: .25rem; padding: .4rem .6rem; border-radius: 10px; font-size: .78rem; line-height: 1.35; background: #FFF4E5; color: #7A4A12; box-shadow: inset 0 0 0 1px #FFD9A8; }
.chat-msg.mine .chat-risk { margin-left: auto; background: #F1F4F3; color: var(--sr-muted); box-shadow: inset 0 0 0 1px var(--sr-border); }
.chat-risk svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: .1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-phone.is-locked { cursor: default; font-size: .8rem; font-weight: 500; color: var(--sr-muted); background: var(--sr-cream); }
.contact-phone.is-locked svg { stroke: currentColor; }
.why-sorealth { padding: .65rem .8rem; border-radius: 14px; background: var(--tint-mint); color: var(--sr-ink); font-size: .85rem; }
.why-sorealth summary { cursor: pointer; font-weight: 600; color: var(--sr-navy); display: flex; align-items: center; gap: .35rem; }
.why-sorealth summary svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.why-sorealth ul { margin: .5rem 0 .4rem; padding-left: 1.1rem; }
.why-sorealth li { margin-bottom: .2rem; }

/* ---------- agent agreements ---------- */
.agent-confirmed { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; color: var(--sr-navy); background: var(--tint-mint); border-radius: 999px; padding: .2rem .65rem; }
.agent-confirmed svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Add-on services (ถ่ายรูป / จัดฉาก / ทำความสะอาด) ---------- */
.svc-cats { display: flex; flex-wrap: wrap; gap: .5rem; }
.svc-cat { padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--sr-border, #dfe7e3); background: #fff; color: inherit; text-decoration: none; font-size: .9rem; }
.svc-cat small { color: var(--sr-muted, #6b7a75); }
.svc-cat.is-active { background: var(--sr-primary, #0F5D4E); border-color: var(--sr-primary, #0F5D4E); color: #fff; }
.svc-cat.is-active small { color: rgba(255,255,255,.75); }
.svc-packages { display: grid; gap: .6rem; border: 0; padding: 0; margin: 0; }
.svc-package { display: flex; align-items: flex-start; padding: .85rem 1rem; border: 1px solid var(--sr-border, #dfe7e3); border-radius: 14px; background: #fff; }
.svc-package.is-pickable { cursor: pointer; }
.svc-package.is-pickable:has(input:checked) { border-color: var(--sr-primary, #0F5D4E); box-shadow: 0 0 0 2px rgba(15,93,78,.12); }
.svc-portfolio { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.svc-work-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.svc-work-pair figure { margin: 0; position: relative; }
.svc-work-pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.svc-work-pair figcaption { position: absolute; left: .4rem; top: .4rem; background: rgba(0,0,0,.55); color: #fff; font-size: .7rem; padding: .05rem .45rem; border-radius: 999px; }
.svc-thumbs { display: flex; gap: .3rem; flex-wrap: wrap; }
.svc-thumbs img { width: 52px; height: 40px; object-fit: cover; border-radius: 6px; }
.svc-order-row { display: flex; align-items: center; gap: .85rem; padding: .75rem; color: inherit; text-decoration: none; }
.svc-order-row img, .svc-order-ph { width: 64px; height: 52px; object-fit: cover; border-radius: 10px; flex: none; }
.svc-order-ph { display: grid; place-items: center; background: var(--sr-soft, #eef4f1); font-size: 1.4rem; }
.svc-files { display: flex; flex-wrap: wrap; gap: .5rem; }
.svc-file { position: relative; }
.svc-file img { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; }
.svc-file form { position: absolute; top: .25rem; right: .25rem; }
.svc-file .btn { padding: 0 .4rem; line-height: 1.4; }
.svc-facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px dashed var(--sr-border, #dfe7e3); }
.svc-facts > div:last-child { border-bottom: 0; }
.svc-facts dt { font-weight: 500; color: var(--sr-muted, #6b7a75); flex: none; }
.svc-facts dd { margin: 0; text-align: right; white-space: pre-line; }
.svc-steps { padding-left: 1.2rem; margin: .75rem 0 0; display: grid; gap: .5rem; }
.svc-steps li.is-done { color: var(--sr-muted, #6b7a75); }
.svc-steps li.is-done b::after { content: " ✓"; color: #198754; }

/* ---------- เครดิตลงประกาศและคูปอง (/Credits, /Admin/ListingFees) ---------- */
.cr-redeem { max-width: 320px; }
.cr-big { font-size: 2.4rem; font-weight: 700; color: var(--sr-primary, #0F5D4E); line-height: 1.1; }
.cr-big span { font-size: 1rem; font-weight: 500; color: var(--sr-muted, #6b7a75); }
.cr-lot { padding: .45rem 0; border-bottom: 1px solid var(--sr-border, #dfe7e3); }
.cr-lot:last-child { border-bottom: 0; }
.cr-lot.is-done { opacity: .55; }
.cr-coupons { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cr-coupon { display: flex; align-items: center; gap: .75rem; border: 1px dashed #f2795f; border-radius: 12px; background: #fff7f4; padding: .6rem .75rem; }
.cr-coupon-value { flex: none; min-width: 74px; text-align: center; font-weight: 700; color: #c4472b; border-right: 1px dashed #f2795f; padding-right: .6rem; }
.cr-coupon-body { flex: 1; min-width: 0; }
.cr-package { border: 1px solid var(--sr-border, #dfe7e3); border-radius: 12px; padding: .85rem; background: #fff; display: flex; flex-direction: column; }
.cr-package .btn { margin-top: auto; }
.cr-tag { font-weight: 700; color: #c4472b; background: #fff1ec; border-radius: 6px; padding: .1rem .5rem; font-size: .85rem; }
.cr-admin-form .form-label { margin-bottom: .15rem; }
details > summary { cursor: pointer; }

/* ---------- เงื่อนไขการชำระเงิน (/Legal/PaymentTerms) ---------- */
.pay-terms-body { max-height: 46vh; overflow-y: auto; border: 1px solid var(--sr-border, #dfe7e3); border-radius: 10px; padding: 1rem 1.25rem; }
.pay-terms-accept { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + .5rem); box-shadow: 0 -6px 20px rgba(0,0,0,.06); }

/* Rent / buy switch on the search page (only when the sale side is switched on). */
.market-tabs { display: inline-flex; border: 1px solid var(--bs-border-color); border-radius: 999px; padding: 2px; background: var(--bs-body-bg); flex: none; }
.market-tabs a { padding: 0.3rem 0.9rem; border-radius: 999px; text-decoration: none; color: var(--bs-body-color); font-weight: 500; font-size: 0.9rem; }
.market-tabs a.active { background: var(--bs-primary); color: #fff; }
.listing-card .sale-badge, .badge-sale { background: #b45309; color: #fff; }
.price-card-head.price-card-sale { background: radial-gradient(circle at 100% 0, rgba(255, 214, 153,.35), transparent 55%), linear-gradient(135deg, #7c2d12, #b45309); }
.price-card-head.price-card-sale + .price-card-head { border-top: 1px solid rgba(255,255,255,.18); padding-top: 0.6rem; }
.price-card-head.price-card-sale + .price-card-head .price-card-amount { font-size: 1.25rem; }
.price-check .pc-yield { margin-top: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 0.5rem; background: var(--bs-tertiary-bg); font-size: 0.9rem; }
.buy-box { border: 1px solid #f3d3a8; background: #fffaf3; border-radius: 0.75rem; padding: 0.75rem 0.9rem; margin-bottom: 0.75rem; }
.sale-calc-out .is-key dd { font-weight: 700; color: var(--sr-navy, #12304a); }
.loan-row .loan-figures { font-size: 0.9rem; }
.market-tabs label { padding: 0.3rem 0.9rem; border-radius: 999px; cursor: pointer; font-weight: 500; font-size: 0.9rem; margin: 0; }
.market-tabs .btn-check:checked + label { background: var(--bs-primary); color: #fff; }
.market-tabs .btn-check:focus-visible + label { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
/* WhatsApp sign-in (brand green). */
.sso-btn.whatsapp { background: #25D366; border-color: #25D366; color: #fff; }
.sso-btn.whatsapp:hover { color: #fff; filter: brightness(0.95); }
.btn-whatsapp { background: #25D366; border-color: #25D366; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.btn-whatsapp:hover, .btn-whatsapp:focus { background: #1ebe5a; border-color: #1ebe5a; color: #fff; }
.wa-badge { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; align-items: center; justify-content: center; }
.wa-badge svg { width: 30px; height: 30px; }
/* Agent network ("เครือข่ายนายหน้า"). */
.net-nav { flex-wrap: wrap; }
.net-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
.net-stats > div { background: var(--bs-tertiary-bg); border-radius: 0.75rem; padding: 0.6rem 0.8rem; }
.net-stats span { display: block; font-size: 0.8rem; color: var(--bs-secondary-color); }
.net-stats b { font-size: 1.15rem; }
.net-listing { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding: 0.6rem 0; border-bottom: 1px solid var(--bs-border-color); }
.net-pick { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border: 1px solid var(--bs-border-color); border-radius: 0.75rem; }
.net-pick img { width: 64px; height: 48px; object-fit: cover; border-radius: 0.5rem; flex: none; }
.store-note { font-size: 0.875rem; padding: 0.5rem 0.75rem; background: var(--bs-tertiary-bg); border-radius: 0 0 0.75rem 0.75rem; }
/* Back office: e-mail preview in the outbox. */
.mail-preview { width: 100%; height: 640px; border: 1px solid var(--sr-border); border-radius: var(--sr-radius-sm); background: var(--sr-cream); }
/* Back office: the watermark as it looks on a photo. */
.watermark-sample { width: 220px; max-width: 100%; padding: 10px 14px; border-radius: var(--sr-radius-sm); background: linear-gradient(135deg, #6b8f84, #2f4f47); }
/* Listing photo viewer (js/photo-viewer.js): pops up from the tapped photo, photos centred, scroll-snapping track. */
html.pv-lock { overflow: hidden; }
.pv { position: fixed; inset: 0; z-index: 1085; color: #fff; }
.pv[hidden] { display: none; }
.pv-backdrop { position: absolute; inset: 0; background: rgba(5, 24, 20, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity .3s ease; }
.pv.is-open .pv-backdrop { opacity: calc(1 - var(--pv-drag, 0) * .85); }
.pv-top, .pv-btn, .pv-thumbs { opacity: 0; transition: opacity .3s ease; }
.pv.is-open .pv-top, .pv.is-open .pv-btn, .pv.is-open .pv-thumbs { opacity: calc(1 - var(--pv-drag, 0)); }
.pv-stage { position: absolute; inset: 0; opacity: 0; transform: scale(.94); transition: transform .4s cubic-bezier(.2, .9, .25, 1), opacity .28s ease; }
.pv.is-open .pv-stage { opacity: 1; transform: none; }
.pv.is-closing .pv-stage { opacity: 0; transform: scale(.94); transition-duration: .24s; }
.pv-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-x; }
.pv-track::-webkit-scrollbar { display: none; }
.pv-slide { flex: 0 0 100%; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; padding: 100px 92px; scroll-snap-align: center; scroll-snap-stop: always; }
.pv-slide img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 16px; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .7); user-select: none; -webkit-user-drag: none; }
.pv-top { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top)) 18px 12px; pointer-events: none; }
.pv-top > * { pointer-events: auto; }
.pv-count { font-size: .95rem; background: rgba(255, 255, 255, .12); padding: .35rem .85rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
.pv-btn { position: absolute; z-index: 2; width: 50px; height: 50px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .14); transition: background .2s ease, opacity .3s ease; }
.pv-btn:hover { background: rgba(255, 255, 255, .28); }
.pv-btn:disabled { visibility: hidden; }
.pv-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pv-close { position: static; width: 44px; height: 44px; }
.pv-prev { left: 20px; top: calc(50% - 25px); }
.pv-next { right: 20px; top: calc(50% - 25px); }
.pv-thumbs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; gap: 8px; justify-content: safe center; overflow-x: auto; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); scrollbar-width: none; }
.pv-thumbs::-webkit-scrollbar { display: none; }
.pv-thumb { flex: none; width: 66px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; opacity: .5; background: none; transition: opacity .2s ease, border-color .2s ease, transform .2s ease; }
.pv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-thumb:hover { opacity: .85; }
.pv-thumb[aria-current="true"] { opacity: 1; border-color: #fff; transform: translateY(-3px); }
@media (max-width: 767.98px), (pointer: coarse) {
  .pv-prev, .pv-next { display: none; }
  .pv-slide { padding: 84px 0; }
  .pv-slide img { border-radius: 0; box-shadow: none; }
  .pv-thumb { width: 54px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .pv-backdrop, .pv-stage, .pv-top, .pv-btn, .pv-thumbs { transition: none; } }
/* Pop-up messages ("บันทึกแล้ว", errors): bottom centre, above the phone tab bar (site.js SorealToast). */
.toast-stack { position: fixed; left: 50%; bottom: calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom) + 22px); transform: translateX(-50%); z-index: 2050; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(560px, calc(100vw - 32px)); pointer-events: none; }
.pop-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px 14px 14px 16px; border-radius: 18px; background: #fff; color: var(--sr-ink); border: 1px solid var(--sr-border); box-shadow: 0 22px 50px -14px rgba(15, 93, 78, .38), 0 2px 8px rgba(15, 93, 78, .08); animation: pop-in .34s cubic-bezier(.2, .9, .25, 1.15); }
.pop-toast.is-leaving { animation: pop-out .22s ease forwards; }
.pop-toast.is-error { border-color: #F2C6C4; }
.pop-toast-icon { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #2E9E7A; }
.pop-toast.is-error .pop-toast-icon { background: #D9534F; }
.pop-toast-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pop-toast-text { flex: 1; min-width: 0; padding-top: 3px; font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; }
.pop-toast-close { flex: none; border: 0; background: none; color: var(--sr-muted); font-size: 1.35rem; line-height: 1; padding: 2px 6px; border-radius: 8px; }
.pop-toast-close:hover { background: var(--sr-gray); color: var(--sr-ink); }
@keyframes pop-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pop-out { to { opacity: 0; transform: translateY(12px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .pop-toast, .pop-toast.is-leaving { animation: none; } }
/* The back-office switch slides smoothly while it saves in the background. */
.switch[data-busy] { cursor: progress; }
.switch .knob { transition: transform .22s cubic-bezier(.2, .9, .25, 1.1); }
/* Build number (footer, account page, back office). */
.build-tag { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.admin-build { padding: 0.75rem 1rem 1rem; border-top: 1px solid var(--sr-border); margin-top: 0.5rem; line-height: 1.6; }

/* Back office: fees / discounts / deductions calculator */
.charge-calc-box { border: 1px solid var(--sr-border); border-radius: 12px; padding: .75rem 1rem; background: #fff; height: 100%; }
.pay-breakdown td { padding: .2rem 0; }
.pay-breakdown .pay-total td { border-top: 1px solid var(--sr-border); padding-top: .4rem; font-weight: 700; }
.pay-quote { color: var(--sr-muted); line-height: 1.5; }
.charge-table { min-width: 760px; }
.charge-table td:first-child { min-width: 180px; }
.staff-badge { background: var(--sr-navy); color: #fff; font-weight: 600; }
.staff-table { min-width: 860px; }

/* Back office home: a card per topic (pages + that topic's settings); the settings page uses the same heads. */
.admin-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
/* Cards the same height (the tallest one's) from two columns up; the settings part sits at the bottom of each. */
@media (min-width: 768px) { .admin-topics { grid-auto-rows: 1fr; } }
.admin-topic { padding: 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .85rem; }
.admin-topic-head { display: flex; align-items: flex-start; gap: .75rem; }
.admin-topic-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--sr-sage); color: var(--sr-navy); display: grid; place-items: center; }
.admin-topic-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-topic-links { display: grid; gap: 2px; }
.admin-topic-links a { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 10px; color: var(--sr-navy); text-decoration: none; font-weight: 500; }
.admin-topic-links a:hover { background: var(--sr-cream-2); }
.admin-topic-links svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.admin-topic-settings { border-top: 1px solid var(--sr-border); padding-top: .7rem; margin-top: auto; }
.admin-topic-settings dl > div { display: flex; justify-content: space-between; gap: .75rem; font-size: .82rem; padding: .15rem 0; }
.admin-topic-settings dt { font-weight: 400; color: var(--sr-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-topic-settings dd { margin: 0; font-weight: 600; color: var(--sr-navy); max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-topics { display: flex; flex-wrap: wrap; gap: .4rem; position: sticky; top: 64px; z-index: 5; background: var(--sr-cream, #fbf8f2); padding: .4rem 0; }
.settings-topic { scroll-margin-top: 200px; overflow: hidden; }   /* below the header and the sticky topic chips (two rows on narrow screens) */
.settings-topic-head { padding: 1rem 1.15rem; border-bottom: 1px solid var(--sr-border); background: var(--sr-cream-2); }
.settings-row { padding: .8rem 1.15rem; border-bottom: 1px solid var(--sr-border); }
.settings-row:last-child { border-bottom: 0; }

/* Listing details: less up front — the rest behind "ดูเพิ่ม" toggles */
.trust-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.trust-line { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .9rem; }
.trust-line .trust-dot { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: #E3F4EC; color: #0F5D4E; }
.trust-line.is-none { color: var(--sr-muted, #5d6b67); }
.trust-line.is-none .trust-dot { background: #F1F3F2; color: #8a9692; }
.more-toggle { margin-top: .6rem; }
.more-toggle > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .9rem; color: var(--sr-primary, #0F5D4E); }
.more-toggle > summary::-webkit-details-marker { display: none; }
.more-toggle > summary::after { content: "▾"; transition: transform .15s; }
.more-toggle[open] > summary::after { transform: rotate(180deg); }
.more-toggle.is-section { margin-top: 0; }
.more-toggle.is-section > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; color: inherit; }
.more-toggle.is-section > summary h2 { margin: 0; }
.more-toggle.is-section > summary span { font-weight: 400; font-size: .85rem; color: var(--sr-muted, #5d6b67); }
.more-toggle.is-section > summary::after { margin-left: auto; color: var(--sr-primary, #0F5D4E); }

/* Verified mark (VerifiedMark): the blue house with a white tick — the team checked this person's ID card */
.verified-mark { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.16em; margin-left: .25em; }
.verified-mark .vm-house { fill: #1D9BF0; stroke: none; }
.verified-mark .vm-tick { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.score-pill .verified-mark { width: 14px; height: 14px; margin-left: 0; vertical-align: middle; }

/* User menu: who is signed in — role chips and the package tier (Gold / Silver / Bronze) */
.user-menu-head { padding: .45rem 1rem .35rem; min-width: 15rem; max-width: 19rem; }
.role-chip { display: inline-block; font-size: .72rem; font-weight: 600; padding: .12rem .55rem; border-radius: 999px; background: #E6F2EE; color: #0F5D4E; }
.tier-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 700; padding: .12rem .55rem; border-radius: 999px; letter-spacing: .02em; }
.tier-badge svg { width: 12px; height: 12px; fill: currentColor; }
.tier-badge.is-gold { background: linear-gradient(135deg, #FFE7A3, #F2C14E); color: #6B4A00; box-shadow: inset 0 0 0 1px #E0AE35; }
.tier-badge.is-silver { background: linear-gradient(135deg, #F4F6F8, #C9D0D6); color: #45505A; box-shadow: inset 0 0 0 1px #B4BCC4; }
.tier-badge.is-bronze { background: linear-gradient(135deg, #F6D3B5, #D49162); color: #5A2E10; box-shadow: inset 0 0 0 1px #C17F50; }

/* ---------- Ads ("ได้รับการสนับสนุน"): quiet, premium, clearly labelled ---------- */
.ad-card {
  container-type: inline-size;
  position: relative; border-radius: var(--sr-radius); overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(180, 83, 42, .55), rgba(255, 179, 138, .28) 38%, rgba(15, 93, 78, .14) 62%, rgba(15, 93, 78, .45)) border-box;
  box-shadow: var(--sr-shadow);
  transition: box-shadow .25s ease, transform .25s ease;
}
.ad-card:hover { box-shadow: var(--sr-shadow-lg); transform: translateY(-2px); }
.ad-link { display: grid; grid-template-columns: 1fr; height: 100%; color: inherit; text-decoration: none; }
.ad-link:hover { color: inherit; }
a.ad-link:focus-visible { outline: 3px solid rgba(46, 158, 122, .45); outline-offset: -3px; border-radius: var(--sr-radius); }
.ad-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sr-cream-2); }
.ad-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.ad-card:hover .ad-media img { transform: scale(1.035); }
.ad-media-empty { display: grid; place-items: center; color: var(--sr-muted); font-size: .85rem; }
.ad-body { display: flex; flex-direction: column; justify-content: center; gap: .45rem; padding: 1rem 1.1rem 1.15rem; min-width: 0; }
.ad-label { display: flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 600; letter-spacing: .06em; color: var(--sr-gold-700); min-width: 0; }
.ad-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--sr-gold), var(--sr-gold-600)); box-shadow: 0 0 0 3px rgba(255, 179, 138, .25); }
.ad-by { font-weight: 500; letter-spacing: 0; color: var(--sr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-title { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; line-height: 1.35; color: var(--sr-navy-900); overflow-wrap: anywhere; }
.ad-text { font-size: .88rem; color: var(--sr-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ad-cta {
  align-self: flex-start; margin-top: .3rem; display: inline-flex; align-items: center; gap: .35rem;
  padding: .42rem 1rem; border-radius: 999px; border: 1px solid rgba(15, 93, 78, .35); color: var(--sr-navy);
  font-size: .85rem; font-weight: 500; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ad-cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.ad-card:hover .ad-cta { background: var(--sr-navy); border-color: var(--sr-navy); color: #fff; }
.ad-card:hover .ad-cta svg { transform: translateX(2px); }

/* Home: a wide editorial card, picture left and words right (stacked on narrow screens). */
.ad-home .ad-media { aspect-ratio: 16 / 9; }
@container (min-width: 640px) {
  .ad-home .ad-link { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  /* the picture fills its half; the words decide the height */
  .ad-home .ad-media { position: relative; aspect-ratio: auto; min-height: 300px; }
  .ad-home .ad-media img { position: absolute; inset: 0; }
  .ad-home .ad-body { padding: 2rem 2.25rem; gap: .65rem; }
  .ad-home .ad-title { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
  .ad-home .ad-text { font-size: .95rem; }
}
/* Search results: picture beside the words once the row is wide enough. */
.ad-search .ad-media { aspect-ratio: 16 / 9; }
@container (min-width: 460px) {
  .ad-search .ad-link { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .ad-search .ad-media { position: relative; aspect-ratio: auto; min-height: 180px; }
  .ad-search .ad-media img { position: absolute; inset: 0; }
  .ad-search .ad-body { padding: 1.1rem 1.35rem; }
}
/* Search results: spans the row, between listings. */
.map-results-grid > .ad-search { grid-column: 1 / -1; }
.ad-search { border-radius: 18px; }
/* Listing page: small and calm, under the trust box. */
.ad-listing { box-shadow: 0 2px 10px rgba(15, 93, 78, .07); }
.ad-listing .ad-media { aspect-ratio: 16 / 10; }
.ad-listing .ad-body { padding: .85rem 1rem 1rem; gap: .35rem; }
.ad-listing .ad-title { font-size: .95rem; }
.ad-listing .ad-text { font-size: .82rem; -webkit-line-clamp: 2; }
@media (prefers-reduced-motion: reduce) {
  .ad-card, .ad-media img, .ad-cta svg { transition: none; }
  .ad-card:hover { transform: none; }
  .ad-card:hover .ad-media img { transform: none; }
}

/* Clips: a full-screen sponsored slide, swiped past like any clip. */
.clip-ad { background: radial-gradient(120% 80% at 50% 0%, #1d3b34, #050807 70%); }
.clip-ad-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-ad-tag {
  position: absolute; left: 12px; top: calc(64px + env(safe-area-inset-top)); z-index: 4;
  padding: .25rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: #fff;
  background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 179, 138, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.clip-ad-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 3rem 1rem calc(1.4rem + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, .78)); color: #fff;
}
.clip-ad-by { font-size: .78rem; color: rgba(255, 255, 255, .78); margin-bottom: .2rem; }
.clip-ad-title { font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; line-height: 1.35; margin: 0 0 .35rem; color: #fff; }
.clip-ad-text { font-size: .9rem; color: rgba(255, 255, 255, .86); margin: 0 0 .8rem; max-width: 34rem; }
.clip-ad-cta {
  display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; max-width: 26rem; padding: .75rem 1rem;
  border-radius: 14px; font-weight: 600; color: #3b1a0b; text-decoration: none;
  background: linear-gradient(135deg, #FFD2B5, var(--sr-gold) 45%, var(--sr-gold-600)); box-shadow: var(--sr-glow);
}
.clip-ad-cta:hover { color: #3b1a0b; filter: brightness(1.04); }
.clip-ad-cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* "ลงโฆษณา" (member pages). */
.ads-hero {
  position: relative; overflow: hidden; border-radius: var(--sr-radius); padding: 2.5rem 2rem; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 179, 138, .35), transparent 55%), linear-gradient(135deg, var(--sr-navy-900), var(--sr-navy) 60%, #18806B);
}
.ads-hero h1 { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: .25rem 0 .6rem; color: #fff; }
.ads-hero p { max-width: 40rem; color: rgba(255, 255, 255, .85); margin-bottom: 1.25rem; }
.ads-hero-kicker { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sr-gold); font-weight: 600; }
.ads-places { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.ads-place { padding: 1.2rem 1.25rem; display: flex; flex-direction: column; }
.ads-place .btn { align-self: flex-start; margin-top: auto !important; }
.ads-place .small:last-of-type { margin-bottom: .75rem; }
.ads-place-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem; margin-bottom: .35rem; }
.ads-place-head h3 { font-size: 1.02rem; margin: 0; font-weight: 600; }
.ads-place-from { font-size: .78rem; color: var(--sr-gold-700); font-weight: 600; }
.ads-mine { display: grid; gap: .75rem; }
.ads-mine-item { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 1rem; padding: .9rem; align-items: center; }
.ads-mine-thumb { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--sr-cream-2); }
.ads-mine-thumb img, .ads-mine-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ads-mine-actions { display: flex; flex-direction: column; gap: .4rem; min-width: 140px; }
.ads-note { margin-top: .4rem; font-size: .85rem; padding: .5rem .7rem; border-radius: 10px; background: #FFF3EC; color: #8A3B17; }
.ads-stats { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .35rem; color: var(--sr-muted); }
.ads-stats b { color: var(--sr-ink); font-weight: 600; }
@media (max-width: 767.98px) {
  .ads-hero { padding: 1.75rem 1.25rem; }
  .ads-mine-item { grid-template-columns: 96px minmax(0, 1fr); }
  .ads-mine-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .ads-mine-actions > * { flex: 1 1 auto; }
}

/* Making an ad: place cards, packages, live preview. */
.ads-place-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.ads-place-option { position: relative; display: block; cursor: pointer; }
.ads-place-option input { position: absolute; opacity: 0; }
.ads-place-option > span {
  display: flex; flex-direction: column; gap: .15rem; height: 100%; padding: .8rem .95rem; border-radius: 14px;
  border: 1px solid var(--sr-border); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.ads-place-option small { font-size: .78rem; color: var(--sr-muted); }
.ads-place-option input:checked + span { border-color: var(--sr-navy); box-shadow: 0 0 0 3px rgba(15, 93, 78, .14); }
.ads-place-option input:focus-visible + span { outline: 3px solid rgba(46, 158, 122, .45); }
.ads-place-option input:disabled + span { opacity: .45; cursor: not-allowed; }
.ads-packages { display: grid; gap: .55rem; }
.ads-package { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 14px; border: 1px solid var(--sr-border); cursor: pointer; background: #fff; }
.ads-package:has(input:checked) { border-color: var(--sr-navy); box-shadow: 0 0 0 3px rgba(15, 93, 78, .14); }
.ads-package input { accent-color: var(--sr-navy); }
.ads-package-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ads-package-name { font-weight: 600; }
.ads-package-tag { margin-left: .35rem; font-size: .7rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--tint-gold); color: var(--sr-gold-700); }
.ads-package-price { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; color: var(--sr-navy); white-space: nowrap; }
.ads-preview { position: sticky; top: 88px; padding: 1.1rem; border-radius: var(--sr-radius); background: var(--sr-cream-2); }
.ads-preview-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem; margin-bottom: .8rem; }
.ads-preview-label { font-size: .75rem; font-weight: 600; letter-spacing: .08em; color: var(--sr-navy); }
.ads-preview-frame.ads-preview-listing, .ads-preview-frame.ads-preview-search { max-width: 340px; margin: 0 auto; }
.ads-preview-frame .ad-card:hover { transform: none; }
.ads-phone {
  position: relative; overflow: hidden; width: 100%; max-width: 270px; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 26px;
  background: radial-gradient(120% 80% at 50% 0%, #1d3b34, #050807 70%); box-shadow: 0 0 0 6px #111, var(--sr-shadow-lg);
}
.ads-phone > video, .ads-phone > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ads-phone .clip-ad-tag { top: 14px; left: 10px; }
.ads-phone .clip-ad-info { padding: 2rem .8rem 1rem; }
.ads-phone .clip-ad-title { font-size: 1rem; }
.ads-phone .clip-ad-text { font-size: .8rem; margin-bottom: .6rem; }
.ads-phone .clip-ad-cta { padding: .55rem .8rem; font-size: .85rem; }
.ads-phone-sm { max-width: 220px; }
.ads-phone-empty { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .6); font-size: .85rem; }
@media (max-width: 991.98px) { .ads-preview { position: static; } }

/* Back office "โฆษณา". */
.ads-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.ads-slot { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--sr-border); background: #fff; }
.ads-slots-save { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.ads-every { width: 76px; }
.ads-row-title { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; font-weight: 500; }
.ads-row-thumb { width: 56px; height: 42px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--sr-cream-2); }
.ads-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ads-table th { white-space: nowrap; }
.ads-table td:first-child { min-width: 240px; }
.ads-table td:nth-child(2) { min-width: 96px; }
.ads-table td:nth-child(3) { min-width: 150px; }
.ads-table td:nth-child(4) { min-width: 190px; }
.ads-table td.text-end { white-space: nowrap; }
.ads-review { border-left: 4px solid var(--sr-gold-600); }
.ads-chart { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 160px; padding-top: .5rem; border-bottom: 1px solid var(--sr-border); }
.ads-chart-col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 3px; max-width: 36px; }
.ads-chart-bar { position: relative; display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: rgba(15, 93, 78, .28); overflow: hidden; }
.ads-chart-click { position: absolute; left: 0; right: 0; bottom: 0; background: var(--sr-gold-600); }
.ads-legend { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.ads-legend-view { background: rgba(15, 93, 78, .28); }
.ads-legend-click { background: var(--sr-gold-600); }