/* BedsKingKong · Premium visual layer (app host only, loaded last).
   Presentation only: no selector here is read by scripts, and nothing changes routes or forms.
   The generated bkk-theme.css carries literal font names and !important rules, so this layer
   retunes its tokens first and then raises specificity (html body.app-site …) where it must. */

/* ---------- 01 · Typography ---------- */
@font-face { font-family: "BkkPoppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/poppins-latin-400.woff2") format("woff2"); }
@font-face { font-family: "BkkPoppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/poppins-latin-500.woff2") format("woff2"); }
@font-face { font-family: "BkkPoppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/poppins-latin-600.woff2") format("woff2"); }
@font-face { font-family: "BkkPoppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/poppins-latin-700.woff2") format("woff2"); }
@font-face { font-family: "BkkPoppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/poppins-latin-800.woff2") format("woff2"); }

/* ---------- 02 · Design tokens ----------
   Breakpoints (Bootstrap): sm 576 · md 768 · lg 992 · xl 1200. Touch targets ≥ 44px. */
:root {
  --px-font: "BkkPoppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --px-navy: #19232b;          /* brand */
  --px-navy-2: #243440;
  --px-navy-soft: #e9eef2;
  --px-blue: #207ace;          /* links, focus, selection */
  --px-blue-soft: #e6f1fb;
  --px-teal: #0d9488;
  --px-gold: #e8bb61;          /* price and "your offer" only */
  --px-gold-soft: #fff5de;
  --px-gold-ink: #5a3d0c;
  --px-bg: #f4f6fa;
  --px-surface: #fff;
  --px-soft: #eef2f7;
  --px-line: #e2e8f0;
  --px-text: #19232b;
  --px-muted: #5a6b80;
  --px-ok: #0f8a5f;  --px-ok-soft: #e3f6ee;
  --px-warn: #b45309; --px-warn-soft: #fff3df;
  --px-err: #c8283c;  --px-err-soft: #fdecee;
  --px-r-sm: 10px; --px-r: 14px; --px-r-lg: 20px; --px-r-xl: 28px; --px-r-pill: 999px;
  --px-s1: 4px; --px-s2: 8px; --px-s3: 12px; --px-s4: 16px; --px-s5: 24px; --px-s6: 32px; --px-s7: 48px; --px-s8: 72px;
  --px-control: 48px;
  --px-shadow-sm: 0 1px 2px rgb(25 35 43 / 6%), 0 2px 6px rgb(25 35 43 / 4%);
  --px-shadow: 0 2px 4px rgb(25 35 43 / 5%), 0 12px 28px -8px rgb(25 35 43 / 14%);
  --px-shadow-lg: 0 4px 8px rgb(25 35 43 / 6%), 0 28px 56px -16px rgb(25 35 43 / 28%);
  --px-ease: cubic-bezier(.2, .8, .2, 1);
  --px-fast: 160ms;
  --px-mid: 260ms;

  /* Retune the theme's own tokens so every legacy component follows. */
  --font: var(--px-font);
  --font-num: var(--px-font);
  --ui-bg: var(--px-bg);
  --ui-surface: var(--px-surface);
  --ui-soft: var(--px-soft);
  --ui-text: var(--px-text);
  --ui-muted: var(--px-muted);
  --ui-line: var(--px-line);
  --ui-radius: var(--px-r-lg);
  --ui-radius-sm: var(--px-r);
  --ui-shadow: var(--px-shadow-sm);
  --ui-focus: var(--px-blue);
  --bkk-card-radius: var(--px-r-lg);
  --bkk-control-radius: var(--px-r);
  --nx-line: var(--px-line);
  --nx-soft: var(--px-soft);
  --nx-muted: var(--px-muted);
  --nx-shadow: var(--px-shadow-sm);
  --nx-radius: var(--px-r-lg);
  --nx-radius-sm: var(--px-r);
}
[data-bs-theme="dark"] {
  --px-navy-soft: #22303a;
  --px-blue: #6cb2f0;
  --px-blue-soft: #163049;
  --px-teal: #5eead4;
  --px-gold-soft: #3a2f1a;
  --px-gold-ink: #ffe2a8;
  --px-bg: #10171c;
  --px-surface: #19232b;
  --px-soft: #1f2c36;
  --px-line: #2d3b46;
  --px-text: #ecf2f9;
  --px-muted: #a9bbcd;
  --px-ok: #7fdcb1; --px-ok-soft: #10362a;
  --px-warn: #f7c77a; --px-warn-soft: #3a2c16;
  --px-err: #ffa5b1; --px-err-soft: #3d1a22;
  --px-shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
  --px-shadow: 0 2px 4px rgb(0 0 0 / 30%), 0 14px 30px -10px rgb(0 0 0 / 55%);
  --px-shadow-lg: 0 4px 8px rgb(0 0 0 / 35%), 0 30px 60px -18px rgb(0 0 0 / 65%);
  --nx-surface: var(--px-surface);
}

/* One typeface everywhere (the theme hard-codes Montserrat in several rules). */
html body.app-site,
html body.app-site :is(h1, h2, h3, h4, h5, h6, p, a, span, small, strong, label, li, dt, dd, td, th, legend, summary, button, input, select, textarea, .btn) {
  font-family: var(--px-font) !important;
}
html body.app-site {
  background: var(--px-bg);
  color: var(--px-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Heading colour stays with each component: several sit on navy surfaces. */
html body.app-site :is(h1, h2, h3) { letter-spacing: -.02em; }
html body.app-site h1 { font-weight: 700; }
html body.app-site :is(h2, h3, h4) { font-weight: 600; }
html body.app-site ::selection { background: var(--px-blue-soft); color: var(--px-text); }
html body.app-site :focus-visible { outline: 3px solid color-mix(in srgb, var(--px-blue) 55%, transparent); outline-offset: 2px; }

/* ---------- 03 · Buttons ---------- */
html body.app-site .btn {
  min-height: 44px;
  border-radius: var(--px-r);
  font-weight: 600;
  letter-spacing: 0;
  transition: background-color var(--px-fast) var(--px-ease), border-color var(--px-fast) var(--px-ease),
    color var(--px-fast) var(--px-ease), box-shadow var(--px-fast) var(--px-ease), transform var(--px-fast) var(--px-ease);
}
html body.app-site .btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
html body.app-site .btn:disabled, html body.app-site .btn.disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
html body.app-site :is(.btn-ink, .nx-btn-primary, .landing-primary) {
  background: var(--px-navy) !important;
  border: 1px solid var(--px-navy) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px -6px rgb(25 35 43 / 45%);
}
html body.app-site :is(.btn-ink, .nx-btn-primary, .landing-primary):hover {
  background: var(--px-navy-2) !important;
  border-color: var(--px-navy-2) !important;
  box-shadow: 0 10px 22px -8px rgb(25 35 43 / 55%);
}
html body.app-site .btn-ghost {
  background: var(--px-surface);
  border: 1px solid var(--px-line);
  color: var(--px-text);
}
html body.app-site .btn-ghost:hover { background: var(--px-soft); border-color: color-mix(in srgb, var(--px-navy) 25%, var(--px-line)); }
[data-bs-theme="dark"] body.app-site :is(.btn-ink, .nx-btn-primary, .landing-primary) {
  background: #e8eef7 !important; border-color: #e8eef7 !important; color: var(--px-navy) !important;
}
[data-bs-theme="dark"] body.app-site :is(.btn-ink, .nx-btn-primary, .landing-primary):hover { background: #fff !important; }

.px-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 22px;
  border-radius: var(--px-r);
  font-weight: 600; font-size: .9375rem; text-decoration: none;
  transition: background-color var(--px-fast) var(--px-ease), transform var(--px-fast) var(--px-ease), box-shadow var(--px-fast) var(--px-ease);
}
.px-btn:active { transform: translateY(1px); }
.px-btn-light { background: #fff; color: var(--px-navy); box-shadow: 0 10px 24px -10px rgb(0 0 0 / 50%); }
.px-btn-light:hover { background: #f1f5fb; color: var(--px-navy); }
.px-btn-glass { background: rgb(255 255 255 / 12%); color: #fff; border: 1px solid rgb(255 255 255 / 35%); backdrop-filter: blur(8px); }
.px-btn-glass:hover { background: rgb(255 255 255 / 20%); color: #fff; }

/* ---------- 04 · Forms ---------- */
html body.app-site :is(.form-control, .form-select) {
  min-height: var(--px-control);
  border: 1px solid var(--px-line);
  border-radius: var(--px-r);
  background-color: var(--px-surface);
  color: var(--px-text);
  font-size: 1rem;
  transition: border-color var(--px-fast) var(--px-ease), box-shadow var(--px-fast) var(--px-ease);
}
html body.app-site textarea.form-control { min-height: 112px; }
html body.app-site :is(.form-control, .form-select):hover { border-color: color-mix(in srgb, var(--px-navy) 22%, var(--px-line)); }
html body.app-site :is(.form-control, .form-select):focus {
  border-color: var(--px-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--px-blue) 16%, transparent);
  outline: 0;
}
html body.app-site .form-control::placeholder { color: color-mix(in srgb, var(--px-muted) 75%, transparent); }
html body.app-site .form-label { font-size: .8125rem; font-weight: 600; color: var(--px-text); margin-bottom: 6px; }
html body.app-site .form-check-input:checked { background-color: var(--px-navy); border-color: var(--px-navy); }

/* ---------- 05 · Surfaces ---------- */
html body.app-site :is(.card-bkk, .mx-card, .auth-card) {
  background: var(--px-surface);
  border: 1px solid var(--px-line);
  border-radius: var(--px-r-lg);
  box-shadow: var(--px-shadow-sm);
}
html body.app-site .alert { border-radius: var(--px-r); border-width: 1px; font-size: .9375rem; }
html body.app-site .text-mute { color: var(--px-muted) !important; }
html body.app-site :is(.mx-eyebrow, .nx-eyebrow, .landing-eyebrow) {
  color: var(--px-teal);
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- 06 · Header ---------- */
html body.app-site .mx-app-header {
  position: sticky !important;
  top: 0;
  z-index: 1030;
  background: linear-gradient(120deg, #19232b 0%, #102a4d 60%, #243440 100%) !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 0 rgb(255 255 255 / 6%), 0 10px 30px -18px rgb(25 35 43 / 70%);
}
html body.app-site .mx-app-header > .container-xxl { min-height: 68px; padding-block: 8px; }
html body.app-site .mx-app-header .bkk-desknav { gap: 4px; margin-left: 28px; }
html body.app-site .mx-app-header .bkk-desknav a {
  position: relative;
  padding: 8px 14px;
  border-radius: var(--px-r-pill);
  color: rgb(255 255 255 / 76%);
  font-size: .875rem; font-weight: 500;
  box-shadow: none;
}
html body.app-site .mx-app-header .bkk-desknav a:hover { background: rgb(255 255 255 / 9%); color: #fff; }
html body.app-site .mx-app-header .bkk-desknav a[aria-current="page"] { background: rgb(255 255 255 / 13%); color: #fff; font-weight: 600; }
html body.app-site .mx-app-header .bkk-desknav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--px-gold);
}
html body.app-site :is(.mx-currency-shortcut, .mx-header-bell, .mx-settings-toggle) {
  min-height: 40px;
  border: 1px solid rgb(255 255 255 / 16%) !important;
  background: rgb(255 255 255 / 8%) !important;
  border-radius: 12px;
  color: #fff;
  transition: background-color var(--px-fast) var(--px-ease);
}
html body.app-site .mx-settings-toggle { width: 40px; padding: 8px; }
html body.app-site .mx-settings-toggle circle { fill: #12305a; }
html body.app-site :is(.mx-currency-shortcut, .mx-header-bell, .mx-settings-toggle):hover { background: rgb(255 255 255 / 16%) !important; }
html body.app-site .mx-header-avatar { border: 2px solid rgb(255 255 255 / 85%); box-shadow: 0 0 0 3px rgb(255 255 255 / 8%); }
html body.app-site :is(.mx-settings-menu, .dropdown-menu) {
  border: 1px solid var(--px-line);
  border-radius: var(--px-r-lg);
  box-shadow: var(--px-shadow-lg);
  padding: 12px;
}

/* ---------- 07 · Bottom tab bar (mobile) ---------- */
html body.app-site .mx-bottom {
  left: 10px !important; right: 10px !important;
  bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  padding: 6px !important;
  border: 1px solid var(--px-line) !important;
  border-radius: 22px !important;
  /* Solid on purpose: a blurred fixed bar is recomputed on every scroll frame on phones. */
  background: var(--px-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 14px 34px -12px rgb(25 35 43 / 32%), 0 2px 6px rgb(25 35 43 / 6%) !important;
}
html body.app-site .mx-bottom a {
  gap: 3px; min-height: 54px;
  border-radius: 16px;
  color: var(--px-muted);
  font-size: 10.5px !important; font-weight: 500;
  transition: color var(--px-fast) var(--px-ease);
}
html body.app-site .mx-bottom a svg {
  width: 44px; height: 30px; padding: 5px 11px;
  border-radius: var(--px-r-pill);
  transition: background-color var(--px-mid) var(--px-ease), transform var(--px-mid) var(--px-ease);
}
html body.app-site .mx-bottom a[aria-current="page"] { color: var(--px-navy); font-weight: 600; background: transparent; }
html body.app-site .mx-bottom a[aria-current="page"] svg { background: var(--px-navy-soft); stroke-width: 2.1; transform: translateY(-1px); }
[data-bs-theme="dark"] body.app-site .mx-bottom a[aria-current="page"] { color: #fff; }
html body.app-site:has(.mx-bottom) .bkk-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 992px) { html body.app-site:has(.mx-bottom) .bkk-main { padding-bottom: 24px; } }

/* Desktop member tabs: segmented control. */
html body.app-site .mx-desktop-nav {
  display: inline-flex; gap: 4px; padding: 5px;
  border: 1px solid var(--px-line); border-radius: var(--px-r-pill);
  background: var(--px-surface); box-shadow: var(--px-shadow-sm);
}
html body.app-site .mx-desktop-nav a {
  padding: 8px 16px; border-radius: var(--px-r-pill);
  color: var(--px-muted); font-size: .875rem; font-weight: 500; text-decoration: none;
}
html body.app-site .mx-desktop-nav a:hover { color: var(--px-text); background: var(--px-soft); }
html body.app-site .mx-desktop-nav a[aria-current="page"] { background: var(--px-navy); color: #fff; font-weight: 600; }
[data-bs-theme="dark"] body.app-site .mx-desktop-nav a[aria-current="page"] { background: #e8eef7; color: var(--px-navy); }

/* Filter tabs inside member pages. */
html body.app-site .mx-tabs { gap: 8px; padding-bottom: 4px; scrollbar-width: none; }
html body.app-site .mx-tabs a {
  min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--px-line); border-radius: var(--px-r-pill);
  background: var(--px-surface); color: var(--px-muted);
  font-size: .875rem; font-weight: 500; white-space: nowrap;
}
html body.app-site .mx-tabs a[aria-current], html body.app-site .mx-tabs a.active {
  background: var(--px-navy); border-color: var(--px-navy); color: #fff; font-weight: 600;
}

/* ---------- 08 · Landing hero ---------- */
.px-intro { position: relative; }
.px-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(520px, 72vh, 680px);
  display: flex;
  align-items: stretch;
  color: #fff;
  background: var(--px-navy);
}
.px-hero-photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
  animation: px-hero-in 1200ms var(--px-ease) both;
}
.px-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgb(15 22 28 / 88%) 0%, rgb(15 22 28 / 62%) 45%, rgb(15 22 28 / 18%) 100%),
    linear-gradient(0deg, rgb(15 22 28 / 75%) 0%, rgb(15 22 28 / 0%) 45%);
}
.px-hero-inner {
  position: relative;
  display: grid;
  align-content: center;
  gap: 28px;
  padding-top: 56px;
  padding-bottom: 150px; /* room for the overlapping search card */
}
html body.app-site .px-hero-copy { max-width: 640px; color: #fff; }
.px-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 18px; padding: 6px 14px 6px 10px;
  border: 1px solid rgb(255 255 255 / 22%); border-radius: var(--px-r-pill);
  background: rgb(255 255 255 / 10%); backdrop-filter: blur(8px);
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.px-hero-eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--px-gold); box-shadow: 0 0 0 4px rgb(232 187 97 / 25%); }
html body.app-site .px-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.5rem, 6.4vw, 4.5rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -.035em;
  text-wrap: balance;
}
html body.app-site .px-hero h1 span { color: var(--px-gold); }
html body.app-site .px-hero-lead { max-width: 520px; margin: 18px 0 0; color: rgb(255 255 255 / 84%); font-size: clamp(1rem, 1.6vw, 1.1875rem); line-height: 1.6; }
.px-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.px-hero-points { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; font-size: .875rem; color: rgb(255 255 255 / 82%); }
.px-hero-points span { display: inline-flex; align-items: center; gap: 8px; }
.px-hero-points svg { width: 18px; height: 18px; color: var(--px-gold); }
.px-hero-note {
  display: none;
  gap: 12px; align-items: center;
  max-width: 320px; padding: 14px 16px;
  border: 1px solid rgb(255 255 255 / 20%); border-radius: var(--px-r-lg);
  background: rgb(25 35 43 / 42%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #fff;
}
.px-hero-note-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--px-gold); color: var(--px-navy); }
.px-hero-note-icon svg { width: 20px; height: 20px; }
.px-hero-note div { display: grid; gap: 2px; }
.px-hero-note small { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / 70%); }
.px-hero-note strong { font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.px-hero-note span { font-size: .8125rem; color: rgb(255 255 255 / 78%); }
.px-hero-place {
  position: absolute; right: 24px; bottom: 132px;
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 6px 12px; border-radius: var(--px-r-pill);
  background: rgb(15 22 28 / 55%); backdrop-filter: blur(8px);
  color: #fff; font-size: .75rem; font-weight: 500;
}
.px-hero-place svg { width: 14px; height: 14px; }
@media (min-width: 992px) {
  .px-hero-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .px-hero-note { display: flex; margin-bottom: 8px; }
}
@media (max-width: 575.98px) {
  .px-hero { min-height: 0; }
  .px-hero-inner { padding-top: 40px; padding-bottom: 112px; gap: 0; }
  .px-hero-actions .px-btn { flex: 1 1 100%; }
  /* In flow on phones: it also carries the AI-image disclosure, so it must stay visible. */
  .px-hero-place { position: static; justify-self: start; margin-top: 18px; }
}

/* Search card docked over the hero edge. */
html body.app-site .px-search-dock {
  position: relative; z-index: 2;
  margin-top: -110px !important; /* the theme sets this section's margins with !important */
  padding: 22px;
  border: 1px solid var(--px-line);
  border-radius: var(--px-r-xl);
  background: var(--px-surface);
  box-shadow: var(--px-shadow-lg);
}
html body.app-site .px-search-dock .landing-search-heading { margin-bottom: 14px; }
html body.app-site .px-search-dock .landing-search-heading h2 { font-size: 1.25rem; font-weight: 600; margin: 0; }
html body.app-site .px-search-dock .landing-search-heading span { color: var(--px-muted); font-size: .875rem; }
/* Phones: the search form comes first, right under the header; the photo hero follows it. */
@media (max-width: 767.98px) {
  html body.app-site .px-intro { display: flex !important; flex-direction: column; }
  html body.app-site .px-search-dock { order: -1 !important; width: calc(100% - 24px); margin: 14px auto 18px !important; padding: 16px; border-radius: 24px; }
  .px-hero-inner { padding-bottom: 40px; }
  .px-hero { margin-inline: 12px; border-radius: 24px; }
}
@keyframes px-hero-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1.03); } }

/* ---------- 09 · Member home hero ---------- */
html body.app-site .px-member-hero {
  position: relative;
  margin: 0 0 28px;
  padding: 28px;
  border-radius: var(--px-r-xl);
  background:
    radial-gradient(120% 140% at 100% 0%, rgb(232 187 97 / 22%) 0%, transparent 48%),
    linear-gradient(125deg, #19232b 0%, #12305a 70%, #1a3f6e 100%);
  color: #fff;
  box-shadow: var(--px-shadow);
}
html body.app-site .px-member-hero .guest-home-heading { margin-bottom: 20px; }
html body.app-site .px-member-hero h1 { color: #fff; font-size: clamp(1.625rem, 3.4vw, 2.5rem); margin: 0 0 6px; }
html body.app-site .px-member-hero .guest-home-heading p { color: rgb(255 255 255 / 78%); margin: 0; }
html body.app-site .px-member-hero .stay-form {
  padding: 8px; border-radius: 22px;
  background: var(--px-surface);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 55%);
}
html body.app-site .px-member-hero .stay-below-bar { background: transparent; }
@media (max-width: 575.98px) {
  html body.app-site .px-member-hero { margin-inline: -4px; padding: 20px 14px 14px; border-radius: 24px; }
}

/* ---------- 10 · Search form ---------- */
html body.app-site .stay-main-grid {
  border: 1px solid var(--px-line) !important;
  border-radius: var(--px-r-lg) !important;
  background: var(--px-surface);
  overflow: hidden;
}
html body.app-site .stay-field { transition: background-color var(--px-fast) var(--px-ease); }
html body.app-site .stay-field:hover { background: var(--px-soft); }
html body.app-site .stay-field:focus-within { background: var(--px-blue-soft); }
html body.app-site .stay-field .form-label,
html body.app-site .stay-field > label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--px-muted);
}
html body.app-site .stay-budget-inline { background: var(--px-gold-soft) !important; }
html body.app-site .stay-actions .btn-ink {
  border-radius: var(--px-r) !important;
  font-size: 1rem;
}
/* Poppins sets wider than Montserrat: give the price column room so "0,00" never clips. */
@media (min-width: 1200px) {
  html body.app-site .stay-form:not(.stay-offer) .stay-main-grid {
    grid-template-columns: minmax(170px, 1.15fr) minmax(230px, 1.25fr) minmax(180px, .95fr) minmax(230px, 1.1fr) auto;
  }
  html body.app-site .px-member-hero { padding: 24px; }
  html body.app-site .px-member-hero .stay-form { padding: 6px; }
}
html body.app-site .stay-type-filters { border-radius: var(--px-r) !important; border-color: var(--px-line) !important; }

/* ---------- 11 · Stay cards ---------- */
html body.app-site .grid-props { gap: 22px; }
html body.app-site .nx-stay {
  overflow: hidden;
  border: 1px solid var(--px-line);
  border-radius: var(--px-r-lg);
  background: var(--px-surface);
  box-shadow: var(--px-shadow-sm);
  transition: transform var(--px-mid) var(--px-ease), box-shadow var(--px-mid) var(--px-ease), border-color var(--px-mid) var(--px-ease);
}
html body.app-site .nx-stay-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--px-soft), color-mix(in srgb, var(--px-navy) 8%, var(--px-soft))); }
html body.app-site .nx-stay-media img:not(.nx-stay-empty img) { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--px-ease); }
html body.app-site .nx-stay-media:has(.nx-stay-empty)::after { display: none; }
html body.app-site .nx-stay-media::after {
  content: ""; position: absolute; inset: auto 0 0; height: 40%;
  background: linear-gradient(0deg, rgb(15 22 28 / 22%), transparent); pointer-events: none;
}
@media (hover: hover) {
  html body.app-site .nx-stay:hover { transform: translateY(-4px); box-shadow: var(--px-shadow); border-color: color-mix(in srgb, var(--px-navy) 14%, var(--px-line)); }
  html body.app-site .nx-stay:hover .nx-stay-media img:not(.nx-stay-empty img) { transform: scale(1.05); }
}
html body.app-site .nx-stay-flags span {
  border-radius: var(--px-r-pill); background: rgb(255 255 255 / 92%); color: var(--px-navy);
  font-weight: 600; box-shadow: var(--px-shadow-sm);
}
html body.app-site .nx-stay-body { padding: 16px 18px 18px; }
html body.app-site .nx-stay-kicker { color: var(--px-teal); font-weight: 600; letter-spacing: .06em; }
html body.app-site .nx-stay h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
html body.app-site .nx-stay h3 a { color: var(--px-text); text-decoration: none; }
html body.app-site .nx-stay-meta { color: var(--px-muted); font-size: .8125rem; }
html body.app-site .nx-stay-foot { padding-top: 14px; border-top: 1px solid var(--px-line); }
html body.app-site .nx-stay-price strong { color: var(--px-text); font-size: 1.1875rem; font-weight: 700; letter-spacing: -.01em; }
html body.app-site .nx-stay-price span, html body.app-site .nx-stay-price small { color: var(--px-muted); }
html body.app-site .nx-stay .stay-offer-button { min-height: 42px; padding-inline: 18px; border-radius: 12px; }

/* ---------- 12 · Home shortcuts and section headings ---------- */
html body.app-site .guest-home-shortcuts a {
  border: 1px solid var(--px-line); border-radius: var(--px-r-lg);
  background: var(--px-surface); box-shadow: var(--px-shadow-sm);
  transition: transform var(--px-fast) var(--px-ease), box-shadow var(--px-fast) var(--px-ease);
}
html body.app-site .guest-home-shortcuts a:hover { transform: translateY(-2px); box-shadow: var(--px-shadow); }
html body.app-site .guest-shortcut-icon { border-radius: 14px; background: var(--px-navy-soft); color: var(--px-navy); }
[data-bs-theme="dark"] body.app-site .guest-shortcut-icon { color: #fff; }
html body.app-site .guest-shortcut-count,
html body.app-site .guest-home-shortcuts strong { font-weight: 700; color: var(--px-text); }
html body.app-site .guest-home-shortcuts small { color: var(--px-muted); }

/* Install prompt: floating card above the tab bar. */
html body.app-site .install-banner {
  border: 1px solid var(--px-line);
  border-radius: var(--px-r-lg);
  background: var(--px-surface);
  color: var(--px-text);
  box-shadow: var(--px-shadow-lg);
}
html body.app-site .install-banner strong { color: var(--px-text); }
html body.app-site .install-banner p { color: var(--px-muted); }
html body.app-site .install-banner #install-action {
  border: 0; border-radius: 12px; background: var(--px-navy); color: #fff; font-weight: 600; min-height: 40px;
}
[data-bs-theme="dark"] body.app-site .install-banner #install-action { background: #e8eef7; color: var(--px-navy); }
html body.app-site .install-banner #install-close { color: var(--px-muted); }
html body.app-site :is(.guest-stays-heading, .explore-heading) h2,
html body.app-site .guest-stays-heading h2 { font-size: 1.375rem; font-weight: 600; }
html body.app-site .guest-stays-heading a,
html body.app-site .landing-text-link {
  color: var(--px-blue); font-weight: 600; text-decoration: none;
}
html body.app-site .guest-stays-heading a:hover, html body.app-site .landing-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 13 · Landing sections ---------- */
html body.app-site.landing-site { background: var(--px-bg); }
html body.app-site .landing-section h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; }
html body.app-site .landing-process { gap: 16px; border: 0 !important; }
html body.app-site .landing-process article {
  border: 1px solid var(--px-line) !important;
  border-radius: var(--px-r-lg);
  background: var(--px-surface) !important;
  box-shadow: var(--px-shadow-sm);
  transition: transform var(--px-mid) var(--px-ease), box-shadow var(--px-mid) var(--px-ease);
}
html body.app-site .landing-process article:nth-child(2) { background: linear-gradient(160deg, var(--px-gold-soft), var(--px-surface)) !important; border-color: color-mix(in srgb, var(--px-gold) 45%, var(--px-line)) !important; }
@media (hover: hover) { html body.app-site .landing-process article:hover { transform: translateY(-3px); box-shadow: var(--px-shadow); } }
html body.app-site .landing-process svg { border-radius: 14px; }
html body.app-site .landing-stays { background: transparent; }
html body.app-site .landing-faq details {
  border: 1px solid var(--px-line); border-radius: var(--px-r);
  background: var(--px-surface); padding: 4px 18px; margin-bottom: 10px;
}
html body.app-site .landing-faq details[open] { box-shadow: var(--px-shadow-sm); }
html body.app-site .landing-final {
  border-radius: var(--px-r-xl);
  background: radial-gradient(120% 160% at 100% 0%, rgb(232 187 97 / 25%), transparent 50%), linear-gradient(125deg, #19232b, #243440) !important;
  color: #fff;
}
html body.app-site .landing-final :is(h2, p) { color: #fff; }
html body.app-site .landing-final .landing-primary { background: #fff !important; color: var(--px-navy) !important; border-color: #fff !important; }

/* ---------- 14 · Footer ---------- */
html body.app-site .platform-footer { background: var(--px-surface); border-top: 1px solid var(--px-line); }
html body.app-site .platform-footer a { color: var(--px-muted); }
html body.app-site .platform-footer a:hover { color: var(--px-text); }

/* ---------- 15 · Modals, dialogs and notices ---------- */
html body.app-site .modal-content {
  border: 1px solid var(--px-line); border-radius: var(--px-r-xl);
  background: var(--px-surface); box-shadow: var(--px-shadow-lg);
}
html body.app-site .modal-header { border-bottom-color: var(--px-line); padding: 20px 24px; }
html body.app-site .modal-body { padding: 20px 24px; }
html body.app-site .modal-footer { border-top-color: var(--px-line); }

.swal2-popup {
  border-radius: var(--px-r-xl) !important;
  font-family: var(--px-font) !important;
  padding: 28px 24px 24px !important;
  box-shadow: var(--px-shadow-lg) !important;
}
.swal2-title { font-weight: 600 !important; letter-spacing: -.01em; }
.swal2-styled { border-radius: var(--px-r) !important; font-weight: 600 !important; min-height: 46px; padding-inline: 22px !important; }
.swal2-styled.swal2-confirm { background: var(--px-navy) !important; box-shadow: 0 6px 16px -6px rgb(25 35 43 / 45%) !important; }
.swal2-styled:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--px-blue) 30%, transparent) !important; }
html body.app-site .mx-notice { border-radius: var(--px-r); }
html body.app-site .mx-empty { padding: 40px 24px; text-align: center; }

/* ---------- 16 · Legal documents ---------- */
html body.app-site .legal-doc { max-width: 860px; margin-inline: auto; }
html body.app-site .legal-doc h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 16px; }
html body.app-site .legal-meta { margin: 16px 0 4px; color: var(--px-muted); font-size: .875rem; }
html body.app-site .legal-gap-note { color: var(--px-muted); font-size: .8125rem; }
html body.app-site .legal-gap { padding: 1px 6px; border-radius: 6px; background: var(--px-gold-soft); color: var(--px-gold-ink); font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
html body.app-site .legal-toc {
  margin: 24px 0 8px; padding: 20px 24px;
  border: 1px solid var(--px-line); border-radius: var(--px-r-lg); background: var(--px-soft);
}
html body.app-site .legal-toc h2 { margin: 0 0 10px; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--px-muted); }
html body.app-site .legal-toc ol { margin: 0; padding-left: 1.25rem; columns: 2 240px; column-gap: 32px; font-size: .9375rem; }
html body.app-site .legal-toc li { margin-bottom: 6px; break-inside: avoid; }
html body.app-site .legal-toc a { color: var(--px-text); text-decoration: none; }
html body.app-site .legal-toc a:hover { color: var(--px-blue); text-decoration: underline; text-underline-offset: 3px; }
html body.app-site .legal-body section { padding-top: 28px; scroll-margin-top: 88px; }
html body.app-site .legal-body h2 { margin: 0 0 10px; font-size: 1.1875rem; font-weight: 600; }
html body.app-site .legal-body p { margin: 0 0 12px; color: color-mix(in srgb, var(--px-text) 86%, var(--px-muted)); line-height: 1.75; max-width: 70ch; }

/* ---------- 17 · Inline icons (replace text arrows) ---------- */
.px-ico { flex: none; width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; }
html body.app-site :is(.guest-stays-heading a, .landing-text-link, .mx-back, .nx-stay-own) { display: inline-flex; align-items: center; gap: 2px; }
html body.app-site button > .px-ico:only-child, html body.app-site a > .px-ico:only-child { margin: 0; }
html body.app-site .mx-range-line { display: block; flex: 1 1 24px; min-width: 16px; max-width: 48px; height: 2px; border-radius: 2px; background: var(--px-line); align-self: center; }

/* ---------- 18 · Contact channels as icons ---------- */
html body.app-site .contact-channels a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--px-line); border-radius: var(--px-r-pill);
  background: var(--px-surface); color: var(--px-text);
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: background-color var(--px-fast) var(--px-ease), border-color var(--px-fast) var(--px-ease), transform var(--px-fast) var(--px-ease);
}
html body.app-site .contact-channels a svg { width: 20px; height: 20px; }
html body.app-site .contact-channels a:hover { background: var(--px-soft); transform: translateY(-1px); }
html body.app-site .contact-channels .contact-whatsapp { background: #e7f8ee; border-color: #bfe8cf; color: #11643a; }
html body.app-site .contact-channels .contact-whatsapp:hover { background: #d6f3e2; }
[data-bs-theme="dark"] body.app-site .contact-channels .contact-whatsapp { background: #10331f; border-color: #1f5a37; color: #8be0ad; }
html body.app-site .contact-compact :is(.contact-direct, .contact-socials) { display: flex; flex-wrap: wrap; gap: 10px; }
html body.app-site .contact-compact a { width: 44px; height: 44px; padding: 0; }
html body.app-site .contact-compact .contact-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 19 · Host contract ---------- */
html body.app-site .hc-page { max-width: 1120px; }
html body.app-site .hc-head h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 4px 0 8px; }
html body.app-site .hc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0; padding: 0; list-style: none; counter-reset: none; }
html body.app-site .hc-step {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px;
  border: 1px solid var(--px-line); border-radius: var(--px-r-lg); background: var(--px-surface);
}
html body.app-site .hc-step strong { display: block; font-size: .9375rem; font-weight: 600; }
html body.app-site .hc-step small { display: block; color: var(--px-muted); font-size: .8125rem; line-height: 1.45; }
html body.app-site .hc-step-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--px-soft); color: var(--px-muted); }
html body.app-site .hc-step-icon svg { width: 20px; height: 20px; }
html body.app-site .hc-step.is-done .hc-step-icon { background: var(--px-ok-soft); color: var(--px-ok); }
html body.app-site .hc-step.is-current { border-color: color-mix(in srgb, var(--px-navy) 35%, var(--px-line)); box-shadow: var(--px-shadow-sm); }
html body.app-site .hc-step.is-current .hc-step-icon { background: var(--px-navy); color: #fff; }
[data-bs-theme="dark"] body.app-site .hc-step.is-current .hc-step-icon { background: #e8eef7; color: var(--px-navy); }
html body.app-site .hc-card { border: 1px solid var(--px-line); border-radius: var(--px-r-xl); background: var(--px-surface); box-shadow: var(--px-shadow-sm); padding: 24px; }
html body.app-site .hc-layout { display: grid; gap: 20px; align-items: start; }
@media (min-width: 992px) {
  html body.app-site .hc-layout { grid-template-columns: minmax(0, 1fr) 380px; }
  html body.app-site .hc-sign { position: sticky; top: 88px; }
}
html body.app-site .hc-doc-head { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--px-line); }
html body.app-site .hc-doc-head h2 { margin: 0; font-size: 1.1875rem; }
html body.app-site .hc-doc-head small { color: var(--px-muted); }
html body.app-site :is(.hc-doc-icon, .hc-done-icon, .hc-sign-icon, .cn-icon) { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--px-navy-soft); color: var(--px-navy); }
[data-bs-theme="dark"] body.app-site :is(.hc-doc-icon, .hc-done-icon, .hc-sign-icon, .cn-icon) { color: #fff; }
html body.app-site .hc-gap-note { margin: 12px 0 0; color: var(--px-muted); font-size: .8125rem; }
html body.app-site .hc-text { max-height: 62vh; overflow: auto; padding: 4px 8px 4px 0; scrollbar-width: thin; }
html body.app-site .hc-text h3 { margin: 22px 0 8px; font-size: 1rem; font-weight: 600; }
html body.app-site .hc-text p { margin: 0 0 10px; line-height: 1.75; color: color-mix(in srgb, var(--px-text) 86%, var(--px-muted)); }
html body.app-site .hc-sign h2 { display: flex; align-items: center; gap: 12px; font-size: 1.1875rem; margin: 0 0 8px; }
html body.app-site .hc-sign-icon { width: 40px; height: 40px; }
html body.app-site :is(.hc-business, .hc-evidence, .hc-fingerprint) { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; color: var(--px-muted); font-size: .8125rem; line-height: 1.5; }
html body.app-site :is(.hc-business, .hc-evidence, .hc-fingerprint) svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
html body.app-site .hc-business strong { color: var(--px-text); }
html body.app-site .hc-accept { margin: 0 0 16px; padding: 14px 14px 14px 40px; border-radius: var(--px-r); background: var(--px-soft); }
html body.app-site .hc-accept label { font-size: .875rem; line-height: 1.5; }
html body.app-site :is(.hc-submit, .hc-download, .cn-action) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
html body.app-site :is(.hc-submit, .hc-download, .cn-action) svg { width: 18px; height: 18px; }
html body.app-site .hc-evidence { margin: 14px 0 0; }
html body.app-site .hc-done { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
html body.app-site .hc-done > div { flex: 1 1 320px; }
html body.app-site .hc-done h2 { font-size: 1.25rem; margin: 0 0 6px; }
html body.app-site .hc-done-icon { width: 56px; height: 56px; border-radius: 18px; background: var(--px-ok-soft); color: var(--px-ok); }
html body.app-site .hc-fingerprint code { font-size: .75rem; color: var(--px-text); }
html body.app-site .hc-previous { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
html body.app-site .hc-previous svg { flex: none; width: 20px; height: 20px; }
@media (max-width: 767.98px) {
  html body.app-site .hc-steps { grid-template-columns: 1fr; gap: 8px; }
  html body.app-site .hc-card { padding: 18px; border-radius: 22px; }
  html body.app-site .hc-text { max-height: 55vh; }
  html body.app-site .hc-download { width: 100%; }
}

/* Host notice that leads to the contract. */
html body.app-site .cn-notice { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 16px; border-radius: var(--px-r-lg); }
html body.app-site .cn-notice > div { flex: 1 1 220px; }
html body.app-site .cn-notice strong { display: block; font-weight: 600; }
html body.app-site .cn-notice p { margin: 2px 0 0; color: var(--px-muted); font-size: .875rem; }
html body.app-site .cn-notice.is-signed .cn-icon { background: var(--px-ok-soft); color: var(--px-ok); }
@media (max-width: 575.98px) { html body.app-site .cn-action { width: 100%; } }

/* ---------- 20 · Reviews and stays ---------- */
:root { --rv-star: #e8a93a; --rv-star-off: #d5dce6; }
[data-bs-theme="dark"] { --rv-star: #f4c25e; --rv-star-off: #34506d; }
.rv-star { width: 16px; height: 16px; flex: none; fill: var(--rv-star-off); stroke: none; }
.rv-star.is-on { fill: var(--rv-star); }
.rv-star.is-half { fill: color-mix(in srgb, var(--rv-star) 55%, var(--rv-star-off)); }
.rv-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
html body.app-site :is(.rv-chip, .rv-head-link, .rv-guest-trust) { display: inline-flex; align-items: center; gap: 5px; font-size: .8125rem; color: var(--px-muted); text-decoration: none; }
html body.app-site :is(.rv-chip, .rv-head-link, .rv-guest-trust) strong { color: var(--px-text); font-weight: 700; }
html body.app-site .rv-new { padding: 2px 9px; border-radius: var(--px-r-pill); background: var(--px-blue-soft); color: var(--px-blue); font-size: .75rem; font-weight: 600; }
html body.app-site .nx-stay-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html body.app-site .nx-stay-top .nx-stay-kicker { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.app-site .rv-chip { flex: none; }
html body.app-site .rv-head-link { margin: 6px 0 10px; }
html body.app-site .rv-head-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
html body.app-site .rv-guest-trust { margin: 6px 0 0; }

html body.app-site .rv-block { scroll-margin-top: 88px; }
html body.app-site .rv-summary { display: grid; gap: 18px; align-items: center; margin: 8px 0 20px; padding: 20px; border: 1px solid var(--px-line); border-radius: var(--px-r-lg); background: var(--px-surface); }
@media (min-width: 768px) { html body.app-site .rv-summary { grid-template-columns: 220px minmax(0, 1fr); } }
html body.app-site .rv-score { display: grid; gap: 6px; justify-items: start; }
html body.app-site .rv-score > strong { font-size: 3rem; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--px-text); }
html body.app-site .rv-score .rv-star { width: 20px; height: 20px; }
html body.app-site .rv-score small { color: var(--px-muted); font-size: .8125rem; }
html body.app-site .rv-bars { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
html body.app-site .rv-bars li { display: grid; grid-template-columns: 12px 16px minmax(0, 1fr) 32px; gap: 8px; align-items: center; font-size: .8125rem; color: var(--px-muted); }
html body.app-site .rv-bar { width: 100%; height: 8px; border: 0; border-radius: 99px; background: var(--px-soft); overflow: hidden; appearance: none; -webkit-appearance: none; }
html body.app-site .rv-bar::-webkit-progress-bar { background: var(--px-soft); border-radius: 99px; }
html body.app-site .rv-bar::-webkit-progress-value { background: var(--rv-star); border-radius: 99px; }
html body.app-site .rv-bar::-moz-progress-bar { background: var(--rv-star); border-radius: 99px; }
html body.app-site .rv-bars small { text-align: right; }
html body.app-site .rv-list { display: grid; gap: 14px; }
html body.app-site .rv-item { padding: 18px; border: 1px solid var(--px-line); border-radius: var(--px-r-lg); background: var(--px-surface); }
html body.app-site .rv-item header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 10px; }
html body.app-site .rv-item header > div { flex: 1 1 auto; display: grid; }
html body.app-site .rv-item header strong { font-size: .9375rem; }
html body.app-site .rv-item header small { color: var(--px-muted); font-size: .8125rem; }
html body.app-site .rv-block > .nx-fine { margin-top: 12px; }
html body.app-site .rv-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--px-navy-soft); color: var(--px-navy); font-weight: 700; }
[data-bs-theme="dark"] body.app-site .rv-avatar { color: #fff; }
html body.app-site .rv-text { margin: 0; line-height: 1.7; color: color-mix(in srgb, var(--px-text) 88%, var(--px-muted)); }
html body.app-site .rv-reply { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--px-navy); border-radius: 0 var(--px-r) var(--px-r) 0; background: var(--px-soft); }
html body.app-site .rv-reply strong { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; }
html body.app-site .rv-reply strong svg { width: 16px; height: 16px; }
html body.app-site .rv-reply p { margin: 4px 0 0; font-size: .9375rem; line-height: 1.6; }
html body.app-site .rv-report { margin-top: 10px; }
html body.app-site .rv-report summary { display: inline-flex; align-items: center; gap: 6px; color: var(--px-muted); font-size: .8125rem; cursor: pointer; list-style: none; }
html body.app-site .rv-report summary::-webkit-details-marker { display: none; }
html body.app-site .rv-report summary svg { width: 15px; height: 15px; }
html body.app-site .rv-report form { margin-top: 10px; max-width: 420px; }
html body.app-site .rv-pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
html body.app-site .rv-pager a { min-width: 38px; padding: 7px 10px; border: 1px solid var(--px-line); border-radius: 10px; text-align: center; color: var(--px-text); text-decoration: none; }
html body.app-site .rv-pager a[aria-current="page"] { background: var(--px-navy); border-color: var(--px-navy); color: #fff; }

html body.app-site .rv-page { max-width: 1080px; }
html body.app-site .rv-stay { display: flex; gap: 16px; align-items: center; margin: 18px 0 22px; padding: 14px; border: 1px solid var(--px-line); border-radius: var(--px-r-lg); background: var(--px-surface); }
html body.app-site .rv-stay img, html body.app-site .rv-stay-empty { flex: none; width: 112px; height: 84px; border-radius: 14px; object-fit: cover; background: var(--px-soft); display: grid; place-items: center; color: var(--px-muted); }
html body.app-site .rv-stay h2 { margin: 0 0 6px; font-size: 1.125rem; }
html body.app-site .rv-stay p { display: flex; gap: 8px; align-items: center; margin: 2px 0; color: var(--px-muted); font-size: .875rem; }
html body.app-site .rv-stay p svg { width: 16px; height: 16px; flex: none; }
html body.app-site .rv-layout { display: grid; gap: 18px; align-items: start; }
@media (min-width: 992px) { html body.app-site .rv-layout { grid-template-columns: minmax(0, 1fr) 360px; } }
html body.app-site .rv-card { padding: 22px; border: 1px solid var(--px-line); border-radius: var(--px-r-xl); background: var(--px-surface); box-shadow: var(--px-shadow-sm); }
html body.app-site .rv-card header { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
html body.app-site .rv-card h2 { margin: 0; font-size: 1.0625rem; }
html body.app-site .rv-meta { margin: 10px 0 0; color: var(--px-muted); font-size: .8125rem; }
html body.app-site .rv-rating { margin: 0 0 18px; padding: 0; border: 0; }
html body.app-site .rv-rating legend { font-size: 1.0625rem; font-weight: 600; margin-bottom: 10px; }
/* Stars are listed 5→1 and drawn right-to-left so hover and checked fill everything to their left. */
html body.app-site .rv-rating-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
html body.app-site .rv-rating-stars input { position: absolute; opacity: 0; pointer-events: none; }
html body.app-site .rv-rating-stars label { cursor: pointer; padding: 2px; border-radius: 10px; }
html body.app-site .rv-rating-stars svg { width: 40px; height: 40px; fill: var(--rv-star-off); transition: fill var(--px-fast) var(--px-ease), transform var(--px-fast) var(--px-ease); }
html body.app-site .rv-rating-stars input:checked ~ label svg,
html body.app-site .rv-rating-stars label:hover svg,
html body.app-site .rv-rating-stars label:hover ~ label svg { fill: var(--rv-star); }
html body.app-site .rv-rating-stars label:hover svg { transform: scale(1.08); }
html body.app-site .rv-rating-stars input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--px-blue) 55%, transparent); }
html body.app-site .rv-help { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 14px; color: var(--px-muted); font-size: .8125rem; line-height: 1.5; }
html body.app-site .rv-help svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
html body.app-site :is(.rv-submit, .rv-cta, .rv-trip .btn, .rv-reply-form .btn) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
html body.app-site :is(.rv-submit, .rv-reply-form .btn) svg { width: 18px; height: 18px; }
html body.app-site .rv-empty, html body.app-site .rv-waiting { display: flex; gap: 14px; align-items: center; }
html body.app-site .rv-empty p, html body.app-site .rv-waiting p { margin: 0; color: var(--px-muted); }
html body.app-site .rv-empty-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--rv-star) 18%, var(--px-surface)); color: #9a6a12; }
[data-bs-theme="dark"] body.app-site .rv-empty-icon { color: var(--rv-star); }
html body.app-site .rv-empty-icon svg { width: 22px; height: 22px; }
html body.app-site .rv-reply-form { margin-top: 14px; }
html body.app-site .rv-reply-form summary { display: flex; gap: 8px; align-items: center; font-weight: 600; cursor: pointer; list-style: none; }
html body.app-site .rv-reply-form summary::-webkit-details-marker { display: none; }
html body.app-site .rv-reply-form form { margin-top: 12px; }
html body.app-site .rv-trip { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 16px 0; padding: 16px; border: 1px solid color-mix(in srgb, var(--rv-star) 45%, var(--px-line)); border-radius: var(--px-r-lg); background: color-mix(in srgb, var(--rv-star) 8%, var(--px-surface)); }
html body.app-site .rv-trip > div { flex: 1 1 220px; }
html body.app-site .rv-trip p { margin: 2px 0 0; color: var(--px-muted); font-size: .875rem; }
html body.app-site .rv-trip-icon { width: 22px; height: 22px; }
@media (max-width: 575.98px) {
  html body.app-site .rv-stay img, html body.app-site .rv-stay-empty { width: 84px; height: 70px; }
  html body.app-site .rv-rating-stars svg { width: 44px; height: 44px; }
  html body.app-site .rv-trip .btn { width: 100%; }
}

/* ---------- 21 · Overlays without full-screen blur ----------
   A blurred navy veil over the whole page is repainted on every frame of the sheet animation;
   on phones that reads as a laggy blue screen. A light, unblurred veil keeps context and stays fast. */
html body.app-site dialog::backdrop,
html body.app-site :is(.stay-calendar, .occupancy-dialog, .stay-map-dialog, .explore-filter-dialog, .mx-response-dialog)::backdrop {
  background: rgb(15 22 28 / 35%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body.app-site .hotel-lightbox::backdrop { backdrop-filter: none !important; }
.swal2-container.swal2-backdrop-show { background: rgb(15 22 28 / 35%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body.app-site .modal-backdrop { backdrop-filter: none !important; }
html body.app-site .modal-backdrop.show { opacity: .35; }
html body.app-site dialog[open] { animation-duration: 180ms !important; }
/* The sticky header and the tab bar are opaque, so their inherited blur only cost frames. */
html body.app-site :is(.mx-app-header, .bkk-top, .mx-bottom, .bkk-bottom) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---------- 22 · Children's ages ---------- */
html body.app-site .occupancy-ages { margin: 2px 0 14px; padding: 14px; border-radius: var(--px-r); background: var(--px-soft); }
html body.app-site .occupancy-ages[hidden] { display: none; }
html body.app-site .occupancy-ages-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html body.app-site .occupancy-age { display: grid; gap: 4px; margin: 0; }
html body.app-site .occupancy-age select {
  width: 100%; min-height: 44px; padding: 8px 34px 8px 12px;
  border: 1px solid var(--px-line); border-radius: 12px;
  background: var(--px-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b80' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
  color: var(--px-text); font-size: .9375rem; appearance: none; -webkit-appearance: none;
}
html body.app-site .occupancy-age select:focus { outline: 0; border-color: var(--px-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--px-blue) 18%, transparent); }
html body.app-site .occupancy-age-error { display: none; color: var(--px-err); font-size: .75rem; font-weight: 500; }
html body.app-site .occupancy-age.is-missing select { border-color: var(--px-err); box-shadow: 0 0 0 3px color-mix(in srgb, var(--px-err) 14%, transparent); }
html body.app-site .occupancy-age.is-missing .occupancy-age-error { display: block; }
html body.app-site .occupancy-ages-note { margin: 10px 0 0; color: var(--px-muted); font-size: .8125rem; line-height: 1.5; }

/* ---------- 23 · Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .px-hero-photo { animation: none; transform: none; }
  html body.app-site :is(.nx-stay, .nx-stay-media img, .landing-process article, .guest-home-shortcuts a, .btn, .px-btn, .mx-bottom a svg) { transition: none !important; transform: none !important; }
}

/* ===== Affiliation form (contract page, step 1) ===== */
html body.app-site .af-form { display: grid; gap: 16px; max-width: 920px; }
html body.app-site .af-section-head { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--px-line); }
html body.app-site .af-section-head > div { flex: 1; }
html body.app-site .af-section-head h2 { margin: 0 0 2px; font-size: 1.1875rem; }
html body.app-site .af-section-head p { margin: 0; color: var(--px-muted); font-size: .875rem; }
html body.app-site .af-section-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--px-navy-soft); color: var(--px-navy); }
[data-bs-theme="dark"] body.app-site .af-section-icon { color: #fff; }
html body.app-site .af-section-icon svg { width: 22px; height: 22px; }
html body.app-site .af-section-step { flex: none; padding: 4px 10px; border-radius: var(--px-r-pill); background: var(--px-soft); color: var(--px-muted); font-size: .75rem; font-weight: 600; }
html body.app-site .af-grid { display: grid; gap: 14px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body.app-site .af-group { display: contents; }
html body.app-site .af-group[hidden], html body.app-site .af-field[hidden] { display: none; }
html body.app-site .af-field.is-wide { grid-column: 1 / -1; }
html body.app-site .af-field .form-label { font-size: .8125rem; font-weight: 600; margin-bottom: 6px; }
html body.app-site .af-hint { display: block; margin-top: 6px; color: var(--px-muted); font-size: .75rem; line-height: 1.45; }
html body.app-site .af-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; padding: 0; border: 0; }
html body.app-site .af-choice legend { grid-column: 1 / -1; font-size: .8125rem; font-weight: 600; margin-bottom: 2px; }
html body.app-site .af-tile { position: relative; cursor: pointer; }
html body.app-site .af-tile input { position: absolute; opacity: 0; inset: 0; }
html body.app-site .af-tile-body { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; height: 100%; padding: 14px 16px; border: 1.5px solid var(--px-line); border-radius: var(--px-r-lg); background: var(--px-surface); transition: border-color var(--px-fast) var(--px-ease), box-shadow var(--px-fast) var(--px-ease); }
html body.app-site .af-tile-body svg { grid-row: span 2; width: 24px; height: 24px; color: var(--px-muted); }
html body.app-site .af-tile-body strong { font-size: .9375rem; font-weight: 600; }
html body.app-site .af-tile-body small { color: var(--px-muted); font-size: .8125rem; }
html body.app-site .af-tile input:checked + .af-tile-body { border-color: var(--px-navy); box-shadow: 0 0 0 3px var(--px-navy-soft); }
html body.app-site .af-tile input:checked + .af-tile-body svg { color: var(--px-navy); }
[data-bs-theme="dark"] body.app-site .af-tile input:checked + .af-tile-body { border-color: #e8eef7; }
[data-bs-theme="dark"] body.app-site .af-tile input:checked + .af-tile-body svg { color: #fff; }
html body.app-site .af-tile input:focus-visible + .af-tile-body { outline: 2px solid var(--px-blue); outline-offset: 2px; }
html body.app-site :is(.af-stored, .af-formats, .af-locked) { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--px-r); background: var(--px-soft); color: var(--px-muted); font-size: .8125rem; line-height: 1.5; }
html body.app-site :is(.af-stored, .af-formats, .af-locked) svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--px-ok); }
html body.app-site .af-formats { margin: 16px 0 0; }
html body.app-site .af-locked { margin-top: 16px; }
html body.app-site .af-uploads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
html body.app-site .af-upload { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 176px; padding: 18px 16px; border: 1.5px dashed color-mix(in srgb, var(--px-muted) 45%, var(--px-line)); border-radius: var(--px-r-lg); background: var(--px-surface); cursor: pointer; transition: border-color var(--px-fast) var(--px-ease), background var(--px-fast) var(--px-ease); }
html body.app-site .af-upload:hover { border-color: var(--px-navy); }
html body.app-site .af-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
html body.app-site .af-upload:focus-within { outline: 2px solid var(--px-blue); outline-offset: 2px; }
html body.app-site .af-upload strong { font-size: .9375rem; font-weight: 600; }
html body.app-site .af-upload small { color: var(--px-muted); font-size: .8125rem; line-height: 1.45; overflow-wrap: anywhere; }
html body.app-site .af-upload-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--px-soft); color: var(--px-muted); }
html body.app-site .af-upload-icon svg { width: 20px; height: 20px; }
html body.app-site .af-upload-action { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--px-navy); font-size: .8125rem; font-weight: 600; }
[data-bs-theme="dark"] body.app-site .af-upload-action { color: #e8eef7; }
html body.app-site .af-upload-action svg { width: 16px; height: 16px; transform: rotate(180deg); }
html body.app-site .af-upload:is(.has-file, .is-picked) { border-style: solid; border-color: color-mix(in srgb, var(--px-ok) 55%, var(--px-line)); background: color-mix(in srgb, var(--px-ok-soft) 45%, var(--px-surface)); }
html body.app-site .af-upload:is(.has-file, .is-picked) .af-upload-icon { background: var(--px-ok-soft); color: var(--px-ok); }
html body.app-site .af-upload.is-error { border-color: var(--px-err); background: var(--px-err-soft); }
html body.app-site .af-upload.is-error small { color: var(--px-err); }
html body.app-site .af-submit { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
html body.app-site .af-submit .hc-accept { flex: 1 1 100%; margin: 0; }
html body.app-site .af-submit .btn { min-height: 48px; padding-inline: 22px; }
html body.app-site .hc-party { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 4px 0 10px; padding: 14px; border-radius: var(--px-r); background: var(--px-soft); }
html body.app-site .hc-party dt { color: var(--px-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
html body.app-site .hc-party dd { margin: 2px 0 0; font-size: .875rem; font-weight: 500; overflow-wrap: anywhere; }
html body.app-site .hc-edit { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px; color: var(--px-navy); font-size: .8125rem; font-weight: 600; text-decoration: none; }
[data-bs-theme="dark"] body.app-site .hc-edit { color: #e8eef7; }
html body.app-site .hc-edit svg { width: 16px; height: 16px; }
html body.app-site .hc-signature { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.125rem; }
@media (max-width: 767.98px) {
  html body.app-site .af-grid, html body.app-site .af-uploads { grid-template-columns: 1fr; }
  html body.app-site .af-upload { min-height: 0; }
  html body.app-site .af-section-step { display: none; }
  html body.app-site .af-submit .btn { width: 100%; }
}
@media (max-width: 420px) {
  html body.app-site .af-choice { grid-template-columns: 1fr; }
}

/* ===== International phone field ===== */
html body.app-site .pf-row { position: relative; display: flex; gap: 8px; }
html body.app-site .pf-row .pf-number { flex: 1; min-width: 0; }
html body.app-site .pf-row .pf-country:not(.pf-native) { flex: 0 0 42%; }
html body.app-site .pf-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
html body.app-site .pf-trigger { display: inline-flex; flex: none; align-items: center; gap: 6px; min-width: 104px; padding: 0 12px; border: 1px solid var(--px-line); border-radius: var(--px-r); background: var(--px-surface); color: var(--px-text); font-weight: 600; font-size: .9375rem; }
html body.app-site .pf-trigger::after { content: ""; width: 7px; height: 7px; margin-left: auto; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); opacity: .6; }
html body.app-site .pf-trigger:focus-visible { outline: 2px solid var(--px-blue); outline-offset: 2px; }
html body.app-site .pf-flag { font-size: 1.15rem; line-height: 1; }
html body.app-site .pf-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(360px, 100%); padding: 8px; border: 1px solid var(--px-line); border-radius: var(--px-r-lg); background: var(--px-surface); box-shadow: var(--px-shadow-lg); }
html body.app-site .pf-search { margin-bottom: 6px; }
html body.app-site .pf-list { max-height: 260px; margin: 0; padding: 0; overflow: auto; list-style: none; overscroll-behavior: contain; }
html body.app-site .pf-list [role="option"] { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 9px 10px; border-radius: var(--px-r-sm); cursor: pointer; font-size: .875rem; }
html body.app-site .pf-list [role="option"]:is(:hover, :focus) { background: var(--px-soft); outline: none; }
html body.app-site .pf-list [aria-selected="true"] { background: var(--px-navy-soft); font-weight: 600; }
html body.app-site .pf-dial { color: var(--px-muted); font-variant-numeric: tabular-nums; }
html body.app-site .pf-none { padding: 10px; color: var(--px-muted); font-size: .875rem; }
html body.app-site .pf.is-valid .pf-number { border-color: color-mix(in srgb, var(--px-ok) 60%, var(--px-line)); }
html body.app-site .pf.is-invalid .pf-number { border-color: var(--px-err); }
html body.app-site .pf.is-invalid .pf-hint { color: var(--px-err); }

/* ===== Guest / host mode switch ===== */
html body.app-site .mode-switch { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin: 16px 0; padding: 12px 14px; border: 1px solid var(--px-line); border-radius: var(--px-r-lg); background: var(--px-surface); }
html body.app-site .mode-switch-label { color: var(--px-muted); font-size: .875rem; font-weight: 500; }
html body.app-site .mode-switch-options { display: inline-flex; padding: 4px; border-radius: var(--px-r-pill); background: var(--px-soft); }
html body.app-site .mode-switch-options button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--px-r-pill); background: transparent; color: var(--px-muted); font-weight: 600; font-size: .875rem; }
html body.app-site .mode-switch-options button svg { width: 18px; height: 18px; }
html body.app-site .mode-switch-options button[aria-pressed="true"] { background: var(--px-navy); color: #fff; opacity: 1; }
[data-bs-theme="dark"] body.app-site .mode-switch-options button[aria-pressed="true"] { background: #e8eef7; color: var(--px-navy); }
html body.app-site .mode-switch-options button:not([aria-pressed="true"]):hover { color: var(--px-text); }
@media (max-width: 420px) { html body.app-site .mode-switch-options { width: 100%; } html body.app-site .mode-switch-options button { flex: 1; justify-content: center; } }

/* ===== Public host affiliation (join) ===== */
html body.app-site .hj-page { max-width: 1040px; }
html body.app-site .hj-hero { display: grid; gap: 24px; align-items: center; margin-bottom: 26px; padding: 30px; border-radius: var(--px-r-xl); background: linear-gradient(135deg, var(--px-navy) 0%, var(--px-navy-2) 100%); color: #fff; }
html body.app-site .hj-hero .mx-eyebrow { color: var(--px-gold); }
html body.app-site .hj-hero h1 { margin: 6px 0 10px; font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.15; color: #fff; }
html body.app-site .hj-lead { margin: 0; color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.6; }
html body.app-site .hj-login { margin: 14px 0 0; color: rgba(255,255,255,.75); font-size: .875rem; }
html body.app-site .hj-login a { color: #fff; font-weight: 600; }
html body.app-site .hj-benefits { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
html body.app-site .hj-benefits li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--px-r-lg); background: rgba(255,255,255,.08); }
html body.app-site .hj-benefits li > span { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: rgba(232,187,97,.18); color: var(--px-gold); }
html body.app-site .hj-benefits svg { width: 18px; height: 18px; }
html body.app-site .hj-benefits strong { display: block; font-size: .9375rem; }
html body.app-site .hj-benefits small { color: rgba(255,255,255,.72); font-size: .8125rem; line-height: 1.45; }
@media (min-width: 900px) { html body.app-site .hj-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding: 40px; } }
html body.app-site .hj-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
html body.app-site .hj-form > * { min-width: 0; }
html body.app-site .hj-progress { height: 6px; border-radius: 999px; background: var(--px-soft); overflow: hidden; }
html body.app-site .hj-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--px-gold), var(--px-teal)); transition: width .35s var(--px-ease); }
html body.app-site .hj-steps ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
html body.app-site .hj-steps li { flex: 1 0 auto; }
html body.app-site .hj-steps button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 1px solid var(--px-line); border-radius: var(--px-r-pill); background: var(--px-surface); color: var(--px-muted); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
html body.app-site .hj-step-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--px-soft); }
html body.app-site .hj-step-dot svg { width: 14px; height: 14px; }
html body.app-site .hj-steps button[aria-current] { border-color: var(--px-navy); color: var(--px-text); }
html body.app-site .hj-steps button[aria-current] .hj-step-dot { background: var(--px-navy); color: #fff; }
html body.app-site .hj-steps button.is-done .hj-step-dot { background: var(--px-ok-soft); color: var(--px-ok); }
[data-bs-theme="dark"] body.app-site .hj-steps button[aria-current] { border-color: #e8eef7; }
html body.app-site .hj-section.is-entering { animation: hj-in .28s var(--px-ease); }
@keyframes hj-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html body.app-site .hj-member { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--px-r); background: var(--px-soft); }
html body.app-site .hj-member svg { width: 20px; height: 20px; color: var(--px-muted); }
html body.app-site .hj-member strong { display: block; }
html body.app-site .hj-member small { color: var(--px-muted); }
html body.app-site .af-grid > .is-wide { grid-column: 1 / -1; }
html body.app-site .hj-choice-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 4px; }
html body.app-site .hj-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; border: 0; }
html body.app-site .hj-types legend { grid-column: 1 / -1; font-size: .8125rem; font-weight: 600; }
html body.app-site .hj-type { position: relative; cursor: pointer; }
html body.app-site .hj-type input { position: absolute; inset: 0; opacity: 0; }
html body.app-site .hj-type > span { display: grid; justify-items: center; gap: 8px; padding: 0 0 14px; overflow: hidden; border: 1.5px solid var(--px-line); border-radius: var(--px-r-lg); background: var(--px-surface); text-align: center; transition: border-color var(--px-fast) var(--px-ease), transform var(--px-fast) var(--px-ease), box-shadow var(--px-fast) var(--px-ease); }
html body.app-site .hj-type img { width: 100%; height: 84px; object-fit: cover; }
html body.app-site .hj-type svg { width: 22px; height: 22px; margin-top: -26px; padding: 6px; box-sizing: content-box; border-radius: 12px; background: var(--px-surface); color: var(--px-muted); box-shadow: var(--px-shadow-sm); }
html body.app-site .hj-type strong { font-size: .875rem; font-weight: 600; }
html body.app-site .hj-type:hover > span { transform: translateY(-2px); }
html body.app-site .hj-type input:checked + span { border-color: var(--px-navy); box-shadow: 0 0 0 3px var(--px-navy-soft); }
html body.app-site .hj-type input:checked + span svg { color: var(--px-navy); }
html body.app-site .hj-type input:focus-visible + span { outline: 2px solid var(--px-blue); outline-offset: 2px; }
[data-bs-theme="dark"] body.app-site .hj-type input:checked + span { border-color: #e8eef7; }
[data-bs-theme="dark"] body.app-site .hj-type input:checked + span svg { color: #fff; }
html body.app-site .hj-services { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; border: 0; }
html body.app-site .hj-services legend { width: 100%; font-size: .8125rem; font-weight: 600; margin-bottom: 6px; }
html body.app-site .hj-chip { position: relative; cursor: pointer; }
html body.app-site .hj-chip input { position: absolute; inset: 0; opacity: 0; }
html body.app-site .hj-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--px-line); border-radius: var(--px-r-pill); background: var(--px-surface); font-size: .875rem; transition: background var(--px-fast) var(--px-ease); }
html body.app-site .hj-chip input:checked + span { border-color: var(--px-navy); background: var(--px-navy); color: #fff; }
html body.app-site .hj-chip input:checked + span::before { content: "✓"; }
html body.app-site .hj-chip input:focus-visible + span { outline: 2px solid var(--px-blue); outline-offset: 2px; }
html body.app-site .hj-drop { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; border: 1.5px dashed color-mix(in srgb, var(--px-muted) 45%, var(--px-line)); border-radius: var(--px-r-lg); background: var(--px-soft); text-align: center; cursor: pointer; }
html body.app-site .hj-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
html body.app-site .hj-drop:focus-within, html body.app-site .hj-drop.is-dragging { border-color: var(--px-navy); background: var(--px-navy-soft); }
html body.app-site .hj-drop small { color: var(--px-muted); max-width: 440px; }
html body.app-site .hj-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
html body.app-site .hj-gallery li { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--px-r); background: var(--px-soft); }
html body.app-site .hj-gallery img { width: 100%; height: 100%; object-fit: cover; }
html body.app-site .hj-gallery li.is-busy { display: grid; place-items: center; color: var(--px-muted); font-size: .8125rem; opacity: .7; }
html body.app-site .hj-gallery li.is-dragging { opacity: .4; }
html body.app-site .hj-photo-name { display: flex; gap: 6px; align-items: center; justify-content: center; height: 100%; padding: 8px; color: var(--px-muted); font-size: .75rem; text-align: center; overflow-wrap: anywhere; }
html body.app-site .hj-photo-name svg { width: 16px; height: 16px; flex: none; }
html body.app-site .hj-cover { position: absolute; top: 8px; left: 8px; display: none; padding: 3px 9px; border-radius: 999px; background: var(--px-gold); color: var(--px-navy); font-size: .6875rem; font-weight: 700; }
html body.app-site .hj-gallery li.is-cover .hj-cover { display: block; }
html body.app-site .hj-photo-tools { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px; }
html body.app-site .hj-photo-tools button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(25,35,43,.78); color: #fff; font-size: 1rem; line-height: 1; }
html body.app-site .hj-photo-tools button:last-child { background: rgba(176,42,55,.86); }
html body.app-site .hj-password { position: relative; }
html body.app-site .hj-password .form-control { padding-right: 46px; }
html body.app-site .hj-reveal { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--px-muted); transform: translateY(-50%); }
html body.app-site .hj-reveal[aria-pressed="true"] { color: var(--px-navy); background: var(--px-soft); }
html body.app-site .hj-reveal svg { width: 18px; height: 18px; }
html body.app-site .hj-login-email strong { display: block; padding: 10px 14px; border-radius: var(--px-r); background: var(--px-soft); overflow-wrap: anywhere; }
html body.app-site .hj-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; }
html body.app-site .hj-actions .btn { min-height: 48px; padding-inline: 22px; display: inline-flex; gap: 8px; align-items: center; }
html body.app-site .hj-actions .btn svg { width: 18px; height: 18px; }
html body.app-site .hj-actions .is-loading { opacity: .75; cursor: progress; }
html body.app-site .hj-sent { max-width: 680px; margin: 0 auto; text-align: center; }
html body.app-site .hj-sent-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; background: var(--px-ok-soft); color: var(--px-ok); }
html body.app-site .hj-sent-icon svg { width: 30px; height: 30px; }
html body.app-site .hj-next { display: grid; gap: 10px; margin: 22px 0; padding: 0; list-style: none; text-align: left; }
html body.app-site .hj-next li { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--px-line); border-radius: var(--px-r-lg); }
html body.app-site .hj-next li > span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--px-navy); color: #fff; font-weight: 700; font-size: .875rem; }
html body.app-site .hj-next strong { display: block; }
html body.app-site .hj-next small { color: var(--px-muted); }
@media (max-width: 767.98px) {
  html body.app-site .hj-hero { padding: 22px; border-radius: 24px; }
  html body.app-site .hj-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.app-site .hj-choice-3 { grid-template-columns: 1fr; }
  html body.app-site .hj-steps button > span:last-child { display: none; }
  html body.app-site .hj-steps button[aria-current] > span:last-child { display: inline; }
  html body.app-site .hj-actions .btn { flex: 1; justify-content: center; }
}
/* Four-step affiliation status (request, review, payout account, contract) */
@media (min-width: 768px) { html body.app-site .hc-steps:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html body.app-site .bt-card { max-width: 920px; }
/* Guest: become a host */
html body.app-site .mode-become { display: flex; gap: 14px; align-items: center; margin: 16px 0; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--px-gold) 55%, var(--px-line)); border-radius: var(--px-r-lg); background: color-mix(in srgb, var(--px-gold-soft) 55%, var(--px-surface)); color: var(--px-text); text-decoration: none; transition: transform var(--px-fast) var(--px-ease); }
html body.app-site .mode-become:hover { transform: translateY(-1px); }
html body.app-site .mode-become-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--px-navy); color: #fff; }
html body.app-site .mode-become-icon svg { width: 22px; height: 22px; }
html body.app-site .mode-become strong { display: block; font-size: .9375rem; }
html body.app-site .mode-become small { color: var(--px-muted); font-size: .8125rem; }
html body.app-site .mode-become-go { margin-left: auto; color: var(--px-muted); }
html body.app-site .mode-become-go svg { width: 18px; height: 18px; }

/* ===== Sign in, sign up and recovery ===== */
html body.app-site .au-page { max-width: 1040px; }
html body.app-site .au-layout { display: grid; gap: 22px; align-items: stretch; }
@media (min-width: 900px) { html body.app-site .au-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); } }
html body.app-site .au-aside { display: none; padding: 36px; border-radius: var(--px-r-xl); background: linear-gradient(150deg, var(--px-navy) 0%, var(--px-navy-2) 100%); color: #fff; }
@media (min-width: 900px) { html body.app-site .au-aside { display: flex; flex-direction: column; justify-content: center; } }
html body.app-site .au-aside .mx-eyebrow { color: var(--px-gold); }
html body.app-site .au-aside h2 { margin: 8px 0 22px; font-size: 1.9rem; line-height: 1.2; color: #fff; }
html body.app-site .au-aside ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
html body.app-site .au-aside li { display: flex; gap: 12px; align-items: center; color: rgba(255,255,255,.86); font-size: .9375rem; }
html body.app-site .au-aside li span { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: rgba(232,187,97,.16); color: var(--px-gold); }
html body.app-site .au-aside li svg { width: 18px; height: 18px; }
html body.app-site .au-card { max-width: none; margin: 0; padding: 32px; }
html body.app-site .au-head { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
html body.app-site .au-head h1 { margin: 0; font-size: 1.6rem; }
html body.app-site .au-head p { margin: 2px 0 0; color: var(--px-muted); font-size: .9rem; }
html body.app-site .au-head-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 15px; background: var(--px-navy-soft); color: var(--px-navy); }
[data-bs-theme="dark"] body.app-site .au-head-icon { color: #fff; }
html body.app-site .au-head-icon svg { width: 22px; height: 22px; }
html body.app-site .au-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--px-muted); font-size: .8125rem; }
html body.app-site .au-or::before, html body.app-site .au-or::after { content: ""; flex: 1; height: 1px; background: var(--px-line); }
html body.app-site .au-form { display: grid; gap: 14px; }
html body.app-site .au-field .form-label { font-size: .8125rem; font-weight: 600; margin-bottom: 6px; }
html body.app-site .au-input { position: relative; }
html body.app-site .au-input .form-control { padding-left: 44px; min-height: 50px; }
html body.app-site .au-input-icon { position: absolute; top: 50%; left: 14px; display: flex; color: var(--px-muted); transform: translateY(-50%); pointer-events: none; }
html body.app-site .au-input-icon svg { width: 18px; height: 18px; }
html body.app-site .au-password .form-control { padding-right: 48px; }
html body.app-site .au-reveal { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--px-muted); transform: translateY(-50%); }
html body.app-site .au-reveal[aria-pressed="true"] { background: var(--px-soft); color: var(--px-navy); }
html body.app-site .au-reveal svg { width: 18px; height: 18px; }
html body.app-site .au-msg { display: block; min-height: 0; margin-top: 4px; color: var(--px-err); font-size: .78rem; }
html body.app-site .au-field.is-invalid .form-control { border-color: var(--px-err); box-shadow: 0 0 0 3px var(--px-err-soft); }
html body.app-site .au-field.is-valid .form-control { border-color: color-mix(in srgb, var(--px-ok) 55%, var(--px-line)); }
html body.app-site .au-rules { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -6px 0 0; padding: 0; list-style: none; color: var(--px-muted); font-size: .78rem; }
html body.app-site .au-rules li { display: inline-flex; align-items: center; gap: 5px; }
html body.app-site .au-rules svg { width: 14px; height: 14px; opacity: .35; }
html body.app-site .au-rules li.is-ok { color: var(--px-ok); }
html body.app-site .au-rules li.is-ok svg { opacity: 1; }
html body.app-site .au-forgot { margin: -8px 0 0; text-align: right; font-size: .8125rem; }
html body.app-site .au-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--px-r); background: var(--px-soft); color: var(--px-muted); font-size: .8125rem; line-height: 1.5; }
html body.app-site .au-note svg { flex: none; width: 17px; height: 17px; margin-top: 1px; }
html body.app-site .au-submit { min-height: 52px; font-size: 1rem; }
html body.app-site .au-submit.is-loading { opacity: .75; cursor: progress; }
html body.app-site .au-alt { margin-top: 20px; text-align: center; font-size: .9rem; color: var(--px-muted); }
html body.app-site .au-alt p { margin: 0 0 14px; }
html body.app-site .au-alt a { font-weight: 600; }
html body.app-site .au-host { margin: 0; text-align: left; }
@media (max-width: 575.98px) { html body.app-site .au-card { padding: 22px 18px; } }