/* =========================================================================
   Domora design system — public website
   Tokens → base → layout → components → pages
   ========================================================================= */

:root {
  --ink: #15201c;
  --ink-2: #39443f;
  --muted: #6b7571;
  --muted-2: #8f9894;
  --line: #e7e8e4;
  --line-2: #d9dbd5;
  --bg: #ffffff;
  --surface: #ffffff;
  --bg-soft: #f7f6f2;
  --bg-sand: #f1eee6;
  --brand: #0e5a49;
  --brand-600: #0a4739;
  --brand-700: #08382d;
  --brand-50: #e9f3ef;
  --brand-100: #d3e8e0;
  --cta: #0e5a49;
  --cta-600: #0a4739;
  --cta-ink: #ffffff;
  --accent-ink: #2b1d05;
  --accent: #e9a23b;
  --accent-50: #fdf3e2;
  --danger: #c0412c;
  --danger-50: #fbecea;
  --success: #1f7a4d;
  --success-50: #e7f5ed;
  --info-50: #eaf1fb;
  --info: #285ea8;

  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-xs: 0 1px 2px rgba(21, 32, 28, .06);
  --shadow-sm: 0 2px 8px rgba(21, 32, 28, .07);
  --shadow: 0 10px 30px -12px rgba(21, 32, 28, .22);
  --shadow-lg: 0 24px 60px -20px rgba(21, 32, 28, .35);
  --container: 1280px;
  --btn-radius: 999px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.55; color: var(--ink);
  background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0; }
.icon { width: 20px; height: 20px; flex: none; }
.icon-sm { width: 16px; height: 16px; flex: none; }
.icon-lg { width: 26px; height: 26px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--brand-100); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.xs { font-size: .78rem; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: var(--stack, 16px); }
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.divider { height: 1px; background: var(--line); border: 0; margin: 28px 0; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: var(--btn-radius, 999px); border: 1px solid transparent;
  font-weight: 600; font-size: .95rem; line-height: 1; white-space: nowrap;
  transition: background .18s var(--ease), color .18s, border-color .18s, transform .18s var(--ease), box-shadow .18s;
  background: var(--bg-soft); color: var(--ink);
}
.btn:hover { background: var(--bg-sand); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--cta); color: var(--cta-ink); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--cta) 70%, transparent); }
.btn-primary:hover { background: var(--cta-600); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { filter: brightness(.95); }
.btn-outline { background: var(--surface); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--ink); background: var(--surface); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-danger { background: var(--danger-50); color: var(--danger); }
.btn-danger:hover { background: #f6d9d4; }
.btn-sm { height: 36px; padding: 0 14px; font-size: .86rem; }
.btn-lg { height: 54px; padding: 0 28px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-icon { width: 44px; padding: 0; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
.link { color: var(--brand); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.link:hover { text-decoration-color: currentColor; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.link-arrow .icon { transition: transform .2s var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label, .label { font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.label .muted { font-weight: 500; }
.input, .select, .textarea {
  width: 100%; height: 50px; padding: 0 16px; font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s; appearance: none;
}
.textarea { height: auto; min-height: 150px; padding: 14px 16px; resize: vertical; line-height: 1.6; }
.select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2315201c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.input:hover, .select:hover, .textarea:hover { border-color: #b9bdb6; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.has-error .input, .has-error .select, .has-error .textarea { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: .83rem; font-weight: 500; margin: 0; }
.hint { color: var(--muted); font-size: .83rem; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .95rem; user-select: none; }
.check input { appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--line-2); border-radius: 6px; background: var(--surface); display: grid; place-items: center; transition: all .15s; cursor: pointer; }
.check input:checked { background: var(--brand); border-color: var(--brand); }
.check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.check input:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; }
.input-group { position: relative; }
.input-group .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-group .input { padding-left: 44px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; }
.form-grid .span-2, .form-grid-3 .span-3 { grid-column: 1 / -1; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .9rem; font-weight: 500; cursor: pointer; transition: all .15s; background: var(--surface); }
.chip span:hover { border-color: var(--ink); }
.chip input:checked + span { background: var(--brand-50); border-color: var(--brand); color: var(--brand-700); }
.chip input:focus-visible + span { outline: 2.5px solid var(--brand); outline-offset: 2px; }

/* ---------------------------------------------------------------- badges & pills */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .01em; background: var(--surface); color: var(--ink); white-space: nowrap; }
.badge .icon-sm { width: 14px; height: 14px; }
.badge-verified { background: var(--brand); color: #fff; }
.badge-soft { background: var(--bg-soft); color: var(--ink-2); }
.badge-brand { background: var(--brand-50); color: var(--brand-700); }
.badge-accent { background: var(--accent); color: var(--accent-ink); }
.badge-glass { background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); box-shadow: var(--shadow-xs); }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-review { background: var(--accent-50); color: #8a5a10; }
.status-approved, .status-confirmed, .status-PUBLISHED { background: var(--success-50); color: var(--success); }
.status-not_accepted, .status-REJECTED { background: var(--danger-50); color: var(--danger); }
.status-cancelled, .status-expired, .status-DRAFT, .status-UNPUBLISHED { background: var(--bg-soft); color: var(--muted); }
.status-PENDING { background: var(--accent-50); color: #8a5a10; }
.status-APPROVED { background: var(--info-50); color: var(--info); }

/* ---------------------------------------------------------------- flash */
.flash-stack { position: fixed; top: calc(var(--header-h) + 14px); right: 18px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: min(440px, calc(100vw - 36px)); }
.flash { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); border: 1px solid var(--line); font-size: .93rem; font-weight: 500; animation: flash-in .35s var(--ease); }
.flash .icon { margin-top: 1px; }
.flash-success .icon { color: var(--success); }
.flash-error .icon { color: var(--danger); }
.flash-info .icon { color: var(--info); }
.flash button { margin-left: auto; background: none; border: 0; padding: 0; color: var(--muted); }
.flash.is-leaving { opacity: 0; transform: translateY(-6px); transition: all .3s; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-8px); } }
.alert { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--radius); font-size: .95rem; }
.alert .icon { margin-top: 2px; }
.alert-info { background: var(--info-50); color: #1d4a85; }
.alert-success { background: var(--success-50); color: #155c39; }
.alert-warning { background: var(--accent-50); color: #7a4e0c; }
.alert-danger { background: var(--danger-50); color: #8f2c1d; }

/* ---------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: rgba(255,255,255,.96); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 20px -16px rgba(0,0,0,.25); }
.site-header.is-transparent:not(.is-scrolled) { background: transparent; backdrop-filter: none; color: #fff; }
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.32rem; letter-spacing: -.03em; flex: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; }
.brand-mark svg { width: 20px; height: 20px; }
.brand img { height: 36px; width: auto; max-width: 190px; object-fit: contain; }
.site-header.is-transparent:not(.is-scrolled) .brand-mark { background: var(--surface); color: var(--brand); }
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a { padding: 9px 14px; border-radius: 999px; font-weight: 600; font-size: .94rem; transition: background .15s; }
.main-nav a:hover, .main-nav a.is-active { background: rgba(21,32,28,.06); }
.site-header.is-transparent:not(.is-scrolled) .main-nav a:hover { background: rgba(255,255,255,.14); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.header-link { padding: 9px 14px; border-radius: 999px; font-weight: 600; font-size: .94rem; }
.header-link:hover { background: rgba(21,32,28,.06); }
.site-header.is-transparent:not(.is-scrolled) .header-link:hover { background: rgba(255,255,255,.14); }
.site-header.is-transparent:not(.is-scrolled) .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.site-header.is-transparent:not(.is-scrolled) .btn-outline:hover { background: var(--surface); color: var(--ink); }

.dropdown { position: relative; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px; padding: 8px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 120; animation: pop .18s var(--ease); }
.dropdown-panel a, .dropdown-panel button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 9px; font-size: .93rem; font-weight: 500; background: none; border: 0; text-align: left; }
.dropdown-panel a:hover, .dropdown-panel button:hover { background: var(--bg-soft); }
.dropdown-panel a.is-active { font-weight: 700; color: var(--brand); }
.dropdown-panel hr { border: 0; height: 1px; background: var(--line); margin: 6px 4px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; font-weight: 700; font-size: .86rem; }
.lang-btn:hover { background: rgba(21,32,28,.06); }
.site-header.is-transparent:not(.is-scrolled) .lang-btn:hover { background: rgba(255,255,255,.14); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.user-btn { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink); }
.menu-toggle { display: none; }

.mobile-drawer { position: fixed; inset: 0; z-index: 200; display: none; }
.mobile-drawer.is-open { display: block; }
.mobile-drawer .scrim { position: absolute; inset: 0; background: rgba(15,22,19,.45); animation: fade .2s; }
.mobile-drawer .sheet { position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 88vw); background: var(--surface); padding: 20px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; animation: slide-in .25s var(--ease); }
.mobile-drawer .sheet a { padding: 13px 12px; border-radius: 10px; font-weight: 600; }
.mobile-drawer .sheet a:hover { background: var(--bg-soft); }
.mobile-drawer .langs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.mobile-drawer .langs a { text-align: center; border: 1px solid var(--line); font-size: .9rem; padding: 10px 6px; }
.mobile-drawer .langs a.is-active { border-color: var(--brand); color: var(--brand); }
@keyframes fade { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(40px); opacity: .4; } }

/* ---------------------------------------------------------------- hero + search */
.hero { position: relative; margin-top: calc(var(--header-h) * -1); min-height: min(760px, 92vh); display: flex; align-items: flex-end; color: #fff; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #1d2b26 center / cover no-repeat; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; animation: hero-zoom 18s ease-out both; }
.hero-media .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity 1.1s ease; }
.hero-media .hero-video[data-ready] { opacity: 1; }
@keyframes hero-zoom { from { transform: scale(1.06); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,18,15,.55) 0%, rgba(10,18,15,.15) 38%, rgba(10,18,15,.72) 100%); }
.hero-content { width: 100%; padding-top: calc(var(--header-h) + 60px); padding-bottom: 72px; }
.hero .eyebrow { color: #fff; opacity: .92; }
.hero h1 { margin: 16px 0 18px; max-width: 760px; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.hero-sub { font-size: clamp(1.02rem, 1.4vw, 1.2rem); max-width: 600px; opacity: .93; }
.searchbar { margin-top: 34px; display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; align-items: stretch; background: var(--surface); color: var(--ink); border-radius: 999px; padding: 8px; box-shadow: var(--shadow-lg); max-width: 920px; }
.searchbar .sb-field { display: flex; flex-direction: column; justify-content: center; padding: 8px 24px; border-radius: 999px; position: relative; min-width: 0; transition: background .15s; }
.searchbar .sb-field + .sb-field::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--line); }
.searchbar .sb-field:hover { background: var(--bg-soft); }
.searchbar .sb-field:focus-within { background: var(--bg-soft); }
.searchbar label { font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.searchbar input { border: 0; background: transparent; padding: 2px 0 0; font: inherit; font-size: .98rem; color: var(--ink); width: 100%; min-width: 0; outline: none; }
.searchbar input::placeholder { color: var(--muted-2); }
.searchbar input[type=date] { min-height: 26px; }
.searchbar .btn { height: auto; min-height: 58px; padding: 0 30px; font-size: 1rem; }
.hero-trust { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: .92rem; font-weight: 600; }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; opacity: .95; }
.hero-trust .icon { width: 18px; height: 18px; color: var(--accent); }

/* ---------------------------------------------------------------- sections */
.section { padding: 88px 0; }
.section-sm { padding: 56px 0; }
.section-soft { background: var(--bg-soft); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.section-head p { color: var(--muted); margin-top: 8px; font-size: 1.04rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

/* ---------------------------------------------------------------- property card */
.pcard { position: relative; display: flex; flex-direction: column; gap: 14px; }
.pcard-media { position: relative; aspect-ratio: 4 / 3.1; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-sand); }
/* ---- Layout styles (chosen per theme): change how listings are arranged across the whole site ---- */
/* Editorial — big, spacious, fewer-per-row portrait cards (Airbnb / Spotahome vibe) */
body[data-layout="editorial"] .pcard-media { aspect-ratio: 20 / 21; }
body[data-layout="editorial"] .pcard { gap: 12px; }
/* Compact — denser, more-per-row landscape cards (Booking / Zillow vibe) */
body[data-layout="compact"] .pcard-media { aspect-ratio: 3 / 2; }
body[data-layout="compact"] .pcard { gap: 9px; }
body[data-layout="compact"] .pcard-title { font-size: .98rem; }
@media (min-width: 981px) {
  body[data-layout="editorial"] .grid-4, body[data-layout="editorial"] .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 26px; }
  body[data-layout="editorial"] .grid-4 > :nth-child(n+7) { display: flex; }
  body[data-layout="compact"]  .grid-4, body[data-layout="compact"]  .results-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 16px; }
}
@media (min-width: 1181px) {
  body[data-layout="compact"] .grid-4 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.pcard-track { display: flex; height: 100%; transition: transform .45s var(--ease); }
.pcard-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
.pcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18) 0, transparent 28%, transparent 70%, rgba(0,0,0,.18)); pointer-events: none; }
.pcard-badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; pointer-events: none; }
.pcard-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94); box-shadow: var(--shadow-sm); display: grid; place-items: center; opacity: 0; transition: opacity .2s, transform .2s; }
.pcard-nav .icon { width: 18px; height: 18px; }
.pcard-prev { left: 10px; }
.pcard-next { right: 10px; }
.pcard:hover .pcard-nav { opacity: 1; }
.pcard-nav:hover { transform: translateY(-50%) scale(1.06); }
.pcard-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; z-index: 2; pointer-events: none; }
.pcard-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); transition: all .2s; }
.pcard-dots i.is-active { background: var(--surface); transform: scale(1.2); }
.pcard-body { display: flex; flex-direction: column; gap: 5px; padding: 0 2px; }
.pcard-meta { display: flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--muted); }
.pcard-title { font-size: 1.04rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard-specs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .86rem; color: var(--ink-2); }
.pcard-specs span { display: inline-flex; align-items: center; gap: 5px; }
.pcard-specs .icon { width: 16px; height: 16px; color: var(--muted); }
.pcard-price { margin-top: 4px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pcard-price strong { font-size: 1.14rem; font-weight: 800; letter-spacing: -.01em; }
.pcard-price .alt { font-size: .82rem; color: var(--muted); }
.pcard-avail { font-size: .82rem; color: var(--success); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.pcard:hover .pcard-track img { filter: brightness(1.02); }

/* ---------------------------------------------------------------- destinations */
.dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 18px; }
.dest-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; color: #fff; display: flex; align-items: flex-end; padding: 22px; isolation: isolate; background: var(--brand-700); }
.dest-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.dest-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s var(--ease); }
.dest-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(5,12,9,.75)); }
.dest-card:hover img { transform: scale(1.05); }
.dest-card h3 { font-size: 1.45rem; }
.dest-card:nth-child(1) h3 { font-size: 2rem; }
.dest-card p { font-size: .9rem; opacity: .9; margin-top: 4px; font-weight: 500; }
.dest-card .arrow { position: absolute; right: 18px; bottom: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); display: grid; place-items: center; transition: all .25s var(--ease); }
.dest-card:hover .arrow { background: var(--surface); color: var(--ink); }

/* ---------------------------------------------------------------- how / why */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step { position: relative; padding: 28px 24px; background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line); }
.step-num { width: 44px; height: 44px; border-radius: 14px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; font-weight: 800; margin-bottom: 18px; }
.step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .95rem; }
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 26px; }
.feature .ficon { width: 52px; height: 52px; border-radius: 16px; background: var(--bg-soft); display: grid; place-items: center; color: var(--brand); margin-bottom: 18px; }
.feature .ficon .icon { width: 26px; height: 26px; }
.feature h3 { font-size: 1.08rem; margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: .95rem; }

.owners-band { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: var(--brand-700); color: #fff; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 420px; }
.owners-band .ob-content { padding: 56px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.owners-band .eyebrow { color: var(--accent); }
.owners-band h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.owners-band p { opacity: .85; font-size: 1.05rem; max-width: 480px; }
.owners-band ul { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 10px; }
.owners-band li { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.owners-band li .icon { color: var(--accent); }
.owners-band .ob-media { position: relative; }
.owners-band .ob-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: color-mix(in srgb, var(--ink) 92%, #000); color: #c9d0cc; padding: 72px 0 32px; margin-top: 40px; }
.site-footer .brand { color: #fff; }
.site-footer .brand-mark { background: var(--surface); color: var(--brand); }
.footer-motto { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; margin: 0 0 26px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 1.05rem; font-weight: 600; line-height: 1.5; }
.footer-motto svg { flex: none; color: color-mix(in srgb, var(--accent) 80%, var(--surface)); }
@media (max-width: 640px) { .footer-motto { font-size: .95rem; align-items: flex-start; text-align: left; } }
.footer-guarantee { display: flex; align-items: center; gap: 16px; margin: 0 0 40px; padding: 18px 22px; border-radius: 16px; background: color-mix(in srgb, var(--brand) 20%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); }
.footer-guarantee .fg-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: #fff; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); }
.footer-guarantee .fg-ic svg { width: 24px; height: 24px; }
.footer-guarantee .fg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.footer-guarantee .fg-txt strong { color: #fff; font-size: 1.02rem; }
.footer-guarantee .fg-txt span { color: #c9d0cc; font-size: .88rem; line-height: 1.45; }
.footer-guarantee .fg-badge { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--brand); padding: 7px 12px; border-radius: 999px; }
.footer-guarantee .fg-badge svg { width: 13px; height: 13px; }
@media (max-width: 640px) { .footer-guarantee { flex-wrap: wrap; gap: 12px; } .footer-guarantee .fg-badge { order: 2; } }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 36px; }
.footer-blurb { font-size: .82rem; line-height: 1.5; opacity: .72; margin: 0 0 12px; max-width: 220px; }
.bb-benef-note { display: flex; align-items: flex-start; gap: 7px; font-size: .9rem; line-height: 1.45; color: var(--ink); }
.bb-benef-note svg { flex: none; margin-top: 2px; color: var(--brand, #2a7); }
.footer-grid h4 { color: #fff; font-size: .9rem; letter-spacing: .02em; margin-bottom: 16px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .94rem; }
.footer-grid a:hover { color: #fff; }
.footer-pay { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-pay .fp-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #8e9893; font-weight: 700; }
.footer-pay .fp-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.fp-badge { font-size: .76rem; font-weight: 700; color: #dfe4e1; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 7px; padding: 5px 10px; letter-spacing: .01em; }
.footer-legal { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: .76rem; line-height: 1.5; color: #7f8984; max-width: 900px; }
.footer-legal + .footer-bottom { margin-top: 16px; padding-top: 0; border-top: 0; }
.footer-bottom { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .86rem; color: #8e9893; }
.footer-langs { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-langs a.is-active { color: #fff; font-weight: 700; }

/* ---------------------------------------------------------------- listings page */
.filters-bar { position: sticky; top: var(--header-h); z-index: 60; background: var(--surface); border-bottom: 1px solid var(--line); }
.filters-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
.fsearch { display: flex; align-items: center; height: 46px; border: 1px solid var(--line-2); border-radius: 999px; padding: 0 6px 0 16px; gap: 10px; flex: none; background: var(--surface); }
.fsearch input { border: 0; outline: none; font: inherit; font-size: .93rem; background: transparent; min-width: 0; }
.fsearch .f-city { width: 150px; }
.fsearch .f-date { width: 132px; color: var(--ink); }
.fsearch .sep { width: 1px; height: 22px; background: var(--line); }
.fsearch button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--cta); color: var(--cta-ink); display: grid; place-items: center; flex: none; }
.fpill > summary { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .92rem; font-weight: 600; white-space: nowrap; background: var(--surface); transition: border-color .15s; }
.fpill > summary:hover, .fpill[open] > summary { border-color: var(--ink); }
.fpill.is-set > summary { background: var(--brand-50); border-color: var(--brand); color: var(--brand-700); }
.fpill .dropdown-panel { left: 0; right: auto; min-width: 290px; padding: 18px; }
.fpill-panel-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.filters-spacer { flex: 1; }
.view-toggle { display: none; }
.results-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 40%); gap: 0; }
.results-list { padding: 28px 28px 60px max(24px, calc((100vw - var(--container)) / 2 + 24px)); }
.results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.results-head h1 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; }
.map-panel { position: sticky; top: calc(var(--header-h) + 75px); height: calc(100vh - var(--header-h) - 75px); background: var(--bg-sand); }
#results-map { width: 100%; height: 100%; }
.map-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 30px; color: var(--muted); }
.price-marker { background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 11px; font-weight: 800; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,.25); white-space: nowrap; transform: translate(-50%, -50%); display: inline-block; border: 1px solid rgba(0,0,0,.06); transition: transform .15s; font-family: var(--font); }
.price-marker.is-active, .price-marker:hover { background: var(--ink); color: #fff; transform: translate(-50%, -50%) scale(1.12); z-index: 1000; box-shadow: 0 8px 20px rgba(0,0,0,.35); cursor: pointer; }
/* card highlighted when its map marker is hovered/tapped (both-direction link) */
[data-map-id].is-hl .pcard-media { outline: 3px solid var(--brand); outline-offset: 2px; }
[data-map-id].is-hl .pcard-title a { color: var(--brand); }
.leaflet-div-icon.pm-wrap { background: none; border: 0; }
.map-popup { width: 220px; font-family: var(--font); }
.map-popup img { width: 100%; height: 120px; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.map-popup strong { display: block; font-size: .92rem; line-height: 1.3; margin-bottom: 3px; color: var(--ink); }
.leaflet-popup-content-wrapper { border-radius: 14px !important; }
.leaflet-container { font-family: var(--font) !important; }
.empty-state { text-align: center; padding: 70px 20px; border: 1px dashed var(--line-2); border-radius: var(--radius-lg); }
.empty-state .ei { width: 64px; height: 64px; border-radius: 20px; background: var(--bg-soft); display: grid; place-items: center; margin: 0 auto 18px; color: var(--brand); }
.empty-state h3 { margin-bottom: 8px; }
.empty-state p { color: var(--muted); margin-bottom: 20px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 44px; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 42px; height: 42px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 999px; font-weight: 600; font-size: .92rem; }
.pagination a:hover { background: var(--bg-soft); }
.pagination .is-current { background: var(--ink); color: #fff; }
.pagination .is-disabled { opacity: .35; }

/* ---------------------------------------------------------------- property page */
.prop-top { padding-top: 26px; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: .86rem; color: var(--muted); margin-bottom: 16px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.prop-title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; }
.prop-title-row h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.prop-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; color: var(--ink-2); font-weight: 500; }
.prop-sub span { display: inline-flex; align-items: center; gap: 6px; }
.gallery { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 230px 230px; gap: 10px; border-radius: var(--radius-lg); overflow: hidden; }
.gallery-wrap { position: relative; }
.gallery .gtile { padding: 0; border: 0; background: var(--bg-sand); overflow: hidden; position: relative; }
.gallery .gtile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .3s; }
.gallery .gtile:hover img { transform: scale(1.03); filter: brightness(.94); }
.gallery .gtile:first-child { grid-row: span 2; }
.gallery.count-1 { grid-template-columns: 1fr; grid-template-rows: 470px; }
.gallery.count-2 { grid-template-columns: 2fr 1fr; grid-template-rows: 470px; }
.gallery.count-2 .gtile:first-child, .gallery.count-1 .gtile:first-child { grid-row: auto; }
.gallery.count-3, .gallery.count-4 { grid-template-columns: 2fr 1fr; }
.gallery.count-4 .gtile:nth-child(4) { display: none; }
.gallery-all { position: absolute; right: 16px; bottom: 16px; z-index: 2; }
.prop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; padding-top: 40px; padding-bottom: 40px; align-items: start; }
.keyfacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.keyfact { background: var(--surface); padding: 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.keyfact .icon { color: var(--brand); width: 22px; height: 22px; }
.keyfact strong { font-size: 1.05rem; }
.keyfact span { font-size: .82rem; color: var(--muted); font-weight: 500; }
.prop-section { padding: 36px 0; border-bottom: 1px solid var(--line); }
.prop-section:last-child { border-bottom: 0; }
.prop-section h2 { font-size: 1.4rem; margin-bottom: 20px; }
.prose { color: var(--ink-2); font-size: 1.02rem; line-height: 1.75; white-space: pre-line; }
.prose.is-clamped { max-height: 11.5em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.amenity-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px; list-style: none; padding: 0; margin: 0; }
.amenity-list li { display: flex; align-items: center; gap: 14px; font-weight: 500; }
.amenity-list .icon { width: 24px; height: 24px; color: var(--ink-2); }
.detail-table { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
.detail-table div { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .96rem; }
.detail-table dt { color: var(--muted); }
.detail-table dd { margin: 0; font-weight: 600; }
.owner-card { display: flex; gap: 18px; align-items: center; padding: 22px; border-radius: var(--radius-lg); background: var(--bg-soft); }
.owner-card .avatar { width: 56px; height: 56px; font-size: 1.2rem; }
.owner-card h3 { font-size: 1.08rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prop-map { height: 380px; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-sand); }

.booking-card { position: sticky; top: calc(var(--header-h) + 24px); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow); background: var(--surface); }
.bc-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bc-price strong { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.bc-price .alt { width: 100%; font-size: .86rem; color: var(--muted); }
.bc-fields { margin-top: 20px; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.bc-field { display: block; width: 100%; text-align: left; padding: 11px 16px; background: var(--surface); border: 0; position: relative; }
.bc-field + .bc-field { border-top: 1px solid var(--line-2); }
.bc-field .lbl { display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.bc-field .val { display: block; font-size: .98rem; margin-top: 2px; font-weight: 500; }
.bc-field .val.placeholder { color: var(--muted-2); }
.bc-field select { border: 0; padding: 0; height: 26px; font: inherit; font-size: .98rem; font-weight: 500; background: transparent; width: 100%; appearance: none; cursor: pointer; outline: none; color: var(--ink); }
.bc-field.is-open, .bc-field:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
.bc-field .chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.bc-cal { padding: 14px; border-top: 1px solid var(--line-2); display: none; }
.bc-cal.is-open { display: block; }
.bc-promo { margin-top: 14px; }
.bc-promo summary { font-size: .9rem; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; list-style: none; color: var(--ink-2); }
.bc-promo summary::-webkit-details-marker { display: none; }
.bc-promo .row { margin-top: 10px; }
.bc-promo .input { height: 44px; text-transform: uppercase; }
.bc-error { margin-top: 12px; }
.bc-breakdown { margin-top: 20px; display: grid; gap: 10px; font-size: .95rem; }
.bc-breakdown div { display: flex; justify-content: space-between; gap: 12px; }
.bc-breakdown .disc { color: var(--success); font-weight: 600; }
.bc-breakdown .total { padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--line); font-weight: 800; font-size: 1.05rem; }
.bc-breakdown .alt { color: var(--muted); font-size: .84rem; justify-content: flex-end; }
.bc-note { margin-top: 14px; text-align: center; font-size: .86rem; color: var(--muted); }
.bc-info { margin-top: 18px; display: flex; gap: 10px; padding: 14px; background: var(--bg-soft); border-radius: var(--radius); font-size: .85rem; color: var(--ink-2); }
.bc-info .icon { color: var(--brand); }
.bc-earliest { margin-top: 10px; font-size: .84rem; color: var(--muted); }

/* calendar */
.cal { user-select: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head strong { font-size: .98rem; text-transform: capitalize; }
.cal-head button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; }
.cal-head button:hover:not([disabled]) { background: var(--bg-soft); }
.cal-head button[disabled] { opacity: .25; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-wd { text-align: center; font-size: .72rem; font-weight: 700; color: var(--muted); padding: 6px 0; }
.cal-day { aspect-ratio: 1; border: 0; background: transparent; border-radius: 50%; font-size: .9rem; font-weight: 600; display: grid; place-items: center; position: relative; min-height: 38px; }
.cal-day:hover:not([disabled]) { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cal-day[disabled] { color: #c3c7c2; cursor: default; text-decoration: line-through; text-decoration-color: transparent; }
.cal-day.is-blocked { color: #c3c7c2; text-decoration: line-through; text-decoration-color: #c3c7c2; }
.cal-day.is-selected { background: var(--ink); color: #fff; }
.cal-day.is-range { background: var(--brand-50); border-radius: 0; color: var(--brand-700); }
.cal-day.is-end { background: var(--brand); color: #fff; }
.cal-day.is-today::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.cal-legend { display: flex; gap: 14px; margin-top: 10px; font-size: .78rem; color: var(--muted); }
.cal-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

.mobile-book { display: none; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(8,12,10,.96); display: none; flex-direction: column; color: #fff; }
.lightbox.is-open { display: flex; animation: fade .2s; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; }
.lb-top button { background: rgba(255,255,255,.1); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 70px 20px; min-height: 0; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: 0; color: #fff; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; }
.lb-nav:hover { background: rgba(255,255,255,.22); }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.lb-thumbs { display: flex; gap: 8px; padding: 0 20px 20px; overflow-x: auto; justify-content: center; }
.lb-thumbs button { flex: none; width: 72px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; opacity: .55; background: none; }
.lb-thumbs button.is-active { border-color: #fff; opacity: 1; }
.lb-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- page heads, cards */
.page-head { padding: 56px 0 40px; }
.page-head h1 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin-top: 12px; }
.page-head p { color: var(--muted); font-size: 1.08rem; margin-top: 12px; max-width: 640px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.card-soft { background: var(--bg-soft); border: 0; }
.card h2 { font-size: 1.25rem; }

/* account */
.account-head { padding: 44px 0 10px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin: 26px 0 30px; overflow-x: auto; }
.tabs a { padding: 14px 16px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.tabs a:hover { color: var(--ink); }
.tabs a.is-active { color: var(--ink); border-color: var(--ink); }
.tabs .count { background: var(--bg-soft); border-radius: 999px; padding: 1px 8px; font-size: .78rem; }
.req-list { display: grid; gap: 16px; }
.req-card { display: grid; grid-template-columns: 150px 1fr auto; gap: 22px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); transition: box-shadow .2s, border-color .2s; position: relative; }
.req-card:hover { box-shadow: var(--shadow); border-color: transparent; }
.req-card img { width: 150px; height: 108px; object-fit: cover; border-radius: 12px; }
.req-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.req-card .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; color: var(--ink-2); }
.req-card .meta span { display: inline-flex; align-items: center; gap: 6px; }
.req-card .meta .icon { width: 16px; height: 16px; color: var(--muted); }
.req-card .side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.req-card .stretched::after { content: ""; position: absolute; inset: 0; }
.req-card .actions { position: relative; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.req-card .req-docs { position: relative; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 640px) { .req-card .req-docs .btn { flex: 1 1 auto; justify-content: center; } }
.status-hero { padding: 28px; border-radius: var(--radius-lg); display: flex; gap: 18px; align-items: flex-start; }
.status-hero .sh-icon { width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.7); display: grid; place-items: center; flex: none; }
.status-hero h2 { font-size: 1.3rem; margin-bottom: 6px; }
.status-hero.review { background: var(--accent-50); color: #5f3e0a; }
.status-hero.approved, .status-hero.confirmed { background: var(--success-50); color: #124a2f; }
.status-hero.not_accepted { background: var(--danger-50); color: #7b2416; }
.status-hero.cancelled, .status-hero.expired { background: var(--bg-soft); color: var(--ink-2); }
.summary-list { display: grid; gap: 12px; }
.summary-list div { display: flex; justify-content: space-between; gap: 16px; font-size: .97rem; }
.summary-list dt { color: var(--muted); }
.summary-list dd { margin: 0; font-weight: 600; text-align: right; }
.summary-list .total { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; font-size: 1.08rem; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }

/* auth */
.auth-wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--header-h)); }
.auth-side { position: relative; color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; background: var(--brand-700); }
.auth-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.auth-side::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,20,16,.1), rgba(8,20,16,.75)); }
.auth-side h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); max-width: 480px; }
.auth-side p { opacity: .88; margin-top: 12px; max-width: 440px; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-box { width: 100%; max-width: 440px; }
.auth-box h1 { font-size: 2rem; }
.auth-box > p { color: var(--muted); margin-top: 10px; }
.auth-box form { margin-top: 30px; display: grid; gap: 18px; }
.auth-alt { margin-top: 26px; text-align: center; color: var(--muted); font-size: .95rem; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 52px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; color: var(--muted); border-radius: 50%; display: grid; place-items: center; }
.pw-toggle:hover { background: var(--bg-soft); }
/* two-step register */
[data-reg-step] { display: grid; gap: 18px; }
[data-reg-step][hidden] { display: none; }
.reg-steplbl { margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.reg-back { display: inline-flex; align-items: center; gap: 4px; justify-self: start; background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; font-size: .9rem; }
.reg-back:hover { color: var(--ink); }
.reg-geo { display: flex; align-items: center; justify-content: center; gap: 8px; }
.reg-geo.is-asked { border-color: var(--brand); color: var(--brand); }
/* owner document notice on the listing form */
.owner-docs { margin-bottom: 20px; }
.owner-docs h2 { display: flex; align-items: center; gap: 10px; }
.owner-docs h2 .icon-sm { color: var(--brand); flex: none; }
.owner-docs-lead { color: var(--ink-2); margin: 0 0 16px; }
.owner-docs-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.owner-docs-list li { display: flex; gap: 12px; align-items: flex-start; }
.owner-docs-list li .icon-sm { color: var(--brand); flex: none; margin-top: 2px; }
.owner-docs-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); font-size: .88rem; color: var(--ink-2); margin: 0; }
.owner-docs-note .icon-sm { color: var(--brand); flex: none; margin-top: 2px; }

/* listing form */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; padding-bottom: 80px; }
.form-section { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.form-section + .form-section { margin-top: 20px; }
.form-section h2 { font-size: 1.15rem; margin-bottom: 22px; display: flex; align-items: center; gap: 12px; }
.form-section h2 .num { width: 30px; height: 30px; border-radius: 10px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; font-size: .86rem; }
.form-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 14px; }
.dropzone { position: relative; border: 1.5px dashed var(--line-2); border-radius: var(--radius); padding: 34px 20px; text-align: center; background: var(--bg-soft); transition: all .2s; cursor: pointer; }
.dropzone:hover, .dropzone.is-over { border-color: var(--brand); background: var(--brand-50); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone .icon { width: 30px; height: 30px; color: var(--brand); margin: 0 auto 10px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; }
.photo-grid figure { margin: 0; position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: var(--bg-sand); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid .ph-tag { position: absolute; top: 8px; left: 8px; }
.photo-grid form { position: absolute; top: 6px; right: 6px; }
.photo-grid form button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
/* high-contrast per-photo delete button — visible on any image (light or dark) */
.photo-grid .ph-del-wrap { position: absolute; top: 6px; right: 6px; }
.photo-grid .ph-del { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); background: rgba(21,32,28,.7); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.45); backdrop-filter: blur(3px); transition: background .15s, transform .15s; }
.photo-grid .ph-del:hover { background: var(--danger, #c0392b); transform: scale(1.08); }
.photo-grid .ph-del .icon-sm { width: 16px; height: 16px; }
.counter { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--radius-sm); height: 50px; overflow: hidden; background: var(--surface); }
.counter button { width: 46px; height: 100%; border: 0; background: transparent; font-size: 1.2rem; color: var(--ink-2); }
.counter button:hover { background: var(--bg-soft); }
.counter input { flex: 1; min-width: 0; border: 0; text-align: center; font: inherit; font-weight: 700; height: 100%; outline: none; -moz-appearance: textfield; }
.counter input::-webkit-outer-spin-button, .counter input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* about / contact */
.about-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding: 64px 0 40px; }
.about-hero img { border-radius: var(--radius-xl); aspect-ratio: 4/4.2; object-fit: cover; width: 100%; }
.about-hero p { color: var(--ink-2); font-size: 1.12rem; line-height: 1.75; margin-top: 20px; }
/* About — team */
.about-team { display: grid; grid-template-columns: .9fr 1.25fr; gap: 48px; align-items: center; padding: 28px 0; }
.about-team-photo { margin: 0; }
.about-team-photo img { width: 100%; border-radius: var(--radius-xl); aspect-ratio: 16/9; object-fit: cover; box-shadow: 0 18px 46px rgba(0,0,0,.10); }
/* About — local agents */
.about-agents { padding: 20px 0 8px; }
.agents-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.agent-card { margin: 0; position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.10); }
.agent-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.agent-card:hover img { transform: scale(1.04); }
.agent-card figcaption { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: rgba(15,20,25,.62); color: #fff; font-weight: 600; font-size: .9rem; backdrop-filter: blur(4px); }
@media (max-width: 860px) { .about-team { grid-template-columns: 1fr; gap: 22px; } .agents-grid { grid-template-columns: 1fr; } }
.stats { display: flex; gap: 46px; margin-top: 36px; flex-wrap: wrap; }
.stats strong { display: block; font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; color: var(--brand); }
.stats span { color: var(--muted); font-weight: 500; }
.cta-band { background: var(--bg-sand); border-radius: var(--radius-xl); padding: 56px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr; gap: 40px; padding-bottom: 80px; align-items: start; }
.contact-item { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.contact-item .ci { width: 46px; height: 46px; border-radius: 14px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; flex: none; }

/* error pages */
.error-page { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 24px; }
.error-page .code { font-size: clamp(4rem, 12vw, 7.5rem); font-weight: 800; letter-spacing: -.05em; color: var(--brand-100); line-height: 1; }
.error-page h1 { font-size: 2rem; margin: 10px 0 12px; }
.error-page p { color: var(--muted); max-width: 460px; margin: 0 auto 26px; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal[data-dir="left"] { transform: translateX(-46px); }
.reveal[data-dir="right"] { transform: translateX(46px); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 > :nth-child(n+7) { display: none; }
  .prop-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; }
  .results-layout { grid-template-columns: minmax(0, 1fr) 36%; }
  .steps, .features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  :root { --header-h: 64px; }
  .main-nav, .header-actions .hide-md { display: none; }
  .menu-toggle { display: inline-flex; }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 > :nth-child(n+7) { display: flex; }
  .searchbar { grid-template-columns: 1fr 1fr; border-radius: var(--radius-lg); gap: 4px; }
  .searchbar .sb-field { border-radius: 12px; }
  .searchbar .sb-field:first-child { grid-column: 1 / -1; }
  .searchbar .sb-field + .sb-field::before { display: none; }
  .searchbar .btn { grid-column: 1 / -1; min-height: 52px; border-radius: 12px; }
  .dest-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .owners-band { grid-template-columns: 1fr; }
  .owners-band .ob-media { min-height: 260px; order: -1; }
  .owners-band .ob-content { padding: 36px 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .results-layout { display: block; }
  .results-list { padding: 22px 20px 100px; }
  .map-panel { display: none; position: fixed; inset: calc(var(--header-h) + 75px) 0 0 0; height: auto; z-index: 50; }
  body.show-map .map-panel { display: block; }
  body.show-map .results-list { display: none; }
  .view-toggle { display: inline-flex; position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; box-shadow: var(--shadow-lg); }
  .prop-layout { grid-template-columns: 1fr; gap: 0; }
  .booking-card { position: static; box-shadow: none; margin-top: 10px; }
  .mobile-book { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--surface); border-top: 1px solid var(--line); padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); align-items: center; justify-content: space-between; gap: 16px; box-shadow: 0 -10px 30px -18px rgba(0,0,0,.3); }
  .mobile-book strong { font-size: 1.15rem; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 280px 140px; }
  .gallery .gtile:first-child { grid-column: 1 / -1; grid-row: auto; }
  .gallery .gtile:nth-child(n+4) { display: none; }
  .two-col, .form-layout, .contact-grid, .about-hero { grid-template-columns: 1fr; }
  .form-aside { position: static; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .keyfacts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .fsearch { width: 100%; }
  .fsearch .f-city { flex: 1; width: auto; }
  .fsearch .f-date { width: 108px; font-size: .82rem; }
  .fpill .dropdown-panel { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0 !important; }
  .filters-spacer { display: none; }
  .section { padding: 60px 0; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .grid-4, .grid-3, .grid-2, .results-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-content { padding-bottom: 44px; padding-top: calc(var(--header-h) + 40px); }
  .searchbar { grid-template-columns: 1fr; }
  .searchbar .sb-field:first-child { grid-column: auto; }
  .dest-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; gap: 12px; }
  .dest-card { padding: 16px; }
  .dest-card h3, .dest-card:nth-child(1) h3 { font-size: 1.2rem; }
  .dest-card .arrow { display: none; }
  .steps, .features { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .form-grid, .form-grid-3 { grid-template-columns: 1fr 1fr; }
  .form-section { padding: 22px 18px; }
  .amenity-list, .detail-table { grid-template-columns: 1fr; }
  .req-card { grid-template-columns: 96px 1fr; }
  .req-card img { width: 96px; height: 80px; }
  .req-card .side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
  .prop-title-row { flex-direction: column; align-items: flex-start; }
  .lb-stage { padding: 0 10px 10px; }
  .lb-nav { display: none; }
  .cta-band { padding: 32px 24px; }
  .owners-band .ob-content { padding: 30px 22px; }
  .flash-stack { left: 12px; right: 12px; max-width: none; }
}

/* =========================================================================
   Property page — two columns, section cards, sticky booking column
   ========================================================================= */
body.page-soft { background: var(--bg-soft); }
body.page-soft .site-header:not(.is-scrolled) { background: rgba(247, 246, 242, .96); }
.pp-top { padding-top: 22px; }
.pp-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.pp-back:hover { text-decoration-color: currentColor; }
.pp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; grid-template-areas: "gallery side" "main side"; gap: 20px 32px; align-items: start; padding-top: 16px; padding-bottom: 56px; }
.pp-gallery-wrap { grid-area: gallery; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pp-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.pp-gallery { position: relative; display: grid; grid-template-columns: 2.1fr 1fr; grid-template-rows: 205px 205px; gap: 8px; border-radius: var(--radius-lg); overflow: hidden; }
.pp-gallery .gtile { padding: 0; border: 0; background: var(--bg-sand); overflow: hidden; }
.pp-gallery .gtile:first-child { grid-row: span 2; }
.pp-gallery .gtile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .3s; }
.pp-gallery .gtile:hover img { transform: scale(1.03); filter: brightness(.95); }
.pp-gallery.count-1 { grid-template-columns: 1fr; grid-template-rows: 420px; }
.pp-gallery.count-1 .gtile:first-child, .pp-gallery.count-2 .gtile:first-child { grid-row: auto; }
.pp-gallery.count-2 { grid-template-rows: 420px; }
/* Airbnb-style galleries: 4 photos = clean 2×2, 5+ = one big + four small */
.pp-gallery.count-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 206px 206px; }
.pp-gallery.count-4 .gtile:first-child { grid-row: auto; grid-column: auto; }
.pp-gallery.count-5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 206px 206px; }
.pp-gallery.count-5 .gtile:first-child { grid-column: 1; grid-row: span 2; }
.pp-allphotos { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--surface); font-weight: 700; font-size: .86rem; box-shadow: var(--shadow-sm); }
.pp-allphotos:hover { background: var(--bg-soft); }
.pp-mediachips { display: flex; gap: 8px; margin-top: -8px; }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: .84rem; font-weight: 600; }
.pp-chip:hover { border-color: var(--ink); }

.pp-head h1 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
.pp-specs { margin-top: 8px; font-size: 1.02rem; color: var(--ink-2); }
.pp-loc { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .92rem; }

.hl-icon { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; }
.hl-icon .icon { width: 21px; height: 21px; }
.hl-icon.sm { width: 34px; height: 34px; }
.pp-highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.pp-highlights li { display: flex; gap: 14px; align-items: flex-start; }
.pp-highlights strong { font-size: 1rem; }
.pp-highlights p { color: var(--muted); font-size: .92rem; margin-top: 2px; }
.pp-help { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--bg-sand); }
.pp-help > div { flex: 1; min-width: 0; }
.pp-help p { color: var(--ink-2); font-size: .9rem; }
.pp-help .hl-icon { background: var(--surface); }

.pp-nav { position: sticky; top: var(--header-h); z-index: 40; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; background: var(--bg-soft); border-bottom: 1px solid var(--line); margin: 0 -2px; padding: 0 2px; }
.pp-nav::-webkit-scrollbar { display: none; }
.pp-nav a { flex: none; padding: 14px 12px; font-weight: 600; font-size: .92rem; color: var(--ink-2); border-bottom: 2.5px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.pp-nav a:hover { color: var(--ink); }
.pp-nav a.is-active { color: var(--ink); border-color: var(--brand); }

.pp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; scroll-margin-top: calc(var(--header-h) + 64px); }
.pp-card h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: 18px; }
.pp-sub { font-size: 1rem; font-weight: 700; margin: 24px 0 12px; }
.pp-card h2 + .pp-sub { margin-top: 0; }
.pp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .88rem; font-weight: 500; background: var(--surface); }
.pp-pill .icon-sm { color: var(--ink-2); }
.pp-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 0; }
.pp-dl div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .94rem; }
.pp-dl dt { color: var(--muted); }
.pp-dl dd { margin: 0; font-weight: 600; text-align: right; }
.pp-more { background: none; border: 0; padding: 0; margin-top: 12px; }

.pp-rules { display: grid; gap: 0; }
.pp-rule { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.pp-rule-val { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pp-rule-val.yes { color: var(--success); }
.pp-rule-val.no { color: var(--danger); }
.pp-rule-val.muted { color: var(--muted); font-weight: 500; }

.pp-eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 4px; }
.pp-card h2 + .pp-eyebrow { margin-top: 0; }
.pp-price-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .96rem; }
/* Price: amount in its own currency big, EUR equivalent small underneath */
.price-eur { display: block; font-size: .6em; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-top: 1px; line-height: 1.2; }
.pp-price-row strong { text-align: right; }
.pp-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: var(--bg-soft); color: var(--muted); }
.pp-tag.good { background: var(--success-50); color: var(--success); }
.pp-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: .86rem; color: var(--muted); }
.pp-note .icon-sm { margin-top: 2px; }
.pp-check { display: flex; gap: 8px; align-items: center; color: var(--ink-2); }
.pp-check .icon-sm { color: var(--success); }
.pp-tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pp-tiers li { display: flex; gap: 12px; align-items: center; font-size: .95rem; }
.pp-tier { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pp-tier.good { background: var(--success); }
.pp-tier.mid { background: var(--accent); }
.pp-tier.bad { background: var(--danger); }

.pp-owner-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pp-owner-head .avatar { width: 64px; height: 64px; font-size: 1.4rem; }
.pp-owner-head h2 { margin: 0; }
.pp-owner-head > div { flex: 1; min-width: 160px; }
.pp-owner-stats { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; padding: 18px 20px; background: var(--bg-sand); border-radius: var(--radius); }
.pp-owner-stats strong { display: block; font-size: 1.15rem; }
.pp-owner-stats span { font-size: .8rem; color: var(--muted); }

.pp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pp-steps li { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pp-steps li:last-child { border-bottom: 0; }
.pp-step-n { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-weight: 800; font-size: .86rem; }
.pp-steps p { color: var(--muted); font-size: .92rem; margin-top: 2px; }
.pp-policies { display: grid; gap: 12px; margin-top: 16px; }
.pp-policy { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.pp-policy p { color: var(--muted); font-size: .9rem; margin-top: 2px; }

.pp-years { display: grid; gap: 16px; margin-top: 20px; }
.pp-year-label { font-weight: 700; font-size: .9rem; margin-bottom: 8px; }
.pp-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.pp-month { text-align: center; padding: 9px 2px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 6px; }
.pp-month.free { background: var(--success-50); color: var(--success); }
.pp-month.partial { background: repeating-linear-gradient(135deg, #fbe7c4, #fbe7c4 5px, #fdf3e2 5px, #fdf3e2 10px); color: #8a5a10; }
.pp-month.taken { background: repeating-linear-gradient(135deg, #f3cfc8, #f3cfc8 5px, #fbecea 5px, #fbecea 10px); color: var(--danger); }
.pp-month.past { background: var(--bg-soft); color: var(--muted-2); }
.pp-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: .82rem; color: var(--ink-2); }
.pp-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pp-legend i { width: 18px; height: 12px; border-radius: 3px; }
.pp-legend i.free { background: var(--success-50); border: 1px solid #b9e0c9; }
.pp-legend i.partial { background: #fbe7c4; }
.pp-legend i.taken { background: #f3cfc8; }

.pp-side { grid-area: side; position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 16px; align-self: start; }
.pp-side .booking-card { position: static; box-shadow: var(--shadow-sm); }
.bc-lead { margin-top: 6px; color: var(--muted); font-size: .9rem; }
.bc-field-ro { background: var(--bg-soft); }
.bc-breakdown .dep { color: var(--muted); font-size: .88rem; border-top: 1px dashed var(--line); padding-top: 10px; }
.pp-sidecard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px 20px 14px; }
.pp-side-label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px; }
.pp-acc summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 9px 0; cursor: pointer; font-weight: 600; font-size: .92rem; }
.pp-acc summary::-webkit-details-marker { display: none; }
.pp-acc .acc-chev { margin-left: auto; color: var(--muted); transition: transform .2s; }
.pp-acc[open] .acc-chev { transform: rotate(180deg); }
.pp-acc p { padding: 0 0 10px 46px; font-size: .86rem; color: var(--muted); }

.rooms-list { display: grid; gap: 12px; }
.room-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 12px; background: var(--surface); }
.room-row-head { display: flex; gap: 12px; align-items: flex-end; }

.pcard-badges .badge-soft-green { background: rgba(255,255,255,.92); color: var(--success); }

@media (max-width: 1180px) { .pp-layout { grid-template-columns: minmax(0, 1fr) 350px; } }
@media (max-width: 980px) {
  .pp-layout { grid-template-columns: 1fr; grid-template-areas: "gallery" "side" "main"; }
  .pp-side { position: static; }
  /* on phones the booking box sits right under the photos, the rest of the details below it */
  .pp-side .booking-card { position: static; }
  /* phone gallery: one big hero photo + "Show all photos"; the rest open in the lightbox */
  .pp-gallery, .pp-gallery.count-4, .pp-gallery.count-5 { grid-template-columns: 1fr; grid-template-rows: 300px; }
  .pp-gallery .gtile:first-child { grid-column: auto; grid-row: auto; }
  .pp-gallery .gtile:not(:first-child) { display: none; }
}
@media (max-width: 640px) {
  .pp-card { padding: 20px 18px; }
  .pp-dl { grid-template-columns: 1fr; }
  .pp-months { grid-template-columns: repeat(4, 1fr); }
  .pp-help { flex-wrap: wrap; }
  .room-row-head { flex-wrap: wrap; }
}
.pcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pcard-tags span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.pcard-tags .icon-sm { width: 13px; height: 13px; }

/* ---------------------------------------------------------------- favourites, share, booking box grid */
.fav-btn { position: absolute; top: 10px; right: 10px; z-index: 4; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--ink); box-shadow: var(--shadow-xs); transition: transform .15s var(--ease), background .15s; }
.fav-btn:hover { transform: scale(1.08); background: var(--surface); }
.fav-btn .icon { width: 19px; height: 19px; }
.fav-btn.is-saved, .fav-inline.is-saved { color: #e0484d; }
.fav-btn.is-saved svg, .fav-inline.is-saved svg { fill: currentColor; }
.fav-btn.pop svg, .fav-inline.pop svg { animation: fav-pop .35s var(--ease); }
@keyframes fav-pop { 40% { transform: scale(1.35); } }
.pcard-badges { right: 56px; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); display: grid; place-items: center; color: var(--ink); transition: border-color .15s, background .15s; }
.icon-btn:hover { border-color: var(--ink); }
.bc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bc-top .bc-lead { margin: 0; font-weight: 700; color: var(--ink); font-size: 1.02rem; line-height: 1.35; max-width: 210px; }
.bc-actions { display: flex; gap: 8px; }
.bc-grid { display: grid; grid-template-columns: 1fr 1fr; }
.bc-grid .bc-field + .bc-field { border-top: 0; }
.bc-grid > .bc-field:first-child { border-right: 1px solid var(--line-2); }
.bc-grid .bc-cal { grid-column: 1 / -1; border-top: 1px solid var(--line-2); }
.bc-grid .bc-span { grid-column: 1 / -1; border-top: 1px solid var(--line-2) !important; }
.landlord-btn { border-color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 600; font-size: .9rem; opacity: 0; transition: all .25s var(--ease); z-index: 500; pointer-events: none; box-shadow: var(--shadow-lg); }
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.mobile-book strong { white-space: nowrap; }
@media (max-width: 640px) {
  .pp-help > div { flex: 1 1 200px; }
  .pp-help .btn { width: 100%; }
  .mobile-book .muted { display: none; }
}

/* preview banner on the public site */
.preview-bar { position: sticky; top: 0; z-index: 150; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: #15201c; color: #fff; font-size: .88rem; font-weight: 600; }
.imp-bar { position: sticky; top: 0; z-index: 150; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 9px 16px; background: #7a3e00; color: #fff; font-size: .88rem; font-weight: 600; }
.imp-bar .imp-back { height: 32px; padding: 0 14px; border-radius: 999px; background: var(--surface); color: #7a3e00; font-weight: 700; font-size: .82rem; display: inline-flex; align-items: center; gap: 4px; }
.preview-bar form { display: inline; }
.preview-bar button, .preview-bar a { height: 34px; padding: 0 14px; border-radius: 999px; border: 0; font-weight: 700; font-size: .84rem; display: inline-flex; align-items: center; }
.preview-bar .pb-save { background: var(--surface); color: #15201c; }
.preview-bar .pb-ghost { background: rgba(255,255,255,.12); color: #fff; }

/* ---------------------------------------------------------------- listing video */
.pp-chip-video{background:var(--ink);color:#fff;border-color:var(--ink)}
.pp-chip-video:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.video-modal{position:fixed;inset:0;z-index:1000;background:rgba(10,12,14,.92);display:flex;align-items:center;justify-content:center;padding:56px 16px 24px}
.video-modal[hidden]{display:none!important}
.vm-stage{width:min(1100px,100%);aspect-ratio:16/9;max-height:calc(100vh - 100px);background:#000;border-radius:var(--radius,12px);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.vm-stage video,.vm-stage iframe{width:100%;height:100%;border:0;display:block;background:#000}
.vm-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}
.vm-close:hover{background:rgba(255,255,255,.24)}
.video-current{display:grid;gap:10px;margin-bottom:16px}
.video-current video{width:100%;max-height:280px;border-radius:12px;background:#000}

/* ---------------------------------------------------------------- access passes */
.unlock-link { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 700; }
.access-hero { background: var(--bg-soft); padding: 56px 0 120px; text-align: center; }
.access-hero-in { max-width: 760px; }
.access-hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; margin: 16px 0 14px; }
.access-hero .lead { font-size: 1.08rem; color: var(--ink-2); max-width: 600px; margin: 0 auto; }
.eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-weight: 700; font-size: .85rem; }
.access-wrap { margin-top: -84px; padding-bottom: 90px; display: grid; gap: 28px; }
.access-banner { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.access-banner.is-ok { border-color: var(--success); }
.access-banner.is-ok > .icon { color: var(--success); }
.access-banner > div { flex: 1; display: grid; gap: 2px; }
.access-banner span { color: var(--muted); font-size: .92rem; }
.pass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; align-items: stretch; }
.pass-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px 26px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.pass-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pass-card.is-popular { border: 2px solid var(--cta); box-shadow: var(--shadow); }
.pass-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--cta); color: var(--cta-ink); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.pass-days { font-weight: 700; color: var(--ink-2); font-size: 1.05rem; }
.pass-price { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pass-perday { color: var(--muted); font-size: .9rem; min-height: 1.4em; }
.pass-perday strong { color: var(--success); }
.pass-list { list-style: none; padding: 0; margin: 16px 0 22px; display: grid; gap: 10px; flex: 1; }
.pass-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.pass-list .icon { color: var(--brand); flex: none; margin-top: 2px; }
.access-order { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); display: grid; gap: 20px; scroll-margin-top: 90px; }
.ao-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ao-head h2 { font-size: 1.5rem; margin-top: 4px; }
.ao-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); }
.ao-pay { display: grid; gap: 14px; }
.ao-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.ao-method { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; font-weight: 600; font-size: .92rem; background: var(--surface); }
.ao-method input { position: absolute; opacity: 0; pointer-events: none; }
.ao-method.is-on { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); box-shadow: inset 0 0 0 1px var(--brand); }
.ao-method-note { display: flex; gap: 8px; align-items: center; font-size: .9rem; color: #8a5a10; background: var(--accent-50); padding: 10px 14px; border-radius: 12px; }
.ao-method-note[hidden] { display: none !important; }
.ao-bank { margin: 0; display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ao-bank > div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 13px 16px; align-items: center; }
.ao-bank > div + div { border-top: 1px solid var(--line); }
.ao-bank dt { color: var(--muted); font-size: .88rem; }
.ao-bank dd { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ao-bank code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .98rem; font-weight: 700; letter-spacing: .03em; }
.copy-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 4px 10px; font-size: .78rem; font-weight: 700; cursor: pointer; color: var(--ink-2); }
.copy-btn:hover { border-color: var(--brand); color: var(--brand); }
.copy-btn.is-done { background: var(--success-50); border-color: var(--success); color: var(--success); }
.ao-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.access-order .help { display: flex; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--info-50); color: var(--info); }
.access-how h2, .access-history h2 { font-size: 1.5rem; margin-bottom: 18px; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.how-grid > div { background: var(--bg-soft); border-radius: var(--radius); padding: 22px; }
.how-grid h3 { font-size: 1.05rem; margin: 12px 0 6px; }
.how-grid p { color: var(--ink-2); font-size: .95rem; }
.how-n { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; }
.access-how .muted .icon { vertical-align: -3px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.simple-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.simple-table th, .simple-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.simple-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--bg-soft); }
.simple-table tr:last-child td { border-bottom: 0; }
.center { text-align: center; }
@media (max-width: 640px) {
  .ao-bank > div { grid-template-columns: 1fr; gap: 4px; }
  .access-order { padding: 20px; }
  .access-hero { padding: 36px 0 100px; }
}

/* locked cards + modal + banner */
.pcard.is-locked { cursor: pointer; }
.pcard.is-locked .pcard-media img { filter: blur(14px) saturate(1.1); transform: scale(1.15); }
.lock-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.28)); color: #fff; }
.lock-ic { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow); transition: transform .2s; }
.lock-txt { font-weight: 800; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.pcard.is-locked:hover .lock-ic, .pcard.is-locked:focus-visible .lock-ic { transform: scale(1.08); background: var(--cta); color: var(--cta-ink); }
.lock-bar { display: grid; gap: 7px; margin: 8px 0 10px; }
.lock-bar i { display: block; height: 11px; border-radius: 6px; background: var(--line); width: 92%; }
.lock-bar i + i { width: 60%; }
.lock-price { display: flex; align-items: center; gap: 7px; color: var(--brand); font-weight: 700; font-size: .92rem; }
.locked-banner { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius); background: var(--brand-50); border: 1px solid var(--brand-100); margin-bottom: 22px; }
.locked-banner > div { flex: 1; }
.locked-banner p { color: var(--ink-2); font-size: .93rem; margin-top: 2px; }
.lb-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--surface); color: var(--brand); display: grid; place-items: center; flex: none; }
@media (max-width: 720px) { .locked-banner { flex-wrap: wrap; } .locked-banner .btn { width: 100%; } }
.map-locked { background: rgba(247, 246, 242, .9); cursor: pointer; color: var(--ink-2); z-index: 500; }
.map-locked p { margin: 10px 0 14px; max-width: 260px; }
.lock-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 20, 18, .55); display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(3px); }
.lock-modal[hidden] { display: none !important; }
.lm-card { position: relative; width: min(460px, 100%); background: var(--surface); border-radius: var(--radius-lg); padding: 34px 28px 26px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.3); animation: lmIn .22s ease-out; }
@keyframes lmIn { from { transform: translateY(14px); opacity: 0; } }
.lm-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--bg-soft); display: grid; place-items: center; cursor: pointer; }
.lm-ic { width: 60px; height: 60px; border-radius: 18px; background: var(--brand-50); color: var(--brand); display: inline-grid; place-items: center; margin-bottom: 14px; }
.lm-card h2 { font-size: 1.45rem; margin-bottom: 8px; }
.lm-card > p { color: var(--ink-2); }
.lm-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0; }
.lm-pack { display: grid; gap: 2px; padding: 12px 6px; border: 1px solid var(--line-2); border-radius: 12px; font-size: .85rem; color: var(--ink-2); }
.lm-pack strong { font-size: 1.1rem; color: var(--ink); }
.lm-pack.is-popular { border: 2px solid var(--cta); }
.lm-pack:hover { border-color: var(--brand); }

/* ---------------------------------------------------------------- setup wizard */
.setup-wrap { max-width: 680px; padding: 40px 16px 90px; }
.setup-h1 { font-size: clamp(1.8rem, 4vw, 2.3rem); margin: 10px 0 10px; }
.setup-card { display: grid; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; margin-top: 22px; box-shadow: var(--shadow-sm); }
.setup-steps { list-style: none; padding: 0; margin: 0 0 28px; display: flex; gap: 8px; flex-wrap: wrap; }
.setup-steps li { display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); font-weight: 600; font-size: .88rem; }
.setup-steps li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: .8rem; font-weight: 800; }
.setup-steps li.is-current { background: var(--brand-50); color: var(--brand-700); }
.setup-steps li.is-current span { background: var(--brand); color: #fff; }
.setup-steps li.is-done span { background: var(--success); color: #fff; }
.setup-checks summary { cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; list-style: none; }
.setup-checks summary::-webkit-details-marker { display: none; }
.setup-checks summary .t-sub { font-weight: 500; color: var(--muted); font-size: .88rem; margin-left: auto; }
.sc-ok, .sc-bad { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; background: var(--success); font-size: .85rem; }
.sc-bad { background: var(--danger); }
.setup-checks ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.setup-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; }
.setup-checks li p { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.setup-checks .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; flex: none; background: var(--success-50); color: var(--success); }
.setup-checks li.bad .dot { background: var(--danger-50); color: var(--danger); }
.setup-checks li.warn .dot { background: var(--accent-50); color: #8a5a10; }
.setup-adv summary { cursor: pointer; font-weight: 600; color: var(--brand); font-size: .9rem; }
.setup-manual textarea { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; }
.seg-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-radio label { cursor: pointer; }
.seg-radio input { position: absolute; opacity: 0; }
.seg-radio span { display: inline-block; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 12px; font-weight: 600; font-size: .92rem; }
.seg-radio span em { font-style: normal; color: var(--muted); font-weight: 500; }
.seg-radio input:checked + span { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); box-shadow: inset 0 0 0 1px var(--brand); }
.seg-radio input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.alert-error { background: var(--danger-50); color: var(--danger); padding: 12px 14px; border-radius: 12px; font-weight: 600; font-size: .92rem; }
[data-mysql-fields] { display: grid; gap: 16px; } [data-mysql-fields][hidden] { display: none; }
.setup-code { margin: 0; padding: 14px 16px; background: #15201c; color: #e9f3ef; border-radius: 12px; font-size: .85rem; line-height: 1.6; overflow-x: auto; }
.setup-code mark { background: #e9a23b; color: #2b1d05; border-radius: 4px; padding: 0 3px; }

/* ---------------------------------------------------------------- avatars + verified profile */
.avatar { position: relative; flex: none; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar.has-photo-1 { background: var(--bg-soft); }
.avatar-check { position: absolute; right: -2px; bottom: -2px; width: 40%; height: 40%; min-width: 14px; min-height: 14px; border-radius: 50%; background: var(--success); color: #fff; display: grid; place-items: center; border: 2px solid #fff; }
.avatar-check .icon { width: 70%; height: 70%; stroke-width: 3.2; }
.badge-idv { background: var(--success-50); color: var(--success); }
.avatar-xl { width: 96px; height: 96px; font-size: 2rem; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; position: relative; flex: none; }
.avatar-xl img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar-xl.has-photo-1 { background: var(--bg-soft); }
.profile-photo { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.profile-photo .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.verify-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 14px; }
.verify-status { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--bg-soft); }
.verify-status.is-ok { background: var(--success-50); color: var(--success); }
.verify-status.is-wait { background: var(--info-50); color: var(--info); }
.verify-status.is-bad { background: var(--danger-50); color: var(--danger); }
.file-btn { position: relative; overflow: hidden; }
.file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* landlord + verification info disclosures (owner card) */
.pp-owner-more { margin-top: 16px; display: grid; gap: 8px; }
.info-disc { border: 1px solid var(--line); border-radius: var(--radius-md, 12px); background: var(--surface); }
.info-disc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 13px 15px; font-weight: 650; }
.info-disc > summary::-webkit-details-marker { display: none; }
.info-disc > summary > span { flex: 1; }
.info-disc[open] .acc-chev { transform: rotate(180deg); }
.info-disc .acc-chev { transition: transform .2s ease; color: var(--muted); }
.info-body { padding: 2px 15px 16px; }
.info-lead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.info-h { font-size: 1.05rem; margin: 4px 0 8px; }
.info-sub { margin: 0 0 4px; }
.info-check { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
.info-check li { display: flex; align-items: flex-start; gap: 9px; font-size: .92rem; }
.info-check li svg { color: var(--brand); flex: none; margin-top: 2px; }
/* contact modal (opens via :target so it works without JS) */
.modal { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.modal:target { display: flex; }
.modal.is-open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(12, 20, 17, .55); backdrop-filter: blur(2px); }
.modal-box { position: relative; z-index: 1; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; background: var(--surface); border-radius: var(--radius-lg, 18px); padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.28); animation: modal-in .2s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-head h2 { font-size: 1.25rem; }
.modal-x { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--muted); background: var(--bg-soft, #f2f2ef); text-decoration: none; }
.modal-x:hover { background: var(--line, #e5e5e0); color: var(--ink); }
body.modal-open { overflow: hidden; }
body.modal-open .chat-widget { display: none; }

/* Listing distribution diagram (landlords page) — hub → partner channels, two-way */
.syn { display: grid; grid-template-columns: minmax(200px, 260px) auto 1fr; align-items: center; gap: 22px; margin-top: 28px; }
.syn-hub { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 24px 18px; background: var(--brand); color: #fff; border-radius: var(--radius-lg, 18px); box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--brand) 70%, transparent); }
.syn-hub .muted { color: rgba(255,255,255,.85); }
.syn-hub-ic { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; }
.syn-hub-ic .icon { width: 24px; height: 24px; }
.syn-hub strong { font-size: 1.15rem; }
.syn-flow { display: grid; gap: 10px; }
.syn-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.syn-out { background: var(--brand-50, #e8f3ee); color: var(--brand-700, #1d4f40); }
.syn-in { background: var(--bg-soft, #f2f2ef); color: var(--ink-2, #4a4a44); }
.syn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.syn-node { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius, 12px); box-shadow: var(--shadow-xs); }
.syn-node > span:last-child { display: grid; line-height: 1.25; }
.syn-node-ic { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--brand-50, #e8f3ee); color: var(--brand, #1d6f57); display: grid; place-items: center; }
.syn-node-logo { flex: none; width: 40px; height: 32px; display: grid; place-items: center; overflow: hidden; }
.syn-node-logo img { max-width: 40px; max-height: 32px; object-fit: contain; }
.syn-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
@media (max-width: 900px) {
  .syn { grid-template-columns: 1fr; gap: 16px; }
  .syn-flow { grid-auto-flow: column; justify-content: center; }
}
@media (max-width: 520px) { .syn-grid { grid-template-columns: 1fr; } }

/* Secure step-by-step flow (how it works) */
.flow-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 28px; }
.flow-step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg, 18px); padding: 22px 18px; box-shadow: var(--shadow-xs); }
.flow-num { position: absolute; top: -14px; left: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: .9rem; display: grid; place-items: center; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 70%, transparent); }
.flow-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--brand-50, #e8f3ee); color: var(--brand, #1d6f57); margin: 8px 0 14px; }
.flow-ic .icon { width: 24px; height: 24px; }
.flow-step h3 { font-size: 1rem; margin: 0 0 6px; }
.flow-step p { color: var(--ink-2, #4a4a44); line-height: 1.5; font-size: .92rem; margin: 0; }
.flow-safe { margin-top: 28px; background: color-mix(in srgb, var(--brand) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); border-radius: var(--radius-lg, 18px); padding: 24px; }
.flow-safe > h3 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; margin: 0 0 14px; }
.flow-safe ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.flow-safe li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; color: var(--ink); }
.flow-safe li .icon { color: var(--brand); flex: none; margin-top: 2px; }
.flow-chat { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; font-weight: 600; color: var(--brand-700, #1d4f40); background: var(--surface); border-radius: 999px; padding: 8px 14px; }
@media (max-width: 900px) { .flow-steps { grid-template-columns: 1fr 1fr; } .flow-safe ul { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .flow-steps { grid-template-columns: 1fr; } }

/* Owner vs tenant (how it works) */
.parties { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.party-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg, 18px); padding: 24px; box-shadow: var(--shadow-xs); }
.party-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.party-head h3 { font-size: 1.15rem; }
.party-steps { list-style: none; display: grid; gap: 12px; padding: 0; margin: 0; }
.party-steps li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
.ps-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-50, #e8f3ee); color: var(--brand-700, #1d4f40); font-weight: 800; font-size: .82rem; display: grid; place-items: center; margin-top: 1px; }
.party-choose { display: flex; align-items: center; gap: 8px; justify-content: center; text-align: center; margin-top: 22px; font-weight: 600; color: var(--ink-2, #4a4a44); }
@media (max-width: 760px) { .parties { grid-template-columns: 1fr; } }

/* How-you're-protected cards */
.pol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.pol-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg, 18px); padding: 22px; box-shadow: var(--shadow-xs); }
.pol-card h3 { font-size: 1.05rem; margin: 12px 0 6px; }
.pol-card p { color: var(--ink-2, #4a4a44); line-height: 1.55; font-size: .95rem; }
@media (max-width: 900px) { .pol-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pol-grid { grid-template-columns: 1fr; } }
.pp-ask-head { display: flex; gap: 12px; align-items: center; }
.pp-ask-head > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.pp-ask { scroll-margin-top: calc(var(--header-h) + 16px); }
.pp-ask:target { box-shadow: 0 0 0 2px var(--brand); }
.req-prop-code { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; letter-spacing: .04em; color: var(--brand); font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, var(--surface)); text-decoration: none; }
/* photo gating (sign-up to see all photos) */
.gtile-locked { position: relative; display: block; overflow: hidden; }
.gtile-locked img { filter: blur(7px) brightness(.82); transform: scale(1.06); width: 100%; height: 100%; object-fit: cover; }
.gl-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: #fff; background: rgba(14, 90, 73, .42); padding: 12px; }
.gl-overlay svg { width: 26px; height: 26px; }
.gl-overlay strong { font-size: .82rem; line-height: 1.25; max-width: 160px; }
.pp-allphotos-lock, .pp-chip-lock { background: var(--brand); color: #fff; border: 0; }
.pp-allphotos-lock:hover, .pp-chip-lock:hover { filter: brightness(1.05); }
/* "Direct from the owner" strip */
.pp-direct { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--brand) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line)); margin-bottom: 18px; }
.pp-direct .pd-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: #fff; }
.pp-direct strong { display: block; font-size: 1rem; }
.pp-direct p { color: var(--ink-2); font-size: .9rem; margin-top: 2px; }
/* "Any concerns?" report CTA */
.pp-concerns { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: var(--radius-lg); background: var(--bg-sand, #f7f6f2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); margin-bottom: 20px; }
.pp-concerns:hover { background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.pp-concerns .pc-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); color: var(--muted); }
.pp-concerns > div { flex: 1; }
.pp-concerns p { color: var(--muted); font-size: .88rem; margin-top: 1px; }
.pp-concerns > svg { color: var(--muted); flex: none; }
/* validation-of-ads block (how-it-works) */
.validation { max-width: 760px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; }
.val-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.val-head .val-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--brand); }
.val-lead { color: var(--ink-2); margin-bottom: 14px; }
.val-list { list-style: none; display: grid; gap: 11px; }
.val-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .94rem; color: var(--ink-2); }
.val-list li svg { color: var(--brand); flex: none; margin-top: 3px; }
.val-end { margin-top: 16px; font-weight: 700; color: var(--brand); }
.pp-ref { margin-top: 10px; font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pp-ref-code { font-family: ui-monospace, Menlo, monospace; font-weight: 800; letter-spacing: .06em; color: var(--ink); background: var(--bg-sand, #f4f2ec); padding: 2px 9px; border-radius: 7px; }
.copy-link-btn { display: inline-flex; align-items: center; gap: 6px; }
.copy-link-btn .cl-idle { display: inline-flex; align-items: center; gap: 6px; }
.copy-link-btn .cl-done { display: none; align-items: center; gap: 6px; }
.copy-link-btn.is-copied { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.copy-link-btn.is-copied .cl-idle { display: none; }
.copy-link-btn.is-copied .cl-done { display: inline-flex; }
/* Bitcoin / crypto payment panel */
.crypto-pay { border: 1px solid var(--line); border-radius: var(--radius-lg, 16px); padding: 20px; background: var(--surface); display: grid; gap: 16px; }
.cp-head { display: flex; align-items: center; gap: 12px; }
.cp-head .cp-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent, #e9a23b) 16%, var(--surface)); color: var(--accent, #e9a23b); }
.cp-qr { display: flex; justify-content: center; }
.cp-qr img { width: 200px; height: 200px; object-fit: contain; border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: var(--surface); }
.cp-addr { display: grid; gap: 6px; }
.cp-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cp-addr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-addr-row code { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: .86rem; word-break: break-all; background: var(--bg-sand, #f6f4ee); padding: 10px 12px; border-radius: 10px; }
.cp-amt { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.cp-amt strong { font-size: 1.15rem; }
.cp-note, .cp-warn { display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; color: var(--ink-2); }
.cp-warn { color: var(--muted); }
.cp-note svg, .cp-warn svg { flex: none; margin-top: 2px; color: var(--brand); }
.req-prop-code:hover { background: color-mix(in srgb, var(--brand) 20%, var(--surface)); }
/* upload progress bar (payment proof / verification) */
.upbar { margin: 4px 0 10px; display: grid; gap: 6px; }
.upbar-track { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 14%, var(--surface)); overflow: hidden; }
.upbar-fill { height: 100%; width: 4%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--accent, #e9a23b)); transition: width .25s ease; background-size: 200% 100%; animation: upbar-sheen 1.1s linear infinite; }
.upbar-txt { font-size: .82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.upbar-txt::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--brand) 35%, var(--surface)); border-top-color: var(--brand); animation: upbar-spin .7s linear infinite; }
@keyframes upbar-sheen { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } }
@keyframes upbar-spin { to { transform: rotate(360deg); } }
.btn.is-busy { opacity: .6; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .upbar-fill, .upbar-txt::before { animation: none; } }

/* ---------------------------------------------------------------- trust strip, pillars, FAQ, CTA (home + info pages) */
/* Browse-by-type category chips (Airbnb-style row under the hero) */
.cat-row-sec { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: var(--header-h); z-index: 40; }
.cat-row { display: flex; gap: 4px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cat-row::-webkit-scrollbar { display: none; }
.cat-chip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 14px; color: var(--muted); font-weight: 600; font-size: .78rem; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .15s, background .15s, border-color .15s; }
.cat-chip .cat-ic { display: grid; place-items: center; }
.cat-chip .cat-ic svg { width: 24px; height: 24px; }
.cat-chip:hover { color: var(--ink); background: var(--bg-soft); border-bottom-color: var(--ink); }
@media (min-width: 981px) { .cat-row { justify-content: center; } }
@media (max-width: 980px) { .cat-row-sec { position: static; } .cat-chip { padding: 6px 14px; } }
/* verification banner in the account dashboard */
.verify-banner { display: flex; align-items: center; gap: 14px; margin: 18px 0 6px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(100deg, color-mix(in srgb, var(--brand) 10%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--surface))); border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line)); color: var(--ink); transition: box-shadow .15s, transform .15s; }
.verify-banner:hover { box-shadow: 0 10px 26px -16px rgba(0,0,0,.4); transform: translateY(-1px); }
.verify-banner.is-pending { background: #fff8ec; border-color: #f6c98b; }
.verify-banner .vb-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: #fff; }
.verify-banner.is-pending .vb-ic { background: #c2410c; }
.verify-banner .vb-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.verify-banner .vb-txt strong { font-size: 1rem; }
.verify-banner .vb-txt span { font-size: .86rem; color: var(--ink-2); line-height: 1.4; }
.verify-banner .vb-cta { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .9rem; color: var(--brand); }
@media (max-width: 640px) { .verify-banner .vb-cta { display: none; } }
/* booking-signup popup */
.bsg-box { position: relative; max-width: 420px; text-align: center; padding: 34px 26px 24px; }
.bsg-box .modal-x { position: absolute; top: 14px; right: 14px; }
.bsg-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: color-mix(in srgb, var(--brand) 14%, var(--surface)); color: var(--brand); margin-bottom: 6px; }
.bsg-box h2 { font-size: 1.3rem; margin: 6px 0 6px; }
.bsg-perks { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.bsg-perks li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; color: var(--ink); }
.bsg-perks li svg { flex: none; margin-top: 1px; color: var(--brand); }
.bsg-box .btn-block + .btn-block { margin-top: 8px; }
.bsg-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: .78rem; color: var(--muted); }
.trust-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.trust-strip-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 22px 16px; }
.trust-strip-in > div { display: flex; gap: 12px; align-items: center; font-weight: 600; font-size: .95rem; color: var(--ink-2); }
.ts-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; flex: none; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pillar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 10px; align-content: start; }
.pillar h3 { font-size: 1.15rem; }
.pillar p { color: var(--muted); }
.trust-band { display: flex; gap: 20px; align-items: center; padding: 26px 28px; border-radius: var(--radius-lg); background: var(--brand-50); border: 1px solid var(--brand-100); }
.trust-band h2 { font-size: 1.3rem; margin-bottom: 4px; }
.trust-band p { color: var(--ink-2); }
.tb-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; }
.faq-wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 48px; align-items: start; }
.faq-side { position: sticky; top: 100px; display: grid; gap: 14px; justify-items: start; }
.faq-side h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.faq-list { display: grid; gap: 10px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: box-shadow .2s; }
.faq-item[open] { box-shadow: var(--shadow-sm); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 20px; font-weight: 700; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { padding: 0 20px 18px; color: var(--ink-2); line-height: 1.6; }
.faq-plus { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-soft); position: relative; flex: none; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .2s; }
.faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.cta-band { display: flex; justify-content: space-between; gap: 24px; align-items: center; flex-wrap: wrap; padding: 36px 40px; border-radius: var(--radius-xl, 24px); background: var(--ink); color: #fff; }
.cta-band h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: #fff; }
.cta-band p { color: rgba(255,255,255,.75); margin-top: 6px; }

/* How it works page */
.page-hero { background: var(--bg-soft); padding: 64px 0 56px; text-align: center; }
.page-hero-in { max-width: 780px; }
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); letter-spacing: -.02em; margin: 12px 0 14px; }
.page-hero .lead { font-size: 1.1rem; color: var(--ink-2); }
.hiw-steps { display: grid; gap: 22px; max-width: 980px; }
.hiw-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.hiw-step-head { display: flex; gap: 18px; align-items: flex-start; }
.hiw-step-head h2 { font-size: 1.45rem; margin: 4px 0 8px; }
.hiw-num { width: 52px; height: 52px; border-radius: 16px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; flex: none; }
.hiw-subs { display: grid; gap: 14px; }
.hiw-sub { display: flex; gap: 14px; padding: 16px; border-radius: var(--radius); background: var(--bg-soft); }
.hiw-sub h3 { font-size: 1rem; margin-bottom: 4px; }
.hiw-sub p { color: var(--muted); font-size: .93rem; }

/* Landlord page */
.ll-hero { background: var(--bg-soft); padding: 56px 0; }
.ll-hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.ll-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); letter-spacing: -.02em; margin: 12px 0 14px; line-height: 1.08; }
.ll-hero .lead { font-size: 1.1rem; color: var(--ink-2); margin-bottom: 20px; }
.ll-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.ll-badges span { display: inline-flex; gap: 7px; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: .9rem; }
.ll-badges .icon { color: var(--brand); }
.ll-hero-media img { width: 100%; aspect-ratio: 4/3.2; object-fit: cover; border-radius: var(--radius-xl, 24px); box-shadow: var(--shadow); }
.tenant-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tenant-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: grid; gap: 10px; align-content: start; background: var(--surface); }
.tenant-card h3 { font-size: 1.08rem; }
.tenant-card p { color: var(--muted); font-size: .95rem; }

@media (max-width: 980px) {
  .trust-strip-in { grid-template-columns: repeat(2, 1fr); }
  .pillars, .tenant-grid { grid-template-columns: 1fr 1fr; }
  .faq-wrap { grid-template-columns: 1fr; gap: 24px; }
  .faq-side { position: static; }
  .hiw-step { grid-template-columns: 1fr; }
  .ll-hero-in { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .trust-strip-in { grid-template-columns: 1fr; gap: 12px; }
  .pillars, .tenant-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 26px 22px; }
  .hiw-step { padding: 20px; }
  .trust-band { flex-direction: column; align-items: flex-start; }
}
html, body { overflow-x: clip; }

/* ---------------------------------------------------------------- agent handover page (mobile first) */
.agent-wrap { max-width: 900px; padding: 28px 16px 80px; }
.agent-wrap fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.agent-wrap h2 { font-size: 1.15rem; }
.agent-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.agent-facts div { background: var(--bg-soft); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.agent-facts span { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.meter-row { display: grid; grid-template-columns: 120px 1fr 1fr auto; gap: 8px; align-items: center; }
.inv-head, .inv-row { display: grid; grid-template-columns: 1fr 1.4fr 64px 110px 1.4fr 44px; gap: 6px; align-items: center; }
.inv-head { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
[data-inv-rows] { display: grid; gap: 6px; }
.inv-row .input, .inv-row .select, .meter-row .input { height: 42px; padding: 8px 10px; font-size: .92rem; }
.agent-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
.agent-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.agent-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, #fff 30%); }
.file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
@media (max-width: 720px) {
  .agent-facts { grid-template-columns: 1fr; }
  .meter-row { grid-template-columns: 1fr 1fr; }
  .meter-row strong { grid-column: 1 / -1; }
  .inv-head { display: none; }
  .inv-row { grid-template-columns: 1fr 1fr; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
  .inv-row input[name$="[item]"], .inv-row input[name$="[note]"] { grid-column: 1 / -1; }
}
.handover-card .agent-facts div { gap: 4px; }
.handover-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; margin-top: 14px; }
.handover-refuse summary { list-style: none; }
.handover-refuse summary::-webkit-details-marker { display: none; }
.handover-refuse[open] { flex-basis: 100%; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; margin-top: 10px; }
/* Documents (invoice & rental contract): a safety wrapper so the sheet can be swiped left/right on mobile if anything is wider than the screen. */
.doc-view { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.presence { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; padding: 34px; border-radius: var(--radius-xl, 24px); border: 1px solid var(--line); background: var(--surface); }
.presence h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 10px 0; }
.presence p { color: var(--ink-2); }
.presence-list { display: grid; gap: 10px; align-content: start; }
.presence-hq { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-radius: 14px; background: var(--brand); color: #fff; }
.presence-hq .ph-label { color: rgba(255,255,255,.75); }
.ph-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.presence-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.presence-chips span { display: inline-flex; gap: 6px; align-items: center; padding: 8px 12px; border-radius: 999px; background: var(--bg-soft); font-weight: 600; font-size: .9rem; }
.presence-chips .icon { color: var(--brand); }
@media (max-width: 860px) { .presence { grid-template-columns: 1fr; padding: 24px; } }

/* ---------------------------------------------------------------- intro animations (all info pages) */
@keyframes intro-up { from { opacity: 0; transform: translateY(26px); } }
@keyframes intro-media { from { opacity: 0; transform: scale(.94) translateY(18px); clip-path: inset(12% 8% 12% 8% round 28px); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes intro-line { from { transform: scaleX(0); } }
@keyframes blob-a { 50% { transform: translate(6%, 10%) scale(1.15); } }
@keyframes blob-b { 50% { transform: translate(-8%, -6%) scale(.9); } }
@keyframes scroll-hint { 0%, 100% { transform: translate(-50%, 0); opacity: .9; } 50% { transform: translate(-50%, 8px); opacity: .45; } }

.hero-content > *, .page-hero-in > *, .ll-hero-text > *, .about-hero > div:first-child > * { animation: intro-up .9s var(--ease) both; }
.hero-content > :nth-child(1), .page-hero-in > :nth-child(1), .ll-hero-text > :nth-child(1), .about-hero > div:first-child > :nth-child(1) { animation-delay: .05s; }
.hero-content > :nth-child(2), .page-hero-in > :nth-child(2), .ll-hero-text > :nth-child(2), .about-hero > div:first-child > :nth-child(2) { animation-delay: .17s; }
.hero-content > :nth-child(3), .page-hero-in > :nth-child(3), .ll-hero-text > :nth-child(3), .about-hero > div:first-child > :nth-child(3) { animation-delay: .29s; }
.hero-content > :nth-child(4), .page-hero-in > :nth-child(4), .ll-hero-text > :nth-child(4), .about-hero > div:first-child > :nth-child(4) { animation-delay: .41s; }
.hero-content > :nth-child(n+5), .page-hero-in > :nth-child(n+5), .ll-hero-text > :nth-child(n+5), .about-hero > div:first-child > :nth-child(n+5) { animation-delay: .53s; }
.ll-hero-media, .about-hero > img { animation: intro-media 1.2s var(--ease) .25s both; }
.ll-hero-media img { box-shadow: var(--shadow-lg, var(--shadow)); }

/* small accent line under page titles */
.page-hero h1::after, .ll-hero h1::after, .about-hero h1::after { content: ""; display: block; width: 64px; height: 4px; border-radius: 4px; margin-top: 16px; background: var(--accent, var(--brand)); transform-origin: left; animation: intro-line .9s var(--ease) .7s both; }
.page-hero h1::after { margin-left: auto; margin-right: auto; transform-origin: center; }

/* soft moving colour in the page headers */
.page-hero, .ll-hero { position: relative; overflow: hidden; isolation: isolate; }
.page-hero::before, .page-hero::after, .ll-hero::before, .ll-hero::after { content: ""; position: absolute; z-index: -1; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(60px); opacity: .32; pointer-events: none; }
.page-hero::before, .ll-hero::before { top: -26vmax; left: -14vmax; background: radial-gradient(circle, var(--brand) 0%, transparent 65%); animation: blob-a 16s ease-in-out infinite; }
.page-hero::after, .ll-hero::after { bottom: -30vmax; right: -16vmax; background: radial-gradient(circle, var(--accent, var(--brand)) 0%, transparent 65%); animation: blob-b 19s ease-in-out infinite; }

/* trust strip under the homepage hero */
.trust-strip-in > div { animation: intro-up .8s var(--ease) both; }
.trust-strip-in > div:nth-child(1) { animation-delay: .55s; } .trust-strip-in > div:nth-child(2) { animation-delay: .65s; }
.trust-strip-in > div:nth-child(3) { animation-delay: .75s; } .trust-strip-in > div:nth-child(4) { animation-delay: .85s; }
.trust-strip .ts-ic { transition: transform .4s var(--ease); }
.trust-strip-in > div:hover .ts-ic { transform: rotate(-8deg) scale(1.1); }

/* "scroll down" hint on the homepage hero (big screens only) */
.hero-scroll { position: absolute; left: 50%; bottom: 18px; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.7); border-radius: 14px; animation: scroll-hint 2.2s ease-in-out 1.4s infinite; }
.hero-scroll::before { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--surface); }
@media (max-width: 900px), (max-height: 640px) { .hero-scroll { display: none; } }

/* cards in a row appear one after another (delay set by app.js) */
.reveal { will-change: opacity, transform; }
.reveal.is-visible { will-change: auto; }

/* long words (German, Czech…) never break the layout on phones */
h1, h2, h3, .lead, .hero-sub { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .page-hero, .ll-hero { padding: 44px 0 40px; }
  .page-hero h1, .ll-hero h1, .about-hero h1 { font-size: clamp(1.8rem, 8vw, 2.3rem) !important; }
  .page-hero::before, .page-hero::after, .ll-hero::before, .ll-hero::after { filter: blur(40px); }
  .stats { gap: 22px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-content > *, .page-hero-in > *, .ll-hero-text > *, .about-hero > div:first-child > *, .ll-hero-media, .about-hero > img,
  .trust-strip-in > div, .page-hero h1::after, .ll-hero h1::after, .about-hero h1::after { animation: none !important; }
  .page-hero::before, .page-hero::after, .ll-hero::before, .ll-hero::after, .hero-scroll { animation: none !important; }
}
@keyframes num-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } }
@keyframes chip-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.step.is-visible .step-num { animation: num-pop .7s var(--ease) .15s both; }
.presence.is-visible .presence-chips span { animation: chip-in .5s var(--ease) both; }
.presence.is-visible .presence-chips span:nth-child(2) { animation-delay: .06s; } .presence.is-visible .presence-chips span:nth-child(3) { animation-delay: .12s; }
.presence.is-visible .presence-chips span:nth-child(4) { animation-delay: .18s; } .presence.is-visible .presence-chips span:nth-child(5) { animation-delay: .24s; }
.presence.is-visible .presence-chips span:nth-child(6) { animation-delay: .3s; } .presence.is-visible .presence-chips span:nth-child(7) { animation-delay: .36s; }
.presence.is-visible .presence-chips span:nth-child(8) { animation-delay: .42s; } .presence.is-visible .presence-chips span:nth-child(n+9) { animation-delay: .48s; }
@media (prefers-reduced-motion: reduce) { .step.is-visible .step-num, .presence.is-visible .presence-chips span { animation: none !important; } }
.chip { max-width: 100%; }
.chip > span { max-width: 100%; white-space: normal; overflow-wrap: anywhere; height: auto; min-height: 42px; }
.dropdown-panel.align-end { left: auto !important; right: 0 !important; }

/* ---------------------------------------------------------------- payment options in the booking box */
.bc-plans { border: 0; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.bc-plans legend { font-weight: 700; font-size: .92rem; margin-bottom: 8px; padding: 0; }
.bc-plan { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "radio main total" "radio main badge"; align-items: center; gap: 2px 12px; padding: 12px 14px; border: 1.5px solid var(--line-2, var(--line)); border-radius: 14px; cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s, box-shadow .15s; }
.bc-plan:hover { border-color: var(--ink); }
.bc-plan input { grid-area: radio; width: 18px; height: 18px; accent-color: var(--brand); margin: 0; }
.bc-plan .bp-main { grid-area: main; display: grid; gap: 2px; min-width: 0; }
.bc-plan .bp-main strong { font-size: .93rem; line-height: 1.25; }
.bc-plan .bp-sub { font-size: .8rem; color: var(--muted); line-height: 1.3; }
.bc-plan .bp-off { display: none; font-size: .78rem; color: var(--muted); }
.bc-plan .bp-total { grid-area: total; font-weight: 800; font-size: .95rem; white-space: nowrap; text-align: right; }
.bc-plan .bp-badge { grid-area: badge; justify-self: end; font-size: .72rem; font-weight: 800; color: #fff; background: var(--success, #1f8a5b); padding: 2px 8px; border-radius: 999px; }
.bc-plan.is-checked { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.bc-plan.is-off { opacity: .5; cursor: not-allowed; }
.bc-plan.is-off .bp-sub, .bc-plan.is-off .bp-total { display: none; }
.bc-plan.is-off .bp-off { display: block; }
.bc-breakdown .bd-title { font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; }
.bc-breakdown .dep-line { color: var(--ink-2); }
.bc-breakdown .bd-next { margin: 0; font-size: .84rem; color: var(--muted); }

/* ---------------------------------------------------------------- booking steps + details page */
.bsteps { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; counter-reset: s; }
.bstep { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: .8rem; font-weight: 600; color: var(--muted); }
.bstep::before { content: ""; position: absolute; top: 15px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 2px; background: var(--line); }
.bstep:first-child::before { display: none; }
.bstep.is-done::before, .bstep.is-now::before { background: var(--brand); }
.bs-dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--surface); border: 2px solid var(--line-2, var(--line)); color: var(--muted); }
.bstep.is-done .bs-dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.bstep.is-now .bs-dot { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 15%, transparent); animation: num-pop .6s var(--ease) both; }
.bstep.is-now, .bstep.is-done { color: var(--ink); }
.bs-label { line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 560px) { .bsteps { gap: 2px; } .bstep { font-size: .68rem; } .bs-dot { width: 28px; height: 28px; } .bstep::before { top: 13px; } }

.book-page { padding: 30px 24px 90px; }
.book-title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 14px 0 6px; }
.book-sub { max-width: 640px; }
.book-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.book-form { padding: 28px; display: grid; gap: 18px; }
.bf-h { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin: 8px 0 0; }
.bf-num { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .8rem; display: grid; place-items: center; flex: none; }
.bf-note { margin: -8px 0 0; }
.secure-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); font-size: .85rem; color: var(--ink-2); }
.secure-note p { margin: 0; }
.secure-note .icon-sm { color: var(--brand); flex: none; margin-top: 2px; }
.book-summary { position: sticky; top: calc(var(--header-h, 72px) + 16px); display: grid; gap: 16px; }
.bs-card { padding: 20px; display: grid; gap: 16px; }
.bs-prop { display: flex; gap: 14px; align-items: center; }
.bs-prop img { width: 92px; height: 72px; object-fit: cover; border-radius: 12px; flex: none; }
.bs-prop h3 { font-size: 1rem; margin-top: 2px; }
.bs-how { padding: 20px; }
.bs-how h3 { font-size: 1rem; margin-bottom: 10px; }
.bs-how ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: .9rem; color: var(--ink-2); }
.pay-lines { display: grid; gap: 9px; font-size: .93rem; padding-top: 14px; border-top: 1px solid var(--line); }
.pay-lines > div { display: flex; justify-content: space-between; gap: 12px; }
.pay-lines .disc { color: var(--success); font-weight: 600; }
.pay-lines .total { padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--line); font-weight: 800; font-size: 1.08rem; }
.pay-lines .alt { justify-content: flex-end; color: var(--muted); font-size: .84rem; }
.pay-lines .pl-title { font-weight: 800; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; }
.pay-lines .pl-next { margin: 0; font-size: .84rem; color: var(--muted); }
@media (max-width: 900px) {
  .book-grid { grid-template-columns: 1fr; }
  .book-summary { position: static; order: -1; }
  .book-form { padding: 20px; }
}
@media (max-width: 560px) { .book-page { padding: 22px 16px 70px; } .book-form .form-grid { grid-template-columns: 1fr; } .book-form .form-grid .span-2 { grid-column: auto; } }

/* ---------------------------------------------------------------- payment banner (every page while waiting for payment) */
.pay-banner { background: linear-gradient(90deg, #1d4f40, var(--brand)); color: #fff; font-size: .92rem; position: relative; z-index: 30; }
.pay-banner .pb-in { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.pay-banner p { margin: 0; flex: 1; line-height: 1.4; }
.pay-banner p strong { margin-right: 6px; }
.pay-banner .pb-ic { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; flex: none; animation: bell 2.4s ease-in-out infinite; }
.pay-banner .pb-count { display: inline-block; margin-left: 6px; font-weight: 800; background: rgba(255,255,255,.18); padding: 1px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-banner .pb-btn { flex: none; background: var(--surface); color: var(--ink); font-weight: 700; padding: 8px 16px; border-radius: 999px; font-size: .88rem; white-space: nowrap; }
.pay-banner.is-urgent { background: linear-gradient(90deg, #8a3d0c, #c2410c); }
.pay-banner.is-late { background: linear-gradient(90deg, #7f1d1d, #b91c1c); }
.pay-banner.is-checking { background: #eaf2ff; color: #183b6b; }
.pay-banner.is-checking .pb-ic { background: #d3e3fb; animation: none; }
.pay-banner.is-checking .pb-btn { background: #183b6b; color: #fff; }
@keyframes bell { 0%, 60%, 100% { transform: rotate(0); } 65% { transform: rotate(14deg); } 72% { transform: rotate(-12deg); } 79% { transform: rotate(8deg); } 86% { transform: rotate(-4deg); } }
@media (max-width: 640px) {
  .pay-banner .pb-in { flex-wrap: wrap; gap: 8px 10px; }
  .pay-banner p { flex: 1 1 calc(100% - 46px); font-size: .86rem; }
  .pay-banner .pb-btn { margin-left: 42px; padding: 7px 14px; }
}
@media (prefers-reduced-motion: reduce) { .pay-banner .pb-ic { animation: none; } }

/* ---------------------------------------------------------------- invoice */
.inv-page { padding: 28px 24px 80px; max-width: 980px; }
.inv-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.invoice { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 40px; box-shadow: var(--shadow); display: grid; gap: 30px; color: var(--ink); }
.invoice-top { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.inv-seller { margin-top: 14px; font-size: .88rem; line-height: 1.55; color: var(--ink-2); }
.inv-seller strong { color: var(--ink); }
.inv-meta { text-align: right; min-width: 240px; }
.inv-meta h1 { font-size: 2rem; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.inv-meta dl { margin: 12px 0 0; display: grid; gap: 4px; font-size: .88rem; }
.inv-meta dl div { display: flex; justify-content: flex-end; gap: 12px; }
.inv-meta dt { color: var(--muted); }
.inv-meta dd { margin: 0; }
.inv-stamp { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border: 2px solid currentColor; }
.inv-stamp.is-unpaid { color: #b45309; } .inv-stamp.is-proof_sent { color: #1d4ed8; } .inv-stamp.is-paid { color: #15803d; } .inv-stamp.is-cancelled { color: #9ca3af; }
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: .92rem; line-height: 1.55; }
.inv-parties h2, .inv-pay h2 { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.inv-contact { margin-top: 4px; }
.inv-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px; }
.inv-table th { text-align: left; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 8px; border-bottom: 2px solid var(--ink); }
.inv-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.inv-table .num { text-align: right; white-space: nowrap; }
.inv-table tr.is-disc td { color: var(--success); }
.inv-table tfoot td { border-bottom: 0; padding: 8px; }
.inv-table tfoot td:first-child { text-align: right; color: var(--muted); }
.inv-table .inv-grand td { font-size: 1.15rem; font-weight: 800; border-top: 2px solid var(--ink); padding-top: 14px; color: var(--ink) !important; }
.inv-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 6px; }
.inv-bank { margin: 0; display: grid; gap: 6px; font-size: .9rem; }
.inv-bank div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.inv-bank dt { color: var(--muted); }
.inv-bank dd { margin: 0; overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.inv-notes { display: grid; gap: 10px; align-content: start; }
.inv-notes p { margin: 0; }
.inv-warn { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #fff4e5; border: 1px solid #f6c98b; color: #7a3e00; font-size: .88rem; }
.inv-warn .icon-sm { flex: none; margin-top: 2px; }
.inv-warn p { margin: 0; }
@media (max-width: 720px) {
  .inv-page { padding: 18px 12px 60px; }
  .invoice { padding: 22px 16px; border-radius: 14px; gap: 22px; min-width: 0; }
  .invoice > *, .inv-body, .inv-parties, .inv-pay, .agr-facts { min-width: 0; }
  .inv-meta { text-align: left; min-width: 0; }
  .inv-meta h1 { font-size: 1.5rem; }
  .inv-meta dl div { justify-content: flex-start; }
  .inv-parties, .inv-pay { grid-template-columns: 1fr; }
  .inv-bank div { grid-template-columns: 110px 1fr; }
  .agr-facts { grid-template-columns: 1fr 1fr; }
  .agr-sign { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 430px) {
  .agr-facts { grid-template-columns: 1fr; }
}
@media print {
  @page { size: A4; margin: 12mm; }
  .site-header, .site-footer, footer, .pay-banner, .flash-stack, .no-print, .mobile-drawer, .cookie-bar { display: none !important; }
  body { background: var(--surface) !important; }
  .inv-page { padding: 0; max-width: none; }
  .invoice { border: 0; box-shadow: none; padding: 0; }
  .table-scroll { overflow: visible !important; }
  .inv-table { min-width: 0; }
  .inv-parties, .inv-body { break-inside: avoid; }
  /* 2-page layout: page 1 = invoice summary, page 2 = payment details + how-to */
  .inv-paybox { break-before: page; break-inside: avoid; }
  .invoice-p2 { break-before: auto !important; }
  .inv-afternote, .revolut-wide { display: none !important; } /* the Revolut note is restated in the How-to steps */
  /* ink-light payment box for print */
  .inv-paybox { border: 1px solid #d8d8d8 !important; background: var(--surface) !important; padding: 14px 16px !important; margin-top: 0 !important; }
  .inv-paybox .bank-box.is-secure, .bank-box.is-secure { border: 1px solid #d8d8d8 !important; background: var(--surface) !important; padding: 0 !important; }
  .bb-sechead { border-bottom: 1px solid #e2e2e2 !important; }
  .bb-lock, .bb-verified { background: var(--surface) !important; color: #111 !important; border-color: #d8d8d8 !important; }
  .bb-amount, .bb-ref { background: var(--surface) !important; border: 1px solid #d8d8d8 !important; }
  .bb-amount-v strong, .bb-row.bb-benef dd strong, .bb-row.bb-iban dd strong { color: #111 !important; }
  .copy-btn { display: none !important; }
  .bb-grid, .bb-amount, .bb-ref, .bb-main { break-inside: avoid; }
  /* compact the page-2 header so the payment box + how-to steps share one page */
  .invoice-p2 { margin-top: 14px !important; }
  .invoice-p2 .invoice-top { margin-bottom: 8px !important; }
  .invoice-p2 .invoice-top > div:first-child { display: none !important; }
  .invoice-p2 .inv-meta h1 { font-size: 1.35rem !important; }
  .howto-steps li { margin-bottom: 6px !important; }
}

/* ---------------------------------------------------------------- tenant request page: payment, receipt, actions */
.pay-card { border: 2px solid var(--brand); display: grid; gap: 18px; scroll-margin-top: 90px; }
.pay-card.is-late { border-color: #b91c1c; }
.pc-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.pc-eyebrow { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 700; color: var(--brand); margin: 0 0 6px; }
.pc-head h2 { font-size: 1.35rem; }
.pc-timer { display: grid; justify-items: end; gap: 2px; padding: 10px 16px; border-radius: 14px; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.pc-timer-l { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pc-timer strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; color: var(--brand); }
.pc-timer-d { font-size: .78rem; color: var(--muted); }
.pay-card.is-urgent .pc-timer { background: #fff1e6; } .pay-card.is-urgent .pc-timer strong { color: #c2410c; }
.pay-card.is-late .pc-timer { background: #fde8e8; } .pay-card.is-late .pc-timer-l { color: #b91c1c; }
.pc-bank { padding: 14px 16px; border-radius: 14px; background: var(--bg-soft); }
.pc-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.copy-btn { border: 0; background: none; padding: 2px 4px; color: var(--muted); cursor: pointer; vertical-align: middle; border-radius: 6px; }
.copy-btn:hover { color: var(--ink); background: var(--surface); }
.copy-btn.is-copied { color: var(--success); }
.receipt-box { border-top: 1px dashed var(--line-2, var(--line)); padding-top: 18px; display: grid; gap: 12px; scroll-margin-top: 90px; }
.receipt-box h3 { display: flex; gap: 8px; align-items: center; font-size: 1.1rem; }
.receipt-form { display: grid; gap: 10px; }
.file-drop { display: grid; justify-items: center; gap: 4px; padding: 20px; border: 2px dashed var(--line-2, var(--line)); border-radius: 14px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.file-drop:hover, .file-drop.has-file { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop .fd-ic { color: var(--brand); }
.file-drop .fd-t { font-weight: 700; overflow-wrap: anywhere; }
.file-drop .fd-s { font-size: .8rem; color: var(--muted); }
.req-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.req-actions .btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.req-actions .ra-note { flex-basis: 100%; }
.btn-danger-soft { color: #b91c1c; border-color: #f3c4c4; }
.btn-danger-soft:hover { background: #fdecec; border-color: #b91c1c; }
.appt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 16px auto 0; max-width: 560px; align-items: end; }
.appt-form .span-2 { grid-column: 1 / -1; }
.appt-form > .btn { grid-column: 1 / -1; justify-self: start; }
#appointment { scroll-margin-top: 90px; }
@media (max-width: 560px) {
  .pc-timer { justify-items: start; width: 100%; }
  .appt-form { grid-template-columns: 1fr; }
  .req-actions .btn { flex: 1 1 auto; justify-content: center; }
}
.pay-chip { display: inline-flex; gap: 5px; align-items: center; font-size: .76rem; font-weight: 800; color: #fff; background: #c2410c; padding: 3px 10px; border-radius: 999px; position: relative; z-index: 2; }
.pay-chip.is-check { background: #1d4ed8; }
.inv-list { display: grid; gap: 10px; }
.inv-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: box-shadow .15s, border-color .15s; }
.inv-row:hover { box-shadow: var(--shadow); border-color: transparent; }
.inv-row .ir-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--bg-soft); display: grid; place-items: center; color: var(--brand); }
.inv-row .ir-main { display: grid; gap: 2px; min-width: 0; }
.inv-row .inv-stamp { margin: 0; }
.inv-row .ir-amt { white-space: nowrap; }
@media (max-width: 560px) { .inv-row { grid-template-columns: auto 1fr; } .inv-row .inv-stamp, .inv-row .ir-amt { grid-column: 2; justify-self: start; } }
.dep-row { display: flex; gap: 8px; align-items: center; } .dep-row .input { flex: 1; min-width: 0; } .dep-row .btn { white-space: nowrap; }
.bc-long-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); font-size: .84rem; color: var(--ink-2); } .bc-long-note[hidden] { display: none; } .bc-long-note .icon-sm { flex: none; margin-top: 2px; color: var(--brand); }

/* ---------------------------------------------------------------- payment page: invoice button, methods, options, bank, how-to */
.req-main { max-width: 860px; margin-inline: auto; }
.invoice-cta { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, #f36b6b, #e24b4b); color: #fff; box-shadow: 0 8px 24px -12px rgba(226,75,75,.6); animation: cta-pulse 2.6s ease-in-out infinite; transition: transform .15s; }
.invoice-cta:hover { transform: translateY(-2px); color: #fff; }
.invoice-cta .ic-ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: none; }
.invoice-cta .ic-t { display: grid; gap: 2px; flex: 1; min-width: 0; }
.invoice-cta .ic-t strong { font-size: 1.08rem; }
.invoice-cta .ic-t span { font-size: .86rem; opacity: .9; }
.invoice-cta .ic-go { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); color: #e24b4b; display: grid; place-items: center; flex: none; }
@keyframes cta-pulse { 0%, 100% { box-shadow: 0 8px 24px -12px rgba(226,75,75,.55), 0 0 0 0 rgba(226,75,75,.35); } 50% { box-shadow: 0 8px 24px -12px rgba(226,75,75,.55), 0 0 0 8px rgba(226,75,75,0); } }

.pm-title { font-size: 1.02rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.pm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pm-card { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 16px 10px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); }
.pm-card .pm-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-soft); color: var(--ink-2); }
.pm-card strong { font-size: .92rem; }
.pm-card .pm-sub { font-size: .74rem; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; line-height: 1.25; }
.pm-card.is-on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.pm-card.is-on .pm-ic { background: var(--brand); color: #fff; }
.pm-card .pm-check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; }
.pm-card.is-off { opacity: .55; filter: grayscale(1); }
.pm-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); font-size: .86rem; color: var(--ink-2); }
.pm-note .icon-sm { color: var(--brand); flex: none; margin-top: 2px; }

.pay-opts { display: grid; gap: 10px; }
.pay-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); }
label.pay-opt { cursor: pointer; }
label.pay-opt:hover { border-color: var(--ink); }
.pay-opt input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; margin: 0; }
.pay-opt .po-main { flex: 1; display: grid; gap: 3px; min-width: 0; }
.pay-opt .po-sub { font-size: .8rem; color: var(--muted); }
.pay-opt .po-right { display: grid; justify-items: end; gap: 4px; }
.pay-opt .po-total { font-size: 1.02rem; white-space: nowrap; }
.pay-opt .po-badge { font-size: .72rem; font-weight: 800; color: #fff; background: var(--success, #1f8a5b); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pay-opt.is-popular { border-color: var(--accent, #e9a23b); background: #fffaf0; padding-top: 22px; }
.pay-opt .po-ribbon { position: absolute; top: -11px; left: 14px; display: inline-flex; gap: 4px; align-items: center; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--accent, #e9a23b); padding: 3px 10px; border-radius: 999px; }
.pay-opt.is-checked { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.rf-label { font-weight: 700; font-size: .92rem; margin: 4px 0 0; }

.bank-box { border-radius: 14px; background: var(--bg-soft); padding: 14px 16px; }
.bb-agent { display: inline-flex; gap: 6px; align-items: center; margin: 0 0 10px; font-size: .8rem; font-weight: 700; color: var(--brand); background: var(--surface); padding: 4px 10px; border-radius: 999px; }
.bb-list { margin: 0; display: grid; gap: 8px; font-size: .92rem; }
.bb-list div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: baseline; }
.bb-list dt { color: var(--muted); }
.bb-list dd { margin: 0; overflow-wrap: anywhere; }

.howto { border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 12px; }
.howto-title { display: flex; gap: 8px; align-items: center; font-size: 1.05rem; margin: 0; }
.howto-title .icon-sm { color: var(--brand); }
.howto-intro { margin: 0; font-size: .9rem; color: var(--ink-2); }
.howto-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.howto-steps li { display: flex; gap: 12px; align-items: flex-start; }
.howto-steps .hs-num { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: none; }
.howto-steps strong { font-size: .95rem; }
.howto-steps p { margin: 2px 0 0; font-size: .88rem; color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-list div { grid-template-columns: 1fr; gap: 0; }
  .pay-opt { flex-wrap: wrap; }
  .invoice-cta { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .invoice-cta { animation: none; } }
@media print { .invoice-cta, .pm { display: none !important; } .howto { break-inside: avoid; } .pay-opt { break-inside: avoid; } }
.inv-opts h2 { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.inv-paidopt { display: flex; gap: 8px; align-items: center; margin: 0; padding: 10px 14px; border-radius: 12px; background: #ecfdf3; color: #166534; font-weight: 600; font-size: .9rem; }
.inv-pay { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
@media (max-width: 860px) { .inv-pay { grid-template-columns: 1fr; } }
.bs-current { display: none; }
@media (max-width: 560px) {
  .bstep .bs-label { display: none; }
  .bsteps { margin-bottom: 8px; }
  .bs-current { display: block; text-align: center; font-weight: 700; font-size: .9rem; margin: 0 0 22px; color: var(--brand); }
}

/* booking link locked (one booking per private link) */
.bc-locked { text-align: center; display: grid; gap: 12px; justify-items: center; }
.bc-locked .bl-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-soft); color: var(--brand); }
.bc-locked .bl-ic .icon { width: 26px; height: 26px; }
.bc-locked h2 { font-size: 1.15rem; }
.bc-locked p { color: var(--ink-2); font-size: .92rem; margin: 0; }
.bc-locked.is-mine .bl-ic { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }

/* invoice: amount box, options, revolut warning, how-to page */
.inv-amount { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.inv-amount span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.inv-amount strong { font-size: 1.5rem; font-weight: 800; color: var(--brand); }
.inv-opts { margin-top: 8px; }
.inv-opts h2 { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.inv-body { margin-top: 4px; }
.revolut-warn { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: #fff4e5; border: 1px solid #f6c98b; color: #7a3e00; }
.revolut-warn .rw-ic { flex: none; color: #c2410c; }
.revolut-warn strong { display: block; margin-bottom: 2px; }
.revolut-warn p { margin: 0; font-size: .9rem; }
.howto-page { max-width: 820px; margin-inline: auto; padding: 28px 24px 80px; }
.howto-h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 14px 0 4px; }
.howto-sub { margin: 0 0 22px; }
.howto-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
.howto-page .revolut-warn { margin-top: 22px; }
.howto-back { margin-top: 24px; }
@media (max-width: 760px) { .howto-cols { grid-template-columns: 1fr; } }
@media print { .inv-amount { align-items: flex-end; } }

/* payment method cards as selectable labels */
.pm-card { position: relative; cursor: pointer; }
.pm-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pm-card .pm-check { opacity: 0; transition: opacity .15s; }
.pm-card.is-on .pm-check { opacity: 1; }
.pm-flash { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); color: var(--ink-2); font-size: .86rem; animation: pop .2s var(--ease); }
.pm-flash[hidden] { display: none; }
.pm-flash .icon-sm { color: var(--brand); flex: none; margin-top: 2px; }
/* interactive snap-back: clicked non-bank shakes & greys, bank card pulses back */
.pm-card { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease; }
.pm-card.snap-deny { animation: pm-shake .4s ease; border-color: #d98b2b; }
.pm-card.snap-deny .pm-ic { background: #fbe9d2; color: #c2741a; }
.pm-card.snap-back { animation: pm-pop .5s ease; }
.pm-card.is-on .pm-ic { animation: pm-glow 2.4s ease-in-out infinite; }
@keyframes pm-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes pm-pop { 0% { transform: scale(1); } 35% { transform: scale(1.06); box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 22%, transparent); } 100% { transform: scale(1); } }
@keyframes pm-glow { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 32%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 6%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pm-card.snap-deny, .pm-card.snap-back, .pm-card.is-on .pm-ic { animation: none; } }
/* receipt upload: animated 3-step guide + attention-pulsing dropzone */
.rg { list-style: none; display: flex; align-items: stretch; gap: 8px; margin: 4px 0 14px; padding: 0; }
.rg-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 12px 8px; border-radius: 12px; background: var(--bg-sand, #f6f4ee); font-size: .76rem; color: var(--ink-2); }
.rg-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); color: var(--brand); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.rg-step:nth-child(1) .rg-ic { animation: rg-step 4.5s ease-in-out infinite; }
.rg-step:nth-child(3) .rg-ic { animation: rg-step 4.5s ease-in-out .9s infinite; }
.rg-step:nth-child(5) .rg-ic { animation: rg-step 4.5s ease-in-out 1.8s infinite; }
.rg-arrow { display: flex; align-items: center; color: var(--muted); }
.rg-arrow svg { animation: rg-slide 1.6s ease-in-out infinite; }
@keyframes rg-step { 0%,70%,100% { transform: translateY(0); box-shadow: 0 1px 4px rgba(0,0,0,.06); } 20% { transform: translateY(-4px); box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 22%, transparent); } }
@keyframes rg-slide { 0%,100% { transform: translateX(-2px); opacity:.5; } 50% { transform: translateX(3px); opacity:1; } }
.file-drop.is-hint { animation: fd-pulse 2s ease-in-out infinite; border-style: dashed; }
.file-drop .fd-cta { display: inline-block; margin-top: 6px; font-size: .78rem; font-weight: 700; color: var(--brand); }
.file-drop.has-file .fd-cta { display: none; }
@keyframes fd-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 22%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 5%, transparent); } }
@media (max-width: 560px) { .rg-step .rg-t { display: none; } .rg-step { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .rg-ic, .rg-arrow svg, .file-drop.is-hint { animation: none; } }
/* appointment: locked time-slot preview (shown while payment is being confirmed) */
.appt-slots-locked { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px auto 0; max-width: 560px; padding: 12px 14px; border-radius: 12px; background: var(--bg-sand, #f6f4ee); opacity: .72; }
.appt-slots-locked .asl-label { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-right: 4px; }
.asl-chip { font-size: .8rem; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); border: 1px solid var(--line); filter: grayscale(1); }
.appt-slots-locked .asl-lock { margin-left: auto; color: var(--muted); }
.inv-chosen { margin: 0 0 10px; font-size: .9rem; color: var(--ink-2); }

/* payment wizard panels */
.pc-timer-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); font-size: .9rem; }
.pc-timer-bar .pc-tb-l { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--brand); }
.pc-timer-bar strong { font-variant-numeric: tabular-nums; }
.pc-timer-bar .pc-tb-note { color: var(--muted); font-size: .82rem; margin-left: auto; }
.pc-timer-bar.is-late { background: #fde8e8; } .pc-timer-bar.is-late .pc-tb-l { color: #b91c1c; }
.get-invoice { text-align: center; display: grid; gap: 6px; padding: 8px 0 4px; }
.get-invoice .gi-label { margin: 0; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.get-invoice .gi-amount { margin: 0 0 10px; font-size: 2.4rem; font-weight: 800; color: var(--brand); letter-spacing: -.02em; }
.get-invoice .gi-eur { margin: -6px 0 10px; font-size: .95rem; font-weight: 700; color: var(--muted); }
.inv-eur { display: block; font-size: .82em; font-weight: 600; color: var(--muted); margin-top: 2px; }
.bb-eur { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
.pc-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pc-nav .btn-primary { margin-left: auto; }
@media (max-width: 520px) {
  .pc-timer-bar .pc-tb-note { margin-left: 0; flex-basis: 100%; }
  .pc-nav { flex-direction: column-reverse; align-items: stretch; }
  .pc-nav .btn { width: 100%; justify-content: center; }
}

/* payment page: single flow with numbered sections */
.pay-sec { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); }
.pay-sec:first-of-type, .pay-card > .pc-timer-bar + .pay-sec { border-top: 0; margin-top: 4px; padding-top: 4px; }
.ps-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ps-head .ps-n { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: .85rem; display: grid; place-items: center; flex: none; }
.ps-head h3 { font-size: 1.1rem; margin: 0; }
.pay-sec .cp-btn + .file-drop { margin-top: 12px; }
.receipt-box .cp-btn { margin: 0; }
#pay-bank { scroll-margin-top: 80px; }

/* Payment sub-steps (one at a time): Select payment · Pay · Confirm */
.paysub { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.paysub-i { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 12px; font-size: .9rem; font-weight: 600; color: var(--muted); background: var(--bg-soft); }
.paysub-i .psb-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; background: var(--surface); border: 1px solid var(--line); color: var(--muted); flex: none; }
.paysub-i.is-now { color: var(--ink); border-color: var(--brand); background: var(--surface); box-shadow: inset 0 0 0 1px var(--brand); }
.paysub-i.is-now .psb-n { background: var(--brand); color: #fff; border-color: var(--brand); }
.paysub-i.is-done { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.paysub-i.is-done .psb-n { background: var(--brand); color: #fff; border-color: var(--brand); }
/* a completed step is a button: tap it to jump back to that step */
.paysub-i .psb-form { margin: 0; display: contents; }
.paysub-i .psb-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.paysub-i.is-done { cursor: pointer; transition: background .15s, box-shadow .15s; }
.paysub-i.is-done:hover { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); box-shadow: inset 0 0 0 1px var(--brand); }
.paysub-i.is-done .psb-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.paysub-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; font-size: .82rem; color: var(--muted); }
.paynav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.paynav form { margin: 0; }
.paynav form:only-child { margin-left: 0; }
.paynav form:last-child:not(:only-child) { margin-left: auto; }
.pay-bank-head { margin: 16px 0 10px; font-weight: 700; }
.pay-bank-head strong { color: var(--brand); }
@media (max-width: 560px) {
  .paysub { gap: 4px; }
  .paysub-i { flex-direction: column; gap: 4px; padding: 8px 4px; font-size: .74rem; text-align: center; }
  /* keep everything inside the bordered card on mobile (no overflow past the frame) */
  .pay-card { padding: 18px; }
  .pay-card, .pay-sec, .paynav, .paynav form { min-width: 0; }
  /* stack the two buttons so each gets the full card width — "Confirm payment" never spills out */
  .paynav { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .paynav form { margin: 0 !important; width: 100%; min-width: 0; }
  .paynav .btn, .paynav .btn-lg { width: 100%; justify-content: center; white-space: normal; }
}

/* full-width bank box */
.bank-box.is-wide { padding: 18px 20px; }
.bank-box.is-wide .bb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.bank-box.is-wide .bb-list div { grid-template-columns: 130px 1fr; }
.bank-box.is-wide .bb-amount, .bank-box.is-wide .bb-ref { grid-column: 1 / -1; padding-top: 10px; border-top: 1px dashed var(--line); }
.bank-box.is-wide .bb-amount strong { font-size: 1.15rem; color: var(--brand); }
@media (max-width: 620px) { .bank-box.is-wide .bb-list { grid-template-columns: 1fr; } }

/* secured bank box — beneficiary/IBAN/bank/address on the left, amount + reference on the right */
.bank-box.is-secure { border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line)); border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, var(--surface)), var(--surface)); padding: 16px 18px; }
.bb-sechead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--brand) 14%, var(--line)); }
.bb-sechead-l { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: .96rem; }
.bb-lock { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand); color: #fff; flex: none; }
.bb-lock svg { width: 15px; height: 15px; }
.bb-verified { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; color: var(--ok, #1aa260); background: color-mix(in srgb, var(--ok, #1aa260) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok, #1aa260) 28%, var(--line)); padding: 4px 9px; border-radius: 999px; }
.bb-verified svg { width: 13px; height: 13px; }
.bank-box.is-secure .bb-agent { margin-bottom: 12px; }
.bb-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px 22px; align-items: start; }
.bb-main { margin: 0; display: grid; gap: 11px; }
.bb-row { display: grid; gap: 2px; }
.bb-row dt { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.bb-row dd { margin: 0; font-size: .95rem; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bb-row.bb-benef dd strong, .bb-row.bb-iban dd strong { font-size: 1.02rem; }
.bb-row .bb-bic { color: var(--muted); }
.bb-side { display: grid; gap: 12px; align-content: start; }
.bb-amount { border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line)); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.bb-amount-l, .bb-ref-l { display: block; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 3px; }
.bb-amount-v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bb-amount-v strong { font-size: 1.5rem; font-weight: 800; color: var(--brand); letter-spacing: -.01em; line-height: 1.1; }
.bb-ref { border: 1px dashed color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 12px; padding: 12px 14px; }
.bb-ref-v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1rem; }
.bb-ref-note { display: block; margin-top: 6px; font-size: .74rem; color: var(--muted); line-height: 1.4; }
.inv-paybox .bank-box.is-secure { background: var(--surface); padding: 16px 18px; }
@media (max-width: 620px) { .bb-grid { grid-template-columns: 1fr; } }

/* small "open invoice" link on the pay step + document links row */
.invoice-open { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 9px 14px; border-radius: 11px; font-size: .9rem; font-weight: 700; color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line)); transition: background .15s, transform .15s; }
.invoice-open:hover { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); transform: translateY(-1px); color: var(--brand); }
.invoice-open .io-ic { color: var(--brand); display: inline-flex; }
.invoice-open .io-num { font-size: .78rem; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--line); padding: 1px 7px; border-radius: 999px; }
.invoice-open > svg:last-child { color: var(--muted); }
.doc-links { display: flex; gap: 8px; flex-wrap: wrap; }

/* invoice: full-width payment box + full-width revolut + page 2 */
.inv-paybox { border: 2px solid var(--brand); border-radius: 16px; padding: 18px 20px; background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.inv-paybox-h { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 12px; }
.inv-paybox .bank-box { background: transparent; padding: 0; }
.inv-afternote { color: var(--ink-2); }
.revolut-wide { margin-top: 4px; }
.invoice-p2 { margin-top: 20px; }
@media print { .invoice-p2 { break-before: page; } }

/* set-appointment: waiting state with a locked dummy calendar */
.appt-card { text-align: center; }
.appt-card > h2 { text-align: center; }
.appt-card .verify-status { max-width: 580px; margin-left: auto; margin-right: auto; text-align: left; }
.appt-card .appt-form { text-align: left; }
/* additional-verification card (tenant) */
.verify-card { border: 2px solid color-mix(in srgb, var(--brand) 40%, var(--line)); }
.verify-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.verify-head .vh-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: #fff; }
.verify-head .vh-ic svg { width: 22px; height: 22px; }
.verify-head h2 { margin: 0; font-size: 1.25rem; }
.verify-body { margin-bottom: 14px; }
.verify-form { display: grid; gap: 12px; }

.appt-active { max-width: 600px; margin: 0 auto; }
.appt-active .appt-lead { text-align: center; max-width: 480px; margin: 2px auto 0; }
.appt-active .appt-form { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line)); border-radius: 16px; padding: 18px 20px; margin: 16px auto 0; }
.appt-ipt label { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: .85rem; margin-bottom: 6px; }
.appt-ipt label .ai-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand); flex: none; }
.appt-ipt label .ai-ic svg { width: 13px; height: 13px; }
.appt-secure { display: flex; align-items: center; gap: 9px; justify-content: center; text-align: left; max-width: 560px; margin: 12px auto 0; padding: 10px 14px; border-radius: 11px; font-size: .82rem; line-height: 1.45; color: var(--ink); background: color-mix(in srgb, var(--brand) 7%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--brand) 30%, var(--line)); }
.appt-secure .as-ic { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--brand); color: #fff; }
.appt-secure .as-ic svg { width: 14px; height: 14px; }
.appt-lockwrap { position: relative; max-width: 420px; margin: 18px auto 4px; }
.cal-dummy { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--surface); box-shadow: var(--shadow); filter: grayscale(1); opacity: .6; user-select: none; pointer-events: none; }
.cal-dummy .cal-head { text-align: center; margin-bottom: 12px; font-size: 1.05rem; }
.cal-dummy .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
.cal-dummy .cal-wd { font-size: .72rem; color: var(--muted); font-weight: 700; padding: 4px 0; }
.cal-dummy .cal-day { padding: 9px 0; border-radius: 9px; font-size: .9rem; background: var(--bg-soft); }
.appt-lock { position: absolute; inset: 0; display: grid; place-items: center; gap: 8px; text-align: center; }
.appt-lock .al-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow); }
.appt-lock p { margin: 0; font-weight: 700; font-size: .9rem; color: var(--ink); background: rgba(255,255,255,.9); padding: 6px 12px; border-radius: 999px; }

/* ---- animated "confirming your payment" lock over the calendar ---- */
.appt-lockwrap.is-confirming .cal-dummy { position: relative; overflow: hidden; }
.appt-lockwrap.is-confirming .cal-dummy::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform: translateX(-120%); animation: al-sheen 2.6s ease-in-out infinite;
}
.appt-lock-live { gap: 10px; padding: 14px; }
.appt-lock-live .al-badge { position: relative; width: 58px; height: 58px; display: grid; place-items: center; }
.appt-lock-live .al-core {
  position: relative; z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  background: var(--brand); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 22px -6px rgba(14,90,73,.6); animation: al-breathe 2.2s ease-in-out infinite;
}
.appt-lock-live .al-ring {
  position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--brand); opacity: 0; animation: al-ripple 2.2s ease-out infinite;
}
.appt-lock-live .al-ring:nth-child(2) { animation-delay: 1.1s; }
.appt-lock-live .al-title { font-weight: 800; font-size: .92rem; color: var(--ink); background: rgba(255,255,255,.92); padding: 6px 14px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.appt-lock-live .al-sub { font-weight: 600; font-size: .82rem; color: var(--brand); background: var(--brand-50); padding: 5px 12px; border-radius: 999px; }
.appt-lock-live .al-bar { width: min(240px, 72%); height: 6px; border-radius: 999px; background: var(--brand-100); overflow: hidden; }
.appt-lock-live .al-bar > span { display: block; width: 40%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--accent)); animation: al-progress 1.8s ease-in-out infinite; }
.appt-lock-live .al-wait { display: inline-flex; align-items: center; gap: 2px; margin: 0; font-size: .78rem; font-weight: 600; color: var(--ink-2); background: rgba(255,255,255,.82); padding: 5px 12px; border-radius: 999px; max-width: 320px; }
.appt-lock-live .al-dots { display: inline-flex; gap: 3px; margin-left: 4px; }
.appt-lock-live .al-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--brand); display: inline-block; animation: al-dot 1.4s ease-in-out infinite; }
.appt-lock-live .al-dots i:nth-child(2) { animation-delay: .2s; }
.appt-lock-live .al-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes al-sheen { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(120%); } }
@keyframes al-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes al-ripple { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes al-progress { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@keyframes al-dot { 0%,100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .appt-lockwrap.is-confirming .cal-dummy::after, .appt-lock-live .al-core,
  .appt-lock-live .al-ring, .appt-lock-live .al-bar > span, .appt-lock-live .al-dots i { animation: none; }
  .appt-lock-live .al-bar > span { width: 100%; }
}
:root[data-theme="dark"] .appt-lock-live .al-title,
:root[data-theme="dark"] .appt-lock-live .al-wait { background: rgba(25,33,29,.9); color: var(--ink); }
:root[data-theme="dark"] .appt-lockwrap.is-confirming .cal-dummy::after { background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.14) 50%, transparent 80%); }

/* Editable content pages (About, Terms, Cookies, Privacy) */
.content-page { padding: 48px 24px 80px; }
.content-article { max-width: 820px; margin: 0 auto; }
.content-article > h1 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); letter-spacing: -.02em; margin-bottom: 20px; }
.content-prose { color: var(--ink); line-height: 1.7; }
.content-prose h2 { font-size: 1.25rem; margin: 28px 0 10px; letter-spacing: -.01em; }
.content-prose h3 { font-size: 1.05rem; margin: 20px 0 8px; }
.content-prose p { margin: 0 0 18px; }
.content-prose ul, .content-prose ol { margin: 0 0 14px; padding-left: 22px; }
.content-prose li { margin: 4px 0; }
.content-prose a { color: var(--brand); text-decoration: underline; }
.content-page .about-hero .content-prose { margin-top: 10px; }

/* Secure escrow explainer + animation (shown with the bank details) */
.escrow-box { margin-top: 16px; border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line)); border-radius: 16px; padding: 16px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, var(--surface)), var(--surface)); overflow: hidden; }
.escrow-head { display: flex; align-items: center; gap: 12px; }
.eb-shield { position: relative; width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: #fff; box-shadow: var(--shadow); }
.eb-shield svg { width: 22px; height: 22px; }
.eb-ring { position: absolute; inset: -4px; border-radius: 14px; border: 2px solid var(--brand); opacity: 0; animation: eb-pulse 2.2s ease-out infinite; }
.escrow-head .eb-txt { flex: 1; display: flex; flex-direction: column; }
.escrow-head .eb-txt strong { font-size: .98rem; }
.escrow-head .eb-txt span { font-size: .84rem; color: var(--muted); line-height: 1.4; }
.eb-badge { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line)); padding: 5px 9px; border-radius: 999px; }
.escrow-bar { position: relative; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, var(--line)); margin: 14px 0 4px; overflow: hidden; }
.escrow-bar > span { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--brand), transparent); animation: eb-scan 1.9s ease-in-out infinite; }
.escrow-flow { display: grid; grid-template-columns: minmax(64px,1fr) minmax(40px,1.2fr) auto minmax(40px,1.2fr) minmax(64px,1fr); align-items: start; gap: 4px; margin: 18px 0 8px; }
.ef-node { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-top: 2px; }
.ef-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--brand) 30%, var(--line)); color: var(--brand); }
.ef-ic svg { width: 20px; height: 20px; }
.ef-node.is-hub { padding-top: 0; }
.ef-node.is-hub .ef-ic { width: 56px; height: 56px; background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--brand) 70%, transparent); animation: eb-hub 2.3s ease-in-out infinite; }
.ef-node.is-hub .ef-ic svg { width: 27px; height: 27px; }
.ef-l { font-size: .76rem; font-weight: 600; color: var(--ink); max-width: 120px; line-height: 1.3; }
.ef-node.is-hub .ef-l { font-weight: 800; }
.ef-hub-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line)); padding: 2px 7px; border-radius: 999px; }
.ef-hub-badge svg { width: 11px; height: 11px; }
/* connectors: two directional rails (funds → , keys ←) */
.ef-conn { display: flex; flex-direction: column; gap: 16px; align-self: start; margin-top: 18px; width: 100%; }
.ef-rail { position: relative; height: 2px; border-radius: 2px; }
.ef-rail.is-money { background: color-mix(in srgb, var(--ok, #1aa260) 34%, var(--line)); }
.ef-rail.is-keys { background: color-mix(in srgb, var(--brand) 28%, var(--line)); }
.ef-rail::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -4px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.ef-rail.is-money::after { right: -1px; border-left: 6px solid color-mix(in srgb, var(--ok, #1aa260) 70%, #000 0%); }
.ef-rail.is-keys::after { left: -1px; border-right: 6px solid var(--brand); }
.ef-dot { position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 2px 6px -1px rgba(0,0,0,.3); }
.ef-dot svg { width: 10px; height: 10px; }
.ef-rail.is-money .ef-dot { background: var(--ok, #1aa260); animation: eb-travel 2s linear infinite; }
.ef-rail.is-keys .ef-dot { background: var(--brand); animation: eb-travel-rev 2s linear infinite; }
.escrow-flow .ef-conn:nth-of-type(4) .ef-rail.is-money .ef-dot { animation-delay: 1s; }
.escrow-flow .ef-conn:nth-of-type(2) .ef-rail.is-keys .ef-dot { animation-delay: 1s; }
.escrow-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 2px 0 2px; }
.escrow-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted); font-weight: 600; }
.escrow-legend i { width: 9px; height: 9px; border-radius: 50%; }
.escrow-legend .el-money i { background: var(--ok, #1aa260); }
.escrow-legend .el-keys i { background: var(--brand); }
.escrow-points { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.escrow-points li { display: flex; gap: 7px; align-items: flex-start; font-size: .84rem; color: var(--ink); line-height: 1.45; }
.escrow-points li svg { color: var(--brand); flex: none; margin-top: 2px; }
.escrow-box.is-compact .escrow-points { grid-template-columns: 1fr; }
.escrow-guarantee { display: flex; gap: 10px; align-items: center; margin: 12px 0 0; padding: 11px 13px; border-radius: 12px; font-size: .85rem; line-height: 1.45; color: var(--ink); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--brand) 34%, var(--line)); }
.escrow-guarantee .eg-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand); color: #fff; }
.escrow-guarantee .eg-ic svg { width: 16px; height: 16px; }
@keyframes eb-pulse { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes eb-scan { 0% { left: -42%; } 100% { left: 102%; } }
@keyframes eb-hub { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 35%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--brand) 0%, transparent); } }
@keyframes eb-travel { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 16px); opacity: 0; } }
@keyframes eb-travel-rev { 0% { left: calc(100% - 16px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 0; opacity: 0; } }
@media (max-width: 560px) {
  .escrow-points { grid-template-columns: 1fr; }
  .ef-l { font-size: .66rem; max-width: 78px; }
  .ef-ic { width: 36px; height: 36px; } .ef-node.is-hub .ef-ic { width: 46px; height: 46px; }
  .ef-conn { gap: 12px; }
  .escrow-head .eb-badge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eb-ring, .escrow-bar > span, .ef-node.is-hub .ef-ic, .ef-dot { animation: none; }
  .escrow-bar > span { left: 0; width: 100%; opacity: .5; }
  .ef-rail.is-money .ef-dot { left: calc(50% - 8px); } .ef-rail.is-keys .ef-dot { left: calc(50% - 8px); }
}

/* Cookie consent banner */
.cookie-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1200; background: var(--ink); color: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.28); animation: cc-in .3s ease; }
.cookie-consent.is-out { opacity: 0; transform: translateY(8px); transition: .25s ease; }
.cookie-consent .cc-in { max-width: 1100px; margin: 0 auto; padding: 14px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cookie-consent .cc-body { flex: 1; min-width: 220px; }
.cookie-consent .cc-title { display: block; font-size: 1rem; margin-bottom: 4px; }
.cookie-consent .cc-text { margin: 0; font-size: .86rem; line-height: 1.5; opacity: .92; }
.cookie-consent .cc-text a { color: #fff; text-decoration: underline; }
.cookie-consent .btn { flex: none; }
@keyframes cc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .cookie-consent .cc-in { padding: 12px 14px; } .cookie-consent .btn { width: 100%; } }
.appt-wait-actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 10px; margin-top: 18px; }
.appt-locked-note .aln-msg { margin-left: auto; margin-right: auto; text-align: left; }
.appt-wait-actions form { margin: 0; }
.appt-locked-note { }
.appt-locked-note > summary { list-style: none; cursor: pointer; }
.appt-locked-note > summary::-webkit-details-marker { display: none; }
.appt-locked-note .aln-msg { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; background: #eef4fb; border: 1px solid #d6e4f5; border-radius: 12px; max-width: 460px; }
.appt-locked-note .aln-msg p { margin: 0; font-size: .9rem; color: var(--ink); }
.appt-locked-note[open] > summary { box-shadow: inset 0 0 0 1px var(--brand); }

/* My rental agreement (draft lease) */
.invoice.agreement .inv-stamp.is-draft { background: #fff4e5; color: #b26a00; border-color: #f3d9ae; }
.agr-note { margin: 10px 0 22px; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; font-size: .9rem; color: var(--muted); }
.agr-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 20px 0 8px; padding: 16px; background: var(--bg-soft); border-radius: 14px; }
.agr-facts > div > span { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.agr-facts > div > strong { font-size: 1.02rem; }
.agr-clauses { margin-top: 24px; display: grid; gap: 22px; }
.agr-clause h3 { font-size: 1rem; margin: 0 0 7px; }
.agr-clause p { margin: 0 0 10px; color: var(--ink); line-height: 1.65; }
.agr-clause p:last-child { margin-bottom: 0; }
.agr-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.agr-sign.agr-sign-3 { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.agr-stamp { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; }
.agr-stamp img { max-width: 150px; max-height: 150px; opacity: .92; }
.bpc-list { list-style: none; padding: 0; margin: 10px 0 8px; display: grid; gap: 8px; }
.bpc-list li { display: flex; align-items: center; gap: 10px; line-height: 1.4; }
.bpc-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8rem; }
.bpc-mark.ok { background: var(--brand-50, #e8f3ee); color: var(--brand-700, #1d4f40); }
.bpc-mark.no { background: var(--bg-soft, #f2f2ef); color: var(--muted, #8a8a80); }

/* Blog */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg, 18px); overflow: hidden; box-shadow: var(--shadow-xs); transition: box-shadow .2s, transform .2s; }
.blog-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.blog-card-media { display: block; aspect-ratio: 16 / 10; background: var(--bg-soft); overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
.blog-card-ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); }
.blog-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card-date { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.blog-card-body h2 { font-size: 1.12rem; line-height: 1.3; }
.blog-card-body h2 a { color: var(--ink); }
.blog-card-body p { color: var(--ink-2, #4a4a44); font-size: .94rem; line-height: 1.55; margin: 0; }
.blog-card-body .link-arrow { margin-top: auto; font-weight: 700; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-article-in { max-width: 760px; padding-top: 34px; padding-bottom: 70px; }
.blog-article-head { margin: 18px 0 20px; }
.blog-article-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: 10px 0; }
.blog-article-cover { border-radius: var(--radius-lg, 18px); overflow: hidden; margin: 10px 0 26px; }
.blog-article-cover img { width: 100%; display: block; }
.prose { color: var(--ink); line-height: 1.75; font-size: 1.05rem; }
.prose h2 { font-size: 1.4rem; margin: 30px 0 10px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose a { color: var(--brand); text-decoration: underline; }
.blog-article-cta { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .agr-sign.agr-sign-3 { grid-template-columns: 1fr; gap: 28px; } }
.agr-sign .agr-line { display: block; height: 1px; background: var(--ink); margin-bottom: 8px; }
.agr-signed { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); background: color-mix(in srgb, var(--brand) 7%, var(--surface)); border-radius: 10px; margin-bottom: 8px; color: var(--brand); }
.agr-signed strong { color: var(--ink); font-size: .9rem; }
.agr-sign p { margin: 0; font-size: .85rem; color: var(--muted); }

/* Handover report (proces-verbal) — its own printed page */
.pv-doc { margin-top: 30px; }
.pv-block { margin-top: 8px; }
.pv-block h3 { font-size: 1rem; margin: 0 0 10px; }
.pv-table { width: 100%; border-collapse: collapse; }
.pv-table th { text-align: left; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--line); }
.pv-table td { padding: 10px; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: top; }
.pv-table .pv-fill { background: repeating-linear-gradient(0deg, transparent, transparent 95%, var(--line) 95%); min-width: 90px; height: 34px; }
@media print { .pv-doc { break-before: page; } .pv-table .pv-fill { background: none; } }

/* Reviews */
.rv-stars { color: #f5a623; letter-spacing: 1px; font-size: .95rem; white-space: nowrap; }
.rv-stars .rv-dim { color: var(--line); }
.pp-rv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pp-rv-avg { font-size: .95rem; color: var(--muted); }
.pp-reviews { display: grid; gap: 16px; margin-top: 16px; }
.pp-review { border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.pp-rv-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pp-review p { margin: 0; line-height: 1.6; }
.avatar.sm { width: 36px; height: 36px; font-size: .9rem; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; flex: none; }
.rv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
.rv-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04)); }
.rv-card .rv-quote { margin: 0; line-height: 1.6; flex: 1; }
.rv-by { display: flex; align-items: center; gap: 10px; }
@media (max-width: 860px) { .rv-cards { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .agr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agr-sign { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================ support chat widget */
.chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 1200; font-size: 15px; }
/* On mobile the sticky price/book bar sits at the bottom, so lift the chat bubble above it (no overlap). */
@media (max-width: 980px) { body.has-mobile-book .chat-widget { bottom: calc(86px + env(safe-area-inset-bottom)); } }
.chat-fab { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; background: var(--brand); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--brand) 70%, transparent); transition: transform .15s, box-shadow .15s; position: relative; }
.chat-fab svg { width: 26px; height: 26px; }
/* original cat mascot on the chat button — white cat, blinking eyes, ears wiggle on hover */
.chat-cat { width: 33px; height: 33px; display: block; color: #fff; }
.chat-cat svg { width: 100%; height: 100%; display: block; }
.cat-ear { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .22s var(--ease); }
.chat-fab:hover .cat-ear-l { transform: rotate(-13deg); }
.chat-fab:hover .cat-ear-r { transform: rotate(13deg); }
.cat-eye { transform-box: fill-box; transform-origin: center; animation: cat-blink 5.5s ease-in-out infinite; }
@keyframes cat-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
@media (prefers-reduced-motion: reduce) { .cat-eye { animation: none; } .cat-ear { transition: none; } }
.chat-fab:hover { transform: translateY(-2px) scale(1.03); }
.chat-widget.is-open .chat-fab { transform: scale(.9); opacity: .9; }
.cf-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #e24b4b; color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.chat-panel { position: absolute; right: 0; bottom: 72px; width: 370px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 110px); background: var(--surface); border-radius: 18px; box-shadow: 0 24px 60px -16px rgba(0,0,0,.4); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); animation: chat-in .18s ease-out; }
@keyframes chat-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: var(--brand); color: #fff; }
.chat-head .ch-ava { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: none; }
.chat-head .ch-ava svg { width: 20px; height: 20px; }
.chat-head .ch-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-head .ch-id strong { font-size: .98rem; }
.ch-status { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; opacity: .92; }
.ch-dot { width: 8px; height: 8px; border-radius: 50%; background: #c7ccd1; flex: none; }
.ch-dot.is-on { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.3); }
.ch-x { margin-left: auto; background: transparent; border: 0; color: #fff; cursor: pointer; opacity: .85; padding: 4px; border-radius: 8px; }
.ch-x:hover { opacity: 1; background: rgba(255,255,255,.14); }
.ch-x svg { width: 20px; height: 20px; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 9px; background: color-mix(in srgb, var(--brand) 3%, var(--surface)); }
.cm { max-width: 82%; }
.cm-t { padding: 9px 12px; border-radius: 14px; line-height: 1.45; font-size: .9rem; overflow-wrap: anywhere; }
.cm-bot .cm-t, .cm-agent .cm-t { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; color: var(--ink); align-self: flex-start; }
.cm-bot, .cm-agent { align-self: flex-start; }
.cm-you { align-self: flex-end; }
.cm-you .cm-t { background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.cm-file { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 8px 11px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: .84rem; font-weight: 600; color: var(--brand); max-width: 100%; }
.cm-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-you .cm-file { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; }
.chat-input { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.ci-clip { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--muted); border: 1px solid var(--line); background: var(--surface); }
.ci-clip:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.ci-clip svg { width: 18px; height: 18px; }
.chat-input textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: .9rem; max-height: 110px; line-height: 1.4; }
.chat-input textarea:focus { outline: none; border-color: var(--brand); }
.ci-send { flex: none; width: 40px; height: 40px; border-radius: 11px; border: 0; cursor: pointer; background: var(--brand); color: #fff; display: grid; place-items: center; }
.ci-send:hover { filter: brightness(1.05); }
.ci-send svg { width: 19px; height: 19px; }
.ci-filerow { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: color-mix(in srgb, var(--brand) 6%, var(--surface)); border-top: 1px solid var(--line); font-size: .82rem; }
.ci-filerow span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
.ci-filerow button { background: transparent; border: 0; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
@media (max-width: 480px) {
  .chat-widget { right: 14px; bottom: 14px; }
  /* Leave a clear gap at the top so the close (×) sits below the site header and is easy to tap. */
  .chat-panel { width: calc(100vw - 20px); right: -4px; bottom: 72px;
    height: calc(100vh - 168px); height: calc(100dvh - 168px); max-height: none; }
}
/* bigger, easier-to-hit close button on touch */
.chat-head .ch-x { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; flex: none; }
.chat-head .ch-x:hover { background: rgba(255,255,255,.15); }
@media print { .chat-widget { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .chat-panel { animation: none; } .chat-fab { transition: none; } }

/* ============================================================ set-appointment: animated visit simulation */
.visit-sim { margin: 16px auto 4px; max-width: 560px; }
.vs-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding-top: 26px; }
.vs-track::before { content: ""; position: absolute; top: 44px; left: 8%; right: 8%; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--brand) 16%, var(--line)); }
.vs-progress { position: absolute; top: 44px; left: 8%; height: 3px; border-radius: 3px; background: var(--brand); width: 0; animation: vs-fill 9s ease-in-out infinite; }
.vs-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; z-index: 1; }
.vs-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid color-mix(in srgb, var(--brand) 24%, var(--line)); color: color-mix(in srgb, var(--brand) 55%, var(--muted)); transition: all .4s; }
.vs-ic svg { width: 18px; height: 18px; }
.vs-l { font-size: .72rem; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.25; max-width: 92px; }
.vs-walker { position: absolute; top: 28px; left: 8%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 70%, transparent); animation: vs-walk 9s ease-in-out infinite; z-index: 2; }
.vs-walker svg { width: 16px; height: 16px; }
.vs-step:nth-child(1) .vs-ic { animation: vs-pop 9s ease-in-out infinite; animation-delay: 0s; }
.vs-step:nth-child(2) .vs-ic { animation: vs-pop 9s ease-in-out infinite; animation-delay: 1.8s; }
.vs-step:nth-child(3) .vs-ic { animation: vs-pop 9s ease-in-out infinite; animation-delay: 3.6s; }
.vs-step:nth-child(4) .vs-ic { animation: vs-pop 9s ease-in-out infinite; animation-delay: 5.4s; }
.vs-step:nth-child(5) .vs-ic { animation: vs-pop 9s ease-in-out infinite; animation-delay: 7.2s; }
@keyframes vs-fill { 0% { width: 0; } 20% { width: 0; } 100% { width: 84%; } }
@keyframes vs-walk { 0%,8% { left: 8%; } 28% { left: 29%; } 48% { left: 50%; } 68% { left: 71%; } 88%,100% { left: 92%; } }
@keyframes vs-pop { 0% { transform: scale(1); } 4% { transform: scale(1.18); background: var(--brand); color: #fff; border-color: var(--brand); } 18% { transform: scale(1); background: var(--brand); color: #fff; border-color: var(--brand); } 100% { background: var(--brand); color: #fff; border-color: var(--brand); } }
.visit-note { display: flex; gap: 12px; align-items: flex-start; max-width: 560px; margin: 16px auto 0; padding: 13px 15px; border-radius: 13px; background: color-mix(in srgb, var(--brand) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line)); }
.visit-note .vn-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand); color: #fff; }
.visit-note .vn-ic svg { width: 17px; height: 17px; }
.visit-note strong { font-size: .92rem; }
.visit-note p { font-size: .84rem; color: var(--ink-2, var(--muted)); line-height: 1.5; margin-top: 3px; }
@media (max-width: 560px) { .vs-l { font-size: .6rem; } .vs-ic { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .vs-progress, .vs-walker, .vs-step .vs-ic { animation: none !important; } .vs-progress { width: 84%; } .vs-walker { left: 92%; } .vs-step .vs-ic { background: var(--brand); color: #fff; border-color: var(--brand); } }

/* ============================================================ "verified to the bone" trust panel */
.trust-verify { border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); border-radius: 16px; padding: 18px 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, var(--surface)), var(--surface)); }
.trust-verify .tv-head { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 14px; }
.trust-verify .tv-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: #fff; box-shadow: var(--shadow); }
.trust-verify .tv-ic svg { width: 22px; height: 22px; }
.trust-verify .tv-head strong { display: block; font-size: 1.05rem; }
.trust-verify .tv-head span { font-size: .88rem; color: var(--muted); line-height: 1.5; }
.tv-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.trust-verify.is-compact .tv-points { grid-template-columns: 1fr; gap: 12px; }
.tv-points li { display: flex; gap: 10px; align-items: flex-start; }
.tvp-ic { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand); }
.tvp-ic svg { width: 15px; height: 15px; }
.tv-points li strong { display: block; font-size: .9rem; }
.tv-points li p { font-size: .82rem; color: var(--ink-2, var(--muted)); line-height: 1.45; margin-top: 2px; }
@media (max-width: 640px) { .tv-points { grid-template-columns: 1fr; } }

/* verified line on the listing + report sidecard */
.pp-verified { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; font-size: .9rem; line-height: 1.5; color: var(--ink); }
.pp-verified .pv-ic { flex: none; color: var(--brand); margin-top: 1px; }
.pp-report { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; }
.pp-report > summary { display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 10px 14px; font-size: .85rem; font-weight: 600; color: var(--muted); list-style: none; }
.pp-report > summary::-webkit-details-marker { display: none; }
.pp-report > summary:hover { color: var(--brand); }
.pp-report[open] > summary { border-bottom: 1px solid var(--line); color: var(--ink); }
.pp-report .report-wrap { padding: 14px; }

/* display-only views counter */
.pp-views { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; color: var(--muted); font-weight: 600; }
.pp-views svg { width: 15px; height: 15px; }
.pcard-views { display: inline-flex; align-items: center; gap: 4px; }
.pcard-views svg { width: 13px; height: 13px; vertical-align: -2px; }

/* ---- Messaging (My Messages + property contact relay) ---- */
.msg-list { display: flex; flex-direction: column; gap: 10px; }
.msg-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.msg-row:hover { border-color: var(--brand, #2a7); box-shadow: var(--shadow-sm); }
.msg-row.is-unread { border-left: 3px solid #e8604c; }
.msg-row-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-sand, #f3f1ec); flex: none; }
.msg-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row-dot { width: 9px; height: 9px; border-radius: 50%; background: #e8604c; flex: none; }

.thread-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.thread-stream { display: flex; flex-direction: column; gap: 12px; }
.tmsg { max-width: 82%; padding: 12px 15px; border-radius: 14px; line-height: 1.5; }
.tmsg-who { font-size: .72rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 4px; opacity: .8; }
.tmsg-body { white-space: normal; }
.tmsg-me { align-self: flex-end; background: var(--brand, #1f7a54); color: #fff; border-bottom-right-radius: 4px; }
.tmsg-me .tmsg-who, .tmsg-me .muted { color: rgba(255,255,255,.85); }
.tmsg-team { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.tmsg-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .85rem; font-weight: 600; text-decoration: underline; }
.tmsg-me .tmsg-file { color: #fff; }

.thread-reply { margin-top: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; background: var(--surface); }
.thread-reply .textarea { width: 100%; }
.thread-reply-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.file-pick { cursor: pointer; }
.file-pick input { display: none; }

.ask-relay { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-sand, #f3f1ec); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.ask-relay-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface); flex: none; }
.ask-relay-handle { font-family: var(--mono, ui-monospace, monospace); font-weight: 700; font-size: .92rem; word-break: break-all; }
.ask-gate { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.ask-gate p { margin-bottom: 4px; }

.kv-list { display: flex; flex-direction: column; gap: 10px; }
.kv-list dt { margin-bottom: 1px; }
.kv-list dd { margin: 0; }

@media (max-width: 760px) { .tmsg { max-width: 92%; } }

/* ---- Owner contact (revealed after a confirmed booking) ---- */
.owner-contact-card h2 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
.oc-rows { display: flex; flex-direction: column; gap: 10px; }
.oc-row { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.oc-row:hover { border-color: var(--brand, #1f7a54); box-shadow: var(--shadow-sm); }
.oc-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--bg-sand, #f3f1ec); flex: none; }
.oc-ic-wa { background: #25d366; color: #fff; }
.oc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.oc-cta { font-weight: 700; font-size: .9rem; color: var(--brand, #1f7a54); white-space: nowrap; }
.oc-wa .oc-cta { color: #1a9e4b; }

/* message composer rich-text toolbar */
.rt-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.rt-toolbar button { width: 30px; height: 28px; border: 1px solid var(--line); background: var(--surface); border-radius: 7px; cursor: pointer; font-size: .9rem; line-height: 1; }
.rt-toolbar button:hover { border-color: var(--brand, #1f7a54); }
.rt-hint { margin-left: 4px; }

/* property page: real recent-interest list (masked handles, real data only) */
.pp-activity { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.pp-activity-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pp-activity-list li { font-size: .86rem; }
.ppa-handle { font-family: var(--mono, ui-monospace, monospace); font-weight: 700; }

/* My Messages: top bar, composer, select-to-delete */
.msg-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.msg-new { margin: 18px 0 6px; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.msg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.msg-row { position: relative; }
.msg-pick { display: flex; align-items: center; padding: 0 2px 0 14px; }
.msg-row-link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; text-decoration: none; color: inherit; padding: 14px 18px 14px 6px; }
.msg-row { display: flex; align-items: stretch; }
@media (max-width: 600px) { .msg-top { flex-direction: column; } }

/* card payment panel (external provider link) + owner feedback link */
.card-pay { border: 1px solid var(--line); border-radius: var(--radius-lg, 16px); padding: 20px; background: var(--surface); display: grid; gap: 14px; }
/* "Pay by card through Remitly" — shown under the bank details when the Card method is chosen */
.remitly-box { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg, 16px); padding: 20px; background: var(--surface); display: grid; gap: 16px; }
.remitly-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: rs; }
.remitly-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: .92rem; line-height: 1.5; color: var(--ink); }
.remitly-steps .rs-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; background: var(--brand); color: #fff; margin-top: 1px; }
/* illustrated Remitly guide: phone mockups + step text */
.rg-steps {
  --rg-screen: #ffffff; --rg-frame: #cbd5d0; --rg-line: #e4eae7;
  --rg-mut: #b6c0bb; --rg-brand: var(--brand); --rg-brand-s: var(--brand-50);
  list-style: none; margin: 4px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 16px; counter-reset: rg;
}
.rg-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.rg-art-wrap { position: relative; }
.rg-art { width: 96px; height: auto; display: block; filter: drop-shadow(0 10px 22px rgba(14,90,73,.14)); }
.rg-step-n { position: absolute; top: -6px; left: -6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); z-index: 2; }
.rg-step-t { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--ink); }
@media (max-width: 640px) { .rg-steps { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; } }
@media (max-width: 380px) { .rg-steps { grid-template-columns: 1fr; } .rg-step { flex-direction: row; text-align: left; gap: 14px; } .rg-art { width: 72px; } }
:root[data-theme="dark"] .rg-steps { --rg-screen: #141b17; --rg-frame: #3a443e; --rg-line: #2b332e; --rg-mut: #4b564f; }
.rg-wrap { display: grid; gap: 16px; }
.rg-about { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.rg-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rg-ways-l { font-size: .82rem; font-weight: 700; color: var(--ink); margin-right: 2px; }
.rg-way { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--brand); background: var(--brand-50); border: 1px solid var(--brand-100); padding: 5px 11px; border-radius: 999px; }
.rg-way .icon-sm { color: var(--brand); }
.rg-video { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; color: var(--brand); text-decoration: none; align-self: start; }
.rg-video .rg-video-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; }
.rg-video:hover { text-decoration: underline; }
.rg-tm { margin: 0; font-size: .72rem; line-height: 1.45; color: var(--muted); }
.rg-upload { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand); font-size: .9rem; font-weight: 600; line-height: 1.45; }
.rg-upload .icon-sm { flex: none; color: var(--brand); }
/* subtle, tasteful animation on the illustrated bank steps */
.rg-anim .rg-step .rg-art { animation: rg-float 4s ease-in-out infinite; }
.rg-anim .rg-step:nth-child(2n) .rg-art { animation-delay: .6s; }
.rg-anim .rg-step:nth-child(3n) .rg-art { animation-delay: 1.2s; }
.rg-anim .rg-step .rg-step-n { animation: rg-pulse 2.6s ease-in-out infinite; }
@keyframes rg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes rg-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(14,90,73,.35); } 50% { box-shadow: 0 0 0 5px rgba(14,90,73,0); } }
@media (prefers-reduced-motion: reduce) { .rg-anim .rg-step .rg-art, .rg-anim .rg-step .rg-step-n { animation: none; } }
/* step 2 — chosen method + ways to pay (details live on the invoice) */
.pay-chosen { display: grid; gap: 16px; }
.pc-head { display: flex; gap: 12px; align-items: flex-start; }
.pc-head .pc-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); }
.pc-head strong { font-size: 1.05rem; }
.pc-head p { margin: 4px 0 0; }
.pay-channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pay-channels li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pay-channels .ch-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--bg-soft); color: var(--brand); }
.pay-channels strong { font-size: .92rem; }
.pay-channels p { margin: 3px 0 0; font-size: .85rem; color: var(--ink-2); line-height: 1.45; }
.pay-afterpay { display: flex; gap: 10px; align-items: center; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand); font-weight: 600; font-size: .9rem; line-height: 1.45; }
.pay-afterpay .icon-sm { flex: none; }
/* Remitly block on the invoice (under the bank transfer) */
.inv-remitly { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); display: grid; gap: 10px; }
.inv-remitly-h { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.inv-remitly-h .icon-sm { color: var(--brand); }
.inv-remitly > p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--ink-2); }
.inv-remitly-ways { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-remitly-ways span { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--brand); background: var(--brand-50); border: 1px solid var(--brand-100); padding: 4px 10px; border-radius: 999px; }
.inv-remitly-ways .icon-sm { color: var(--brand); }
.inv-remitly .btn { justify-self: start; }
.inv-remitly-tm { margin: 0; font-size: .7rem; line-height: 1.4; color: var(--muted); }
/* anti-fraud "pay safely" rules box */
.pay-safety { margin-top: 14px; border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 14px; padding: 16px 18px; background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.pay-safety .ps-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pay-safety .ps-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand); color: #fff; }
.pay-safety .ps-head strong { font-size: 1rem; }
.pay-safety .ps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pay-safety .ps-list li { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; line-height: 1.5; color: var(--ink); }
.pay-safety .ps-list li svg { flex: none; margin-top: 2px; color: var(--brand); }
/* How we work & partners section */
.work-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; }
.work-text p { font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); margin: 0 0 16px; }
.work-media img { width: 100%; border-radius: 18px; box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; }
.work-media-empty { display: grid; place-items: center; aspect-ratio: 4/3; border: 3px dashed #e8604c; border-radius: 18px; background: #fff5f2; }
.work-media-empty span { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #e8604c; font-weight: 700; text-align: center; padding: 20px; }
.work-media-empty svg { width: 34px; height: 34px; }
.work-reach { margin-top: 40px; text-align: center; }
.work-reach h3 { font-size: 1.2rem; margin: 0 0 6px; }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 18px; }
.logo-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 56px; padding: 0 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-xs); font-weight: 700; color: var(--ink-2); }
.logo-chip img { max-height: 32px; max-width: 110px; object-fit: contain; }
.logo-row-muted .logo-chip { background: var(--bg-soft); box-shadow: none; opacity: .92; }

/* ---- Two-way distribution network (hub in the middle, portals orbiting, floating homes travel both ways) ---- */
.reach-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0 4px; }
.rl-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.rl-pill .icon-sm { width: 15px; height: 15px; }
.rl-out { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); color: var(--brand); }
.rl-in  { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: color-mix(in srgb, var(--accent) 72%, #000); }
.rl-in .icon-sm { transform: rotate(180deg); }

.reach-orbit { position: relative; width: 100%; max-width: 700px; aspect-ratio: 1 / 1; margin: 10px auto 4px; }
.reach-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rch-line { stroke: color-mix(in srgb, var(--brand) 42%, var(--surface)); stroke-width: 2.2; stroke-dasharray: 6 8; animation: rchDash 1.6s linear infinite; }
.reach-lines marker path { fill: var(--brand); }
@keyframes rchDash { to { stroke-dashoffset: -28; } }
.rch-home { pointer-events: none; }
.rch-out { fill: var(--brand); }
.rch-in  { fill: var(--accent); }

.reach-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 168px; height: 168px; border-radius: 50%; display: grid; place-content: center; gap: 2px; text-align: center;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--brand) 10%, var(--surface)), #fff 72%);
  border: 2px solid var(--brand); box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--brand) 60%, transparent), var(--shadow-xs);
  animation: rchHub 6s ease-in-out infinite; }
@keyframes rchHub { 0%,100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 6px)); } }
.reach-hub .rh-mark { width: 44px; height: 44px; margin: 0 auto 2px; display: grid; place-items: center; border-radius: 14px; background: var(--brand); color: #fff; }
.reach-hub .rh-mark .icon { width: 24px; height: 24px; }
.reach-hub strong { font-size: 1.12rem; color: var(--ink); line-height: 1.1; }
.reach-hub .rh-note { font-size: .72rem; color: var(--ink-2); padding: 0 14px; }

.reach-sat { position: absolute; transform: translate(-50%, -50%); z-index: 2; width: 172px; max-width: 42vw;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px 12px; box-shadow: var(--shadow-sm);
  text-align: left; animation: rchFloat 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes rchFloat { 0%,100% { margin-top: 0; } 50% { margin-top: -9px; } }
.reach-sat .rs-name { display: block; font-weight: 800; font-size: .86rem; color: var(--ink); margin-bottom: 7px; padding-right: 22px; }
.reach-sat .rs-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.reach-sat .rs-chips i { font-style: normal; font-size: .72rem; font-weight: 600; color: var(--ink-2); background: var(--bg-soft); border-radius: 7px; padding: 3px 7px; }
.reach-sat .rs-chips .rs-more { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.reach-sat .rs-count { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: #fff; background: var(--brand); box-shadow: var(--shadow-xs); }
.reach-foot { max-width: 620px; margin: 18px auto 0; font-size: .82rem; }

@media (max-width: 760px) {
  .reach-orbit { aspect-ratio: auto; display: flex; flex-direction: column; align-items: stretch; gap: 12px; max-width: 460px; }
  .reach-lines { display: none; }
  .reach-hub, .reach-sat { position: static; transform: none; left: auto; top: auto; margin: 0 auto; animation: none; }
  .reach-hub { order: -1; width: 100%; height: auto; border-radius: 18px; padding: 16px; }
  .reach-hub .rh-mark { margin-bottom: 6px; }
  .reach-sat { width: 100%; max-width: none; }
  .reach-sat .rs-count { right: 10px; top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rch-line, .reach-hub, .reach-sat { animation: none; }
  .reach-lines use animateMotion { display: none; }
}

.fair-box { max-width: 760px; margin: 0 auto; text-align: center; }
.fair-box .fair-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--brand); color: #fff; margin-bottom: 10px; }
.fair-box h2 { font-size: 1.6rem; margin: 6px 0 10px; }
.fair-box p { font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); }
.pledge { margin: 22px auto 0; max-width: 680px; font-size: 1.15rem; font-weight: 600; line-height: 1.6; color: var(--ink); font-style: italic; padding: 20px 24px; border-left: 4px solid var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); border-radius: 0 14px 14px 0; text-align: left; }
.partners-block { max-width: 820px; margin: 44px auto 0; text-align: center; }
.partners-block h3 { font-size: 1.25rem; margin: 0 0 6px; }
.safeguards { max-width: 820px; margin: 44px auto 0; }
.safeguards h3 { font-size: 1.25rem; text-align: center; margin: 0 0 18px; }
.safeguard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.safeguard { display: flex; gap: 14px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.safeguard .hl-icon.sm { flex: none; width: 42px; height: 42px; }
.safeguard strong { display: block; margin-bottom: 3px; }
.safeguard p { margin: 0; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 820px) { .work-grid { grid-template-columns: 1fr; gap: 24px; } .safeguard-grid { grid-template-columns: 1fr; } .pledge { font-size: 1.05rem; } }
.pp-owner-fb { font-weight: 700; color: var(--brand, #1f7a54); text-decoration: none; }
.pp-owner-fb:hover { text-decoration: underline; }


/* My Invoices: an unpaid invoice stands out in red with a "needs payment" chip */
.inv-row.is-topay { border-left: 3px solid #e8604c; }
.inv-pay-chip { display: inline-flex; align-items: center; gap: 5px; background: #fdecea; color: #c0392b; font-weight: 700; font-size: .78rem; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }

/* contract: owner signature image + not-valid-without-signature note */
.agr-ownersig img { max-height: 70px; max-width: 220px; display: block; margin-bottom: 4px; }
.agr-invalid { display: flex; align-items: center; gap: 7px; background: #fdecea; color: #c0392b; border-radius: 10px; padding: 10px 14px; font-size: .9rem; font-weight: 600; margin: 0 0 14px; }

/* Owner WhatsApp — clean inline card on the booking page (official logo) */
.wa-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-left: 3px solid #25d366; }
.wa-card-main { display: flex; align-items: center; gap: 13px; min-width: 0; }
.wa-logo { width: 38px; height: 38px; color: #25d366; flex: none; }
.wa-logo-sm { width: 20px; height: 20px; flex: none; }
.wa-btn { background: #25d366; color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px; white-space: nowrap; }
.wa-btn:hover { background: #1fb457; color: #fff; }

/* ===================== Currency switcher · theme toggle · social proof ===================== */
.cur-panel { min-width: 248px; max-height: 60vh; overflow-y: auto; }
.cur-panel a { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.cur-flag { font-size: 1.05rem; line-height: 1; }
.cur-langs a { display: inline-flex; align-items: center; gap: 5px; }
.theme-toggle { position: relative; }
.theme-toggle .ic-sun, .theme-toggle .ic-moon { width: 20px; height: 20px; }
.theme-toggle .ic-sun { display: none; }
.theme-toggle .ic-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

.pp-liveproof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lp-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
.lp-pill .icon-sm { width: 14px; height: 14px; color: var(--cta); }
.lp-live { color: var(--brand); background: var(--brand-50); border-color: transparent; }
.lp-dot { width: 7px; height: 7px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 0 rgba(47,191,113,.6); animation: lpPulse 2s infinite; }
@keyframes lpPulse { 0% { box-shadow: 0 0 0 0 rgba(47,191,113,.5); } 70% { box-shadow: 0 0 0 7px rgba(47,191,113,0); } 100% { box-shadow: 0 0 0 0 rgba(47,191,113,0); } }

/* ===================== Dark mode ===================== */
:root[data-theme="dark"] {
  --ink: #eef2f0; --ink-2: #c4ccc8; --muted: #9aa49f; --muted-2: #7c857f;
  --line: #2b332e; --line-2: #37413b;
  --bg: #0f1411; --bg-soft: #161d19; --bg-sand: #1b231e; --surface: #19211d;
  --brand-50: #16241f; --brand-100: #1d2f28; --accent-50: #2a2213;
  --danger-50: #2a1613; --success-50: #122318; --info-50: #121d2c;
  --danger: #ec7a68; --success: #46b985; --info: #6aa6ec;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow-sm: 0 2px 10px rgba(0,0,0,.45);
  --shadow: 0 12px 34px -12px rgba(0,0,0,.6); --shadow-lg: 0 26px 64px -20px rgba(0,0,0,.7);
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
/* surfaces that were hard-coded white → dark surface */
:root[data-theme="dark"] .pcard, :root[data-theme="dark"] .card, :root[data-theme="dark"] .panel,
:root[data-theme="dark"] .booking-card, :root[data-theme="dark"] .step, :root[data-theme="dark"] .keyfact,
:root[data-theme="dark"] .dropdown-panel, :root[data-theme="dark"] .mobile-drawer .sheet,
:root[data-theme="dark"] .flash, :root[data-theme="dark"] .fpill > summary, :root[data-theme="dark"] .fsearch,
:root[data-theme="dark"] .filters-bar, :root[data-theme="dark"] .searchbar, :root[data-theme="dark"] .user-btn,
:root[data-theme="dark"] .chip span, :root[data-theme="dark"] .bc-field, :root[data-theme="dark"] .reach-sat,
:root[data-theme="dark"] .logo-chip, :root[data-theme="dark"] .pp-gallery, :root[data-theme="dark"] .safeguard,
:root[data-theme="dark"] .input, :root[data-theme="dark"] .select, :root[data-theme="dark"] textarea,
:root[data-theme="dark"] .btn-outline, :root[data-theme="dark"] .fav-btn, :root[data-theme="dark"] .p-step,
:root[data-theme="dark"] .remitly-box, :root[data-theme="dark"] .bsg-box, :root[data-theme="dark"] .pay-safety {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
:root[data-theme="dark"] .badge { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .reach-hub { background: radial-gradient(circle at 50% 35%, var(--brand-100), var(--surface) 72%); }
:root[data-theme="dark"] .site-header { background: rgba(15,20,17,.86); border-bottom-color: var(--line); }
:root[data-theme="dark"] .site-header:not(.is-transparent), :root[data-theme="dark"] .site-header.is-scrolled { background: rgba(15,20,17,.92); }
:root[data-theme="dark"] .input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--muted-2); }
:root[data-theme="dark"] .price-marker { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
:root[data-theme="dark"] .btn-outline:hover { background: var(--bg-soft); color: var(--ink); }
:root[data-theme="dark"] img[data-fallback] { opacity: .96; }
:root[data-theme="dark"] .site-footer { background: #0b0f0d; }
:root[data-theme="dark"] .rs-chips i { background: var(--bg-sand); }
:root[data-theme="dark"] .lp-pill { background: var(--bg-sand); }

/* dark: full-width section bands + remaining white components */
:root[data-theme="dark"] .trust-strip, :root[data-theme="dark"] .cat-row-sec { background: var(--bg); border-bottom-color: var(--line); }
:root[data-theme="dark"] .faq-item, :root[data-theme="dark"] .form-section,
:root[data-theme="dark"] .pp-chip, :root[data-theme="dark"] .chip span,
:root[data-theme="dark"] .asl-chip { background: var(--surface); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .cat-chip:hover { background: var(--bg-soft); }
:root[data-theme="dark"] .asl-chip { filter: grayscale(1) brightness(1.4); }
:root[data-theme="dark"] .section-soft, :root[data-theme="dark"] .bg-soft { background: var(--bg-soft); }
/* dark: the "unlock" circle on locked property cards — a warm glass badge instead of a stark white dot */
:root[data-theme="dark"] .lock-overlay { background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
:root[data-theme="dark"] .lock-ic {
  background: rgba(25,33,29,.72);
  color: var(--accent);
  border: 1.5px solid rgba(233,162,59,.6);
  box-shadow: 0 6px 20px -6px rgba(0,0,0,.7), 0 0 0 4px rgba(233,162,59,.12);
  backdrop-filter: blur(4px);
}
:root[data-theme="dark"] .pcard.is-locked:hover .lock-ic,
:root[data-theme="dark"] .pcard.is-locked:focus-visible .lock-ic {
  background: var(--cta); color: var(--cta-ink);
  border-color: transparent; box-shadow: 0 8px 24px -6px rgba(0,0,0,.75), 0 0 0 4px rgba(70,185,133,.2);
}

/* visit-flow preview inside the payment card (shown before payment is confirmed) */
.visit-preview { margin: 6px 0 18px; padding: 14px 16px 6px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--bg-soft); }
.visit-preview .vp-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 700; font-size: .92rem; color: var(--ink); }
.visit-preview .vp-h .icon-sm { color: var(--brand); }
.visit-preview .visit-sim { margin-top: 8px; }
:root[data-theme="dark"] .visit-preview { background: var(--surface); }

.bb-eur-note { display: flex; align-items: flex-start; gap: 7px; margin: 12px 2px 0; font-size: .8rem; color: var(--ink-2); line-height: 1.45; }
.bb-eur-note .icon-sm { flex: none; margin-top: 2px; color: var(--brand); }

/* chat cat: playful pounce (grow/shrink twice) when the panel opens */
.chat-fab.cat-pounce { animation: catPounce .85s cubic-bezier(.3,1.4,.5,1) 1; }
@keyframes catPounce {
  0% { transform: scale(1); }
  18% { transform: scale(1.28) rotate(-6deg); }
  36% { transform: scale(.92); }
  54% { transform: scale(1.22) rotate(5deg); }
  72% { transform: scale(.96); }
  100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .chat-fab.cat-pounce { animation: none; } }

/* dark: bank details used hard-coded near-black text */
:root[data-theme="dark"] .bb-amount-v strong,
:root[data-theme="dark"] .bb-row.bb-benef dd strong,
:root[data-theme="dark"] .bb-row.bb-iban dd strong { color: var(--ink) !important; }

/* ===================== Listings / network page ===================== */
.net-intro { max-width: 760px; margin: 0 auto 10px; text-align: center; }
.net-intro h1 { font-size: 2.2rem; margin: 10px 0 12px; }
.net-lead { font-size: 1.05rem; color: var(--ink-2); line-height: 1.6; }

.protect-box { max-width: 900px; margin: 0 auto; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 40px 32px; box-shadow: var(--shadow-sm); }
.protect-box .protect-ic { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--brand); color: #fff; margin-bottom: 12px; }
.protect-box .protect-ic svg { width: 30px; height: 30px; }
.protect-box h2 { font-size: 1.7rem; margin: 6px 0 10px; }
.protect-lead { max-width: 680px; margin: 0 auto 26px; color: var(--ink-2); line-height: 1.6; }

.protect-grid { display: flex; align-items: stretch; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 8px; }
.protect-card { flex: 1 1 220px; max-width: 260px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 18px; text-align: center; }
.protect-card.is-accent { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.protect-card .pc-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); color: var(--brand); margin-bottom: 10px; box-shadow: var(--shadow-xs); }
.protect-card.is-accent .pc-ic { background: var(--brand); color: #fff; }
.protect-card .pc-ic svg { width: 22px; height: 22px; }
.protect-card strong { display: block; font-size: 1rem; margin-bottom: 6px; color: var(--ink); }
.protect-card p { font-size: .88rem; color: var(--ink-2); line-height: 1.5; margin: 0; }
.protect-arrow { display: grid; place-items: center; color: var(--muted); flex: 0 0 auto; align-self: center; }
.protect-arrow svg { width: 24px; height: 24px; }

.protect-warn { display: flex; align-items: flex-start; gap: 10px; text-align: left; max-width: 720px; margin: 26px auto 0; padding: 14px 16px; border-radius: var(--radius); background: #fff8ec; border: 1px solid #f6c98b; color: #7a3e00; font-size: .9rem; line-height: 1.5; }
.protect-warn .icon-sm { flex: none; margin-top: 2px; }
:root[data-theme="dark"] .protect-warn { background: color-mix(in srgb, #f6c98b 14%, var(--surface)); color: #f0c89a; border-color: color-mix(in srgb, #f6c98b 40%, transparent); }

@media (max-width: 760px) {
  .protect-arrow { transform: rotate(90deg); }
  .protect-card { max-width: none; }
  .net-intro h1 { font-size: 1.7rem; }
}

/* ===================== Dark mode — fix "dark-fill" elements that used var(--ink) as background ===================== */
/* Dark/secondary button → inverts to a light button with dark text */
:root[data-theme="dark"] .btn-dark { background: #e7ebe9; color: #15201c; }
:root[data-theme="dark"] .btn-dark:hover { background: #ffffff; }
/* Selected / active highlights → brand green stays readable */
:root[data-theme="dark"] .cal-day.is-selected,
:root[data-theme="dark"] .pagination .is-current,
:root[data-theme="dark"] .price-marker.is-active,
:root[data-theme="dark"] .price-marker:hover,
:root[data-theme="dark"] .pp-chip-video { background: var(--brand); color: #fff; border-color: var(--brand); }
/* Prominent CTA band → brand fill */
:root[data-theme="dark"] .cta-band { background: color-mix(in srgb, var(--brand) 88%, #000); color: #fff; }
/* Toast + cookie banner → elevated dark surface with light text */
:root[data-theme="dark"] .toast { background: #2b332e; color: var(--ink); box-shadow: var(--shadow-lg); }
:root[data-theme="dark"] .cookie-consent { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
/* thin ink lines (signature, faq icon) read fine as light lines */

/* move-in cost breakdown on the property page */
.pp-movein .pp-plus { color: var(--brand); font-weight: 800; margin-right: 6px; }
.pp-note-ok { color: var(--success); }
.pp-note-ok .icon-sm { color: var(--success); }

/* landlords: direct communication + owners-only */
.owners-only { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 920px; margin: 0 auto; }
.oo-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.oo-card .hl-icon { margin-bottom: 10px; }
.oo-card h3 { font-size: 1.1rem; margin: 0 0 6px; }
.oo-card p { color: var(--ink-2); line-height: 1.55; margin: 0; }
.oo-card.oo-warn { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
@media (max-width: 760px) { .owners-only { grid-template-columns: 1fr; } }

/* Listings — "how your money is protected" steps */
.esc-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 920px; margin: 8px auto 0; }
.esc-step { position: relative; display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 20px 20px 18px; }
.esc-step .esc-n { position: absolute; top: -10px; left: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 800; font-size: .8rem; box-shadow: var(--shadow-xs); }
.esc-step .esc-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand); margin-top: 4px; }
.esc-step .esc-ic svg { width: 22px; height: 22px; }
.esc-step strong { display: block; font-size: 1.02rem; margin-bottom: 4px; color: var(--ink); }
.esc-step p { color: var(--ink-2); line-height: 1.55; margin: 0; font-size: .92rem; }
@media (max-width: 760px) { .esc-steps { grid-template-columns: 1fr; } }

/* ===================== Escrow money animation (Listings) ===================== */
.escrow-anim { display: flex; align-items: center; justify-content: center; gap: 0; max-width: 820px; margin: 10px auto 30px; padding: 22px 10px; }
.ea-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; width: 120px; text-align: center; }
.ea-node .ea-ic { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--brand); box-shadow: var(--shadow-sm); }
.ea-node .ea-ic svg { width: 26px; height: 26px; }
.ea-node .ea-l { font-size: .82rem; font-weight: 700; color: var(--ink-2); }
.ea-node.ea-lock .ea-ic { background: var(--brand); color: #fff; border-color: var(--brand); animation: eaLock 3.6s ease-in-out infinite; }
.ea-node.ea-lock .ea-l { color: var(--brand); }
.ea-node.ea-lock .ea-ring { position: absolute; top: 0; width: 58px; height: 58px; border-radius: 16px; border: 2px solid var(--brand); opacity: 0; animation: eaRing 3.6s ease-out infinite; }
.ea-rail { position: relative; flex: 1 1 auto; height: 3px; min-width: 60px; margin: 0 -6px; align-self: flex-start; margin-top: 28px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--brand) 40%, var(--surface)) 0 7px, transparent 7px 14px); border-radius: 3px; }
.ea-coin { position: absolute; top: 50%; left: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink, #2b1d05); font-weight: 800; font-size: .72rem; box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--accent) 70%, transparent); }
.ea-rail-1 .ea-coin { animation: eaMove 2.4s cubic-bezier(.5,0,.5,1) infinite; }
.ea-rail-1 .ea-coin.ea-d2 { animation-delay: .8s; }
.ea-rail-1 .ea-coin.ea-d3 { animation-delay: 1.6s; }
.ea-rail-2 .ea-coin-out { animation: eaMoveOut 2.4s cubic-bezier(.5,0,.5,1) infinite; animation-delay: 1.2s; opacity: 0; }
@keyframes eaMove { 0% { left: 0; opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1); } 82% { opacity: 1; } 100% { left: 100%; opacity: 0; transform: scale(.6); } }
@keyframes eaMoveOut { 0% { left: 0; opacity: 0; transform: scale(.6); } 14% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; transform: scale(.6); } }
@keyframes eaLock { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.12) rotate(-4deg); } 86% { transform: scale(1.12) rotate(4deg); } }
@keyframes eaRing { 0%, 60% { opacity: 0; transform: scale(1); } 72% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@media (max-width: 680px) {
  .escrow-anim { flex-direction: column; gap: 0; }
  .ea-node { width: auto; flex-direction: row; gap: 12px; width: 220px; justify-content: flex-start; }
  .ea-rail { width: 3px; height: 40px; min-width: 0; margin: 4px 0 4px 27px; align-self: flex-start;
    background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--brand) 40%, var(--surface)) 0 7px, transparent 7px 14px); }
  .ea-rail-1 .ea-coin, .ea-rail-2 .ea-coin { animation: none; top: 50%; left: 50%; }
  .ea-rail .ea-coin.ea-d2, .ea-rail .ea-coin.ea-d3, .ea-rail-2 .ea-coin-out { display: none; }
  .ea-rail-1 .ea-coin { opacity: 1; transform: translate(-50%,-50%); animation: eaDrop 2s ease-in-out infinite; }
  @keyframes eaDrop { 0%{top:0;opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{top:100%;opacity:0} }
}
@media (prefers-reduced-motion: reduce) { .ea-coin, .ea-node.ea-lock .ea-ic, .ea-ring { animation: none !important; } .ea-coin { opacity: 1; } }

/* compact escrow badge inside the bank box (bank + card payment) */
.bb-escrow { display: flex; align-items: center; gap: 9px; margin: 12px 0 2px; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); overflow: hidden; }
.bbe-coin { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink, #2b1d05); font-weight: 800; font-size: .66rem; animation: bbeCoin 2.6s ease-in-out infinite; }
.bbe-lock { flex: none; display: grid; place-items: center; color: var(--brand); animation: bbeLock 2.6s ease-in-out infinite; }
.bbe-lock svg { width: 18px; height: 18px; }
.bbe-txt { font-size: .82rem; font-weight: 600; color: var(--ink-2); line-height: 1.4; }
@keyframes bbeCoin { 0% { transform: translateX(0) scale(1); opacity: 1; } 45% { transform: translateX(10px) scale(.9); opacity: 1; } 55% { transform: translateX(10px) scale(0); opacity: 0; } 100% { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes bbeLock { 0%, 44% { transform: scale(1); } 58% { transform: scale(1.25); } 72% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bbe-coin, .bbe-lock { animation: none; } }

/* ===================== Micro-animations on icons ===================== */
/* Shields feel "secured" — a slow breathing glow */
.protect-ic, .fair-ic, .bsg-ic { animation: shieldSecure 4.5s ease-in-out infinite; }
@keyframes shieldSecure { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 40%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand) 0%, transparent); } }
/* Keys "turn" gently */
.vn-ic, .ea-node.ea-owner .ea-ic, .key-turn { animation: keyTurn 5s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes keyTurn { 0%,70%,100% { transform: rotate(0); } 80% { transform: rotate(-18deg); } 90% { transform: rotate(10deg); } }
/* generic hover press for icon tiles */
.hl-icon, .pc-ic, .esc-ic { transition: transform .2s var(--ease); }
.oo-card:hover .hl-icon, .protect-card:hover .pc-ic, .esc-step:hover .esc-ic { transform: translateY(-3px) scale(1.06); }

/* ===================== Animated booking stepper ===================== */
.bstep.is-done::before, .bstep.is-now::before { transform-origin: left center; animation: lineGrow .7s var(--ease) both; }
@keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bstep.is-now .bs-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; animation: stepPulse 2s ease-out infinite; }
.bstep .bs-dot { position: relative; }
@keyframes stepPulse { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.bstep.is-done .bs-dot svg { animation: checkPop .5s var(--ease) both; }
@keyframes checkPop { 0% { transform: scale(0) rotate(-20deg); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ===================== Confetti + drawn checkmark ===================== */
.confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2000; }
.celebrate-check { position: fixed; left: 50%; top: 38%; transform: translate(-50%,-50%); z-index: 2001; width: 92px; height: 92px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; box-shadow: 0 18px 50px -12px color-mix(in srgb, var(--brand) 70%, transparent); animation: ccIn .5s var(--ease) both, ccOut .5s ease 2.2s forwards; pointer-events: none; }
.celebrate-check svg { width: 50px; height: 50px; fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.celebrate-check svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ccDraw .5s ease .25s forwards; }
@keyframes ccIn { 0% { transform: translate(-50%,-50%) scale(0); } 60% { transform: translate(-50%,-50%) scale(1.15); } 100% { transform: translate(-50%,-50%) scale(1); } }
@keyframes ccOut { to { opacity: 0; transform: translate(-50%,-50%) scale(.8); } }
@keyframes ccDraw { to { stroke-dashoffset: 0; } }

/* ===================== Pulsed Europe map (Listings) ===================== */
.euromap { position: relative; max-width: 640px; margin: 8px auto 6px; aspect-ratio: 16 / 9; }
.euromap .em-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.euromap .em-blob { fill: color-mix(in srgb, var(--brand) 9%, var(--surface)); stroke: color-mix(in srgb, var(--brand) 22%, var(--line)); stroke-width: 1.5; }
.euromap .em-link { stroke: color-mix(in srgb, var(--brand) 30%, var(--line)); stroke-width: 1; stroke-dasharray: 3 4; opacity: .6; }
.em-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); animation: emPulse 2.4s ease-out infinite; }
.em-dot.is-hub { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--accent); }
.em-dot .em-l { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); font-size: .62rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
@keyframes emPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); } 70% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--brand) 0%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) {
  .protect-ic, .fair-ic, .bsg-ic, .vn-ic, .ea-node.ea-owner .ea-ic, .key-turn, .bstep.is-done::before, .bstep.is-now::before, .bstep.is-now .bs-dot::after, .bstep.is-done .bs-dot svg, .em-dot { animation: none !important; }
}
/* push "enable notifications" button */
.push-btn.is-on{border-color:var(--brand);color:var(--brand);background:var(--brand-50)}
.push-btn.is-on .icon-sm{color:var(--brand)}

/* Become-an-owner steps */
.owner-steps{margin:0;padding-left:0;list-style:none;counter-reset:ostep}
.owner-steps li{position:relative;padding:0 0 14px 44px;counter-increment:ostep}
.owner-steps li:last-child{padding-bottom:0}
.owner-steps li::before{content:counter(ostep);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--brand,#1f6f5c);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.owner-steps li:not(:last-child)::after{content:"";position:absolute;left:14px;top:32px;bottom:2px;width:2px;background:var(--line,#e4e7ec)}

/* Access-pass payment proof upload */
.ao-paid{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ao-receipt{display:flex;flex-direction:column;gap:4px;font-size:.9rem;width:100%;max-width:420px}
.ao-receipt-lbl{display:flex;align-items:center;gap:6px;font-weight:600}
.ao-receipt input[type=file]{font-size:.85rem}
.ao-receipt-hint{color:var(--muted,#667085);font-size:.8rem}
.btn-block{width:100%;justify-content:center}

/* Price on request */
.por-card{text-align:left}
.por-lead{color:var(--muted,#667085);font-size:.92rem;margin:4px 0 0}
.field.is-por input[name="monthly_price"]{opacity:.5}

/* Subscription-gated ("Abonament") listings */
.abo-card{text-align:center}
.abo-card .bl-ic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#eef5f2;color:var(--brand,#0e5a49);margin-bottom:6px}
.abo-card h2{font-size:1.15rem;margin:4px 0}
.abo-card p{color:var(--muted,#667085);font-size:.92rem;margin:0 0 14px}
.pcard-abo strong{display:inline-flex;align-items:center;gap:6px;color:var(--brand,#0e5a49);background:#eef5f2;padding:4px 10px;border-radius:999px;font-size:.82rem}

/* Offers / auction */
.offer-card .bc-price .alt{color:var(--brand,#0e5a49);font-weight:600}
.offer-intro{color:var(--muted,#667085);font-size:.9rem;margin:8px 0 12px}
.offer-list{border:1px solid var(--line,#e4e7ec);border-radius:12px;padding:10px 12px;margin-bottom:14px}
.offer-list-h{font-size:.78rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted,#667085);margin-bottom:8px}
.offer-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-top:1px solid var(--line,#eef2f1)}
.offer-row:first-of-type{border-top:0}
.offer-row.is-mine{color:var(--brand,#0e5a49);font-weight:600}
.offer-who{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;color:var(--muted,#667085)}
.offer-row.is-mine .offer-who{color:var(--brand,#0e5a49)}
.offer-form label{display:block;font-size:.88rem;font-weight:600;margin-bottom:6px}
.offer-input{display:flex;gap:8px}
.offer-input .input{flex:1}
.pcard-offer{display:inline-flex;align-items:center;gap:4px;margin-left:8px;color:var(--brand,#0e5a49);background:#eef5f2;padding:2px 8px;border-radius:999px;font-size:.74rem;font-weight:600;vertical-align:middle}

/* Blog in-body figures */
.blog-figure{margin:22px 0}
.blog-figure img{width:100%;height:auto;border-radius:14px;display:block}
.blog-figure figcaption{color:var(--muted,#667085);font-size:.85rem;margin-top:8px;text-align:center}

/* Offer: your bid + richer bid rows (date/time + anon user) */
.offer-mine{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;margin-bottom:12px;background:#eef5f2;border:1px solid var(--brand,#0e5a49);border-radius:10px;color:var(--brand,#0e5a49);font-weight:600}
.offer-mine span{display:inline-flex;align-items:center;gap:6px}
.offer-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center}
.offer-meta{color:var(--muted,#667085);font-size:.78rem;white-space:nowrap}
.offer-anon{display:flex;align-items:center;gap:6px;color:var(--muted,#667085);font-size:.76rem;margin:10px 0 0;border-top:1px solid var(--line,#eef2f1);padding-top:8px}