/*
Theme Name: Listo v2
Theme URI: https://listo.ph
Author: Listo
Description: Listo v2 — Airbnb-simplicity layout and UX, Listo brand identity. Staycation booking platform for Shore Residences, Pasay City.
Version: 1.7.87
Text Domain: listo-v2
*/

/* ========================================================================
   NEXT469 — Public marketplace canvas + uniform marketplace content
   Keep the public desktop canvas flush to the viewport edge (no artificial
   reserved scrollbar gutter) and use one shared content width across
   Parking, Experiences, and Services. Coming-soon cards use one common
   inner width so the three marketplace pages read as one system.
   ======================================================================== */
.listo-parking-container,
.listo-marketplace-container {
  width: min(1180px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}
.listo-marketplace-empty-card,
.listo-marketplace-empty-card--large {
  max-width: 720px;
}

@media (max-width: 820px) {
  .listo-parking-container,
  .listo-marketplace-container {
    width: min(calc(100% - 32px), 680px);
  }
}

@media (max-width: 560px) {
  .listo-parking-container,
  .listo-marketplace-container {
    width: calc(100% - 24px);
  }
}

/* ========================================================================
   NEXT470 — Remove Parking marketplace intro + unify coming-soon containers
   Experiences and Services use the same content-card canvas and vertical
   rhythm so the marketplace pages read as one consistent system.
   ======================================================================== */
.listo-marketplace-empty-card,
.listo-marketplace-empty-card--large {
  width: 100%;
  max-width: 720px;
  min-height: 360px;
  box-sizing: border-box;
  margin: 20px auto 0;
  padding: 48px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.listo-marketplace-empty-card--large {
  padding: 48px 30px;
}

@media (max-width: 560px) {
  .listo-marketplace-empty-card,
  .listo-marketplace-empty-card--large {
    min-height: 0;
    padding: 40px 22px;
  }
}




/* ==========================================================================
   Design tokens — from Listo v2 design token sheet
   ========================================================================== */

:root {
  --listo-green: #2196F3;
  --listo-green-dark: #1976D2;
  --listo-green-tint: #EAF5FF;
  --ink: #1A1A1A;
  --ink-muted: #6B6B6B;
  --border: #E4E4E4;
  --surface: #FFFFFF;
  --surface-alt: #F7F7F7;
  --error: #E53935;

  /* ======================================================================
     Listo semantic process palette — NEXT894
     Color communicates meaning, not decoration.
     ====================================================================== */
  --listo-semantic-attention: #E53935;
  --listo-semantic-attention-tint: #FDECEC;
  --listo-semantic-attention-dark: #B71C1C;

  --listo-semantic-pending: #F59E0B;
  --listo-semantic-pending-tint: #FFF7E6;
  --listo-semantic-pending-dark: #B45309;

  --listo-semantic-confirmed: #2196F3;
  --listo-semantic-confirmed-tint: #EAF4FE;
  --listo-semantic-confirmed-dark: #1565C0;

  --listo-semantic-positive: #16A34A;
  --listo-semantic-positive-tint: #ECFDF3;
  --listo-semantic-positive-dark: #166534;

  --listo-semantic-negative: #DB2777;
  --listo-semantic-negative-tint: #FDF2F8;
  --listo-semantic-negative-dark: #9D174D;

  --listo-semantic-neutral: #64748B;
  --listo-semantic-neutral-tint: #F1F5F9;
  --listo-semantic-neutral-dark: #334155;

  --radius: 12px;
  --radius-sm: 8px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gutter: 24px;
  --section-pad: 64px;
}

@media (max-width: 768px) {
  :root {
    --section-pad: 32px;
  }
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

/* Keep the document canvas width stable as routes change. Desktop browsers
   otherwise add/remove the vertical scrollbar gutter depending on whether
   the destination page happens to scroll, which makes centered page content
   appear to jump horizontally from one page to another. Modern browsers
   reserve the gutter without forcing a visible scrollbar on mobile. */
html { scrollbar-gutter: auto; }

@supports not (scrollbar-gutter: stable) {
  html { overflow-y: auto; }
}

*, *::before, *::after { box-sizing: border-box; }

/* Mobile Safari/Chrome apply a default blue/gray tap-highlight
   overlay to whatever's tapped, often bleeding onto a larger
   ancestor container than the actual button/link that was pressed
   (e.g. a small icon button sitting inside a bigger card link) — per
   explicit direction, applied globally here rather than patched onto
   individual elements one at a time as each one gets noticed, since
   this affects any tappable element site-wide, not just a specific
   few. Harmless on non-interactive elements — there's nothing to
   highlight on tap for something that isn't actually tappable, so
   this has no visual effect anywhere except where it was actually
   fixing something. */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/*
 * Standing rule: no underline on clickable text enclosed in a button
 * or box (buttons, pills, cards, action links styled as controls).
 * Plain inline hyperlinks in body text or breadcrumb-style navigation
 * trails are a different pattern and are fine to keep underlined —
 * this rule is specifically about anything that reads as a discrete
 * UI control.
 */
a {
  color: inherit;
  text-decoration: none;
}

button, input {
  font-family: inherit;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em 0;
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: 32px; font-weight: 700; }
h2 { font-size: 22px; font-weight: 600; }

.listo-caption {
  font-size: 13px;
  color: var(--ink-muted);
}

.listo-email-inbox-hint,
.listo-email-otp-inbox-hint {
  text-align: center;
  margin-bottom: 16px;
}

.listo-payment-submitted-card .listo-email-inbox-hint {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 12px;
}

.listo-cohost-invite-form .listo-email-inbox-hint,
.listo-support-success__copy .listo-email-inbox-hint {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.listo-container {
  max-width: 1200px;
  margin: 0 auto;
}

.listo-main {
  padding: 0 32px;
  display: block;
}

.listo-footer {
  padding: 32px;
  border-top: 1px solid var(--border);
}

/* Footer hidden for any logged-in visitor, on every page — a
   deliberate broadening of what started as an Inbox-only fix (that
   page needing to fill the viewport exactly, since the footer below
   it would get pushed out of view or squeezed in awkwardly when the
   mobile keyboard opens). Per explicit direction, that same "just the
   real content, no footer clutter" treatment now applies everywhere
   once someone's logged in — the footer still shows for logged-out
   visitors browsing the public site. Uses an explicit class from
   listo_v2_body_class() in functions.php rather than guessing at a
   WordPress-generated one, matching the lesson learned from an
   earlier version of this same fix that didn't work correctly. */
body.listo-logged-in .listo-footer {
  display: none;
}

/* Mobile — hidden for everyone here, not just logged-in visitors (who
   already never see it, from the rule above, on any device). Same
   900px breakpoint this project consistently uses elsewhere for the
   desktop/mobile switch (the sidebar/sticky-bar swap, the sub-nav
   hide), not a separate, one-off value. */
@media (max-width: 900px) {
  .listo-footer { display: none; }
}

@media (max-width: 480px) {
  .listo-main { padding: 0 24px; }
  .listo-footer { padding: 24px; }
  .listo-inbox { margin: 0 -24px; }
  /* Same technique as .listo-inbox directly above — matched to this
     same breakpoint specifically so the margin-cancel math is always
     exactly correct against .listo-main's own padding change here,
     rather than a separate media query risking drifting out of sync
     with it (the mistake in an earlier version of this same fix,
     which assumed 24px padding at a 600px breakpoint where the real
     padding was still 32px). Padding re-added ON the row itself so
     the first card still visually aligns with the rest of the page's
     content, while the scrollable area is genuinely the full
     viewport width underneath it. */
  .listo-home-row-wrap { margin: 0 -24px; }
  .listo-home-row { padding: 0 24px; }
}

.listo-section {
  padding: var(--section-pad) 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.listo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.listo-btn:focus-visible {
  outline: 2px solid var(--listo-green-dark);
  outline-offset: 2px;
}

.listo-btn--primary {
  background: var(--listo-green);
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.listo-btn--primary:hover { background: var(--listo-green-dark); }
.listo-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }

.listo-btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.listo-btn--outline:hover { background: var(--surface-alt); }

/* Light teal fill — for a button that needs to read as clickable at a
   glance (Show more, Show all amenities, Message the host) without
   competing with the primary green CTA for attention. Per explicit
   direction: plain white/outline made these too easy to mistake for
   plain text. */
.listo-btn--tinted {
  background: var(--listo-green-tint);
  color: var(--listo-green-dark);
  border-color: transparent;
}
.listo-btn--tinted:hover { background: #DCF0E8; }

.listo-btn--block { width: 100%; }

/* Checkout mobile-number controls: make the save action clearly primary,
   while the saved-state edit action is deliberately neutral. */
.listo-checkout-save-phone-btn {
  background: var(--listo-green);
  color: #fff;
  border-color: var(--listo-green);
}
.listo-checkout-save-phone-btn:hover { background: var(--listo-green-dark); }
.listo-checkout-edit-phone-btn {
  background: #eee;
  color: #111;
  border-color: #ddd;
}
.listo-checkout-edit-phone-btn:hover { background: #e5e5e5; }

/* ==========================================================================
   Header
   ========================================================================== */

.listo-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.listo-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 14px 28px;
  max-width: 1200px;
  margin: 0 auto;
}

.listo-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  flex-shrink: 0;
}

.listo-logo img { height: 32px; width: auto; }

.listo-auth-trigger {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.listo-auth-trigger:hover { border-color: var(--ink); }

/* Logged-out header — "Become a Host" prominent top-right, plus a
   hamburger menu beside it (Become a Host again, with more context,
   plus Log in or sign up), matching Airbnb's own logged-out layout
   per explicit direction. Their globe/language icon is deliberately
   not included, per explicit direction. Visual language matches the
   existing account dropdown further below (.listo-account-trigger/
   .listo-account-dropdown) rather than introducing a new, separate
   style for what's functionally the same kind of control. */
.listo-header__logged-out-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.listo-become-host-btn {
  background: transparent;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.listo-become-host-btn:hover { background: var(--surface-alt); }

.listo-hamburger-menu {
  position: relative;
}
.listo-hamburger-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
}
.listo-hamburger-trigger:hover { border-color: var(--ink); }
.listo-hamburger-trigger svg { width: 18px; height: 18px; }

.listo-hamburger-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(26,26,26,0.12);
  overflow: hidden;
  z-index: 200;
}
.listo-hamburger-dropdown.is-open { display: block; }

.listo-hamburger-dropdown__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: none;
  cursor: pointer;
}
.listo-hamburger-dropdown__item:hover { background: var(--surface-alt); }
.listo-hamburger-dropdown__item + .listo-hamburger-dropdown__item {
  border-top: 1px solid var(--border);
}
.listo-hamburger-dropdown__item--host {
  align-items: flex-start;
}
.listo-hamburger-dropdown__item--host strong {
  display: block;
  margin-bottom: 2px;
}
.listo-hamburger-dropdown__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--ink);
}
.listo-hamburger-dropdown__icon svg { width: 16px; height: 16px; }

/* Account dropdown — replaces two crowded pill buttons with one control */
.listo-header__account-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.listo-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.listo-mode-toggle:hover { background: var(--surface-alt); border-color: var(--listo-green); }
.listo-mode-toggle__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--error);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.4;
}
.listo-mode-toggle__badge svg { width: 11px; height: 11px; }

/* Standalone "unread in your other mode" notice — same oblong pill
   shape as the mode toggle it sits beside, per explicit direction,
   but a distinct control: this one links straight to the other
   mode's Inbox, not to its dashboard. Red/urgent styling (unlike the
   neutral toggle) since this specifically means "something's waiting
   for you" — matching how the account avatar badge and dropdown
   Inbox badge already use --error for the same reason. */
.listo-other-mode-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--error);
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.listo-other-mode-notice:hover { opacity: 0.9; }
.listo-other-mode-notice svg { width: 15px; height: 15px; }
@media (max-width: 480px) {
  .listo-mode-toggle { font-size: 13px; padding: 6px 10px; }
  .listo-other-mode-notice { font-size: 12px; padding: 6px 10px; }
}

.listo-dashboard-stat strong { font-size: 32px; display: block; }

.listo-account-menu {
  position: relative;
}

.listo-account-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  cursor: pointer;
  color: var(--ink);
}
.listo-account-trigger:hover { border-color: var(--ink); }

.listo-account-avatar {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--listo-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.listo-account-avatar__badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--error);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
}

.listo-account-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.listo-account-caret {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.listo-account-trigger[aria-expanded="true"] .listo-account-caret {
  transform: rotate(180deg);
}

.listo-account-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 188px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(26,26,26,0.12);
  overflow: hidden;
  z-index: 200;
}
.listo-account-dropdown.is-open { display: block; }

.listo-account-dropdown__item {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.listo-account-dropdown__item:hover { background: var(--surface-alt); }
.listo-account-dropdown__item + .listo-account-dropdown__item {
  border-top: 1px solid var(--border);
}

@media (max-width: 480px) {
  .listo-account-name { display: none; }
  .listo-account-trigger { padding: 4px; }
}

@media (max-width: 480px) {
  .listo-header__inner { padding: 12px 24px; }
  .listo-logo { font-size: 16px; }
  .listo-logo img { height: 26px; }
  /* .listo-auth-trigger's own mobile override removed here — that
     class no longer appears on any visible element in the logged-out
     header (replaced by .listo-become-host-btn/.listo-hamburger-
     trigger, still desktop-only for now per explicit direction —
     mobile for this new layout is its own, separate next step). */
}

/* ==========================================================================
   Auth modal
   ========================================================================== */

.listo-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.listo-modal-overlay.is-open { display: flex; }

.listo-modal {
  background: var(--surface);
  border-radius: var(--radius);
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
}

.listo-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 4px;
}
.listo-modal__close:hover { color: var(--ink); }

.listo-modal h2 {
  font-size: 20px;
  margin-bottom: 24px;
  text-align: center;
}

.listo-modal__step { display: none; }
.listo-modal__step.is-active { display: block; }

.listo-field {
  margin-bottom: 16px;
}

.listo-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.listo-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--ink);
}

.listo-password-field {
  position: relative;
}

.listo-password-field input {
  padding-right: 44px;
}

.listo-password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.listo-password-toggle:hover { color: var(--ink); }
.listo-password-toggle svg { width: 20px; height: 20px; display: block; }

.listo-field input:focus {
  outline: none;
  border-color: var(--listo-green);
  box-shadow: 0 0 0 3px var(--listo-green-tint);
}

.listo-char-count {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 6px;
}
.listo-char-count.is-over-recommended { color: var(--error); }
.listo-char-count__hint { margin-left: 4px; }

.listo-field-error {
  color: var(--error);
  font-size: 13px;
  margin-top: 6px;
  display: none;
}
.listo-field-error.is-visible { display: block; }

.listo-decline-notice {
  background: #FDF0F0;
  border: 1px solid #F3C6C6;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 16px;
  color: var(--error);
}
.listo-decline-notice p {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

/* Subtle, non-blocking reminder — a gentle nudge, not a problem, so
   this stays neutral rather than reusing the error-red decline-notice
   colors above. Only ever shown once there's an actual paid booking
   waiting on it. */
.listo-payout-reminder-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 14px;
}
.listo-payout-reminder-banner a {
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Small, centered modal for a single informational message — not the
   full-screen overlay pattern used elsewhere (Photo Tour, amenities),
   since there's no browsable content here, just one message and two
   actions. */
.listo-small-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(26,26,26,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.listo-small-modal {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 400px;
  width: 100%;
}
.listo-small-modal h3 { margin-top: 0; margin-bottom: 8px; }

.listo-method-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.listo-otp-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.listo-otp-inputs input {
  width: 44px;
  height: 52px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  padding: 0;
}

.listo-modal__back {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 16px;
  padding: 0;
}
.listo-modal__back:hover { color: var(--ink); }

.listo-signup-terms__title {
  margin: 0 0 8px;
  text-align: center;
  font-size: 22px;
}
.listo-signup-terms__intro {
  text-align: center;
  margin-bottom: 20px;
}
.listo-signup-terms__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-alt);
  line-height: 1.45;
  cursor: pointer;
  margin-bottom: 14px;
}
.listo-signup-terms__checkbox input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.listo-signup-terms__checkbox a {
  color: var(--listo-green-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.listo-photo-thumb__directory-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 4px 7px;
  border-radius: 7px;
  background: var(--listo-green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
}
.listo-photo-thumb--directory-selected { border-color: var(--listo-green) !important; }
.listo-photo-directory-btn {
  position: absolute;
  z-index: 3;
  left: 6px;
  right: 38px;
  top: 6px;
  width: auto;
  margin: 0;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 7px;
  background: rgba(26,26,26,.72);
  color: #fff;
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.listo-photo-directory-btn:hover { background: rgba(26,26,26,.86); }
.listo-photo-directory-btn.is-selected,
.listo-photo-thumb--directory-selected .listo-photo-directory-btn {
  background: var(--listo-green);
  border-color: var(--listo-green);
}
.listo-photo-directory-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.listo-modal__footnote {
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 20px;
}

/* Legal links in the authentication modal are true inline hyperlinks.
   Keep the site's default control styling elsewhere, but make these
   two legal destinations visibly identifiable as links. */
.listo-modal__footnote a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.listo-modal__resend {
  text-align: center;
  font-size: 13px;
  margin-top: 8px;
}

.listo-modal__resend button {
  background: none;
  border: none;
  color: var(--listo-green-dark);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.listo-modal__resend button:disabled {
  color: var(--ink-muted);
  cursor: not-allowed;
}

.listo-modal__loading {
  text-align: center;
  padding: 8px 0;
  font-size: 13px;
  color: var(--ink-muted);
  display: none;
}
.listo-modal__loading.is-visible { display: block; }

/* ==========================================================================
   Listing form
   ========================================================================== */

.listo-listing-form { max-width: 720px; }

.listo-form-section {
  padding: 24px 20px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.listo-form-section h2 { margin-bottom: 16px; }

/* The booking mode is a high-impact host decision, so surface it
   prominently at the top of the listing form instead of burying it
   inside the general Booking rules section. */
.listo-form-section--booking-choice {
  border: 2px solid var(--listo-green);
  background: var(--listo-green-tint);
  box-shadow: 0 4px 14px rgba(79, 169, 138, 0.12);
  padding: 26px 22px;
}
.listo-booking-choice__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: var(--listo-green);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.listo-booking-choice__intro {
  margin: -4px 0 18px;
  max-width: 600px;
}
.listo-booking-choice__toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(79, 169, 138, 0.45);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.listo-booking-choice__toggle:hover {
  border-color: var(--listo-green);
}
.listo-booking-choice__toggle input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--listo-green);
  flex: 0 0 auto;
}
.listo-booking-choice__copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.35;
}
.listo-booking-choice__copy strong {
  font-size: 16px;
  color: var(--ink);
}
.listo-booking-choice__copy span {
  font-size: 14px;
  color: var(--ink-muted);
}
@media (max-width: 480px) {
  .listo-form-section--booking-choice { padding: 22px 16px; }
  .listo-booking-choice__toggle { align-items: flex-start; padding: 15px 14px; }
}

@media (max-width: 480px) {
  .listo-form-section { padding: 20px 16px; }
}

.listo-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  resize: vertical;
}
.listo-textarea:focus {
  outline: none;
  border-color: var(--listo-green);
  box-shadow: 0 0 0 3px var(--listo-green-tint);
}
/* Payout details, once saved — genuinely greyed out (not just
   functionally locked) so it visually reads as "saved," matching
   this project's own surface/muted-text variables rather than
   leaving this to inconsistent browser defaults. */
.listo-textarea:disabled,
.listo-select:disabled {
  background: var(--surface-alt);
  color: var(--ink-muted);
  cursor: not-allowed;
}

.listo-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
}

.listo-field-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 600px) {
  .listo-field-grid { grid-template-columns: repeat(2, 1fr); }
}

.listo-amenity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  .listo-amenity-grid { grid-template-columns: repeat(2, 1fr); }
}

.listo-amenity-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.listo-amenity-checkbox:hover { background: var(--surface-alt); }
.listo-amenity-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--listo-green);
  flex-shrink: 0;
}

.listo-amenity-category-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 20px 0 10px;
}
.listo-amenity-category-heading:first-of-type { margin-top: 0; }

.listo-sleep-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}
.listo-sleep-name {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
}
.listo-sleep-bed-type {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  background: var(--surface);
}
.listo-sleep-remove {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  background: var(--surface-alt);
  border-radius: 50%;
  font-size: 18px;
  color: var(--ink-muted);
  cursor: pointer;
}
.listo-sleep-remove:hover { color: var(--error); }

.listo-sleep-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 12px;
}
.listo-sleep-row__photo {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  position: relative;
}
.listo-sleep-row__photo-preview {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-alt);
}
.listo-sleep-row__photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.listo-sleep-row__photo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  text-align: center;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 4px;
  background: transparent;
  appearance: none;
}
.listo-sleep-row__photo-btn .listo-sleep-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.listo-sleep-row__spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.7);
}
.listo-sleep-row__fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.listo-sleep-row__fields input,
.listo-sleep-row__fields select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.listo-sleep-row__bed-count {
  display: flex;
  gap: 8px;
}
.listo-sleep-row__bed-count select { flex: 1; min-width: 0; }
.listo-sleep-row__bed-count input { width: 60px; flex-shrink: 0; }

.listo-external-cal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.listo-external-cal-row .listo-external-cal-input { flex: 1; min-width: 0; }
.listo-external-cal-remove {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.listo-external-cal-remove:hover { background: var(--surface); color: var(--error); }


/* Keep the file input accessible to JavaScript without relying on
   label activation of a display:none input. */
.listo-photo-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.listo-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.listo-photo-thumb {
  position: relative;
  min-width: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.listo-photo-thumb__image-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.listo-photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listo-photo-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(26,26,26,0.7);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listo-photo-remove:hover { background: var(--error); }

.listo-photo-category {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  border: none;
  border-radius: 6px;
  background: rgba(26,26,26,0.72);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 6px;
  cursor: pointer;
}
.listo-photo-category:focus { outline: 2px solid var(--listo-green); }

.listo-photo-thumb--uploading {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alt);
}

.listo-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--listo-green);
  border-radius: 50%;
  animation: listo-spin 0.7s linear infinite;
}

@keyframes listo-spin {
  to { transform: rotate(360deg); }
}

.listo-btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: listo-spin 0.7s linear infinite;
  margin-right: 8px;
  vertical-align: -2px;
}
.listo-btn--outline .listo-btn-spinner {
  border-color: rgba(26,26,26,0.25);
  border-top-color: var(--ink);
}

.listo-profile-photo-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.listo-profile-photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.listo-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#listo-profile-photo-fallback {
  font-size: 32px;
  font-weight: 700;
  color: var(--ink-muted);
}
.listo-profile-photo .listo-spinner {
  position: absolute;
}

/* Homepage desktop header/search depth — the existing search bar is
   physically moved into the homepage header by homepage.js, so this is
   one shared search component rather than a second copy. The header uses
   a very light grey surface while the search pill stays white. The
   expanded/compact states are deliberately animated so the search bar
   visually morphs into its sticky form instead of snapping between two
   layouts. Scoped to the homepage header only. */
@media (min-width: 901px) {
  .listo-header--homepage {
    /* NEXT276: blend the desktop logo/control band into the same pale
       blue-white atmosphere used behind the homepage search bar. */
    background: #F7FBFF;
    /* The hero is absolutely positioned below the header row. This keeps
       the header height and the search position independently animatable. */
    padding-bottom: 112px;
    transition: padding-bottom 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.35s ease;
  }

  .listo-header--homepage .listo-header__inner {
    position: relative;
    /* The search hero sits above the header row so its compact fields remain
       clickable. Keep the header row itself in a higher stacking context,
       but let its transparent area pass pointer events through to the search.
       The actual logo / host / account controls opt back into pointer events. */
    z-index: 5;
    pointer-events: none;
    transition: min-height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                padding 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .listo-header--homepage .listo-header__inner > * {
    pointer-events: auto;
  }

  /* When the logged-out hamburger is open, its dropdown must sit in
     front of the homepage search hero. The inner header is raised as
     a whole, but its transparent area does not steal pointer events
     from the search hero underneath. Only the actual header controls
     remain interactive. */
  .listo-header--homepage.listo-header--menu-open .listo-header__inner {
    z-index: 6;
    pointer-events: none;
  }
  .listo-header--homepage.listo-header--menu-open .listo-header__inner > * {
    pointer-events: auto;
  }
  .listo-header--homepage.listo-header--menu-open .listo-hamburger-menu,
  .listo-header--homepage.listo-header--menu-open .listo-hamburger-menu * {
    pointer-events: auto;
  }

  .listo-header--homepage .listo-hero {
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    z-index: 4;
    background: transparent;
    padding: 18px 0 28px;
    pointer-events: auto;
    border-top: 0;
    transform: translateY(0) scale(1);
    transform-origin: center top;
    opacity: 1;
    transition: top 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                padding 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.35s ease;
    will-change: top, padding, transform;
  }

  .listo-header--homepage .listo-search-bar-wrap,
  .listo-header--homepage .listo-search-bar {
    width: min(860px, calc(100vw - 80px));
    max-width: none;
    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                max-width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.35s ease;
  }

  .listo-header--homepage .listo-search-bar {
    background: #FFFFFF;
  }

  .listo-header--homepage .listo-search-trigger {
    transition: padding 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                background-color 0.15s ease;
  }

  .listo-header--homepage .listo-search-trigger__label {
    max-height: 20px;
    opacity: 1;
    transform: translateY(0);
    overflow: hidden;
    transition: max-height 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.28s ease,
                transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .listo-header--homepage .listo-search-trigger__value {
    transition: font-size 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
                font-weight 0.25s ease,
                color 0.2s ease;
  }

  .listo-header--homepage .listo-search-bar__submit {
    transition: width 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
                height 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
                border-radius 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
                padding 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
                background-color 0.15s ease;
  }

  .listo-header--homepage.is-scrolled {
    padding-bottom: 0;
    box-shadow: 0 1px 8px rgba(26,26,26,0.08);
  }

  .listo-header--homepage.is-scrolled .listo-header__inner {
    min-height: 84px;
  }

  .listo-header--homepage.is-scrolled .listo-hero {
    top: 0;
    padding: 14px 0 16px;
    transform: translateY(0) scale(1);
  }

  .listo-header--homepage.is-scrolled .listo-search-bar-wrap,
  .listo-header--homepage.is-scrolled .listo-search-bar {
    width: min(560px, calc(100vw - 420px));
    max-width: none;
  }

  .listo-header--homepage.is-scrolled .listo-search-bar {
    height: 54px;
    padding: 4px 5px;
    box-shadow: 0 2px 10px rgba(26,26,26,0.10);
  }

  .listo-header--homepage.is-scrolled .listo-search-trigger {
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;
  }

  .listo-header--homepage.is-scrolled .listo-search-trigger__label {
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
  }

  .listo-header--homepage.is-scrolled .listo-search-trigger__value {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
  }

  .listo-header--homepage.is-scrolled .listo-search-bar__submit {
    width: 44px;
    height: 44px;
  }

  .listo-header--homepage.is-scrolled .listo-search-bar__submit-label {
    display: none;
  }

  /* The compact bar is restored to its expanded layout before any
     field panel opens. The panel itself keeps the existing container
     and positioning logic. */
  .listo-header--homepage.is-scrolled .listo-search-panel {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .listo-header--homepage,
  .listo-header--homepage .listo-header__inner,
  .listo-header--homepage .listo-hero,
  .listo-header--homepage .listo-search-bar-wrap,
  .listo-header--homepage .listo-search-bar,
  .listo-header--homepage .listo-search-trigger,
  .listo-header--homepage .listo-search-trigger__label,
  .listo-header--homepage .listo-search-trigger__value,
  .listo-header--homepage .listo-search-bar__submit {
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Homepage / directory
   ========================================================================== */

.listo-hero {
  background: var(--surface);
  padding: 24px 0;
}

.listo-hero__title {
  text-align: center;
  margin-bottom: 24px;
}

.listo-search-bar-wrap {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.listo-search-bar {
  position: relative;
  display: flex;
  align-items: stretch;
  max-width: 700px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(26,26,26,0.06);
  transition: box-shadow 0.2s ease;
}
.listo-search-bar.has-open-panel {
  box-shadow: 0 4px 20px rgba(26,26,26,0.14);
}

.listo-search-trigger {
  flex: 1;
  padding: 10px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease;
  position: relative;
}
/* :first-of-type, not :first-child — the form has 4 hidden <input>
   elements (location/checkin/checkout/guests) before the Where
   button, so Where is the form's 5th child, not its 1st. :first-child
   never excluded it from getting a divider, since it isn't literally
   the first child at all — it's just the first VISIBLE section.
   :first-of-type correctly finds the first <button> among <button>
   siblings, ignoring the preceding <input> elements entirely. */
.listo-search-trigger:not(:first-of-type)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--border);
}
.listo-search-trigger:hover { background: var(--surface-alt); }
.listo-search-trigger:hover::before,
.listo-search-trigger.is-active::before,
.listo-search-trigger.is-active + .listo-search-trigger::before {
  opacity: 0;
}
/* Active field lifts white with a shadow above the (now dimmed) rest
   of the pill — matching Airbnb's own real focus treatment exactly,
   not just a generic highlight. */
.listo-search-bar.has-open-panel .listo-search-trigger { background: var(--surface-alt); }
.listo-search-trigger.is-active {
  background: var(--surface) !important;
  box-shadow: 0 3px 12px rgba(26,26,26,0.15);
  z-index: 2;
}
.listo-search-trigger__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.listo-search-trigger__value {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.listo-search-trigger.has-value .listo-search-trigger__value { color: var(--ink); }

.listo-search-bar__submit {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--listo-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  align-self: center;
  padding: 0;
  transition: width 0.2s ease, border-radius 0.2s ease, background-color 0.15s ease, padding 0.2s ease;
  overflow: hidden;
  white-space: nowrap;
}
.listo-search-bar__submit svg { width: 20px; height: 20px; flex-shrink: 0; }
.listo-search-bar__submit:hover { background: var(--listo-green-dark); }
.listo-search-bar__submit-label { display: none; font-size: 15px; font-weight: 700; }
/* Morphs from a plain circular icon into a pill with "Search" text
   the moment any field becomes active — copying Airbnb's own real
   micro-interaction, not just the idle-state appearance. */
.listo-search-bar.has-open-panel .listo-search-bar__submit {
  width: auto;
  padding: 0 22px 0 18px;
  border-radius: 999px;
}
.listo-search-bar.has-open-panel .listo-search-bar__submit-label { display: inline; }

/* Dropdown panels — shared base */
.listo-search-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 8px 28px rgba(26,26,26,0.16);
  padding: 24px;
  z-index: 10;
  width: 380px;
  max-width: 90vw;
  /* Caps how tall this panel can ever get and lets only the
     destinations list itself (below) scroll within that cap — a long
     suggested-destinations list was otherwise free to grow past the
     bottom of the screen, with no way to reach whatever fell below
     the fold. The search input above the list stays fixed in place
     either way. */
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.listo-search-dest-list {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  /* A little breathing room so the last item's focus/hover state
     isn't flush against the scroll edge. */
  padding-bottom: 4px;
}
/* Once reparented into the full-screen mobile modal (see homepage.js),
   a panel needs to flow as plain content instead — the desktop
   absolute-positioning and card chrome (border/shadow/rounded corners)
   would otherwise resolve against the modal's own position:fixed
   ancestor and render in the wrong place entirely, since the desktop
   left offset was computed for a completely different context. */
.listo-search-mobile-modal .listo-search-panel {
  position: static;
  width: 100%;
  max-width: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  /* The 70vh cap + scrolling destinations list above is a desktop-
     dropdown concern specifically — once reparented into this
     full-screen mobile modal, the modal's own body is what scrolls
     instead, so this resets back to unconstrained rather than
     potentially double-clipping content within an already-scrollable
     ancestor. */
  max-height: none;
  overflow: visible;
}
.listo-search-panel--wide { width: auto; min-width: 640px; }
.listo-search-mobile-modal .listo-search-panel--wide { min-width: 0; }

.listo-search-panel__eyebrow {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
}

.listo-search-dest {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.listo-search-dest:hover { background: var(--surface-alt); }
.listo-search-dest__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--listo-green-tint);
  color: var(--listo-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.listo-search-dest__icon svg { width: 22px; height: 22px; }
.listo-search-dest__icon--nearby { background: var(--surface-alt); color: var(--ink); }
.listo-search-dest__name { display: block; font-size: 14.5px; font-weight: 600; }
.listo-search-dest__desc { display: block; font-size: 13px; color: var(--ink-muted); }

/* When panel */
.listo-search-when-toggle {
  display: flex;
  gap: 8px;
  background: var(--surface-alt);
  border-radius: 999px;
  padding: 4px;
  width: fit-content;
  margin: 0 auto 20px;
}
.listo-search-when-toggle button {
  border: none;
  background: transparent;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-muted);
  cursor: pointer;
}
.listo-search-when-toggle button.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.listo-search-cal-nav { position: relative; height: 0; }
.listo-search-cal-nav button {
  position: absolute;
  top: -4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}
#listo-search-cal-prev { left: 0; }
#listo-search-cal-next { right: 0; }
.listo-search-cal-nav svg { width: 16px; height: 16px; }

.listo-search-cal-months {
  display: flex;
  gap: 40px;
}
.listo-search-cal-month { flex: 1; }
.listo-search-cal-month__title {
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 14px;
}
.listo-search-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.listo-search-cal-grid__dow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
  padding-bottom: 6px;
}
.listo-search-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13.5px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--ink);
}
.listo-search-cal-day:hover:not(.is-disabled) { background: var(--surface-alt); }
.listo-search-cal-day.is-disabled { color: var(--border); cursor: default; }
.listo-search-cal-day.is-empty { visibility: hidden; }
.listo-search-cal-day.is-selected { background: var(--listo-green); color: #fff; }
.listo-search-cal-day.is-in-range { background: var(--listo-green-tint); border-radius: 0; }
.listo-search-cal-day.is-range-start { border-radius: 50% 0 0 50%; }
.listo-search-cal-day.is-range-end { border-radius: 0 50% 50% 0; }

/* Who panel */
.listo-search-who-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.listo-search-who-row--last { border-bottom: none; padding-bottom: 4px; }
.listo-search-who-row__title { font-size: 15px; font-weight: 600; }
.listo-search-who-row__not-allowed {
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-muted);
  margin-left: 4px;
}
.listo-search-who-row--disabled { opacity: 0.5; }
.listo-search-who-pets-link { text-decoration: underline; cursor: default; }
.listo-search-who-stepper {
  display: flex;
  align-items: center;
  gap: 14px;
}
.listo-search-who-stepper button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.listo-search-who-stepper button:disabled { opacity: 0.3; cursor: default; }
.listo-search-who-stepper button:not(:disabled):hover { border-color: var(--ink); }
.listo-search-who-stepper span { min-width: 16px; text-align: center; font-size: 14.5px; }

/* Collapsed "Search stays" pill — mobile only, opens the full-screen
   modal takeover rather than an inline-expanding version of the
   desktop bar. */
.listo-search-collapsed {
  display: none;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(26,26,26,0.06);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.listo-search-collapsed svg {
  width: 18px;
  height: 18px;
  color: var(--ink);
  flex-shrink: 0;
}
/* Hidden by default — this element is only ever rendered in the PHP
   when the search-results view's own $GLOBALS flag is set (never on
   the homepage), but that alone doesn't limit it to mobile — without
   this, it would still show at desktop widths too, where the full,
   already-expanded search form makes it redundant. Shown only within
   the mobile-scoped rule further down. */
.listo-search-back {
  display: none;
}

/* Hidden by default for the same reason as .listo-search-back above —
   only ever rendered when logged out on the search-results view, but
   that alone doesn't limit it to mobile. Shown only within the
   search-results page's own mobile-scoped rule further down. */
.listo-search-results-login-btn {
  display: none;
}

/* Logged-in counterpart — same hidden-by-default reasoning, shown
   only within the same mobile-scoped rule further down. */
.listo-search-results-help-pill {
  display: none;
}

.listo-search-mobile-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.listo-search-mobile-modal__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.listo-search-mobile-modal__header button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.listo-search-mobile-modal__header svg { width: 18px; height: 18px; }
.listo-search-mobile-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 24px;
}
.listo-search-mobile-modal .listo-search-panel__eyebrow { font-size: 15px; margin: 16px 0 12px; }
.listo-search-mobile-modal .listo-search-when-toggle { margin: 0 0 20px; }
.listo-search-mobile-modal .listo-search-cal-months { flex-direction: column; gap: 32px; }

/* Accordion sections — all three visible at once, one expanded with
   full content, the other two collapsed to a single summary row.
   Copied directly from Airbnb's own real mobile behavior rather than
   the full-screen-per-step pattern tried earlier. */
.listo-search-mobile-section {
  border: 1px solid var(--border);
  border-radius: 20px;
  margin-top: 16px;
  overflow: hidden;
}
.listo-search-mobile-section.is-expanded {
  box-shadow: 0 2px 10px rgba(26,26,26,0.08);
}
.listo-search-mobile-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 18px 20px;
  cursor: pointer;
}
.listo-search-mobile-section__label {
  font-size: 13px;
  color: var(--ink-muted);
}
.listo-search-mobile-section.is-expanded .listo-search-mobile-section__label {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.listo-search-mobile-section__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.listo-search-mobile-section__body {
  padding: 0 20px 20px;
}
.listo-search-mobile-section__body .listo-search-panel__eyebrow:first-child { margin-top: 0; }

.listo-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.listo-search-input-wrap svg { width: 18px; height: 18px; color: var(--ink); flex-shrink: 0; }
.listo-search-input-wrap input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  width: 100%;
  color: var(--ink);
}
.listo-search-input-wrap input::placeholder { color: var(--ink-muted); }

.listo-search-mobile-modal__footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}
.listo-search-mobile-modal__footer button:first-child {
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  color: var(--ink);
}
.listo-search-mobile-modal__footer .listo-btn { padding: 12px 28px; }

@media (max-width: 900px) {
  .listo-search-collapsed { display: flex; }
  .listo-search-bar { display: none; }
}

.listo-listing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}
@media (min-width: 480px) {
  .listo-listing-grid { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
}
@media (min-width: 768px) {
  .listo-listing-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1200px) {
  .listo-listing-grid { grid-template-columns: repeat(5, 1fr); }
}

.listo-card {
  display: block;
  color: inherit;
}

.listo-card__image {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-alt);
  margin-bottom: 10px;
  position: relative;
}
.listo-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}
.listo-card:hover .listo-card__image img {
  transform: scale(1.03);
}
.listo-card__image-placeholder {
  width: 100%;
  height: 100%;
  background: var(--surface-alt);
}

.listo-card__save {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  z-index: 2;
}
.listo-card__save input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.listo-card__save-icon {
  width: 100%;
  height: 100%;
  fill: rgba(26,26,26,0.5);
  stroke: #fff;
  stroke-width: 1.5;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
  transition: fill 0.15s ease, transform 0.1s ease;
}
.listo-card__save input:checked ~ .listo-card__save-icon {
  fill: var(--error);
  stroke: var(--error);
}
.listo-card__save:active .listo-card__save-icon {
  transform: scale(0.85);
}

.listo-card__title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listo-card__price {
  font-size: 14px;
  margin-top: 6px;
  color: var(--ink);
}
.listo-card__price strong {
  font-weight: 700;
}
/* Third line, per explicit direction — smaller than the price line
   above it, clarifying the deposit folded into that total is
   refundable, not a real added cost. */
.listo-card__deposit-note {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.listo-card__rating-star {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  margin-left: 2px;
}

/* Homepage row — literal copy of Airbnb's real homepage layout, per
   explicit direction and reference screenshots: small, equally-sized
   thumbnails in a single horizontally-scrollable row, capped at 8,
   with a "See all" card at the end. Reuses .listo-card completely
   unchanged (it's already fluid-width) — only this wrapper constrains
   its width differently than the full grid does. */
.listo-home-row-title {
  font-size: 22px;
  margin: 32px 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.listo-home-row-title:first-child {
  margin-top: 0;
}
.listo-home-row-title__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  flex-shrink: 0;
}
.listo-home-row-title__arrow:hover {
  border-color: var(--ink);
}
.listo-home-row-title__arrow svg {
  width: 16px;
  height: 16px;
}
.listo-home-row-wrap {
  position: relative;
}
.listo-home-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* Hides the scrollbar itself while keeping the scroll behavior —
     Airbnb's real row has no visible scrollbar, navigation is via the
     arrows (desktop) or a plain swipe (mobile). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.listo-home-row::-webkit-scrollbar { display: none; }
.listo-home-row__item {
  flex: 0 0 auto;
  width: 240px;
  /* Flex items default to min-width:auto, meaning they refuse to
     shrink below their content's natural width — and .listo-card__title
     uses white-space:nowrap, so an unwrapped long title was silently
     forcing this item wider than the width/flex-basis set above,
     overriding the mobile sizing entirely without any visible error.
     This is what was actually breaking the "peek" effect: cards were
     genuinely wider than intended, not a sizing math mistake. */
  min-width: 0;
}

/* Desktop/tablet only (mobile has its own comparable adjustment at
   ≤600px, just below) — sized between the original 240px cards and
   the first, more aggressive reduction to 180px, per explicit
   direction: bigger than that first pass, still noticeably more
   compact than the original. Font sizes scoped under
   .listo-home-row__item specifically, not the shared .listo-card
   rules directly — this same card component is reused on the
   search-results grid, which was not asked to shrink. */
@media (min-width: 601px) {
  .listo-home-row__item { width: 210px; }
  .listo-home-row__item .listo-card__title { font-size: 14px; }
  .listo-home-row__item .listo-card__price { font-size: 13px; }
  .listo-home-row__item .listo-card__deposit-note { font-size: 11px; }
  .listo-home-row-title { font-size: 20px; }
  .listo-home-row-title__arrow { width: 30px; height: 30px; }
  .listo-home-row-title__arrow svg { width: 15px; height: 15px; }
}
.listo-home-row__see-all {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: inherit;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  gap: 12px;
}
.listo-home-row__see-all span { font-weight: 700; font-size: 14px; }
.listo-home-row__see-all-thumbs {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 120px;
}
.listo-home-row__see-all-thumbs img {
  position: absolute;
  width: 78%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 3px solid var(--surface);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.listo-home-row__see-all-thumbs img:first-child {
  top: 0;
  left: 0;
  transform: rotate(-6deg);
  z-index: 1;
}
.listo-home-row__see-all-thumbs img:last-child {
  bottom: 0;
  right: 0;
  transform: rotate(6deg);
  z-index: 2;
}
/* Desktop-only click-to-scroll arrows, revealed on hover over the row
   — matching Airbnb's real desktop behavior. Mobile relies entirely
   on native touch scrolling, no arrows at all, since there's no hover
   state to reveal them from anyway. */
.listo-home-row-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 3;
}
.listo-home-row-nav svg { width: 18px; height: 18px; }
.listo-home-row-nav--prev { left: -20px; }
.listo-home-row-nav--next { right: -20px; }
@media (min-width: 901px) {
  .listo-home-row-nav { display: flex; }
  .listo-home-row-wrap:hover .listo-home-row-nav { opacity: 1; }
}
@media (max-width: 600px) {
  /* Same in-between sizing as the desktop version above, scaled for
     mobile — bigger than the first, more aggressive reduction, still
     more compact than the original 44vw. */
  .listo-home-row__item { width: 38vw; flex: 0 0 38vw; }
  .listo-home-row__item .listo-card__title { font-size: 14px; }
  .listo-home-row__item .listo-card__price { font-size: 13px; }
  .listo-home-row__item .listo-card__deposit-note { font-size: 11px; }
  .listo-home-row-title { font-size: 20px; }
  .listo-home-row-title__arrow { width: 30px; height: 30px; }
  .listo-home-row-title__arrow svg { width: 15px; height: 15px; }
}

.listo-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}
.listo-pagination .page-numbers {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.listo-pagination .page-numbers.current {
  background: var(--listo-green);
  border-color: var(--listo-green);
  color: #fff;
}
.listo-pagination .page-numbers:hover:not(.current) {
  background: var(--surface-alt);
}

.listo-empty-state {
  text-align: center;
  padding: 64px 0;
}
.listo-empty-state h2 { margin-bottom: 8px; }

/* ==========================================================================
   FAQ accordion — native <details>/<summary>, no JS needed, naturally
   responsive on its own. Shared by both the Guest and Host FAQ pages.
   ========================================================================== */

.listo-faq-category {
  margin-top: 36px;
}
.listo-faq-category:first-of-type {
  margin-top: 24px;
}
.listo-faq-category__title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}
.listo-faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 20px;
  margin-bottom: 10px;
  background: var(--surface);
}
.listo-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  list-style: none; /* hides the default triangle marker so our own chevron is the only indicator */
}
.listo-faq-item summary::-webkit-details-marker {
  display: none; /* Safari's own equivalent of list-style:none above */
}
.listo-faq-item summary .listo-faq-item__chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--ink-muted);
}
.listo-faq-item[open] summary .listo-faq-item__chevron {
  transform: rotate(180deg);
}
.listo-faq-item__answer {
  padding: 0 0 18px;
  color: var(--ink-muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.listo-faq-item__answer p {
  margin: 0 0 10px;
}
.listo-faq-item__answer p:last-child {
  margin-bottom: 0;
}
@media (max-width: 480px) {
  .listo-faq-item {
    padding: 4px 16px;
  }
  .listo-faq-item summary {
    font-size: 14.5px;
    padding: 14px 0;
  }
  .listo-faq-item__answer {
    font-size: 14px;
  }
}

.listo-status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.listo-status-badge--pending {
  background: #FFF4E0;
  color: #9A6700;
}
.listo-status-badge--approved {
  background: var(--listo-green-tint);
  color: var(--listo-green-dark);
}
.listo-status-badge--declined {
  background: #FCEAEA;
  color: var(--error);
}
/* Exact meta values used by the approval-required booking flow — same
   colors as their semantic equivalents above (--pending, --declined)
   rather than new ones, so "awaiting a decision" and "declined" read
   the same way everywhere on the site regardless of which specific
   flow produced them. */
.listo-status-badge--pending_host_approval {
  background: #FFF4E0;
  color: #9A6700;
}
.listo-status-badge--declined_by_host {
  background: #FCEAEA;
  color: var(--error);
}
.listo-status-badge--draft {
  background: var(--surface-alt);
  color: var(--ink-muted);
}
.listo-status-badge--confirmed {
  background: var(--listo-green-tint);
  color: var(--listo-green-dark);
}
.listo-status-badge--cancelled {
  background: var(--surface-alt);
  color: var(--ink-muted);
}
.listo-status-badge--unpaid {
  background: #FCEAEA;
  color: var(--error);
}
.listo-status-badge--awaiting_confirmation {
  background: #FFF4E0;
  color: #9A6700;
}
.listo-status-badge--paid {
  background: var(--listo-green-tint);
  color: var(--listo-green-dark);
}

/* ==========================================================================
   Single listing page
   ========================================================================== */

.listo-single-listing { max-width: 1100px; margin: 0 auto; }

.listo-single-subnav {
  position: sticky;
  top: 70px;
  z-index: 90;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.listo-single-subnav__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 28px;
  padding: 16px 32px;
}
.listo-single-subnav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.listo-single-subnav a:hover { color: var(--ink); }

/* Anchor targets for the sub-nav above — scroll-margin-top accounts
   for the site's own sticky header (70px) plus this sub-nav itself
   (~56px), so clicking a link doesn't land with the target section's
   own heading hidden underneath both. scroll-behavior:smooth is a
   genuine site-wide improvement, not scoped to just this page. */
html { scroll-behavior: smooth; }
#listo-photo-tour-trigger,
#listo-amenities-section,
#listo-reviews-section,
#listo-location-section {
  scroll-margin-top: 130px;
}
@media (max-width: 900px) {
  /* The sub-nav itself is hidden on mobile (see the 900px block
     further down), so only the site header needs clearing here —
     the full 130px would over-scroll and leave unnecessary blank
     space above each section on mobile now that there's no sub-nav
     actually taking up that extra room. */
  #listo-photo-tour-trigger,
  #listo-amenities-section,
  #listo-reviews-section,
  #listo-location-section {
    scroll-margin-top: 70px;
  }
}

.listo-single-title { margin: 20px 0 4px; text-align: center; }

.listo-single-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.listo-single-carousel::-webkit-scrollbar { display: none; }

.listo-single-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  /* Without this, a fast/hard swipe can carry enough momentum to
     skip past several snap points at once and land multiple photos
     ahead — mandatory snap type alone only guarantees landing ON a
     photo, not landing on the VERY NEXT one. This forces the browser
     to stop at each slide in sequence regardless of swipe velocity,
     so every swipe moves exactly one photo. */
  scroll-snap-stop: always;
  aspect-ratio: 1 / 1;
  background: var(--surface-alt);
}
.listo-single-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listo-single-carousel__counter {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(26,26,26,0.75);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 5;
}

.listo-single-gallery__placeholder {
  aspect-ratio: 1 / 1;
  background: var(--surface-alt);
}

/* Desktop photo grid — hidden by default, shown above the 900px
   breakpoint where the mobile carousel gets hidden instead. Literal
   copy of Airbnb's real layout: one big photo, four smaller ones in
   a 2x2 grid beside it, "Show all" overlaid at the bottom-right
   corner of the grid rather than floating separately. */
.listo-single-photo-grid {
  display: none;
  position: relative;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border-radius: 16px;
  overflow: hidden;
  height: 480px;
  cursor: pointer;
}
.listo-single-photo-grid__main { height: 100%; }
.listo-single-photo-grid__main img { width: 100%; height: 100%; object-fit: cover; }
.listo-single-photo-grid__side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  height: 100%;
}
.listo-single-photo-grid__side-tile { overflow: hidden; }
.listo-single-photo-grid__side-tile img { width: 100%; height: 100%; object-fit: cover; }
.listo-single-photo-grid__show-all {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.listo-single-photo-grid__show-all svg { width: 16px; height: 16px; }
.listo-single-photo-grid__show-all:hover { background: var(--surface-alt); }

@media (min-width: 901px) {
  .listo-single-carousel,
  .listo-single-carousel__counter { display: none; }
  .listo-single-photo-grid { display: grid; }
}

/* Photo Tour — full-screen modal, hidden by default like every other
   overlay in this codebase (display:none, shown via .is-open), NOT
   styled with the same centered-card pattern as .listo-modal-overlay
   though — this needs to be a real full-screen scrollable view, not
   a small dialog box. */
.listo-photo-tour-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--surface);
  overflow-y: auto;
}
.listo-photo-tour-overlay.is-open { display: block; }

.listo-photo-tour__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}
.listo-photo-tour__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.listo-photo-tour__header-actions .listo-single-action {
  position: static;
  background: transparent;
}
.listo-photo-tour__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.listo-photo-tour__close svg { width: 18px; height: 18px; }

.listo-photo-tour__body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.listo-photo-tour__title { margin-bottom: 24px; }

/* Quick-jump grid — one tile per category, each opening straight to
   that section further down via a plain #id anchor link (browsers
   correctly scroll the nearest scrollable ancestor, this modal's own
   body, not just the top-level page). */
.listo-photo-tour__jumpgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 48px;
}
.listo-photo-tour__jumptile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink);
}
.listo-photo-tour__jumptile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
}
.listo-photo-tour__jumptile span {
  font-size: 14px;
  font-weight: 600;
}

/* Each category section — title on the left, photos stacked on the
   right. The title stays sticky within its OWN section's height only
   (align-self:start plus a bounded parent), so once scrolled past
   this section entirely, the next section's own sticky title takes
   over naturally — a real hand-off, not a JS-driven swap. */
.listo-photo-tour__section {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  margin-bottom: 24px;
  scroll-margin-top: 90px;
}
.listo-photo-tour__section-title {
  position: sticky;
  top: 90px;
  align-self: start;
}
.listo-photo-tour__section-title h2 { margin: 0; }
.listo-photo-tour__section-photos img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 16px;
  display: block;
}

@media (max-width: 700px) {
  .listo-photo-tour__section {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .listo-photo-tour__section-title {
    position: static;
  }
}

.listo-single-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  margin-top: 24px;
}
@media (max-width: 900px) {
  .listo-single-layout { grid-template-columns: 1fr; }
}

.listo-single-subtitle,
.listo-single-basics,
.listo-single-rating {
  text-align: center;
}

.listo-single-basics {
  font-size: 15px;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.listo-single-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  margin-top: 4px;
}
.listo-single-star {
  width: 14px;
  height: 14px;
  fill: var(--ink);
}

.listo-single-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

.listo-single-host {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.listo-single-host__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-alt);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.listo-single-host__avatar img { width: 100%; height: 100%; object-fit: cover; }
.listo-single-host__avatar span { font-size: 20px; font-weight: 700; color: var(--ink-muted); }
.listo-single-host__label { font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }
.listo-single-host__name { font-size: 16px; font-weight: 600; }

.listo-single-description { font-size: 15px; line-height: 1.6; }
.listo-single-space-details__body { font-size: 15px; line-height: 1.7; color: var(--ink); white-space: normal; }
.listo-listing-form__field-help { margin: 7px 0 0; line-height: 1.5; }

.listo-single-amenities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 8px;
}
.listo-single-amenities__item {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.listo-amenity-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--ink);
}

.listo-single-sleep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}
.listo-single-sleep-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 12px;
}
.listo-single-sleep-card__icon {
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.listo-single-sleep-card__icon svg { width: 24px; height: 24px; }
.listo-single-sleep-card__name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

.listo-single-sleep-card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 8px;
}
.listo-single-sleep-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listo-single-highlights {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.listo-single-highlight {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.listo-single-highlight__title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
}

/* Full-screen amenities popup */
.listo-fullscreen-modal {
  display: none;
  position: fixed;
  top: 48px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background: #FFFFFF;
  border-radius: 20px 20px 0 0;
  overflow-y: auto;
}
.listo-fullscreen-modal.is-open { display: block; }

.listo-fullscreen-modal__header {
  position: sticky;
  top: 0;
  background: #FFFFFF;
  border-radius: 20px 20px 0 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  z-index: 5;
}
.listo-fullscreen-modal__back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.listo-fullscreen-modal__back svg { width: 18px; height: 18px; }

.listo-fullscreen-modal__body {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.listo-fullscreen-modal__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0 14px 16px;
  font-size: 15px;
}
/* Border only between two consecutive items, never after the last
   one in a group — the previous version put border-bottom on every
   item unconditionally, which meant the very last item before a new
   heading (or the end of the modal) always showed a stray line right
   before whatever came next. This is correct regardless of what
   follows a group of items, without needing to know what that is. */
.listo-fullscreen-modal__item + .listo-fullscreen-modal__item {
  border-top: 1px solid var(--border);
}
/* Unchosen Safety & property items — matching Airbnb's own real
   pattern, per explicit direction: every item stays listed and
   visible, unavailable ones just get struck through rather than
   being omitted, so the full picture is visible at a glance. */
.listo-fullscreen-modal__item--unavailable {
  color: var(--ink-muted);
  text-decoration: line-through;
}

.listo-booking-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: sticky;
  /* Clears both the site's own sticky header (70px) AND the new
     Photos/Amenities/Reviews/Location sub-nav sitting above this
     widget once both are stuck at the same time — matching Airbnb's
     real behavior, where the sub-nav and the reservation card stay
     visible together while scrolling through the middle of the page. */
  top: 126px;
}
.listo-booking-card__price {
  font-size: 20px;
  margin-bottom: 8px;
}
.listo-booking-card__price strong { font-weight: 700; }

/* New two-state widget — "Add dates for prices" fields, and the
   calendar/guests popups they open. Matches Airbnb's real desktop
   flow, per explicit direction and reference screenshots. */
.listo-widget-fields-box {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.listo-widget-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  border: none;
  background: var(--surface);
  padding: 10px 14px;
  cursor: pointer;
}
.listo-widget-field--half {
  flex: 1;
  min-width: 0;
}
.listo-widget-field--half:first-child {
  border-right: 1px solid var(--border);
}
.listo-widget-field--full {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 8px;
}
.listo-widget-field__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
}
.listo-widget-field__value {
  font-size: 14px;
  color: var(--ink);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.listo-widget-popup {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(26,26,26,0.16);
  padding: 16px;
  z-index: 20;
  /* This card is sticky (top: 126px), so this popup's own top edge is
     fixed relative to the viewport too — scrolling the page never
     moves it, unlike a normal in-flow element. A plain 70vh cap
     doesn't account for that existing top offset at all, so on a
     shorter screen the popup's own bottom edge — including whatever
     part would let you scroll it — can end up rendered below the
     visible viewport entirely, with no way to reach it by scrolling
     the page. Capped at a smaller, fixed maximum in addition to the
     vh-based one (matches this popup's own realistic remaining room
     given that offset) rather than relying on viewport height alone. */
  max-height: min(60vh, 380px);
  overflow-y: auto;
}
/* Desktop only (mobile's own, already-correct single-month behavior
   below is untouched) — this popup sits inside the 340px sidebar
   column, not the wide main content area the inline calendar lives
   in, so the same dual-month width was forcing it to overflow well
   past the sidebar's actual edge. Single month, sized to actually
   fit the column it's really in — this also helps the vertical fit:
   each cell's size is derived entirely from the grid's own width
   (aspect-ratio: 1/1, no fixed size), so a narrower calendar means
   shorter cells too, not just a narrower one. */
#listo-widget-calendar-popup {
  width: 640px;
  max-width: 90vw;
}

@media (min-width: 901px) {
  #listo-widget-calendar-popup {
    width: 280px;
  }
  #listo-widget-calendar-popup .listo-cal-months > .listo-cal-month:nth-child(2) {
    display: none;
  }
}

/* Mobile's own full-screen booking modal — receives the SAME calendar
   and guests popup markup via JS reparenting (see
   wireMobileBookingModal() in booking-calendar.js), rather than
   duplicating that markup a third time. Same structure as the
   homepage search bar's own mobile modal. */
.listo-mobile-booking-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.listo-mobile-booking-modal__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  font-weight: 700;
}
.listo-mobile-booking-modal__header button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.listo-mobile-booking-modal__header svg { width: 18px; height: 18px; }
.listo-mobile-booking-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.listo-mobile-booking-modal__breakdown {
  flex-shrink: 0;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  /* Light grey background, per explicit direction, so this whole
     price-summary area visually reads as its own distinct section —
     separate from the white calendar/Guests content above it —
     rather than blending into one undifferentiated block. */
  background: var(--surface-alt);
}
.listo-mobile-booking-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface-alt);
  font-size: 14px;
}
/* Once reparented into the mobile modal, the popups need to flow as
   plain static content instead of the desktop absolute-positioned
   floating panel — otherwise position:absolute would resolve against
   the modal's own position:fixed context and render in the wrong
   place entirely, the exact class of bug already caught once before
   for the search bar's own mobile modal. */
.listo-mobile-booking-modal .listo-widget-popup {
  position: static;
  width: 100%;
  max-width: none;
  border: none;
  box-shadow: none;
  padding: 0;
  /* The outer modal body already scrolls on its own
     (.listo-mobile-booking-modal__body, overflow-y: auto) — this
     inner popup shouldn't have its own separate, smaller max-height
     competing with that once reparented in here, or it could
     prematurely cut off/create a second scrollbar even though the
     modal itself has plenty of room. */
  max-height: none;
}
.listo-mobile-booking-modal .listo-cal-months { flex-direction: column; gap: 32px; }

@media (max-width: 900px) {
  /* The desktop-only fields/popups never open directly on mobile —
     the sticky bar's own compact "Add dates for prices" button opens
     the full-screen modal instead. Hiding these here isn't strictly
     required (they'd never be triggered), but keeps them from ever
     rendering visible on a screen size they were never designed for. */
  .listo-widget-fields-box,
  #listo-widget-guests-field {
    display: none;
  }
}

.listo-single-action {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.listo-single-action:hover { background: var(--surface-alt); }
.listo-single-action svg { width: 16px; height: 16px; }

.listo-single-save-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.listo-single-action--save input:checked ~ .listo-single-save-icon {
  fill: var(--error);
  stroke: var(--error);
}

.listo-single-subtitle {
  font-size: 20px;
  margin-bottom: 6px;
}

.listo-single-subheading {
  font-size: 15px;
  margin: 16px 0 4px;
}

.listo-single-host-card h2 { margin-bottom: 16px; }

.listo-host-summary-card {
  display: flex;
  align-items: center;
  gap: 20px;
}
.listo-host-summary-card__stats {
  display: flex;
  gap: 20px;
}
.listo-host-summary-card__stats > div {
  display: flex;
  flex-direction: column;
}
.listo-host-summary-card__stats strong {
  font-size: 20px;
}
.listo-host-summary-card__stats + .listo-host-summary-card__stats,
.listo-host-summary-card__stats > div + div {
  padding-left: 20px;
  border-left: 1px solid var(--border);
}
.listo-host-summary-card__name {
  font-weight: 700;
  font-size: 18px;
  margin-top: 12px;
}
@media (max-width: 480px) {
  .listo-host-summary-card__stats { gap: 14px; }
  .listo-host-summary-card__stats > div + div { padding-left: 14px; }
}

.listo-single-host__avatar--lg {
  width: 72px;
  height: 72px;
}
.listo-single-host__avatar--lg span { font-size: 26px; }

.listo-single-breadcrumb {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.listo-single-breadcrumb a {
  text-decoration: underline;
  color: var(--ink-muted);
}
.listo-single-breadcrumb a:hover { color: var(--ink); }

.listo-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 -2px 8px rgba(26,26,26,0.08);
}
.listo-sticky-bar__price {
  font-size: 16px;
}
.listo-sticky-bar__price strong { font-weight: 700; }
.listo-sticky-bar .listo-btn {
  flex-shrink: 0;
}

/* "Free cancellation before [date]" pill — shared markup/class
   between the desktop sidebar card and the mobile sticky bar,
   matching both reference layouts provided. Populated via JS using
   the same cutoff-date computation the full cancellation policy
   section elsewhere on the page already does; hidden until a valid
   date range makes that cutoff actually known. */
.listo-free-cancel-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-alt);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--ink);
  margin-top: 8px;
}
.listo-sticky-bar .listo-free-cancel-pill { margin-top: 4px; }

/* Booking calendar — dual-month now, matching Airbnb's real layout.
   Widened from the old single-month 380px cap now that there's
   genuinely two months' worth of content to hold, not one oversized
   month stretching to fill the whole available column. */
#listo-booking-calendar {
  max-width: 640px;
  position: relative;
}

.listo-cal-summary {
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.5;
}

/* Prev/next now control the pair as a whole, positioned at the outer
   edges above both months — same pattern as the search bar's own
   dual-month calendar, rather than repeated per month. */
.listo-cal-nav-row {
  position: relative;
  height: 0;
}
.listo-cal-nav {
  position: absolute;
  top: -4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--listo-green);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
#listo-cal-prev { left: 0; }
#listo-cal-next { right: 0; }
/* The widget popup's own prev/next buttons use different IDs from the
   inline calendar's — these never had positioning rules of their own
   at all, so both defaulted to the same spot and visually overlapped,
   with only the later one (next) actually visible. Genuine pre-
   existing bug, not something this pass introduced. */
#listo-widget-cal-prev { left: 0; }
#listo-widget-cal-next { right: 0; }
.listo-cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }

.listo-cal-months {
  display: flex;
  gap: 32px;
}
@media (max-width: 900px) {
  /* Same class of bug as the sub-nav — this dual-month layout had no
     mobile override at all when it was built, so it was bleeding
     through unintentionally rather than actually being requested for
     mobile. Restoring single-month, matching mobile's original
     behavior before the desktop dual-month redesign happened. */
  #listo-booking-calendar { max-width: 380px; }
  .listo-cal-months > .listo-cal-month:nth-child(2) { display: none; }
}
.listo-cal-month { flex: 1; min-width: 0; }

.listo-cal-header {
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 14px;
}

.listo-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.listo-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.listo-cal-cell {
  aspect-ratio: 1 / 1;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listo-cal-cell:hover:not(:disabled) { background: var(--surface-alt); }
.listo-cal-cell--blank { cursor: default; }
.listo-cal-cell--unavailable {
  color: var(--ink-muted);
  text-decoration: line-through;
  cursor: not-allowed;
}
.listo-cal-cell--selected {
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}
.listo-cal-cell--in-range {
  background: var(--listo-green-tint);
  border-radius: 0;
}

.listo-cal-clear {
  background: none;
  border: none;
  font-weight: 600;
  color: var(--listo-green-dark);
  font-size: 14px;
  cursor: pointer;
  margin-top: 16px;
  padding: 0;
}

.listo-price-total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* Checkout — approved reservation payment page
   entered from the approval email. Treat it as a standalone, centered
   payment screen rather than the normal two-column checkout layout. */
.listo-checkout--payment-only {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
.listo-checkout--payment-only > h1 {
  text-align: center;
}
.listo-checkout--payment-only .listo-checkout-layout {
  display: block !important;
  margin-top: 24px;
}
.listo-checkout--payment-only .listo-checkout-main {
  width: 100%;
}
.listo-checkout--payment-only .listo-checkout-card--payment {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.listo-checkout--payment-only .listo-checkout-card--payment .listo-single-divider {
  margin-left: auto;
  margin-right: auto;
}

/* Checkout page */
.listo-checkout { max-width: 1000px; }
/* Checkout page — deliberately a single column always, not a
   grid-with-sidebar, per explicit direction. This was previously a
   2-column grid on desktop with the booking summary as a sticky
   sidebar, toggled between visible/hidden per checkout state via JS —
   collapsed to one column permanently instead, both because it
   sidesteps any dependency on that JS/CSS actually being fresh in the
   browser at the right moment, and because it makes every state's
   centering (the post-submission checkmark/message/button) simply
   correct by construction — there's no second column left to compete
   with for width. */
.listo-checkout-layout {
  display: block;
  margin-top: 24px;
}
.listo-checkout-main,
.listo-checkout-sidebar {
  width: 100%;
  box-sizing: border-box;
}
.listo-checkout-sidebar {
  margin-top: 24px;
}
.listo-checkout-sidebar .listo-booking-card {
  width: 100%;
  box-sizing: border-box;
}

/* Checkout — each section is its own distinct card, not just a
   heading floating on the page background. */
.listo-checkout-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

/* Each checkout section gets its own icon color — per explicit
   direction — so the page reads as a set of distinct steps rather
   than one long uniform list. Wallet credit keeps the plain brand
   green (money already ties naturally to the brand color); the rest
   get their own hue. */
.listo-checkout-card--trip .listo-checkout-card__header svg { color: #4A90D9; }
.listo-checkout-card--details .listo-checkout-card__header svg { color: #8B5CF6; }
.listo-checkout-card--promo .listo-checkout-card__header svg { color: #E0A030; }
.listo-checkout-card--wallet .listo-checkout-card__header svg { color: var(--listo-green); }


.listo-checkout-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.listo-checkout-card__header svg {
  width: 20px;
  height: 20px;
  color: var(--listo-green);
  flex-shrink: 0;
}
.listo-checkout-card__header h2 {
  font-size: 17px;
  margin: 0;
}
.listo-checkout-trip-dates {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
}

.listo-checkout-card--payment {
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
.listo-checkout-reference {
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  margin: 10px 0;
  color: var(--listo-green-dark);
}

/* Trip summary sidebar */
.listo-checkout-summary-listing {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
.listo-checkout-summary-listing img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.listo-checkout-summary-listing__title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}
.listo-checkout-price-breakdown {
  font-size: 14px;
}
.listo-checkout-price-breakdown > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--ink);
}
.listo-checkout-discount-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--listo-green-dark);
  font-weight: 600;
}
.listo-checkout-remove-link {
  border: none;
  background: transparent;
  padding: 0;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  color: var(--ink-muted);
  cursor: pointer;
}
.listo-checkout-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--listo-green-tint);
  font-size: 17px;
  font-weight: 800;
  color: var(--listo-green-dark);
}
.listo-checkout-reserve-btn {
  margin-top: 16px;
  font-size: 16px;
  padding: 14px;
}

.listo-maya-qr-img {
  display: block;
  margin: 0 auto;
  width: 220px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  image-rendering: -webkit-optimize-contrast; /* keeps QR edges crisp when scaled down from a larger source */
}
.listo-payment-qr-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 24px auto 12px;
  max-width: 720px;
}
.listo-payment-qr-card {
  margin: 0;
  text-align: center;
}
.listo-payment-qr-card .listo-maya-qr-img {
  width: 100%;
  max-width: 220px;
}
.listo-payment-qr-card__caption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
}
.listo-payment-qr-card__caption strong {
  display: block;
}
.listo-payment-qr-card__caption span {
  display: block;
  color: #475467;
  font-weight: 600;
}

/* Things to know */
.listo-know-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.listo-know-card:last-of-type { border-bottom: none; }
.listo-know-card__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}
.listo-know-card__title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}
.listo-know-card__learn-more {
  border: none;
  background: transparent;
  padding: 0;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  color: var(--ink);
  cursor: pointer;
}

.listo-report-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
}
.listo-report-link svg { width: 18px; height: 18px; }

.listo-related-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.listo-related-scroll .listo-card {
  flex: 0 0 160px;
}
@media (min-width: 600px) {
  .listo-related-scroll .listo-card { flex-basis: 220px; }
}

/* Reviews */
.listo-affiliate-share-card{display:flex;align-items:center;gap:12px;margin:12px 0 0;padding:12px 13px;border:1px solid #dceaf4;border-radius:16px;background:linear-gradient(135deg,#f8fcff 0%,#f2f8fd 100%);box-shadow:0 5px 16px rgba(31,75,105,.06)}
.listo-affiliate-share-card__icon{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center}
.listo-affiliate-share-card__icon img{display:block;width:48px;height:48px}
.listo-affiliate-share-card__body{min-width:0;display:flex;flex:1;flex-direction:column;gap:2px}
.listo-affiliate-share-card__body strong{color:#25343e;font-size:12px;line-height:1.3;font-weight:850}
.listo-affiliate-share-card__body span{color:#73818a;font-size:10px;line-height:1.35}
.listo-affiliate-share-card__copy{flex:0 0 auto;min-height:34px;padding:8px 11px;font-size:10px;white-space:nowrap;border-radius:10px}
.listo-affiliate-share-card.is-copied{border-color:#b8e2c4}
.listo-affiliate-share-card.is-copied .listo-affiliate-share-card__copy{background:#249b55}
@media (max-width:640px){.listo-affiliate-share-card{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:11px;padding:13px 14px;border-radius:16px;margin-top:14px}.listo-affiliate-share-card__icon{width:48px;height:48px;flex-basis:48px}.listo-affiliate-share-card__icon img{width:48px;height:48px}.listo-affiliate-share-card__body{gap:3px}.listo-affiliate-share-card__body strong{font-size:14px;line-height:1.25}.listo-affiliate-share-card__body span{font-size:11px;line-height:1.4}.listo-affiliate-share-card__copy{grid-column:1 / -1;width:100%;min-height:40px;padding:9px 12px;font-size:12px;border-radius:11px;margin-top:2px}}

.listo-review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 600px) {
  .listo-review-grid { grid-template-columns: 1fr; }
}

/* My Trips — app-like guest trip cards */
.listo-my-trips-sections { display: flex; flex-direction: column; gap: 20px; margin-top: 18px; }
.listo-trip-section { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.listo-trip-section__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px 14px; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.listo-trip-section__title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.listo-trip-section__header h2 { margin: 0; font-size: 21px; }
.listo-trip-info-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; box-sizing: border-box; flex: 0 0 auto; transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease; }
.listo-trip-info-icon { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.listo-trip-info-icon__dot { fill: currentColor; stroke: none; }
.listo-trip-info-btn:hover, .listo-trip-info-btn:focus-visible { color: var(--brand); border-color: var(--brand); outline: none; }
.listo-trip-info-btn:active { transform: scale(.94); }
.listo-trip-section__count { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-weight: 700; font-size: 13px; flex-shrink: 0; }
.listo-trip-section__notice { margin: 14px 16px 0; padding: 10px 13px; border-radius: var(--radius-sm); background: var(--surface-alt); border: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; }
.listo-trip-section__notice span { color: var(--ink-muted); }
.listo-trip-section__empty { padding: 24px 20px; color: var(--ink-muted); font-size: 14px; }
.listo-trip-grid { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.listo-trip-card { display: flex; gap: 16px; border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: var(--surface); }
.listo-trip-card__photo { width: 112px; height: 96px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--surface-alt); }
.listo-trip-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.listo-trip-card__body { flex: 1; min-width: 0; }
.listo-trip-card__topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.listo-trip-card__title { font-weight: 750; font-size: 16px; margin-bottom: 3px; line-height: 1.3; }
.listo-trip-card__dates { color: var(--ink); font-size: 14px; line-height: 1.4; }
.listo-trip-card__price { font-weight: 800; font-size: 16px; white-space: nowrap; }
.listo-trip-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.listo-trip-card .listo-status-badge { font-size: 11px; padding: 4px 8px; }
.listo-trip-card__payment-state { color: var(--success); font-size: 12px; font-weight: 700; }
.listo-trip-card__reference { margin-top: 6px; color: var(--ink-muted); font-size: 12px; }
.listo-trip-card__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.listo-trip-card .listo-btn { padding: 8px 11px; font-size: 13px; }
.listo-my-trips-empty-cta { margin-top: 20px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.listo-my-trips-empty-cta strong { font-size: 16px; }
.listo-my-trips-empty-cta .listo-btn { margin-left: auto; }

/* My Trips information is available on demand instead of occupying the main page. */
.listo-trip-info-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(26,26,26,.48); }
.listo-trip-info-modal.is-open { display: flex; }
.listo-trip-info-modal__card { position: relative; width: 100%; max-width: 460px; max-height: min(78vh, 620px); overflow-y: auto; padding: 26px; background: var(--surface); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.16); }
.listo-trip-info-modal__card h3 { margin: 0 36px 14px 0; font-size: 21px; }
.listo-trip-info-modal__content { color: var(--ink); font-size: 14px; line-height: 1.55; }
.listo-trip-info-modal__content p { margin: 0 0 12px; }
.listo-trip-info-modal__content p:last-child { margin-bottom: 0; }
.listo-trip-info-modal__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface-alt); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.listo-trip-info-modal__close:hover, .listo-trip-info-modal__close:focus-visible { background: var(--border); outline: none; }

@media (max-width: 600px) {
  .listo-trip-section__header { padding: 14px; align-items: center; }
  .listo-trip-section__header h2 { font-size: 18px; }
  .listo-trip-info-btn { width: 24px; height: 24px; }
  .listo-trip-info-icon { width: 16px; height: 16px; }
  .listo-trip-section__count { min-width: 26px; height: 26px; padding: 0 7px; }
  .listo-trip-grid { padding: 10px; gap: 8px; }
  .listo-trip-card { gap: 11px; padding: 10px; align-items: flex-start; }
  .listo-trip-card__photo { width: 88px; height: 82px; }
  .listo-trip-card__topline { gap: 10px; }
  .listo-trip-card__title { font-size: 14px; }
  .listo-trip-card__dates { font-size: 13px; }
  .listo-trip-card__price { font-size: 14px; }
  .listo-trip-card__meta { margin-top: 8px; }
  .listo-trip-card .listo-status-badge { font-size: 10px; padding: 3px 6px; }
  .listo-trip-card__reference { font-size: 11px; }
  .listo-trip-card__actions { gap: 7px; }
  .listo-trip-card__actions > .listo-btn { flex: 1 1 auto; }
  .listo-trip-card__actions > .listo-btn { text-align: center; }
  .listo-my-trips-empty-cta .listo-btn { width: 100%; margin-left: 0; text-align: center; }
  .listo-trip-info-modal { align-items: flex-end; padding: 0; }
  .listo-trip-info-modal__card { max-width: none; max-height: 78vh; border-radius: 18px 18px 0 0; padding: 24px 20px 28px; }
}
@media (max-width: 420px) {
  .listo-trip-card__photo { width: 76px; height: 74px; }
  .listo-trip-card { gap: 9px; }
  .listo-trip-card__topline { display: block; }
  .listo-trip-card__price { margin-top: 6px; }
}

.listo-booking-request-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.listo-booking-request-actions .listo-btn { flex: 1; }

.listo-review-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.listo-review-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.listo-review-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.listo-review-card__avatar span { font-weight: 700; color: var(--ink-muted); }
.listo-review-card__name { font-weight: 600; font-size: 14px; }
.listo-review-card__text {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.listo-star-input {
  display: flex;
  gap: 4px;
}
.listo-star-input__star {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--border);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.listo-star-input__star.is-filled {
  color: var(--listo-green);
}

@media (max-width: 900px) {
  .listo-sticky-bar { display: flex; }
  .listo-single-sidebar { display: none; } /* sticky bar replaces it on mobile */
  .listo-single-listing { padding-bottom: 72px; } /* room for the fixed bar */
  /* The Photos/Amenities/Reviews/Location sub-nav was only ever
     discussed and built for the desktop redesign work — it had no
     hide rule at all, so it was bleeding into mobile unintentionally.
     Restoring mobile's original behavior (plain scrolling, no sub-nav)
     rather than leaving a desktop-only feature half-applied there. */
  .listo-single-subnav { display: none; }
}

.listo-single-gallery {
  position: relative;
  margin: 0 -32px;
}
@media (max-width: 480px) {
  .listo-single-gallery { margin: 0 -24px; }
}

/* Content sheet overlaps the bottom of the gallery with rounded top
   corners — matches Airbnb's mobile "pull up" panel look. */
.listo-single-sheet {
  position: relative;
  background: #FFFFFF;
  border-radius: 20px 20px 0 0;
  margin: -20px -32px 0 -32px;
  padding: 20px 32px 0 32px;
}
@media (max-width: 480px) {
  .listo-single-sheet {
    margin: -20px -24px 0 -24px;
    padding: 20px 24px 0 24px;
  }
}

.listo-single-gallery__actions {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  gap: 8px;
}

.listo-single-action--overlay {
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.listo-single-action--back {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.listo-single-action--back svg { width: 18px; height: 18px; }

/* ==========================================================================
   My Listings (host's own submissions)
   ========================================================================== */

.listo-my-listing-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}

.listo-my-listing-row__thumb {
  width: 88px;
  height: 66px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-alt);
  flex-shrink: 0;
}
.listo-my-listing-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listo-my-listing-row__body {
  flex: 1 1 auto;
  min-width: 0;
}
.listo-my-listing-row__title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listo-my-listing-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-muted);
}
.listo-my-listing-row__price {
  white-space: nowrap;
}

.listo-my-listing-row__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tablet/mobile: keep the listing information readable by moving the
   actions onto their own full-width row. The previous implementation only
   stacked below 480px, which left a 600–900px mobile/tablet viewport with
   three fixed-width buttons competing with the thumbnail and listing meta. */
@media (max-width: 900px) {
  .listo-my-listings-page {
    padding-left: 24px;
    padding-right: 24px;
  }

  .listo-my-listings-page > h1 {
    font-size: 36px;
  }

  .listo-my-listings-page > .listo-caption {
    font-size: 14px;
    line-height: 1.5;
  }

  .listo-my-listing-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
  }

  .listo-my-listing-row__thumb {
    width: 128px;
    height: 96px;
  }

  .listo-my-listing-row__body {
    flex: 1 1 calc(100% - 142px);
    min-width: 0;
    padding-top: 2px;
  }

  .listo-my-listing-row__actions {
    width: 100%;
    flex: 1 0 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .listo-my-listing-row__actions .listo-btn {
    width: 100%;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  .listo-my-listings-page {
    padding-left: 20px;
    padding-right: 20px;
  }

  .listo-my-listings-page > h1 {
    font-size: 32px;
  }

  .listo-my-listings-page > .listo-caption {
    margin-bottom: 20px !important;
  }

  .listo-my-listing-row {
    gap: 12px;
    padding: 12px;
  }

  .listo-my-listing-row__thumb {
    width: 112px;
    height: 84px;
  }

  .listo-my-listing-row__body {
    flex-basis: calc(100% - 124px);
  }

  .listo-my-listing-row__title {
    font-size: 15px;
  }

  .listo-my-listing-row__meta {
    align-items: flex-start;
    gap: 5px;
    line-height: 1.35;
  }

  .listo-status-badge {
    white-space: nowrap;
  }

  .listo-my-listing-row__actions .listo-btn {
    min-height: 46px;
    font-size: 14px;
    padding: 9px 6px;
  }
}

@media (max-width: 380px) {
  .listo-my-listings-page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .listo-my-listings-page > h1 {
    font-size: 30px;
  }

  .listo-my-listing-row__thumb {
    width: 96px;
    height: 72px;
  }

  .listo-my-listing-row__body {
    flex-basis: calc(100% - 108px);
  }

  .listo-my-listing-row__actions {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   My Wallet (guest cashback/promo credit)
   ========================================================================== */

.listo-wallet-balance-card {
  background: var(--listo-green-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  margin-bottom: 8px;
}
.listo-wallet-balance-card__label {
  font-size: 14px;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.listo-wallet-balance-card__amount {
  font-size: 40px;
  font-weight: 700;
  color: var(--listo-green-dark);
  line-height: 1.1;
  margin-bottom: 6px;
}
@media (max-width: 480px) {
  .listo-wallet-balance-card {
    padding: 22px 16px;
  }
  .listo-wallet-balance-card__amount {
    font-size: 32px;
  }
}

.listo-wallet-history__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.listo-wallet-history__body {
  min-width: 0;
}
.listo-wallet-history__type {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
}
.listo-wallet-history__amount {
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  white-space: nowrap;
}
.listo-wallet-history__amount--credit {
  color: #22C55E;
}
.listo-wallet-history__amount--debit {
  color: #EF4444;
}
/* Same shape of problem the My Listings row above just had — a fixed
   row with a flex-shrink:0 amount pinned next to variable-length text
   (a note can run long). Stacked vertically on mobile from day one
   this time, rather than waiting for it to actually break first. */
@media (max-width: 480px) {
  .listo-wallet-history__row {
    flex-direction: column;
    align-items: flex-start;
  }
  .listo-wallet-history__amount {
    align-self: flex-end;
  }
}

/* ==========================================================================
   Success modal (after listing submission)
   ========================================================================== */

.listo-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--listo-green-tint);
  color: var(--listo-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.listo-success-icon svg { width: 28px; height: 28px; }

.listo-map-search {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  margin-bottom: 10px;
}
.listo-map-search:focus {
  outline: none;
  border-color: var(--listo-green);
  box-shadow: 0 0 0 3px var(--listo-green-tint);
}

.listo-map {
  width: 100%;
  height: 280px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  position: relative;
  isolation: isolate; /* contains Leaflet's internal z-index:1000 controls so they can't escape and cover the sticky bar / modals outside the map */
  z-index: 0;
}

/* Inbox — two-pane on desktop, single-pane with back button on mobile */
.listo-inbox {
  display: grid;
  grid-template-columns: 360px 1fr;
  height: calc(100vh - 70px);
  height: calc(100dvh - 70px); /* accounts for mobile browser chrome collapsing/expanding — 100vh alone can be taller than what's actually visible, which was very likely why the composer looked missing on mobile even after fixing the flex min-height issue */
  border-top: 1px solid var(--border);
  background: var(--surface);
  /* Cancels out .listo-main's own side padding (32px, or 24px at the
     480px breakpoint below) so the chat room reaches genuinely full
     browser width instead of sitting inset like a normal content
     page — matching the value exactly rather than guessing keeps this
     edge-to-edge at every screen size, not just the default one. */
  margin: 0 -32px;
}
.listo-inbox__list {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  min-height: 0;
  background: var(--surface);
}
.listo-inbox__heading {
  padding: 24px 20px 16px;
  margin: 0;
  border-bottom: 1px solid var(--border);
}
.listo-inbox-thread-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 20px;
  border: none;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease;
}
.listo-inbox-thread-item:hover { background: var(--surface-alt); }
.listo-inbox-thread-item.is-active {
  background: var(--listo-green-tint);
  border-left-color: var(--listo-green);
}
.listo-inbox-thread-item.is-unread .listo-inbox-thread-item__title,
.listo-inbox-thread-item.is-unread .listo-inbox-thread-item__preview {
  font-weight: 700;
  color: var(--ink);
}
.listo-inbox-thread-item__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--listo-green-tint);
  color: var(--listo-green-dark);
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.listo-inbox-thread-item__photo img { width: 100%; height: 100%; object-fit: cover; }
.listo-inbox-thread-item__body { min-width: 0; flex: 1; }
.listo-inbox-thread-item__top-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.listo-inbox-thread-item__title {
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listo-inbox-thread-item__time {
  font-size: 11.5px;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.listo-inbox-thread-item__listing-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--listo-green-dark);
  background: var(--listo-green-tint);
  border-radius: 999px;
  padding: 2px 8px;
  margin: 4px 0 5px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listo-inbox-thread-item__listing-tag svg { width: 11px; height: 11px; flex-shrink: 0; }
.listo-inbox-thread-item__preview {
  font-size: 13px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listo-inbox-thread-item__new {
  flex-shrink: 0;
  color: var(--listo-green);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  margin-top: 5px;
}

.listo-inbox__thread { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.listo-inbox__thread-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ink-muted);
  gap: 12px;
}
.listo-inbox__thread-empty svg { width: 56px; height: 56px; opacity: 0.35; }
.listo-inbox__thread-active { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.listo-inbox__thread-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  z-index: 1;
}
.listo-inbox-back-btn {
  display: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--listo-green);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.listo-inbox-back-btn svg { width: 20px; height: 20px; }
.listo-inbox-back-btn:hover,
.listo-inbox-back-btn:focus-visible { background: var(--listo-green-tint); color: var(--listo-green-dark); outline: none; }
.listo-inbox__thread-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--listo-green-tint);
  color: var(--listo-green-dark);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.listo-inbox__thread-header-name { font-weight: 700; font-size: 15.5px; }

.listo-inbox__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 20px 8px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.listo-inbox-notice {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-muted);
  padding: 6px 20px 14px;
  opacity: 0.85;
}
.listo-msg-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 10px;
  animation: listo-msg-in 0.15s ease-out;
}
@keyframes listo-msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.listo-msg-bubble-row--mine { justify-content: flex-end; }
.listo-msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--listo-green-tint);
  color: var(--listo-green-dark);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.listo-msg-avatar--mine {
  background: var(--listo-green);
  color: #fff;
}
.listo-msg-bubble {
  max-width: 68%;
  padding: 11px 16px;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.45;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.listo-msg-bubble-row--mine .listo-msg-bubble {
  background: var(--listo-green);
  color: #fff;
}
.listo-msg-bubble__text {
  white-space: pre-line;
}
.listo-msg-bubble--image {
  padding: 6px;
  overflow: hidden;
}
.listo-msg-bubble__image-trigger {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  line-height: 0;
  text-align: left;
}
.listo-msg-bubble__image-trigger:focus-visible {
  outline: 2px solid var(--listo-green);
  outline-offset: 2px;
  border-radius: 13px;
}
.listo-msg-bubble__image {
  display: block;
  width: 100%;
  max-width: 240px;
  border-radius: 13px;
}
.listo-msg-bubble--image .listo-msg-bubble__text {
  padding: 8px 6px 0;
}
.listo-inbox-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.88);
  overscroll-behavior: contain;
  touch-action: manipulation;
}
.listo-inbox-image-lightbox__stage {
  width: min(96vw, 1400px);
  height: min(92vh, 1000px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.listo-inbox-image-lightbox__stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 18px 60px rgba(0,0,0,.4);
  user-select: none;
  -webkit-user-drag: none;
}
.listo-inbox-image-lightbox__close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  color: #fff;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.listo-inbox-image-lightbox__close:hover,
.listo-inbox-image-lightbox__close:focus-visible {
  background: rgba(255,255,255,.18);
}
.listo-inbox-image-lightbox__close svg { width: 22px; height: 22px; }
body.listo-inbox-lightbox-open { overflow: hidden; }

@media (max-width: 600px) {
  .listo-inbox-image-lightbox {
    padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    background: rgba(0,0,0,.94);
  }
  .listo-inbox-image-lightbox__stage {
    width: 100%;
    height: 100%;
  }
  .listo-inbox-image-lightbox__stage img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 3px;
    box-shadow: none;
  }
  .listo-inbox-image-lightbox__close {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
  }
}
.listo-msg-bubble__time {
  padding: 0 6px;
}
.listo-msg-bubble__time {
  display: block;
  font-size: 10.5px;
  opacity: 0.6;
  margin-top: 5px;
}
.listo-msg-bubble-wrap { display: flex; flex-direction: column; max-width: 68%; }
.listo-msg-bubble-row--mine .listo-msg-bubble-wrap { align-items: flex-end; }
.listo-msg-bubble-wrap .listo-msg-bubble { max-width: 100%; }

.listo-msg-bubble__reply-preview {
  font-size: 12px;
  opacity: 0.75;
  border-left: 2px solid currentColor;
  padding-left: 8px;
  margin-bottom: 6px;
}

.listo-msg-bubble__actions {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}
.listo-msg-react-btn,
.listo-msg-reply-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  cursor: pointer;
}
.listo-msg-react-btn svg,
.listo-msg-reply-btn svg { width: 15px; height: 15px; }
.listo-msg-react-btn:hover,
.listo-msg-reply-btn:hover { background: var(--surface-alt); color: var(--listo-green-dark); }

.listo-msg-reactions {
  display: flex;
  gap: 4px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.listo-msg-reaction-pill {
  font-size: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.6;
}
.listo-msg-reaction-pill.is-mine {
  background: var(--listo-green-tint);
  border-color: var(--listo-green);
}

.listo-msg-reaction-picker {
  position: fixed;
  z-index: 50;
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.listo-msg-reaction-picker__option {
  border: none;
  background: transparent;
  font-size: 20px;
  padding: 2px;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.1s ease;
}
.listo-msg-reaction-picker__option:hover { transform: scale(1.25); }

.listo-msg-seen {
  font-size: 11px;
  color: var(--ink-muted);
  text-align: right;
  margin: -4px 2px 8px 0;
}

.listo-inbox__reply-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}
.listo-inbox__reply-banner-text { min-width: 0; }
.listo-inbox__reply-banner-text > div {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listo-inbox__reply-banner button {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.listo-inbox__composer-closed-notice {
  padding: 10px 20px;
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-size: 13px;
  text-align: center;
  border-top: 1px solid var(--border);
}
.listo-inbox__composer input:disabled,
.listo-inbox__composer textarea:disabled,
.listo-inbox__composer button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.listo-inbox__composer {
  display: flex;
  gap: 10px;
  padding: 14px 20px 18px;
  align-items: flex-end;
  flex-shrink: 0;
  background: var(--surface);
}
.listo-inbox__composer textarea {
  flex: 1;
  resize: none;
  border-radius: 22px;
  padding: 12px 18px;
  max-height: 120px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.listo-inbox__composer-icon-btn {
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.listo-inbox__composer-icon-btn svg { width: 21px; height: 21px; }
.listo-inbox__composer-icon-btn:hover { background: var(--surface-alt); color: var(--listo-green-dark); }
.listo-inbox__composer-icon-btn[style*="display:none"] { display: none !important; }

.listo-inbox__attach-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.listo-inbox__attach-preview img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
}
.listo-inbox__attach-preview button {
  width: 26px;
  height: 26px;
  border: none;
  background: var(--surface-alt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  cursor: pointer;
}
.listo-inbox__attach-preview button svg { width: 14px; height: 14px; }

.listo-inbox__composer-send {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--listo-green);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(79,169,138,0.35);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.listo-inbox__composer-send:hover { background: var(--listo-green-dark); box-shadow: 0 3px 10px rgba(33,150,243,0.28); }
.listo-inbox__composer-send:active { transform: scale(0.92); }
.listo-inbox__composer-send svg { width: 19px; height: 19px; margin-left: -1px; }

.listo-inbox-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--error);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: middle;
}
.listo-inbox-badge svg { width: 11px; height: 11px; }

/* Plain number pill, no icon — for the host's "Bookings" nav item,
   showing pending reservation-request count. Distinct from
   .listo-inbox-badge above (icon + number, message-specific) since
   this is a generic count, and distinct from
   .listo-account-avatar__badge (position:absolute, built specifically
   to overlay an avatar image, not reusable inline beside text). */
.listo-nav-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--error);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}

@media (max-width: 800px) {
  /* Mobile Inbox is deliberately a two-level experience: list OR chat,
     never both squeezed into one viewport. Keep the app shell itself
     fixed so the message composer can stay attached to the bottom. */
  .listo-inbox {
    grid-template-columns: 1fr;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    overflow: hidden;
    position: relative;
  }
  .listo-inbox__list {
    border-right: none;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .listo-inbox__heading {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 18px 18px 14px;
    background: var(--surface);
  }
  .listo-inbox-thread-item {
    min-height: 78px;
    padding: 14px 16px;
    gap: 12px;
    -webkit-tap-highlight-color: transparent;
  }
  .listo-inbox-thread-item:active {
    background: var(--listo-green-tint);
  }
  .listo-inbox-thread-item__photo {
    width: 46px;
    height: 46px;
    font-size: 16px;
  }
  .listo-inbox-thread-item__title { font-size: 15px; }
  .listo-inbox-thread-item__time { font-size: 11px; }
  .listo-inbox-thread-item__listing-tag {
    max-width: calc(100vw - 120px);
  }
  .listo-inbox-thread-item__preview { font-size: 13px; }

  .listo-inbox__thread {
    display: none;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: var(--surface);
  }
  .listo-inbox--thread-open .listo-inbox__list { display: none; }
  .listo-inbox--thread-open .listo-inbox__thread { display: flex; }
  .listo-inbox-back-btn {
    display: flex;
    width: 40px;
    height: 40px;
    margin-left: -6px;
    -webkit-tap-highlight-color: transparent;
  }
  .listo-inbox__thread-header {
    min-height: 64px;
    padding: 10px 12px;
    gap: 10px;
    position: relative;
    flex-shrink: 0;
  }
  .listo-inbox__thread-header-avatar {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }
  .listo-inbox__thread-header-name {
    font-size: 15px;
    line-height: 1.2;
  }
  .listo-inbox__thread-header .listo-caption {
    max-width: calc(100vw - 110px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
  }
  .listo-inbox__messages {
    padding: 14px 12px 8px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .listo-msg-bubble {
    max-width: 84%;
    font-size: 15px;
    padding: 10px 14px;
  }
  .listo-msg-bubble-wrap { max-width: 84%; }
  .listo-msg-bubble-wrap .listo-msg-bubble { max-width: 100%; }
  .listo-msg-bubble__image { max-width: min(260px, 72vw); }
  .listo-inbox__reply-banner { padding: 8px 12px; }
  .listo-inbox__attach-preview { padding: 8px 12px; }
  .listo-inbox__composer-closed-notice {
    padding: 10px 12px;
  }
  .listo-inbox__composer {
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    min-height: 58px;
  }
  .listo-inbox__composer-icon-btn {
    width: 38px;
    height: 38px;
  }
  .listo-inbox__composer textarea {
    min-height: 40px;
    padding: 10px 14px;
    font-size: 15px;
  }
  .listo-inbox__composer-send {
    width: 40px;
    height: 40px;
  }
}

/* Support Live Chat — single-conversation view (no thread list, since
   a user only ever has at most one open case), reusing the same
   bubble visual language as the guest/host inbox above rather than
   inventing a new one, but with its own simpler class names since
   support messages are text-only. */
.listo-support-chat {
  display: flex;
  flex-direction: column;
  height: 600px;
  max-height: 70vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.listo-support-chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-weight: 700;
  flex-shrink: 0;
}
.listo-support-idle-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
  flex-shrink: 0;
}
.listo-support-idle-warning__text { flex: 1; }
.listo-support-idle-warning__button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.listo-support-idle-warning__button:hover { opacity: 0.85; }

.listo-support-chat__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.listo-support-msg {
  max-width: 68%;
  padding: 11px 16px;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.45;
  margin-bottom: 10px;
  align-self: flex-start;
}
.listo-support-msg--self {
  background: var(--listo-green);
  color: #fff;
  align-self: flex-end;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 18px;
}
.listo-support-msg__time {
  display: block;
  font-size: 10.5px;
  opacity: 0.6;
  margin-top: 5px;
}
.listo-support-chat__composer {
  display: flex;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
  align-items: flex-end;
  flex-shrink: 0;
  background: var(--surface);
}
.listo-support-chat__composer textarea {
  flex: 1;
  resize: none;
  border-radius: 22px;
  padding: 12px 18px;
  max-height: 120px;
}
.listo-support-msg-seen {
  font-size: 11px;
  color: var(--ink-muted);
  text-align: right;
  margin: -4px 2px 8px 0;
}
.listo-support-sound-toggle {
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.listo-support-sound-toggle svg { width: 18px; height: 18px; }
/* Muted state — a diagonal line through the speaker icon, the same
   universally recognized "muted" pattern rather than inventing a new
   visual language just for this one control. */
.listo-support-sound-toggle.is-muted { position: relative; opacity: 0.55; }
.listo-support-sound-toggle.is-muted::after {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  top: 50%;
  height: 2px;
  background: currentColor;
  transform: rotate(-45deg);
}

.listo-superhost-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  background: #FFF4E0;
  color: #9A6700;
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 8px;
  vertical-align: middle;
}

.listo-complaint-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.listo-complaint-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.listo-complaint-card__title {
  font-weight: 700;
  font-size: 15px;
}

/* Host Dashboard — month selector + Download Report, above the panel
   grid. Desktop: title left, controls right, one row. Mobile: stacks,
   with the dropdown and button sitting side by side (not full-width
   stacked on top of each other) since neither needs the full width
   of a narrow screen on its own. */
.listo-earnings__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.listo-earnings__header h1 { margin: 0; }
.listo-earnings__header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.listo-earnings__header-controls .listo-select { min-width: 160px; }
@media (max-width: 560px) {
  .listo-earnings__header { flex-direction: column; align-items: stretch; }
  .listo-earnings__header-controls { width: 100%; }
  .listo-earnings__header-controls .listo-select { flex: 1; min-width: 0; }
  .listo-earnings__header-controls .listo-btn { flex-shrink: 0; }
}

/* My Earnings — panel grid */
.listo-earnings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 20px;
}
@media (max-width: 800px) {
  .listo-earnings-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .listo-earnings-grid { grid-template-columns: 1fr; }
}
.listo-earnings-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.listo-earnings-panel--highlight {
  background: var(--listo-green-tint);
  border-color: var(--listo-green);
}
.listo-earnings-panel__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--listo-green-dark);
}
.listo-earnings-panel--highlight .listo-earnings-panel__icon {
  background: var(--surface);
}
.listo-earnings-panel__icon svg { width: 18px; height: 18px; }
.listo-earnings-panel__label {
  font-size: 13px;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.listo-earnings-panel__value {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}
.listo-earnings-panel--highlight .listo-earnings-panel__value {
  color: var(--listo-green-dark);
}

.listo-welcome-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.listo-welcome-message {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  margin: 20px 0 0;
  text-align: center;
}
.listo-welcome-message strong {
  font-weight: 800;
  color: var(--listo-green-dark);
}

/* Co-hosts page — each listing's own panel gets a subtle tint instead
   of plain white, so multiple listings' sections visually separate at
   a glance while scrolling, not just via the thin border alone.
   Reuses the same light teal already established elsewhere in the
   palette (status badges, focus states) rather than introducing a new
   one-off color. Scoped specifically to this page, per what was
   asked — not extended to External Calendars' similar per-listing
   panels, which have the same plain-white structure today but weren't
   part of this request. */
.listo-cohost-listing {
  background: var(--listo-green-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

/* Per-co-host grouping within a remittance list (My earnings, By
   co-host) — was previously an inline style repeated at every use
   site; moved to CSS during this page's redesign pass. */
.listo-cohost-remittance-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

/* A single booking's remittance line (Upcoming, By co-host, My
   earnings' Remittance history) — used extensively throughout the
   Co-hosts page but was never actually given its own styling
   anywhere; added here as part of that page's redesign pass for a
   cleaner, more distinct look, rather than left as plain unstyled
   text and buttons. */
.listo-remittance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 0;
}
.listo-remittance-row:not(:last-child) {
  border-bottom: 1px solid var(--border);
}
@media (max-width: 480px) {
  .listo-remittance-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Co-hosts — active co-hosts table. No existing table style anywhere
   else in this project to match (everything else has been card/list-
   based), built fresh here matching the established border-color/
   radius variables rather than raw browser-default table styling. */
.listo-cohost-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
}
.listo-cohost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.listo-cohost-table th,
.listo-cohost-table td {
  text-align: left;
  padding: 10px 14px;
  white-space: nowrap;
}
.listo-cohost-table th {
  background: var(--surface-alt);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.listo-cohost-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--border);
}
.listo-cohost-table .listo-cohost-remove {
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.listo-cohost-table .listo-cohost-remove:hover { color: var(--error); }

/* Received-invitation cards — found completely unstyled while
   verifying this page for both views (a pre-existing gap from when
   this section was first built, not something introduced by the
   table work above). Desktop: title and actions side by side; mobile:
   stacked, so two buttons don't get squeezed uncomfortably narrow
   next to a title on a small screen. */
.listo-cohost-invite-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}
.listo-cohost-invite-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .listo-cohost-invite-card {
    flex-direction: column;
    align-items: stretch;
  }
  .listo-cohost-invite-actions .listo-btn { flex: 1; }
}

/* Pending-invitations list rows — also found completely unstyled
   while verifying this page, same as the received-invitation cards
   above. Desktop: email/permission, status badge, and remove all in
   one row. Mobile stacks each of the row's three pieces onto its own
   line in order (email/permission, then status, then remove,
   right-aligned) — simpler than trying to group status+remove back
   onto one shared line via CSS alone, which would need an actual
   wrapping element in the markup to do reliably.

   Scoped specifically to div.listo-cohost-existing-row, NOT the bare
   class alone — the exact same class name is also used on the active
   co-hosts table's own <tr> elements (kept deliberately identical so
   the existing remove-button JS works against both without needing
   two versions), and display:flex forced onto a <tr> completely
   breaks the browser's native table column alignment, exactly the bug
   reported from a real screenshot. A real, concrete mistake from
   introducing this rule without checking whether the class was
   already in use elsewhere for something else — caught from direct,
   visual evidence and fixed here, not by renaming the class (which
   would risk breaking the JS that specifically depends on it staying
   the same across both). */
div.listo-cohost-existing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
  margin-bottom: 8px;
}
@media (max-width: 480px) {
  div.listo-cohost-existing-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  div.listo-cohost-existing-row .listo-cohost-remove {
    align-self: flex-end;
  }
}

/* Mobile — the same table markup restyles into stacked cards rather
   than scrolling sideways through 5 columns, which would be a
   genuinely awkward way to read this on a phone. No separate markup
   to keep in sync: each row becomes a card, each cell becomes its own
   labeled line within it, using the label already sitting in that
   cell's own data-label attribute rather than a second, duplicated
   copy of the column headers. 480px — this project's established
   breakpoint for this kind of fine-grained "fits nicely on a phone"
   layout decision specifically (900px is reserved for the larger
   desktop-layout/sidebar-vs-sticky-bar kind of switch instead). */
@media (max-width: 480px) {
  .listo-cohost-table-wrap { overflow-x: visible; border: none; }
  .listo-cohost-table thead { display: none; }
  .listo-cohost-table, .listo-cohost-table tbody, .listo-cohost-table tr, .listo-cohost-table td {
    display: block;
    width: 100%;
  }
  .listo-cohost-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .listo-cohost-table td {
    padding: 4px 0;
    white-space: normal;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .listo-cohost-table td:not([data-label=""])::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 12px;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
  }
  /* The remove-button cell — no label, right-aligned on its own row
     within the card rather than sitting oddly beside an empty label. */
  .listo-cohost-table td[data-label=""] {
    justify-content: flex-end;
    padding-top: 8px;
  }
}

/* Co-hosts page — each major section (My earnings, Invitations, By
   co-host, Co-hosts on your listings) wrapped in its own distinct
   card, per explicit direction ("make each section more distinct").
   Before this, sections were just stacked headings and text with no
   real visual separation from each other or the page background. */
.listo-cohost-page-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}
.listo-cohost-page-section h2 {
  margin-top: 0;
  margin-bottom: 4px;
}
.listo-cohost-page-section h2 + p.listo-caption {
  margin-bottom: 16px;
}
/* A sub-section within a card (Upcoming / Remittance history within
   My earnings, Upcoming within By co-host) — a lighter visual step
   than a full new card, since these belong to the section around
   them, not separate from it. */
.listo-cohost-subsection {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 20px;
}
.listo-cohost-subsection h3 {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 16px;
}
.listo-cohost-subsection h3 + p.listo-caption {
  margin-bottom: 12px;
}
@media (max-width: 480px) {
  .listo-cohost-page-section { padding: 16px; }
}

/* Terms of Service / Privacy Policy — long-form text pages, so
   constrained to the same readable content width already established
   elsewhere in this project (720px), with generous line-height and
   paragraph spacing for a genuinely readable legal document rather
   than full-width, cramped text. */
.listo-legal-page {
  max-width: 720px;
  margin: 0 auto;
}
.listo-legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.listo-legal-back:hover { text-decoration: underline; }
.listo-legal-page h2 {
  margin-top: 32px;
  margin-bottom: 8px;
}
.listo-legal-page p {
  line-height: 1.7;
  margin-bottom: 16px;
}

/* Mobile homepage hero — literal copy of Airbnb's own mobile layout
   per explicit direction: no header (logo/menus) at the top at all,
   replaced immediately by the search bar. Scoped narrowly via
   .listo-header--mobile-hero (set only by front-page.php, only for a
   genuine homepage visit while logged out — see header.php) rather
   than a blanket "hide header on mobile" rule, since this is
   deliberately homepage-only, logged-out-only, per explicit
   direction — every other page, and the homepage for a logged-in
   visitor, keeps the existing header completely unchanged. */
@media (max-width: 900px) {
  .listo-header--mobile-hero {
    display: none;
  }
}

/* Same reasoning as the homepage's own mobile hero above — search
   results (mobile, logged-out only) also removes the header
   (logo/menus) entirely, per explicit direction, so the search bar's
   own top bar (back arrow + collapsed pill) can move up into that
   space instead. Scoped via its own class/flag, set only for this one
   page — every other page keeps the header unchanged. */
@media (max-width: 900px) {
  .listo-header--search-results-mobile {
    display: none;
  }
}

/* NEXT1268 — Mobile directory/search-results header cleanup. The results
   page keeps the compact Listo header/account controls, but the marketplace
   category row and the global search field are Home-level discovery controls
   and must not remain on the results page. The selector is intentionally
   direct and high-specificity so it wins over the marketplace header rules
   loaded later in this stylesheet. */
@media (max-width: 900px) {
  .listo-header--search-results-mobile .listo-market-nav,
  .listo-header--search-results-mobile .listo-header__marketplace-search {
    display: none !important;
  }

  .listo-header--search-results-mobile .listo-header__inner {
    min-height: 72px !important;
  }
}

/* Mobile bottom nav — literal copy of Airbnb's own mobile layout per
   explicit direction, homepage + logged-out only (see the PHP
   comment in homepage-content.php for the full scoping reasoning).
   Desktop-hidden here; the PHP side already skips rendering this
   entirely for a logged-in visitor. */
.listo-mobile-bottom-nav {
  display: none;
}
@media (max-width: 900px) {
  .listo-mobile-bottom-nav {
    display: flex;
    justify-content: center;
    gap: 48px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}
/* Reserves the same space the fixed nav actually occupies, so it
   never covers the last row of listings — a dedicated spacer
   rendered by the same PHP block as the nav itself (see
   homepage-content.php), rather than a CSS selector trying to target
   "the homepage's own main content" from outside, which .home alone
   can't actually distinguish from the search-results view sharing
   that same body class. */
.listo-mobile-bottom-nav-spacer {
  display: none;
}
@media (max-width: 900px) {
  .listo-mobile-bottom-nav-spacer {
    display: block;
    height: 64px;
  }
}
.listo-mobile-bottom-nav__item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
}
.listo-mobile-bottom-nav__item svg {
  width: 24px;
  height: 24px;
}
.listo-mobile-bottom-nav__item.is-active {
  color: var(--listo-green);
}

/* ========================================================================
   Homepage pricing-transparency notice
   ======================================================================== */

.listo-price-transparency-notice {
  position: fixed;
  left: 50%;
  bottom: 72px;
  z-index: 220;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 20px 0 14px;
  border: 1px solid rgba(26,26,26,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.97);
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  color: var(--ink);
  transform: translate3d(-50%, calc(100vh + 40px), 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.75s ease, transform 1.0s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform, filter;
  white-space: nowrap;
}
.listo-price-transparency-notice.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}
.listo-price-transparency-notice.is-dismissed {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(-50%, 16px, 0) scale(0.96);
  transition: opacity 1.05s cubic-bezier(.22,1,.36,1),
              transform 1.05s cubic-bezier(.22,1,.36,1),
              filter 1.05s cubic-bezier(.22,1,.36,1),
              visibility 0s linear 1.05s;
  visibility: hidden;
}
.listo-price-transparency-notice__icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--listo-green);
  color: #fff;
}
.listo-price-transparency-notice__icon svg {
  width: 19px;
  height: 19px;
}
.listo-price-transparency-notice__text {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  isolation: isolate;
}
.listo-price-transparency-notice__char {
  display: inline-block;
  transform-origin: 50% 70%;
  will-change: transform;
}
.listo-price-transparency-notice.is-visible .listo-price-transparency-notice__char {
  animation: listo-price-notice-wave 1.15s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(0.16s + var(--char-index) * 0.035s);
}
.listo-price-transparency-notice.is-visible .listo-price-transparency-notice__text::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: -35%;
  bottom: -35%;
  left: -35%;
  width: 24%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  animation: listo-price-notice-shine 1.05s ease 0.25s both;
  pointer-events: none;
}
@keyframes listo-price-notice-wave {
  0%, 100% { transform: scale(1); }
  22% { transform: scale(1.20); }
  48% { transform: scale(1.08); }
  68% { transform: scale(1); }
}
@keyframes listo-price-notice-shine {
  0% { left: -35%; opacity: 0; }
  12% { opacity: 1; }
  72% { left: 112%; opacity: 1; }
  100% { left: 112%; opacity: 0; }
}

@media (max-width: 900px) {
  .listo-price-transparency-notice {
    bottom: 76px;
    max-width: calc(100vw - 32px);
    min-height: 50px;
    padding-right: 16px;
    border-radius: 15px;
  }
  .listo-price-transparency-notice__text {
    font-size: 14px;
  }
}


/* ==========================================================================
   Host Cancellation Request (Gap 1 / Decision 1)
   ========================================================================== */

.listo-host-cancel-modal {
  max-width: 560px;
  padding: 28px;
}

.listo-host-cancel-category {
  margin-bottom: 18px;
}
.listo-host-cancel-category__label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.listo-host-cancel-reason {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 14px;
}
.listo-host-cancel-reason:hover {
  border-color: var(--ink-muted);
}
.listo-host-cancel-reason input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.listo-host-cancel-status {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 16px;
}
.listo-host-cancel-status--pending {
  border-color: #e0b400;
  background: #fff9e6;
}
.listo-host-cancel-status p {
  margin: 6px 0 12px;
}

/* Cancellation-request banner inside a booking-scoped chat thread
   (guest inbox). Sits above the message list, inside the already
   existing thread-active panel — additive to the messaging UI, not a
   replacement of it. */
.listo-host-cancel-banner {
  padding: 14px 16px;
  border: 1px solid #e0b400;
  background: #fff9e6;
  border-radius: var(--radius);
  margin: 12px 16px 0;
}
.listo-host-cancel-banner__title {
  font-weight: 700;
  margin-bottom: 4px;
}
.listo-host-cancel-banner__meta {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.listo-host-cancel-banner__meta div {
  margin-bottom: 2px;
}
.listo-host-cancel-banner__countdown {
  font-weight: 600;
  margin-bottom: 12px;
}
.listo-host-cancel-banner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .listo-host-cancel-modal {
    padding: 20px;
    max-width: 100%;
  }
  .listo-host-cancel-reason {
    font-size: 15px;
    padding: 12px;
  }
  .listo-host-cancel-status,
  .listo-host-cancel-banner {
    padding: 14px;
    margin-left: 0;
    margin-right: 0;
  }
  .listo-host-cancel-banner__actions {
    flex-direction: column;
  }
  .listo-host-cancel-banner__actions .listo-btn {
    width: 100%;
  }
}

/* ==========================================================================
   Booking Inquiry card — inline in a chat thread, on the specific
   message that started a pre-booking Inquiry (Contact Host page).
   ========================================================================== */

.listo-inquiry-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  text-decoration: none;
  color: inherit;
  margin-bottom: 8px;
  max-width: 320px;
}
.listo-inquiry-card:hover {
  border-color: var(--ink-muted);
}
.listo-inquiry-card__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.listo-inquiry-card__price {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}
.listo-inquiry-card__dates {
  font-size: 13px;
  color: var(--ink-muted);
}
.listo-inquiry-card__listing {
  font-size: 13px;
  margin-top: 4px;
  font-weight: 600;
}
.listo-inquiry-card__photo {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .listo-inquiry-card {
    max-width: 100%;
  }
}

/* ==========================================================================
   Contact Host page (dates-first pre-booking Inquiry)
   ========================================================================== */

.listo-contact-host {
  position: relative;
  padding-top: 8px;
}
.listo-contact-host__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ink);
  margin-bottom: 12px;
}
.listo-contact-host__back:hover {
  background: var(--surface-alt);
}
.listo-contact-host__back svg {
  width: 22px;
  height: 22px;
}
.listo-contact-host__title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}
.listo-contact-host__host-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}
.listo-contact-host__host-name {
  font-weight: 700;
}
.listo-contact-host__faq-heading {
  font-size: 15px;
  font-weight: 700;
  margin: 18px 0 8px;
}
.listo-contact-host__faq-list {
  margin: 0;
  padding-left: 20px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
.listo-contact-host__faq-list li {
  margin-bottom: 4px;
}

.listo-contact-host__summary {
  position: sticky;
  top: 126px;
}
.listo-contact-host__summary-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.listo-contact-host__summary-price {
  font-size: 20px;
  font-weight: 700;
}
.listo-contact-host__summary-photo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .listo-contact-host__summary {
    position: static;
  }
}
@media (max-width: 480px) {
  .listo-contact-host__title {
    font-size: 20px;
  }
}


/* ==========================================================================
   Pre-approval / Special Offer card — inline in chat, same spot as the
   Booking Inquiry card, for the one message that carries an offer.
   ========================================================================== */

.listo-offer-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: 8px;
  max-width: 320px;
}
.listo-offer-card__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.listo-offer-card__price {
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 2px;
}
.listo-offer-card__dates {
  font-size: 13px;
  color: var(--ink-muted);
}
.listo-offer-card__listing {
  font-size: 13px;
  margin-top: 4px;
  font-weight: 600;
}
.listo-offer-card__expiry {
  font-size: 12px;
  color: var(--error);
  font-weight: 600;
  margin-top: 8px;
}
.listo-offer-card__status {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 8px;
  font-style: italic;
}
.listo-offer-card__cta {
  display: block;
  text-align: center;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .listo-offer-card {
    max-width: 100%;
  }
}

/* ==========================================================================
   Host Inbox sidebar — Reservation/Inquiry + About Guest panels,
   host Inbox only. Message column made slightly more compact to make
   room for it, matching Airbnb's own compact-inbox layout.
   ========================================================================== */

.listo-inbox--host {
  grid-template-columns: 320px 1fr 280px;
}
.listo-inbox-sidebar {
  border-left: 1px solid var(--border);
  padding: 20px 16px;
  overflow-y: auto;
}
.listo-inbox-sidebar__panel {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.listo-inbox-sidebar__panel:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.listo-inbox-sidebar__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.listo-inbox-sidebar__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
.listo-inbox-sidebar__guest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.listo-inbox-sidebar__guest-row .listo-inbox-sidebar__title {
  margin-bottom: 0;
}
.listo-inbox-sidebar__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--ink);
}
.listo-inbox-sidebar__facts li {
  padding: 5px 0;
  border-top: 1px solid var(--border);
}
.listo-inbox-sidebar__facts li:first-child {
  border-top: none;
}
.listo-inbox-sidebar__actions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 1100px) {
  .listo-inbox--host {
    grid-template-columns: 300px 1fr 240px;
  }
}
@media (max-width: 800px) {
  .listo-inbox--host {
    grid-template-columns: 1fr;
  }
  .listo-inbox-sidebar {
    display: none !important;
  }
}

/* ==========================================================================
   Mobile Inbox conversation details drawer — NEXT129. The desktop Host
   sidebar remains a third column; on mobile the same server-rendered
   content becomes an on-demand slide-in drawer so the chat stays full-screen.
   ========================================================================== */
.listo-inbox__thread-header-copy {
  min-width: 0;
  flex: 1;
}
.listo-inbox-info-btn {
  display: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--listo-green);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.listo-inbox-info-btn svg { width: 20px; height: 20px; }
.listo-inbox-info-btn:hover,
.listo-inbox-info-btn:focus-visible,
.listo-inbox-info-btn:active { background: var(--listo-green-tint); color: var(--listo-green-dark); outline: none; }
.listo-inbox-mobile-info-backdrop {
  display: none;
}
.listo-inbox-sidebar__mobile-header {
  display: none;
}
@media (max-width: 800px) {
  .listo-inbox-info-btn { display: flex; color: var(--listo-green); }
  .listo-inbox-mobile-info-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0,0,0,.34);
  }
  .listo-inbox-sidebar {
    display: none !important;
    position: fixed;
    z-index: 1201;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(88vw, 380px);
    max-width: 100%;
    padding: 0;
    border-left: 1px solid var(--border);
    background: var(--surface);
    box-shadow: -8px 0 28px rgba(0,0,0,.14);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .listo-inbox-sidebar.is-open {
    display: block !important;
  }
  .listo-inbox-sidebar__mobile-header {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 62px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .listo-inbox-sidebar__mobile-header strong {
    font-size: 16px;
  }
  .listo-inbox-sidebar__mobile-header button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .listo-inbox-sidebar__mobile-header button svg { width: 18px; height: 18px; }
  .listo-inbox-sidebar #listo-inbox-sidebar-content {
    padding: 18px 16px 28px;
  }
  .listo-inbox-sidebar #listo-inbox-sidebar-content .listo-inbox-sidebar__panel {
    padding-bottom: 18px;
    margin-bottom: 18px;
  }
  .listo-inbox-sidebar #listo-inbox-sidebar-content .listo-inbox-sidebar__title {
    font-size: 17px;
  }
}

/* ==========================================================================\n   NEXT134 — Host Bookings calendar workspace\n   ========================================================================== */
.listo-bookings-workspace { margin-top: 18px; }
.listo-bookings-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.listo-bookings-summary__item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 15px 17px; display: flex; flex-direction: column; gap: 3px; }
.listo-bookings-summary__item strong { font-size: 22px; line-height: 1.1; }
.listo-bookings-summary__item span { color: var(--ink-muted); font-size: 13px; }
.listo-bookings-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.listo-bookings-view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; background: var(--surface-alt); }
.listo-bookings-view-btn { appearance: none; border: 0; background: transparent; border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-muted); cursor: pointer; }
.listo-bookings-view-btn.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.listo-bookings-toolbar__actions { display: flex; align-items: center; gap: 8px; }
.listo-bookings-toolbar__actions .listo-btn { min-width: 42px; padding: 9px 12px; text-align: center; }
.listo-bookings-month-label { min-width: 142px; text-align: center; font-size: 18px; font-weight: 800; }
.listo-bookings-calendar-view { display: grid; grid-template-columns: 260px minmax(0, 1fr); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.listo-bookings-listings { border-right: 1px solid var(--border); background: var(--surface); position: relative; z-index: 3; }
.listo-bookings-listings__heading { height: 66px; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 800; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.listo-bookings-listing-filter { display: flex; align-items: center; gap: 10px; min-height: 78px; padding: 10px 12px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.listo-bookings-listing-filter:hover { background: var(--surface-alt); }
.listo-bookings-listing-filter.is-active { background: var(--listo-green-tint); box-shadow: inset 3px 0 0 var(--listo-green); }
.listo-bookings-listing-filter > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.listo-bookings-listing-filter strong { font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listo-bookings-listing-filter small { color: var(--ink-muted); font-size: 11px; }
.listo-bookings-listing-filter__thumb { width: 44px; height: 44px; border-radius: 8px; flex: 0 0 44px; overflow: hidden; background: var(--surface-alt); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); color: var(--listo-green-dark); font-weight: 800; }
.listo-bookings-listing-filter__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listo-bookings-listing-filter__thumb--all { background: var(--listo-green-tint); border-color: transparent; }
.listo-bookings-calendar-scroll { min-width: 0; overflow-x: auto; overflow-y: hidden; }
.listo-bookings-calendar-grid { min-width: max(100%, calc(var(--listo-calendar-days) * 86px)); }
.listo-bookings-calendar-corner { display: none; }
.listo-bookings-day-headings { height: 66px; display: grid; grid-template-columns: repeat(var(--listo-calendar-days), minmax(86px, 1fr)); border-bottom: 1px solid var(--border); }
.listo-bookings-day-heading { border-right: 1px solid var(--border); padding: 9px 7px; display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; color: var(--ink-muted); }
.listo-bookings-day-heading strong { font-size: 14px; color: var(--ink); }
.listo-bookings-day-heading span { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; }
.listo-bookings-day-heading.is-today { background: var(--listo-green-tint); }
.listo-bookings-day-heading.is-today strong { color: var(--listo-green-dark); }
.listo-bookings-calendar-row { display: grid; grid-template-columns: 0 minmax(0, 1fr); min-height: var(--listo-row-height); }
.listo-bookings-calendar-listing-label { display: none; }
.listo-bookings-calendar-track { position: relative; min-height: var(--listo-row-height); display: grid; grid-template-columns: repeat(var(--listo-calendar-days), minmax(86px, 1fr)); border-bottom: 1px solid var(--border); }
.listo-bookings-calendar-cell { border-right: 1px solid var(--border); min-height: var(--listo-row-height); background: var(--surface); }
.listo-bookings-calendar-cell.is-today { background: linear-gradient(90deg, var(--listo-green-tint), rgba(234,246,241,.35)); }
.listo-bookings-calendar-booking { position: absolute; z-index: 2; min-width: 0; height: 25px; border-radius: 7px; padding: 4px 8px; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 6px; overflow: hidden; border-left: 3px solid var(--listo-green); background: var(--listo-green-tint); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-size: 11px; }
.listo-bookings-calendar-booking:hover { filter: brightness(.98); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.listo-bookings-calendar-booking strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listo-bookings-calendar-booking span { color: var(--ink-muted); white-space: nowrap; }
.listo-bookings-calendar-booking.is-pending { border-left-color: #C98A16; background: #FFF5DF; }
.listo-bookings-calendar-booking.is-awaiting { border-left-color: #7B7B7B; background: #F1F1F1; }
.listo-bookings-calendar-empty { padding: 48px 24px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-muted); }
.listo-bookings-calendar-empty strong { color: var(--ink); }
.listo-bookings-list-view[hidden] { display: none !important; }
.listo-bookings-list-view { margin-top: 0; }

@media (max-width: 900px) {
  .listo-bookings-calendar-view { grid-template-columns: 190px minmax(0, 1fr); }
  .listo-bookings-listing-filter { min-height: 68px; padding: 8px 10px; }
  .listo-bookings-listing-filter__thumb { width: 38px; height: 38px; flex-basis: 38px; }
  .listo-bookings-listings__heading, .listo-bookings-day-headings { height: 58px; }
}
@media (max-width: 700px) {
  .listo-bookings-summary { grid-template-columns: 1fr; gap: 8px; }
  .listo-bookings-summary__item { padding: 12px 14px; }
  .listo-bookings-summary__item strong { font-size: 19px; }
  .listo-bookings-toolbar { align-items: stretch; }
  .listo-bookings-view-toggle { flex: 0 0 auto; }
  .listo-bookings-toolbar__actions { width: 100%; justify-content: space-between; }
  .listo-bookings-month-label { flex: 1; min-width: 0; font-size: 16px; }
  .listo-bookings-calendar-view { grid-template-columns: 155px minmax(0, 1fr); }
  .listo-bookings-listings__heading { height: 58px; padding: 0 10px; }
  .listo-bookings-listing-filter { min-height: 70px; }
  .listo-bookings-listing-filter strong { font-size: 12px; }
  .listo-bookings-listing-filter small { font-size: 10px; }
  .listo-bookings-listing-filter__thumb { width: 34px; height: 34px; flex-basis: 34px; }
  .listo-bookings-day-headings { height: 58px; }
  .listo-bookings-day-heading strong { font-size: 13px; }
  .listo-bookings-day-heading span { font-size: 9px; }
  .listo-bookings-calendar-booking { font-size: 10px; padding: 4px 6px; }
  .listo-bookings-calendar-booking span { display: none; }
}

/* ==========================================================================
   NEXT136 — Host Bookings operations layer
   ========================================================================== */
.listo-bookings-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.listo-bookings-summary__item { appearance:none; text-align:left; color:inherit; font:inherit; }
button.listo-bookings-summary__item { cursor:pointer; }
.listo-bookings-summary__item--attention { border-color: rgba(201,138,22,.35); background:#fffaf0; }
.listo-bookings-summary__item--attention strong { color:#9a6810; }
.listo-bookings-options-toggle { white-space:nowrap; }
.listo-bookings-view-options { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:-4px 0 14px; padding:11px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-alt); }
.listo-bookings-view-options label { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; cursor:pointer; }
.listo-bookings-view-options input { accent-color:var(--listo-green); }
.listo-bookings-calendar-cell.is-blocked { background:repeating-linear-gradient(135deg, #f1f1f1 0, #f1f1f1 8px, #e8e8e8 8px, #e8e8e8 9px); }
.listo-bookings-calendar-cell.is-available { background:var(--surface); }
.listo-bookings-hide-prices .listo-booking-calendar-price { display:none; }
.listo-bookings-hide-status .listo-booking-calendar-status { display:none; }
.listo-booking-calendar-status { color:var(--ink-muted); font-style:normal; white-space:nowrap; }
.listo-bookings-hide-availability .listo-bookings-calendar-cell.is-blocked { background:var(--surface); }
.listo-bookings-attention-empty { padding:28px 18px; margin-bottom:20px; border:1px dashed var(--border); border-radius:14px; display:flex; flex-direction:column; gap:4px; color:var(--ink-muted); }
.listo-bookings-attention-empty strong { color:var(--ink); }
.listo-bookings-attention-hidden { display:none !important; }
@media (max-width:900px) { .listo-bookings-summary { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:700px) {
  .listo-bookings-summary { grid-template-columns:1fr 1fr; }
  .listo-bookings-summary__item:last-child { grid-column:1 / -1; }
  .listo-bookings-view-options { align-items:flex-start; flex-direction:column; }
  .listo-bookings-options-toggle { width:100%; }
}

/* ==========================================================================\n   NEXT135 — Host Bookings booking-detail drawer\n   ========================================================================== */
.listo-booking-detail-sources { display:none !important; }
.listo-booking-detail-overlay { position:fixed; inset:0; z-index:99990; background:rgba(15,23,20,.34); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, visibility .18s ease; }
.listo-booking-detail-overlay.is-open { opacity:1; visibility:visible; pointer-events:auto; }
.listo-booking-detail-drawer { position:absolute; top:0; right:0; width:min(440px, 100%); height:100%; overflow-y:auto; background:var(--surface); box-shadow:-10px 0 30px rgba(0,0,0,.14); padding:30px 28px 32px; transform:translateX(100%); transition:transform .2s ease; }
.listo-booking-detail-overlay.is-open .listo-booking-detail-drawer { transform:translateX(0); }
.listo-booking-detail-close { position:absolute; top:16px; right:16px; width:38px; height:38px; border:1px solid var(--border); border-radius:50%; background:var(--surface); color:var(--ink); font-size:25px; line-height:1; cursor:pointer; }
.listo-booking-detail-drawer__eyebrow { margin-top:8px; color:var(--ink-muted); font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.listo-booking-detail-drawer h2 { margin:6px 48px 4px 0; font-size:25px; line-height:1.15; }
.listo-booking-detail-drawer__listing { color:var(--ink-muted); font-size:14px; line-height:1.4; }
.listo-booking-detail-drawer__badges { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.listo-booking-detail-drawer__section { border-top:1px solid var(--border); margin-top:20px; padding-top:18px; }
.listo-booking-detail-drawer__section h3 { margin:0 0 12px; font-size:15px; }
.listo-booking-detail-row { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:8px 0; font-size:14px; }
.listo-booking-detail-row span { color:var(--ink-muted); }
.listo-booking-detail-row strong { text-align:right; max-width:62%; }
.listo-booking-detail-drawer__actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:22px; }
.listo-booking-detail-drawer__actions .listo-btn:last-child { grid-column:1 / -1; }
.listo-booking-detail-drawer__actions [data-drawer-action="cancel"] { color:var(--error); }
/* NEXT999: .listo-btn sets display:inline-flex, which overrides the hidden attribute. Without this the
   Cancel booking button stayed visible even when the script hid it. */
.listo-booking-detail-drawer__actions .listo-btn[hidden] { display:none !important; }
@media (max-width:700px) {
  .listo-booking-detail-drawer { width:100%; padding:24px 18px 28px; }
  .listo-booking-detail-drawer h2 { font-size:22px; }
  .listo-booking-detail-row { flex-direction:column; gap:3px; }
  .listo-booking-detail-row strong { max-width:none; text-align:left; }
  .listo-booking-detail-drawer__actions { grid-template-columns:1fr; }
  .listo-booking-detail-drawer__actions .listo-btn:last-child { grid-column:auto; }
}


/* ==========================================================================
   NEXT137 — Restore full-width Host Bookings workspace
   ========================================================================== */
.listo-bookings-page-shell {
  width: calc(100% - 64px);
  max-width: 1600px;
  box-sizing: border-box;
}

/* The calendar is intentionally wider than ordinary content pages. This is
   an operations workspace, not a reading page; keep the normal Listo header,
   typography and spacing while allowing the calendar to use the available
   desktop viewport. */
@media (min-width: 901px) {
  .listo-bookings-page-shell .listo-bookings-calendar-view {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .listo-bookings-page-shell {
    width: auto;
    max-width: none;
  }
}

/* ==========================================================================
   NEXT138 — AJAX Host Bookings workspace
   ========================================================================== */
.listo-bookings-page-shell.is-refreshing {
  opacity: .62;
  pointer-events: none;
  transition: opacity .15s ease;
  position: relative;
}
.listo-bookings-page-shell.is-refreshing::after {
  content: 'Updating…';
  position: fixed;
  top: 74px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
}


/* ==========================================================================
   NEXT139 — Interactive calendar date cells
   ========================================================================== */
.listo-bookings-calendar-cell { position:relative; appearance:none; -webkit-appearance:none; border-top:0; border-bottom:0; border-left:0; padding:0; cursor:pointer; text-align:left; color:inherit; font:inherit; transition:background .12s ease, box-shadow .12s ease; }
.listo-bookings-calendar-cell:hover { background:var(--surface-alt); box-shadow:inset 0 0 0 2px var(--listo-green-tint); }
.listo-bookings-calendar-cell.has-booking { cursor:pointer; }
.listo-calendar-cell-price { position:absolute; left:7px; bottom:7px; z-index:1; font-size:10px; color:var(--ink-muted); pointer-events:none; white-space:nowrap; }
.listo-bookings-hide-prices .listo-calendar-cell-price { display:none; }
.listo-booking-date-overlay { position:fixed; inset:0; z-index:99989; background:rgba(15,23,20,.30); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, visibility .18s ease; }
.listo-booking-date-overlay.is-open { opacity:1; visibility:visible; pointer-events:auto; }
.listo-booking-date-drawer { position:absolute; top:0; right:0; width:min(400px,100%); height:100%; overflow-y:auto; background:var(--surface); box-shadow:-10px 0 30px rgba(0,0,0,.14); padding:30px 28px 32px; transform:translateX(100%); transition:transform .2s ease; }
.listo-booking-date-overlay.is-open .listo-booking-date-drawer { transform:translateX(0); }
.listo-booking-date-close { position:absolute; top:16px; right:16px; width:38px; height:38px; border:1px solid var(--border); border-radius:50%; background:var(--surface); color:var(--ink); font-size:25px; line-height:1; cursor:pointer; }
.listo-booking-date-drawer h2 { margin:6px 48px 4px 0; font-size:25px; line-height:1.15; }
.listo-booking-date-drawer__listing { color:var(--ink-muted); font-size:14px; line-height:1.4; }
.listo-booking-date-drawer__section { border-top:1px solid var(--border); margin-top:20px; padding-top:18px; }
.listo-booking-date-drawer__actions { display:grid; gap:9px; margin-top:22px; }
@media (max-width:700px) { .listo-booking-date-drawer { width:100%; padding:24px 18px 28px; } .listo-booking-date-drawer h2 { font-size:22px; } }


/* ==========================================================================\n   NEXT140 — Complete month calendar rendering\n   ========================================================================== */
.listo-bookings-calendar-month-grid { overflow: visible; min-width: 0; background: var(--surface); }
.listo-bookings-month-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); background:var(--surface-alt); }
.listo-bookings-month-title strong { font-size:16px; color:var(--ink); }
.listo-bookings-month-title span { font-size:12px; color:var(--ink-muted); }
.listo-bookings-calendar-week { border-bottom:1px solid var(--border); }
.listo-bookings-calendar-week-heading,
.listo-bookings-calendar-week-row { display:grid; grid-template-columns:minmax(150px, 190px) repeat(7, minmax(0, 1fr)); }
.listo-bookings-calendar-week-heading { min-height:58px; background:var(--surface); border-bottom:1px solid var(--border); }
.listo-bookings-calendar-week-label { display:flex; align-items:center; padding:0 12px; border-right:1px solid var(--border); color:var(--ink-muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.listo-bookings-calendar-week-heading .listo-bookings-day-heading { min-width:0; border-right:1px solid var(--border); }
.listo-bookings-calendar-week-heading .listo-bookings-day-heading.is-outside-month { background:#f7f7f7; color:#aaa; }
.listo-bookings-calendar-week-heading .listo-bookings-day-heading.is-outside-month strong { color:#aaa; }
.listo-bookings-calendar-week-row { min-height:78px; }
.listo-bookings-calendar-week-row .listo-bookings-calendar-listing-label { display:flex; align-items:center; min-width:0; padding:10px 12px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); }
.listo-bookings-calendar-week-row .listo-bookings-calendar-listing-label strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:1.25; }
.listo-bookings-calendar-week-track { position:relative; min-width:0; min-height:78px; display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); border-bottom:1px solid var(--border); }
.listo-bookings-calendar-week-track .listo-bookings-calendar-cell { position:relative; min-width:0; min-height:78px; border:0; border-right:1px solid var(--border); border-radius:0; background:var(--surface); padding:0; }
.listo-bookings-calendar-week-track .listo-bookings-calendar-cell.is-outside-month { background:#f7f7f7; cursor:default; box-shadow:none; }
.listo-bookings-calendar-week-track .listo-bookings-calendar-cell.is-today { background:linear-gradient(90deg,var(--listo-green-tint),rgba(234,246,241,.35)); }
.listo-bookings-calendar-week-track .listo-bookings-calendar-cell.is-blocked { background:repeating-linear-gradient(135deg,#f1f1f1 0,#f1f1f1 8px,#e8e8e8 8px,#e8e8e8 9px); }
.listo-bookings-calendar-week-track .listo-bookings-calendar-cell.has-booking { background:linear-gradient(90deg,rgba(234,246,241,.72),rgba(255,255,255,.95)); }
.listo-bookings-calendar-week-track .listo-calendar-cell-price { left:8px; bottom:8px; font-size:11px; font-weight:700; }
.listo-bookings-calendar-week-track .listo-bookings-calendar-booking { left:0; right:auto; width:auto; height:28px; margin:0 5px; padding:5px 8px; border-radius:7px; }
.listo-bookings-calendar-week-track .listo-bookings-calendar-booking span { font-weight:700; }
.listo-bookings-calendar-week-track .listo-bookings-calendar-booking em { display:inline; color:var(--ink-muted); font-size:9px; font-style:normal; white-space:nowrap; }
.listo-bookings-calendar-week-track .listo-bookings-calendar-booking { grid-column:auto; }
.listo-bookings-calendar-week-track .listo-bookings-calendar-booking[style] { grid-row:1; }
.listo-bookings-calendar-week-track .listo-bookings-calendar-booking { position:absolute; }
.listo-bookings-calendar-week-track .listo-bookings-calendar-booking[data-attention="1"] { box-shadow:0 0 0 1px rgba(201,138,22,.22),0 1px 3px rgba(0,0,0,.08); }
.listo-bookings-calendar-week-track .listo-bookings-calendar-booking.is-paid { border-left-color:var(--listo-green); background:var(--listo-green-tint); }
.listo-bookings-calendar-week-track .listo-bookings-calendar-booking.is-pending { border-left-color:#C98A16; background:#FFF5DF; }
.listo-bookings-calendar-week-track .listo-bookings-calendar-booking.is-awaiting { border-left-color:#7B7B7B; background:#F1F1F1; }
.listo-bookings-calendar-week-track .listo-bookings-calendar-booking strong { max-width:45%; }
@media (max-width:900px) {
  .listo-bookings-calendar-week-heading,
  .listo-bookings-calendar-week-row { grid-template-columns:minmax(120px,150px) repeat(7,minmax(92px,1fr)); }
  .listo-bookings-calendar-month-grid { overflow-x:auto; }
  .listo-bookings-calendar-week { min-width:794px; }
}
@media (max-width:700px) {
  .listo-bookings-calendar-month-grid { overflow-x:auto; }
  .listo-bookings-calendar-week { min-width:740px; }
  .listo-bookings-calendar-week-heading,
  .listo-bookings-calendar-week-row { grid-template-columns:120px repeat(7,88px); }
  .listo-bookings-calendar-week-row,
  .listo-bookings-calendar-week-track,
  .listo-bookings-calendar-week-track .listo-bookings-calendar-cell { min-height:72px; }
  .listo-bookings-calendar-week-track .listo-bookings-calendar-booking { font-size:10px; }
  .listo-bookings-calendar-week-track .listo-bookings-calendar-booking em { display:none; }
  .listo-bookings-calendar-week-track .listo-bookings-calendar-booking span { display:none; }
}

/* NEXT141 — restore the Host calendar to a continuous Airbnb-style month grid. */
.listo-bookings-calendar-month-grid { overflow-x:auto; overflow-y:hidden; min-width:0; background:var(--surface); }
.listo-bookings-calendar-table { min-width:max(100%, calc((var(--listo-bookings-day-count) * 76px) + 190px)); }
.listo-bookings-calendar-table__header,
.listo-bookings-calendar-table__row { display:grid; grid-template-columns:190px repeat(var(--listo-bookings-day-count), minmax(76px,1fr)); }
.listo-bookings-calendar-table__header { min-height:62px; border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:4; }
.listo-bookings-calendar-table__corner { display:flex; align-items:center; padding:0 12px; border-right:1px solid var(--border); font-size:12px; font-weight:800; color:var(--ink); }
.listo-bookings-calendar-table__header .listo-bookings-day-heading { min-width:0; border-right:1px solid var(--border); padding:8px 4px; }
.listo-bookings-calendar-table__row { min-height:92px; }
.listo-bookings-calendar-table__listing-label { display:flex; align-items:center; min-width:0; padding:12px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); position:sticky; left:0; z-index:3; }
.listo-bookings-calendar-table__listing-label strong { font-size:12px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.listo-bookings-calendar-table__track { position:relative; min-width:0; min-height:92px; display:grid; grid-template-columns:repeat(var(--listo-bookings-day-count), minmax(76px,1fr)); border-bottom:1px solid var(--border); }
.listo-bookings-calendar-table__track .listo-bookings-calendar-cell { min-width:0; min-height:92px; border:0; border-right:1px solid var(--border); border-radius:0; padding:0; background:var(--surface); display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:3px; padding:8px; }
.listo-bookings-calendar-table__track .listo-bookings-calendar-cell:hover { background:var(--surface-alt); box-shadow:inset 0 0 0 2px var(--listo-green-tint); }
.listo-bookings-calendar-table__track .listo-bookings-calendar-cell.is-today { background:linear-gradient(90deg,var(--listo-green-tint),rgba(234,246,241,.35)); }
.listo-bookings-calendar-table__track .listo-bookings-calendar-cell.is-blocked { background:repeating-linear-gradient(135deg,#f1f1f1 0,#f1f1f1 8px,#e8e8e8 8px,#e8e8e8 9px); }
.listo-calendar-cell-date { font-size:10px; color:var(--ink-muted); font-weight:700; }
.listo-calendar-cell-price { position:static !important; font-size:11px; font-weight:700; color:var(--ink); white-space:nowrap; }
.listo-bookings-calendar-table__track .listo-bookings-calendar-booking { position:absolute; left:4px; right:auto; height:28px; margin:0; min-width:0; padding:5px 8px; border-radius:7px; display:flex; align-items:center; gap:6px; overflow:hidden; z-index:2; }
.listo-bookings-calendar-table__track .listo-bookings-calendar-booking strong { max-width:48%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.listo-bookings-calendar-table__track .listo-bookings-calendar-booking span { white-space:nowrap; font-weight:700; }
.listo-bookings-calendar-table__track .listo-bookings-calendar-booking em { white-space:nowrap; font-size:9px; font-style:normal; color:var(--ink-muted); }
@media (max-width:900px){
 .listo-bookings-calendar-table { min-width:calc(190px + (var(--listo-bookings-day-count) * 82px)); }
 .listo-bookings-calendar-table__header,.listo-bookings-calendar-table__row { grid-template-columns:160px repeat(var(--listo-bookings-day-count),82px); }
 .listo-bookings-calendar-table__track { grid-template-columns:repeat(var(--listo-bookings-day-count),82px); }
 .listo-bookings-calendar-table__listing-label { position:sticky; left:0; z-index:3; }
}

/* NEXT142 — simplified Host Bookings workspace */
.listo-bookings-workspace--simple { margin-top: 8px; }
.listo-bookings-workspace--simple .listo-bookings-toolbar--simple { margin: 18px 0 12px; border: 0; padding: 0; background: transparent; }
.listo-bookings-workspace--simple .listo-bookings-view-toggle { display:inline-flex; padding:3px; border:1px solid var(--border); border-radius:999px; background:var(--surface-alt); }
.listo-bookings-workspace--simple .listo-bookings-view-btn { border:0; background:transparent; border-radius:999px; padding:8px 16px; font:inherit; font-size:13px; font-weight:700; color:var(--ink-muted); cursor:pointer; }
.listo-bookings-workspace--simple .listo-bookings-view-btn.is-active { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.listo-bookings-filters { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; margin-bottom:18px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.listo-bookings-filter-group { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.listo-bookings-filter { appearance:none; border:1px solid transparent; background:transparent; color:var(--ink-muted); border-radius:999px; padding:7px 11px; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.listo-bookings-filter:hover { background:var(--surface-alt); color:var(--ink); }
.listo-bookings-filter.is-active { background:var(--listo-green-tint); color:var(--ink); border-color:rgba(33,150,243,.22); }
.listo-bookings-filter-select { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--ink-muted); white-space:nowrap; }
.listo-bookings-filter-select select { min-width:190px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink); padding:8px 30px 8px 10px; font:inherit; font-size:12px; }
.listo-bookings-filter-hidden { display:none !important; }
.listo-bookings-calendar-view { margin-top:4px; }
.listo-bookings-calendar-simple-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; border:1px solid var(--border); border-bottom:0; border-radius:12px 12px 0 0; background:var(--surface); }
.listo-bookings-calendar-simple-head strong { display:block; font-size:18px; color:var(--ink); }
.listo-bookings-calendar-simple-head span { display:block; margin-top:3px; font-size:12px; color:var(--ink-muted); }
.listo-bookings-calendar-nav { display:flex; align-items:center; gap:6px; }
.listo-bookings-calendar-nav a { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:34px; padding:0 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink); text-decoration:none; font-size:12px; font-weight:700; }
.listo-bookings-calendar-nav a:hover { background:var(--surface-alt); }
.listo-bookings-calendar-simple { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--border); border-radius:0 0 12px 12px; overflow:hidden; background:var(--surface); }
.listo-bookings-calendar-simple__weekday { padding:9px 10px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); color:var(--ink-muted); background:var(--surface-alt); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.listo-bookings-calendar-simple__weekday:nth-child(7) { border-right:0; }
.listo-bookings-calendar-simple__day { min-height:116px; padding:9px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); }
.listo-bookings-calendar-simple__day:nth-child(7n) { border-right:0; }
.listo-bookings-calendar-simple__day.is-outside { background:#fafafa; color:#aaa; }
.listo-bookings-calendar-simple__day.is-today { background:linear-gradient(180deg,var(--listo-green-tint),var(--surface)); }
.listo-bookings-calendar-simple__date { font-size:13px; font-weight:800; color:var(--ink); margin-bottom:7px; }
.listo-bookings-calendar-simple__day.is-outside .listo-bookings-calendar-simple__date { color:#aaa; }
.listo-bookings-calendar-simple__empty { font-size:11px; color:var(--ink-muted); }
.listo-bookings-calendar-simple__booking { width:100%; display:flex; flex-direction:column; gap:2px; margin:0 0 5px; padding:7px 8px; border:0; border-left:3px solid var(--listo-green); border-radius:6px; background:var(--listo-green-tint); color:var(--ink); text-align:left; font:inherit; cursor:pointer; overflow:hidden; }
.listo-bookings-calendar-simple__booking:hover { filter:brightness(.98); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.listo-bookings-calendar-simple__booking strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.listo-bookings-calendar-simple__booking span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-muted); font-size:10px; }
.listo-bookings-calendar-simple__more { display:block; font-size:10px; color:var(--ink-muted); font-weight:700; margin-top:3px; }
.listo-bookings-list-view .listo-trip-card { transition:box-shadow .15s ease, border-color .15s ease; }
.listo-bookings-list-view .listo-trip-card:hover { border-color:rgba(80,170,139,.38); box-shadow:0 3px 12px rgba(0,0,0,.05); }
@media (max-width: 700px) {
  .listo-bookings-filters { align-items:stretch; flex-direction:column; }
  .listo-bookings-filter-select select { flex:1; min-width:0; }
  .listo-bookings-filter-select { justify-content:space-between; }
  .listo-bookings-calendar-simple { min-width:700px; }
  .listo-bookings-calendar-view { overflow-x:auto; }
  .listo-bookings-calendar-simple-head { min-width:700px; }
}


/* NEXT143 — Host Bookings: simple, host-focused workspace. */
.listo-bookings-workspace--host-focused { margin-top: 18px; }
.listo-host-bookings-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 22px; }
.listo-host-bookings-intro h2 { margin:0 0 4px; font-size:28px; line-height:1.15; }
.listo-host-bookings-attention-summary { display:flex; align-items:center; gap:9px; padding:11px 14px; border:1px solid rgba(201,138,22,.28); background:#fffaf0; border-radius:12px; color:#7b5a16; font-size:13px; font-weight:600; }
.listo-host-bookings-attention-summary strong { font-size:20px; color:#9a6810; }
.listo-host-bookings-all-clear { padding:14px 18px; border:1px solid #1565C0; background:#1565C0; border-radius:12px; color:#fff; font-size:14px; font-weight:700; line-height:1.35; box-shadow:0 4px 12px rgba(15,79,74,.14); }
.listo-host-bookings-controls { padding:0 0 16px; border-bottom:1px solid var(--border); margin-bottom:22px; }
.listo-host-bookings-controls .listo-bookings-filters { margin:0; align-items:center; }
.listo-host-bookings-controls .listo-bookings-filter-group { display:flex; flex-wrap:wrap; gap:4px; }
.listo-host-bookings-controls .listo-bookings-filter { border:1px solid transparent; background:transparent; border-radius:999px; padding:8px 13px; color:var(--ink-muted); font-weight:700; font-size:13px; }
.listo-host-bookings-controls .listo-bookings-filter.is-active { background:var(--ink); color:#fff; }
.listo-host-bookings-controls .listo-bookings-filter-select { margin-left:auto; }
.listo-bookings-workspace--host-focused .listo-trip-grid { gap:14px; }
.listo-bookings-workspace--host-focused .listo-trip-card { border-radius:14px; box-shadow:none; }
.listo-bookings-workspace--host-focused .listo-trip-card__title { font-size:16px; }
.listo-bookings-workspace--host-focused .listo-trip-card__body > a { padding-bottom:2px; }
.listo-bookings-workspace--host-focused .listo-trip-card .listo-status-badge { font-size:11px; }
.listo-bookings-workspace--host-focused .listo-trip-card__photo { width:170px; min-width:170px; }
@media (max-width: 720px) {
  .listo-host-bookings-intro { align-items:flex-start; flex-direction:column; gap:12px; }
  .listo-host-bookings-intro h2 { font-size:24px; }
  .listo-host-bookings-controls .listo-bookings-filters { flex-direction:column; align-items:stretch; }
  .listo-host-bookings-controls .listo-bookings-filter-group { overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; }
  .listo-host-bookings-controls .listo-bookings-filter-select { margin-left:0; width:100%; }
  .listo-host-bookings-workspace .listo-trip-card__photo, .listo-bookings-workspace--host-focused .listo-trip-card__photo { width:110px; min-width:110px; }
}


/* NEXT145 — Host Bookings mobile-first refinement.
   Mobile should preserve the same hierarchy as desktop while avoiding
   cramped horizontal cards and controls. */
@media (max-width: 720px) {
  .listo-bookings-workspace--host-focused {
    margin-top: 10px;
  }

  .listo-host-bookings-intro {
    display: block;
    margin-bottom: 16px;
  }

  .listo-host-bookings-intro__summary {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.4;
  }

  .listo-host-bookings-all-clear,
  .listo-host-bookings-attention-summary {
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
  }

  .listo-host-bookings-all-clear {
    padding: 13px 14px;
    font-size: 14px;
  }

  .listo-host-bookings-attention-summary {
    padding: 11px 13px;
  }

  .listo-host-bookings-controls {
    padding-bottom: 12px;
    margin-bottom: 16px;
  }

  .listo-host-bookings-controls .listo-bookings-filters {
    display: block;
  }

  .listo-host-bookings-controls .listo-bookings-filter-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    gap: 6px;
    padding: 1px 1px 7px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .listo-host-bookings-controls .listo-bookings-filter-group::-webkit-scrollbar {
    display: none;
  }

  .listo-host-bookings-controls .listo-bookings-filter {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 38px;
    padding: 8px 13px;
  }

  .listo-host-bookings-controls .listo-bookings-filter-select {
    display: block;
    width: 100%;
    margin: 9px 0 0;
  }

  .listo-host-bookings-controls .listo-bookings-filter-select span {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-muted);
  }

  .listo-host-bookings-controls .listo-bookings-filter-select select {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
  }

  .listo-bookings-workspace--host-focused .listo-trip-grid {
    padding: 0;
    gap: 10px;
  }

  .listo-bookings-workspace--host-focused .listo-trip-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
  }

  .listo-bookings-workspace--host-focused .listo-trip-card__photo {
    width: 88px;
    min-width: 0;
    height: 88px;
    border-radius: 9px;
  }

  .listo-bookings-workspace--host-focused .listo-trip-card__body {
    min-width: 0;
  }

  .listo-bookings-workspace--host-focused .listo-trip-card__title {
    font-size: 15px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .listo-bookings-workspace--host-focused .listo-trip-card .listo-caption {
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .listo-bookings-workspace--host-focused .listo-trip-card .listo-status-badge {
    display: inline-block;
    max-width: 100%;
    margin: 2px 4px 2px 0;
    white-space: normal;
    line-height: 1.25;
  }

  .listo-bookings-workspace--host-focused .listo-trip-card .listo-btn {
    min-height: 40px;
    padding: 9px 10px;
  }

  .listo-bookings-workspace--host-focused .listo-booking-request-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .listo-bookings-workspace--host-focused .listo-booking-request-actions .listo-btn {
    min-width: 0;
  }

  .listo-bookings-workspace--host-focused .listo-trip-card__body > div[style*="display:flex"] {
    gap: 7px !important;
  }

  .listo-bookings-workspace--host-focused .listo-trip-card__body > div[style*="display:flex"] .listo-btn {
    flex: 1 1 100%;
    min-width: 0;
  }

  .listo-bookings-workspace--host-focused .listo-field-error {
    overflow-wrap: anywhere;
  }

  .listo-bookings-workspace--host-focused .listo-report-problem-form textarea {
    width: 100%;
    box-sizing: border-box;
  }

  .listo-bookings-workspace--host-focused .listo-bookings-filter-empty {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 420px) {
  .listo-bookings-workspace--host-focused .listo-trip-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 9px;
    padding: 9px;
  }

  .listo-bookings-workspace--host-focused .listo-trip-card__photo {
    width: 72px;
    height: 72px;
  }

  .listo-bookings-workspace--host-focused .listo-trip-card__title {
    font-size: 14px;
  }

  .listo-host-bookings-controls .listo-bookings-filter {
    padding-left: 11px;
    padding-right: 11px;
  }
}


/* NEXT146 — Host Bookings mobile tab refinement.
   Keep the status controls fully visible and make their tab behavior obvious
   to non-technical users. The desktop presentation remains unchanged. */
@media (max-width: 720px) {
  .listo-host-bookings-intro {
    margin-bottom: 8px;
  }

  .listo-host-bookings-all-clear,
  .listo-host-bookings-attention-summary {
    margin-bottom: 0;
    border-radius: 11px;
  }

  .listo-host-bookings-controls {
    padding: 0 0 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }

  /* Four visible, unmistakable tabs: no horizontal scrolling on phones. */
  .listo-host-bookings-controls .listo-bookings-filter-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    overflow: visible;
    padding: 0;
  }

  .listo-host-bookings-controls .listo-bookings-filter {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 9px;
    border: 1px solid #d7dcde;
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  .listo-host-bookings-controls .listo-bookings-filter.is-active {
    border-color: #1565C0;
    background: #1565C0;
    color: #fff;
    box-shadow: 0 2px 5px rgba(15,79,74,.14);
  }

  .listo-host-bookings-controls .listo-bookings-filter:active {
    transform: translateY(1px);
  }

  .listo-host-bookings-controls .listo-bookings-filter-select {
    margin-top: 10px;
  }
}

@media (max-width: 420px) {
  .listo-host-bookings-controls .listo-bookings-filter {
    min-height: 40px;
    font-size: 12px;
    padding-left: 7px;
    padding-right: 7px;
  }
}


/* NEXT147 — Host bookings status hierarchy refinement */
.listo-host-bookings-attention-summary,
.listo-host-bookings-all-clear {
    background: #d9f1ec !important;
    color: #0f5b54 !important;
    border: 1px solid #b9ded7;
    box-shadow: none;
    margin-bottom: 18px;
    padding: 18px 22px;
    min-height: 58px;
    display: flex;
    align-items: center;
}

.listo-host-bookings-attention-summary strong,
.listo-host-bookings-all-clear strong,
.listo-host-bookings-attention-summary *,
.listo-host-bookings-all-clear * {
    color: #0f5b54 !important;
}

.listo-host-bookings-controls {
    margin-top: 0;
}

/* Keep the mobile status-to-tabs relationship breathable. */
@media (max-width: 767px) {
    .listo-host-bookings-attention-summary,
    .listo-host-bookings-all-clear {
        margin-bottom: 20px;
        padding: 17px 20px;
    }
}

/* NEXT148 — Calendar & Pricing desktop-first template */
.listo-calendar-pricing-page{max-width:1240px}
.listo-calendar-pricing-header{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:28px}
.listo-calendar-pricing-eyebrow{font-size:13px;font-weight:700;letter-spacing:.04em;color:#1976D2;margin-bottom:6px}
.listo-calendar-pricing-header h1{margin:0 0 8px;font-size:32px;line-height:1.15}
.listo-calendar-pricing-header .listo-caption{margin:0;max-width:760px;font-size:16px}
.listo-cp-listing-bar{display:grid;grid-template-columns:minmax(340px,1fr) minmax(560px,1.5fr);gap:18px;margin-bottom:22px}
.listo-cp-listing-selector,.listo-cp-listing-summary,.listo-cp-calendar-card,.listo-cp-date-card,.listo-cp-rules,.listo-cp-settings{background:#fff;border:1px solid #e4e7e8;border-radius:18px}
.listo-cp-listing-selector{padding:18px 20px;display:flex;flex-direction:column;justify-content:center}
.listo-cp-listing-selector label,.listo-cp-date-card label{display:block;font-size:13px;font-weight:700;color:#5c6467;margin-bottom:8px}
.listo-cp-listing-selector select,.listo-cp-date-card select{width:100%;height:48px;border:1px solid #d7dcde;border-radius:10px;background:#fff;padding:0 14px;font:inherit;font-weight:600;color:#1f2426}
.listo-cp-listing-summary{padding:14px 18px;display:flex;align-items:center;gap:16px}
.listo-cp-listing-summary img{width:62px;height:62px;object-fit:cover;border-radius:12px;flex:none}
.listo-cp-listing-summary>div:nth-of-type(1){flex:1;min-width:0}
.listo-cp-listing-summary strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}
.listo-cp-listing-summary span{display:block;font-size:12px;color:#6a7174}
.listo-cp-listing-summary b{display:block;font-size:16px;color:#15191b;margin-top:2px}
.listo-cp-listing-summary>div:not(:first-of-type){min-width:105px}
.listo-cp-tabs{display:flex;gap:6px;border-bottom:1px solid #dfe3e4;margin:0 0 22px;padding-left:4px}
.listo-cp-tabs a{padding:13px 18px 12px;color:#555d60;text-decoration:none;font-weight:700;border-bottom:3px solid transparent}
.listo-cp-tabs a.is-active{color:#1976D2;border-color:#1976D2}
.listo-cp-calendar-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,.75fr);gap:18px;align-items:start}
.listo-cp-calendar-card{padding:20px}
.listo-cp-calendar-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}
.listo-cp-calendar-heading h2{font-size:22px;margin:0 0 4px}.listo-cp-calendar-heading p{margin:0;color:#6a7174;font-size:13px}
.listo-cp-calendar-nav{display:flex;gap:7px}.listo-cp-calendar-nav a{width:38px;height:38px;border:1px solid #d9dfe0;border-radius:10px;display:grid;place-items:center;text-decoration:none;color:#1d2426;font-weight:700}.listo-cp-calendar-nav a.today{width:auto;padding:0 13px}
.listo-cp-weekdays,.listo-cp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.listo-cp-weekdays{margin-bottom:5px}.listo-cp-weekdays span{text-align:center;font-size:12px;font-weight:700;color:#71787b;padding:7px 0}
.listo-cp-day{min-height:72px;border:1px solid #e0e5e5;border-radius:9px;background:#F3F9FF;text-align:left;padding:9px 9px;cursor:pointer;color:#1b2224}.listo-cp-day span{display:block;font-weight:700}.listo-cp-day small{display:block;margin-top:9px;color:#5B7FA3;font-size:11px}.listo-cp-day.is-outside{background:#fafafa;color:#b4bbbd}.listo-cp-day.is-outside small{display:none}.listo-cp-day.is-booked{background:#eef0f1;color:#72797c}.listo-cp-day.is-booked small{display:none}.listo-cp-day.is-today{box-shadow:inset 0 0 0 2px #1976D2}.listo-cp-day.is-selected{background:#1976D2;color:#fff;border-color:#1976D2}.listo-cp-day.is-selected small{color:#E6F4FF}.listo-cp-legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:15px;font-size:12px;color:#646c6f}.listo-cp-legend span{display:flex;align-items:center;gap:6px}.listo-cp-legend i{width:11px;height:11px;border-radius:50%;display:inline-block}.listo-cp-legend i.available{background:#DDEEFF}.listo-cp-legend i.booked{background:#aeb6b9}.listo-cp-legend i.special{background:#e9d7f7}.listo-cp-legend i.blocked{background:#ffcfd1}
.listo-cp-date-card{padding:22px;position:sticky;top:90px}.listo-cp-date-card__top{display:flex;justify-content:flex-end;margin-bottom:5px}.listo-cp-status{font-size:12px;font-weight:800;border-radius:999px;padding:6px 10px}.listo-cp-status.available{background:#dcf3ed;color:#0c665d}.listo-cp-date-card h2{font-size:22px;margin:8px 0 22px}.listo-cp-input{display:flex;height:48px;border:1px solid #d7dcde;border-radius:10px;overflow:hidden;margin-bottom:18px}.listo-cp-input span{display:grid;place-items:center;width:42px;background:#f6f8f8;font-weight:700}.listo-cp-input input{border:0;outline:0;flex:1;padding:0 12px;font:inherit;font-weight:700}.listo-cp-date-card .listo-btn{width:100%;margin-top:18px}.listo-cp-block-btn{width:100%;border:0;background:none;color:#c83f45;font-weight:700;padding:14px 0;cursor:not-allowed}.listo-cp-info{margin-top:8px;padding:13px;border-radius:10px;background:#f1f7fb;color:#416477;font-size:12px;line-height:1.5}
.listo-cp-rules{margin-top:18px;padding:22px}.listo-cp-section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}.listo-cp-section-heading h2,.listo-cp-settings h2{margin:0 0 5px;font-size:21px}.listo-cp-section-heading p{margin:0;color:#6a7174;font-size:13px}.listo-cp-rule-empty{border:1px dashed #cbd2d3;border-radius:13px;padding:24px;display:flex;flex-direction:column;gap:6px}.listo-cp-rule-empty strong{font-size:15px}.listo-cp-rule-empty span{color:#6b7375;font-size:13px;max-width:700px}
.listo-cp-settings{margin-top:18px;padding:22px}.listo-cp-settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.listo-cp-settings-grid>div{padding:16px;background:#f7f9f9;border-radius:12px}.listo-cp-settings-grid strong{display:block;margin-bottom:5px}.listo-cp-settings-grid span{font-size:13px;color:#687073}
.listo-cp-empty{padding:50px;background:#fff;border:1px solid #e4e7e8;border-radius:18px;text-align:center}
@media(max-width:900px){.listo-cp-listing-bar{grid-template-columns:1fr}.listo-cp-calendar-layout{grid-template-columns:1fr}.listo-cp-date-card{position:static}.listo-cp-settings-grid{grid-template-columns:1fr}.listo-calendar-pricing-header{align-items:flex-start;flex-direction:column}}

/* NEXT150 — Calendar & Pricing functional UI */
.listo-cp-day.is-special{background:#f8eefa;border-color:#ead6f3}.listo-cp-day.is-blocked{background:#fff0f1;border-color:#f3c9cc;color:#a13f45}.listo-cp-day.is-blocked small{display:none}
.listo-cp-status.booked{background:#eef0f1;color:#667075}.listo-cp-status.blocked{background:#fff0f1;color:#a13f45}.listo-cp-status.special{background:#f5e7fa;color:#74428a}
.listo-cp-block-btn{cursor:pointer}.listo-cp-block-btn:disabled{opacity:.5;cursor:not-allowed}.listo-cp-input input:disabled,.listo-cp-date-card select:disabled{background:#f5f6f6;color:#8a9295}.listo-btn.is-busy{opacity:.6;pointer-events:none}
.listo-cp-rule{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(180px,.7fr) auto;gap:20px;align-items:center;padding:16px 18px;border:1px solid #e4e7e8;border-radius:13px;margin-top:10px;background:#fff}.listo-cp-rule strong{display:block;margin-bottom:4px}.listo-cp-rule span{display:block;color:#6b7375;font-size:13px}.listo-cp-rule b{display:block;margin-bottom:4px}.listo-cp-rule-actions{display:flex;gap:8px}.listo-cp-rule-actions button{border:1px solid #d7dcde;background:#fff;border-radius:9px;padding:9px 13px;font:inherit;font-weight:700;cursor:pointer}.listo-cp-rule-actions button:hover{background:#f5f8f8}.listo-cp-rule-actions .listo-cp-delete-rule{color:#b03b43}
.listo-cp-modal[hidden]{display:none}.listo-cp-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px}.listo-cp-modal__backdrop{position:absolute;inset:0;background:rgba(15,22,24,.45)}.listo-cp-modal__dialog{position:relative;z-index:1;width:min(520px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:18px;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.18)}.listo-cp-modal__dialog h2{margin:0 0 20px;font-size:24px}.listo-cp-modal__close{position:absolute;right:16px;top:12px;border:0;background:none;font-size:28px;cursor:pointer;color:#555}.listo-cp-modal__dialog label{display:block;font-size:13px;font-weight:700;color:#4e585b;margin-bottom:14px}.listo-cp-modal__dialog input,.listo-cp-modal__dialog select{display:block;width:100%;height:46px;margin-top:7px;border:1px solid #d7dcde;border-radius:10px;padding:0 12px;font:inherit;background:#fff}.listo-cp-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.listo-cp-check{display:flex!important;align-items:center;gap:9px;font-weight:600!important}.listo-cp-check input{width:18px!important;height:18px!important;margin:0!important}.listo-cp-modal-error{background:#fff0f1;color:#a13f45;border-radius:9px;padding:10px 12px;font-size:13px}.listo-cp-modal__dialog>.listo-btn{width:100%;margin-top:6px}
.listo-cp-settings-grid>div{min-height:72px}
@media(max-width:700px){.listo-cp-rule{grid-template-columns:1fr;gap:12px}.listo-cp-rule-actions{width:100%}.listo-cp-rule-actions button{flex:1}.listo-cp-modal{padding:14px}.listo-cp-modal__dialog{padding:22px 18px}.listo-cp-modal-grid{grid-template-columns:1fr}}


/* NEXT152 — Calendar & Pricing visual refinement */
.listo-calendar-pricing-page .listo-cp-listing-bar { margin-bottom: 30px; }
.listo-calendar-pricing-page .listo-cp-tabs { margin-bottom: 30px; }
.listo-calendar-pricing-page .listo-cp-calendar-layout { margin-bottom: 32px; }
.listo-calendar-pricing-page .listo-cp-rules { margin-top: 0; margin-bottom: 32px; }
.listo-calendar-pricing-page .listo-cp-settings { margin-top: 0; }

.listo-calendar-pricing-page .listo-cp-legend {
    margin-top: 20px;
    gap: 22px;
    color: #4f585b;
    font-weight: 600;
}
.listo-calendar-pricing-page .listo-cp-legend i {
    width: 12px;
    height: 12px;
    border: 1px solid rgba(20,30,32,.10);
}
.listo-calendar-pricing-page .listo-cp-legend i.available { background: #79c6b3; }
.listo-calendar-pricing-page .listo-cp-legend i.booked { background: #737d81; }
.listo-calendar-pricing-page .listo-cp-legend i.special { background: #b47ad0; }
.listo-calendar-pricing-page .listo-cp-legend i.blocked { background: #df777d; }

@media (max-width: 900px) {
    .listo-calendar-pricing-page .listo-cp-listing-bar { margin-bottom: 24px; }
    .listo-calendar-pricing-page .listo-cp-tabs { margin-bottom: 24px; }
    .listo-calendar-pricing-page .listo-cp-calendar-layout { margin-bottom: 26px; }
    .listo-calendar-pricing-page .listo-cp-rules { margin-bottom: 26px; }
}


/* NEXT154 — Calendar & Pricing spacing, legend contrast and date presentation */
.listo-calendar-pricing-page .listo-cp-listing-bar {
    margin-bottom: 40px;
}
.listo-calendar-pricing-page .listo-cp-tabs {
    margin-bottom: 40px;
}
.listo-calendar-pricing-page .listo-cp-calendar-layout {
    margin-bottom: 40px;
}
.listo-calendar-pricing-page .listo-cp-rules {
    margin-top: 0;
    margin-bottom: 40px;
}
.listo-calendar-pricing-page .listo-calendar-pricing-page .listo-cp-settings {
    margin-top: 0;
}
.listo-calendar-pricing-page .listo-cp-legend {
    margin-top: 22px;
    gap: 24px;
    color: #263033;
    font-weight: 700;
}
.listo-calendar-pricing-page .listo-cp-legend span {
    color: #263033;
}
.listo-calendar-pricing-page .listo-cp-legend i {
    width: 13px;
    height: 13px;
    border: 1px solid rgba(20,30,32,.18);
    box-shadow: 0 0 0 1px rgba(255,255,255,.45) inset;
}
.listo-calendar-pricing-page .listo-cp-legend i.available { background: #4fae9a; }
.listo-calendar-pricing-page .listo-cp-legend i.booked { background: #5f686c; }
.listo-calendar-pricing-page .listo-cp-legend i.special { background: #a85fc5; }
.listo-calendar-pricing-page .listo-cp-legend i.blocked { background: #d85f68; }
.listo-calendar-pricing-page .listo-cp-rule > div:first-child span {
    color: #3f494c;
    font-weight: 600;
}
@media (max-width: 900px) {
    .listo-calendar-pricing-page .listo-cp-listing-bar { margin-bottom: 30px; }
    .listo-calendar-pricing-page .listo-cp-tabs { margin-bottom: 30px; }
    .listo-calendar-pricing-page .listo-cp-calendar-layout { margin-bottom: 32px; }
    .listo-calendar-pricing-page .listo-cp-rules { margin-bottom: 32px; }
}


/* NEXT155 — In-place calendar navigation and stronger visual separation */
.listo-calendar-pricing-page .listo-cp-calendar-nav.is-loading {
    opacity: .55;
    pointer-events: none;
}
.listo-calendar-pricing-page .listo-cp-calendar-layout {
    margin-bottom: 48px;
}
.listo-calendar-pricing-page .listo-cp-rules {
    margin-bottom: 48px;
}
.listo-calendar-pricing-page .listo-cp-legend {
    margin-top: 26px;
    padding-top: 4px;
    gap: 26px;
    color: #263033;
    font-weight: 700;
}
.listo-calendar-pricing-page .listo-cp-legend span {
    color: #263033;
}
.listo-calendar-pricing-page .listo-cp-legend i {
    width: 14px;
    height: 14px;
    border: 1px solid rgba(20,30,32,.25);
}
.listo-calendar-pricing-page .listo-cp-legend i.available { background: #3e9b87; }
.listo-calendar-pricing-page .listo-cp-legend i.booked { background: #586367; }
.listo-calendar-pricing-page .listo-cp-legend i.special { background: #9651b5; }
.listo-calendar-pricing-page .listo-cp-legend i.blocked { background: #c9515b; }
.listo-calendar-pricing-page .listo-cp-rule + .listo-cp-rule {
    margin-top: 14px;
}
@media (max-width: 900px) {
    .listo-calendar-pricing-page .listo-cp-calendar-layout { margin-bottom: 40px; }
    .listo-calendar-pricing-page .listo-cp-rules { margin-bottom: 40px; }
}

/* NEXT156 — Calendar & Pricing interaction + stronger calendar state contrast */
.listo-calendar-pricing-page .listo-cp-day.is-available {
    background: #dcefe9;
    border-color: #b7d9d0;
    color: #173a36;
}
.listo-calendar-pricing-page .listo-cp-day.is-available small {
    color: #245f57;
}
.listo-calendar-pricing-page .listo-cp-day.is-booked {
    background: #d2d7da;
    border-color: #b5bdc1;
    color: #3f484c;
}
.listo-calendar-pricing-page .listo-cp-day.is-special {
    background: #eadcf1;
    border-color: #cfa9dd;
    color: #42274e;
}
.listo-calendar-pricing-page .listo-cp-day.is-special small {
    color: #70417e;
}
.listo-calendar-pricing-page .listo-cp-day.is-blocked {
    background: #f2c9cc;
    border-color: #d9959a;
    color: #6d252b;
}
.listo-calendar-pricing-page .listo-cp-day.is-blocked small {
    color: #6d252b;
}
.listo-calendar-pricing-page .listo-cp-day.is-outside {
    background: #f2f3f3;
    border-color: #e0e2e3;
    color: #9aa2a5;
}
.listo-calendar-pricing-page .listo-cp-day.is-selected {
    background: #1976D2;
    border-color: #1976D2;
    color: #fff;
}
.listo-calendar-pricing-page .listo-cp-day.is-selected small {
    color: #e6fbf7;
}
.listo-calendar-pricing-page .listo-cp-day.is-today:not(.is-selected) {
    box-shadow: inset 0 0 0 2px #1976D2;
}
.listo-calendar-pricing-page .listo-cp-legend {
    color: #3f4b4e;
    font-weight: 600;
}
.listo-calendar-pricing-page .listo-cp-legend i.available { background: #4fae9a; }
.listo-calendar-pricing-page .listo-cp-legend i.booked { background: #5f686c; }
.listo-calendar-pricing-page .listo-cp-legend i.special { background: #a85fc5; }
.listo-calendar-pricing-page .listo-cp-legend i.blocked { background: #d85f68; }
.listo-calendar-pricing-page.is-loading { opacity: .72; pointer-events: none; transition: opacity .15s ease; }
.listo-calendar-pricing-page .listo-cp-calendar-nav.is-loading { opacity: .55; pointer-events: none; }


/* NEXT157 — Make guest-visible available dates easier to scan.
   Applies to both the listing calendar and the Check Availability widget,
   which share the .listo-cal-cell component. Reserved/blocked dates retain
   their existing muted/struck-through presentation. */
.listo-cal-cell:not(.listo-cal-cell--unavailable):not(.listo-cal-cell--blank) {
  font-weight: 600;
}
.listo-cal-cell--selected {
  font-weight: 700;
}


/* NEXT159 — seasonal-rule dates are governed by the rule, not date-level pricing. */
.listo-calendar-pricing-page .listo-cp-input input:disabled,
.listo-calendar-pricing-page select:disabled {
    opacity: .7;
    cursor: not-allowed;
    background: #f4f6f7;
}


/* NEXT204 — Ensure conditional seasonal-rule fields honor the HTML hidden state.
   The shared form-label styles use display rules that can otherwise override
   the browser's default [hidden] behavior. */
.listo-calendar-pricing-page .listo-cp-bulk-dialog [hidden] {
    display: none !important;
}

/* NEXT160 — Bulk seasonal rules for multiple listings */
.listo-calendar-pricing-page .listo-cp-rule-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.listo-calendar-pricing-page .listo-cp-btn-secondary {
    background: #fff;
    color: #1976D2;
    border: 1px solid #a8d0c8;
}
.listo-calendar-pricing-page .listo-cp-btn-secondary:hover {
    background: #eef8f5;
}
.listo-calendar-pricing-page .listo-cp-bulk-dialog {
    max-width: 720px;
}
.listo-calendar-pricing-page .listo-cp-modal-help {
    margin: -4px 0 20px;
    color: #536064;
}
.listo-calendar-pricing-page .listo-cp-bulk-listings {
    border: 1px solid #dce2e4;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 18px;
}
.listo-calendar-pricing-page .listo-cp-bulk-listings__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}
.listo-calendar-pricing-page .listo-cp-bulk-listings__head label {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
}
.listo-calendar-pricing-page .listo-cp-bulk-listings__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-height: 230px;
    overflow: auto;
    padding-right: 3px;
}
.listo-calendar-pricing-page .listo-cp-bulk-listing-option {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    grid-template-rows: auto auto;
    column-gap: 9px;
    align-items: center;
    border: 1px solid #e0e5e7;
    border-radius: 9px;
    padding: 10px 11px;
    cursor: pointer;
    margin: 0;
}
.listo-calendar-pricing-page .listo-cp-bulk-listing-option input {
    grid-row: 1 / span 2;
}
.listo-calendar-pricing-page .listo-cp-bulk-listing-option span {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}
.listo-calendar-pricing-page .listo-cp-bulk-listing-option small {
    color: #657075;
}
.listo-calendar-pricing-page .listo-cp-bulk-preview {
    background: #f4f8f7;
    border: 1px solid #d5e7e2;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 16px 0;
}
.listo-calendar-pricing-page .listo-cp-bulk-preview > strong,
.listo-calendar-pricing-page .listo-cp-bulk-preview > span {
    display: block;
}
.listo-calendar-pricing-page .listo-cp-bulk-preview > span {
    margin-top: 3px;
    color: #5b666a;
}
.listo-calendar-pricing-page .listo-cp-bulk-preview-table {
    margin-top: 10px;
    border-top: 1px solid #d7e2df;
}
.listo-calendar-pricing-page .listo-cp-bulk-preview-table > div {
    display: grid;
    grid-template-columns: minmax(0,1fr) 120px 90px;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #e0e8e5;
}
.listo-calendar-pricing-page .listo-cp-bulk-preview-table > div > * {
    min-width: 0;
}
.listo-calendar-pricing-page .listo-cp-bulk-preview > small {
    display: block;
    margin-top: 9px;
    color: #667276;
}
@media (max-width: 900px) {
    .listo-calendar-pricing-page .listo-cp-rule-heading-actions {
        width: 100%;
        justify-content: stretch;
    }
    .listo-calendar-pricing-page .listo-cp-rule-heading-actions .listo-btn {
        flex: 1 1 220px;
    }
    .listo-calendar-pricing-page .listo-cp-bulk-listings__grid {
        grid-template-columns: 1fr;
    }
    .listo-calendar-pricing-page .listo-cp-bulk-preview-table > div {
        grid-template-columns: minmax(0,1fr) 95px 75px;
        font-size: 13px;
    }
}

/* NEXT162 — Calendar & Pricing mobile-first refinement */
@media (max-width: 700px) {
    .listo-calendar-pricing-page {
        width: 100%;
        max-width: none;
        padding-left: 14px;
        padding-right: 14px;
        box-sizing: border-box;
    }

    .listo-calendar-pricing-header {
        margin-bottom: 20px;
        gap: 0;
    }

    .listo-calendar-pricing-header h1 {
        font-size: 28px;
        line-height: 1.18;
        margin-bottom: 7px;
    }

    .listo-calendar-pricing-header .listo-caption {
        font-size: 14px;
        line-height: 1.45;
    }

    .listo-cp-listing-bar {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }

    .listo-cp-listing-selector,
    .listo-cp-listing-summary,
    .listo-cp-calendar-card,
    .listo-cp-date-card,
    .listo-cp-rules,
    .listo-cp-settings {
        border-radius: 14px;
    }

    .listo-cp-listing-selector {
        padding: 15px;
    }

    .listo-cp-listing-selector select {
        height: 48px;
        font-size: 14px;
    }

    .listo-cp-listing-summary {
        padding: 13px 14px;
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 10px 12px;
        align-items: center;
    }

    .listo-cp-listing-summary img {
        width: 52px;
        height: 52px;
        border-radius: 10px;
    }

    .listo-cp-listing-summary strong {
        font-size: 14px;
        margin-bottom: 3px;
    }

    .listo-cp-listing-summary span {
        font-size: 11px;
    }

    .listo-cp-listing-summary b {
        font-size: 15px;
    }

    .listo-cp-listing-summary > div:not(:first-of-type) {
        min-width: 0;
    }

    .listo-cp-listing-summary > div:nth-of-type(2),
    .listo-cp-listing-summary > div:nth-of-type(3) {
        grid-row: 2;
        padding-top: 8px;
        border-top: 1px solid #edf0f0;
    }

    .listo-cp-listing-summary > div:nth-of-type(2) {
        grid-column: 1 / 2;
    }

    .listo-cp-listing-summary > div:nth-of-type(3) {
        grid-column: 2 / 3;
    }

    .listo-cp-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 0;
        border: 0;
        margin: 0 0 20px;
    }

    .listo-cp-tabs a,
    .listo-cp-tabs a.is-active {
        min-height: 44px;
        padding: 10px 6px;
        border: 1px solid #d9dfe0;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 12px;
        line-height: 1.2;
        box-sizing: border-box;
    }

    .listo-cp-tabs a.is-active {
        background: #1976D2;
        border-color: #1976D2;
        color: #fff;
    }

    .listo-cp-calendar-layout {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 26px;
    }

    .listo-cp-calendar-card {
        padding: 12px;
        width: 100%;
        box-sizing: border-box;
    }

    .listo-cp-calendar-heading {
        margin-bottom: 12px;
        align-items: center;
        gap: 8px;
    }

    .listo-cp-calendar-heading h2 {
        font-size: 19px;
        margin-bottom: 3px;
    }

    .listo-cp-calendar-heading p {
        font-size: 11px;
        line-height: 1.35;
    }

    .listo-cp-calendar-nav {
        flex: 0 0 auto;
        gap: 5px;
    }

    .listo-cp-calendar-nav a {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .listo-cp-calendar-nav a.today {
        width: auto;
        padding: 0 9px;
        font-size: 11px;
    }

    .listo-cp-weekdays,
    .listo-cp-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 3px;
    }

    .listo-cp-weekdays span {
        font-size: 10px;
        padding: 5px 0;
    }

    .listo-cp-day {
        min-height: 61px;
        padding: 7px 5px;
        border-radius: 7px;
        text-align: center;
    }

    .listo-cp-day span {
        font-size: 12px;
    }

    .listo-cp-day small {
        margin-top: 7px;
        font-size: 9px;
        line-height: 1;
        white-space: nowrap;
    }

    .listo-cp-legend {
        gap: 9px 14px;
        margin-top: 12px;
        font-size: 10px;
    }

    .listo-cp-legend i {
        width: 9px;
        height: 9px;
    }

    .listo-cp-date-card {
        width: 100%;
        box-sizing: border-box;
        padding: 17px;
        position: static;
    }

    .listo-cp-date-card h2 {
        font-size: 20px;
        margin: 7px 0 18px;
    }

    .listo-cp-date-card label {
        font-size: 12px;
    }

    .listo-cp-input,
    .listo-cp-date-card select {
        height: 48px;
    }

    .listo-cp-date-card .listo-btn {
        min-height: 48px;
        margin-top: 15px;
    }

    .listo-cp-block-btn {
        min-height: 44px;
        padding: 10px 0;
    }

    .listo-cp-info {
        margin-top: 7px;
        padding: 12px;
        font-size: 11px;
    }

    .listo-cp-rules,
    .listo-cp-settings {
        padding: 17px;
    }

    .listo-cp-section-heading {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 13px;
        margin-bottom: 15px;
    }

    .listo-cp-section-heading h2,
    .listo-cp-settings h2 {
        font-size: 19px;
    }

    .listo-cp-section-heading p {
        font-size: 12px;
        line-height: 1.4;
    }

    .listo-cp-rule-heading-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .listo-cp-rule-heading-actions .listo-btn {
        width: 100%;
        min-height: 46px;
    }

    .listo-cp-rule {
        padding: 14px;
        margin-top: 9px;
        gap: 11px;
    }

    .listo-cp-rule strong {
        font-size: 14px;
    }

    .listo-cp-rule span,
    .listo-cp-rule b {
        font-size: 12px;
    }

    .listo-cp-rule-actions {
        gap: 7px;
    }

    .listo-cp-rule-actions button {
        min-height: 42px;
        padding: 8px 10px;
    }

    .listo-cp-settings-grid {
        gap: 8px;
    }

    .listo-cp-settings-grid > div {
        min-height: 0;
        padding: 13px;
    }

    .listo-cp-settings-grid strong {
        font-size: 13px;
    }

    .listo-cp-settings-grid span {
        font-size: 12px;
    }

    .listo-cp-modal {
        padding: 10px;
        align-items: end;
    }

    .listo-cp-modal__dialog {
        width: 100%;
        max-height: min(88vh, 720px);
        border-radius: 18px 18px 10px 10px;
        padding: 20px 16px 18px;
    }
}

@media (max-width: 420px) {
    .listo-calendar-pricing-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .listo-cp-calendar-card {
        padding: 9px;
    }

    .listo-cp-calendar-heading h2 {
        font-size: 18px;
    }

    .listo-cp-calendar-heading p {
        display: none;
    }

    .listo-cp-calendar-nav a {
        width: 32px;
        height: 32px;
    }

    .listo-cp-calendar-nav a.today {
        padding: 0 7px;
        font-size: 10px;
    }

    .listo-cp-day {
        min-height: 56px;
        padding: 6px 2px;
    }

    .listo-cp-day span {
        font-size: 11px;
    }

    .listo-cp-day small {
        font-size: 8px;
        margin-top: 6px;
    }

    .listo-cp-legend {
        gap: 8px 10px;
        font-size: 9px;
    }
}


/* NEXT163 — Optional add-ons */
.listo-addon-editor { border:1px solid var(--line,#e1e5e6); border-radius:14px; padding:18px; margin:0 0 14px; background:#fff; }
.listo-addon-editor .listo-addon-remove { margin-top:10px; }
.listo-checkout-card--addons {
	margin-top: 24px;
	border: 2px solid #4eaa91 !important;
	border-radius: 16px;
	padding: 22px !important;
	box-shadow: 0 2px 0 rgba(78,170,145,.08);
}
.listo-checkout-card--addons .listo-checkout-card__header { margin-bottom: 6px; }
.listo-checkout-card--addons .listo-caption { margin-bottom: 14px; }
.listo-addon-checkout-row { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:16px 0; border-bottom:1px solid var(--line,#e1e5e6); }
.listo-addon-checkout-row:last-child { border-bottom:0; }
.listo-addon-checkout-row__copy { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 auto; }
.listo-addon-checkout-row__copy > strong { color:#111827; font-size:15px; line-height:1.35; }
.listo-addon-checkout-row__copy > span:not(.listo-addon-checkout-quantity-label):not(.listo-addon-checkout-formula), .listo-addon-checkout-row__copy > small { color:#667085; font-size:12px; line-height:1.4; }
.listo-addon-checkout-quantity-label { margin-top:3px; font-size:12px; font-weight:700; color:#111827; }
.listo-addon-checkout-formula { min-height:16px; font-size:12px; color:#667085; line-height:1.35; }
.listo-addon-checkout-stepper-wrap { flex:0 0 auto; padding-top:2px; }
.listo-addon-stepper { flex:0 0 auto; }
@media (max-width:700px){
	.listo-addon-editor .listo-field-grid { grid-template-columns:1fr !important; }
	.listo-addon-checkout-row { align-items:flex-start; gap:12px; padding:14px 0; }
	.listo-addon-checkout-row__copy > strong { font-size:14px; }
	.listo-addon-checkout-quantity-label, .listo-addon-checkout-formula { font-size:11px; }
	.listo-checkout-card--addons { margin-top: 20px; padding: 18px !important; }
	.listo-addon-checkout-stepper-wrap { padding-top:0; }
}
/* NEXT165 — public listing add-ons preview */\n.listo-public-addons {\n\tmargin-top: 18px;\n\tpadding: 16px;\n\tborder: 1px solid var(--line, #e1e5e6);\n\tborder-radius: 14px;\n\tbackground: #fff;\n}\n.listo-public-addons__title { font-size: 16px; font-weight: 700; color: var(--ink, #111827); }\n.listo-public-addons__subtitle { margin-top: 3px; font-size: 13px; color: #667085; }\n.listo-public-addon {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tjustify-content: space-between;\n\tgap: 14px;\n\tpadding: 13px 0;\n\tborder-bottom: 1px solid var(--line, #e1e5e6);\n}\n.listo-public-addon:last-of-type { border-bottom: 0; }\n.listo-public-addon__copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }\n.listo-public-addon__copy strong { font-size: 14px; color: var(--ink, #111827); }\n.listo-public-addon__copy span { font-size: 12px; color: #667085; line-height: 1.45; }\n.listo-public-addon__price { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: 2px; }\n.listo-public-addon__price strong { font-size: 14px; color: var(--ink, #111827); white-space: nowrap; }\n.listo-public-addon__price small { font-size: 11px; color: #667085; white-space: nowrap; }\n.listo-public-addons__note { margin: 11px 0 0; font-size: 12px; color: #667085; line-height: 1.45; }\n@media (max-width: 700px) {\n\t.listo-public-addons { margin-top: 16px; padding: 14px; }\n\t.listo-public-addon { gap: 10px; }\n\t.listo-public-addon__price { text-align: right; }\n}\n

/* NEXT166 — public add-ons placement and billing labels */
.listo-single-sidebar > .listo-public-addons {
    margin-top: 16px;
    padding: 18px 20px;
    border: 1px solid var(--line, #e1e5e6);
    border-radius: 16px;
    background: #fff;
}
.listo-single-sidebar > .listo-public-addons .listo-public-addons__title { font-size: 18px; font-weight: 700; }
.listo-single-sidebar > .listo-public-addons .listo-public-addons__subtitle { font-size: 13px; margin-top: 4px; }
.listo-single-sidebar > .listo-public-addons .listo-public-addon { padding: 14px 0; }
@media (max-width:700px) {
    .listo-single-sidebar > .listo-public-addons { margin-top: 14px; padding: 16px; }
    .listo-single-sidebar > .listo-public-addons .listo-public-addon { gap: 12px; }
    .listo-single-sidebar > .listo-public-addons .listo-public-addon__price strong { font-size: 15px; }
}


/* NEXT167 — Add-ons are a first-class public listing section, not part of the booking widget. */
.listo-single-main .listo-public-addons { margin: 0; padding: 4px 0 0; border: 0; border-radius: 0; background: transparent; }
.listo-single-main .listo-public-addons__title { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--ink, #111827); }
.listo-single-main .listo-public-addons__subtitle { margin: 6px 0 0; font-size: 14px; color: #667085; line-height: 1.5; }
.listo-single-main .listo-public-addons__list { margin-top: 10px; }
.listo-single-main .listo-public-addon { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line, #e1e5e6); }
.listo-single-main .listo-public-addon:last-child { border-bottom: 0; }
.listo-single-main .listo-public-addon__copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.listo-single-main .listo-public-addon__copy strong { font-size: 16px; line-height: 1.35; color: var(--ink, #111827); }
.listo-single-main .listo-public-addon__copy span { font-size: 14px; line-height: 1.5; color: #667085; }
.listo-single-main .listo-public-addon__price { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.listo-single-main .listo-public-addon__price strong { font-size: 16px; line-height: 1.35; color: var(--ink, #111827); white-space: nowrap; }
.listo-single-main .listo-public-addon__price small { font-size: 12px; color: #667085; white-space: nowrap; }
.listo-single-main .listo-public-addons__note { margin: 10px 0 0; font-size: 13px; color: #667085; line-height: 1.5; }
@media (max-width: 700px) {
 .listo-single-main .listo-public-addons { padding-top: 0; }
 .listo-single-main .listo-public-addons__title { font-size: 22px; }
 .listo-single-main .listo-public-addon { align-items: flex-start; gap: 14px; padding: 16px 0; }
 .listo-single-main .listo-public-addon__copy strong { font-size: 15px; }
 .listo-single-main .listo-public-addon__copy span { font-size: 13px; }
 .listo-single-main .listo-public-addon__price strong { font-size: 15px; }
}


/* NEXT170 — emphasize public listing optional add-ons. */
.listo-single-main .listo-public-addons {
    margin: 24px 0 0;
    padding: 22px 24px;
    border: 2px solid #4eaa91 !important;
    border-radius: 16px;
    background: #f2faf7;
    box-shadow: 0 2px 0 rgba(78,170,145,.08);
}
.listo-single-main .listo-public-addons__title {
    margin: 0;
    color: #0f5b54;
}
.listo-single-main .listo-public-addons__subtitle,
.listo-single-main .listo-public-addons__note {
    color: #486b67;
}
.listo-single-main .listo-public-addon {
    border-bottom-color: #cce5dd;
}
.listo-single-main .listo-public-addon__price strong {
    color: #0f5b54;
}
@media (max-width: 700px) {
    .listo-single-main .listo-public-addons {
        margin-top: 20px;
        padding: 18px 16px;
    }
}


/* NEXT174 — flexible check-in helper text */
.listo-field-help {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #667085;
}

/* NEXT176 — payout schedule edit state */

/* ========================================================================
   NEXT201 — Homepage row navigation + six-card desktop layout
   ------------------------------------------------------------------------
   Navigation controls live in the row header, opposite the row title,
   rather than floating over listing cards. This keeps the navigation target
   physically separate from the card links and mirrors the current Airbnb
   desktop pattern. Desktop homepage rows show six complete listing cards at
   once; the shared listing-card component and search-results grid are not
   changed.
   ======================================================================== */
.listo-homepage-content {
  width: 100%;
  max-width: none;
  padding-left: 32px;
  padding-right: 32px;
}

.listo-home-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 36px;
  margin: 32px 0 16px;
}
.listo-home-row-header:first-child {
  margin-top: 0;
}
.listo-home-row-title {
  margin: 0;
  min-width: 0;
}
.listo-home-row-nav-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.listo-home-row-nav {
  position: static;
  transform: none;
  display: flex;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  z-index: auto;
}
.listo-home-row-nav:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--surface-alt);
}
.listo-home-row-nav:disabled {
  opacity: 0.35;
  cursor: default;
}
.listo-home-row-nav svg {
  width: 17px;
  height: 17px;
}

@media (min-width: 901px) {
  .listo-home-row__item {
    width: calc((100% - 80px) / 6);
    flex: 0 0 calc((100% - 80px) / 6);
  }
  .listo-home-row__item .listo-card__title { font-size: 14px; }
  .listo-home-row__item .listo-card__price { font-size: 13px; }
  .listo-home-row__item .listo-card__deposit-note { font-size: 11px; }
}

@media (max-width: 900px) {
  .listo-homepage-content {
    padding-left: 24px;
    padding-right: 24px;
  }
  .listo-home-row-nav-group {
    display: none;
  }
}

@media (max-width: 480px) {
  .listo-homepage-content {
    padding-left: 0;
    padding-right: 0;
  }
}

.listo-calendar-pricing-page .listo-cp-field-help {
    display: block;
    margin-top: 6px;
    color: #6b7478;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
}

/* NEXT206 — External Calendars desktop UI refinement
 * Presentation-only: preserves all existing selectors used by the
 * external-calendar JavaScript/AJAX workflow. Uses Listo teal as a
 * functional accent and semantic surfaces for sync guidance/status.
 */
.listo-external-cal-page {
  max-width: 1200px;
  padding-top: 52px;
  padding-bottom: 72px;
}

.listo-external-cal-hero {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
}

.listo-external-cal-hero-icon,
.listo-external-cal-listing-icon,
.listo-external-cal-export-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--listo-green-dark);
  background: var(--listo-green-tint);
  border: 1px solid rgba(79, 169, 138, .22);
}

.listo-external-cal-hero-icon {
  width: 50px;
  height: 50px;
  margin-top: 2px;
  border-radius: 14px;
}

.listo-external-cal-hero-icon svg { width: 27px; height: 27px; }

.listo-external-cal-hero h1 {
  margin: 0 0 7px;
  font-size: 36px;
  letter-spacing: -0.02em;
}

.listo-external-cal-intro {
  max-width: 780px;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}

.listo-external-cal-notice {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0 0 28px;
  padding: 16px 18px;
  background: var(--listo-green-tint);
  border: 1px solid rgba(79, 169, 138, .25);
  border-radius: var(--radius);
}

.listo-external-cal-notice-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--listo-green-dark);
  margin-top: 1px;
}

.listo-external-cal-notice-icon svg { width: 22px; height: 22px; }

.listo-external-cal-notice-copy strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.listo-external-cal-notice-copy p {
  margin: 0;
  color: #4f6760;
  font-size: 13px;
  line-height: 1.55;
}

.listo-external-cal-listing {
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  padding: 0 26px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 3px 12px rgba(26, 26, 26, .045);
}

.listo-external-cal-listing::before {
  content: '';
  display: block;
  height: 4px;
  margin: 0 -26px 22px;
  background: var(--listo-green);
}

.listo-external-cal-listing-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
}

.listo-external-cal-listing-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.listo-external-cal-listing-icon svg { width: 22px; height: 22px; }

.listo-external-cal-listing-head h3 {
  margin: 0 0 3px;
  font-size: 19px;
  line-height: 1.3;
}

.listo-external-cal-listing-label {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 500;
}

.listo-external-cal-rows {
  display: grid;
  gap: 10px;
}

.listo-external-cal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 11px;
}

.listo-external-cal-row .listo-external-cal-input {
  min-width: 0;
  background: var(--surface);
}

.listo-external-cal-remove {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e7caca;
  border-radius: 10px;
  background: #fff7f7;
  color: var(--error);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.listo-external-cal-remove:hover {
  background: #fdeeee;
  border-color: #dfaaaa;
}

.listo-external-cal-add {
  margin-top: 12px !important;
  background: var(--surface);
}

.listo-external-cal-add:hover {
  color: var(--listo-green-dark);
  border-color: var(--listo-green);
  background: var(--listo-green-tint);
}

.listo-external-cal-save-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.listo-external-cal-save {
  min-width: 92px;
}

.listo-external-cal-status {
  display: none;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  margin: 0;
  border-radius: 9px;
  background: #f1f8f5;
  color: #4d7165;
  font-size: 12px;
}

.listo-external-cal-status.is-visible {
  display: inline-flex;
}

.listo-external-cal-listing [data-external-cal-error] {
  margin-top: 12px !important;
  padding: 11px 13px;
  border: 1px solid #f0c8c8;
  border-radius: 9px;
  background: #fff5f5;
}

.listo-external-cal-export {
  margin-top: 24px;
  padding: 22px 20px 18px;
  border: 1px solid #d8e8e2;
  border-radius: 14px;
  background: #f8fcfa;
}

.listo-external-cal-export-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.listo-external-cal-export-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.listo-external-cal-export-icon svg { width: 20px; height: 20px; }

.listo-external-cal-export h4 {
  margin: 0 0 4px;
  font-size: 16px;
}

.listo-external-cal-export-head p {
  margin: 0;
  max-width: 800px;
  line-height: 1.5;
}

.listo-external-cal-export-url-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.listo-external-cal-export-url {
  min-width: 0;
  height: auto;
  background: var(--surface);
  font-size: 13px;
}

.listo-external-cal-copy {
  flex: 0 0 auto;
  min-width: 78px;
  background: var(--surface);
}

.listo-external-cal-regenerate {
  margin-top: 10px;
  background: var(--surface);
  font-size: 13px;
  padding: 9px 14px;
}

.listo-external-cal-export-note {
  margin: 8px 0 0;
  font-size: 12px;
}

@media (max-width: 900px) {
  .listo-external-cal-page {
    padding-top: 36px;
    padding-bottom: 48px;
  }
  .listo-external-cal-listing {
    padding-left: 20px;
    padding-right: 20px;
  }
  .listo-external-cal-listing::before {
    margin-left: -20px;
    margin-right: -20px;
  }
}

@media (max-width: 600px) {
  .listo-external-cal-hero { gap: 12px; }
  .listo-external-cal-hero-icon { width: 42px; height: 42px; border-radius: 11px; }
  .listo-external-cal-hero-icon svg { width: 23px; height: 23px; }
  .listo-external-cal-hero h1 { font-size: 30px; }
  .listo-external-cal-row { align-items: flex-start; }
  .listo-external-cal-row .listo-external-cal-input { flex: 1; }
  .listo-external-cal-save-row { align-items: flex-start; flex-direction: column; }
  .listo-external-cal-export-url-row { align-items: stretch; flex-direction: column; }
  .listo-external-cal-copy { width: 100%; }
}

/* NEXT208 — Shared account-page title treatment.
 * The icon SVGs and semantic colors intentionally mirror the account menu.
 * Keep all top-level account page titles at one desktop size for consistency.
 */
.listo-page-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
.listo-page-title-row > h1,
.listo-page-title-row .listo-inbox__heading {
  margin: 0 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
.listo-page-title__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.listo-page-title__icon svg {
  width: 23px;
  height: 23px;
}
.listo-page-title__icon--dashboard,
.listo-page-title__icon--listings,
.listo-page-title__icon--home { color: #3B82F6; background: #EFF6FF; }
.listo-page-title__icon--bookings { color: #2563EB; background: #EFF6FF; }
.listo-page-title__icon--calendar { color: #F59E0B; background: #FFFBEB; }
.listo-page-title__icon--external-calendars { color: #8B5CF6; background: #F5F3FF; }
.listo-page-title__icon--cohosts,
.listo-page-title__icon--support { color: #2196F3; background: #EAF5FF; }
.listo-page-title__icon--payouts,
.listo-page-title__icon--wallet { color: #16A34A; background: #F0FDF4; }
.listo-page-title__icon--inbox,
.listo-page-title__icon--affiliate { color: #8B5CF6; background: #F5F3FF; }
.listo-page-title__icon--cases,
.listo-page-title__icon--deposits { color: #F97316; background: #FFF7ED; }
.listo-page-title__icon--profile,
.listo-page-title__icon--faq { color: #64748B; background: #F1F5F9; }
.listo-page-title__icon--heart { color: #E11D48; background: #FFF1F2; }

/* External Calendars uses the same page-title system; its hero keeps the
 * existing intro/notice layout but no longer maintains a separate icon style. */
.listo-external-cal-hero > .listo-page-title-row { margin-bottom: 0; }
.listo-external-cal-hero > .listo-page-title-row + div { flex: 1; }

@media (max-width: 700px) {
  .listo-page-title-row { gap: 10px; margin-bottom: 16px; }
  .listo-page-title__icon { width: 40px; height: 40px; min-width: 40px; border-radius: 12px; }
  .listo-page-title__icon svg { width: 20px; height: 20px; }
  .listo-page-title-row > h1,
  .listo-page-title-row .listo-inbox__heading { font-size: 22px !important; }
}

/* NEXT208 — External Calendars now uses the shared page-title row. */
.listo-external-cal-hero { display: block; }
.listo-external-cal-hero > .listo-page-title-row { margin-bottom: 8px; }
.listo-external-cal-hero > .listo-page-title-row + div { flex: none; }

/* NEXT209 — scalable External Calendars manager
 * Replaces the long stack of full-size listing cards with a compact,
 * searchable, filterable management table. Existing calendar inputs,
 * save/remove/export selectors remain intact inside the inline editor.
 */
.listo-external-cal-page { max-width: 1280px; }
.listo-external-cal-summary {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  margin: 0 0 16px; padding: 16px 20px;
  border:1px solid var(--border); border-radius:14px; background:var(--surface);
}
.listo-external-cal-summary-copy { display:flex; align-items:baseline; gap:7px; }
.listo-external-cal-summary-copy strong { font-size:22px; line-height:1; }
.listo-external-cal-summary-copy span { color:var(--ink-muted); font-size:13px; }
.listo-external-cal-summary-stats { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.listo-external-cal-stat { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.listo-external-cal-stat i { width:7px; height:7px; border-radius:50%; display:block; background:#98A2B3; }
.listo-external-cal-stat--connected { color:#16735A; background:#EEF9F4; }
.listo-external-cal-stat--connected i { background:#22A06B; }
.listo-external-cal-stat--neutral { color:#667085; background:#F2F4F7; }
.listo-external-cal-stat--attention { color:#A15C00; background:#FFF7E8; }
.listo-external-cal-stat--attention i { background:#F59E0B; }

.listo-external-cal-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 12px; }
.listo-external-cal-search { position:relative; flex:1 1 auto; max-width:560px; }
.listo-external-cal-search svg { position:absolute; left:14px; top:50%; width:19px; height:19px; transform:translateY(-50%); color:#667085; pointer-events:none; }
.listo-external-cal-search-input,
.listo-external-cal-filter-select { width:100%; height:46px; box-sizing:border-box; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; outline:none; }
.listo-external-cal-search-input { padding:0 14px 0 42px; }
.listo-external-cal-search-input:focus,
.listo-external-cal-filter-select:focus { border-color:var(--listo-green); box-shadow:0 0 0 3px rgba(78,170,145,.12); }
.listo-external-cal-filter { flex:0 0 190px; }
.listo-external-cal-filter-select { padding:0 38px 0 13px; }

.listo-external-cal-table { overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:0 3px 12px rgba(26,26,26,.04); }
.listo-external-cal-table-head,
.listo-external-cal-item-row { display:grid; grid-template-columns:minmax(320px, 1fr) 100px minmax(170px, 210px) 130px; align-items:center; gap:18px; }
.listo-external-cal-table-head { min-height:46px; padding:0 20px; background:#F8FAFA; border-bottom:1px solid var(--border); color:#667085; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.listo-external-cal-item { border-bottom:1px solid var(--border); }
.listo-external-cal-item:last-child { border-bottom:0; }
.listo-external-cal-item-row { min-height:78px; padding:10px 20px; transition:background .15s ease; }
.listo-external-cal-item-row:hover { background:#FCFEFD; }
.listo-external-cal-item.is-expanded .listo-external-cal-item-row { background:#F8FCFA; }
.listo-external-cal-item-listing { min-width:0; display:flex; align-items:center; gap:12px; }
.listo-external-cal-item-icon { width:38px; height:38px; flex:0 0 38px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; color:#8B5CF6; background:#F5F3FF; border:1px solid #E8DEFF; }
.listo-external-cal-item-icon svg { width:20px; height:20px; }
.listo-external-cal-item-title-wrap { min-width:0; }
.listo-external-cal-item-title-wrap strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; line-height:1.35; }
.listo-external-cal-item-title-wrap span { display:block; margin-top:3px; color:var(--ink-muted); font-size:12px; }
.listo-external-cal-item-count { color:#344054; font-size:14px; font-weight:600; }
.listo-external-cal-status-badge { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.listo-external-cal-status-badge i { width:7px; height:7px; border-radius:50%; display:block; }
.listo-external-cal-status-badge--connected { color:#16735A; background:#EEF9F4; }
.listo-external-cal-status-badge--connected i { background:#22A06B; }
.listo-external-cal-status-badge--not-connected { color:#667085; background:#F2F4F7; }
.listo-external-cal-status-badge--not-connected i { background:#98A2B3; }
.listo-external-cal-status-badge--attention { color:#A15C00; background:#FFF7E8; }
.listo-external-cal-status-badge--attention i { background:#F59E0B; }
.listo-external-cal-manage { min-width:110px; justify-content:center; padding-left:14px; padding-right:14px; }
/* NEXT297 — slightly smaller Connect calendar action for unconnected listings. */
.listo-external-cal-item[data-status="not-connected"] .listo-external-cal-manage { min-width:98px; padding-left:12px; padding-right:12px; font-size:13px; }
.listo-external-cal-item.is-expanded .listo-external-cal-manage { border-color:var(--ink); background:var(--surface-alt); }
.listo-external-cal-editor { border-top:1px solid var(--border); background:#FBFCFC; }
.listo-external-cal-editor[hidden] { display:none !important; }
.listo-external-cal-editor-inner { padding:24px 28px 28px; }
.listo-external-cal-editor-heading { margin-bottom:18px; }
.listo-external-cal-editor-heading h3 { margin:0 0 4px; font-size:17px; }
.listo-external-cal-editor-heading p { margin:0; color:var(--ink-muted); font-size:13px; line-height:1.5; }
.listo-external-cal-editor .listo-external-cal-listing { margin:0; padding:0; overflow:visible; border:0; border-radius:0; box-shadow:none; background:transparent; }
.listo-external-cal-editor .listo-external-cal-listing::before { display:none; }
.listo-external-cal-editor .listo-external-cal-listing-head { display:none; }
.listo-external-cal-editor .listo-external-cal-add { margin-top:10px !important; }
.listo-external-cal-editor .listo-external-cal-export { margin-top:22px; }
.listo-external-cal-no-results { padding:36px 20px; text-align:center; color:var(--ink-muted); font-size:14px; }
.listo-external-cal-item[hidden] { display:none !important; }

@media (max-width:900px) {
  .listo-external-cal-summary { align-items:flex-start; flex-direction:column; }
  .listo-external-cal-summary-stats { justify-content:flex-start; }
  .listo-external-cal-table-head { display:none; }
  .listo-external-cal-item-row { grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:14px 16px; }
  .listo-external-cal-item-count { display:none; }
  .listo-external-cal-item-status { grid-column:1; grid-row:2; padding-left:50px; margin-top:-9px; }
  .listo-external-cal-item-action { grid-column:2; grid-row:1 / span 2; }
  .listo-external-cal-editor-inner { padding:20px 16px 22px; }
}
@media (max-width:600px) {
  .listo-external-cal-toolbar { align-items:stretch; flex-direction:column; }
  .listo-external-cal-search { max-width:none; }
  .listo-external-cal-filter { flex-basis:auto; }
  .listo-external-cal-summary-stats { display:grid; grid-template-columns:1fr; width:100%; }
  .listo-external-cal-stat { justify-content:flex-start; }
  .listo-external-cal-item-title-wrap strong { white-space:normal; }
  .listo-external-cal-item-status { padding-left:0; }
  .listo-external-cal-manage { min-width:92px; }
  .listo-external-cal-item[data-status="not-connected"] .listo-external-cal-manage { min-width:84px; padding-left:10px; padding-right:10px; font-size:13px; }
}

/* NEXT211 — scalable Co-host management view. The listing-level management
   UI uses the same portfolio pattern as External Calendars: compact rows,
   search/filter controls, and one expandable editor at a time. Existing
   co-host tables/forms keep their established selectors for JS compatibility. */
.listo-cohost-management-section { overflow: hidden; }
.listo-cohost-management-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.listo-cohost-management-head h2 { margin-bottom: 4px; }
.listo-cohost-management-summary {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-size: 13px;
  white-space: nowrap;
}
.listo-cohost-management-summary strong { color: var(--ink); }
.listo-cohost-management-summary span { margin: 0 6px; color: var(--border-strong, #c9ced1); }
.listo-cohost-management-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 14px;
}
.listo-cohost-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 220px;
}
.listo-cohost-search-wrap svg {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--ink-muted);
  pointer-events: none;
}
.listo-cohost-search-wrap input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
}
.listo-cohost-filter-wrap { flex: 0 0 190px; }
.listo-cohost-filter-wrap select {
  width: 100%;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 0 14px;
  color: var(--ink);
}
.listo-cohost-management-table {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.listo-cohost-management-table__head,
.listo-cohost-management-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(110px, .75fr) minmax(160px, .9fr) 130px;
  align-items: center;
  column-gap: 20px;
}
.listo-cohost-management-table__head {
  min-height: 44px;
  padding: 0 18px;
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.listo-cohost-listing { margin: 0; padding: 0; background: var(--surface); border: 0; border-radius: 0; }
.listo-cohost-listing + .listo-cohost-listing { border-top: 1px solid var(--border); }
.listo-cohost-management-row {
  min-height: 74px;
  padding: 12px 18px;
  transition: background .15s ease;
}
.listo-cohost-listing:hover .listo-cohost-management-row { background: var(--surface-alt); }
.listo-cohost-management-listing strong { font-size: 15px; line-height: 1.35; }
.listo-cohost-management-count { display: flex; align-items: baseline; gap: 5px; color: var(--ink-muted); }
.listo-cohost-management-count strong { color: var(--ink); font-size: 16px; }
.listo-cohost-management-count small { display: block; margin-left: 4px; color: var(--warning, #a36a00); font-size: 12px; }
.listo-cohost-management-status { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: 14px; }
.listo-cohost-status-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: #b9bec2; }
.listo-cohost-status-dot--active { background: var(--listo-green, #4eae8d); }
.listo-cohost-status-dot--pending { background: #d99a35; }
.listo-cohost-management-action { text-align: right; }
.listo-cohost-management-action .listo-btn { min-width: 112px; justify-content: center; }
.listo-cohost-chevron { width: 15px; height: 15px; margin-left: 10px; flex: 0 0 15px; transition: transform .15s ease; }
.listo-cohost-manage-toggle[aria-expanded="true"] .listo-cohost-chevron { transform: rotate(180deg); }
.listo-cohost-manage-toggle { gap: 0; }
.listo-cohost-details {
  margin: 0 18px 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-alt);
}
.listo-cohost-details[hidden] { display: none; }
.listo-cohost-details h4 { margin: 0 0 10px; font-size: 14px; }
.listo-cohost-details-subtitle { margin-top: 20px !important; }
.listo-cohost-details .listo-cohost-table-wrap { background: var(--surface); }
.listo-cohost-details > .listo-cohost-invite-toggle { margin-top: 14px; }
.listo-cohost-split-field > label { display: block; margin-bottom: 8px; }
.listo-cohost-invite-split-type { width: 100%; height: 46px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 0 42px 0 14px; }
.listo-cohost-split-input-wrap { position: relative; }
.listo-cohost-invite-split { width: 100%; }
.listo-cohost-split-prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); font-weight: 600; pointer-events: none; }
.listo-cohost-split-prefix + .listo-cohost-invite-split { padding-left: 30px; }
.listo-cohost-split-help[hidden] { display: none; }

.listo-cohost-no-results { padding: 28px 16px; text-align: center; color: var(--ink-muted); }
.listo-cohost-no-results[hidden] { display: none; }
@media (max-width: 800px) {
  .listo-cohost-management-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .listo-cohost-management-summary { white-space: normal; }
  .listo-cohost-management-table__head { display: none; }
  .listo-cohost-management-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 16px; }
  .listo-cohost-management-listing { grid-column: 1 / 2; }
  .listo-cohost-management-action { grid-column: 2 / 3; grid-row: 1 / 4; align-self: center; }
  .listo-cohost-management-count { grid-column: 1 / 2; }
  .listo-cohost-management-status { grid-column: 1 / 2; }
  .listo-cohost-management-action .listo-btn { min-width: 96px; }
}
@media (max-width: 520px) {
  .listo-cohost-management-toolbar { flex-direction: column; align-items: stretch; }
  .listo-cohost-search-wrap, .listo-cohost-filter-wrap { min-width: 0; flex-basis: auto; width: 100%; }
  .listo-cohost-management-row { grid-template-columns: 1fr; }
  .listo-cohost-management-listing,
  .listo-cohost-management-count,
  .listo-cohost-management-status,
  .listo-cohost-management-action { grid-column: 1; grid-row: auto; }
  .listo-cohost-management-action { text-align: left; }
  .listo-cohost-management-action .listo-btn { width: 100%; }
  .listo-cohost-details { margin: 0 12px 12px; padding: 14px; }
}

/* NEXT213 — My Refunds desktop management UI.
 * Presentation-only redesign. Existing payout controls and refund data
 * attributes/records remain unchanged.
 */
.listo-refunds-page__intro {
  max-width: 760px;
  margin: -8px 0 22px;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.55;
}
.listo-refunds-page__reminder {
  background: #F0FDFA;
  border-color: #C8EEE5;
  color: var(--ink);
}
.listo-refunds-page__reminder > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.listo-refunds-page__reminder > div span { color: var(--ink-muted); font-size: 13px; }
.listo-refunds-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 30px;
}
.listo-refunds-summary__item {
  min-height: 96px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.listo-refunds-summary__item strong { font-size: 26px; line-height: 1; letter-spacing: -.02em; }
.listo-refunds-summary__item span { margin-top: 7px; color: var(--ink-muted); font-size: 13px; }
.listo-refunds-summary__item--success { border-color: #D6EEDC; background: #F8FCF9; }
.listo-refunds-summary__item--success strong { color: #15803D; }
.listo-refunds-summary__item--pending { border-color: #F0E3C2; background: #FFFCF5; }
.listo-refunds-summary__item--pending strong { color: #A16207; }
.listo-refunds-settings,
.listo-refunds-history-section {
  margin-top: 28px;
}
.listo-refunds-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.listo-refunds-section-heading h2 { margin: 0 0 5px; font-size: 22px; }
.listo-refunds-section-heading .listo-caption { margin: 0; max-width: 820px; }
.listo-refunds-saved-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #ECFDF3;
  color: #15803D;
  font-size: 12px;
  font-weight: 700;
}
.listo-refunds-payout-card {
  max-width: none !important;
  padding: 24px !important;
  border-radius: 16px !important;
}
.listo-refunds-payout-grid {
  display: grid;
  grid-template-columns: .8fr 1fr 1.2fr;
  gap: 16px;
}
.listo-refunds-payout-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.listo-refunds-payout-actions .listo-caption { margin: 0; }
.listo-refunds-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 12px;
  margin: 32px 0 14px;
}
.listo-refunds-search,
.listo-refunds-filter {
  position: relative;
  display: flex;
  align-items: center;
}
.listo-refunds-search > span {
  position: absolute;
  left: 16px;
  color: var(--ink-muted);
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
}
.listo-refunds-search input,
.listo-refunds-filter select {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.listo-refunds-search input { padding: 11px 16px 11px 44px; }
.listo-refunds-filter select { padding: 11px 38px 11px 16px; }
.listo-refunds-search input:focus,
.listo-refunds-filter select:focus { outline: none; border-color: var(--listo-green); box-shadow: 0 0 0 3px var(--listo-green-tint); }
.listo-refunds-table {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}
.listo-refunds-table__head,
.listo-refunds-table__row > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 170px 125px;
  align-items: center;
  gap: 18px;
}
.listo-refunds-table__head {
  padding: 13px 20px;
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.listo-refunds-table__row { border-top: 1px solid var(--border); }
.listo-refunds-table__row:first-of-type { border-top: 0; }
.listo-refunds-table__row > summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 20px;
  min-height: 76px;
  box-sizing: border-box;
}
.listo-refunds-table__row > summary::-webkit-details-marker { display: none; }
.listo-refunds-table__row > summary:hover { background: #FCFCFC; }
.listo-refunds-table__booking { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.listo-refunds-table__booking strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.listo-refunds-table__booking small { color: var(--ink-muted); font-size: 12px; }
.listo-refunds-table__amount { font-size: 16px; white-space: nowrap; }
.listo-refunds-table__view { justify-self: end; color: var(--ink-muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.listo-refunds-table__view > span { display: inline-block; margin-left: 5px; transition: transform .15s ease; }
.listo-refunds-table__row[open] .listo-refunds-table__view > span { transform: rotate(180deg); }
.listo-refunds-table__details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 20px 20px;
  border-top: 1px dashed var(--border);
  background: #FBFCFC;
}
.listo-refunds-table__details > div { display: flex; flex-direction: column; gap: 4px; }
.listo-refunds-table__details span { color: var(--ink-muted); font-size: 11px; }
.listo-refunds-table__details strong { font-size: 13px; overflow-wrap: anywhere; }
.listo-refunds-empty-state,
.listo-refunds-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 28px;
  box-sizing: border-box;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: #FCFDFC;
  text-align: center;
}
.listo-refunds-empty-state__icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 12px;
  background: #F0FDFA;
  color: #0F766E;
  font-size: 18px;
}
.listo-refunds-empty-state strong,
.listo-refunds-no-results strong { font-size: 15px; }
.listo-refunds-empty-state p,
.listo-refunds-no-results span { max-width: 460px; margin: 5px 0 0; color: var(--ink-muted); font-size: 13px; line-height: 1.5; }
.listo-refunds-no-results { margin: 0 0 18px; min-height: 110px; }

@media (max-width: 900px) {
  .listo-refunds-payout-grid { grid-template-columns: 1fr 1fr; }
  .listo-refunds-payout-grid .listo-field:last-child { grid-column: 1 / -1; }
  .listo-refunds-table__head,
  .listo-refunds-table__row > summary { grid-template-columns: minmax(0, 1fr) 125px 145px 105px; gap: 12px; }
}

@media (max-width: 700px) {
  .listo-refunds-page__intro { font-size: 14px; }
  .listo-refunds-summary { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .listo-refunds-summary__item { min-height: 82px; padding: 15px; }
  .listo-refunds-summary__item strong { font-size: 22px; }
  .listo-refunds-toolbar { grid-template-columns: 1fr; }
  .listo-refunds-payout-grid { grid-template-columns: 1fr; }
  .listo-refunds-payout-grid .listo-field:last-child { grid-column: auto; }
  .listo-refunds-section-heading { flex-direction: column; }
  .listo-refunds-table { border-radius: 14px; }
  .listo-refunds-table__head { display: none; }
  .listo-refunds-table__row > summary { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 15px; min-height: 0; }
  .listo-refunds-table__booking { grid-column: 1 / -1; }
  .listo-refunds-table__amount { grid-column: 1; grid-row: 2; }
  .listo-refunds-table__row > summary > .listo-status-badge { grid-column: 2; grid-row: 2; justify-self: end; }
  .listo-refunds-table__view { grid-column: 1 / -1; justify-self: start; }
  .listo-refunds-table__details { grid-template-columns: 1fr 1fr; padding: 15px; }
}

/* NEXT215 — My Refunds empty-state reliability + mobile transaction cards. */
.listo-refunds-no-results[hidden] { display: none !important; }
.listo-refunds-no-results { margin: 0 0 18px; }
.listo-refunds-filter {
  position: relative;
  min-width: 0;
}
.listo-refunds-filter::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--ink-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.listo-refunds-filter select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 44px;
}
.listo-refunds-filter select::-ms-expand { display: none; }
.listo-refunds-filter select:disabled { cursor: not-allowed; }

@media (max-width: 700px) {
  .listo-refunds-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .listo-refunds-summary__item {
    min-height: 78px;
    padding: 13px 12px;
    border-radius: 14px;
  }
  .listo-refunds-summary__item strong { font-size: 20px; }
  .listo-refunds-summary__item span { margin-top: 5px; font-size: 11px; line-height: 1.25; }

  .listo-refunds-toolbar { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .listo-refunds-search input,
  .listo-refunds-filter select { min-height: 50px; }
  .listo-refunds-filter { width: 100%; }

  .listo-refunds-history-section { margin-top: 26px; }
  .listo-refunds-section-heading { margin-bottom: 12px; }
  .listo-refunds-section-heading h2 { font-size: 20px; }

  /* Mobile turns each desktop row into a compact transaction card. */
  .listo-refunds-table {
    overflow: visible;
    border-radius: 14px;
    border: 0;
    background: transparent;
  }
  .listo-refunds-table__head { display: none; }
  .listo-refunds-table__row {
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  }
  .listo-refunds-table__row > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 16px;
    min-height: 0;
    background: #fff;
  }
  .listo-refunds-table__row > summary:hover { background: #fff; }
  .listo-refunds-table__booking { grid-column: 1 / -1; gap: 3px; }
  .listo-refunds-table__booking strong {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 14px;
    line-height: 1.35;
  }
  .listo-refunds-table__booking small { font-size: 12px; }
  .listo-refunds-table__amount {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    font-size: 18px;
  }
  .listo-refunds-table__row > summary > .listo-status-badge {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: center;
  }
  .listo-refunds-table__view {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 2px;
    color: var(--ink);
    font-size: 12px;
  }
  .listo-refunds-table__view > span { color: var(--ink-muted); }
  .listo-refunds-table__details {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px 16px 16px;
  }
  .listo-refunds-table__details > div { min-width: 0; }

  .listo-refunds-no-results {
    min-height: 128px;
    padding: 24px 18px;
    margin-bottom: 16px;
    border-radius: 14px;
  }
}

@media (max-width: 380px) {
  .listo-refunds-summary { gap: 6px; }
  .listo-refunds-summary__item { padding: 11px 8px; }
  .listo-refunds-summary__item strong { font-size: 18px; }
  .listo-refunds-summary__item span { font-size: 10px; }
  .listo-refunds-table__details { grid-template-columns: 1fr; }
}


/* ==========================================================================\n   NEXT216 — Account UI completion + Listo Sky Blue brand\n   Presentation-layer only. Existing business logic/selectors are preserved.\n   ========================================================================== */

/* Account page content widths: standard pages use the shared 1200px canvas;\n   specialist workspaces opt into a wider canvas only where their information\n   density warrants it. */
.listo-payouts-page,
.listo-wallet-page,
.listo-cases-page,
.listo-favorites-page,
.listo-support-page,
.listo-dashboard-page { max-width: 1200px; }
.listo-inbox-page { max-width: 1200px; }

/* Inbox: title belongs to the page canvas, not the 360px thread column. */
.listo-inbox-page .listo-inbox { margin: 0; width: 100%; }
.listo-inbox-page .listo-inbox__title-row {
  margin-bottom: 18px;
  gap: 8px;
}
.listo-inbox-page .listo-inbox__title-row .listo-page-title__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
}
.listo-inbox-page .listo-inbox__title-row .listo-page-title__icon svg {
  width: 20px;
  height: 20px;
}

/* Payouts — desktop hierarchy */
.listo-payouts-page .listo-checkout-card { max-width: 680px !important; }
.listo-payouts-page .listo-checkout-card:first-of-type { max-width: 520px !important; }
.listo-payouts-page h2 { font-size: 19px; letter-spacing: -.01em; }
.listo-payouts-page .listo-field label { font-size: 13px; font-weight: 700; }
.listo-payouts-page .listo-btn { min-height: 44px; }

/* Wallet — make the balance unmistakably the focal point.
   Keep the existing card dimensions; center the fixed/max-width card
   within the desktop wallet content area. */
.listo-wallet-page .listo-wallet-balance-card {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.listo-wallet-page .listo-wallet-info {
  max-width: 900px;
  margin: 18px auto 0;
  color: #607080;
  font-size: 14px;
  line-height: 1.6;
}
.listo-wallet-page .listo-wallet-info p { margin: 0 0 8px; }
.listo-wallet-page .listo-wallet-info p:last-child { margin-bottom: 0; }
.listo-wallet-page .listo-wallet-info strong { color: #263238; }
.listo-wallet-page .listo-wallet-history { max-width: 900px; }
.listo-wallet-page .listo-wallet-history__row { transition: border-color .15s ease, background .15s ease; }
.listo-wallet-page .listo-wallet-history__row:hover { border-color: #B9DBF8; background: #F8FCFF; }

/* Cases — compact status-driven cards on desktop. */
.listo-cases-page .listo-complaint-card { max-width: 900px; padding: 18px 20px; }
.listo-cases-page .listo-complaint-card__title { font-size: 14px; }

/* Favorites — preserve the listing-card component; mobile gets a deliberate\n   single-column reading rhythm rather than merely shrinking the grid. */
.listo-favorites-page .listo-listing-grid { margin-top: 8px; }

/* Support — consistent desktop workspace width. */
.listo-support-page .listo-support-chat { width: 100%; max-width: 920px; }
.listo-support-page .listo-checkout-card { max-width: 560px !important; }

/* Host dashboard — keep controls attached to the title without creating a\n   second oversized heading treatment. */
.listo-dashboard-page .listo-earnings__header { margin-bottom: 18px; }
.listo-dashboard-page .listo-earnings__header-controls { align-items: center; }

/* Mobile dedicated layouts for pages that previously only collapsed desktop. */
@media (max-width: 700px) {
  .listo-payouts-page,
  .listo-cases-page,
  .listo-favorites-page,
  .listo-support-page,
  .listo-dashboard-page { padding-top: 8px; }

  /* Wallet: keep the Host Account mobile canvas/gutters, with a deliberate
     20px separation between the header and the page title. */
  .listo-wallet-page { padding-top: 20px; }

  .listo-payouts-page .listo-page-title-row,
  .listo-wallet-page .listo-page-title-row,
  .listo-cases-page .listo-page-title-row,
  .listo-favorites-page .listo-page-title-row,
  .listo-support-page .listo-page-title-row,
  .listo-dashboard-page .listo-page-title-row { margin-bottom: 14px; }

  /* Payouts */
  .listo-payouts-page h2 { margin-top: 28px !important; font-size: 18px; }
  .listo-payouts-page .listo-checkout-card { max-width: none !important; width: 100%; padding: 18px; }
  .listo-payouts-page .listo-btn { width: 100%; }
  .listo-payouts-page .listo-field input,
  .listo-payouts-page .listo-field select,
  .listo-payouts-page .listo-select { min-height: 48px; width: 100%; }
  .listo-payouts-page label[style*="display:block"] { padding: 12px 0; }

  /* Wallet */
  .listo-wallet-page .listo-wallet-balance-card { max-width: none; padding: 20px; border-radius: 16px; }
  .listo-wallet-page .listo-wallet-balance-card__amount { font-size: 34px; }
  .listo-wallet-page .listo-wallet-info { margin-top: 16px; font-size: 13px; line-height: 1.55; }
  .listo-wallet-page h2 { margin-top: 26px !important; font-size: 18px; }
  .listo-wallet-page .listo-wallet-history__row { padding: 14px; border-radius: 14px; }
  .listo-wallet-page .listo-wallet-history__amount { font-size: 15px; }

  /* Cases */
  .listo-cases-page .listo-complaint-card { max-width: none; padding: 16px; border-radius: 14px; margin-bottom: 12px; }
  .listo-cases-page .listo-complaint-card__header { gap: 10px; }
  .listo-cases-page .listo-complaint-card__title { font-size: 14px; line-height: 1.35; }
  .listo-cases-page .listo-status-badge { flex-shrink: 0; }

  /* Favorites */
  .listo-favorites-page .listo-listing-grid { grid-template-columns: 1fr !important; gap: 18px; }
  .listo-favorites-page .listo-empty-state { padding: 30px 18px; }

  /* Support */
  .listo-support-page .listo-support-chat { max-width: none; width: 100%; height: calc(100dvh - 190px); min-height: 480px; max-height: none; border-radius: 14px; }
  .listo-support-page .listo-support-chat__header { padding: 12px 14px; }
  .listo-support-page .listo-support-chat__messages { padding: 14px; }
  .listo-support-page .listo-support-msg { max-width: 84%; padding: 10px 13px; font-size: 14px; }
  .listo-support-page .listo-support-chat__composer { padding: 10px 12px 12px; gap: 8px; }
  .listo-support-page .listo-support-chat__composer textarea { min-height: 42px; padding: 10px 14px; }
  .listo-support-page #listo-support-send-btn { flex: 0 0 42px; width: 42px; height: 42px; }
  .listo-support-page .listo-checkout-card { max-width: none !important; padding: 18px; }
  .listo-support-page .listo-btn { min-height: 46px; }

  /* Dashboard */
  .listo-dashboard-page .listo-earnings__header { align-items: stretch; gap: 12px; }
  .listo-dashboard-page .listo-earnings__header-controls { width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; }
  .listo-dashboard-page .listo-earnings__header-controls form,
  .listo-dashboard-page .listo-earnings__header-controls .listo-select,
  .listo-dashboard-page .listo-earnings__header-controls .listo-btn { width: 100%; }
}

@media (max-width: 380px) {
  .listo-wallet-page .listo-wallet-balance-card__amount { font-size: 30px; }
  .listo-cases-page .listo-complaint-card__header { flex-direction: column; align-items: flex-start; }
  .listo-cases-page .listo-status-badge { align-self: flex-start; }
  .listo-support-page .listo-support-chat { min-height: 440px; }
}

/* Sky-blue brand accents for older hard-coded Listo-green surfaces that are\n   presentation-only. Semantic success/paid/connected greens remain green. */
.listo-calendar-pricing-eyebrow { color: #1976D2; }
.listo-cp-tabs a.is-active { color: #1976D2; border-color: #1976D2; }
.listo-cp-day.is-selected { background: #1976D2; border-color: #1976D2; }
.listo-host-bookings-all-clear { border-color: #1565C0; background: #1565C0; }

/* Inbox page canvas on mobile: keep the conversation truly viewport-wide while\n   retaining the smaller account-page title above it. */
@media (max-width: 900px) {
  .listo-inbox-page .listo-inbox { width: 100%; }
}


/* ==========================================================================
   NEXT217 — Global account mobile canvas alignment + dedicated Cases/Inbox UI
   Presentation-only. The standard account-page gutter is inherited from
   .listo-main; listed pages must not add their own mobile side padding or
   negative margins. This keeps navigation between account pages visually
   stationary at the top and sides.
   ========================================================================== */

/* All explicitly listed account workspaces use the same 1200px desktop
   canvas as the standard .listo-container. Calendar previously used 1240px. */
.listo-calendar-pricing-page,
.listo-inbox-page { max-width: 1200px; }

/* Inbox now participates in the same page shell as every other account page.
   Its conversation workspace is no longer allowed to cancel the global
   .listo-main gutter on mobile. */
.listo-inbox-page { width: 100%; }
.listo-inbox-page .listo-inbox { margin-left: 0; margin-right: 0; width: 100%; }

/* Remove page-specific vertical offsets introduced in NEXT216. The shared
   .listo-section padding is the single source of truth for top spacing. */
@media (max-width: 700px) {
  .listo-payouts-page,
  .listo-wallet-page,
  .listo-cases-page,
  .listo-favorites-page,
  .listo-support-page,
  .listo-dashboard-page { padding-top: var(--section-pad); }

  /* Calendar previously added a second 14px/10px horizontal gutter inside
     the standard .listo-main gutter. Remove that nested gutter. */
  .listo-calendar-pricing-page {
    width: 100%;
    max-width: 1200px;
    padding-left: 0;
    padding-right: 0;
  }

  /* Dedicated Cases mobile view: full-width cards, readable metadata, and
     stacked status when the viewport is genuinely narrow. */
  .listo-cases-page .listo-complaint-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 14px;
  }
  .listo-cases-page .listo-complaint-card__header > div {
    min-width: 0;
    flex: 1 1 auto;
  }
  .listo-cases-page .listo-complaint-card__title {
    overflow-wrap: anywhere;
  }

  /* Dedicated Favorites mobile view follows the same canvas edge as all
     other account pages; only the listing grid itself changes to one column. */
  .listo-favorites-page .listo-listing-grid {
    width: 100%;
    grid-template-columns: 1fr !important;
  }

  /* Listing form already uses the shared container; explicitly make the
     mobile width rule deterministic so it cannot inherit desktop max-width
     behavior differently from other account pages. */
  .listo-listing-form {
    width: 100%;
    max-width: 720px;
  }
}

@media (max-width: 480px) {
  /* The standard .listo-main gutter becomes 24px at this breakpoint. Keep
     every listed page inside exactly that same gutter. */
  .listo-inbox-page .listo-inbox { margin-left: 0; margin-right: 0; }
}

/* ========================================================================
   NEXT218 — Final mobile canvas normalization for My Listings + Guest
   Edit Profile, plus unified Listo brand icon treatment.
   Presentation-only. Business logic and existing interaction selectors
   remain unchanged.
   ======================================================================== */

/* Navigation/page-title iconography: use the same vibrant Listo Sky Blue
   everywhere these account/navigation icons appear. White glyphs provide
   the contrast instead of introducing a competing pastel tile color. */
.listo-page-title__icon,
.listo-page-title__icon--dashboard,
.listo-page-title__icon--listings,
.listo-page-title__icon--home,
.listo-page-title__icon--bookings,
.listo-page-title__icon--calendar,
.listo-page-title__icon--external-calendars,
.listo-page-title__icon--cohosts,
.listo-page-title__icon--support,
.listo-page-title__icon--payouts,
.listo-page-title__icon--wallet,
.listo-page-title__icon--inbox,
.listo-page-title__icon--affiliate,
.listo-page-title__icon--cases,
.listo-page-title__icon--deposits,
.listo-page-title__icon--profile,
.listo-page-title__icon--faq,
.listo-page-title__icon--heart {
  color: #FFFFFF;
  background: #2196F3;
  border-color: #2196F3;
}
.listo-page-title__icon svg { color: #FFFFFF; stroke: currentColor; }

.listo-account-dropdown__icon,
.listo-account-dropdown__icon--dashboard,
.listo-account-dropdown__icon--listings,
.listo-account-dropdown__icon--home,
.listo-account-dropdown__icon--bookings,
.listo-account-dropdown__icon--calendar-pricing,
.listo-account-dropdown__icon--external-calendars,
.listo-account-dropdown__icon--cohosts,
.listo-account-dropdown__icon--support,
.listo-account-dropdown__icon--payouts,
.listo-account-dropdown__icon--wallet,
.listo-account-dropdown__icon--inbox,
.listo-account-dropdown__icon--affiliate,
.listo-account-dropdown__icon--cases,
.listo-account-dropdown__icon--deposits,
.listo-account-dropdown__icon--profile,
.listo-account-dropdown__icon--faq,
.listo-account-dropdown__icon--heart,
.listo-account-dropdown__icon--logout {
  color: #2196F3;
  background: transparent;
}
.listo-account-dropdown__icon svg { color: currentColor; stroke: currentColor; }

/* My Listings — remove its historical page-specific mobile gutters and
   heading sizing. It now inherits the exact same .listo-main canvas as the
   other account pages. */
@media (max-width: 900px) {
  .listo-my-listings-page {
    width: 100%;
    max-width: 1200px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  .listo-my-listings-page > .listo-page-title-row {
    width: 100%;
    margin-bottom: 16px;
  }

  .listo-my-listings-page > .listo-page-title-row > h1 {
    font-size: 22px !important;
    line-height: 1.15 !important;
    text-align: left;
    margin: 0 !important;
  }

  .listo-my-listings-page > .listo-caption {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 20px !important;
  }

  .listo-my-listing-row {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 600px) {
  .listo-my-listing-row {
    gap: 12px;
    padding: 12px;
  }

  .listo-my-listing-row__thumb {
    width: 104px;
    height: 78px;
  }

  .listo-my-listing-row__body {
    flex-basis: calc(100% - 116px);
  }

  .listo-my-listing-row__actions {
    grid-template-columns: 1fr;
  }

  .listo-my-listing-row__actions .listo-btn {
    min-height: 46px;
  }
}

@media (max-width: 380px) {
  .listo-my-listing-row__thumb {
    width: 92px;
    height: 69px;
  }

  .listo-my-listing-row__body {
    flex-basis: calc(100% - 104px);
  }
}

/* Guest Edit Profile — the previous mobile implementation introduced a
   second 16px gutter and a 30px centered title, making this page visibly
   shift relative to the standard account canvas. Reset both and let the
   shared page-title system control geometry. */
@media (max-width: 700px) {
  .listo-guest-edit-profile {
    width: 100%;
    max-width: 680px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  .listo-guest-edit-profile > .listo-page-title-row {
    width: 100%;
    margin-bottom: 16px;
  }

  .listo-guest-edit-profile > .listo-page-title-row > h1 {
    font-size: 22px !important;
    line-height: 1.15 !important;
    text-align: left;
    margin: 0 !important;
  }

  .listo-guest-profile-intro {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 18px;
  }

  .listo-guest-edit-profile .listo-form-section {
    width: 100%;
    box-sizing: border-box;
    padding: 18px;
    border-radius: 16px;
  }

  .listo-guest-edit-profile .listo-field {
    margin-bottom: 16px;
  }

  .listo-guest-edit-profile input[type="text"],
  .listo-guest-edit-profile input[type="email"],
  .listo-guest-edit-profile input[type="tel"] {
    min-height: 48px;
  }

  .listo-guest-profile-action {
    width: 100%;
    min-height: 48px;
  }

  .listo-guest-password-card {
    width: 100%;
    box-sizing: border-box;
    margin-top: 18px;
    padding: 18px;
    border-radius: 16px;
  }

  .listo-guest-password-card__heading h2 {
    font-size: 18px;
  }

  .listo-guest-password-card input[type=password] {
    min-height: 48px;
  }

  .listo-guest-password-action {
    width: 100%;
    min-height: 48px;
  }
}


/* ========================================================================
   NEXT219 — Contrast rule for Sky Blue controls
   Any Listo button/tab that uses the Sky Blue brand surface must use a
   white foreground so the label remains clearly legible. This is a
   presentation-only rule; semantic/status colors are not changed.
   ======================================================================== */
.listo-btn--primary,
.listo-btn--primary:hover,
.listo-btn--primary:focus,
.listo-checkout-save-phone-btn,
.listo-checkout-save-phone-btn:hover,
.listo-checkout-save-phone-btn:focus,
.listo-photo-directory-btn.is-selected,
.listo-photo-thumb--directory-selected .listo-photo-directory-btn,
.listo-cp-day.is-selected,
.listo-cp-tabs a.is-active,
.listo-calendar-pricing-page .listo-cp-tabs a.is-active {
  color: #FFFFFF !important;
}

/* The active Calendar & Pricing tab has a Sky Blue background. Keep its
   border and text aligned with the same brand treatment. */
.listo-cp-tabs a.is-active,
.listo-calendar-pricing-page .listo-cp-tabs a.is-active {
  background: #1976D2;
  border-color: #1976D2;
}

/* Sky Blue primary button text remains white even when another component
   stylesheet supplies a more specific text color. */
button.listo-btn--primary,
a.listo-btn--primary,
input.listo-btn--primary,
.listo-checkout-save-phone-btn {
  color: #FFFFFF !important;
}

/* ========================================================================
   NEXT220 — Inbox viewport/composer restoration
   The shared page-title row now sits above the Inbox workspace. The Inbox
   workspace therefore must consume the remaining viewport height rather
   than retaining the old standalone 100vh-based height. This keeps the
   message composer anchored at the bottom and immediately usable on both
   Guest and Host Inbox views, without changing any messaging behavior.
   Presentation/layout only.
   ======================================================================== */
.listo-inbox-page {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 70px);
  min-height: 0;
}
.listo-inbox-page .listo-page-title-row {
  flex: 0 0 auto;
}
.listo-inbox-page .listo-inbox {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

@media (max-width: 900px) {
  .listo-inbox-page {
    height: calc(100dvh - 60px);
    min-height: 0;
  }
  .listo-inbox-page .listo-inbox {
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 480px) {
  .listo-inbox-page {
    height: calc(100dvh - 60px);
  }
}

/* ========================================================================
   NEXT221 — Functional icon color system for Guest + Host accounts
   Keep Listo Sky Blue as the primary action/brand color, while giving
   account destinations their own coordinated functional accent. This
   restores visual hierarchy without changing markup or behavior.
   ======================================================================== */

/* Page-title icons: solid functional color + white glyph. */
.listo-page-title__icon--dashboard { color:#FFFFFF !important; background:#2196F3 !important; border-color:#2196F3 !important; }
.listo-page-title__icon--listings,
.listo-page-title__icon--home { color:#FFFFFF !important; background:#26A69A !important; border-color:#26A69A !important; }
.listo-page-title__icon--bookings { color:#FFFFFF !important; background:#3B82F6 !important; border-color:#3B82F6 !important; }
.listo-page-title__icon--calendar { color:#FFFFFF !important; background:#F59E0B !important; border-color:#F59E0B !important; }
.listo-page-title__icon--external-calendars { color:#FFFFFF !important; background:#8B5CF6 !important; border-color:#8B5CF6 !important; }
.listo-page-title__icon--cohosts { color:#FFFFFF !important; background:#EC4899 !important; border-color:#EC4899 !important; }
.listo-page-title__icon--support { color:#FFFFFF !important; background:#607D8B !important; border-color:#607D8B !important; }
.listo-page-title__icon--payouts { color:#FFFFFF !important; background:#16A34A !important; border-color:#16A34A !important; }
.listo-page-title__icon--wallet { color:#FFFFFF !important; background:#7C3AED !important; border-color:#7C3AED !important; }
.listo-page-title__icon--inbox { color:#FFFFFF !important; background:#536DFE !important; border-color:#536DFE !important; }
.listo-page-title__icon--affiliate { color:#FFFFFF !important; background:#D97706 !important; border-color:#D97706 !important; }
.listo-page-title__icon--cases { color:#FFFFFF !important; background:#EF6C63 !important; border-color:#EF6C63 !important; }
.listo-page-title__icon--deposits { color:#FFFFFF !important; background:#F97316 !important; border-color:#F97316 !important; }
.listo-page-title__icon--profile { color:#FFFFFF !important; background:#5C6BC0 !important; border-color:#5C6BC0 !important; }
.listo-page-title__icon--faq { color:#FFFFFF !important; background:#64748B !important; border-color:#64748B !important; }
.listo-page-title__icon--heart { color:#FFFFFF !important; background:#E11D48 !important; border-color:#E11D48 !important; }
.listo-page-title__icon svg { color:#FFFFFF !important; stroke:currentColor; }

/* Account dropdown icons: same functional palette at compact scale. */
.listo-account-dropdown__icon--dashboard { color:#FFFFFF !important; background:#2196F3 !important; }
.listo-account-dropdown__icon--listings,
.listo-account-dropdown__icon--home { color:#FFFFFF !important; background:#26A69A !important; }
.listo-account-dropdown__icon--bookings { color:#FFFFFF !important; background:#3B82F6 !important; }
.listo-account-dropdown__icon--calendar-pricing { color:#FFFFFF !important; background:#F59E0B !important; }
.listo-account-dropdown__icon--external-calendars { color:#FFFFFF !important; background:#8B5CF6 !important; }
.listo-account-dropdown__icon--cohosts { color:#FFFFFF !important; background:#EC4899 !important; }
.listo-account-dropdown__icon--support { color:#FFFFFF !important; background:#607D8B !important; }
.listo-account-dropdown__icon--payouts { color:#FFFFFF !important; background:#16A34A !important; }
.listo-account-dropdown__icon--wallet { color:#FFFFFF !important; background:#7C3AED !important; }
.listo-account-dropdown__icon--inbox { color:#FFFFFF !important; background:#536DFE !important; }
.listo-account-dropdown__icon--affiliate { color:#FFFFFF !important; background:#D97706 !important; }
.listo-account-dropdown__icon--cases { color:#FFFFFF !important; background:#EF6C63 !important; }
.listo-account-dropdown__icon--deposits { color:#FFFFFF !important; background:#F97316 !important; }
.listo-account-dropdown__icon--profile { color:#FFFFFF !important; background:#5C6BC0 !important; }
.listo-account-dropdown__icon--faq { color:#FFFFFF !important; background:#64748B !important; }
.listo-account-dropdown__icon--heart { color:#FFFFFF !important; background:#E11D48 !important; }
.listo-account-dropdown__icon--logout { color:#FFFFFF !important; background:#607D8B !important; }
.listo-account-dropdown__icon svg { color:currentColor !important; stroke:currentColor; }
.listo-account-dropdown__item:hover .listo-account-dropdown__icon { color:#FFFFFF !important; }

/* ==========================================================================\n   NEXT229 — App-like Wallet information pattern\n   Keep the wallet balance as the primary task and move detailed guidance\n   behind a compact, accessible dialog. Presentation only; wallet logic is unchanged.\n   ========================================================================== */
.listo-wallet-page .listo-wallet-how-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  margin: 18px auto 0;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: #1976D2;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  border-radius: 10px;
}
.listo-wallet-page .listo-wallet-how-link:hover { background: #EAF5FF; }
.listo-wallet-page .listo-wallet-how-link:focus-visible { outline: 3px solid rgba(33,150,243,.24); outline-offset: 2px; }
.listo-wallet-page .listo-wallet-how-link span:last-child { font-size: 20px; line-height: 1; margin-top: -1px; }

.listo-wallet-how-modal {
  width: min(560px, calc(100vw - 40px));
  max-width: 560px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}
.listo-wallet-how-modal::backdrop { background: rgba(15, 23, 42, .38); backdrop-filter: blur(2px); }
.listo-wallet-how-modal__panel {
  overflow: hidden;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
}
.listo-wallet-how-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #EEF2F6;
}
.listo-wallet-how-modal__header h2 { margin: 0; font-size: 20px; line-height: 1.25; color: #17202A; }
.listo-wallet-how-modal__intro { margin: 5px 0 0; color: #607080; font-size: 13px; line-height: 1.45; }
.listo-wallet-how-modal__close {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #F3F6F9;
  color: #455A64;
  font-size: 25px;
  line-height: 34px;
  cursor: pointer;
}
.listo-wallet-how-modal__close:hover { background: #EAF5FF; color: #1976D2; }
.listo-wallet-how-modal__section { padding: 20px 24px; }
.listo-wallet-how-modal__section + .listo-wallet-how-modal__section { border-top: 1px solid #EEF2F6; }
.listo-wallet-how-modal__section h3 { margin: 0 0 9px; color: #263238; font-size: 15px; line-height: 1.35; }
.listo-wallet-how-modal__section p { margin: 0 0 9px; color: #607080; font-size: 14px; line-height: 1.55; }
.listo-wallet-how-modal__section ul { margin: 0; padding-left: 20px; color: #607080; font-size: 14px; line-height: 1.55; }
.listo-wallet-how-modal__section li + li { margin-top: 7px; }
.listo-wallet-how-modal__notice {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 10px;
  background: #F8FAFC;
  color: #263238;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 700px) {
  .listo-wallet-page .listo-wallet-how-link { margin-top: 14px; font-size: 13px; }
  .listo-wallet-how-modal {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    border-radius: 18px 18px 0 0;
  }
  .listo-wallet-how-modal__panel { border-radius: 18px 18px 0 0; max-height: min(82dvh, 680px); overflow-y: auto; }
  .listo-wallet-how-modal__header { padding: 18px 18px 15px; }
  .listo-wallet-how-modal__section { padding: 17px 18px; }
  .listo-wallet-how-modal__header h2 { font-size: 18px; }
  .listo-wallet-how-modal__intro { font-size: 12px; }
  .listo-wallet-how-modal__section h3 { font-size: 14px; }
  .listo-wallet-how-modal__section p,
  .listo-wallet-how-modal__section ul { font-size: 13px; }
}

/* ==========================================================================\n   NEXT233 — Favorites app-like UI\n   Presentation-only. Wishlist/save behavior and listing-card markup remain intact.\n   ========================================================================== */
.listo-favorites-page__title-row { align-items: center; }
.listo-favorites-info-btn {
  width: 30px; height: 30px; margin-left: 4px; padding: 0;
  border: 0; background: transparent; color: #607D8B; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background .15s ease, color .15s ease, transform .1s ease;
}
.listo-favorites-info-btn:hover { background: #EAF5FF; color: #1976D2; }
.listo-favorites-info-btn:focus-visible { outline: 2px solid #2196F3; outline-offset: 2px; }
.listo-favorites-info-btn:active { transform: scale(.94); }
.listo-favorites-info-icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.listo-favorites-info-icon__dot { fill: currentColor; stroke: none; }
.listo-favorites-page .listo-listing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; margin-top: 14px; }
.listo-favorites-page .listo-card__save {
  width: 36px; height: 36px; top: 12px; right: 12px; padding: 8px;
  border-radius: 50%; background: rgba(255,255,255,.94);
  box-shadow: 0 2px 8px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center;
}
.listo-favorites-page .listo-card__save-icon { width: 20px; height: 20px; fill: transparent; stroke: #475569; stroke-width: 1.8; filter: none; }
.listo-favorites-page .listo-card__save input:checked ~ .listo-card__save-icon { fill: #E11D48; stroke: #E11D48; }
.listo-favorites-page .listo-card__save:hover { box-shadow: 0 3px 10px rgba(0,0,0,.16); }
.listo-favorites-page .listo-card__body { padding-top: 9px; }
.listo-favorites-empty { padding: 42px 20px; }
.listo-favorites-empty__icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: #EAF5FF; color: #2196F3; display: flex; align-items: center; justify-content: center; }
.listo-favorites-empty__icon svg { width: 25px; height: 25px; fill: currentColor; }
.listo-favorites-info-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(26,26,26,.48); }
.listo-favorites-info-modal.is-open { display: flex; }
.listo-favorites-info-modal__card { position: relative; width: 100%; max-width: 440px; padding: 26px; background: var(--surface); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.16); }
.listo-favorites-info-modal__card h3 { margin: 0 36px 14px 0; font-size: 21px; }
.listo-favorites-info-modal__content { color: var(--ink); font-size: 14px; line-height: 1.55; }
.listo-favorites-info-modal__content p { margin: 0; }
.listo-favorites-info-modal__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface-alt); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.listo-favorites-info-modal__close:hover, .listo-favorites-info-modal__close:focus-visible { background: var(--border); outline: none; }
@media (max-width: 700px) {
  .listo-favorites-page .listo-listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 12px; margin-top: 10px; }
  .listo-favorites-page .listo-card__save { width: 34px; height: 34px; top: 9px; right: 9px; padding: 7px; }
  .listo-favorites-page .listo-card__save-icon { width: 19px; height: 19px; }
  .listo-favorites-page .listo-card__body { padding-top: 7px; }
  .listo-favorites-page .listo-card__title { font-size: 14px; line-height: 1.3; }
  .listo-favorites-page .listo-card__price { font-size: 12px; line-height: 1.35; }
  .listo-favorites-info-modal { align-items: flex-end; padding: 0; }
  .listo-favorites-info-modal__card { max-width: none; border-radius: 18px 18px 0 0; padding: 24px 20px 28px; }
}


/* ==========================================================================
   NEXT234 — Favorites help affordance
   Keep page titles clean; contextual help lives in a separate app-style row.
   Presentation-only.
   ========================================================================== */
.listo-favorites-page__title-row { align-items: center; }
.listo-favorites-help {
  display: inline-flex; align-items: center; gap: 9px;
  width: auto; min-height: 38px; margin: 4px 0 8px; padding: 7px 12px 7px 9px;
  border: 1px solid #E2E8F0; border-radius: 10px; background: #FFFFFF;
  color: #475569; font: inherit; font-size: 13px; font-weight: 600;
  line-height: 1; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.listo-favorites-help:hover { background: #EAF5FF; border-color: #BFDBFE; color: #1976D2; }
.listo-favorites-help:focus-visible { outline: 2px solid #2196F3; outline-offset: 2px; }
.listo-favorites-help:active { transform: scale(.98); }
.listo-favorites-help__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #607D8B; }
.listo-favorites-help:hover .listo-favorites-help__icon { color: #1976D2; }
.listo-favorites-help__icon .listo-favorites-info-icon { width: 20px; height: 20px; }
.listo-favorites-help__chevron { margin-left: 1px; color: #94A3B8; font-size: 18px; line-height: .8; }
@media (max-width: 700px) {
  .listo-favorites-help { width: 100%; justify-content: flex-start; margin: 2px 0 10px; min-height: 40px; padding: 8px 11px; }
  .listo-favorites-help__chevron { margin-left: auto; }
}

/* NEXT235 — My Refunds app-like hierarchy. Presentation only; refund logic unchanged. */
.listo-refunds-help-row {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:-8px 0 20px; padding:0; color:var(--ink-muted); font-size:13px;
}
.listo-refunds-help-link {
  border:0; background:none; color:var(--listo-blue, #2196F3); font:inherit; font-weight:700;
  padding:6px 0; cursor:pointer; white-space:nowrap;
}
.listo-refunds-help-link span { display:inline-block; margin-left:4px; font-size:18px; line-height:0; vertical-align:-2px; }
.listo-refunds-summary { grid-template-columns:1.35fr 1fr 1fr; margin-bottom:24px; }
.listo-refunds-summary__item--primary { min-height:112px; }
.listo-refunds-summary__item--primary strong { font-size:32px; }
.listo-refunds-summary__item--pending { background:#FFF9ED; border-color:#F4E0AE; }
.listo-refunds-settings { margin-top:24px; }
.listo-refunds-payout-card { position:relative; }
.listo-refunds-payout-card--saved .listo-refunds-payout-grid,
.listo-refunds-payout-card--saved .listo-refunds-fee-note,
.listo-refunds-payout-card--saved [data-error-for="guest-payout"] { display:none; }
.listo-refunds-payout-summary { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:2px 0 4px; }
.listo-refunds-payout-summary > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.listo-refunds-payout-summary span { color:var(--ink-muted); font-size:11px; }
.listo-refunds-payout-summary strong { font-size:15px; overflow-wrap:anywhere; }
.listo-refunds-fee-note { margin:10px 0 0; color:var(--ink-muted); font-size:11px; line-height:1.45; }
.listo-refunds-history-section { margin-top:30px; }
.listo-refunds-history-section .listo-refunds-section-heading { margin-bottom:12px; }
.listo-refunds-info-dialog { width:min(520px, calc(100% - 32px)); padding:0; border:0; border-radius:20px; background:#fff; color:var(--ink); box-shadow:0 24px 70px rgba(15,23,42,.20); }
.listo-refunds-info-dialog::backdrop { background:rgba(15,23,42,.38); backdrop-filter:blur(2px); }
.listo-refunds-info-dialog__inner { position:relative; padding:28px; }
.listo-refunds-info-dialog__inner h2 { margin:0 36px 20px 0; font-size:22px; }
.listo-refunds-info-dialog__close { position:absolute; top:16px; right:16px; width:34px; height:34px; border:0; border-radius:50%; background:var(--surface-alt,#f5f7f8); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; }
.listo-refunds-info-list { display:grid; gap:16px; }
.listo-refunds-info-list > div { display:flex; flex-direction:column; gap:4px; }
.listo-refunds-info-list strong { font-size:14px; }
.listo-refunds-info-list span { color:var(--ink-muted); font-size:13px; line-height:1.5; }
.listo-refunds-table__row > summary { grid-template-columns:minmax(0,1fr) 140px 155px 120px; }
.listo-refunds-table__booking small { text-transform:none; }

@media (max-width:700px) {
  .listo-refunds-help-row { align-items:flex-start; gap:10px; margin:-4px 0 16px; font-size:12px; }
  .listo-refunds-help-row > span { max-width:62%; }
  .listo-refunds-summary { grid-template-columns:1.2fr 1fr 1fr; gap:7px; }
  .listo-refunds-summary__item--primary { min-height:86px; }
  .listo-refunds-summary__item--primary strong { font-size:25px; }
  .listo-refunds-summary__item span { font-size:10px; }
  .listo-refunds-payout-summary { align-items:flex-start; flex-direction:column; gap:12px; }
  .listo-refunds-payout-card--saved .listo-refunds-payout-actions { margin-top:0; }
  .listo-refunds-info-dialog { width:100%; max-width:none; margin:0; margin-top:auto; border-radius:20px 20px 0 0; }
  .listo-refunds-info-dialog__inner { padding:24px 20px 28px; }
  .listo-refunds-info-dialog__inner h2 { font-size:20px; }
}

/* NEXT235 — compact refund filters replace the old search/filter toolbar. */
.listo-refunds-toolbar--filters { display:flex; align-items:center; justify-content:flex-start; margin:26px 0 12px; }
.listo-refunds-status-pills { display:flex; flex-wrap:wrap; gap:8px; }
.listo-refunds-status-pill { min-height:38px; padding:8px 15px; border:1px solid var(--border); border-radius:999px; background:#fff; color:var(--ink-muted); font:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:background .15s ease,border-color .15s ease,color .15s ease; }
.listo-refunds-status-pill:hover { border-color:#B8C2CC; color:var(--ink); }
.listo-refunds-status-pill.is-active { border-color:#2196F3; background:#2196F3; color:#fff; }
@media (max-width:700px) {
  .listo-refunds-toolbar--filters { margin:20px 0 10px; }
  .listo-refunds-status-pills { width:100%; gap:7px; }
  .listo-refunds-status-pill { flex:1 1 0; min-height:40px; padding:8px 10px; }
}

/* NEXT236 — My Cases app-like presentation. Presentation only; existing case
   query, dispute states and outcome data remain the source of truth. */
.listo-cases-help {
  max-width: 900px;
  margin: 0 auto 18px;
  border: 1px solid #DDE7EF;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.listo-cases-help summary { list-style: none; cursor: pointer; display:flex; align-items:center; gap:10px; padding:12px 14px; font-size:14px; font-weight:700; color:#263238; }
.listo-cases-help summary::-webkit-details-marker { display:none; }
.listo-cases-help__icon { width:24px; height:24px; border:1.8px solid #607D8B; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; line-height:1; color:#607D8B; flex:0 0 24px; }
.listo-cases-help__chevron { margin-left:auto; font-size:22px; color:#607D8B; transition:transform .15s ease; }
.listo-cases-help[open] .listo-cases-help__chevron { transform:rotate(90deg); }
.listo-cases-help__body { padding:0 16px 15px 48px; color:#607080; font-size:13px; line-height:1.55; }
.listo-cases-help__body strong { display:block; color:#263238; margin-top:8px; }
.listo-cases-help__body p { margin:2px 0 8px; }
.listo-cases-summary { max-width:900px; margin:0 auto 18px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.listo-cases-summary__item { background:#fff; border:1px solid #E1EAF1; border-radius:14px; padding:15px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.listo-cases-summary__item span { font-size:12px; color:#607080; font-weight:600; }
.listo-cases-summary__item strong { font-size:22px; color:#263238; }
.listo-cases-summary__item--active { border-color:#CFE4F7; background:#F8FCFF; }
.listo-cases-list { max-width:900px; margin:0 auto; }
.listo-case-card { padding:0 !important; overflow:hidden; }
.listo-case-card__summary { list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:20px; }
.listo-case-card__summary::-webkit-details-marker { display:none; }
.listo-case-card__main { min-width:0; flex:1; }
.listo-case-status { display:inline-flex; align-items:center; border-radius:999px; padding:5px 9px; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px; }
.listo-case-status.is-open { background:#FFF3E0; color:#B45309; }
.listo-case-status.is-resolved { background:#E8F7EE; color:#15803D; }
.listo-case-card__dates { margin-top:4px; color:#607080; font-size:13px; }
.listo-case-card__reason { margin-top:14px; font-size:13px; color:#263238; }
.listo-case-card__reason span { display:block; color:#8A99A6; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; }
.listo-case-card__reference { margin-top:12px; color:#8A99A6; font-size:11px; }
.listo-case-card__chevron { color:#607D8B; font-size:26px; line-height:1; transition:transform .15s ease; }
.listo-case-card[open] .listo-case-card__chevron { transform:rotate(90deg); }
.listo-case-card__details { border-top:1px solid #E8EEF3; padding:16px 20px 18px; background:#FBFCFD; }
.listo-case-card__detail-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0; font-size:13px; }
.listo-case-card__detail-row span { color:#738391; }
.listo-case-card__detail-row strong { color:#263238; text-align:right; }
.listo-case-progress { display:flex; gap:0; margin:14px 0 6px; }
.listo-case-progress__step { position:relative; flex:1; padding:22px 8px 0 0; font-size:11px; color:#93A1AC; }
.listo-case-progress__step:not(:last-child)::after { content:""; position:absolute; top:5px; left:10px; right:0; height:2px; background:#DCE5EB; }
.listo-case-progress__step i { position:absolute; top:0; left:0; width:11px; height:11px; border-radius:50%; border:2px solid #CBD7DF; background:#fff; z-index:1; box-sizing:border-box; }
.listo-case-progress__step.is-complete, .listo-case-progress__step.is-current { color:#263238; font-weight:700; }
.listo-case-progress__step.is-complete i { background:#2196F3; border-color:#2196F3; }
.listo-case-progress__step.is-complete:not(:last-child)::after { background:#90CAF9; }
.listo-case-progress__step.is-current i { border-color:#2196F3; box-shadow:0 0 0 3px #EAF5FF; }
.listo-case-card__note { margin:10px 0 0; }
.listo-cases-empty { max-width:900px; margin-left:auto; margin-right:auto; }
.listo-cases-empty__icon { width:52px; height:52px; border-radius:50%; background:#EAF5FF; color:#1976D2; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:25px; font-weight:800; }
@media (max-width:700px) {
  .listo-cases-help { margin-bottom:14px; }
  .listo-cases-help summary { min-height:46px; }
  .listo-cases-help__body { padding:0 14px 14px 48px; }
  .listo-cases-summary { grid-template-columns:repeat(3,1fr); gap:7px; }
  .listo-cases-summary__item { padding:12px 9px; flex-direction:column; align-items:flex-start; gap:3px; }
  .listo-cases-summary__item strong { font-size:20px; }
  .listo-cases-summary__item span { font-size:10px; }
  .listo-case-card__summary { padding:16px; gap:10px; }
  .listo-case-card__details { padding:14px 16px 16px; }
  .listo-case-progress__step { font-size:10px; }
}
@media (max-width:380px) {
  .listo-cases-summary { gap:5px; }
  .listo-cases-summary__item { padding:10px 7px; }
  .listo-cases-summary__item strong { font-size:18px; }
  .listo-case-card__summary { padding:14px; }
  .listo-case-card__details { padding:12px 14px 14px; }
}

/* NEXT237 — Referral Center app-style refinement.
 * Presentation only. Existing referral, withdrawal, wallet-conversion,
 * attribution, commission and ledger logic remains untouched.
 */
.listo-referral-center .listo-referral-hero { margin-bottom: 12px; }
.listo-referral-center .listo-referral-hero h1 { font-size: clamp(27px, 3vw, 34px); margin: 0 0 5px; }
.listo-referral-center .listo-referral-hero .listo-caption { font-size: 13px; max-width: 560px; }
.listo-referral-help { width: fit-content; max-width: 100%; margin: 10px 0 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.listo-referral-help summary { list-style: none; display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; font-size: 12px; font-weight: 750; color: var(--ink); }
.listo-referral-help summary::-webkit-details-marker { display:none; }
.listo-question-icon { width: 22px; height: 22px; flex: 0 0 22px; display:inline-flex; align-items:center; justify-content:center; border:1.6px solid currentColor; border-radius:50%; font-size:12px; font-weight:800; line-height:1; }
.listo-referral-help__chevron { margin-left: 3px; color: var(--ink-muted); font-size:18px; line-height:1; transition: transform .15s ease; }
.listo-referral-help[open] .listo-referral-help__chevron { transform: rotate(90deg); }
.listo-referral-help__body { margin: 0 12px 12px 43px; padding-top: 10px; border-top: 1px solid var(--border); max-width: 720px; }
.listo-referral-help__body strong { font-size: 12px; }
.listo-referral-help__body p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-muted); }

.listo-referral-center .listo-referral-tabs { max-width: 100%; margin-bottom: 14px; }
.listo-referral-center .listo-earnings-card { grid-template-columns: minmax(0,1fr) 410px; margin-bottom: 14px; border-radius: 17px; }
.listo-referral-center .listo-earnings-card__main { padding: 22px 24px; }
.listo-referral-center .listo-earnings-card__amount { font-size: 38px; }
.listo-referral-center .listo-earnings-card__program { margin-top: 5px; font-size: 11px; color: var(--ink-muted); }
.listo-referral-center .listo-earnings-actions { margin-top: 17px; }
.listo-referral-center .listo-earnings-actions .listo-btn { min-height: 40px; }
.listo-referral-center .listo-earnings-stats { grid-template-columns: 1fr 1fr; }
.listo-referral-center .listo-earnings-stats > div { padding: 13px 17px; }
.listo-referral-center .listo-earnings-stats > div:nth-child(3) { border-top: 1px solid var(--border); }
.listo-referral-center .listo-earnings-stats--affiliate { grid-template-columns: 1fr 1fr; }

.listo-referral-center .listo-referral-grid { display:block; }
.listo-referral-center .listo-referral-share-card { margin-bottom: 14px; }
.listo-referral-center .listo-referral-card--accent { background: #fff; }
.listo-referral-center .listo-referral-share-card h2 { font-size: 20px; margin-bottom: 5px; }
.listo-referral-center .listo-referral-share-card > p { max-width: 700px; margin-bottom: 12px; color: var(--ink-muted); }
.listo-referral-center .listo-referral-linkbox { margin-top: 12px; }
.listo-referral-center .listo-referral-linkbox label { font-size: 11px; color: var(--ink-muted); }
.listo-referral-center .listo-referral-linkbox input { height: 42px; background: var(--surface-alt); font-size: 12px; }
.listo-referral-center .listo-referral-linkbox .listo-btn { min-height: 42px; }
.listo-referral-center .listo-affiliate-url-generator { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.listo-referral-center .listo-affiliate-url-generator__top h3 { font-size: 14px; margin-bottom: 4px; }
.listo-referral-center .listo-affiliate-url-generator__top p { font-size: 12px; color: var(--ink-muted); }
.listo-share-message-details { margin-top: 12px; border-top: 1px solid var(--border); }
.listo-share-message-details summary { list-style:none; display:flex; justify-content:space-between; align-items:center; padding:12px 0 2px; cursor:pointer; font-size:12px; font-weight:750; }
.listo-share-message-details summary::-webkit-details-marker { display:none; }
.listo-share-message-details summary span:last-child { font-size:18px; color:var(--ink-muted); transition:transform .15s ease; }
.listo-share-message-details[open] summary span:last-child { transform:rotate(90deg); }
.listo-share-message-details .listo-referral-linkbox { margin-top:10px; }

.listo-referral-center .listo-referral-section-title { margin: 22px 0 10px; font-size: 16px; }
.listo-referral-center .listo-referral-host-list { border-radius: 14px; }
.listo-referral-center .listo-referral-host-row { padding: 13px 15px; }
.listo-referral-center .listo-referral-two-col { gap: 14px; }
.listo-referral-center .listo-referral-two-col .listo-referral-card { margin-bottom: 0; }
.listo-referral-center .listo-referral-two-col .listo-referral-card h3 { font-size: 15px; }
.listo-referral-center .listo-referral-log-row { padding: 10px 0; }

@media (max-width: 800px) {
  .listo-referral-center .listo-referral-hero h1 { font-size: 27px; }
  .listo-referral-center .listo-referral-tabs { margin-bottom: 12px; }
  .listo-referral-center .listo-earnings-card { grid-template-columns: 1fr; }
  .listo-referral-center .listo-earnings-card__main { padding: 19px 18px; }
  .listo-referral-center .listo-earnings-card__amount { font-size: 33px; }
  .listo-referral-center .listo-earnings-stats { grid-template-columns: 1fr 1fr; }
  .listo-referral-center .listo-earnings-stats > div { padding: 12px 13px; }
  .listo-referral-center .listo-earnings-stats > div:nth-child(3) { border-top: 1px solid var(--border); border-left: 0; }
  .listo-referral-center .listo-earnings-stats > div:nth-child(4) { border-top: 1px solid var(--border); }
  .listo-referral-center .listo-earnings-stats > div:nth-child(5) { grid-column: 1 / -1; border-top: 1px solid var(--border); border-left: 0; }
  .listo-referral-center .listo-earnings-stats--affiliate > div:nth-child(3) { grid-column: 1 / -1; }
  .listo-referral-help { width:100%; }
  .listo-referral-help__body { margin-left: 43px; }
  .listo-referral-center .listo-referral-two-col { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .listo-referral-center .listo-referral-hero { margin-bottom: 10px; }
  .listo-referral-center .listo-referral-hero .listo-caption { font-size: 12px; }
  .listo-referral-center .listo-referral-tabs { gap: 4px; }
  .listo-referral-center .listo-referral-tab { min-height: 50px; }
  .listo-referral-center .listo-earnings-card__amount { font-size: 31px; }
  .listo-referral-center .listo-earnings-actions { grid-template-columns: 1fr; }
  .listo-referral-center .listo-earnings-stats { grid-template-columns: 1fr 1fr; }
  .listo-referral-center .listo-earnings-stats span { font-size: 9px; }
  .listo-referral-center .listo-earnings-stats strong { font-size: 13px; }
  .listo-referral-center .listo-referral-linkbox > div { flex-direction:row; }
  .listo-referral-center .listo-referral-linkbox input { min-width:0; }
  .listo-referral-center .listo-referral-linkbox .listo-btn { width:auto; flex:0 0 auto; }
  .listo-referral-center .listo-referral-linkbox--message > div { flex-direction:column; }
  .listo-referral-center .listo-referral-linkbox--message .listo-btn { width:100%; }
  .listo-referral-help__body { margin-left: 10px; }
}

/* NEXT238 — Referral Center clarity pass.
 * Presentation-only: uses the existing referral/withdrawal/wallet data and
 * existing tab/share/copy JS hooks. The page title now uses the shared menu
 * icon system, the two programs clearly state who they are for, and the
 * ready-made share message is visible as a clear action block instead of a
 * hidden disclosure.
 */
.listo-referral-center .listo-referral-hero { margin-bottom: 14px; }
.listo-referral-center .listo-page-title-row { margin-bottom: 8px; }
.listo-referral-center .listo-referral-hero > div > .listo-caption { margin: 0 0 12px; font-size: 13px; }

.listo-referral-center .listo-referral-help {
  width: 100%;
  max-width: 860px;
  margin: 0 0 16px;
  border-radius: 13px;
  background: var(--surface);
  overflow: hidden;
}
.listo-referral-center .listo-referral-help summary {
  min-height: 48px;
  box-sizing: border-box;
  padding: 11px 14px;
  font-size: 13px;
}
.listo-referral-center .listo-referral-help__body {
  margin: 0;
  padding: 12px 14px 14px;
  max-width: none;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.listo-referral-center .listo-referral-help__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
}
.listo-referral-center .listo-referral-help__item strong { font-size: 12px; color: var(--ink); }
.listo-referral-center .listo-referral-help__item span,
.listo-referral-center .listo-referral-help__note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.listo-referral-center .listo-referral-help__note { grid-column: 1 / -1; margin: 0; }

.listo-referral-center .listo-referral-tabs {
  gap: 10px;
  margin-bottom: 16px;
}
.listo-referral-center .listo-referral-tab {
  position: relative;
  min-height: 86px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(26,26,26,.03);
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}
.listo-referral-center .listo-referral-tab:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(26,26,26,.06); }
.listo-referral-center .listo-referral-tab.is-active { background: #fff; box-shadow: 0 7px 22px rgba(26,26,26,.07); }
.listo-referral-center .listo-referral-tab[data-referral-tab="host"].is-active { border-color: #93C5FD; }
.listo-referral-center .listo-referral-tab[data-referral-tab="affiliate"].is-active { border-color: #C4B5FD; }
.listo-referral-center .listo-referral-tab__icon { width: 42px; height: 42px; min-width: 42px; border-radius: 12px; }
.listo-referral-center .listo-referral-tab__copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.listo-referral-center .listo-referral-tab__copy em {
  font-style: normal;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: .08em;
  font-weight: 800;
  color: var(--ink-muted);
}
.listo-referral-center .listo-referral-tab__copy strong { font-size: 17px; line-height: 1.2; }
.listo-referral-center .listo-referral-tab__copy small { font-size: 12px; line-height: 1.45; color: var(--ink-muted); }

.listo-referral-center .listo-earnings-card { margin-bottom: 16px; }
.listo-referral-center .listo-earnings-card__main { background: linear-gradient(135deg, #F8FCFF 0%, #FFFFFF 72%); }
.listo-referral-center .listo-earnings-card__eyebrow { letter-spacing: .08em; }
.listo-referral-center .listo-earnings-card__amount { letter-spacing: -.025em; }
.listo-referral-center .listo-earnings-actions .listo-btn { min-width: 160px; }

.listo-referral-center .listo-referral-share-card {
  border-radius: 16px;
  overflow: hidden;
}
.listo-referral-center .listo-referral-share-card__subhead { display:none; }
.listo-referral-center .listo-referral-share-card h2 { margin-top: 0; }
.listo-referral-center .listo-referral-share-card > p { max-width: 720px; }

.listo-referral-center .listo-share-message-box {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #D7E6F7;
  border-radius: 14px;
  background: #F8FBFF;
}
.listo-referral-center .listo-share-message-box__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.listo-referral-center .listo-share-message-box__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #2563EB;
  background: #EFF6FF;
}
.listo-referral-center .listo-share-message-box__icon svg { width: 18px; height: 18px; }
.listo-referral-center .listo-share-message-box__head strong { display:block; font-size: 13px; line-height: 1.3; }
.listo-referral-center .listo-share-message-box__head span { display:block; margin-top: 2px; font-size: 11px; line-height: 1.45; color: var(--ink-muted); }
.listo-referral-center .listo-referral-linkbox--message { margin-top: 0; }
.listo-referral-center .listo-referral-linkbox--message textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 11px 12px;
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
}
.listo-referral-center .listo-share-message-box__actions {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}
.listo-referral-center .listo-share-message-box__actions .listo-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.listo-referral-center .listo-share-message-box__actions .listo-btn svg { width: 16px; height: 16px; }
.listo-referral-center .listo-share-message-box__actions .listo-btn--primary { min-width: 148px; }
.listo-referral-center .listo-share-message-box__actions .listo-btn--secondary { min-width: 126px; }

/* The old disclosure remains in the stylesheet for compatibility with older
 * cached markup, but NEXT238 uses the always-visible share block above. */
.listo-referral-center .listo-share-message-details { display:none; }

@media (max-width: 700px) {
  .listo-referral-center .listo-page-title-row { margin-bottom: 7px; }
  .listo-referral-center .listo-referral-hero > div > .listo-caption { margin-bottom: 10px; }
  .listo-referral-center .listo-referral-help { max-width: none; margin-bottom: 12px; }
  .listo-referral-center .listo-referral-help__body { grid-template-columns: 1fr; gap: 8px; }
  .listo-referral-center .listo-referral-help__note { grid-column: auto; }
  .listo-referral-center .listo-referral-tabs { grid-template-columns: 1fr; gap: 8px; }
  .listo-referral-center .listo-referral-tab { min-height: 74px; padding: 12px 13px; }
  .listo-referral-center .listo-referral-tab__copy strong { font-size: 15px; }
  .listo-referral-center .listo-referral-tab__copy small { font-size: 11px; }
  .listo-referral-center .listo-earnings-actions { grid-template-columns: 1fr; }
  .listo-referral-center .listo-earnings-actions .listo-btn { width:100%; }
  .listo-referral-center .listo-share-message-box { padding: 12px; }
  .listo-referral-center .listo-share-message-box__actions { flex-direction: column; }
  .listo-referral-center .listo-share-message-box__actions .listo-btn--primary,
  .listo-referral-center .listo-share-message-box__actions .listo-btn--secondary { width:100%; min-width:0; }
  .listo-referral-center .listo-referral-linkbox--message textarea { min-height: 112px; }
}


/* RESTORE: Referral Center base styles from NEXT492 */
.listo-referral-center { max-width: 1120px; }
.listo-referral-hero { margin-bottom: 20px; }
.listo-referral-hero h1 { margin:2px 0 6px; font-size:clamp(28px, 3.4vw, 38px); letter-spacing:-.025em; }
.listo-referral-hero .listo-caption { max-width:620px; margin:0; font-size:15px; }
.listo-eyebrow, .listo-referral-card__kicker { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--ink-muted); }
.listo-referral-tabs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 18px; padding: 6px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-alt); max-width: 760px; }
.listo-referral-tab { border: 0; background: transparent; border-radius: 12px; padding: 10px 14px; display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer; color:var(--ink); min-height: 58px; }
.listo-referral-tab.is-active { background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.listo-referral-tab > span:last-child { display:flex; flex-direction:column; gap:2px; }
.listo-referral-tab strong { font-size:14px; }
.listo-referral-tab small { color:var(--ink-muted); font-size:11px; line-height:1.2; }
.listo-referral-tab__icon { width:32px; height:32px; flex:0 0 32px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; }
.listo-referral-tab__icon svg { width:17px; height:17px; }
.listo-referral-tab__icon--host { color:#2563EB; background:#EFF6FF; }
.listo-referral-tab__icon--affiliate { color:#7C3AED; background:#F5F3FF; }
.listo-referral-panel[hidden] { display:none; }
.listo-referral-grid { display:grid; grid-template-columns:minmax(0, 1fr) 240px; gap:14px; align-items:start; }
.listo-referral-main { min-width:0; }
.listo-referral-card { border:1px solid var(--border); border-radius:16px; background:#fff; padding:20px; margin-bottom:14px; }
.listo-referral-card--accent { background:linear-gradient(180deg,#fff,#fbfdff); }
.listo-referral-card__top { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:10px; }
.listo-referral-reward { font-size:12px; font-weight:800; color:#2563EB; background:#EFF6FF; border-radius:999px; padding:6px 9px; white-space:nowrap; }
.listo-referral-card h2 { margin:0 0 8px; font-size:23px; }
.listo-referral-card h3 { margin:0 0 8px; font-size:17px; }
.listo-referral-card p { margin:0 0 14px; font-size:13px; line-height:1.55; }
.listo-referral-linkbox { margin-top:18px; }
.listo-referral-linkbox label { display:block; font-size:12px; font-weight:700; margin-bottom:7px; }
.listo-referral-linkbox > div { display:flex; gap:8px; }
.listo-referral-linkbox input { min-width:0; flex:1; height:44px; border:1px solid var(--border); border-radius:10px; padding:0 12px; font-size:13px; background:#fff; }
.listo-referral-linkbox .listo-btn { flex:0 0 auto; }
/* Share-message textarea specifically — same flex row as the plain
   link/code inputs above, but top-aligned (align-items:flex-start)
   since a multi-line textarea is taller than the single-line Share
   button beside it, and min-width:0 so it can actually shrink in that
   row instead of forcing an overflow — the exact same fix this
   project has needed elsewhere for a flex child that doesn't shrink
   by default. */
.listo-referral-linkbox--message > div { align-items:flex-start; }
.listo-referral-linkbox textarea { min-width:0; flex:1; box-sizing:border-box; resize:none; font-family:inherit; font-size:13px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; }
.listo-referral-steps { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.listo-referral-steps > div { display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; }
.listo-referral-steps b { width:26px; height:26px; flex:0 0 26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface-alt); }
.listo-referral-side { display:grid; gap:8px; }
.listo-referral-stat { border:1px solid var(--border); border-radius:13px; padding:14px; background:#fff; }
.listo-referral-stat span { display:block; font-size:11px; color:var(--ink-muted); margin-bottom:5px; }
.listo-referral-stat strong { font-size:21px; letter-spacing:-.02em; }
.listo-referral-section-title { font-size:19px; margin:24px 0 12px; }
.listo-referral-host-list { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#fff; }
.listo-referral-host-row { display:grid; grid-template-columns:40px minmax(150px,1fr) minmax(200px,1.3fr); gap:14px; align-items:center; padding:14px 16px; }
.listo-referral-host-row + .listo-referral-host-row { border-top:1px solid var(--border); }
.listo-referral-host-avatar { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#EFF6FF; color:#2563EB; font-weight:800; }
.listo-referral-host-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.listo-referral-host-info strong { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.listo-referral-host-info span { font-size:11px; color:var(--ink-muted); }
.listo-referral-progress > div:first-child { display:flex; justify-content:space-between; gap:10px; font-size:11px; margin-bottom:6px; }
.listo-referral-progress b { font-weight:700; color:var(--ink-muted); }
.listo-referral-progress__bar { height:6px; background:var(--surface-alt); border-radius:999px; overflow:hidden; }
.listo-referral-progress__bar i { display:block; height:100%; background:#2563EB; border-radius:999px; }
.listo-referral-form-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

/* Referred Bookings + Affiliate Activity — side by side on desktop,
   per explicit direction. Stacks to one column on mobile at the same
   700px breakpoint this page already uses elsewhere. */
.listo-referral-two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }

/* Compact log-row visual, shared by both Referred Bookings and
   Affiliate Activity so the two columns read as one consistent
   system rather than two differently-styled lists sitting side by
   side. */
.listo-referral-log-list { border-top:1px solid var(--border); }
/* Compact, overflow-safe activity rows. The previous flex/nowrap layout
   allowed long activity text to keep the row wider than its card on mobile.
   Keep every user-facing data point, but give the row a predictable three-column
   structure: status dot, flexible content, and the monetary amount. */
.listo-referral-log-row {
  display:grid;
  grid-template-columns:8px minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  column-gap:9px;
  row-gap:3px;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid var(--border);
  font-size:12px;
  min-width:0;
}
.listo-referral-log-row__dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; grid-column:1; grid-row:1 / -1; justify-self:center; }
.listo-referral-log-row__dot--pending { background:#E0A030; }
.listo-referral-log-row__dot--completed { background:var(--listo-green); }
.listo-referral-log-row__dot--cancelled { background:var(--ink-muted); }
.listo-referral-log-row__ref,
.listo-referral-log-row__type {
  min-width:0;
  font-weight:650;
  white-space:normal;
  overflow-wrap:anywhere;
}
.listo-referral-log-row__ref { grid-column:2; grid-row:1; }
.listo-referral-log-row__type { grid-column:2; grid-row:1; }
.listo-referral-log-row__date {
  color:var(--ink-muted);
  font-size:10.5px;
  white-space:nowrap;
  min-width:0;
  grid-column:2;
  grid-row:2;
}
.listo-referral-log-row__status {
  color:var(--ink-muted);
  font-size:10.5px;
  min-width:0;
  overflow-wrap:anywhere;
  grid-column:2;
  grid-row:2;
}
.listo-referral-log-row__amount {
  grid-column:3;
  grid-row:1 / -1;
  margin-left:0;
  align-self:center;
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
}
.listo-referral-log-row__total { display:none !important; }
.listo-referral-log-row__amount--credit { color:#22C55E; }
.listo-referral-log-row__amount--debit { color:#EF4444; }

/* Referred-booking rows have both a status and date. Keep those as compact
   secondary lines while preserving the masked booking reference and commission. */
.listo-referral-two-col .listo-referral-log-row .listo-referral-log-row__date { grid-column:2; grid-row:2; }
.listo-referral-two-col .listo-referral-log-row .listo-referral-log-row__status { grid-column:2; grid-row:3; }
.listo-referral-two-col .listo-referral-log-row .listo-referral-log-row__amount { grid-column:3; grid-row:1 / 4; }
.listo-referral-two-col .listo-referral-log-row { grid-template-rows:auto auto auto; }

@media (max-width: 700px) {
  /* NEXT281: keep Referral Center on the shared mobile page canvas.
     .listo-main already supplies the global mobile gutter; the extra
     referral-specific padding made its title appear offset from the
     rest of the account-page content. */
  .listo-referral-center { padding-left:0; padding-right:0; }
  .listo-referral-tabs { grid-template-columns:1fr; }
  .listo-referral-grid { grid-template-columns:1fr; }
  .listo-referral-side { grid-template-columns:1fr; }
  .listo-referral-two-col { grid-template-columns:1fr; gap:14px; }

  .listo-referral-card { padding:18px; border-radius:15px; }
  .listo-referral-card__top { align-items:flex-start; flex-direction:column; gap:8px; }
  .listo-referral-linkbox > div { flex-direction:column; }
  .listo-referral-linkbox input { width:100%; }
  .listo-referral-linkbox textarea { width:100%; }
  .listo-referral-linkbox .listo-btn { width:100%; }
  .listo-referral-steps { grid-template-columns:1fr; }
  .listo-referral-host-row { grid-template-columns:36px minmax(0,1fr); gap:10px; }
  .listo-referral-host-avatar { width:36px; height:36px; }
  .listo-referral-progress { grid-column:1 / -1; }
  .listo-referral-form-grid { grid-template-columns:1fr; }
}

/* Referral Center — unified earnings and wallet actions. */
.listo-earnings-card { display:grid; grid-template-columns:minmax(0, 1fr) 350px; gap:0; margin:0 0 18px; border:1px solid var(--border); border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 5px 22px rgba(16,24,40,.045); }
.listo-earnings-card__main { padding:21px 23px; background:linear-gradient(135deg,#fff,#f8fbff); }
.listo-earnings-card__eyebrow { font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--ink-muted); }
.listo-earnings-card__amount { margin:6px 0 0; font-size:34px; line-height:1.05; font-weight:800; letter-spacing:-.035em; }
.listo-earnings-card__main p { margin:0; font-size:13px; color:var(--ink-muted); }
.listo-earnings-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:15px; }
.listo-earnings-actions .listo-btn { min-height:42px; }
.listo-earnings-actions .listo-btn:disabled { opacity:.5; cursor:not-allowed; }
.listo-earnings-note { margin-top:11px !important; font-size:11px !important; }
.listo-earnings-stats { display:grid; grid-template-columns:1fr; background:var(--surface-alt); border-left:1px solid var(--border); }
.listo-earnings-stats > div { padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.listo-earnings-stats > div + div { border-top:1px solid var(--border); }
.listo-earnings-stats span { font-size:11px; color:var(--ink-muted); }
.listo-earnings-stats strong { font-size:15px; letter-spacing:-.015em; }
.listo-earnings-modal[hidden] { display:none; }
.listo-earnings-modal { position:fixed; inset:0; z-index:10050; display:flex; align-items:center; justify-content:center; padding:20px; }
.listo-earnings-modal__backdrop { position:absolute; inset:0; background:rgba(15,23,42,.48); backdrop-filter:blur(3px); }
.listo-earnings-modal__dialog { position:relative; width:min(100%,520px); max-height:min(92vh,760px); overflow:auto; padding:28px; border:1px solid var(--border); border-radius:22px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.2); }
.listo-earnings-modal__close { position:absolute; top:13px; right:14px; width:34px; height:34px; border:0; border-radius:50%; background:var(--surface-alt); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; }
.listo-earnings-modal__icon { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:13px; margin-bottom:15px; }
.listo-earnings-modal__icon svg { width:21px; height:21px; }
.listo-earnings-modal__icon--withdraw { color:#2563EB; background:#EFF6FF; }
.listo-earnings-modal__icon--wallet { color:#7C3AED; background:#F5F3FF; }
.listo-earnings-modal__dialog h2 { margin:2px 42px 7px 0; font-size:25px; letter-spacing:-.025em; }
.listo-earnings-modal__intro { margin:0 0 20px; color:var(--ink-muted); font-size:13px; line-height:1.55; }
.listo-earnings-form { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.listo-earnings-form .listo-field:first-child { grid-column:1 / -1; }
.listo-earnings-form #listo-affiliate-payout-bank-field { display:none !important; grid-column:1 / -1; }
.listo-earnings-form #listo-affiliate-payout-bank-field.is-open { display:block !important; }
.listo-money-input { display:flex; align-items:center; height:46px; border:1px solid var(--border); border-radius:11px; background:#fff; overflow:hidden; }
.listo-money-input:focus-within { border-color:#94A3B8; box-shadow:0 0 0 3px rgba(37,99,235,.08); }
.listo-money-input > span { padding-left:13px; font-weight:700; color:var(--ink-muted); }
.listo-money-input input { width:100%; height:100%; border:0 !important; box-shadow:none !important; padding:0 12px 0 8px !important; }
.listo-earnings-preview { margin:18px 0; padding:13px 15px; border-radius:13px; background:var(--surface-alt); }
.listo-earnings-preview > div { display:flex; justify-content:space-between; gap:15px; padding:6px 0; font-size:12px; }
.listo-earnings-preview .is-total { margin-top:4px; padding-top:11px; border-top:1px solid var(--border); font-size:13px; }
.listo-earnings-preview .is-total strong { font-size:17px; }
.listo-earnings-message { min-height:18px; margin:8px 0 10px; font-size:12px; }
.listo-btn--wide { width:100%; justify-content:center; }
.listo-earnings-convert-visual { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:10px; margin:18px 0; padding:14px; border:1px solid var(--border); border-radius:15px; background:var(--surface-alt); }
.listo-earnings-convert-visual > div { min-width:0; }
.listo-earnings-convert-visual span { display:block; margin-bottom:4px; font-size:10px; color:var(--ink-muted); }
.listo-earnings-convert-visual strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; }
.listo-earnings-convert-visual b { font-size:18px; color:var(--ink-muted); }
@media (max-width:700px) {
  .listo-earnings-card { grid-template-columns:1fr; border-radius:17px; }
  .listo-earnings-card__main { padding:21px 18px 19px; }
  .listo-earnings-card__amount { font-size:31px; }
  .listo-earnings-actions { display:grid; grid-template-columns:1fr; }
  .listo-earnings-actions .listo-btn { width:100%; }
  .listo-earnings-stats { border-left:0; border-top:1px solid var(--border); grid-template-columns:1fr 1fr; }
  .listo-earnings-stats > div { padding:13px 14px; display:block; }
  .listo-earnings-stats > div + div { border-top:0; }
  .listo-earnings-stats > div:nth-child(3) { grid-column:1 / -1; border-top:1px solid var(--border); }
  .listo-earnings-stats strong { display:block; margin-top:4px; font-size:15px; }
  .listo-earnings-modal { padding:10px; align-items:flex-end; }
  .listo-earnings-modal__dialog { max-height:94vh; padding:22px 18px 20px; border-radius:20px 20px 14px 14px; }
  .listo-earnings-form { grid-template-columns:1fr; gap:12px; }
  .listo-earnings-form .listo-field:first-child { grid-column:auto; }
  .listo-earnings-convert-visual { grid-template-columns:1fr; text-align:center; gap:5px; }
  .listo-earnings-convert-visual b { transform:rotate(90deg); }
}

/* Referral Center — panel transition + keyframes (the only genuinely
   new rules from an earlier "cleaner responsive refinement" pass —
   everything else in that pass duplicated a selector already declared
   above with a different value; those have been merged into the one
   declaration above instead of kept as two separately-maintained
   copies of the same rule). */
.listo-referral-panel { animation: listo-referral-fade .16s ease-out; }
@keyframes listo-referral-fade { from { opacity: .65; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 800px) {
  .listo-referral-center { padding-left: 14px; padding-right: 14px; }
  .listo-referral-tabs { width: 100%; max-width: none; gap: 5px; padding: 4px; border-radius: 13px; }
  .listo-referral-tab { min-height: 52px; padding: 8px 9px; gap: 8px; border-radius: 9px; }
  .listo-referral-tab__icon { width: 29px; height: 29px; flex-basis: 29px; border-radius: 8px; }
  .listo-referral-tab__icon svg { width: 15px; height: 15px; }
  .listo-referral-tab strong { font-size: 12px; }
  .listo-referral-tab small { display: none; }
  .listo-earnings-card { grid-template-columns: 1fr; border-radius: 16px; }
  .listo-earnings-card__main { padding: 18px; }
  .listo-earnings-card__amount { font-size: 31px; }
  .listo-earnings-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .listo-earnings-actions .listo-btn { width: 100%; }
  .listo-earnings-stats { grid-template-columns: repeat(3, minmax(0,1fr)); border-left: 0; border-top: 1px solid var(--border); }
  .listo-earnings-stats > div { padding: 11px 10px; display: block; }
  .listo-earnings-stats > div + div { border-top: 0; border-left: 1px solid var(--border); }
  .listo-earnings-stats span { display: block; margin-bottom: 3px; }
  .listo-earnings-stats strong { display: block; font-size: 13px; }
  .listo-referral-grid { grid-template-columns: 1fr; }
  .listo-referral-side { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .listo-referral-stat { min-width: 0; }
  .listo-referral-stat span { min-height: 28px; }
  .listo-referral-stat strong { font-size: 18px; }
}

@media (max-width: 480px) {
  .listo-referral-hero { margin-bottom: 16px; }
  .listo-referral-hero h1 { font-size: 27px; }
  .listo-referral-card { padding: 17px; }
  .listo-referral-card__top { flex-direction: row; align-items: center; }
  .listo-referral-reward { font-size: 10px; padding: 5px 7px; }
  .listo-earnings-actions { grid-template-columns: 1fr; }
  .listo-earnings-stats { grid-template-columns: 1fr 1fr 1fr; }
  .listo-earnings-stats > div { padding: 10px 7px; }
  .listo-earnings-stats span { font-size: 9px; }
  .listo-earnings-stats strong { font-size: 12px; }
  .listo-referral-side { gap: 6px; }
  .listo-referral-stat { padding: 11px 9px; }
  .listo-referral-stat span { font-size: 9px; }
  .listo-referral-stat strong { font-size: 16px; }
}



/* ========================================================================
   NEXT239 — Referral Center width + tab-state clarity.
   Presentation-only. Referral, commission, withdrawal, wallet and booking
   logic are unchanged.
   ======================================================================== */

/* Match the standard logged-in account-page canvas. */
.listo-referral-center {
  width: 100%;
  max-width: 1200px;
}

/* The Referral Center uses the same full account-page content width for its
   help row and program switcher; do not create a narrower nested canvas. */
.listo-referral-center .listo-referral-help,
.listo-referral-center .listo-referral-tabs {
  max-width: none;
  width: 100%;
}

/* Program icons use the same vibrant account-menu palette, with white glyphs
   on the solid icon wells so they remain highly visible in either tab state. */
.listo-referral-center .listo-referral-tab__icon--host {
  color: #FFFFFF;
  background: #26A69A;
}
.listo-referral-center .listo-referral-tab__icon--affiliate {
  color: #FFFFFF;
  background: #D97706;
}

/* Make the selected program unmistakable while keeping each program's own
   vibrant icon color. */
.listo-referral-center .listo-referral-tab.is-active {
  background: #2196F3;
  border: 1px solid #2196F3;
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(33,150,243,.18);
}
.listo-referral-center .listo-referral-tab.is-active .listo-referral-tab__copy strong,
.listo-referral-center .listo-referral-tab.is-active .listo-referral-tab__copy small,
.listo-referral-center .listo-referral-tab.is-active .listo-referral-tab__copy em {
  color: #FFFFFF;
}
.listo-referral-center .listo-referral-tab:not(.is-active) {
  border: 1px solid transparent;
  background: transparent;
}
.listo-referral-center .listo-referral-tab:not(.is-active):hover {
  border-color: #B9DBF8;
  background: #F8FCFF;
}

/* Keep the icon wells slightly more substantial so the color relationship is
   clear at both desktop and mobile sizes. */
.listo-referral-center .listo-referral-tab__icon {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

@media (max-width: 700px) {
  .listo-referral-center {
    width: 100%;
    max-width: 1200px;
  }
  .listo-referral-center .listo-referral-tabs {
    width: 100%;
  }
}


/* NEXT240 — Affiliate listing-link generator mobile stacking. */
/* On narrow screens, turn the listing URL generator into a simple vertical
   sequence: paste URL → generate → review generated URL → copy. This avoids
   compressed side-by-side controls while leaving the underlying generator
   markup, IDs, validation, and behavior unchanged. */
@media (max-width: 700px) {
  .listo-affiliate-url-generator .listo-referral-linkbox > div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .listo-affiliate-url-generator .listo-referral-linkbox input[type="url"],
  .listo-affiliate-url-generator .listo-referral-linkbox input[type="text"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .listo-affiliate-url-generator .listo-referral-linkbox .listo-btn {
    width: 100%;
    min-height: 48px;
  }
}

/* ========================================================================
   NEXT241 — Referral Center standard canvas + distinct Affiliate icon.
   Presentation-only. All referral attribution, commission, withdrawal,
   wallet-conversion, booking, and ledger logic remains unchanged.
   ======================================================================== */

/* Use the same account-page canvas as the other .listo-container pages.
   The Referral Center previously carried a narrower 1120px rule earlier in
   the stylesheet; this explicit final rule keeps the page at the shared
   1200px standard regardless of that older declaration. */
.listo-referral-center {
  width: 100%;
  max-width: 1200px !important;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* The page-title icon is the Referral Center identity. The Affiliate Program
   tab uses a guest/user-plus symbol so it is visually distinct and does not
   duplicate the page title's referral-link icon. */
.listo-referral-center .listo-referral-tab__icon--affiliate {
  color: #FFFFFF;
  background: #D97706;
}

/* ==========================================================================
   NEXT242 — Guest Inbox app UI
   Presentation/navigation only. Messaging, polling, routing, and booking
   logic remain unchanged.
   ========================================================================== */
.listo-inbox--guest .listo-inbox__list {
  background: #fff;
}
.listo-inbox--guest .listo-inbox__toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
}
.listo-inbox__search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.listo-inbox__search-icon {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 18px;
  color: var(--ink-muted);
  pointer-events: none;
}
.listo-inbox__search {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px 10px 39px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-alt);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  outline: none;
}
.listo-inbox__search:focus {
  border-color: var(--listo-green);
  box-shadow: 0 0 0 3px var(--listo-green-tint);
  background: #fff;
}
.listo-inbox__filters {
  display: inline-flex;
  gap: 4px;
  margin-top: 10px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-alt);
}
.listo-inbox__filter {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  border-radius: 999px;
  padding: 7px 14px;
  min-width: 52px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.listo-inbox__filter:hover { color: var(--ink); }
.listo-inbox__filter.is-active {
  background: #fff;
  color: var(--listo-green-dark);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.listo-inbox-thread-item {
  border-left-width: 0;
  position: relative;
}
.listo-inbox-thread-item.is-active {
  background: var(--listo-green-tint);
  box-shadow: inset 3px 0 0 var(--listo-green);
}
.listo-inbox-thread-item__new {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--listo-green);
  margin-top: 6px;
  font-size: 0;
  box-shadow: 0 0 0 3px var(--listo-green-tint);
}
.listo-inbox-thread-item[hidden],
.listo-inbox__filter-empty[hidden] { display: none !important; }
.listo-inbox__empty-list,
.listo-inbox__filter-empty {
  min-height: 240px;
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-muted);
  text-align: center;
}
.listo-inbox__empty-list svg {
  width: 42px;
  height: 42px;
  opacity: .35;
  margin-bottom: 4px;
}
.listo-inbox__empty-list strong,
.listo-inbox__filter-empty strong {
  color: var(--ink);
  font-size: 14px;
}
.listo-inbox__empty-list span,
.listo-inbox__filter-empty span {
  font-size: 12px;
  max-width: 240px;
}
.listo-inbox__thread-empty-title {
  color: var(--ink);
  font-size: 15px;
}
.listo-inbox-notice {
  max-width: 520px;
  align-self: center;
  padding: 5px 12px 13px;
  font-size: 11px;
}
.listo-inbox__messages {
  padding-left: clamp(18px, 3vw, 32px);
  padding-right: clamp(18px, 3vw, 32px);
}
.listo-msg-bubble {
  max-width: 72%;
  box-shadow: none;
  border: 1px solid rgba(0,0,0,.05);
}
.listo-msg-bubble-row--mine .listo-msg-bubble {
  border-color: transparent;
}
.listo-inbox__composer {
  padding-left: clamp(14px, 2vw, 24px);
  padding-right: clamp(14px, 2vw, 24px);
}
.listo-inbox__composer textarea {
  border-color: var(--border);
  background: var(--surface-alt);
}
.listo-inbox__composer textarea:focus {
  background: #fff;
  border-color: var(--listo-green);
  box-shadow: 0 0 0 3px var(--listo-green-tint);
}

@media (min-width: 801px) {
  .listo-inbox--guest {
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 800px) {
  .listo-inbox--guest .listo-inbox__toolbar {
    padding: 12px 14px 10px;
  }
  .listo-inbox__search {
    min-height: 44px;
    font-size: 15px;
  }
  .listo-inbox__filters {
    margin-top: 8px;
  }
  .listo-inbox__filter {
    min-height: 34px;
    padding: 7px 16px;
  }
  .listo-inbox--guest .listo-inbox-thread-item {
    padding: 14px 16px;
  }
  .listo-inbox__thread-header-copy {
    min-width: 0;
  }
  .listo-inbox__thread-empty-title {
    font-size: 15px;
  }
  .listo-inbox__messages {
    padding-left: 12px;
    padding-right: 12px;
  }
  .listo-msg-bubble {
    border-color: transparent;
  }
  .listo-msg-bubble-row:not(.listo-msg-bubble-row--mine) .listo-msg-bubble {
    border-color: rgba(0,0,0,.05);
  }
  .listo-inbox__composer textarea {
    background: #fff;
  }
}


/* ========================================================================
   NEXT243 — Guest Inbox page-title geometry
   Match the standard account-page title icon footprint and tighten the
   title-to-icon spacing. Presentation only.
   ======================================================================== */
@media (max-width: 700px) {
  .listo-inbox-page .listo-inbox__title-row { gap: 8px; }
  .listo-inbox-page .listo-inbox__title-row .listo-page-title__icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    flex-basis: 40px;
    border-radius: 12px;
  }
  .listo-inbox-page .listo-inbox__title-row .listo-page-title__icon svg {
    width: 20px;
    height: 20px;
  }
}

/* ========================================================================
   NEXT244 — Guest Inbox title alignment cleanup
   Match the shared account-page title geometry on desktop and mobile.
   The legacy Inbox heading rule added padding + a bottom border to the
   same <h1> now used by the shared title row, which created the visible
   short line and excessive icon-to-title spacing. Presentation only.
   ======================================================================== */
.listo-inbox-page .listo-inbox__title-row {
  gap: 12px;
}
.listo-inbox-page .listo-inbox__title-row .listo-page-title__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  flex-basis: 48px;
  border-radius: 14px;
}
.listo-inbox-page .listo-inbox__title-row .listo-page-title__icon svg {
  width: 23px;
  height: 23px;
}
.listo-inbox-page .listo-inbox__title-row .listo-inbox__heading {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 0 !important;
}

@media (max-width: 700px) {
  .listo-inbox-page .listo-inbox__title-row {
    gap: 10px;
  }
  .listo-inbox-page .listo-inbox__title-row .listo-page-title__icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    flex-basis: 40px;
    border-radius: 12px;
  }
  .listo-inbox-page .listo-inbox__title-row .listo-page-title__icon svg {
    width: 20px;
    height: 20px;
  }
}

/* ========================================================================
   NEXT1220 — Guest Edit Profile UI/UX 2.0
   Presentation-only modernization based on the latest Guest Account shell.
   Existing profile/photo/password AJAX flows, selectors and data contracts
   remain unchanged.
   ======================================================================== */
.listo-guest-edit-profile {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 56px;
}
.listo-guest-edit-profile > .listo-guest-edit-profile__title-row {
  align-items: flex-start;
  margin-bottom: 22px !important;
}
.listo-guest-edit-profile__title-copy h1 {
  margin: 0;
  color: #263238;
  font-size: 24px;
  line-height: 29px;
  font-weight: 600;
  letter-spacing: normal;
}
.listo-guest-edit-profile__title-copy p {
  margin: 5px 0 0;
  color: #607080;
  font-size: 14px;
  line-height: 1.5;
}
.listo-guest-edit-profile__content {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

/* One purposeful profile workspace; avoid nested card surfaces. */
.listo-guest-profile-card {
  padding: 28px 0 0;
  border: 0;
  border-top: 1px solid #E9EEF3;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.listo-guest-profile-card__heading h2 {
  margin: 0 0 4px;
  color: #263238;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
}
.listo-guest-profile-card__heading .listo-caption {
  margin: 0 0 22px;
}

/* Photo is part of the workspace, not another card. */
.listo-guest-profile-photo-block {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 24px;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid #E9EEF3;
  border-radius: 0;
  background: transparent;
}
.listo-guest-profile-photo-block .listo-profile-photo--large {
  width: 88px;
  height: 88px;
  min-width: 88px;
  flex: 0 0 88px;
}
.listo-guest-profile-photo-block__copy { min-width: 0; }
.listo-guest-profile-photo-block__copy strong {
  display: block;
  color: #263238;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}
.listo-guest-profile-photo-block__copy p {
  margin: 4px 0 11px;
  color: #607080;
  font-size: 13px;
  line-height: 1.5;
}
.listo-guest-profile-photo-block__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.listo-guest-profile-photo-block__actions .listo-btn {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 10px;
  font-size: 13px;
}
.listo-guest-profile-photo-block__actions .listo-btn--text {
  min-height: 36px;
  padding: 7px 9px;
}

.listo-guest-profile-card .listo-field { margin-bottom: 18px; }
.listo-guest-profile-card .listo-field:last-of-type { margin-bottom: 0; }
.listo-guest-profile-card .listo-field label {
  display: block;
  margin-bottom: 7px;
  color: #263238;
  font-size: 13px;
  font-weight: 600;
}
.listo-guest-profile-name-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.listo-guest-edit-profile input[type="text"],
.listo-guest-edit-profile input[type="tel"] {
  min-height: 46px;
}
.listo-guest-edit-profile input[type="text"],
.listo-guest-edit-profile input[type="tel"] {
  box-sizing: border-box;
}
.listo-guest-edit-profile.is-profile-saved .listo-guest-profile-card input:disabled {
  min-height: 0;
  height: auto;
  background: transparent;
  border-color: transparent;
  padding: 3px 0;
  color: #263238;
  font-weight: 500;
  cursor: default;
  box-shadow: none;
}
.listo-guest-profile-readonly-value {
  min-height: 46px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 11px 0;
  color: #263238;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.listo-guest-profile-help {
  margin-top: 4px;
  color: #7A8997;
  line-height: 1.45;
}
.listo-guest-profile-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 4px;
}
.listo-guest-profile-action {
  min-width: 104px;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 10px;
  font-size: 13px;
}
.listo-guest-profile-action.is-editing,
.listo-guest-edit-profile .listo-guest-profile-action.listo-btn--edit {
  background: #FFFFFF;
  border: 1px solid #D9E1E8;
  color: #263238 !important;
}
.listo-guest-profile-action.is-editing:hover,
.listo-guest-profile-action.is-editing:focus,
.listo-guest-edit-profile .listo-guest-profile-action.listo-btn--edit:hover,
.listo-guest-edit-profile .listo-guest-profile-action.listo-btn--edit:focus-visible {
  background: #F8FAFC;
  border-color: #C8D3DD;
  color: #263238 !important;
}
.listo-guest-profile-status {
  min-height: 20px;
  margin: 0;
}

/* Security is a separate, quiet utility row rather than a card within a card. */
.listo-guest-security-card {
  margin-top: 32px;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: none;
  overflow: hidden;
}
.listo-guest-security-trigger-wrap { background: #FFFFFF; }
.listo-guest-security-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: #263238;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.listo-guest-security-trigger:hover { background: #F8FAFC; }
.listo-guest-security-trigger:focus-visible {
  outline: 3px solid rgba(33,150,243,.18);
  outline-offset: -3px;
}
.listo-guest-security-trigger__icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F3F6F9;
  color: #607080;
}
.listo-guest-security-trigger__icon svg { width: 18px; height: 18px; }
.listo-guest-security-trigger__text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.listo-guest-security-trigger__text strong {
  color: #263238;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}
.listo-guest-security-trigger__text small {
  color: #7A8997;
  font-size: 12px;
  line-height: 1.4;
}
.listo-guest-security-trigger__chevron {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: #94A3B8;
  transition: transform .18s ease;
}
.listo-guest-security-trigger.is-open .listo-guest-security-trigger__chevron { transform: rotate(90deg); }
.listo-guest-password-panel {
  padding: 0 16px 16px;
  border-top: 1px solid #EEF2F6;
}
.listo-guest-password-card {
  margin: 0;
  padding: 20px 4px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.listo-guest-password-card__heading h2 {
  margin: 0 0 4px;
  color: #263238;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
}
.listo-guest-password-card__heading .listo-caption {
  margin: 0 0 18px;
  color: #607080;
  line-height: 1.5;
}
.listo-password-input-wrap { position: relative; }
.listo-password-input-wrap input[type="password"],
.listo-password-input-wrap input[type="text"] {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: 11px 72px 11px 13px;
  border: 1px solid #D9E1E8;
  border-radius: 10px;
  background: #FFFFFF;
  color: #263238;
  font: inherit;
}
.listo-password-input-wrap input:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 3px rgba(33,150,243,.12);
}
.listo-password-toggle {
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  min-width: 42px;
  min-height: 36px;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #1976D2;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.listo-password-toggle:hover { background: #F3F8FD; }
.listo-password-toggle:focus-visible {
  outline: 2px solid #2196F3;
  outline-offset: 1px;
}
.listo-guest-password-action {
  min-width: 150px;
  min-height: 42px;
  margin-top: 2px;
}
.listo-guest-password-status {
  min-height: 20px;
  margin: 8px 0 0;
}

@media (max-width: 700px) {
  .listo-guest-edit-profile {
    padding-bottom: 116px;
  }
  .listo-guest-edit-profile > .listo-guest-edit-profile__title-row {
    margin-bottom: 18px !important;
  }
  .listo-guest-edit-profile__title-copy h1 {
    font-size: 20px;
    line-height: 25px;
  }
  .listo-guest-edit-profile__title-copy p {
    margin-top: 5px;
    font-size: 13px;
    line-height: 19px;
  }
  .listo-guest-edit-profile__content { max-width: none; }
  .listo-guest-profile-card { padding-top: 22px; }
  .listo-guest-profile-card__heading h2 { font-size: 17px; }
  .listo-guest-profile-card__heading .listo-caption { margin-bottom: 18px; }
  .listo-guest-profile-photo-block {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
  }
  .listo-guest-profile-photo-block .listo-profile-photo--large {
    width: 80px;
    height: 80px;
    min-width: 80px;
    flex-basis: 80px;
  }
  .listo-guest-profile-photo-block__copy p { font-size: 12px; margin-bottom: 9px; }
  .listo-guest-profile-photo-block__actions { gap: 6px; }
  .listo-guest-profile-photo-block__actions .listo-btn {
    min-height: 36px;
    padding: 7px 11px;
    font-size: 12px;
  }
  .listo-guest-profile-name-grid {
    grid-template-columns: 1fr !important;
    gap: 0;
  }
  .listo-guest-profile-card .listo-field { margin-bottom: 16px; }
  .listo-guest-profile-readonly-value { min-height: 42px; padding: 8px 0; }
  .listo-guest-profile-actions {
    display: block;
    margin-top: 20px;
  }
  .listo-guest-profile-action {
    width: 104px;
    min-width: 104px;
    min-height: 38px;
  }
  .listo-guest-profile-status { margin-top: 7px; }
  .listo-guest-security-card {
    margin-top: 28px;
    border-radius: 13px;
  }
  .listo-guest-security-trigger {
    min-height: 62px;
    padding: 13px 14px;
    gap: 10px;
  }
  .listo-guest-security-trigger__icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
  .listo-guest-security-trigger__text strong { font-size: 13px; }
  .listo-guest-security-trigger__text small { font-size: 11.5px; }
  .listo-guest-password-panel { padding: 0 14px 14px; }
  .listo-guest-password-card { padding: 18px 2px 2px; }
  .listo-guest-password-card__heading .listo-caption { margin-bottom: 16px; }
  .listo-guest-password-action { width: 100%; min-height: 46px; }
}

/* ========================================================================
   NEXT247 — Guest Support app UI
   Presentation-only. Existing support JS selectors/flows remain intact.
   ======================================================================== */
.listo-support-page { max-width: 1200px; }
.listo-support-loading-row {
  display:flex; align-items:center; gap:8px; margin:-4px 0 16px;
  color:var(--ink-muted); font-size:13px;
}
.listo-support-status-dot {
  width:8px; height:8px; flex:0 0 8px; border-radius:50%; display:inline-block;
  background:#22C55E;
}
.listo-support-help {
  max-width:920px; margin:0 auto 18px; border:1px solid var(--border);
  border-radius:14px; background:var(--surface); overflow:hidden;
}
.listo-support-help summary {
  display:flex; align-items:center; gap:10px; min-height:50px; padding:0 16px;
  cursor:pointer; list-style:none; font-weight:700; color:var(--ink);
}
.listo-support-help summary::-webkit-details-marker { display:none; }
.listo-support-help__icon {
  width:26px; height:26px; flex:0 0 26px; border:1.5px solid currentColor;
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-family:Georgia,serif; font-size:14px; line-height:1;
}
.listo-support-help__chevron { margin-left:auto; color:var(--ink-muted); font-size:18px; transform:translateY(-1px); }
.listo-support-help[open] .listo-support-help__chevron { transform:rotate(180deg) translateY(1px); }
.listo-support-help__body { padding:0 18px 16px 52px; color:var(--ink-muted); font-size:13px; line-height:1.55; }
.listo-support-help__body p { margin:0; }

.listo-support-offline-card {
  width:100%; max-width:720px; margin:0 auto; padding:26px; box-sizing:border-box;
  border:1px solid var(--border); border-radius:16px; background:var(--surface);
  box-shadow:0 3px 14px rgba(26,26,26,.04);
}
.listo-support-state-head h2 { margin:14px 0 6px; font-size:22px; line-height:1.25; }
.listo-support-state-head p { margin:0 0 22px; color:var(--ink-muted); font-size:14px; line-height:1.55; }

/* Support live-chat entry — availability is informative; opening the
   Support page never creates a case. A case starts only after the user
   explicitly chooses Start a Live Chat / Resume Chat. */
.listo-support-entry-card {
  width:100%; max-width:860px; margin:0 auto; padding:28px; box-sizing:border-box;
  border:1px solid #D7EAFB; border-radius:18px; background:linear-gradient(180deg,#F8FCFF 0%,#FFFFFF 100%);
  box-shadow:0 6px 20px rgba(33,150,243,.07); text-align:center;
}
.listo-support-entry-card__top { display:flex; justify-content:center; margin-bottom:18px; }
.listo-support-status-badge--online { color:#15803D; background:#ECFDF3; }
.listo-support-status-badge--online .listo-support-status-dot { background:#22C55E; }
.listo-support-entry-card__icon {
  width:54px; height:54px; margin:0 auto 14px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:#EAF5FF; color:#2196F3;
}
.listo-support-entry-card__icon svg { width:28px; height:28px; }
.listo-support-entry-card__copy h2 { margin:0 0 8px; font-size:22px; line-height:1.25; }
.listo-support-entry-card__copy p { margin:0 auto; max-width:560px; color:var(--ink-muted); font-size:14px; line-height:1.55; }
.listo-support-entry-card__action { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:22px; }
.listo-support-entry-card__action .listo-btn { min-width:210px; justify-content:center; }
.listo-support-entry-card__action .listo-btn:disabled { cursor:not-allowed; }
.listo-support-entry-card__reference {
  align-items:center; justify-content:center; width:max-content; max-width:100%; padding:5px 9px; border-radius:999px;
  background:var(--surface-alt); color:var(--ink-muted); font-size:11px; font-weight:700;
}
.listo-support-entry-card [data-error-for] { margin-top:2px; }
.listo-support-entry-error {
  display:none; margin:2px auto 0; color:#B42318; font-size:12px; line-height:1.45;
}
.listo-support-entry-error.is-visible { display:block; }
.listo-support-status-badge {
  display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px;
  font-size:12px; font-weight:700; color:#667085; background:#F2F4F7;
}
.listo-support-status-badge--offline .listo-support-status-dot { background:#98A2B3; }
.listo-support-message-field { margin-bottom:18px; }
.listo-support-message-field textarea { min-height:150px; resize:vertical; }
.listo-support-contact-context {
  padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--surface-alt);
  margin-bottom:16px;
}
.listo-support-contact-context__label { font-size:12px; font-weight:700; color:var(--ink-muted); margin-bottom:12px; }
.listo-support-contact-context__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.listo-support-contact-context__grid span { display:block; font-size:11px; color:var(--ink-muted); margin-bottom:3px; }
.listo-support-contact-context__grid strong { display:block; font-size:13px; overflow-wrap:anywhere; }

.listo-support-page .listo-support-chat {
  width:100%; max-width:920px; margin:0 auto; height:600px; max-height:70vh;
  border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface);
  box-shadow:0 3px 14px rgba(26,26,26,.04);
}
.listo-support-chat__header { padding:13px 16px; }
.listo-support-chat__identity { display:flex; align-items:center; gap:10px; min-width:0; }
.listo-support-chat__avatar {
  width:38px; height:38px; flex:0 0 38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:#2196F3; color:#fff; font-weight:800;
}
.listo-support-chat__identity strong { display:block; font-size:14px; }
.listo-support-chat__meta { display:flex; align-items:center; gap:5px; margin-top:2px; color:var(--ink-muted); font-size:11px; font-weight:500; }
.listo-support-chat__actions { display:flex; align-items:center; gap:8px; }
.listo-support-end-btn {
  border:0; background:transparent; color:var(--ink-muted); padding:6px 4px; font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
.listo-support-end-btn:hover { color:var(--ink); }
.listo-support-chat__messages { padding:20px; }
.listo-support-msg { max-width:70%; box-shadow:none; }
.listo-support-msg--self { background:#2196F3; color:#fff; }
.listo-support-msg--admin::before {
  content:'Listo Support'; display:block; margin:0 0 5px; font-size:10.5px; font-weight:700; color:#607D8B;
}
.listo-support-chat__composer { padding:12px 16px 16px; }
.listo-support-chat__composer textarea:focus { border-color:#2196F3; box-shadow:0 0 0 3px rgba(33,150,243,.12); }
.listo-support-page #listo-support-send-btn { background:#2196F3; border-color:#2196F3; }
.listo-support-page #listo-support-send-btn:hover { background:#1976D2; border-color:#1976D2; }

.listo-support-closed-card {
  width:100%; max-width:520px; margin:30px auto 0; padding:30px 26px; box-sizing:border-box;
  border:1px solid var(--border); border-radius:16px; background:var(--surface); text-align:center;
  box-shadow:0 3px 14px rgba(26,26,26,.04);
}
.listo-support-closed-icon {
  width:46px; height:46px; margin:0 auto 14px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:#EAF5FF; color:#2196F3; font-size:24px; font-weight:800;
}
.listo-support-closed-card h2 { margin:0 0 7px; font-size:22px; }
.listo-support-closed-card p { margin:0 auto 20px; max-width:420px; color:var(--ink-muted); font-size:14px; line-height:1.55; }

@media (max-width:700px) {
  /* Online Support is a true mobile workspace: keep the chat inside the
     viewport after the account header/title/help controls, with the
     message list doing the scrolling and the composer permanently visible. */
  .listo-support-page.is-support-chat-active {
    height:calc(100dvh - 115px);
    min-height:0;
    box-sizing:border-box;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .listo-support-page.is-support-chat-active #listo-support-online[style*="display: block"] {
    display:flex !important;
    flex:1 1 auto;
    min-height:0;
  }
  .listo-support-page.is-support-chat-active .listo-support-chat {
    flex:1 1 auto;
    height:auto;
    min-height:0;
    max-height:none;
  }
  .listo-support-page.is-support-chat-active .listo-support-chat__composer {
    position:sticky;
    bottom:0;
    z-index:5;
    box-shadow:0 -4px 14px rgba(26,26,26,.06);
  }
  .listo-support-page { padding-top:var(--section-pad); }
  .listo-support-page .listo-page-title-row { margin-bottom:14px; }
  .listo-support-loading-row { margin:-2px 0 12px; font-size:12px; }
  .listo-support-help { margin-bottom:14px; border-radius:12px; }
  .listo-support-help summary { min-height:48px; padding:0 13px; }
  .listo-support-help__body { padding:0 14px 14px 49px; font-size:12px; }
  .listo-support-offline-card { max-width:none; padding:18px; border-radius:14px; }
  .listo-support-entry-card { max-width:none; padding:22px 16px; border-radius:15px; }
  .listo-support-entry-card__top { margin-bottom:15px; }
  .listo-support-entry-card__icon { width:48px; height:48px; margin-bottom:12px; border-radius:14px; }
  .listo-support-entry-card__icon svg { width:25px; height:25px; }
  .listo-support-entry-card__copy h2 { font-size:20px; }
  .listo-support-entry-card__copy p { font-size:13px; }
  .listo-support-entry-card__action { margin-top:18px; }
  .listo-support-entry-card__action .listo-btn { width:100%; min-width:0; }
  .listo-support-state-head h2 { font-size:19px; margin-top:12px; }
  .listo-support-state-head p { font-size:13px; margin-bottom:18px; }
  .listo-support-message-field textarea { min-height:136px; }
  .listo-support-contact-context__grid { grid-template-columns:1fr; gap:11px; }
  .listo-support-page .listo-support-chat { max-width:none; width:100%; height:calc(100dvh - 184px); min-height:480px; max-height:none; border-radius:14px; }
  .listo-support-chat__header { padding:11px 12px; }
  .listo-support-chat__avatar { width:36px; height:36px; flex-basis:36px; border-radius:10px; }
  .listo-support-chat__identity strong { font-size:13px; }
  .listo-support-chat__meta { font-size:10.5px; }
  .listo-support-chat__messages { padding:14px; }
  .listo-support-msg { max-width:84%; padding:10px 13px; font-size:14px; }
  .listo-support-chat__composer { padding:10px 12px calc(12px + env(safe-area-inset-bottom)); gap:8px; }
  .listo-support-chat__composer textarea { min-height:42px; padding:10px 14px; }
  .listo-support-page #listo-support-send-btn { flex:0 0 42px; width:42px; height:42px; }
  .listo-support-closed-card { max-width:none; margin-top:18px; padding:24px 18px; border-radius:14px; }
}

/* ==========================================================================
   NEXT249 — Guest Support mobile composer dock
   The mobile composer is anchored to the visual viewport rather than to
   the message card. This keeps the input in a predictable thumb-friendly
   position while the browser resizes the viewport for the on-screen keyboard.
   ========================================================================== */
.listo-support-composer-dock {
  flex-shrink: 0;
  background: var(--surface);
}
.listo-support-composer-dock > .listo-field-error {
  padding: 0 16px;
}

@media (max-width:700px) {
  .listo-support-page.is-support-chat-active .listo-support-chat {
    overflow: visible;
    position: relative;
  }

  .listo-support-page.is-support-chat-active .listo-support-composer-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgba(26,26,26,.10);
  }

  .listo-support-page.is-support-chat-active .listo-support-composer-dock > .listo-field-error {
    padding: 0 16px;
  }

  .listo-support-page.is-support-chat-active .listo-support-chat__composer {
    position: static;
    box-shadow: none;
    border-top: 0;
    padding: 10px 12px 10px;
  }

  .listo-support-page.is-support-chat-active .listo-support-chat__messages {
    padding-bottom: 120px;
  }

  .listo-support-page.is-support-chat-active #listo-support-messages {
    scroll-padding-bottom: 120px;
  }
}
cat > /mnt/data/next249/README-BUILD-STATUS.md <<'EOF'
# Listo NEXT249 — Guest Support Mobile Composer Dock

Baseline: NEXT248

Purpose:
- Improve Guest Support mobile composer UX.
- Replace in-card sticky behavior with a fixed mobile composer dock anchored to the visual viewport.
- Keep the composer visible above the on-screen keyboard and at the bottom of the viewport when the keyboard is closed.
- Keep message list scrolling independent and reserve bottom space so messages are not hidden behind the dock.

Business logic:
- No support workflow, AJAX action, polling, case state, message sending, or idle-timeout logic changed.
- Desktop composer behavior remains in normal document flow.
EOF
# validate
cd /mnt/data/next249
find . -name '*.php' -not -path './inc/lib/fpdf/*' -print0 | xargs -0 -n1 php -l > php-lint.txt
find assets/js -name '*.js' -print0 | xargs -0 -n1 -I{} sh -c 'node --check "$1"' _ {} > js-lint.txt
zip -r -q /mnt/data/next249/listo-v2-next249-guest-support-mobile-composer-dock.zip . -x './old.zip' -x './*.zip' -x './php-lint.txt' -x './js-lint.txt' -x './zip-test.txt'
unzip -t /mnt/data/next249/listo-v2-next249-guest-support-mobile-composer-dock.zip > zip-test.txt
rm -f old.zip
cp php-lint.txt /mnt/data/next249/php-lint.txt
cp js-lint.txt /mnt/data/next249/js-lint.txt
cp zip-test.txt /mnt/data/next249/zip-test.txt
tail -3 php-lint.txt; tail -3 js-lint.txt; tail -2 zip-test.txt

/* ========================================================================
   NEXT250 — Guest Support desktop composer dock
   Keep the desktop Support chat as a self-contained messaging workspace:
   fixed-height/flexible panel, independently scrolling messages, and a
   composer permanently docked at the bottom of the chat panel.
   Mobile behavior from NEXT249 remains unchanged.
   ======================================================================== */
@media (min-width:701px) {
  .listo-support-page.is-support-chat-active .listo-support-chat {
    /* Fit the desktop chat into a normal viewport without requiring the
       user to scroll just to reach the composer. Grow on taller screens,
       but cap at the established 600px maximum. */
    height: clamp(500px, calc(100dvh - 400px), 600px);
    max-height: 600px;
  }

  .listo-support-page.is-support-chat-active .listo-support-composer-dock {
    flex-shrink: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 14px rgba(26,26,26,.05);
    position: relative;
    z-index: 2;
  }

  .listo-support-page.is-support-chat-active .listo-support-chat__composer {
    border-top: 0;
  }

  .listo-support-page.is-support-chat-active .listo-support-chat__messages {
    padding-bottom: 18px;
    scroll-padding-bottom: 18px;
  }
}

/* ========================================================================
   NEXT251 — Guest FAQ Help Center UI
   Presentation/navigation only. FAQ content and existing workflows remain
   unchanged; this layer adds search, discovery, topic navigation, and
   contextual links around the existing native <details> accordions.
   ======================================================================== */
.listo-faq-page {
  max-width: 1200px;
}

.listo-faq-search-hero {
  max-width: 860px;
  margin: 0 auto 30px;
}
.listo-faq-search-hero__label {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}
.listo-faq-search {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 18px;
  box-sizing: border-box;
  border: 1px solid #d8dee7;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(26, 39, 57, 0.06);
}
.listo-faq-search:focus-within {
  border-color: #2196F3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.12);
}
.listo-faq-search svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  fill: none;
  stroke: #6b7280;
  stroke-width: 2;
  stroke-linecap: round;
}
.listo-faq-search input {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 16px;
  color: var(--ink);
  box-shadow: none !important;
}
.listo-faq-search-hero__meta {
  min-height: 18px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-muted);
}

.listo-faq-discovery {
  display: grid;
  gap: 28px;
  max-width: 1120px;
  margin: 0 auto 38px;
}
.listo-faq-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.listo-faq-section-heading h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}
.listo-faq-popular__grid,
.listo-faq-topics__grid {
  display: grid;
  gap: 10px;
}
.listo-faq-popular__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.listo-faq-popular__card {
  min-height: 82px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.listo-faq-popular__card:hover,
.listo-faq-popular__card:focus-visible {
  transform: translateY(-1px);
  border-color: #b8c7d8;
  box-shadow: 0 5px 16px rgba(26, 39, 57, .07);
}
.listo-faq-popular__card span:first-child {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}
.listo-faq-popular__card span:last-child {
  color: #2196F3;
  font-size: 18px;
  line-height: 1;
}
.listo-faq-topics__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.listo-faq-topic {
  min-height: 86px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.listo-faq-topic:hover,
.listo-faq-topic:focus-visible {
  transform: translateY(-1px);
  border-color: #b8c7d8;
  box-shadow: 0 5px 16px rgba(26, 39, 57, .07);
}
.listo-faq-topic__icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--faq-topic-icon-bg, #EAF5FF);
  color: var(--faq-topic-icon, #2196F3);
  flex: 0 0 46px;
}
.listo-faq-topic__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.listo-faq-topic__body {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.listo-faq-topic__body strong {
  font-size: 15px;
  line-height: 1.25;
}
.listo-faq-topic__body small {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-muted);
}
.listo-faq-topic__arrow {
  color: #2196F3;
  font-size: 19px;
}

.listo-faq-categories {
  scroll-margin-top: 24px;
}
.listo-faq-categories .listo-faq-category {
  scroll-margin-top: 24px;
}
.listo-faq-category {
  margin-top: 34px;
}
.listo-faq-category:first-of-type {
  margin-top: 0;
}
.listo-faq-category__title {
  font-size: 20px;
  margin-bottom: 12px;
}
.listo-faq-results-head {
  max-width: 860px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.listo-faq-results-head h2 {
  margin: 0;
  font-size: 20px;
}
.listo-faq-clear {
  border: 0;
  background: transparent;
  color: #1976D2;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 0;
}
.listo-faq-item[hidden] { display: none !important; }
.listo-faq-category[hidden] { display: none !important; }

.listo-faq-item__action {
  margin-top: 14px;
}
.listo-faq-item__action a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #EAF5FF;
  color: #1565C0;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}
.listo-faq-item__action a:hover {
  background: #dcefff;
}

.listo-faq-support-cta {
  max-width: 1120px;
  margin: 42px auto 0;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid #cfe5f8;
  border-radius: 16px;
  background: #F6FBFF;
}
.listo-faq-support-cta h2 {
  margin: 0 0 4px;
  font-size: 18px;
}
.listo-faq-support-cta p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
}
.listo-faq-support-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: #2196F3;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}
.listo-faq-support-cta__button:hover { background: #1976D2; color: #fff; }

.listo-faq-empty {
  max-width: 560px;
  margin: 50px auto;
  text-align: center;
}
.listo-faq-empty__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EAF5FF;
  color: #2196F3;
  font-weight: 800;
  font-size: 22px;
}
.listo-faq-empty h2 { margin: 0 0 6px; font-size: 20px; }
.listo-faq-empty p { margin: 0; color: var(--ink-muted); }

@media (max-width: 980px) {
  .listo-faq-popular__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .listo-faq-search-hero {
    max-width: none;
    margin-bottom: 24px;
  }
  .listo-faq-search-hero__label { font-size: 17px; }
  .listo-faq-search { min-height: 54px; border-radius: 14px; padding: 0 15px; }
  .listo-faq-discovery { gap: 24px; margin-bottom: 28px; }
  .listo-faq-popular__grid,
  .listo-faq-topics__grid { grid-template-columns: 1fr; }
  .listo-faq-popular__card { min-height: 68px; }
  .listo-faq-topic { min-height: 74px; padding: 14px 15px; }
  .listo-faq-topic__icon { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; }
  .listo-faq-topic__icon svg { width: 19px; height: 19px; }
  .listo-faq-results-head { margin-bottom: 12px; }
  .listo-faq-results-head h2 { font-size: 18px; }
  .listo-faq-category { margin-top: 26px; }
  .listo-faq-category__title { font-size: 18px; }
  .listo-faq-item { padding-left: 15px; padding-right: 15px; }
  .listo-faq-item summary { gap: 12px; min-height: 54px; }
  .listo-faq-item__answer { font-size: 14px; line-height: 1.58; }
  .listo-faq-item__action a { width: 100%; justify-content: space-between; }
  .listo-faq-support-cta {
    margin-top: 34px;
    padding: 18px;
    flex-direction: column;
    align-items: stretch;
  }
  .listo-faq-support-cta__button { justify-content: center; }
}


/* NEXT252 — FAQ discovery controls are real links/buttons, so they remain
   functional even if JavaScript is delayed or unavailable. */
.listo-faq-popular__card { text-decoration: none; }
.listo-faq-popular__card:focus-visible,
.listo-faq-topic:focus-visible,
.listo-faq-item summary:focus-visible,
.listo-faq-clear:focus-visible {
  outline: 3px solid rgba(33,150,243,.22);
  outline-offset: 2px;
}

/* ========================================================================
   NEXT253 — FAQ topic/question scroll alignment.
   Keep anchored FAQ content below the sticky account header so the section
   title is the first visible content when a topic is selected.
   ======================================================================== */
.listo-faq-page .listo-faq-category {
  scroll-margin-top: 88px;
}
.listo-faq-page .listo-faq-item {
  scroll-margin-top: 88px;
}

@media (max-width: 700px) {
  .listo-faq-page .listo-faq-category,
  .listo-faq-page .listo-faq-item {
    scroll-margin-top: 72px;
  }
}


/* ========================================================================
   NEXT255 — Guest FAQ Back to Top
   A lightweight floating control that appears only after the user has
   scrolled meaningfully down the help center. Presentation/navigation only.
   ======================================================================== */
.listo-faq-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1200;
  min-width: 54px;
  height: 46px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #cfe0ef;
  border-radius: 999px;
  background: rgba(255,255,255,.97);
  color: #1565C0;
  box-shadow: 0 8px 24px rgba(26,39,57,.13);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease, visibility .18s ease;
}
.listo-faq-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.listo-faq-back-to-top:hover {
  box-shadow: 0 10px 28px rgba(26,39,57,.16);
}
.listo-faq-back-to-top:focus-visible {
  outline: 3px solid rgba(33,150,243,.22);
  outline-offset: 3px;
}
.listo-faq-back-to-top svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.listo-faq-back-to-top span {
  font-size: 13px;
  font-weight: 750;
}
@media (max-width: 720px) {
  .listo-faq-back-to-top {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    min-width: 48px;
    height: 44px;
    padding: 0 12px;
  }
  .listo-faq-back-to-top span { font-size: 12px; }
}

/* ========================================================================
   NEXT256 — Guest FAQ answer-aware search
   Search results now surface the matched FAQ answer, not just a matching
   keyword/question. Results remain navigation-only and reuse the existing
   native FAQ details as the canonical full-answer content.
   ======================================================================== */
.listo-faq-search-results {
  max-width: 860px;
  margin: 0 auto 30px;
  display: grid;
  gap: 12px;
}
.listo-faq-search-result-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(26, 39, 57, .04);
}
.listo-faq-search-result-card__meta {
  margin-bottom: 5px;
  color: #1976D2;
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.listo-faq-search-result-card__question {
  margin: 0 0 7px;
  font-size: 17px;
  line-height: 1.35;
}
.listo-faq-search-result-card__answer {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.6;
}
.listo-faq-search-result-card__view {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1565C0;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.listo-faq-search-result-card__view:hover { color: #1976D2; }
.listo-faq-search-result-card__view:focus-visible {
  outline: 3px solid rgba(33,150,243,.2);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 720px) {
  .listo-faq-search-results {
    margin-bottom: 24px;
    gap: 10px;
  }
  .listo-faq-search-result-card {
    padding: 15px;
    border-radius: 13px;
  }
  .listo-faq-search-result-card__question { font-size: 16px; }
  .listo-faq-search-result-card__answer { font-size: 14px; line-height: 1.58; }
}

/* ========================================================================
   NEXT258 — Logged-in Guest Homepage
   ------------------------------------------------------------------------
   Presentation-only layer around the existing homepage/search system.
   Search markup, form submission, homepage.js, directory results, and
   listing-card behavior remain unchanged.
   ======================================================================== */
.listo-home-personalized {
  padding: 0 32px 48px;
}
.listo-home-personal-section {
  margin-top: 38px;
}
.listo-home-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.listo-home-section-heading h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.listo-home-section-heading a {
  flex: 0 0 auto;
  color: #1976D2;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.listo-home-section-heading a:hover { text-decoration: underline; }

.listo-home-next-stay-card {
  display: flex;
  min-height: 170px;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}
.listo-home-next-stay-card__image {
  width: 250px;
  flex: 0 0 250px;
  background: #eef3f7;
}
.listo-home-next-stay-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
}
.listo-home-next-stay-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 28px;
  min-width: 0;
}
.listo-home-next-stay-card__body h3 {
  margin: 8px 0 6px;
  font-size: 22px;
  line-height: 1.2;
}
.listo-home-next-stay-card__body p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 15px;
}
.listo-home-next-stay-card__body small {
  margin-top: 8px;
  color: #8a949e;
  font-size: 12px;
}
.listo-home-status-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #EAF7EF;
  color: #177245;
  font-size: 12px;
  font-weight: 800;
}

.listo-home-destination-chips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.listo-home-destination-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.listo-home-destination-chip:hover {
  transform: translateY(-1px);
  border-color: #b9d9f6;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
}
.listo-home-destination-chip__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #EAF5FF;
  color: #2196F3;
}
.listo-home-destination-chip__icon svg {
  width: 17px;
  height: 17px;
}
.listo-home-destination-chip > span:nth-child(2) {
  min-width: 0;
  font-weight: 700;
}
.listo-home-destination-chip__arrow {
  margin-left: auto;
  color: #2196F3;
  font-size: 18px;
}

.listo-home-favorites-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.listo-home-favorites-row__item { min-width: 0; }

@media (max-width: 900px) {
  .listo-home-personalized {
    padding: 0 24px 40px;
  }
  .listo-home-destination-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .listo-home-favorites-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 600px) {
  .listo-home-personalized {
    padding: 0 16px 32px;
  }
  .listo-home-personal-section {
    margin-top: 28px;
  }
  .listo-home-section-heading h2 {
    font-size: 20px;
  }
  .listo-home-next-stay-card {
    min-height: 0;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
  }
  .listo-home-next-stay-card__image {
    width: auto;
    min-height: 150px;
  }
  .listo-home-next-stay-card__image img { min-height: 150px; }
  .listo-home-next-stay-card__body {
    padding: 16px;
  }
  .listo-home-next-stay-card__body h3 {
    font-size: 17px;
    margin-top: 7px;
  }
  .listo-home-next-stay-card__body p {
    font-size: 13px;
    line-height: 1.4;
  }
  .listo-home-status-pill {
    min-height: 24px;
    padding: 0 9px;
    font-size: 11px;
  }
  .listo-home-destination-chips {
    gap: 10px;
  }
  .listo-home-destination-chip {
    min-height: 54px;
    padding: 10px 11px;
    border-radius: 14px;
  }
  .listo-home-destination-chip__icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 9px;
  }
  .listo-home-destination-chip > span:nth-child(2) {
    font-size: 13px;
  }
  .listo-home-favorites-row {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .listo-home-favorites-row__item {
    flex: 0 0 72vw;
    scroll-snap-align: start;
  }
}

/* ========================================================================
   NEXT261 — Logged-in Guest Homepage Greeting Refinement
   ------------------------------------------------------------------------
   Compact first-line greeting, full standalone time-of-day icons, and
   increased separation from the site header/search area.
   ======================================================================== */
.listo-home-greeting {
  max-width: 1200px;
  margin: 64px auto 0;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.listo-home-greeting__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
}
.listo-home-greeting--morning .listo-home-greeting__icon {
  color: #F59E0B;
}
.listo-home-greeting--late-afternoon .listo-home-greeting__icon {
  color: #F97316;
}
.listo-home-greeting--evening .listo-home-greeting__icon {
  color: #7C3AED;
}
.listo-home-greeting--welcome .listo-home-greeting__icon {
  color: #FF9800;
}
.listo-home-greeting__icon svg {
  width: 30px;
  height: 30px;
  display: block;
}
.listo-home-greeting__copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.listo-home-greeting__copy strong {
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.008em;
}
.listo-home-greeting__copy em {
  color: var(--ink-muted);
  font-size: 15px;
  font-style: normal;
  line-height: 1.35;
}
@media (max-width: 900px) {
  .listo-home-greeting {
    margin-top: 48px;
    padding: 0 24px;
  }
}
@media (max-width: 600px) {
  .listo-home-greeting {
    margin-top: 34px;
    padding: 0 16px;
    gap: 10px;
  }
  .listo-home-greeting__icon {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }
  .listo-home-greeting__icon svg {
    width: 27px;
    height: 27px;
  }
  .listo-home-greeting__copy strong {
    font-size: 16px;
    line-height: 1.18;
  }
  .listo-home-greeting__copy em {
    font-size: 13px;
  }
}

/* NEXT262: The desktop homepage search bar changes the height of the sticky
   header as it morphs into its compact state. Opt the homepage header out of
   browser scroll anchoring so that visual height changes do not move the
   user's viewport unexpectedly while scrolling. JavaScript adds the temporary
   document-level class during the short morph transition. */
.listo-header--homepage,
html.listo-homepage-morphing,
body.listo-homepage-morphing {
  overflow-anchor: none;
}

/* ========================================================================
   NEXT263 — Logged-in Guest Homepage Overhaul (trial)
   ------------------------------------------------------------------------
   Presentation-only overhaul scoped to logged-in users on the homepage.
   Search markup, homepage.js, search state, query parameters, listing-card
   component, and row navigation are intentionally untouched.
   ======================================================================== */
body.listo-logged-in .listo-header--homepage .listo-hero {
  background: linear-gradient(180deg, #F7FBFF 0%, #FFFFFF 86%);
}
body.listo-logged-in .listo-header--homepage .listo-search-bar {
  border: 1px solid rgba(33,150,243,.14);
  box-shadow: 0 8px 26px rgba(15,23,42,.10);
}
body.listo-logged-in .listo-home-greeting {
  max-width: 1200px;
  margin-top: 52px;
  padding: 0 32px;
  justify-content: center;
  text-align: center;
}
body.listo-logged-in .listo-home-greeting__copy {
  align-items: center;
}
body.listo-logged-in .listo-home-greeting__copy strong {
  font-size: 19px;
  letter-spacing: -0.01em;
}
body.listo-logged-in .listo-home-greeting__copy em {
  color: #5f6b76;
  font-size: 14px;
}
body.listo-logged-in .listo-home-greeting__icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}
body.listo-logged-in .listo-home-greeting__icon svg {
  width: 34px;
  height: 34px;
}

.listo-home-logged-overview {
  margin-top: 34px;
  padding: 34px 0 40px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFE 100%);
  border-top: 1px solid rgba(33,150,243,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.listo-home-logged-overview__heading,
.listo-home-marketplace-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.listo-home-overline {
  display: block;
  margin-bottom: 5px;
  color: #1976D2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.listo-home-logged-overview__heading h2,
.listo-home-marketplace-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.22;
  letter-spacing: -.012em;
}
.listo-home-overview-note {
  max-width: 360px;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: right;
}
.listo-home-logged-overview .listo-home-personal-section {
  margin-top: 24px;
}
.listo-home-logged-overview .listo-home-next-stay-card {
  border-color: rgba(33,150,243,.16);
  background: #fff;
  box-shadow: 0 10px 28px rgba(15,23,42,.07);
}
.listo-home-logged-overview .listo-home-next-stay-card__body {
  padding: 22px 26px;
}
.listo-home-next-stay-card__status-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.listo-home-next-stay-card__status-row small {
  margin-top: 0;
}
.listo-home-logged-overview .listo-home-favorites-section {
  margin-top: 28px;
}
.listo-home-logged-overview .listo-home-favorites-row__item .listo-card {
  background: rgba(255,255,255,.94);
}
.listo-home-marketplace-heading {
  margin-bottom: 8px;
}
.listo-home-marketplace-heading h2 {
  max-width: 720px;
}
body.listo-logged-in .listo-homepage-content {
  padding-top: 34px;
}

@media (max-width: 900px) {
  body.listo-logged-in .listo-home-greeting {
    margin-top: 34px;
    padding: 0 24px;
  }
  body.listo-logged-in .listo-home-greeting__icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  body.listo-logged-in .listo-home-greeting__icon svg {
    width: 30px;
    height: 30px;
  }
  .listo-home-logged-overview {
    margin-top: 24px;
    padding: 28px 0 32px;
  }
  .listo-home-logged-overview__heading,
  .listo-home-marketplace-heading {
    display: block;
  }
  .listo-home-overview-note {
    max-width: none;
    margin-top: 6px;
    text-align: left;
  }
}

@media (max-width: 600px) {
  body.listo-logged-in .listo-home-greeting {
    margin-top: 28px;
    padding: 0 16px;
    gap: 9px;
  }
  body.listo-logged-in .listo-home-greeting__icon {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }
  body.listo-logged-in .listo-home-greeting__icon svg {
    width: 27px;
    height: 27px;
  }
  body.listo-logged-in .listo-home-greeting__copy strong {
    font-size: 17px;
  }
  body.listo-logged-in .listo-home-greeting__copy em {
    font-size: 13px;
  }
  .listo-home-logged-overview {
    margin-top: 18px;
    padding: 24px 0 28px;
  }
  .listo-home-logged-overview__heading h2,
  .listo-home-marketplace-heading h2 {
    font-size: 21px;
  }
  .listo-home-overline {
    font-size: 11px;
  }
  .listo-home-logged-overview .listo-home-next-stay-card__body {
    padding: 15px;
  }
  body.listo-logged-in .listo-homepage-content {
    padding-top: 28px;
  }
}

/* NEXT272: logged-in homepage desktop cleanup — presentation only.
 * The personalized "Your Listo" block and the "Explore stays" intro
 * are intentionally hidden on desktop. Mobile remains unchanged in
 * this build. Existing listing rows and underlying logic remain intact.
 */
@media (min-width: 769px) {
  body.listo-logged-in .listo-home-logged-overview,
  body.listo-logged-in .listo-home-marketplace-heading {
    display: none !important;
  }
}

/* ========================================================================
   NEXT277 — desktop homepage header control scale
   Reduce only the logged-in homepage's Become a Host and account controls.
   The normal search bar, morph behavior, and other pages remain unchanged.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-header--homepage .listo-mode-toggle {
    font-size: 13px;
    padding: 6px 12px;
    gap: 5px;
  }

  .listo-header--homepage .listo-account-group {
    gap: 10px;
  }

  .listo-header--homepage .listo-account-trigger {
    gap: 6px;
    padding: 5px 11px 5px 5px;
  }

  .listo-header--homepage .listo-account-avatar {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .listo-header--homepage .listo-account-name {
    font-size: 13px;
  }

  .listo-header--homepage .listo-account-caret {
    width: 14px;
    height: 14px;
  }
}

/* NEXT278: logged-in mobile homepage cleanup.
 * Remove the personalized "Your Listo" block and the "Explore stays"
 * heading on mobile, and make the greeting left-aligned with a compact
 * 11px text treatment. Desktop behavior remains governed by NEXT272/
 * NEXT277 and is intentionally unchanged here.
 */
@media (max-width: 768px) {
  body.listo-logged-in .listo-home-logged-overview,
  body.listo-logged-in .listo-home-marketplace-heading {
    display: none !important;
  }

  body.listo-logged-in .listo-home-greeting {
    margin-top: 24px;
    padding: 0 16px;
    justify-content: flex-start;
    text-align: left;
    gap: 9px;
  }

  body.listo-logged-in .listo-home-greeting__copy {
    align-items: flex-start;
  }

  body.listo-logged-in .listo-home-greeting__copy strong,
  body.listo-logged-in .listo-home-greeting__copy em {
    font-size: 11px;
    line-height: 1.3;
  }

  body.listo-logged-in .listo-home-greeting__icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  body.listo-logged-in .listo-home-greeting__icon svg {
    width: 24px;
    height: 24px;
  }
}


/* NEXT279: center the logged-in mobile greeting while preserving a compact
 * hierarchy: first line 12px, supporting line 11px. Desktop remains unchanged.
 */
@media (max-width: 768px) {
  body.listo-logged-in .listo-home-greeting {
    justify-content: center;
    text-align: center;
  }

  body.listo-logged-in .listo-home-greeting__copy {
    align-items: center;
    text-align: center;
  }

  body.listo-logged-in .listo-home-greeting__copy strong {
    font-size: 12px;
    line-height: 1.3;
  }

  body.listo-logged-in .listo-home-greeting__copy em {
    font-size: 11px;
    line-height: 1.3;
  }
}

/* NEXT477 — homepage-only logged-in greeting outside the global header.
 * The greeting belongs to homepage content while the marketplace header
 * remains shared and stable across All / Homes / Parking / Experiences / Services.
 */
.listo-home-greeting-container {
  margin-top: 0;
}
.listo-home-greeting-container .listo-home-greeting {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 901px) {
  .listo-home-greeting-container {
    padding-left: 32px;
    padding-right: 32px;
  }
  body.listo-logged-in .listo-home-greeting-container .listo-home-greeting {
    margin-top: 34px;
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 900px) {
  body.listo-logged-in .listo-home-greeting-container .listo-home-greeting {
    margin-top: 24px;
  }
}

/* NEXT282 — Referral Center mobile uses the same canvas behavior as the
   other account pages. Do not give this page a custom width on mobile:
   inherit the width of .listo-main so its title and content edges land on
   exactly the same mobile gutter as every other account page. */
@media (max-width: 700px) {
  .listo-referral-center {
    width: auto !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }
}

/* NEXT283 — support availability: render the known server state immediately.
   Presentation/initial-state only; existing AJAX availability remains authoritative. */
.listo-support-page.is-support-initial-offline #listo-support-loading,
.listo-support-page.is-support-initial-online #listo-support-loading { display:none !important; }

/* NEXT284 — Host Dashboard desktop app-style hierarchy.
   Presentation only: existing earnings data, URLs, selectors, and workflows
   remain unchanged. Mobile keeps its existing dashboard presentation until
   the dedicated mobile pass. */
@media (min-width: 701px) {
  .listo-dashboard-page .listo-earnings__header {
    margin-bottom: 22px;
  }

  .listo-dashboard-page .listo-earnings__header-controls {
    gap: 8px;
  }

  .listo-dashboard-help-trigger {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    padding: 8px 10px;
    border-radius: 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }
  .listo-dashboard-help-trigger:hover,
  .listo-dashboard-help-trigger:focus-visible {
    color: var(--ink);
    background: var(--surface-alt);
    outline: none;
  }
  .listo-dashboard-help-trigger__icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
  }

  .listo-dashboard-page .listo-earnings-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 0;
  }

  /* Primary financial state: one calm, high-visibility app card. */
  .listo-dashboard-page .listo-earnings-panel--highlight {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 2px;
    align-items: center;
    min-height: 118px;
    padding: 24px 26px;
    border-radius: 20px;
    background: linear-gradient(180deg, #F5FAFF 0%, #EEF7FF 100%);
    border-color: #CDE6FF;
    box-shadow: 0 8px 24px rgba(33,150,243,.06);
  }
  .listo-dashboard-page .listo-earnings-panel--highlight .listo-earnings-panel__icon {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    margin: 0;
    background: #FFFFFF;
    color: #1565C0;
  }
  .listo-dashboard-page .listo-earnings-panel--highlight .listo-earnings-panel__label-row {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  .listo-dashboard-page .listo-earnings-panel--highlight .listo-earnings-panel__label {
    color: #607D8B;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .listo-dashboard-page .listo-earnings-panel--highlight .listo-earnings-panel__info {
    display: none;
  }
  .listo-dashboard-page .listo-earnings-panel--highlight .listo-earnings-panel__value {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    color: #1565C0;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -.035em;
  }
  .listo-dashboard-page .listo-earnings-panel--highlight .listo-earnings-panel__description {
    grid-column: 3;
    grid-row: 1 / 3;
    max-width: 280px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #607D8B;
    font-size: 12px;
    line-height: 1.45;
    text-align: right;
  }

  /* Current money state: compact, scannable, equal-weight cards. */
  .listo-dashboard-page .listo-earnings-panel:nth-child(2),
  .listo-dashboard-page .listo-earnings-panel:nth-child(3),
  .listo-dashboard-page .listo-earnings-panel:nth-child(4) {
    min-height: 106px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 11px;
    row-gap: 2px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
  }
  .listo-dashboard-page .listo-earnings-panel:nth-child(2) .listo-earnings-panel__icon,
  .listo-dashboard-page .listo-earnings-panel:nth-child(3) .listo-earnings-panel__icon,
  .listo-dashboard-page .listo-earnings-panel:nth-child(4) .listo-earnings-panel__icon {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
    margin: 0;
  }
  .listo-dashboard-page .listo-earnings-panel:nth-child(2) .listo-earnings-panel__label-row,
  .listo-dashboard-page .listo-earnings-panel:nth-child(3) .listo-earnings-panel__label-row,
  .listo-dashboard-page .listo-earnings-panel:nth-child(4) .listo-earnings-panel__label-row {
    grid-column: 2 / 4;
    grid-row: 1;
    margin: 0;
  }
  .listo-dashboard-page .listo-earnings-panel:nth-child(2) .listo-earnings-panel__value,
  .listo-dashboard-page .listo-earnings-panel:nth-child(3) .listo-earnings-panel__value,
  .listo-dashboard-page .listo-earnings-panel:nth-child(4) .listo-earnings-panel__value {
    grid-column: 2 / 4;
    grid-row: 2;
    margin: 0;
    font-size: 24px;
  }
  .listo-dashboard-page .listo-earnings-panel:nth-child(2) .listo-earnings-panel__info,
  .listo-dashboard-page .listo-earnings-panel:nth-child(3) .listo-earnings-panel__info,
  .listo-dashboard-page .listo-earnings-panel:nth-child(4) .listo-earnings-panel__info {
    display: none;
  }

  /* Secondary metrics: quieter, but still useful. */
  .listo-dashboard-page .listo-earnings-panel:nth-child(5),
  .listo-dashboard-page .listo-earnings-panel:nth-child(6) {
    min-height: 92px;
    padding: 17px 18px;
    border-radius: 15px;
    background: #FFFFFF;
    box-shadow: none;
  }
  .listo-dashboard-page .listo-earnings-panel:nth-child(5) .listo-earnings-panel__value,
  .listo-dashboard-page .listo-earnings-panel:nth-child(6) .listo-earnings-panel__value {
    font-size: 22px;
  }
  .listo-dashboard-page .listo-earnings-panel:nth-child(5) .listo-earnings-panel__info,
  .listo-dashboard-page .listo-earnings-panel:nth-child(6) .listo-earnings-panel__info {
    display: none;
  }

  .listo-dashboard-quick-actions {
    margin-top: 26px;
  }
  .listo-dashboard-quick-actions__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 11px;
  }
  .listo-dashboard-quick-actions__heading h2 {
    margin: 0;
    font-size: 17px;
    letter-spacing: -.015em;
  }
  .listo-dashboard-quick-actions__heading span {
    color: var(--ink-muted);
    font-size: 11px;
  }
  .listo-dashboard-quick-actions__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 9px;
  }
  .listo-dashboard-quick-action {
    min-width: 0;
    min-height: 76px;
    display: grid;
    grid-template-columns: 30px minmax(0,1fr) 12px;
    align-items: center;
    gap: 8px;
    padding: 12px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #FFFFFF;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .listo-dashboard-quick-action:hover {
    border-color: #B9DBF8;
    box-shadow: 0 6px 18px rgba(15,23,42,.06);
    transform: translateY(-1px);
    text-decoration: none;
  }
  .listo-dashboard-quick-action__icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
  }
  .listo-dashboard-quick-action__icon svg { width: 15px; height: 15px; }
  .listo-dashboard-quick-action__icon--bookings { color:#2563EB; background:#EFF6FF; }
  .listo-dashboard-quick-action__icon--listings { color:#16A34A; background:#F0FDF4; }
  .listo-dashboard-quick-action__icon--calendar { color:#F59E0B; background:#FFFBEB; }
  .listo-dashboard-quick-action__icon--payouts { color:#16A34A; background:#F0FDF4; }
  .listo-dashboard-quick-action__icon--inbox { color:#8B5CF6; background:#F5F3FF; }
  .listo-dashboard-quick-action > span:nth-child(2) { min-width:0; display:flex; flex-direction:column; gap:2px; }
  .listo-dashboard-quick-action strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
  .listo-dashboard-quick-action small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-muted); font-size:9.5px; }
  .listo-dashboard-quick-action__arrow { width:12px; height:12px; color:var(--ink-muted); }
}

/* Dashboard earnings explainer — desktop-first progressive disclosure. */
.listo-dashboard-earnings-modal[hidden] { display:none; }
.listo-dashboard-earnings-modal {
  position:fixed;
  inset:0;
  z-index:10060;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.listo-dashboard-earnings-modal__backdrop {
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.46);
  backdrop-filter:blur(3px);
}
.listo-dashboard-earnings-modal__dialog {
  position:relative;
  width:min(100%, 560px);
  max-height:min(84vh, 680px);
  overflow:auto;
  padding:26px;
  border:1px solid var(--border);
  border-radius:20px;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.2);
}
.listo-dashboard-earnings-modal__close {
  position:absolute;
  top:12px;
  right:12px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:var(--surface-alt);
  color:var(--ink);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.listo-dashboard-earnings-modal__icon {
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#EFF6FF;
  color:#2563EB;
  font-size:17px;
  font-weight:800;
  margin-bottom:12px;
}
.listo-dashboard-earnings-modal__dialog h2 {
  margin:0 42px 7px 0;
  font-size:24px;
  letter-spacing:-.025em;
}
.listo-dashboard-earnings-modal__dialog > p {
  margin:0 0 16px;
  color:var(--ink-muted);
  font-size:13px;
  line-height:1.5;
}
.listo-dashboard-earnings-modal__items { display:grid; gap:8px; }
.listo-dashboard-earnings-modal__item {
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-alt);
}
.listo-dashboard-earnings-modal__item strong {
  display:block;
  margin-bottom:4px;
  font-size:12px;
}
.listo-dashboard-earnings-modal__item span {
  display:block;
  color:var(--ink-muted);
  font-size:11px;
  line-height:1.45;
}

@media (max-width: 700px) {
  /* Mobile pass intentionally deferred. Keep the existing dashboard compact
     layout unchanged while the desktop experience is validated first. */
  .listo-dashboard-help-trigger,
  .listo-dashboard-quick-actions { display:none !important; }
}

/* NEXT285 — Host Dashboard mobile app layout. Presentation-only: reflows the
   existing earnings data and existing quick actions for touch-first scanning.
   All booking/payout/earnings calculations and destinations remain unchanged. */
@media (max-width: 700px) {
  .listo-dashboard-page .listo-earnings__header {
    margin-bottom: 12px;
  }
  .listo-dashboard-page .listo-earnings__header-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .listo-dashboard-page .listo-earnings__header-controls form,
  .listo-dashboard-page .listo-earnings__header-controls .listo-select {
    width: 100%;
    min-width: 0;
  }
  .listo-dashboard-page .listo-earnings__header-controls .listo-select {
    min-height: 44px;
  }
  .listo-dashboard-page #listo-download-report-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }
  .listo-dashboard-page #listo-download-report-btn svg {
    width: 18px;
    height: 18px;
  }
  .listo-dashboard-page #listo-earnings-help {
    display: none !important;
  }

  .listo-dashboard-page .listo-payout-reminder-banner {
    margin-bottom: 12px;
    padding: 12px 13px;
    border-radius: 13px;
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.4;
  }
  .listo-dashboard-page .listo-payout-reminder-banner a {
    font-size: 12px;
  }

  .listo-dashboard-page .listo-earnings-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
  }

  /* Primary value: one clear financial starting point. */
  .listo-dashboard-page .listo-earnings-panel--highlight {
    grid-column: 1 / -1;
    grid-row: auto;
    display: block;
    min-height: 0;
    padding: 20px;
    border-radius: 17px;
  }
  .listo-dashboard-page .listo-earnings-panel--highlight .listo-earnings-panel__icon {
    width: 34px;
    height: 34px;
    margin: 0 0 10px;
  }
  .listo-dashboard-page .listo-earnings-panel--highlight .listo-earnings-panel__label-row {
    margin: 0 0 2px;
  }
  .listo-dashboard-page .listo-earnings-panel--highlight .listo-earnings-panel__value {
    font-size: 34px;
    line-height: 1.05;
  }
  .listo-dashboard-total-caption {
    display: block;
    margin-top: 5px;
    color: #607D8B;
    font-size: 11px;
    line-height: 1.4;
  }

  /* Three status points share one scan line on mobile. */
  .listo-dashboard-page .listo-earnings-panel:nth-child(2),
  .listo-dashboard-page .listo-earnings-panel:nth-child(3),
  .listo-dashboard-page .listo-earnings-panel:nth-child(4) {
    grid-column: span 2;
    min-height: 92px;
    display: block;
    padding: 12px 9px;
    border-radius: 14px;
    overflow: hidden;
  }
  .listo-dashboard-page .listo-earnings-panel:nth-child(2) .listo-earnings-panel__icon,
  .listo-dashboard-page .listo-earnings-panel:nth-child(3) .listo-earnings-panel__icon,
  .listo-dashboard-page .listo-earnings-panel:nth-child(4) .listo-earnings-panel__icon {
    width: 27px;
    height: 27px;
    margin: 0 0 7px;
  }
  .listo-dashboard-page .listo-earnings-panel:nth-child(2) .listo-earnings-panel__icon svg,
  .listo-dashboard-page .listo-earnings-panel:nth-child(3) .listo-earnings-panel__icon svg,
  .listo-dashboard-page .listo-earnings-panel:nth-child(4) .listo-earnings-panel__icon svg {
    width: 14px;
    height: 14px;
  }
  .listo-dashboard-page .listo-earnings-panel:nth-child(2) .listo-earnings-panel__label-row,
  .listo-dashboard-page .listo-earnings-panel:nth-child(3) .listo-earnings-panel__label-row,
  .listo-dashboard-page .listo-earnings-panel:nth-child(4) .listo-earnings-panel__label-row {
    display: block;
    margin: 0;
  }
  .listo-dashboard-page .listo-earnings-panel:nth-child(2) .listo-earnings-panel__label,
  .listo-dashboard-page .listo-earnings-panel:nth-child(3) .listo-earnings-panel__label,
  .listo-dashboard-page .listo-earnings-panel:nth-child(4) .listo-earnings-panel__label {
    min-height: 25px;
    margin: 0 0 2px;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 750;
  }
  .listo-dashboard-page .listo-earnings-panel:nth-child(2) .listo-earnings-panel__value,
  .listo-dashboard-page .listo-earnings-panel:nth-child(3) .listo-earnings-panel__value,
  .listo-dashboard-page .listo-earnings-panel:nth-child(4) .listo-earnings-panel__value {
    margin: 0;
    font-size: 16px;
    line-height: 1.05;
  }

  /* Secondary metrics get quieter two-column treatment. */
  .listo-dashboard-page .listo-earnings-panel:nth-child(5),
  .listo-dashboard-page .listo-earnings-panel:nth-child(6) {
    grid-column: span 3;
    min-height: 72px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 9px;
    align-items: center;
    padding: 12px 11px;
    border-radius: 14px;
  }
  .listo-dashboard-page .listo-earnings-panel:nth-child(5) .listo-earnings-panel__icon,
  .listo-dashboard-page .listo-earnings-panel:nth-child(6) .listo-earnings-panel__icon {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    margin: 0;
  }
  .listo-dashboard-page .listo-earnings-panel:nth-child(5) .listo-earnings-panel__label-row,
  .listo-dashboard-page .listo-earnings-panel:nth-child(6) .listo-earnings-panel__label-row {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  .listo-dashboard-page .listo-earnings-panel:nth-child(5) .listo-earnings-panel__label,
  .listo-dashboard-page .listo-earnings-panel:nth-child(6) .listo-earnings-panel__label {
    margin: 0;
    font-size: 9.5px;
    line-height: 1.2;
  }
  .listo-dashboard-page .listo-earnings-panel:nth-child(5) .listo-earnings-panel__value,
  .listo-dashboard-page .listo-earnings-panel:nth-child(6) .listo-earnings-panel__value {
    grid-column: 2;
    grid-row: 2;
    margin: 2px 0 0;
    font-size: 18px;
    line-height: 1.05;
  }

  .listo-dashboard-mobile-help-trigger {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 9px 0 0;
    padding: 5px 2px;
    border: 0;
    background: transparent;
    color: #607D8B;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
  }
  .listo-dashboard-mobile-help-trigger > span {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #CBD5E1;
    border-radius: 50%;
    background: #fff;
    color: #64748B;
    font-size: 11px;
    font-weight: 800;
  }
  .listo-dashboard-mobile-help-trigger b {
    margin-left: auto;
    color: #94A3B8;
    font-size: 18px;
    line-height: 1;
  }

  /* Quick actions become a touch-friendly horizontal rail. */
  .listo-dashboard-quick-actions {
    display: block !important;
    margin-top: 18px;
  }
  .listo-dashboard-quick-actions__heading {
    margin-bottom: 9px;
  }
  .listo-dashboard-quick-actions__heading h2 {
    font-size: 16px;
  }
  .listo-dashboard-quick-actions__heading span {
    display: none;
  }
  .listo-dashboard-quick-actions__grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 1px 2px 6px;
    margin: 0 -2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .listo-dashboard-quick-actions__grid::-webkit-scrollbar { display: none; }
  .listo-dashboard-quick-action {
    flex: 0 0 158px;
    min-height: 70px;
    grid-template-columns: 30px minmax(0,1fr) 10px;
    padding: 11px 10px;
    border-radius: 13px;
  }
  .listo-dashboard-quick-action strong { font-size: 11px; }
  .listo-dashboard-quick-action small { font-size: 9px; }

  /* On mobile, the existing earnings explainer becomes the same bottom-sheet
     pattern used throughout the guest account experience. */
  .listo-dashboard-earnings-modal {
    align-items: flex-end;
    padding: 8px;
  }
  .listo-dashboard-earnings-modal__dialog {
    width: 100%;
    max-width: none;
    max-height: 86dvh;
    padding: 22px 18px 20px;
    border-radius: 20px 20px 12px 12px;
  }
  .listo-dashboard-earnings-modal__dialog h2 {
    font-size: 21px;
  }
}

@media (min-width: 701px) {
  .listo-dashboard-mobile-help-trigger { display: none !important; }
  .listo-dashboard-total-caption { display: none; }
}

@media (max-width: 380px) {
  .listo-dashboard-page .listo-earnings-grid { gap: 7px; }
  .listo-dashboard-page .listo-earnings-panel--highlight { padding: 18px; }
  .listo-dashboard-page .listo-earnings-panel--highlight .listo-earnings-panel__value { font-size: 32px; }
  .listo-dashboard-page .listo-earnings-panel:nth-child(2),
  .listo-dashboard-page .listo-earnings-panel:nth-child(3),
  .listo-dashboard-page .listo-earnings-panel:nth-child(4) { padding: 10px 7px; }
  .listo-dashboard-page .listo-earnings-panel:nth-child(2) .listo-earnings-panel__label,
  .listo-dashboard-page .listo-earnings-panel:nth-child(3) .listo-earnings-panel__label,
  .listo-dashboard-page .listo-earnings-panel:nth-child(4) .listo-earnings-panel__label { font-size: 8.5px; }
  .listo-dashboard-page .listo-earnings-panel:nth-child(2) .listo-earnings-panel__value,
  .listo-dashboard-page .listo-earnings-panel:nth-child(3) .listo-earnings-panel__value,
  .listo-dashboard-page .listo-earnings-panel:nth-child(4) .listo-earnings-panel__value { font-size: 15px; }
  .listo-dashboard-quick-action { flex-basis: 148px; }
}

/* NEXT286 — mobile Host Dashboard quick actions repair/refinement.
   Presentation-only: keep existing destinations and business logic intact. */
@media (max-width: 700px) {
  .listo-dashboard-quick-actions {
    display: block !important;
    margin-top: 20px !important;
    overflow: visible !important;
  }

  .listo-dashboard-quick-actions__heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 0 10px !important;
  }

  .listo-dashboard-quick-actions__heading h2 {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    letter-spacing: -.01em !important;
  }

  .listo-dashboard-quick-actions__heading span {
    display: none !important;
  }

  .listo-dashboard-quick-actions__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 1px 1px 8px !important;
    margin: 0 -1px !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .listo-dashboard-quick-actions__grid::-webkit-scrollbar {
    display: none !important;
  }

  .listo-dashboard-quick-action {
    position: relative !important;
    flex: 0 0 154px !important;
    min-width: 154px !important;
    width: 154px !important;
    min-height: 82px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 12px !important;
    grid-template-rows: auto 1fr !important;
    align-items: center !important;
    column-gap: 9px !important;
    row-gap: 5px !important;
    padding: 11px 11px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 15px !important;
    background: #FFFFFF !important;
    color: #111827 !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.035) !important;
    text-decoration: none !important;
    transform: none !important;
    scroll-snap-align: start !important;
  }

  .listo-dashboard-quick-action__icon {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  .listo-dashboard-quick-action__icon > svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
  }

  .listo-dashboard-quick-action > span:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  .listo-dashboard-quick-action strong {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
  }

  .listo-dashboard-quick-action small {
    display: none !important;
  }

  .listo-dashboard-quick-action__arrow {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
    color: #94A3B8 !important;
  }

  .listo-dashboard-quick-action:hover,
  .listo-dashboard-quick-action:focus-visible {
    border-color: #B9DBF8 !important;
    box-shadow: 0 5px 14px rgba(15,23,42,.06) !important;
    transform: none !important;
  }
}

@media (max-width: 380px) {
  .listo-dashboard-quick-action {
    flex-basis: 146px !important;
    min-width: 146px !important;
    width: 146px !important;
  }
}

/* NEXT349 — Host Dashboard co-host shared revenue metric.
   The selected-month shared amount sits beside the existing desktop supporting metrics;
   mobile exposes the same value in At a glance. The calculation comes from the
   finalized co-host remittance records and respects the saved percentage/fixed arrangement. */

/* NEXT287 — Host Dashboard desktop analytics redesign.
   Presentation-only: existing earnings grid remains the mobile source of
   truth; the desktop view gets a chart-led analytics composition. */
.listo-dashboard-desktop-analytics { margin-top: 20px; }
.listo-dashboard-desktop-snapshot {
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) minmax(0, 1.4fr);
  border:1px solid #CFE2F4;
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 8px 26px rgba(15,23,42,.045);
}
.listo-dashboard-desktop-snapshot__hero {
  position:relative;
  padding:24px 28px;
  background:linear-gradient(135deg,#F5FAFF,#EAF5FF);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.listo-dashboard-desktop-snapshot__hero-top { display:flex; align-items:flex-start; gap:14px; }
.listo-dashboard-desktop-snapshot__icon {
  width:42px; height:42px; flex:0 0 42px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:#E4F2FF; color:#1976D2;
}
.listo-dashboard-desktop-snapshot__icon svg { width:21px; height:21px; }
.listo-dashboard-desktop-snapshot__eyebrow { color:#4D6577; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.listo-dashboard-desktop-snapshot__amount { margin-top:5px; color:#1565C0; font-size:42px; line-height:1; font-weight:850; letter-spacing:-.045em; }
.listo-dashboard-desktop-snapshot__caption { margin-top:7px; color:#607D8B; font-size:12px; }
.listo-dashboard-desktop-snapshot__help {
  width:32px; height:32px; flex:0 0 32px; border:1px solid #CFE0EF; border-radius:50%;
  background:#fff; color:#607D8B; font:inherit; font-weight:800; cursor:pointer;
}
.listo-dashboard-desktop-snapshot__stats {
  display:grid; grid-template-columns:repeat(3,1fr); background:#fff;
  border-left:1px solid #E4EDF4;
}
.listo-dashboard-desktop-snapshot__stats > div { padding:20px 18px; display:flex; flex-direction:column; justify-content:center; gap:5px; }
.listo-dashboard-desktop-snapshot__stats > div + div { border-left:1px solid #EEF3F7; }
.listo-dashboard-desktop-snapshot__stats span { color:#6B7E8B; font-size:11px; line-height:1.3; font-weight:700; }
.listo-dashboard-desktop-snapshot__stats strong { color:#1F2937; font-size:21px; line-height:1.1; letter-spacing:-.02em; }

.listo-dashboard-chart-grid { display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(340px, .9fr); gap:16px; margin-top:18px; }
.listo-dashboard-chart-card {
  min-width:0; border:1px solid var(--border); border-radius:18px; background:#fff;
  box-shadow:0 6px 20px rgba(15,23,42,.035); overflow:hidden;
}
.listo-dashboard-chart-card__header { padding:20px 20px 8px; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.listo-dashboard-chart-card__header h2 { margin:0; font-size:17px; line-height:1.2; letter-spacing:-.015em; }
.listo-dashboard-chart-card__header p { margin:5px 0 0; color:var(--ink-muted); font-size:11px; line-height:1.4; }
.listo-dashboard-chart-card__period { flex:0 0 auto; padding:5px 8px; border-radius:999px; background:#F4F8FC; color:#607D8B; font-size:10px; font-weight:800; }
.listo-dashboard-chart { padding:4px 14px 12px; height:270px; }
.listo-dashboard-chart svg { display:block; width:100%; height:100%; }
.listo-dashboard-chart__grid-lines line { stroke:#EDF2F6; stroke-width:1; }
.listo-dashboard-chart__y-labels text,
.listo-dashboard-chart__x-label { fill:#8A9AA6; font-size:10px; font-family:inherit; }
.listo-dashboard-chart__line { fill:none; stroke:#2196F3; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.listo-dashboard-chart__point { fill:#fff; stroke:#2196F3; stroke-width:2.5; }
.listo-dashboard-bar-chart { height:270px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:18px 20px 20px; }
.listo-dashboard-bar-chart__item { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; }
.listo-dashboard-bar-chart__item strong { color:#263238; font-size:11px; line-height:1; }
.listo-dashboard-bar-chart__track { width:100%; max-width:34px; height:130px; border-radius:10px 10px 6px 6px; display:flex; align-items:flex-end; justify-content:center; background:#F0F6FB; overflow:hidden; }
.listo-dashboard-bar-chart__track span { width:100%; min-height:12px; border-radius:10px 10px 6px 6px; background:linear-gradient(180deg,#90CAF9,#2196F3); }
.listo-dashboard-bar-chart__item small { color:#8A9AA6; font-size:10px; font-weight:700; }

.listo-dashboard-secondary-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:16px; }
.listo-dashboard-secondary-stats > div {
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:14px; align-items:center;
  padding:16px 18px; border:1px solid var(--border); border-radius:15px; background:#fff;
}
.listo-dashboard-secondary-stats span { color:#617583; font-size:11px; font-weight:700; }
.listo-dashboard-secondary-stats strong { grid-column:2; grid-row:1 / 3; font-size:24px; letter-spacing:-.03em; color:#1F2937; }
.listo-dashboard-secondary-stats small { margin-top:3px; color:#93A1AC; font-size:10px; }
.listo-dashboard-page .listo-earnings-panel__icon--cohost { color:#7C3AED; background:#F5F3FF; }

/* Keep the existing six-panel grid exclusively for mobile so the mobile pass
   can continue to be refined independently. */
@media (min-width:701px) {
  .listo-dashboard-page > .listo-earnings-grid { display:none; }
  .listo-dashboard-page > .listo-dashboard-mobile-help-trigger { display:none !important; }
}

@media (max-width:700px) {
  .listo-dashboard-desktop-analytics { display:none !important; }
}

/* NEXT288 — Host Dashboard mobile analytics redesign.
   Presentation-only: the mobile view reuses the existing earnings summary and
   six-period trend values. Legacy earnings panels remain in the DOM as the
   canonical source for the existing explainer/modal and accessibility text. */
@media (max-width:700px) {
  .listo-dashboard-mobile-analytics {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:4px;
  }

  .listo-dashboard-mobile-total {
    position:relative;
    padding:18px 18px 20px;
    border:1px solid #CFE2F4;
    border-radius:18px;
    background:linear-gradient(135deg,#F5FAFF,#EAF5FF);
    box-shadow:0 6px 18px rgba(15,23,42,.035);
  }
  .listo-dashboard-mobile-total__top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
  }
  .listo-dashboard-mobile-total__icon {
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#DFF0FF;
    color:#1976D2;
  }
  .listo-dashboard-mobile-total__icon svg { width:18px; height:18px; }
  .listo-dashboard-mobile-total__help {
    width:28px;
    height:28px;
    padding:0;
    border:1px solid #CFE0EF;
    border-radius:50%;
    background:#fff;
    color:#607D8B;
    font:inherit;
    font-weight:800;
    cursor:pointer;
  }
  .listo-dashboard-mobile-total__label {
    color:#5B7283;
    font-size:12px;
    line-height:1.2;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.07em;
  }
  .listo-dashboard-mobile-total__amount {
    margin-top:6px;
    color:#1565C0;
    font-size:36px;
    line-height:1;
    font-weight:850;
    letter-spacing:-.045em;
  }
  .listo-dashboard-mobile-total__caption {
    margin-top:6px;
    color:#607D8B;
    font-size:11px;
    line-height:1.35;
  }

  .listo-dashboard-mobile-money {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border:1px solid #E3EAF0;
    border-radius:15px;
    background:#fff;
    overflow:hidden;
  }
  .listo-dashboard-mobile-money > div {
    min-width:0;
    padding:13px 8px 12px;
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  .listo-dashboard-mobile-money > div + div { border-left:1px solid #EEF3F7; }
  .listo-dashboard-mobile-money span {
    color:#6B7E8B;
    font-size:9px;
    line-height:1.25;
    font-weight:750;
  }
  .listo-dashboard-mobile-money strong {
    color:#1F2937;
    font-size:15px;
    line-height:1.05;
    font-weight:800;
    letter-spacing:-.02em;
  }

  .listo-dashboard-mobile-chart-card {
    border:1px solid #E3EAF0;
    border-radius:16px;
    background:#fff;
    box-shadow:0 5px 16px rgba(15,23,42,.03);
    overflow:hidden;
  }
  .listo-dashboard-mobile-chart-card__header {
    padding:15px 15px 5px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }
  .listo-dashboard-mobile-chart-card__header h2 {
    margin:0;
    font-size:15px;
    line-height:1.2;
    letter-spacing:-.01em;
  }
  .listo-dashboard-mobile-chart-card__header p {
    margin:4px 0 0;
    color:#81909A;
    font-size:9.5px;
    line-height:1.35;
  }
  .listo-dashboard-mobile-chart-card__header > span {
    flex:0 0 auto;
    padding:4px 7px;
    border-radius:999px;
    background:#F4F8FC;
    color:#607D8B;
    font-size:9px;
    font-weight:800;
  }
  .listo-dashboard-mobile-line-chart {
    height:180px;
    padding:2px 8px 6px;
  }
  .listo-dashboard-mobile-line-chart svg {
    width:100%;
    height:100%;
    display:block;
  }
  .listo-dashboard-mobile-line-chart__grid line { stroke:#EDF2F6; stroke-width:1; }
  .listo-dashboard-mobile-line-chart__y-labels text,
  .listo-dashboard-mobile-line-chart__x-label { fill:#8A9AA6; font-size:9px; font-family:inherit; }
  .listo-dashboard-mobile-line-chart__line { fill:none; stroke:#2196F3; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
  .listo-dashboard-mobile-line-chart__point { fill:#fff; stroke:#2196F3; stroke-width:2.2; }

  .listo-dashboard-mobile-bar-chart {
    height:176px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:8px;
    padding:10px 14px 13px;
  }
  .listo-dashboard-mobile-bar-chart__item {
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
  }
  .listo-dashboard-mobile-bar-chart__item strong { color:#263238; font-size:10px; line-height:1; }
  .listo-dashboard-mobile-bar-chart__track {
    width:100%;
    max-width:28px;
    height:96px;
    border-radius:8px 8px 5px 5px;
    background:#F0F6FB;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
  }
  .listo-dashboard-mobile-bar-chart__track span {
    width:100%;
    min-height:10px;
    border-radius:8px 8px 5px 5px;
    background:linear-gradient(180deg,#90CAF9,#2196F3);
  }
  .listo-dashboard-mobile-bar-chart__item small { color:#8A9AA6; font-size:9px; font-weight:700; }

  .listo-dashboard-mobile-at-a-glance {
    border-top:1px solid #E9EEF3;
    margin-top:2px;
    padding-top:8px;
  }
  .listo-dashboard-mobile-at-a-glance h2 {
    margin:0 0 4px;
    font-size:15px;
    line-height:1.25;
  }
  .listo-dashboard-mobile-at-a-glance__row {
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 1px;
    border-bottom:1px solid #EEF3F7;
  }
  .listo-dashboard-mobile-at-a-glance__row:last-child { border-bottom:0; }
  .listo-dashboard-mobile-at-a-glance__row span { color:#667986; font-size:11px; }
  .listo-dashboard-mobile-at-a-glance__row strong { color:#1F2937; font-size:14px; }

  /* Replace the previous six-card mobile presentation with the analytics-first
     composition while keeping the same DOM-based explanations available. */
  .listo-dashboard-page > .listo-earnings-grid { display:none !important; }
  .listo-dashboard-page > .listo-dashboard-desktop-analytics { display:none !important; }

  .listo-dashboard-quick-actions { margin-top:18px !important; }
}

@media (max-width:380px) {
  .listo-dashboard-mobile-total { padding:17px 16px 18px; }
  .listo-dashboard-mobile-total__amount { font-size:33px; }
  .listo-dashboard-mobile-money > div { padding-left:6px; padding-right:6px; }
  .listo-dashboard-mobile-money span { font-size:8.5px; }
  .listo-dashboard-mobile-money strong { font-size:14px; }
}

@media (min-width:701px) {
  .listo-dashboard-mobile-analytics { display:none !important; }
}

/* NEXT289 — Host Dashboard control ordering and mobile download alignment.
   Presentation-only: keep the existing month form, help dialog, and report
   URL/workflow intact while matching the requested desktop ordering. */
@media (min-width: 701px) {
  .listo-dashboard-page .listo-earnings__header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .listo-dashboard-page #listo-earnings-help { order: 1; }
  .listo-dashboard-page #listo-month-select-form { order: 2; }
  .listo-dashboard-page #listo-download-report-btn { order: 3; }
}

@media (max-width: 700px) {
  .listo-dashboard-page #listo-download-report-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
  }
  .listo-dashboard-page #listo-download-report-btn svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex: 0 0 18px !important;
  }
}

/* NEXT290 — Host Bookings app workspace redesign.
 * Presentation-only layer. Existing booking queries, statuses, filters,
 * AJAX refresh, detail drawer and action handlers remain unchanged.
 */
.listo-bookings-page-shell > .listo-page-title-row { margin-bottom: 12px; }
.listo-bookings-workspace--host-focused { margin-top: 10px; }

.listo-host-bookings-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin:0 0 16px;
}
.listo-host-bookings-intro__copy { min-width:0; }
.listo-host-bookings-intro__summary {
  margin:0;
  color:var(--ink-muted);
  font-size:14px;
  line-height:1.45;
  font-weight:600;
}
.listo-host-bookings-attention-summary,
.listo-host-bookings-all-clear {
  display:flex;
  align-items:center;
  gap:11px;
  min-width:280px;
  padding:11px 14px;
  border-radius:14px;
  box-sizing:border-box;
  border:1px solid #dfe8ef;
  background:#fff;
  box-shadow:0 4px 14px rgba(21,42,54,.05);
}
.listo-host-bookings-attention-summary { border-color:#fed7aa; background:#fffaf5; color:#7c4a03; }
.listo-host-bookings-attention-summary__count {
  width:34px;
  height:34px;
  border-radius:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:#FFF1E3;
  color:#D97706;
  font-size:14px;
  font-weight:800;
}
.listo-host-bookings-attention-summary strong,
.listo-host-bookings-all-clear strong { display:block; color:var(--ink); font-size:13px; line-height:1.25; }
.listo-host-bookings-attention-summary small,
.listo-host-bookings-all-clear small { display:block; margin-top:2px; color:var(--ink-muted); font-size:11px; line-height:1.35; }
.listo-host-bookings-all-clear { min-width:250px; border-color:#cfe6f4; background:#F7FBFF; }
.listo-host-bookings-all-clear__icon {
  width:34px; height:34px; border-radius:11px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:#EAF5FF; color:#2196F3; font-weight:900;
}

.listo-host-bookings-summary {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin:0 0 20px;
}
.listo-host-bookings-summary__item {
  min-height:70px;
  padding:14px 16px;
  border:1px solid #e3e8ea;
  border-radius:14px;
  background:#fff;
  box-sizing:border-box;
}
.listo-host-bookings-summary__item span { display:block; color:var(--ink-muted); font-size:11px; font-weight:700; letter-spacing:.02em; }
.listo-host-bookings-summary__item strong { display:block; margin-top:6px; color:var(--ink); font-size:24px; line-height:1; }
/* NEXT899 — semantic metric values: color the value only when there is data.
   Empty/zero metrics stay neutral; active workflow/confirmed data uses the
   established semantic process palette. */
.listo-host-bookings-summary__item--attention.listo-host-bookings-summary__item--has-value strong { color:var(--listo-semantic-attention); }
.listo-host-bookings-summary__item--pending.listo-host-bookings-summary__item--has-value strong { color:var(--listo-semantic-pending); }
.listo-host-bookings-summary__item--confirmed.listo-host-bookings-summary__item--has-value strong { color:var(--listo-semantic-confirmed); }
.listo-host-bookings-summary__item--empty strong { color:var(--ink) !important; }

.listo-host-bookings-controls {
  padding:0 0 14px;
  margin:0 0 18px;
  border-bottom:1px solid #e7ecef;
}
.listo-host-bookings-controls .listo-bookings-filters { display:flex; align-items:center; gap:12px; margin:0; }
.listo-host-bookings-controls .listo-bookings-filter-group { display:flex; gap:4px; padding:4px; border:1px solid #e1e7ea; background:#F7F9FA; border-radius:12px; }
.listo-host-bookings-controls .listo-bookings-filter {
  border:0;
  border-radius:9px;
  padding:8px 13px;
  background:transparent;
  color:var(--ink-muted);
  font-weight:750;
  font-size:13px;
}
.listo-host-bookings-controls .listo-bookings-filter:hover { color:var(--ink); background:#fff; }
.listo-host-bookings-controls .listo-bookings-filter.is-active { background:#2196F3; color:#fff; box-shadow:0 2px 7px rgba(33,150,243,.22); }
.listo-host-bookings-controls .listo-bookings-filter-select { margin-left:auto; display:flex; align-items:center; gap:8px; }
.listo-host-bookings-controls .listo-bookings-filter-select span { color:var(--ink-muted); font-size:12px; font-weight:700; }
.listo-host-bookings-controls .listo-bookings-filter-select select {
  min-width:210px;
  min-height:40px;
  padding:0 34px 0 12px;
  border:1px solid #d9e0e3;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:13px;
  font-weight:650;
}

.listo-host-bookings-pending-section { margin:0 0 26px; }
.listo-host-bookings-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 12px; }
.listo-host-bookings-section-heading h2 { margin:0; }
.listo-host-bookings-section-heading .listo-caption { margin:4px 0 0; max-width:680px; }
.listo-host-bookings-section-heading .listo-trip-section__count { min-width:30px; height:30px; padding:0 9px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#EAF5FF; color:#1976D2; font-weight:800; font-size:12px; }
.listo-host-bookings-pending-grid { gap:10px; }
.listo-host-bookings-pending-grid .listo-trip-card { border-color:#d7e8f6; background:#fff; }
.listo-host-bookings-pending-grid .listo-status-badge--awaiting_confirmation { color:#1976D2; background:#EAF5FF; }
.listo-host-bookings-request-grid,
.listo-host-bookings-main-grid { padding:0; }
.listo-host-bookings-request-grid { margin-top:10px; margin-bottom:26px !important; }
.listo-host-bookings-request-grid .listo-trip-card {
  border:1px solid #fed7aa;
  background:#fffaf5;
  border-radius:16px;
  padding:14px;
  box-shadow:0 4px 14px rgba(146,84,15,.05);
}
.listo-host-bookings-request-grid .listo-trip-card__photo { width:150px; height:104px; border-radius:12px; }
.listo-host-bookings-request-grid .listo-trip-card__title { font-size:17px; }
.listo-host-bookings-request-grid .listo-caption { font-size:13px; }
.listo-booking-request-actions { display:flex; gap:8px; margin-top:12px; }
.listo-booking-request-actions .listo-btn { min-width:108px; }

.listo-host-bookings-main-grid { gap:10px; }
.listo-host-bookings-main-grid .listo-trip-card {
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:16px;
  padding:12px;
  border-radius:16px;
  border:1px solid #e4e9eb;
  background:#fff;
  box-shadow:none;
}
.listo-host-bookings-main-grid .listo-trip-card:hover { border-color:#cfe0e9; box-shadow:0 5px 18px rgba(24,46,58,.06); }
.listo-host-bookings-main-grid .listo-trip-card__photo { width:150px; height:112px; border-radius:12px; }
.listo-host-bookings-main-grid .listo-host-bookings-card__body { padding:2px 2px 2px 0; }
.listo-host-bookings-main-grid .listo-trip-card__title { font-size:17px; margin-bottom:4px; }
.listo-host-bookings-main-grid .listo-caption { font-size:13px; }
.listo-host-bookings-main-grid .listo-status-badge { margin-right:5px; }
.listo-host-bookings-main-grid .listo-host-cancel-withdraw-btn { color:var(--error); }

.listo-host-bookings-main-grid .listo-host-bookings-card__body > a > div:last-of-type { margin-top:10px !important; }
.listo-host-bookings-main-grid .listo-host-bookings-card__body > div[style*="display:flex"] { align-items:center; }
.listo-host-bookings-main-grid .listo-host-bookings-card__body > div[style*="display:flex"] .listo-btn { min-height:36px; }

/* Booking detail: desktop is a clean operational drawer; mobile becomes a bottom sheet. */
.listo-booking-detail-drawer { border-radius:18px 0 0 18px; }
.listo-booking-detail-drawer__badges { margin-top:12px; }
.listo-booking-detail-drawer__section { border-top:0; background:#F8FAFB; border-radius:12px; margin-top:12px; padding:14px; }
.listo-booking-detail-drawer__section + .listo-booking-detail-drawer__section { margin-top:10px; }
.listo-booking-detail-drawer__actions { margin-top:16px; }

@media (max-width: 900px) {
  .listo-host-bookings-intro { align-items:flex-start; flex-direction:column; gap:10px; }
  .listo-host-bookings-section-heading { align-items:flex-start; }
  .listo-host-bookings-attention-summary,
  .listo-host-bookings-all-clear { min-width:0; width:100%; }
  .listo-host-bookings-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .listo-host-bookings-controls .listo-bookings-filters { align-items:stretch; flex-direction:column; }
  .listo-host-bookings-controls .listo-bookings-filter-select { margin-left:0; width:100%; justify-content:space-between; }
  .listo-host-bookings-controls .listo-bookings-filter-select select { flex:1; min-width:0; }
}

@media (max-width: 720px) {
  .listo-bookings-page-shell > .listo-page-title-row { margin-bottom:10px; }
  .listo-bookings-workspace--host-focused { margin-top:6px; }
  .listo-host-bookings-intro { margin-bottom:12px; }
  .listo-host-bookings-intro__summary { font-size:12px; }
  .listo-host-bookings-attention-summary,
  .listo-host-bookings-all-clear { padding:11px 12px; }
  .listo-host-bookings-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
  .listo-host-bookings-summary__item { min-height:62px; padding:11px 12px; border-radius:12px; }
  .listo-host-bookings-summary__item strong { font-size:20px; }

  .listo-host-bookings-controls { padding-bottom:10px; margin-bottom:14px; }
  .listo-host-bookings-controls .listo-bookings-filter-group {
    display:flex;
    width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
    gap:5px;
    padding:3px;
    border-radius:11px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .listo-host-bookings-controls .listo-bookings-filter-group::-webkit-scrollbar { display:none; }
  .listo-host-bookings-controls .listo-bookings-filter { flex:0 0 auto; min-height:38px; padding:8px 12px; white-space:nowrap; font-size:12px; }
  .listo-host-bookings-controls .listo-bookings-filter-select { margin-top:8px; display:block; }
  .listo-host-bookings-controls .listo-bookings-filter-select span { display:block; margin-bottom:5px; }
  .listo-host-bookings-controls .listo-bookings-filter-select select { width:100%; min-height:42px; box-sizing:border-box; }

  .listo-host-bookings-request-grid,
  .listo-host-bookings-main-grid { gap:8px; }
  .listo-host-bookings-request-grid .listo-trip-card,
  .listo-host-bookings-main-grid .listo-trip-card {
    display:grid;
    grid-template-columns:82px minmax(0,1fr);
    gap:11px;
    padding:9px;
    border-radius:13px;
  }
  .listo-host-bookings-request-grid .listo-trip-card__photo,
  .listo-host-bookings-main-grid .listo-trip-card__photo { width:82px; min-width:0; height:82px; border-radius:10px; }
  .listo-host-bookings-request-grid .listo-trip-card__title,
  .listo-host-bookings-main-grid .listo-trip-card__title { font-size:14px; }
  .listo-host-bookings-request-grid .listo-caption,
  .listo-host-bookings-main-grid .listo-caption { font-size:11.5px; line-height:1.4; }
  .listo-booking-request-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .listo-booking-request-actions .listo-btn { width:100%; min-width:0; min-height:38px; padding:8px 7px; }

  .listo-host-bookings-main-grid .listo-trip-card .listo-status-badge { max-width:100%; white-space:normal; line-height:1.25; margin:2px 4px 2px 0; }
  .listo-host-bookings-main-grid .listo-host-bookings-card__body > div[style*="display:flex"] { flex-wrap:wrap; gap:6px !important; }
  .listo-host-bookings-main-grid .listo-host-bookings-card__body > div[style*="display:flex"] .listo-btn { flex:1 1 100%; min-width:0; min-height:38px; }

  .listo-booking-detail-drawer {
    top:auto;
    right:0;
    bottom:0;
    width:100%;
    height:auto;
    max-height:86vh;
    border-radius:18px 18px 0 0;
    padding:20px 18px 24px;
    transform:translateY(100%);
    box-shadow:0 -12px 35px rgba(0,0,0,.16);
  }
  .listo-booking-detail-overlay.is-open .listo-booking-detail-drawer { transform:translateY(0); }
  .listo-booking-detail-drawer h2 { font-size:21px; }
  .listo-booking-detail-drawer__actions { grid-template-columns:1fr; }
  .listo-booking-detail-drawer__actions .listo-btn:last-child { grid-column:auto; }
}

@media (max-width: 420px) {
  .listo-host-bookings-summary__item { padding:10px 11px; }
  .listo-host-bookings-summary__item span { font-size:10.5px; }
  .listo-host-bookings-summary__item strong { font-size:19px; }
  .listo-host-bookings-request-grid .listo-trip-card,
  .listo-host-bookings-main-grid .listo-trip-card { grid-template-columns:70px minmax(0,1fr); gap:9px; }
  .listo-host-bookings-request-grid .listo-trip-card__photo,
  .listo-host-bookings-main-grid .listo-trip-card__photo { width:70px; height:70px; }
}


/* NEXT293 — Calendar & Pricing: only the selected workspace occupies page flow.
   The three tabs are true workspace switches; inactive workspaces must be
   completely removed from layout on both desktop and mobile. */
.listo-calendar-pricing-page .listo-cp-calendar-layout[hidden],
.listo-calendar-pricing-page .listo-cp-rules[hidden],
.listo-calendar-pricing-page .listo-cp-settings[hidden] {
    display: none !important;
}
.listo-calendar-pricing-page .listo-cp-calendar-layout.is-active-workspace,
.listo-calendar-pricing-page .listo-cp-rules.is-active-workspace,
.listo-calendar-pricing-page .listo-cp-settings.is-active-workspace {
    display: block;
}

/* NEXT294 — Calendar & Pricing listing context refinement + publish state */
.listo-calendar-pricing-page .listo-cp-listing-bar {
    display: grid;
    grid-template-columns: minmax(330px, 0.8fr) minmax(0, 1.7fr);
    gap: 0;
    background: #fff;
    border: 1px solid #e4e7e8;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(22, 39, 50, .04);
    margin-bottom: 30px;
}
.listo-calendar-pricing-page .listo-cp-listing-selector,
.listo-calendar-pricing-page .listo-cp-listing-summary {
    background: transparent;
    border: 0;
    border-radius: 0;
    min-width: 0;
}
.listo-calendar-pricing-page .listo-cp-listing-selector {
    padding: 20px 22px;
    border-right: 1px solid #edf0f1;
}
.listo-calendar-pricing-page .listo-cp-listing-selector__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}
.listo-calendar-pricing-page .listo-cp-listing-selector__heading label {
    margin: 0;
    font-size: 14px;
    color: #273033;
}
.listo-calendar-pricing-page .listo-cp-listing-selector__heading span {
    font-size: 11px;
    color: #7a8488;
    text-align: right;
}
.listo-calendar-pricing-page .listo-cp-listing-selector select {
    height: 50px;
    border-radius: 12px;
    padding-right: 42px;
}
.listo-calendar-pricing-page .listo-cp-listing-summary {
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) minmax(105px, 120px) minmax(105px, 120px);
    align-items: center;
    gap: 16px;
}
.listo-calendar-pricing-page .listo-cp-listing-summary img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
}
.listo-calendar-pricing-page .listo-cp-listing-summary__main {
    min-width: 0;
}
.listo-calendar-pricing-page .listo-cp-listing-summary__name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
.listo-calendar-pricing-page .listo-cp-listing-summary__name-row strong {
    margin: 0;
}
.listo-calendar-pricing-page .listo-cp-listing-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}
.listo-calendar-pricing-page .listo-cp-listing-status--published {
    background: #EAF8F1;
    color: #157347;
}
.listo-calendar-pricing-page .listo-cp-listing-status--unpublished {
    background: #FFF4D6;
    color: #8A5A00;
}
.listo-calendar-pricing-page .listo-cp-listing-status-note {
    margin-top: 4px;
    color: #687276 !important;
    font-size: 11px !important;
    line-height: 1.35;
}
.listo-calendar-pricing-page .listo-cp-listing-summary > div:not(:first-of-type) {
    min-width: 0;
}
.listo-calendar-pricing-page .listo-cp-listing-summary__limits {
    display: contents;
}
.listo-calendar-pricing-page .listo-cp-listing-summary__limits > div {
    min-width: 0;
    padding-left: 16px;
    border-left: 1px solid #edf0f1;
}
.listo-calendar-pricing-page .listo-cp-listing-summary__limits > div span {
    font-size: 11px;
}
.listo-calendar-pricing-page .listo-cp-listing-summary__limits > div b {
    font-size: 18px;
}
@media (max-width: 900px) {
    .listo-calendar-pricing-page .listo-cp-listing-bar {
        grid-template-columns: 1fr;
        overflow: visible;
    }
    .listo-calendar-pricing-page .listo-cp-listing-selector {
        border-right: 0;
        border-bottom: 1px solid #edf0f1;
    }
    .listo-calendar-pricing-page .listo-cp-listing-summary {
        grid-template-columns: 54px minmax(0,1fr) minmax(90px, 1fr) minmax(90px, 1fr);
        gap: 12px;
        padding: 15px 16px;
    }
    .listo-calendar-pricing-page .listo-cp-listing-summary img {
        width: 54px;
        height: 54px;
    }
}
@media (max-width: 700px) {
    .listo-calendar-pricing-page .listo-cp-listing-selector__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
        margin-bottom: 8px;
    }
    .listo-calendar-pricing-page .listo-cp-listing-selector__heading span {
        text-align: left;
    }
    .listo-calendar-pricing-page .listo-cp-listing-summary {
        grid-template-columns: 52px minmax(0,1fr);
        gap: 10px 12px;
    }
    .listo-calendar-pricing-page .listo-cp-listing-summary img {
        width: 52px;
        height: 52px;
    }
    .listo-calendar-pricing-page .listo-cp-listing-summary__limits {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        margin-top: 2px;
    }
    .listo-calendar-pricing-page .listo-cp-listing-summary__limits > div {
        grid-row: auto;
        border-left: 0;
        border-top: 1px solid #edf0f1;
        padding-left: 0;
        padding-top: 11px;
        min-width: 0;
    }
    .listo-calendar-pricing-page .listo-cp-listing-summary__limits > div + div {
        padding-left: 14px;
        border-left: 1px solid #edf0f1;
    }
    .listo-calendar-pricing-page .listo-cp-listing-status-note {
        max-width: 34ch;
    }
}

/* NEXT296 — External Calendars app-style refinement.
 * Presentation-only: keeps the existing per-listing AJAX editor and sync
 * behavior intact while improving listing context, sync health, and mobile
 * readability.
 */
.listo-external-cal-summary {
  padding: 14px 18px;
  border-radius: 16px;
  background: #F8FBFF;
  border-color: #DCEBFA;
}
.listo-external-cal-summary-copy strong { color: var(--ink); font-size: 20px; }
.listo-external-cal-summary-stats { gap: 8px; }
.listo-external-cal-stat { padding: 6px 9px; }
.listo-external-cal-item-row { min-height: 82px; padding: 11px 20px; grid-template-columns:minmax(320px,1fr) 90px minmax(230px, 260px) 150px; }
.listo-external-cal-item-thumb { width: 48px; height: 48px; flex: 0 0 48px; overflow:hidden; border-radius:12px; background:#F4F7FA; color:#8B5CF6; display:inline-flex; align-items:center; justify-content:center; border:1px solid #E3E8EF; }
.listo-external-cal-item-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.listo-external-cal-item-thumb svg { width:21px; height:21px; }
.listo-external-cal-item-listing { gap:12px; }
.listo-external-cal-item-name-line { display:flex; align-items:center; gap:8px; min-width:0; }
.listo-external-cal-item-name-line strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.listo-external-cal-visibility-badge { flex:0 0 auto; display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:700; line-height:1; }
.listo-external-cal-visibility-badge--published { background:#ECFDF3; color:#15803D; }
.listo-external-cal-visibility-badge--unpublished { background:#FFF7E8; color:#A15C00; }
.listo-external-cal-visibility-badge--not-published { background:#F2F4F7; color:#667085; }
.listo-external-cal-item-status { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.listo-external-cal-item-status-detail { color:var(--ink-muted); font-size:11px; line-height:1.3; }
.listo-external-cal-item-action .listo-btn { min-width:140px; }
.listo-external-cal-editor { background:#F8FAFC; }
.listo-external-cal-editor-inner { padding:24px 28px 30px; }
.listo-external-cal-editor-heading { margin-bottom:20px; }
.listo-external-cal-editor-heading h3 { font-size:18px; }
.listo-external-cal-section-label { margin:0 0 8px; color:var(--ink); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.listo-external-cal-editor .listo-external-cal-row { display:grid; grid-template-columns:minmax(0,1fr) 40px; gap:8px; align-items:center; }
.listo-external-cal-editor .listo-external-cal-input { margin:0; min-height:46px; box-sizing:border-box; }
.listo-external-cal-editor .listo-external-cal-remove { width:40px; height:40px; border-radius:10px; }
.listo-external-cal-editor .listo-external-cal-export { margin-top:28px; padding:20px; border:1px solid #DCEBFA; border-radius:14px; background:#F4FAFF; }
.listo-external-cal-export-head { display:flex; align-items:flex-start; gap:12px; }
.listo-external-cal-export-icon { width:38px; height:38px; flex:0 0 38px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:#EAF5FF; color:#1976D2; }
.listo-external-cal-export-icon svg { width:20px; height:20px; }
.listo-external-cal-export-head h4 { margin:0 0 4px; font-size:15px; }
.listo-external-cal-export-url-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-top:14px; }
.listo-external-cal-export-url { min-height:46px !important; box-sizing:border-box; }
.listo-external-cal-export-note { margin:10px 0 0; }
@media (max-width:900px) {
  .listo-external-cal-summary { margin-bottom:14px; }
  .listo-external-cal-summary-copy { width:100%; }
  .listo-external-cal-summary-stats { display:flex; width:auto; overflow-x:auto; max-width:100%; padding-bottom:2px; }
  .listo-external-cal-stat { flex:0 0 auto; }
  .listo-external-cal-item-row { grid-template-columns:minmax(0,1fr) auto; min-height:84px; padding:14px 16px; }
  .listo-external-cal-item-listing { align-items:flex-start; }
  .listo-external-cal-item-status { grid-column:1; grid-row:2; padding-left:60px; margin-top:-5px; }
  .listo-external-cal-item-action { grid-column:2; grid-row:1 / span 2; align-self:center; }
  .listo-external-cal-item-action .listo-btn { min-width:132px; }
  .listo-external-cal-editor-inner { padding:20px 16px 24px; }
}
@media (max-width:600px) {
  .listo-external-cal-hero > .listo-page-title-row { margin-bottom:5px; }
  .listo-external-cal-intro { margin-bottom:14px; }
  .listo-external-cal-toolbar { gap:10px; margin-bottom:12px; }
  .listo-external-cal-summary-stats { width:100%; }
  .listo-external-cal-item-row { min-height:0; padding:14px; }
  .listo-external-cal-item-thumb { width:44px; height:44px; flex-basis:44px; border-radius:11px; }
  .listo-external-cal-item-name-line { align-items:flex-start; flex-wrap:wrap; gap:5px 7px; }
  .listo-external-cal-item-title-wrap strong { font-size:14px; }
  .listo-external-cal-item-title-wrap span { margin-top:2px; }
  .listo-external-cal-item-status { padding-left:51px; margin-top:-2px; }
  .listo-external-cal-item-action .listo-btn { min-width:0; white-space:nowrap; padding-left:11px; padding-right:11px; }
  .listo-external-cal-editor-heading h3 { font-size:17px; }
  .listo-external-cal-editor .listo-external-cal-row { grid-template-columns:minmax(0,1fr) 38px; }
  .listo-external-cal-editor .listo-external-cal-remove { width:38px; height:38px; }
  .listo-external-cal-export { padding:16px !important; }
  .listo-external-cal-export-url-row { grid-template-columns:1fr; }
  .listo-external-cal-export-url-row .listo-btn { width:100%; justify-content:center; }
}

/* NEXT300 — Calendar & Pricing mobile stay-limit layout fix.
 * The older mobile rules position the second/third direct child of the
 * summary as separate grid cells. The current markup wraps Minimum/Maximum
 * nights inside one .listo-cp-listing-summary__limits container, so those
 * legacy nth-of-type rules can collapse the container into the first column.
 * Reset that placement and let the two limit items use the full card width.
 */
@media (max-width: 700px) {
    .listo-calendar-pricing-page .listo-cp-listing-summary__limits {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        justify-self: stretch;
        align-self: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin-top: 2px;
        padding-top: 0 !important;
        gap: 0;
        overflow: hidden;
        border-top: 0 !important;
    }

    .listo-calendar-pricing-page .listo-cp-listing-summary__limits > div {
        min-width: 0;
        padding: 12px 16px 4px 0;
        border-top: 1px solid #edf0f1;
        border-left: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    .listo-calendar-pricing-page .listo-cp-listing-summary__limits > div + div {
        padding-left: 16px;
        padding-right: 0;
        border-left: 1px solid #edf0f1;
    }

    .listo-calendar-pricing-page .listo-cp-listing-summary__limits > div span {
        display: block;
        margin: 0 0 6px;
        font-size: 13px;
        line-height: 1.3;
        font-weight: 500;
        white-space: normal;
        overflow-wrap: anywhere;
        color: #687276;
    }

    .listo-calendar-pricing-page .listo-cp-listing-summary__limits > div b {
        display: block;
        margin: 0;
        font-size: 24px;
        line-height: 1.1;
        white-space: nowrap;
        color: #15191b;
    }
}

/* ========================================================================== 
   NEXT301 — App-style My Listings workspace
   Portfolio-first card layout with compact controls, responsive grid and
   touch-friendly mobile actions. Existing listing-management endpoints and
   visibility controls remain unchanged.
   ========================================================================== */
.listo-my-listings-page {
  max-width: 1280px;
}

.listo-my-listings-page__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.listo-my-listings-page__header > div:first-child .listo-page-title__icon {
  margin: 0;
}
.listo-my-listings-page__heading-copy h1 {
  margin: 0 !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em;
}
.listo-my-listings-page__heading-copy p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
}
.listo-my-listings-page__add {
  min-height: 44px;
  white-space: nowrap;
}
.listo-my-listings-page__add svg {
  width: 17px;
  height: 17px;
}

.listo-my-listings-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
}
.listo-my-listings-search {
  position: relative;
  display: flex;
  align-items: center;
}
.listo-my-listings-search > svg {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--ink-muted);
  pointer-events: none;
}
.listo-my-listings-search input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.listo-my-listings-search input::placeholder { color: #8A8A8A; }
.listo-my-listings-search input:focus {
  border-color: var(--listo-green);
  box-shadow: 0 0 0 3px var(--listo-green-tint);
}

.listo-my-listings-filters {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.listo-my-listings-filter {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted);
  border-radius: 999px;
  padding: 6px 11px;
  min-height: 34px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.listo-my-listings-filter:hover {
  border-color: #C8C8C8;
  color: var(--ink);
}
.listo-my-listings-filter.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.listo-my-listings-summary {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0 0 14px;
  color: var(--ink-muted);
  font-size: 13px;
}
.listo-my-listings-summary strong {
  color: var(--ink);
  font-size: 15px;
}

.listo-my-listings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.listo-my-listing-card {
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.listo-my-listing-card:hover {
  transform: translateY(-2px);
  border-color: #D6D6D6;
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
}
.listo-my-listing-card[hidden] { display: none !important; }

.listo-my-listing-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  /* NEXT347: was overflow:hidden, which clipped the 3-dot menu at the bottom of the photo so
     every item after "Co-hosts" (including Unpublish) was cut off. The photo itself is rounded
     below, so the menu can now open over the card body. */
  overflow: visible;
  border-radius: 17px 17px 0 0;
  background: var(--surface-alt);
}
.listo-my-listing-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.listo-my-listing-card__media-placeholder {
  border-radius: inherit;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9A9A9A;
}
.listo-my-listing-card__media-placeholder svg {
  width: 42px;
  height: 42px;
}
.listo-my-listing-card__status {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Unpublished is a host-controlled visibility state, so keep it visually
   distinct from the neutral/default badge treatment. */
.listo-status-badge--unpublished {
  background: #FFF4E0;
  color: #9A6700;
  opacity: 1;
}

.listo-my-listing-card__menu-wrap {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
}
.listo-my-listing-card__menu-toggle {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.listo-my-listing-card__menu-toggle:hover { background: #fff; }
.listo-my-listing-card__menu-toggle svg { width: 19px; height: 19px; }
.listo-my-listing-card__menu {
  position: absolute;
  top: 42px;
  right: 0;
  width: 184px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.listo-my-listing-card__menu a,
.listo-my-listing-card__menu button {
  width: 100%;
  display: block;
  padding: 10px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.listo-my-listing-card__menu a:hover,
.listo-my-listing-card__menu button:hover {
  background: var(--surface-alt);
}
/* Unpublish / Publish: last item, set apart from the navigation links. */
.listo-my-listing-card__menu .listo-listing-visibility-toggle {
  margin-top: 4px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  color: #B45309;
  font-weight: 600;
}
.listo-my-listing-card__menu .listo-listing-visibility-toggle:hover { background: #FFF4E0; }
.listo-my-listing-card__menu .listo-listing-visibility-toggle[disabled] { opacity: .6; cursor: progress; }

.listo-my-listing-card__body {
  padding: 16px 16px 15px;
}
.listo-my-listing-card__title {
  margin: 0 0 8px !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listo-my-listing-card__price {
  margin-bottom: 15px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}
.listo-my-listing-card__price span {
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
}
.listo-my-listing-card__manage {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--listo-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: background-color .15s ease;
}
.listo-my-listing-card__manage:hover { background: var(--listo-green-dark); }
.listo-my-listing-card__manage svg { width: 16px; height: 16px; }

.listo-my-listings-no-results {
  margin-top: 8px;
  padding: 38px 20px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  text-align: center;
  color: var(--ink-muted);
}
.listo-my-listings-no-results[hidden] { display: none; }
.listo-my-listings-no-results strong,
.listo-my-listings-no-results span { display: block; }
.listo-my-listings-no-results strong { margin-bottom: 4px; color: var(--ink); font-size: 15px; }
.listo-my-listings-no-results span { font-size: 13px; }

.listo-my-listings-empty {
  padding: 64px 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  text-align: center;
}
.listo-my-listings-empty__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--listo-green-tint);
  color: var(--listo-green-dark);
}
.listo-my-listings-empty__icon svg { width: 32px; height: 32px; }
.listo-my-listings-empty h2 { margin-bottom: 7px; font-size: 21px; }
.listo-my-listings-empty p { max-width: 420px; margin: 0 auto 20px; color: var(--ink-muted); font-size: 14px; }

.listo-my-listings-cohosted {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.listo-my-listings-section-heading {
  margin-bottom: 16px;
}
.listo-my-listings-section-heading h2 {
  margin: 0 0 3px;
  font-size: 20px;
}
.listo-my-listings-section-heading p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
}
.listo-my-listing-card--cohosted .listo-my-listing-card__media {
  aspect-ratio: 16 / 9;
}
.listo-my-listing-card__cohost-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.listo-my-listing-card__owner {
  margin: -2px 0 15px;
  color: var(--ink-muted);
  font-size: 13px;
}

@media (max-width: 1199px) {
  .listo-my-listings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
  .listo-my-listings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listo-my-listings-toolbar { grid-template-columns: 1fr; gap: 10px; }
  .listo-my-listings-filters { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .listo-my-listings-page__header {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    margin-bottom: 20px;
  }
  .listo-my-listings-page__heading-copy h1 { font-size: 22px !important; }
  .listo-my-listings-page__heading-copy p { font-size: 12px; }
  .listo-my-listings-page__add {
    width: auto;
    min-width: 0;
    min-height: 40px;
    height: 40px;
    padding: 0 11px;
    gap: 6px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
  }
  .listo-my-listings-page__add svg { margin: 0; width: 15px; height: 15px; }

  .listo-my-listings-toolbar { margin-bottom: 10px; }
  .listo-my-listings-search input { height: 48px; }
  .listo-my-listings-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 1px 1px 4px;
    scrollbar-width: none;
  }
  .listo-my-listings-filters::-webkit-scrollbar { display: none; }
  .listo-my-listings-filter { flex: 0 0 auto; min-height: 32px; padding: 5px 9px; font-size: 11.5px; }

  .listo-my-listings-grid { grid-template-columns: 1fr; gap: 14px; }
  .listo-my-listing-card { border-radius: 16px; }
  .listo-my-listing-card__media { border-radius: 15px 15px 0 0; aspect-ratio: 16 / 9; }
  .listo-my-listing-card__body { padding: 15px; }
  .listo-my-listing-card__title { font-size: 15px !important; }
  .listo-my-listing-card__price { margin-bottom: 13px; }
  .listo-my-listing-card__manage { min-height: 44px; }
  .listo-my-listing-card__menu-toggle { width: 38px; height: 38px; }
  .listo-my-listing-card__menu { top: 44px; }

  .listo-my-listings-empty { padding: 48px 20px; }
  .listo-my-listings-cohosted { margin-top: 34px; padding-top: 24px; }
}

@media (max-width: 380px) {
  .listo-my-listings-page__header { gap: 8px; }
  .listo-my-listings-page__heading-copy h1 { font-size: 21px !important; }
  .listo-my-listings-page__heading-copy p { font-size: 11px; }
  .listo-my-listing-card__body { padding: 14px; }
}


/* ==========================================================================
   NEXT302 — Listings UI refinement
   Mobile Add listing remains explicitly labeled; status filters are compact;
   desktop property cards use a denser four-column presentation; unpublished
   listings use an amber status pill for stronger visibility.
   ========================================================================== */

/* ==========================================================================\n   NEXT303 — App-style Co-host workspace\n   Presentation-only redesign. Existing AJAX selectors are preserved.\n   ========================================================================== */
.listo-cohost-page {
  max-width: 1280px;
}
.listo-cohost-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.listo-cohost-hero__title {
  display: flex;
  align-items: center;
  gap: 16px;
}
.listo-cohost-hero__title h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
}
.listo-cohost-hero__title p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 15px;
}
.listo-cohost-hero .listo-btn { min-height: 48px; }
.listo-cohost-hero .listo-btn svg { width: 18px; height: 18px; }

.listo-cohost-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.listo-cohost-stat {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-height: 66px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.listo-cohost-stat strong {
  font-size: 22px;
  color: var(--ink);
}
.listo-cohost-stat span {
  color: var(--ink-muted);
  font-size: 13px;
}
.listo-cohost-stat--attention strong { color: #9a6300; }

.listo-cohost-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 20px;
}
.listo-cohost-main,
.listo-cohost-sidebar { min-width: 0; }
.listo-cohost-page .listo-cohost-page-section {
  margin-bottom: 20px;
  padding: 22px;
  border-radius: 16px;
}
.listo-cohost-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.listo-cohost-section-head h2 { margin-bottom: 3px; font-size: 20px; }
.listo-cohost-section-head p { margin: 0; }
.listo-cohost-section-head--compact { margin-bottom: 14px; }

.listo-cohost-management-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 10px;
  margin: 0 0 14px;
}
.listo-cohost-search-wrap input,
.listo-cohost-filter-wrap select {
  height: 44px;
  border-radius: 12px;
  background: var(--surface);
}
.listo-cohost-management-table {
  display: grid;
  gap: 12px;
  border: 0;
  overflow: visible;
  background: transparent;
}
.listo-cohost-listing {
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.listo-cohost-listing:hover,
.listo-cohost-listing.is-expanded {
  border-color: #cbdff3;
  box-shadow: 0 8px 24px rgba(20, 80, 120, .06);
}
.listo-cohost-management-row {
  min-height: 94px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  background: var(--surface);
}
.listo-cohost-management-listing {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.listo-cohost-listing-thumb {
  width: 70px;
  height: 58px;
  flex: 0 0 70px;
  overflow: hidden;
  border-radius: 11px;
  background: var(--surface-alt);
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.listo-cohost-listing-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.listo-cohost-listing-thumb svg { width: 25px; height: 25px; }
.listo-cohost-listing-copy { min-width: 0; }
.listo-cohost-listing-copy strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listo-cohost-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 12px;
}
.listo-cohost-status-pill,
.listo-cohost-permission-pill,
.listo-cohost-detail-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}
.listo-cohost-status-pill--active {
  background: #e9f8f0;
  color: #247453;
}
.listo-cohost-status-pill--pending {
  background: #fff3d8;
  color: #8a5a00;
}
.listo-cohost-status-pill--none {
  background: #f1f3f4;
  color: var(--ink-muted);
}
.listo-cohost-status-pill--declined {
  background: #fbeeee;
  color: #a13e3e;
}
.listo-cohost-permission-pill--full {
  background: #eaf5ff;
  color: #1768a8;
}
.listo-cohost-permission-pill--messaging {
  background: #f0f2f4;
  color: #5a6168;
}
.listo-cohost-detail-chip {
  background: #f7f8f9;
  color: #646c73;
}
.listo-cohost-management-action .listo-btn {
  min-height: 42px;
  min-width: 128px;
  justify-content: center;
}
.listo-cohost-management-action .listo-btn--primary { padding-left: 18px; padding-right: 18px; }
.listo-cohost-chevron { width: 15px; height: 15px; margin-left: 8px; transition: transform .15s ease; }
.listo-cohost-manage-toggle[aria-expanded="true"] .listo-cohost-chevron { transform: rotate(180deg); }

.listo-cohost-details {
  margin: 0;
  padding: 0 16px 16px;
  border: 0;
  background: #fbfcfd;
}
.listo-cohost-details[hidden] { display: none; }
.listo-cohost-details-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 10px;
  border-top: 1px solid var(--border);
}
.listo-cohost-details-head h4 { margin: 0; font-size: 13px; }
.listo-cohost-details-head > span { color: var(--ink-muted); font-size: 12px; }
.listo-cohost-details-head--spaced { margin-top: 8px; }
.listo-cohost-details-head--pending h4 { color: #8a5a00; }
.listo-cohost-people-grid { display: grid; gap: 8px; }
.listo-cohost-person-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.listo-cohost-avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  border-radius: 50%;
  background: #dbeeff;
  color: #1768a8;
  font-size: 12px;
  font-weight: 800;
}
.listo-cohost-avatar--pending { background: #fff0cf; color: #8a5a00; }
.listo-cohost-avatar--invite { background: #e8f4f8; color: #257c96; }
.listo-cohost-person-main { min-width: 0; }
.listo-cohost-person-main > strong,
.listo-cohost-person-main > span { display: block; }
.listo-cohost-person-main > strong { font-size: 14px; line-height: 1.25; }
.listo-cohost-person-main > span { margin-top: 2px; color: var(--ink-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listo-cohost-person-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.listo-cohost-person-menu-wrap { position: relative; align-self: flex-start; }
.listo-cohost-action-toggle {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.listo-cohost-action-toggle[aria-expanded="true"] { background: var(--surface-alt); }
.listo-cohost-action-menu {
  position: absolute;
  z-index: 20;
  top: 40px;
  right: 0;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}
.listo-cohost-action-menu[hidden] { display: none; }
.listo-cohost-action-menu button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--error);
  text-align: left;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.listo-cohost-action-menu button:hover { background: #fff4f4; }
.listo-cohost-action-menu .listo-cohost-edit { color: var(--ink); }
.listo-cohost-action-menu .listo-cohost-edit:hover { background: var(--surface-alt); }
.listo-cohost-action-menu .listo-cohost-action-danger { color: var(--error); }
.listo-cohost-edit-form {
  grid-column: 2 / -1;
  width: 100%;
  margin-top: 2px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-alt);
}
.listo-cohost-edit-form[hidden] { display: none; }
.listo-cohost-edit-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.listo-cohost-edit-form .listo-field { min-width: 0; }
.listo-cohost-edit-form input,
.listo-cohost-edit-form select { width: 100%; box-sizing: border-box; }
.listo-cohost-edit-form input:disabled { opacity: .75; cursor: not-allowed; }
.listo-cohost-edit-note { margin: 10px 0 0; }
.listo-cohost-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.listo-cohost-edit-actions .listo-btn { min-height: 38px; }
.listo-cohost-invite-toggle { margin-top: 12px; }
.listo-cohost-invite-toggle svg { width: 16px; height: 16px; }
.listo-cohost-invite-form {
  display: none;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.listo-cohost-invite-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.listo-cohost-invite-form .listo-field { margin-bottom: 0; }
.listo-cohost-invite-form .listo-field-error { margin-top: 8px; }
.listo-cohost-invite-send { margin-top: 12px; min-height: 44px; }
.listo-cohost-empty-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px dashed #ccd5dc;
  border-radius: 12px;
  background: var(--surface);
}
.listo-cohost-empty-inline__icon,
.listo-cohost-empty-state__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  border-radius: 12px;
  background: #eaf5ff;
  color: #1976d2;
}
.listo-cohost-empty-inline__icon svg,
.listo-cohost-empty-state__icon svg { width: 22px; height: 22px; }
.listo-cohost-empty-inline strong { display: block; font-size: 13px; }
.listo-cohost-empty-inline p { margin: 2px 0 0; color: var(--ink-muted); font-size: 12px; }
.listo-cohost-empty-state {
  padding: 34px 20px;
  text-align: center;
  border: 1px dashed #ccd5dc;
  border-radius: 14px;
  background: var(--surface-alt);
}
.listo-cohost-empty-state__icon { margin: 0 auto 12px; }
.listo-cohost-empty-state h3 { margin-bottom: 6px; font-size: 18px; }
.listo-cohost-empty-state p { max-width: 420px; margin: 0 auto; color: var(--ink-muted); }

.listo-cohost-sidebar-section { padding: 18px !important; }
.listo-cohost-invite-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.listo-cohost-invite-card + .listo-cohost-invite-card { margin-top: 8px; }
.listo-cohost-invite-copy { min-width: 0; }
.listo-cohost-invite-copy > strong,
.listo-cohost-invite-copy > span { display: block; }
.listo-cohost-invite-copy > strong { font-size: 14px; line-height: 1.3; }
.listo-cohost-invite-copy > span { margin-top: 2px; color: var(--ink-muted); font-size: 12px; }
.listo-cohost-invite-card .listo-cohost-person-badges { margin-top: 6px; }
.listo-cohost-invite-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
}
.listo-cohost-invite-actions .listo-btn { min-height: 40px; justify-content: center; }
.listo-cohost-invite-card .listo-field-error { grid-column: 1 / -1; }

.listo-cohost-money-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.listo-cohost-money-stat {
  min-height: 86px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}
.listo-cohost-money-stat span { display: block; color: var(--ink-muted); font-size: 11px; line-height: 1.3; }
.listo-cohost-money-stat strong { display: block; margin-top: 5px; font-size: 17px; }
.listo-cohost-money-stat--received strong { color: #19704d; }
.listo-cohost-subsection { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.listo-cohost-subsection-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.listo-cohost-subsection-head h3 { margin: 0; font-size: 14px; }
.listo-cohost-remittance-item,
.listo-cohost-payment-item {
  display: grid;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.listo-cohost-remittance-item:last-child,
.listo-cohost-payment-item:last-child { border-bottom: 0; }
.listo-cohost-remittance-item > div,
.listo-cohost-payment-item > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.listo-cohost-remittance-item strong,
.listo-cohost-payment-item strong { font-size: 12px; }
.listo-cohost-remittance-item div:first-child span,
.listo-cohost-payment-item div:first-child span { color: var(--ink-muted); font-size: 12px; }
.listo-cohost-remittance-item .listo-status-badge,
.listo-cohost-payment-item .listo-status-badge { font-size: 11px; }
.listo-cohost-remittance-item .listo-btn,
.listo-cohost-payment-item .listo-btn { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.listo-cohost-payment-person + .listo-cohost-payment-person { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.listo-cohost-payment-person__head { display: flex; align-items: center; gap: 9px; }
.listo-cohost-payment-person__head .listo-cohost-avatar { width: 34px; height: 34px; flex-basis: 34px; }
.listo-cohost-payment-person__head strong,
.listo-cohost-payment-person__head span { display: block; }
.listo-cohost-payment-person__head strong { font-size: 13px; }
.listo-cohost-payment-person__head span { color: var(--ink-muted); font-size: 11px; margin-top: 1px; }
.listo-cohost-payment-line { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 12px; }
.listo-cohost-payment-line strong { font-size: 13px; }

@media (max-width: 1020px) {
  .listo-cohost-layout { grid-template-columns: minmax(0, 1fr); }
  .listo-cohost-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .listo-cohost-sidebar .listo-cohost-page-section { margin-bottom: 0; }
}
@media (max-width: 760px) {
  .listo-cohost-hero { align-items: flex-start; }
  .listo-cohost-hero__title h1 { font-size: 24px; }
  .listo-cohost-hero .listo-btn { flex: 0 0 auto; }
  .listo-cohost-stats { grid-template-columns: 1fr 1fr; }
  .listo-cohost-sidebar { grid-template-columns: 1fr; }
  .listo-cohost-page .listo-cohost-page-section { padding: 16px; }
  .listo-cohost-management-toolbar { grid-template-columns: 1fr; }
  .listo-cohost-listing-thumb { width: 58px; height: 50px; flex-basis: 58px; }
  .listo-cohost-management-row { padding: 13px; gap: 10px; }
  .listo-cohost-management-action .listo-btn { min-width: 104px; }
}
@media (max-width: 520px) {
  .listo-cohost-hero { gap: 12px; }
  .listo-cohost-hero__title { gap: 10px; }
  .listo-cohost-hero__title h1 { font-size: 22px; }
  .listo-cohost-hero__title p { font-size: 13px; }
  .listo-cohost-hero .listo-btn { min-height: 42px; padding: 0 12px; font-size: 13px; }
  .listo-cohost-stats { gap: 8px; }
  .listo-cohost-stat { min-height: 60px; padding: 10px 11px; gap: 6px; }
  .listo-cohost-stat strong { font-size: 19px; }
  .listo-cohost-stat span { font-size: 11px; line-height: 1.2; }
  .listo-cohost-section-head h2 { font-size: 18px; }
  .listo-cohost-management-listing { align-items: flex-start; }
  .listo-cohost-management-action .listo-btn { min-width: 0; padding: 0 11px; font-size: 12px; }
  .listo-cohost-listing-copy strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .listo-cohost-meta-line { gap: 5px 7px; }
  .listo-cohost-person-card { grid-template-columns: auto minmax(0, 1fr) auto !important; padding: 10px; }
  .listo-cohost-person-main > span { font-size: 11px; }
  .listo-cohost-invite-form__grid { grid-template-columns: 1fr; }
  .listo-cohost-edit-form { grid-column: 1 / -1; }
  .listo-cohost-edit-form__grid { grid-template-columns: 1fr; }
  .listo-cohost-edit-actions { width: 100%; }
  .listo-cohost-edit-actions .listo-btn { flex: 1 1 0; min-width: 0; }
  .listo-cohost-money-grid { gap: 7px; }
  .listo-cohost-money-stat { min-height: 78px; padding: 10px; }
  .listo-cohost-money-stat strong { font-size: 16px; }
  .listo-cohost-invite-actions { grid-template-columns: 1fr 1fr; }
}


/* ========================================================================== 
   NEXT304 — Shared Host account page shell
   Cross-page geometry is now a hard UI contract for Host mode. The title
   row is intentionally clean: icon + title only. Page actions/content begin
   below it so navigation between Host pages never appears to shift.
   ========================================================================== */
.listo-host-account-page {
  max-width: 1200px !important;
}
.listo-host-account-page > .listo-page-title-row {
  margin-bottom: 0 !important;
}
.listo-host-account-page > .listo-page-title-row > h1 {
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}
.listo-host-account-page > .listo-page-title-subtitle {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}
.listo-my-listings-page__actions,
.listo-cohost-page__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 18px 0 22px;
}
.listo-my-listings-page__add,
.listo-cohost-page-invite {
  min-height: 44px;
}

/* Override the old NEXT301 hero layout: those rules are retained for
   backwards compatibility, but the shared shell above is authoritative. */
.listo-my-listings-page__header,
.listo-cohost-hero {
  display: none !important;
}

@media (max-width: 700px) {
  .listo-host-account-page > .listo-page-title-row > h1 {
    font-size: 22px !important;
  }
  .listo-host-account-page > .listo-page-title-subtitle {
    margin-top: 6px;
    font-size: 12px;
  }
  .listo-my-listings-page__actions,
  .listo-cohost-page__actions {
    justify-content: flex-start;
    margin: 14px 0 18px;
  }
  .listo-my-listings-page__add,
  .listo-cohost-page-invite {
    min-height: 40px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .listo-host-account-page > .listo-page-title-row {
    gap: 10px;
  }
  .listo-host-account-page > .listo-page-title-subtitle {
    font-size: 12px;
  }
}


/* ========================================================================== 
   NEXT305 — Host shell width + action-button normalization
   The Host account canvas is enforced from the actual Host-mode body state,
   so every Host template uses the same desktop/mobile page width even when a
   page has an older, page-specific max-width rule. Top-level page actions are
   intentionally compact so labels remain fully contained and visually crisp.
   ========================================================================== */
body[data-listo-mode="host"] .listo-main > .listo-container {
  width: 100%;
  max-width: 1200px !important;
  box-sizing: border-box;
}

/* One title geometry for every Host-mode page. Page-specific title sizes or
   widths must not change the navigation rhythm. */
body[data-listo-mode="host"] .listo-main > .listo-container > .listo-page-title-row {
  width: 100%;
  box-sizing: border-box;
}
body[data-listo-mode="host"] .listo-main > .listo-container > .listo-page-title-row > h1,
body[data-listo-mode="host"] .listo-main > .listo-container > .listo-page-title-row .listo-inbox__heading {
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* Listings + Co-hosts: top actions belong below the title and should size to
   their label rather than inherit a large generic button footprint. */
.listo-my-listings-page__actions,
.listo-cohost-page__actions {
  width: 100%;
  box-sizing: border-box;
}
.listo-my-listings-page__actions .listo-btn,
.listo-cohost-page__actions .listo-btn {
  width: auto;
  max-width: 100%;
  min-height: 38px;
  height: 38px;
  padding: 8px 14px;
  gap: 6px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}
.listo-my-listings-page__actions .listo-btn svg,
.listo-cohost-page__actions .listo-btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

/* Compact property-management controls inside Co-hosts. */
.listo-cohost-management-action .listo-btn {
  min-height: 36px;
  height: 36px;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 12.5px;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-main > .listo-container > .listo-page-title-row > h1,
  body[data-listo-mode="host"] .listo-main > .listo-container > .listo-page-title-row .listo-inbox__heading {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }

  .listo-my-listings-page__actions .listo-btn,
  .listo-cohost-page__actions .listo-btn {
    min-height: 36px;
    height: 36px;
    padding: 7px 12px;
    border-radius: 9px;
    font-size: 12.5px;
  }

  .listo-cohost-management-action .listo-btn {
    min-height: 34px;
    height: 34px;
    padding: 6px 10px;
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  .listo-my-listings-page__actions .listo-btn,
  .listo-cohost-page__actions .listo-btn {
    min-height: 34px;
    height: 34px;
    padding: 6px 10px;
    font-size: 12px;
  }
}


/* ==========================================================================
   NEXT306 — Host Payouts app-style redesign
   Presentation only. Existing payout field IDs/AJAX selectors are preserved.
   ========================================================================== */
.listo-payouts-page { max-width: 1200px; }
.listo-payouts-page .listo-page-intro {
  margin: -8px 0 24px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.55;
}
.listo-payout-setup-status {
  display:flex;
  align-items:center;
  gap:13px;
  width:100%;
  padding:16px 18px;
  margin:0 0 22px;
  border:1px solid #F1D39A;
  border-radius:16px;
  background:#FFF9EC;
  color:#7A4D00;
}
.listo-payout-setup-status.is-ready {
  border-color:#BFE8D0;
  background:#F2FBF6;
  color:#146C43;
}
.listo-payout-setup-status__icon {
  width:38px;
  height:38px;
  min-width:38px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#FFE8B8;
}
.listo-payout-setup-status.is-ready .listo-payout-setup-status__icon { background:#D8F4E3; }
.listo-payout-setup-status__icon svg { width:19px; height:19px; }
.listo-payout-setup-status__icon-alert { display:block; }
.listo-payout-setup-status__icon-check { display:none; }
.listo-payout-setup-status.is-ready .listo-payout-setup-status__icon-alert { display:none; }
.listo-payout-setup-status.is-ready .listo-payout-setup-status__icon-check { display:block; }
.listo-payout-setup-status__copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.listo-payout-setup-status__title { font-size:14px; line-height:1.3; }
.listo-payout-setup-status__message { font-size:13px; line-height:1.45; color:inherit; opacity:.9; }

.listo-payout-config-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}
.listo-payout-section-card,
.listo-payout-details-card {
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 3px 12px rgba(26,26,26,.035);
}
.listo-payout-section-card { padding:20px; }
.listo-payout-details-card { margin-top:18px; padding:20px; }
.listo-payout-section-card__header { display:flex; justify-content:space-between; gap:16px; margin-bottom:18px; }
.listo-payout-section-card h2,
.listo-payout-details-card h2,
.listo-payout-history h2 {
  margin:0;
  font-size:18px;
  line-height:1.3;
  font-weight:700;
}
.listo-payout-section-card__header .listo-caption,
.listo-payout-details-card .listo-caption,
.listo-payout-history__header .listo-caption { margin:4px 0 0; }

.listo-payout-method-summary {
  padding:15px;
  border:1px solid #D9EAFB;
  border-radius:14px;
  background:#F7FBFF;
}
.listo-payout-method-summary__top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.listo-payout-eyebrow { display:block; margin-bottom:3px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:#6B7D91; }
.listo-payout-method-summary__top strong { display:block; font-size:16px; line-height:1.35; }
.listo-status-pill {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
.listo-status-pill--success { color:#176B43; background:#DDF5E7; }
.listo-payout-method-summary__details {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid #DFEAF4;
}
.listo-payout-method-summary__details div { min-width:0; }
.listo-payout-method-summary__details span,
.listo-payout-details-grid span,
.listo-payout-history-item > div > span {
  display:block;
  font-size:11px;
  color:var(--ink-muted);
  margin-bottom:3px;
}
.listo-payout-method-summary__details strong { display:block; font-size:13px; word-break:break-word; }
.listo-payout-method-form { display:grid; gap:14px; }
.listo-payout-section-card .listo-field { margin:0; }
.listo-payout-section-card .listo-field label { margin-bottom:6px; }
.listo-payout-section-card input[type="text"],
.listo-payout-section-card select { width:100%; min-height:44px; }
.listo-payout-section-card__actions { display:flex; align-items:center; gap:8px; margin-top:16px; flex-wrap:wrap; }
.listo-payout-section-card__actions .listo-btn { width:auto; min-height:38px; padding:9px 13px; font-size:13px; line-height:1; }
.listo-payout-status-text { min-height:18px; margin:10px 0 0; }

.listo-payout-schedule-options { display:grid; gap:10px; }
.listo-payout-schedule-option {
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.listo-payout-schedule-option:hover { border-color:#BCD9F5; }
.listo-payout-schedule-option.is-selected {
  border-color:#9DCCF6;
  background:#F7FBFF;
  box-shadow:0 0 0 2px rgba(33,150,243,.05);
}
.listo-payout-schedule-option input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.listo-payout-schedule-option__indicator {
  width:19px;
  height:19px;
  min-width:19px;
  margin-top:1px;
  border:2px solid #98A2B3;
  border-radius:50%;
  position:relative;
}
.listo-payout-schedule-option.is-selected .listo-payout-schedule-option__indicator { border-color:var(--listo-green); }
.listo-payout-schedule-option.is-selected .listo-payout-schedule-option__indicator::after {
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:var(--listo-green);
}
.listo-payout-schedule-option__copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.listo-payout-schedule-option__copy strong { font-size:14px; line-height:1.35; }
.listo-payout-schedule-option__copy span { font-size:13px; color:var(--ink); line-height:1.45; }
.listo-payout-schedule-option__copy small { font-size:11px; color:var(--ink-muted); line-height:1.4; }
.listo-payout-schedule-option:has(input:disabled) { cursor:default; }
.listo-payout-schedule-option:has(input:disabled) .listo-payout-schedule-option__copy { opacity:.96; }

.listo-payout-details-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px, 420px); gap:24px; align-items:center; }
.listo-payout-details-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.listo-payout-details-grid > div {
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-alt);
}
.listo-payout-details-grid strong { display:block; font-size:16px; line-height:1.25; }

.listo-payout-history { margin-top:28px; }
.listo-payout-history__header { margin-bottom:12px; }
.listo-payout-history-table { overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.listo-payout-history-table__head,
.listo-payout-history-item {
  display:grid;
  grid-template-columns:minmax(150px,1.05fr) minmax(220px,1.7fr) minmax(110px,.7fr) minmax(120px,.8fr);
  align-items:center;
  gap:18px;
}
.listo-payout-history-table__head {
  min-height:45px;
  padding:0 18px;
  background:#F8FAFA;
  border-bottom:1px solid var(--border);
  color:#667085;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.listo-payout-history-table__body { display:grid; }
.listo-payout-history-item {
  min-height:72px;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.listo-payout-history-item:last-child { border-bottom:0; }
.listo-payout-history-item strong { display:block; font-size:13px; line-height:1.4; word-break:break-word; }
.listo-payout-history-item__amount strong { font-size:15px; }
.listo-payout-empty-state {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:210px;
  padding:28px 18px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
}
.listo-payout-empty-state__icon {
  width:46px;
  height:46px;
  margin-bottom:10px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#64748B;
  background:#F1F5F9;
}
.listo-payout-empty-state__icon svg { width:23px; height:23px; }
.listo-payout-empty-state > strong { font-size:15px; }
.listo-payout-empty-state .listo-caption { margin:4px 0 0; }

@media (max-width: 900px) {
  .listo-payout-config-grid { grid-template-columns:1fr; }
  .listo-payout-details-card { grid-template-columns:1fr; }
}

@media (max-width: 700px) {
  .listo-payouts-page .listo-page-intro { margin:-5px 0 18px; font-size:13px; }
  .listo-payout-setup-status { margin-bottom:16px; padding:14px; border-radius:14px; }
  .listo-payout-setup-status__icon { width:34px; height:34px; min-width:34px; border-radius:10px; }
  .listo-payout-setup-status__icon svg { width:17px; height:17px; }
  .listo-payout-setup-status__title { font-size:13px; }
  .listo-payout-setup-status__message { font-size:12px; }
  .listo-payout-config-grid { gap:14px; }
  .listo-payout-section-card, .listo-payout-details-card { padding:16px; border-radius:14px; }
  .listo-payout-section-card h2, .listo-payout-details-card h2, .listo-payout-history h2 { font-size:17px; }
  .listo-payout-section-card__header { margin-bottom:15px; }
  .listo-payout-method-summary__details { grid-template-columns:1fr; gap:10px; }
  .listo-payout-section-card__actions { margin-top:14px; }
  .listo-payout-section-card__actions .listo-btn { min-height:36px; padding:8px 12px; font-size:12px; }
  .listo-payout-details-card { margin-top:14px; gap:14px; }
  .listo-payout-details-grid { grid-template-columns:1fr 1fr; }
  .listo-payout-details-grid > div { padding:11px 12px; }
  .listo-payout-details-grid strong { font-size:14px; }
  .listo-payout-history { margin-top:22px; }
  .listo-payout-history-table { border:0; background:transparent; overflow:visible; }
  .listo-payout-history-table__head { display:none; }
  .listo-payout-history-table__body { gap:10px; }
  .listo-payout-history-item {
    grid-template-columns:1fr auto;
    gap:10px 16px;
    padding:14px;
    min-height:0;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
    box-shadow:0 2px 8px rgba(26,26,26,.03);
  }
  .listo-payout-history-item__reference { grid-column:1 / 2; }
  .listo-payout-history-item__amount { grid-column:2 / 3; grid-row:1 / 3; align-self:center; text-align:right; }
  .listo-payout-history-item__listing { grid-column:1 / 2; }
  .listo-payout-history-item__sent { grid-column:1 / 2; }
  .listo-payout-history-item strong { font-size:12px; }
  .listo-payout-history-item__amount strong { font-size:16px; }
  .listo-payout-empty-state { min-height:180px; border-radius:14px; }
}

@media (max-width: 380px) {
  .listo-payout-details-grid { grid-template-columns:1fr; }
  .listo-payout-method-summary__top { align-items:flex-start; }
  .listo-payout-method-summary__top .listo-status-pill { flex-shrink:0; }
}

/* ========================================================================== 
   NEXT307 — Host page title/description rhythm standard
   Cross-page Host UI contract:
   - Every Host top-level account page uses the same 1200px content canvas.
   - Every page-title row uses the same icon/title geometry and typography.
   - The title row contains only the icon + title.
   - When a page has a description, it starts BELOW the title with deliberate
     vertical separation. No page controls belong beside the title.
   ========================================================================== */
body[data-listo-mode="host"] .listo-main > .listo-container {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Apply the title geometry to nested Host page headers too (Dashboard,
   Calendar & Pricing, External Calendars, Referral Center, etc.). */
body[data-listo-mode="host"] .listo-main .listo-page-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 24px !important;
}
body[data-listo-mode="host"] .listo-main .listo-page-title-row > h1,
body[data-listo-mode="host"] .listo-main .listo-page-title-row .listo-inbox__heading {
  margin: 0 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
body[data-listo-mode="host"] .listo-main .listo-page-title-row .listo-page-title__icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  flex: 0 0 48px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}
body[data-listo-mode="host"] .listo-main .listo-page-title-row .listo-page-title__icon svg {
  width: 23px !important;
  height: 23px !important;
}

/* Descriptions belong below the title, never alongside it. The extra top
   margin deliberately separates title from supporting copy. The bottom
   margin reserves a second rhythm step before the page's main content. */
body[data-listo-mode="host"] .listo-main .listo-page-title-row + .listo-page-title-subtitle,
body[data-listo-mode="host"] .listo-main .listo-page-title-row + .listo-page-intro,
body[data-listo-mode="host"] .listo-main .listo-page-title-row + .listo-caption {
  margin-top: 18px !important;
  margin-bottom: 26px !important;
  line-height: 1.5 !important;
}

/* Known Host descriptions that already have page-specific inline/legacy
   rules. Keep their content, but normalize their vertical rhythm. */
body[data-listo-mode="host"] .listo-main .listo-page-title-row + p.listo-caption,
body[data-listo-mode="host"] .listo-main .listo-page-title-row + p.listo-page-intro {
  max-width: 760px;
}

/* Pages without a description keep the same gap below the title before the
   first functional section. */
body[data-listo-mode="host"] .listo-main .listo-page-title-row:not(:has(+ .listo-page-title-subtitle)):not(:has(+ .listo-page-intro)):not(:has(+ .listo-caption)) {
  margin-bottom: 24px !important;
}

/* Dashboard: controls are functional page content, not title-row content.
   Keep the existing controls and selectors, but move the whole control group
   below the clean title row at every viewport width. */
body[data-listo-mode="host"] .listo-dashboard-page .listo-earnings__header {
  display: block !important;
  margin-bottom: 22px !important;
}
body[data-listo-mode="host"] .listo-dashboard-page .listo-earnings__header-controls {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 18px;
}

@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-main .listo-page-title-row {
    gap: 10px;
    margin-bottom: 20px !important;
  }
  body[data-listo-mode="host"] .listo-main .listo-page-title-row > h1,
  body[data-listo-mode="host"] .listo-main .listo-page-title-row .listo-inbox__heading {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }
  body[data-listo-mode="host"] .listo-main .listo-page-title-row .listo-page-title__icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex-basis: 40px !important;
    border-radius: 12px !important;
  }
  body[data-listo-mode="host"] .listo-main .listo-page-title-row .listo-page-title__icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  body[data-listo-mode="host"] .listo-main .listo-page-title-row + .listo-page-title-subtitle,
  body[data-listo-mode="host"] .listo-main .listo-page-title-row + .listo-page-intro,
  body[data-listo-mode="host"] .listo-main .listo-page-title-row + .listo-caption {
    margin-top: 14px !important;
    margin-bottom: 22px !important;
  }
  body[data-listo-mode="host"] .listo-dashboard-page .listo-earnings__header-controls {
    margin-top: 14px;
  }
}

/* Description-bearing title rows use the description's own deliberate top
   spacing; do not stack that spacing on top of the row's normal bottom gap. */
body[data-listo-mode="host"] .listo-main .listo-page-title-row:has(+ .listo-page-title-subtitle),
body[data-listo-mode="host"] .listo-main .listo-page-title-row:has(+ .listo-page-intro),
body[data-listo-mode="host"] .listo-main .listo-page-title-row:has(+ .listo-caption) {
  margin-bottom: 0 !important;
}

/* ========================================================================== 
   NEXT308 — Host page description typography standard
   All descriptions immediately following a Host page title use one shared
   font size so moving between Host pages does not create a typography shift.
   ========================================================================== */
body[data-listo-mode="host"] .listo-main .listo-page-title-row + .listo-page-title-subtitle,
body[data-listo-mode="host"] .listo-main .listo-page-title-row + .listo-page-intro,
body[data-listo-mode="host"] .listo-main .listo-page-title-row + .listo-caption {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-main .listo-page-title-row + .listo-page-title-subtitle,
  body[data-listo-mode="host"] .listo-main .listo-page-title-row + .listo-page-intro,
  body[data-listo-mode="host"] .listo-main .listo-page-title-row + .listo-caption {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

/* ==========================================================================\n   NEXT309 — Host Inbox app-style workspace\n   UI only. Existing messaging, inquiry, offer, attachment, booking and\n   notification workflows remain wired to their existing selectors/actions.\n   ========================================================================== */\n\nbody[data-listo-mode="host"] .listo-inbox-page {\n  width: 100% !important;\n  max-width: 1200px !important;\n}\nbody[data-listo-mode="host"] .listo-inbox-page__description {\n  margin: 18px 0 26px !important;\n  max-width: 760px;\n  font-size: 14px !important;\n  line-height: 1.5 !important;\n  color: var(--ink-muted);\n}\n\nbody[data-listo-mode="host"] .listo-inbox--host {\n  grid-template-columns: 300px minmax(0, 1fr) 300px;\n  width: 100%;\n  height: min(720px, calc(100dvh - 270px));\n  min-height: 560px;\n  margin: 0;\n  border: 1px solid var(--border);\n  border-radius: 16px;\n  overflow: hidden;\n  box-shadow: 0 3px 16px rgba(24,39,75,.05);\n}\n\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list {\n  background: #FBFCFE;\n}\nbody[data-listo-mode="host"] .listo-inbox__toolbar--host {\n  padding: 14px;\n  border-bottom: 1px solid var(--border);\n  background: var(--surface);\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\nbody[data-listo-mode="host"] .listo-inbox__toolbar--host .listo-inbox__search-wrap {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  min-height: 40px;\n  padding: 0 12px;\n  border: 1px solid var(--border);\n  border-radius: 10px;\n  background: var(--surface);\n}\nbody[data-listo-mode="host"] .listo-inbox__toolbar--host .listo-inbox__search {\n  width: 100%;\n  min-height: 38px;\n  padding: 8px 0;\n  border: 0;\n  box-shadow: none;\n  outline: none;\n  font-size: 13px;\n  background: transparent;\n}\nbody[data-listo-mode="host"] .listo-inbox__toolbar--host .listo-inbox__search-icon {\n  width: 17px;\n  height: 17px;\n  flex: 0 0 17px;\n  color: var(--ink-muted);\n}\nbody[data-listo-mode="host"] .listo-inbox__filters--host {\n  display: flex;\n  gap: 5px;\n  margin-top: 10px;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\nbody[data-listo-mode="host"] .listo-inbox__filters--host::-webkit-scrollbar { display: none; }\nbody[data-listo-mode="host"] .listo-inbox__filters--host .listo-inbox__filter {\n  min-height: 30px;\n  padding: 5px 10px;\n  border: 1px solid transparent;\n  border-radius: 999px;\n  background: transparent;\n  color: var(--ink-muted);\n  font-size: 11.5px;\n  font-weight: 700;\n  line-height: 1;\n  white-space: nowrap;\n}\nbody[data-listo-mode="host"] .listo-inbox__filters--host .listo-inbox__filter:hover {\n  background: var(--surface-alt);\n  color: var(--ink);\n}\nbody[data-listo-mode="host"] .listo-inbox__filters--host .listo-inbox__filter.is-active {\n  background: var(--listo-green-tint);\n  color: var(--listo-green-dark);\n  border-color: #CFE7FC;\n}\n\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item {\n  padding: 12px 14px;\n  gap: 10px;\n  border-left-width: 3px;\n}\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__photo {\n  width: 42px;\n  height: 42px;\n  font-size: 15px;\n}\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__title {\n  font-size: 13.5px;\n}\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag {\n  margin: 3px 0 3px;\n  padding: 0;\n  border-radius: 0;\n  background: transparent;\n  color: #637083;\n  font-size: 11.5px;\n  font-weight: 600;\n}\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag svg {\n  color: #8A97A8;\n}\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__context {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\nbody[data-listo-mode="host"] .listo-inbox-context-badge {\n  display: inline-flex;\n  align-items: center;\n  min-height: 20px;\n  padding: 3px 7px;\n  border-radius: 999px;\n  font-size: 9.5px;\n  line-height: 1;\n  font-weight: 800;\n  letter-spacing: .02em;\n  white-space: nowrap;\n}\nbody[data-listo-mode="host"] .listo-inbox-context-badge--reservation {\n  color: #155E9C;\n  background: #EAF5FF;\n}\nbody[data-listo-mode="host"] .listo-inbox-context-badge--inquiry {\n  color: #8A5B00;\n  background: #FFF5D6;\n}\nbody[data-listo-mode="host"] .listo-inbox-context-badge--conversation {\n  color: #5E6674;\n  background: #F1F3F5;\n}\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__preview {\n  flex: 1;\n  min-width: 0;\n  font-size: 12px;\n}\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item.is-active {\n  background: var(--listo-green-tint);\n  border-left-color: var(--listo-green);\n}\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item.is-unread .listo-inbox-thread-item__title {\n  color: var(--ink);\n}\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__new {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--listo-green);\n  font-size: 0;\n  margin-top: 6px;\n}\n\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header {\n  min-height: 68px;\n  padding: 12px 18px;\n}\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-name {\n  font-size: 14px;\n}\nbody[data-listo-mode="host"] .listo-inbox__thread-header-subrow {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  min-width: 0;\n  margin-top: 2px;\n}\nbody[data-listo-mode="host"] .listo-inbox__thread-header-subrow .listo-caption {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\nbody[data-listo-mode="host"] .listo-inbox__thread-header-subrow .listo-inbox-context-badge {\n  display: inline-flex;\n  flex: 0 0 auto;\n  min-height: 19px;\n  font-size: 9px;\n}\nbody[data-listo-mode="host"] .listo-inbox-info-btn {\n  width: 36px;\n  height: 36px;\n}\n\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar {\n  padding: 16px;\n  background: #FBFCFE;\n  border-left: 1px solid var(--border);\n}\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__panel {\n  padding: 0 0 16px;\n  margin: 0 0 16px;\n  border-bottom: 1px solid var(--border);\n}\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__panel:last-child {\n  padding-bottom: 4px;\n  margin-bottom: 0;\n  border-bottom: 0;\n}\nbody[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__label {\n  margin-bottom: 8px;\n  font-size: 10px;\n  letter-spacing: .06em;\n}\nbody[data-listo-mode="host"] .listo-inbox-sidebar__booking-head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 10px;\n}\nbody[data-listo-mode="host"] .listo-inbox-sidebar__status-pill {\n  display: inline-flex;\n  align-items: center;\n  min-height: 22px;\n  padding: 4px 8px;\n  border-radius: 999px;\n  font-size: 9.5px;\n  font-weight: 800;\n  line-height: 1;\n  white-space: nowrap;\n}\nbody[data-listo-mode="host"] .listo-inbox-sidebar__status-pill--booking {\n  background: #EAF5FF;\n  color: #155E9C;\n}\nbody[data-listo-mode="host"] .listo-inbox-sidebar__facts li {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 9px 0;\n}\nbody[data-listo-mode="host"] .listo-inbox-sidebar__facts li span {\n  color: var(--ink-muted);\n}\nbody[data-listo-mode="host"] .listo-inbox-sidebar__facts li strong {\n  text-align: right;\n  font-weight: 600;\n}\nbody[data-listo-mode="host"] .listo-inbox-sidebar__inquiry-total {\n  font-size: 23px;\n  font-weight: 800;\n  line-height: 1.15;\n  margin-bottom: 5px;\n}\nbody[data-listo-mode="host"] .listo-inbox-sidebar__inquiry-meta {\n  color: var(--ink-muted);\n  font-size: 12px;\n  line-height: 1.5;\n}\nbody[data-listo-mode="host"] .listo-inbox-sidebar__actions {\n  margin-top: 14px;\n  gap: 7px;\n}\nbody[data-listo-mode="host"] .listo-inbox-sidebar__actions .listo-btn {\n  min-height: 36px;\n  padding: 8px 11px;\n  border-radius: 9px;\n  font-size: 12px;\n  line-height: 1.1;\n}\nbody[data-listo-mode="host"] #listo-sidebar-preapprove-btn {\n  background: var(--listo-green);\n  border-color: var(--listo-green);\n  color: #fff;\n}\nbody[data-listo-mode="host"] #listo-sidebar-offer-btn {\n  color: var(--listo-green-dark);\n  border-color: #9DCCF6;\n  background: #F7FBFF;\n}\nbody[data-listo-mode="host"] #listo-sidebar-decline-btn {\n  min-height: 32px;\n  color: var(--error) !important;\n  background: transparent;\n  border-color: transparent;\n}\nbody[data-listo-mode="host"] .listo-inbox-sidebar__view-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: auto;\n  min-height: 36px;\n  padding: 8px 12px;\n  margin-top: 10px;\n  border-radius: 9px;\n  font-size: 12px;\n}\nbody[data-listo-mode="host"] #listo-sidebar-offer-form {\n  margin-top: 8px !important;\n  padding: 12px;\n  border: 1px solid #D9E9F8;\n  border-radius: 12px;\n  background: #F8FBFE;\n}\nbody[data-listo-mode="host"] #listo-sidebar-offer-form input {\n  min-height: 42px;\n  margin-top: 4px;\n  border-radius: 9px;\n  background: #fff;\n}\nbody[data-listo-mode="host"] .listo-inbox-sidebar #listo-inbox-sidebar-content .listo-inbox-sidebar__guest-row {\n  padding: 2px 0 8px;\n}\nbody[data-listo-mode="host"] .listo-inbox-sidebar #listo-inbox-sidebar-content .listo-inbox-sidebar__title {\n  font-size: 15px;\n}\nbody[data-listo-mode="host"] .listo-inbox-sidebar #listo-inbox-sidebar-content .listo-single-host__avatar {\n  width: 40px;\n  height: 40px;\n  min-width: 40px;\n}\n\n@media (max-width: 1100px) and (min-width: 801px) {\n  body[data-listo-mode="host"] .listo-inbox--host {\n    grid-template-columns: 285px minmax(0, 1fr) 270px;\n  }\n}\n\n@media (max-width: 800px) {\n  body[data-listo-mode="host"] .listo-inbox-page__description {\n    margin-top: 14px !important;\n    margin-bottom: 20px !important;\n    font-size: 13px !important;\n  }\n  body[data-listo-mode="host"] .listo-inbox--host {\n    display: grid;\n    grid-template-columns: 1fr;\n    height: calc(100dvh - 184px);\n    min-height: 500px;\n    border-radius: 14px;\n  }\n  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host {\n    padding: 11px 12px 10px;\n  }\n  body[data-listo-mode="host"] .listo-inbox__toolbar--host .listo-inbox__filters--host {\n    margin-top: 8px;\n  }\n  body[data-listo-mode="host"] .listo-inbox__toolbar--host .listo-inbox__filter {\n    min-height: 28px;\n    padding: 5px 9px;\n    font-size: 10.5px;\n  }\n  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item {\n    padding: 11px 12px;\n  }\n  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__photo {\n    width: 40px;\n    height: 40px;\n    font-size: 14px;\n  }\n  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__title {\n    font-size: 13.5px;\n  }\n  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__preview {\n    font-size: 11.5px;\n  }\n  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header {\n    min-height: 60px;\n    padding: 10px 12px;\n  }\n  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-avatar {\n    width: 38px;\n    height: 38px;\n    font-size: 14px;\n  }\n  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-name {\n    font-size: 13.5px;\n  }\n  body[data-listo-mode="host"] .listo-inbox-info-btn {\n    width: 34px;\n    height: 34px;\n  }\n  body[data-listo-mode="host"] .listo-inbox-sidebar {\n    top: auto;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    max-width: none;\n    max-height: 88dvh;\n    border-left: 0;\n    border-top: 1px solid var(--border);\n    border-radius: 20px 20px 0 0;\n    box-shadow: 0 -12px 34px rgba(0,0,0,.16);\n    transform: translateY(100%);\n    transition: transform .2s ease;\n  }\n  body[data-listo-mode="host"] .listo-inbox-sidebar.is-open {\n    transform: translateY(0);\n  }\n  body[data-listo-mode="host"] .listo-inbox-sidebar__mobile-header {\n    min-height: 58px;\n    padding: 10px 14px;\n    border-radius: 20px 20px 0 0;\n  }\n  body[data-listo-mode="host"] .listo-inbox-sidebar__mobile-header strong {\n    font-size: 15px;\n  }\n  body[data-listo-mode="host"] .listo-inbox-sidebar #listo-inbox-sidebar-content {\n    padding: 16px 14px 26px;\n  }\n  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__panel {\n    padding-bottom: 14px;\n    margin-bottom: 14px;\n  }\n}\nCSS

# ensure no accidental invalid token in markup and inspect snippets
php -l template-parts/inbox-content.php
php -l inc/class-listo-host-offers.php
node --check assets/js/inbox.js

/* ==========================================================================
   NEXT310 — Host Cases app-style redesign.
   Presentation only; existing booking/dispute state and outcome logic remain
   the source of truth.
   ========================================================================== */
.listo-cases-page .listo-page-description {
  margin: 22px 0 0;
}
.listo-cases-page .listo-cases-help {
  max-width: 760px;
  margin: 22px 0 18px;
  border: 1px solid #DDE7EF;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.listo-cases-page .listo-cases-help summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  min-height: 38px;
  font-size: 12px;
  font-weight: 700;
  color: #455A64;
}
.listo-cases-page .listo-cases-help summary::-webkit-details-marker { display:none; }
.listo-cases-page .listo-cases-help summary::before {
  content: none;
}
.listo-cases-page .listo-cases-help__chevron {
  margin-left: auto;
  font-size: 20px;
  color: #78909C;
  transition: transform .15s ease;
}
.listo-cases-page .listo-cases-help[open] .listo-cases-help__chevron { transform: rotate(90deg); }
.listo-cases-page .listo-cases-help__body {
  max-width: 720px;
  padding: 0 14px 14px;
  color: #607080;
  font-size: 13px;
  line-height: 1.55;
}
.listo-cases-page .listo-cases-help__body strong { display:block; color:#263238; margin-top:8px; }
.listo-cases-page .listo-cases-help__body p { margin:2px 0 8px; }

.listo-cases-page .listo-cases-summary {
  width: 100%;
  max-width: none;
  margin: 20px 0 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.listo-cases-page .listo-cases-summary__item {
  min-height: 72px;
  background: #fff;
  border: 1px solid #E1EAF1;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.listo-cases-page .listo-cases-summary__item span { font-size:12px; color:#607080; font-weight:700; }
.listo-cases-page .listo-cases-summary__item strong { font-size:24px; line-height:1; color:#263238; }
.listo-cases-page .listo-cases-summary__item--active { border-color:#B9DBF8; background:#F8FCFF; }
.listo-cases-page .listo-cases-summary__item--active span { color:#1976D2; }

.listo-cases-page .listo-cases-toolbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
}
.listo-cases-page .listo-cases-filter-pills { display:flex; gap:7px; flex-wrap:wrap; min-width:0; }
.listo-cases-page .listo-cases-filter-pill {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid #D6E1E9;
  border-radius: 999px;
  background: #fff;
  color: #607080;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.listo-cases-page .listo-cases-filter-pill:hover { border-color:#B8C7D3; color:#263238; }
.listo-cases-page .listo-cases-filter-pill.is-active { background:#2196F3; border-color:#2196F3; color:#fff; }
.listo-cases-page .listo-cases-search {
  flex: 0 0 240px;
  height: 38px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 11px;
  border:1px solid #D6E1E9;
  border-radius:10px;
  background:#fff;
  box-sizing:border-box;
}
.listo-cases-page .listo-cases-search svg { width:17px; height:17px; color:#78909C; flex:0 0 17px; }
.listo-cases-page .listo-cases-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:12px; color:#263238; }
.listo-cases-page .listo-cases-search input::placeholder { color:#94A3AE; }

.listo-cases-page .listo-cases-list { width:100%; max-width:none; margin:0; }
.listo-cases-page .listo-case-card { width:100%; max-width:none; padding:0 !important; margin:0 0 12px; overflow:hidden; border-radius:16px; border:1px solid #E1EAF1; background:#fff; }
.listo-cases-page .listo-case-card__summary { list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:18px 20px; }
.listo-cases-page .listo-case-card__summary::-webkit-details-marker { display:none; }
.listo-cases-page .listo-case-card__main { min-width:0; flex:1; }
.listo-cases-page .listo-case-card__topline { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:9px; }
.listo-cases-page .listo-case-status { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 9px; font-size:10px; font-weight:800; letter-spacing:.035em; text-transform:uppercase; }
.listo-cases-page .listo-case-status__dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.listo-cases-page .listo-case-status.is-open { background:#FFF4E8; color:#B45309; }
.listo-cases-page .listo-case-status.is-resolved { background:#EAF7EF; color:#15803D; }
.listo-cases-page .listo-case-card__reference { color:#8A99A6; font-size:11px; font-weight:700; margin-left:auto; }
.listo-cases-page .listo-complaint-card__title { font-size:16px; line-height:1.35; font-weight:750; color:#263238; }
.listo-cases-page .listo-case-card__dates { margin-top:4px; color:#607080; font-size:13px; }
.listo-cases-page .listo-case-card__reason { margin-top:12px; font-size:13px; color:#263238; }
.listo-cases-page .listo-case-card__reason span { display:block; margin-bottom:3px; color:#8A99A6; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.045em; }
.listo-cases-page .listo-case-card__meta-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:12px; }
.listo-cases-page .listo-case-card__meta-grid > div { min-width:0; }
.listo-cases-page .listo-case-card__meta-grid span,
.listo-cases-page .listo-case-card__detail-label { display:block; margin-bottom:3px; color:#8A99A6; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.045em; }
.listo-cases-page .listo-case-card__meta-grid strong { font-size:13px; color:#263238; }
.listo-cases-page .listo-case-card__chevron { flex:0 0 auto; margin-top:3px; color:#607D8B; font-size:25px; line-height:1; transition:transform .15s ease; }
.listo-cases-page .listo-case-card[open] .listo-case-card__chevron { transform:rotate(90deg); }
.listo-cases-page .listo-case-card__details { border-top:1px solid #E8EEF3; padding:16px 20px 18px; background:#FBFCFD; }
.listo-cases-page .listo-case-card__details-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.listo-cases-page .listo-case-card__details-grid > div { min-width:0; }
.listo-cases-page .listo-case-card__details-grid strong { display:block; color:#263238; font-size:13px; }
.listo-cases-page .listo-case-progress { display:flex; gap:0; margin:16px 0 8px; }
.listo-cases-page .listo-case-progress__step { position:relative; flex:1; padding:22px 8px 0 0; font-size:11px; color:#93A1AC; }
.listo-cases-page .listo-case-progress__step:not(:last-child)::after { content:""; position:absolute; top:5px; left:10px; right:0; height:2px; background:#DCE5EB; }
.listo-cases-page .listo-case-progress__step i { position:absolute; top:0; left:0; width:11px; height:11px; border-radius:50%; border:2px solid #CBD7DF; background:#fff; z-index:1; box-sizing:border-box; }
.listo-cases-page .listo-case-progress__step.is-complete,
.listo-cases-page .listo-case-progress__step.is-current { color:#263238; font-weight:700; }
.listo-cases-page .listo-case-progress__step.is-complete i { background:#2196F3; border-color:#2196F3; }
.listo-cases-page .listo-case-progress__step.is-complete:not(:last-child)::after { background:#90CAF9; }
.listo-cases-page .listo-case-progress__step.is-current i { border-color:#2196F3; box-shadow:0 0 0 3px #EAF5FF; }
.listo-cases-page .listo-case-card__note { margin:10px 0 0; }
.listo-cases-page .listo-case-card__actions { display:flex; align-items:center; justify-content:flex-end; margin-top:12px; }
.listo-cases-page .listo-case-card__booking-link { display:inline-flex; align-items:center; gap:7px; color:#1976D2; font-size:12px; font-weight:750; text-decoration:none; }
.listo-cases-page .listo-case-card__booking-link:hover { text-decoration:underline; }
.listo-cases-page .listo-cases-no-results[hidden] { display:none !important; }
.listo-cases-page .listo-cases-no-results { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:150px; padding:24px; margin-top:12px; border:1px dashed #CBD7DF; border-radius:16px; background:#fff; text-align:center; }
.listo-cases-page .listo-cases-no-results strong { color:#263238; font-size:14px; }
.listo-cases-page .listo-cases-no-results span { margin-top:5px; color:#738391; font-size:12px; }
.listo-cases-page .listo-cases-empty { max-width:720px; margin:26px auto 0; }
.listo-cases-page .listo-cases-empty__icon { width:52px; height:52px; border-radius:50%; background:#EAF5FF; color:#1976D2; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:25px; font-weight:800; }

@media (max-width:700px) {
  .listo-cases-page .listo-page-description { margin-top:16px; }
  .listo-cases-page .listo-cases-help { margin:18px 0 14px; max-width:none; }
  .listo-cases-page .listo-cases-summary { grid-template-columns:1fr; gap:8px; margin:18px 0 14px; }
  .listo-cases-page .listo-cases-summary__item { min-height:0; padding:11px 13px; }
  .listo-cases-page .listo-cases-summary__item span { font-size:11px; }
  .listo-cases-page .listo-cases-summary__item strong { font-size:20px; }
  .listo-cases-page .listo-cases-toolbar { flex-direction:column; align-items:stretch; gap:10px; margin-bottom:10px; }
  .listo-cases-page .listo-cases-filter-pills { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
  .listo-cases-page .listo-cases-filter-pills::-webkit-scrollbar { display:none; }
  .listo-cases-page .listo-cases-filter-pill { flex:0 0 auto; min-height:34px; padding:7px 10px; font-size:11px; }
  .listo-cases-page .listo-cases-search { width:100%; flex:0 0 auto; height:38px; }
  .listo-cases-page .listo-case-card { margin-bottom:10px; border-radius:14px; }
  .listo-cases-page .listo-case-card__summary { padding:15px; gap:10px; }
  .listo-cases-page .listo-case-card__reference { margin-left:0; }
  .listo-cases-page .listo-complaint-card__title { font-size:15px; }
  .listo-cases-page .listo-case-card__dates { font-size:12px; }
  .listo-cases-page .listo-case-card__reason { margin-top:10px; font-size:12px; }
  .listo-cases-page .listo-case-card__meta-grid { margin-top:10px; }
  .listo-cases-page .listo-case-card__meta-grid strong { font-size:12px; }
  .listo-cases-page .listo-case-card__details { padding:14px 15px 15px; }
  .listo-cases-page .listo-case-card__details-grid { grid-template-columns:1fr; gap:10px; }
  .listo-cases-page .listo-case-progress { display:block; margin-top:14px; }
  .listo-cases-page .listo-case-progress__step { min-height:31px; padding:0 0 0 24px; font-size:11px; display:flex; align-items:center; }
  .listo-cases-page .listo-case-progress__step:not(:last-child)::after { top:11px; left:5px; right:auto; width:2px; height:100%; }
  .listo-cases-page .listo-case-progress__step i { top:5px; left:0; }
  .listo-cases-page .listo-case-card__actions { justify-content:flex-start; margin-top:11px; }
  .listo-cases-page .listo-cases-empty { margin-top:18px; }
}

/* ========================================================================== 
   NEXT311 — Host Profile app-style redesign
   Uses the shared Host account shell established in NEXT304-NEXT310.
   ========================================================================== */
.listo-host-profile-page {
  width: 100%;
  max-width: 1200px;
}

.listo-host-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 24px;
  align-items: start;
}

.listo-host-profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  box-sizing: border-box;
}

.listo-host-profile-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.listo-host-profile-card__header h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
}

.listo-host-profile-card__header p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.5;
}

.listo-profile-public-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #EAF4FF;
  color: #1769AA;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.listo-host-profile-photo-block {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-alt);
  margin-bottom: 22px;
}

.listo-profile-photo--large {
  width: 112px;
  height: 112px;
  min-width: 112px;
  border-width: 1px;
}

.listo-profile-photo--large #listo-profile-photo-fallback {
  font-size: 40px;
}

.listo-host-profile-photo-block__copy {
  min-width: 0;
}

.listo-host-profile-photo-block__copy strong {
  display: block;
  font-size: 14px;
  line-height: 1.3;
}

.listo-host-profile-photo-block__copy p {
  margin: 4px 0 12px;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.5;
}

.listo-host-profile-photo-block__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.listo-btn--text {
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  min-height: 36px;
  padding: 8px 10px;
}

.listo-btn--text:hover {
  color: var(--ink);
  background: var(--surface-alt);
}

.listo-host-profile-fields {
  display: grid;
  gap: 20px;
}

.listo-field--public-name {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.listo-field-help {
  margin: 7px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.5;
}

.listo-host-profile-fields__section {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--border);
}

.listo-host-profile-fields__section-heading {
  margin-bottom: 14px;
}

.listo-host-profile-fields__section-heading h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

.listo-host-profile-fields__section-heading p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}

.listo-host-profile-fields .listo-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.listo-field--bio textarea {
  min-height: 150px;
  resize: vertical;
}

.listo-field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.listo-field-label-row .listo-char-count {
  margin: 0;
}

.listo-host-profile-save-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.listo-host-profile-save-row .listo-btn {
  min-height: 38px;
  padding: 9px 14px;
  font-size: 13px;
}

.listo-host-profile-save-row .listo-caption {
  margin: 0;
  min-height: 18px;
}

.listo-host-profile-preview {
  position: sticky;
  top: 24px;
}

.listo-host-profile-preview-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  background: var(--surface-alt);
}

.listo-host-profile-preview-card__top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.listo-profile-photo--preview {
  width: 72px;
  height: 72px;
  min-width: 72px;
}

.listo-profile-photo--preview #listo-host-profile-preview-fallback {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink-muted);
}

.listo-host-profile-preview-card__top > div:last-child {
  min-width: 0;
}

.listo-host-profile-preview-card__top strong {
  display: block;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
}

.listo-host-profile-preview-card__top span {
  display: block;
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}

.listo-host-profile-preview-card__bio-wrap {
  padding-top: 18px;
}

.listo-host-profile-preview-card__label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.listo-host-profile-preview-card__bio-wrap p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.listo-host-profile-preview-card__notice {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .listo-host-profile-layout {
    grid-template-columns: 1fr;
  }
  .listo-host-profile-preview {
    position: static;
  }
}

@media (max-width: 700px) {
  .listo-host-profile-card {
    padding: 16px;
    border-radius: 14px;
  }
  .listo-host-profile-card__header {
    margin-bottom: 18px;
    gap: 10px;
  }
  .listo-host-profile-card__header h2 {
    font-size: 17px;
  }
  .listo-host-profile-card__header p {
    font-size: 12px;
  }
  .listo-profile-public-badge {
    min-height: 26px;
    padding: 5px 8px;
    font-size: 10px;
  }
  .listo-host-profile-photo-block {
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
  }
  .listo-profile-photo--large {
    width: 96px;
    height: 96px;
    min-width: 96px;
  }
  .listo-profile-photo--large #listo-profile-photo-fallback {
    font-size: 34px;
  }
  .listo-host-profile-photo-block__copy p {
    margin-bottom: 10px;
    font-size: 12px;
  }
  .listo-host-profile-photo-block__actions .listo-btn {
    min-height: 36px;
    padding: 8px 11px;
    font-size: 12px;
  }
  .listo-host-profile-fields {
    gap: 18px;
  }
  .listo-host-profile-fields .listo-field-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .listo-host-profile-fields__section {
    padding: 16px 0 18px;
  }
  .listo-field-help {
    font-size: 11px;
  }
  .listo-field--bio textarea {
    min-height: 132px;
  }
  .listo-host-profile-save-row {
    display: block;
    margin-top: 20px;
  }
  .listo-host-profile-save-row .listo-btn {
    width: 100%;
    min-height: 40px;
  }
  .listo-host-profile-save-row .listo-caption {
    margin-top: 8px;
  }
  .listo-host-profile-preview-card {
    padding: 16px;
    border-radius: 14px;
  }
  .listo-profile-photo--preview {
    width: 64px;
    height: 64px;
    min-width: 64px;
  }
  .listo-host-profile-preview-card__top strong {
    font-size: 15px;
  }
  .listo-host-profile-preview-card__bio-wrap p {
    font-size: 13px;
  }
}

/* ========================================================================
   NEXT1077 — Host Profile 2.0 refinement
   Presentation/accessibility refinements only. Existing profile data model,
   routes, AJAX actions, photo ownership, and save/edit workflow remain intact.
   ======================================================================== */
.listo-host-profile-page .listo-page-title-row {
  margin-top: 24px;
  margin-bottom: 20px;
}
.listo-host-profile-page .listo-page-title-row > h1 {
  font-size: 24px;
  line-height: 29px;
  font-weight: 600;
  letter-spacing: normal;
}
.listo-host-profile-layout {
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  gap: 20px;
}
.listo-host-profile-card {
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 3px 14px rgba(24,39,75,.035);
}
.listo-host-profile-card__header {
  margin-bottom: 18px;
}
.listo-host-profile-card__header h2 {
  font-size: 17px;
  font-weight: 650;
}
.listo-host-profile-photo-block {
  padding: 16px;
  margin-bottom: 20px;
  border-radius: 14px;
}
.listo-profile-photo--large {
  width: 96px;
  height: 96px;
  min-width: 96px;
}
.listo-profile-photo--large #listo-profile-photo-fallback {
  font-size: 34px;
}
.listo-host-profile-photo-block__actions .listo-btn {
  min-height: 44px;
  padding: 9px 12px;
}
.listo-host-profile-fields {
  gap: 18px;
}
.listo-host-profile-fields__section {
  padding: 16px 0 18px;
}
.listo-host-profile-save-row {
  margin-top: 20px;
}
.listo-host-profile-save-row .listo-btn {
  min-height: 44px;
}
.listo-host-profile-preview {
  top: 20px;
}
.listo-host-profile-preview-card {
  padding: 18px;
  border-radius: 14px;
}

@media (max-width: 800px) {
  .listo-host-profile-page .listo-page-title-row {
    margin-top: 16px;
    margin-bottom: 16px;
  }
  .listo-host-profile-layout {
    grid-template-columns: 1fr;
  }
  .listo-host-profile-preview {
    position: static;
  }
}

@media (max-width: 700px) {
  .listo-host-profile-page {
    padding-bottom: 24px;
  }
  .listo-host-profile-page .listo-page-title-row {
    min-height: 25px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
  .listo-host-profile-page .listo-page-title-row > h1 {
    font-size: 20px;
    line-height: 25px;
    font-weight: 600;
  }
  .listo-host-profile-card {
    padding: 16px;
    border-radius: 14px;
  }
  .listo-host-profile-card__header {
    margin-bottom: 16px;
  }
  .listo-host-profile-card__header h2 {
    font-size: 16px;
  }
  .listo-host-profile-photo-block {
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
  }
  .listo-profile-photo--large {
    width: 88px;
    height: 88px;
    min-width: 88px;
  }
  .listo-profile-photo--large #listo-profile-photo-fallback {
    font-size: 31px;
  }
  .listo-host-profile-photo-block__actions .listo-btn {
    min-height: 44px;
    padding: 9px 11px;
    font-size: 12px;
  }
  .listo-host-profile-save-row {
    margin-top: 18px;
  }
  .listo-host-profile-save-row .listo-btn {
    min-height: 44px;
  }
  .listo-host-profile-preview-card {
    padding: 16px;
  }
}

/* ========================================================================
   NEXT312 — Host Support app-style workspace
   Presentation-only. The Host template continues to use the shared Support
   partial and existing support.js/backend workflows. Quick links are
   contextual shortcuts, not a replacement for the support workflow.
   ======================================================================== */
.listo-support-page__description {
  margin: 0 0 24px;
  max-width: 780px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}
.listo-support-host-links { margin: 0 0 24px; }
.listo-support-host-links__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.listo-support-host-links__heading span:first-child {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.listo-support-host-links__heading span:last-child {
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 600;
}
.listo-support-host-links__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.listo-support-host-link {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 76px;
  padding: 12px 13px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.listo-support-host-link:hover { border-color:#B9DBF8; box-shadow:0 5px 16px rgba(26,39,57,.06); transform:translateY(-1px); }
.listo-support-host-link.is-disabled { opacity:.58; }
.listo-support-host-link__icon {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.listo-support-host-link__icon svg { width:18px; height:18px; }
.listo-support-host-link__icon--calendar { color:#2563EB; background:#EFF6FF; }
.listo-support-host-link__icon--home { color:#3B82F6; background:#EFF6FF; }
.listo-support-host-link__icon--wallet { color:#16A34A; background:#F0FDF4; }
.listo-support-host-link__icon--cases { color:#F97316; background:#FFF7ED; }
.listo-support-host-link__copy { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.listo-support-host-link__copy strong { font-size:13px; line-height:1.2; }
.listo-support-host-link__copy small { font-size:11px; line-height:1.35; color:var(--ink-muted); }
.listo-support-host-link__arrow { flex:0 0 auto; color:#94A3B8; font-size:17px; line-height:1; }
.listo-support-page > .listo-support-help { max-width:980px; margin-left:0; margin-right:0; }
.listo-support-page .listo-support-offline-card,
.listo-support-page .listo-support-chat { margin-left:0; margin-right:0; }
/* NEXT420: keep the closed-state card centered like the live-chat entry card.
   The broader Host Support shell deliberately keeps the offline form and
   active chat aligned to the content column; the closed-state card is a
   standalone status state and should remain visually centered. */
.listo-support-page .listo-support-closed-card { margin-left:auto; margin-right:auto; }
.listo-support-page .listo-support-chat { max-width:none; }
.listo-support-page .listo-support-offline-card { max-width:860px; }

@media (max-width:900px) and (min-width:701px) {
  .listo-support-host-links__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:700px) {
  .listo-support-page__description { margin-bottom:18px; font-size:13px; line-height:1.5; }
  .listo-support-host-links { margin-bottom:18px; }
  .listo-support-host-links__heading { margin-bottom:8px; }
  .listo-support-host-links__heading span:first-child { font-size:14px; }
  .listo-support-host-links__heading span:last-child { font-size:11px; }
  .listo-support-host-links__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .listo-support-host-link { min-height:64px; padding:10px; gap:8px; border-radius:12px; }
  .listo-support-host-link__icon { width:32px; height:32px; flex-basis:32px; border-radius:9px; }
  .listo-support-host-link__icon svg { width:16px; height:16px; }
  .listo-support-host-link__copy strong { font-size:12px; }
  .listo-support-host-link__copy small { font-size:10px; }
  .listo-support-host-link__arrow { display:none; }
  .listo-support-page.is-support-chat-active .listo-support-host-links { margin-bottom:10px; }
  .listo-support-page.is-support-chat-active .listo-support-host-links__grid {
    grid-template-columns:repeat(4,minmax(132px,1fr));
    overflow-x:auto; grid-auto-flow:column; grid-auto-columns:minmax(132px,1fr);
    scrollbar-width:none; padding-bottom:2px;
  }
  .listo-support-page.is-support-chat-active .listo-support-host-links__grid::-webkit-scrollbar { display:none; }
  .listo-support-page.is-support-chat-active .listo-support-host-link { min-height:54px; }
  .listo-support-page.is-support-chat-active .listo-support-host-link__copy small,
  .listo-support-page.is-support-chat-active .listo-support-host-link__arrow { display:none; }
  .listo-support-page > .listo-support-help { max-width:none; }
  .listo-support-page .listo-support-offline-card,
  .listo-support-page .listo-support-closed-card { max-width:none; }
}

/* ========================================================================
   NEXT314 — External Calendars Host shell alignment
   Align the External Calendars page to the same Host account canvas and
   vertical title position used by the other Host pages. Presentation only;
   external-calendar selectors and sync workflows remain unchanged.
   ======================================================================== */
body[data-listo-mode="host"] .listo-main .listo-external-cal-page {
  width: 100% !important;
  max-width: 1200px !important;
  padding-top: var(--section-pad) !important;
  padding-bottom: var(--section-pad) !important;
}

body[data-listo-mode="host"] .listo-main .listo-external-cal-page .listo-external-cal-hero {
  display: block;
  margin-bottom: 0;
}

body[data-listo-mode="host"] .listo-main .listo-external-cal-page .listo-external-cal-hero > .listo-page-title-row {
  margin-bottom: 0 !important;
}

body[data-listo-mode="host"] .listo-main .listo-external-cal-page .listo-external-cal-intro {
  max-width: 760px;
  margin: 18px 0 26px !important;
  color: var(--ink-muted);
  font-size: 14px !important;
  line-height: 1.5 !important;
}

@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-main .listo-external-cal-page {
    padding-top: var(--section-pad) !important;
    padding-bottom: var(--section-pad) !important;
  }

  body[data-listo-mode="host"] .listo-main .listo-external-cal-page .listo-external-cal-intro {
    margin: 14px 0 22px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

/* ========================================================================
   NEXT316 — Inbox desktop density + mobile keyboard spacing
   Presentation only. Existing inbox structure, AJAX actions, polling,
   message rendering and routing remain unchanged.
   ======================================================================== */

/* Host Inbox: give the message column more breathing room by tightening the
   two utility columns rather than squeezing the central conversation. */
@media (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 260px minmax(0, 1fr) 260px;
    height: min(680px, calc(100dvh - 270px));
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host {
    padding: 11px 12px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item {
    padding: 10px 12px;
    gap: 9px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__photo {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header {
    min-height: 60px;
    padding: 10px 14px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__messages {
    padding: 14px 16px 6px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble {
    max-width: 76%;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer {
    gap: 8px;
    padding: 10px 12px 12px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar {
    padding: 13px;
  }
}

@media (max-width: 1100px) and (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 245px minmax(0, 1fr) 245px;
  }
}

@media (max-width: 800px) {
  /* When the virtual keyboard is open, JS sizes the Inbox against the
     visual viewport. This removes the artificial white gap above Gboard/
     the device keyboard while preserving the normal mobile height when the
     keyboard is closed. */
  .listo-inbox--keyboard-visible {
    overflow: hidden;
  }

  .listo-inbox--keyboard-visible .listo-inbox__composer {
    padding-top: 5px;
    padding-bottom: 4px;
  }
}

/* ========================================================================
   NEXT322 — Host Inbox desktop compact density
   Desktop presentation only. The Host Inbox keeps its three-pane app
   structure, but reduces utility-column width, chrome, and vertical
   padding so more of the conversation is visible at once. Mobile rules
   remain unchanged.
   ======================================================================== */
@media (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox-page__description {
    margin-bottom: 18px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 230px minmax(0, 1fr) 230px;
    height: min(760px, calc(100dvh - 245px));
    min-height: 520px;
    border-radius: 14px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host {
    padding: 9px 10px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search-wrap {
    min-height: 36px;
    padding: 0 10px;
    gap: 7px;
    border-radius: 9px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search {
    min-height: 34px;
    padding: 7px 0;
    font-size: 12px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host {
    gap: 3px;
    margin-top: 7px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host .listo-inbox__filter {
    min-height: 27px;
    padding: 4px 8px;
    font-size: 10.5px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item {
    padding: 8px 10px;
    gap: 8px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__photo {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__title {
    font-size: 13px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__time {
    font-size: 10px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag {
    margin: 2px 0;
    font-size: 10.5px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__context {
    gap: 4px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__preview {
    font-size: 11px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-context-badge {
    min-height: 18px;
    padding: 2px 6px;
    font-size: 9px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header {
    min-height: 58px;
    padding: 8px 12px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-name {
    font-size: 13.5px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-subrow {
    gap: 5px;
    margin-top: 1px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-subrow .listo-caption {
    font-size: 11px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-info-btn {
    width: 32px;
    height: 32px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__messages {
    padding: 10px 14px 4px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble {
    max-width: 72%;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer {
    gap: 7px;
    padding: 7px 9px 9px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer .listo-textarea {
    min-height: 38px;
    font-size: 13px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer-send {
    width: 40px;
    height: 40px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar {
    padding: 10px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__panel {
    padding: 0 0 12px;
    margin: 0 0 12px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__label {
    margin-bottom: 6px;
    font-size: 9.5px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__title {
    font-size: 14px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__facts {
    font-size: 12px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__facts li {
    padding: 7px 0;
    gap: 8px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__inquiry-total {
    font-size: 20px;
    margin-bottom: 3px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__inquiry-meta {
    font-size: 11px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__actions {
    margin-top: 10px;
    gap: 5px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__actions .listo-btn {
    min-height: 33px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 11px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__view-btn {
    min-height: 33px;
    padding: 7px 10px;
    margin-top: 8px;
    border-radius: 8px;
    font-size: 11px;
  }

  body[data-listo-mode="host"] .listo-inbox--host #listo-sidebar-offer-form {
    margin-top: 6px !important;
    padding: 9px;
    border-radius: 10px;
  }

  body[data-listo-mode="host"] .listo-inbox--host #listo-sidebar-offer-form input {
    min-height: 38px;
    border-radius: 8px;
  }
}

@media (max-width: 1100px) and (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 220px minmax(0, 1fr) 220px;
  }
}

/* ========================================================================
   NEXT323 — Host Inbox usability refinement
   Presentation/input behavior only. Existing messaging, offer, booking,
   checkout and AJAX actions remain unchanged.
   ======================================================================== */
@media (min-width: 801px) {
  /* Give the conversation list enough width for all Host filters while
     preserving the compact central/right workspace. */
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 275px minmax(0, 1fr) 230px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-active {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  /* The message stream is the only scrolling surface inside the thread;
     the composer remains immediately available at the bottom of the chat
     pane instead of becoming part of the page's vertical scroll. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__messages {
    min-height: 0;
    overflow-y: auto;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    background: var(--surface);
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__filters--host {
    overflow-x: visible;
  }
}

@media (max-width: 1100px) and (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 260px minmax(0, 1fr) 220px;
  }
}

/* Special Offer amount: keep a true number field for numeric keyboards and
   validation, but remove native spinner chrome so the field stays visually
   clean. */
#listo-sidebar-offer-price[type="number"]::-webkit-outer-spin-button,
#listo-sidebar-offer-price[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#listo-sidebar-offer-price[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}



/* NEXT968 — Parking Special Offer amount field: remove native number spinners.
   Keep the input numeric for validation/keyboard behavior, but prevent the
   browser arrows from changing the value while the Host scrolls the rail. */
#listo-parking-offer-price[type="number"]::-webkit-outer-spin-button,
#listo-parking-offer-price[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#listo-parking-offer-price[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ========================================================================
   NEXT324 — Host Inbox final desktop layout refinement
   - Slightly widen the conversation list so all Host filters remain fully visible.
   - Restore left padding in the search input because its search icon is absolutely
     positioned by the shared Inbox CSS.
   - Force a true flex-constrained message area so the composer stays visible
     immediately at the bottom of the Host chat pane instead of being pushed
     below the viewport by long message content.
   - Desktop Host Inbox only; mobile behavior remains unchanged.
   ======================================================================== */
@media (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 300px minmax(0, 1fr) 230px;
    min-height: 0;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search-wrap {
    position: relative;
    gap: 0;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 28px !important;
    padding-right: 0 !important;
    -webkit-appearance: none;
    appearance: none;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search::-webkit-search-decoration,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search::-webkit-search-cancel-button,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search::-webkit-search-results-button,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-active {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100%;
  }

  /* JS toggles the active thread with an inline display:flex. Keep that
     flex layout, but make every non-message row non-growing and the message
     stream the sole flexible region. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-active {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header,
  body[data-listo-mode="host"] .listo-inbox--host .listo-host-cancel-banner,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__reply-banner,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__attach-preview,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer-closed-notice,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer,
  body[data-listo-mode="host"] .listo-inbox--host .listo-field-error {
    flex: 0 0 auto;
    min-height: 0;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__messages {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer {
    position: relative;
    z-index: 3;
    background: var(--surface);
  }
}

@media (max-width: 1100px) and (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 285px minmax(0, 1fr) 220px;
  }
}

/* ========================================================================
   NEXT325 — Host Inbox final polish: composer position, chat type scale, and
   persistent Delivered/Read status.
   ======================================================================== */
@media (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer {
    padding-bottom: 3px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble {
    font-size: 14px;
    line-height: 1.45;
  }
}

/* Keep the sender status visibly present beneath the sender's latest message.
   JS updates it between Delivered and Read; it is not tied to whether the
   latest poll happened to include a new message from the sender. */
.listo-msg-seen {
  display: block;
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--ink-muted);
  text-align: right;
  margin: -3px 2px 7px 0;
}

/* ========================================================================
   NEXT326 — Host Inbox viewport-adaptive composer + title metadata polish
   - Keep the Host Inbox workspace sized to the user's desktop viewport so
     the composer rests just above the browser viewport / Windows taskbar.
   - Move the one-line Host description to the opposite side of the title
     row in a compact 11px treatment; mobile stacks it beneath the title.
   - Reduce Host chat bubble typography from 14px to 12px.
   ======================================================================== */
@media (min-width: 801px) {
  /* Let the Host Inbox use the available viewport height rather than a
     fixed-ish workspace height. The visible browser viewport already ends
     above the Windows taskbar, so 100dvh keeps the composer visually close
     to that boundary without positioning the composer outside its panel. */
  body[data-listo-mode="host"] .listo-inbox-page {
    padding-bottom: 0 !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host {
    height: min(820px, calc(100dvh - 205px));
    max-height: calc(100dvh - 205px);
  }

  /* Keep icon + title together while moving the descriptive sentence to the
     far side of the same title row. */
  body[data-listo-mode="host"] .listo-inbox__title-row {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
  }

  body[data-listo-mode="host"] .listo-inbox__title-row .listo-inbox__heading {
    flex: 0 0 auto;
  }

  body[data-listo-mode="host"] .listo-inbox__title-row .listo-inbox-page__description {
    flex: 0 1 auto;
    max-width: 52%;
    margin: 0 0 0 auto !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    text-align: right;
    white-space: nowrap;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble {
    font-size: 12px;
    line-height: 1.45;
  }
}

@media (max-width: 800px) {
  body[data-listo-mode="host"] .listo-inbox__title-row {
    flex-wrap: wrap;
    align-items: center;
  }

  body[data-listo-mode="host"] .listo-inbox__title-row .listo-inbox-page__description {
    flex: 0 0 100%;
    max-width: none;
    margin: 6px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    text-align: left;
    white-space: normal;
  }
}

/* ========================================================================
   NEXT327 — Unified page-title metadata + mobile Inbox viewport adaptation
   - Move applicable one-line page descriptions to the opposite side of the
     page title on both Guest and Host pages.
   - Keep mobile descriptions readable by stacking them below the title.
   - Let the Inbox workspace height follow the user's visible mobile viewport
     so the composer stays close to the bottom edge / keyboard.
   ======================================================================== */
.listo-page-title-row {
  width: 100%;
}
.listo-page-title-row .listo-page-title-meta {
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 58%;
  margin-left: auto;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Title-row descriptions should not inherit old block-level description
   margins that were designed for descriptions below the title. */
.listo-page-title-row .listo-support-page__description,
.listo-page-title-row .listo-external-cal-intro {
  margin: 0 !important;
  max-width: 58%;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

@media (max-width: 800px) {
  .listo-page-title-row {
    flex-wrap: wrap;
    align-items: center;
  }
  .listo-page-title-row .listo-page-title-meta,
  .listo-page-title-row .listo-support-page__description,
  .listo-page-title-row .listo-external-cal-intro {
    flex: 0 0 100%;
    max-width: none;
    margin: 5px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    text-align: left;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* JS sets an exact height from visualViewport so the bottom of the Inbox
     follows the user's visible screen, including keyboard-open states. */
  .listo-inbox--host,
  .listo-inbox--guest {
    max-height: none !important;
  }

  .listo-inbox--keyboard-visible .listo-inbox__composer {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}


/* ========================================================================
   NEXT328 — Inbox parity + contextual page-title info disclosure
   - Apply the compact Host Inbox workspace geometry to Guest Inbox on desktop.
   - Keep the Guest composer anchored to the viewport on desktop and mobile.
   - Replace page-title microcopy with a compact, click/tap info icon that
     reveals the same contextual sentence without crowding the title row.
   ======================================================================== */

.listo-page-title-row {
  position: relative;
}

.listo-page-title-info {
  position: relative;
  flex: 0 0 auto;
  margin-left: 2px;
}

.listo-page-title-info__trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #B9C7D8;
  border-radius: 50%;
  background: #F8FAFC;
  color: #6B7B8E;
  cursor: pointer;
  box-sizing: border-box;
}
.listo-page-title-info__trigger::-webkit-details-marker { display: none; }
.listo-page-title-info__trigger svg { width: 13px; height: 13px; }
.listo-page-title-info[open] .listo-page-title-info__trigger {
  border-color: #8DBDEB;
  background: #EAF5FF;
  color: #1976D2;
}
.listo-page-title-info__popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  width: min(300px, calc(100vw - 40px));
  padding: 11px 13px;
  border: 1px solid #D7E2EE;
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--ink-muted);
  box-shadow: 0 8px 24px rgba(25, 45, 70, .12);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

/* Guest Inbox now follows the same compact three-dimensional density as the
   Host Inbox while retaining Guest's two-pane architecture. */
@media (min-width: 801px) {
  .listo-inbox--guest {
    grid-template-columns: 300px minmax(0, 1fr);
    /* NEXT345: no fixed pixel height/cap. The Inbox page is a viewport-tall flex column, so the
       workspace fills whatever the monitor offers (inbox.js then trims the bottom gap). */
    max-height: none;
    min-height: 420px;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 3px 16px rgba(24,39,75,.05);
  }
  .listo-inbox--guest .listo-inbox__toolbar {
    padding: 11px 12px;
  }
  .listo-inbox--guest .listo-inbox__search {
    min-height: 38px;
    padding: 8px 12px 8px 39px;
    font-size: 13px;
  }
  .listo-inbox--guest .listo-inbox__filter {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 11.5px;
  }
  .listo-inbox--guest .listo-inbox-thread-item {
    padding: 10px 12px;
    gap: 9px;
  }
  .listo-inbox--guest .listo-inbox-thread-item__photo {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }
  .listo-inbox--guest .listo-inbox-thread-item__title { font-size: 13.5px; }
  .listo-inbox--guest .listo-inbox-thread-item__listing-tag { font-size: 11px; }
  .listo-inbox--guest .listo-inbox-thread-item__preview { font-size: 11.5px; }
  .listo-inbox--guest .listo-inbox__thread-header {
    min-height: 60px;
    padding: 10px 14px;
  }
  .listo-inbox--guest .listo-inbox__thread-header-name { font-size: 14px; }
  .listo-inbox--guest .listo-inbox__messages { padding: 14px 16px 6px; }
  .listo-inbox--guest .listo-msg-bubble { max-width: 76%; font-size: 12px; line-height: 1.45; }
  .listo-inbox--guest .listo-inbox__composer { padding: 10px 12px 12px; gap: 8px; }
}

@media (max-width: 1100px) and (min-width: 801px) {
  .listo-inbox--guest { grid-template-columns: 285px minmax(0, 1fr); }
}

/* Both Inbox roles use the same visual-viewport-driven height on mobile. The
   JS may replace the height inline while the keyboard is open; these rules
   keep the layout flexible rather than imposing a fixed max-height. */
@media (max-width: 800px) {
  .listo-inbox--guest,
  .listo-inbox--host {
    max-height: none !important;
  }
  .listo-page-title-info__popover {
    left: 0;
    right: auto;
    width: min(280px, calc(100vw - 36px));
  }
}

/* ========================================================================
   NEXT330 — page-title info disclosure viewport safety
   Keep the mobile info popover fully inside the visible viewport. Runtime
   positioning in ui-helpers.js determines the exact top/left coordinates.
   ======================================================================== */
@media (max-width: 800px) {
  .listo-page-title-info__popover {
    max-width: calc(100vw - 32px);
    width: min(300px, calc(100vw - 32px));
  }
}

/* NEXT332 — Host Bookings thumbnail/layout correction.
 * Keep the booking image in a dedicated grid track so it can never overlap
 * booking details at desktop widths. The content column remains shrinkable.
 */
.listo-host-bookings-main-grid .listo-trip-card {
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: start;
}
.listo-host-bookings-main-grid .listo-trip-card__photo {
  width: 180px;
  min-width: 0;
  height: 120px;
  box-sizing: border-box;
}
.listo-host-bookings-main-grid .listo-host-bookings-card__body,
.listo-host-bookings-main-grid .listo-host-bookings-card__body > a {
  min-width: 0;
  width: 100%;
}
.listo-host-bookings-main-grid .listo-trip-card__title {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 900px) and (min-width: 721px) {
  .listo-host-bookings-main-grid .listo-trip-card {
    grid-template-columns: 155px minmax(0, 1fr);
  }
  .listo-host-bookings-main-grid .listo-trip-card__photo {
    width: 155px;
    height: 108px;
  }
}

/* NEXT337 — every guest action is shown directly on all My Trips cards (no "More" menu),
   compact so they fit on desktop and mobile. */
.listo-trip-card__actions--compact {
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}
.listo-trip-card__actions--compact > .listo-btn {
	padding: 7px 10px;
	min-height: 34px;
	font-size: 12px;
	line-height: 1.2;
	white-space: nowrap;
	text-align: center;
}
.listo-trip-card__actions--compact > .listo-btn[style*="color:var(--error)"] {
	color: var(--error);
}
@media (max-width: 700px) {
	.listo-trip-card__actions--compact {
		gap: 6px;
	}
	.listo-trip-card__actions--compact > .listo-btn {
		flex: 1 1 auto;
		min-width: 0;
		padding: 7px 8px;
		font-size: 11.5px;
	}
}
@media (max-width: 380px) {
	.listo-trip-card__actions--compact > .listo-btn {
		flex: 1 1 calc(50% - 6px);
		white-space: normal;
	}
}

/* NEXT341 — stay dates on Inbox conversations (one chat session = one reservation). */
.listo-inbox-thread-item__stay { margin-top: 2px; color: var(--ink-muted); font-size: 12px; line-height: 1.3; }

/* ========================================================================
   NEXT345 — Guest Inbox: adaptive workspace + compact cancellation banner
   - The Guest Inbox height is set from the visible viewport by inbox.js (desktop and
     mobile), so "Write a message" always sits at the bottom edge of the screen.
   - The pane is a strict column: fixed header / banner / composer rows and ONE flexible
     message list, so nothing above the composer can push the messages out of view.
   - The Host cancellation-request banner is compact (one row) with a Details
     disclosure, and is height-limited so it can never cover the chat.
   ======================================================================== */
.listo-inbox--guest .listo-inbox__thread { min-height: 0; min-width: 0; }
.listo-inbox--guest .listo-inbox__thread-active { min-height: 0; min-width: 0; overflow: hidden; }
.listo-inbox--guest .listo-inbox__messages { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.listo-inbox--guest .listo-inbox__thread-header,
.listo-inbox--guest .listo-host-cancel-banner,
.listo-inbox--guest .listo-inbox__reply-banner,
.listo-inbox--guest .listo-inbox__attach-preview,
.listo-inbox--guest .listo-inbox__composer-closed-notice,
.listo-inbox--guest .listo-inbox__composer,
.listo-inbox--guest .listo-field-error { flex: 0 0 auto; }
.listo-inbox--guest .listo-inbox__composer { position: relative; z-index: 2; background: var(--surface); }

.listo-host-cancel-banner {
  flex: 0 0 auto;
  max-height: min(40%, 280px);
  overflow-y: auto;
  padding: 12px 14px;
  margin: 10px 16px 0;
}
.listo-host-cancel-banner__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
}
.listo-host-cancel-banner__main { min-width: 0; flex: 1 1 220px; }
.listo-host-cancel-banner__title { margin: 0; font-size: 14.5px; line-height: 1.3; }
.listo-host-cancel-banner__countdown { margin: 2px 0 0; font-size: 13px; }
.listo-host-cancel-banner__actions { flex: 0 0 auto; align-items: center; gap: 6px; }
.listo-host-cancel-banner__actions .listo-btn { min-height: 36px; padding: 8px 14px; font-size: 13px; }
.listo-host-cancel-banner__toggle {
  border: 0; background: none; padding: 8px 6px; cursor: pointer;
  color: var(--listo-blue, #1976D2); font: inherit; font-size: 12.5px; font-weight: 700;
}
.listo-host-cancel-banner__details {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(224, 180, 0, .35);
}
.listo-host-cancel-banner__details[hidden] { display: none; }
.listo-host-cancel-banner__details .listo-host-cancel-banner__meta { margin-bottom: 8px; }
.listo-host-cancel-banner__details .listo-caption { margin: 0; }

@media (max-width: 800px) {
  /* Mobile: single-column banner, full-width primary action, details on demand. */
  .listo-host-cancel-banner { margin: 8px 10px 0; padding: 10px 12px; max-height: min(38%, 240px); }
  .listo-host-cancel-banner__row { flex-direction: column; align-items: stretch; gap: 8px; }
  .listo-host-cancel-banner__main { flex: 0 0 auto; }
  .listo-host-cancel-banner__actions { flex-direction: row; width: 100%; }
  .listo-host-cancel-banner__actions .listo-btn { width: auto; flex: 1 1 auto; }
  .listo-host-cancel-banner__toggle { flex: 0 0 auto; }
}


/* ========================================================================== 
   NEXT354 — Booking email charge breakdown + Listo blue email design
   ========================================================================== */
.listo-btn--edit,
.listo-edit-action {
  background: #fff !important;
  color: #111827 !important;
  border: 1px solid #111827 !important;
  box-shadow: none !important;
}
.listo-btn--edit:hover,
.listo-edit-action:hover,
.listo-btn--edit:focus-visible,
.listo-edit-action:focus-visible {
  background: #F8FAFC !important;
  color: #111827 !important;
}

.listo-payout-history-item {
  position: relative;
  width: 100%;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.listo-payout-history-item:hover { background:#F8FAFC; }
.listo-payout-history-item:focus-visible { outline:3px solid rgba(33,150,243,.24); outline-offset:-3px; }
.listo-payout-history-item__chevron {
  justify-self:end;
  font-size:25px;
  line-height:1;
  color:#667085;
  transform:translateX(2px);
}
.listo-payout-history-detail {
  margin: 0 18px 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #FCFDFE;
}
.listo-payout-history-detail__header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.listo-payout-history-detail__header > div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.listo-payout-history-detail__header strong { font-size:16px; }
.listo-payout-history-detail__header span { font-size:12px; color:var(--ink-muted); overflow-wrap:anywhere; }
.listo-payout-history-detail__close {
  width:34px; height:34px; min-width:34px; border:1px solid var(--border); border-radius:50%; background:#fff; color:#111827;
  font-size:22px; line-height:1; cursor:pointer;
}
.listo-payout-history-detail > .listo-caption { margin:5px 0 14px; }
.listo-payout-breakdown { display:grid; gap:0; border-top:1px solid var(--border); }
.listo-payout-breakdown > div,
.listo-payout-cohost-breakdown > div {
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding:11px 0; border-bottom:1px solid #EEF2F6;
}
.listo-payout-breakdown > div span,
.listo-payout-cohost-breakdown > div span { min-width:0; }
.listo-payout-breakdown strong,
.listo-payout-cohost-breakdown > div > strong { white-space:nowrap; }
.listo-payout-breakdown .is-deduction strong { color:#B42318; }
.listo-payout-breakdown .is-total { margin-top:2px; border-bottom:0; font-size:14px; }
.listo-payout-breakdown .is-total strong { font-size:16px; }
.listo-payout-cohost-breakdown { margin-top:18px; padding-top:15px; border-top:1px solid var(--border); }
.listo-payout-cohost-breakdown h3 { margin:0 0 2px; font-size:14px; }
.listo-payout-cohost-breakdown > div span { display:flex; flex-direction:column; gap:2px; }
.listo-payout-cohost-breakdown small { color:var(--ink-muted); font-size:11px; }
.listo-payout-cohost-breakdown .is-total { margin-top:2px; padding-top:13px; border-top:1px solid var(--border); border-bottom:0; }
.listo-payout-history-detail__note { margin:14px 0 0 !important; }

@media (max-width:700px) {
  .listo-payout-history-detail { margin:0 0 10px; padding:15px; border-radius:13px; }
  .listo-payout-history-item__chevron { font-size:22px; }
  .listo-payout-history-detail__header strong { font-size:15px; }
  .listo-payout-breakdown > div, .listo-payout-cohost-breakdown > div { gap:12px; }
  .listo-payout-history-detail .listo-caption { font-size:11px; }
}


/* NEXT355 — payout UI refinement
 * Edit controls are always secondary white buttons with dark text, including
 * when they retain the primary-button class for existing JS compatibility.
 * Payout schedule options expose the currently selected state without adding
 * extra prose, and payout history rows no longer repeat table headings.
 */
button.listo-btn--primary.listo-btn--edit,
button.listo-btn--primary.listo-btn--edit:hover,
button.listo-btn--primary.listo-btn--edit:focus-visible,
.listo-btn.listo-btn--edit,
.listo-btn.listo-btn--edit:hover,
.listo-btn.listo-btn--edit:focus-visible {
  background:#FFFFFF !important;
  color:#111827 !important;
  border-color:#111827 !important;
  box-shadow:none !important;
}

.listo-payout-schedule-option__copy {
  position:relative;
  padding-right:72px;
}
.listo-payout-schedule-option__status {
  display:none;
  position:absolute;
  top:0;
  right:0;
  padding:4px 8px;
  border-radius:999px;
  background:#E8F3FF;
  color:#1976D2;
  font-size:10px;
  font-style:normal;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
.listo-payout-schedule-option.is-selected .listo-payout-schedule-option__status { display:inline-flex; }

.listo-payout-history-item {
  padding-right:54px;
}
.listo-payout-history-item__chevron {
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
}

@media (max-width:700px) {
  .listo-payout-schedule-option__copy { padding-right:64px; }
  .listo-payout-history-item { padding-right:44px; }
  .listo-payout-history-item__chevron { right:14px; }
}

/* ========================================================================
   NEXT356 — Host Payouts hierarchy, compact transaction details, exports
   ======================================================================== */
.listo-payouts-page { max-width:1200px; }

.listo-payout-overview { margin-top:32px; }
.listo-payout-overview__header,
.listo-payout-settings__header { margin-bottom:10px; }
.listo-payout-overview h2,
.listo-payout-settings h2,
.listo-payout-history h2 { margin:0; font-size:18px; line-height:1.3; }
.listo-payout-overview__header .listo-caption,
.listo-payout-settings__header .listo-caption { margin:3px 0 0; font-size:12px; }
.listo-payout-overview__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.listo-payout-overview__card {
  min-width:0; padding:14px 16px; border:1px solid var(--border); border-radius:14px;
  background:var(--surface); box-shadow:0 2px 8px rgba(26,26,26,.03);
}
.listo-payout-overview__card.is-primary { border-color:#CFE2F4; background:#F7FBFF; }
.listo-payout-overview__card span { display:block; margin-bottom:4px; color:var(--ink-muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.listo-payout-overview__card strong { display:block; font-size:21px; line-height:1.2; color:#111827; }
.listo-payout-overview__card.is-primary strong { color:#1565C0; }
.listo-payout-overview__card small { display:block; margin-top:5px; color:var(--ink-muted); font-size:11px; line-height:1.35; }

.listo-payout-settings { margin-top:36px; }
.listo-payout-settings .listo-payout-config-grid { margin:0; }
.listo-payout-fees-card {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,420px); gap:20px; align-items:center;
  margin-top:12px; padding:14px 16px; border:1px solid var(--border); border-radius:14px;
  background:var(--surface); box-shadow:0 2px 8px rgba(26,26,26,.025);
}
.listo-payout-fees-card h3 { margin:0; font-size:14px; line-height:1.3; }
.listo-payout-fees-card .listo-caption { margin:3px 0 0; font-size:11px; }
.listo-payout-fees-card .listo-payout-details-grid { gap:8px; }
.listo-payout-fees-card .listo-payout-details-grid > div { padding:9px 11px; border-radius:10px; }
.listo-payout-fees-card .listo-payout-details-grid span { font-size:10px; }
.listo-payout-fees-card .listo-payout-details-grid strong { font-size:14px; }

.listo-payout-history { margin-top:34px; }
.listo-payout-history__header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:10px; }
.listo-payout-history__actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.listo-payout-history__actions .listo-btn,
.listo-payout-history-detail__actions .listo-btn { white-space:nowrap; }

/* Statement detail is intentionally tighter than the previous modal-like block. */
.listo-payout-history-detail { margin:0 14px 10px; padding:13px 14px; border-radius:12px; }
.listo-payout-history-detail__header { align-items:center; gap:10px; }
.listo-payout-history-detail__header > div:first-child { gap:2px; }
.listo-payout-history-detail__header strong { font-size:14px; }
.listo-payout-history-detail__header span { font-size:11px; }
.listo-payout-history-detail__actions { display:flex; align-items:center; gap:7px; }
.listo-payout-history-detail__actions .listo-btn { min-height:32px; padding:7px 10px; font-size:11px; }
.listo-payout-history-detail__close { width:30px; height:30px; min-width:30px; font-size:19px; }
.listo-payout-history-detail > .listo-caption { margin:4px 0 8px; font-size:11px; }
.listo-payout-breakdown { border-top:1px solid var(--border); }
.listo-payout-breakdown > div,
.listo-payout-cohost-breakdown > div { min-height:0; padding:7px 0; border-bottom:1px solid #EEF2F6; font-size:12px; }
.listo-payout-breakdown strong,
.listo-payout-cohost-breakdown > div > strong { font-size:12px; }
.listo-payout-breakdown .is-total { padding-top:8px; margin-top:1px; font-size:12.5px; }
.listo-payout-breakdown .is-total strong { font-size:14px; }
.listo-payout-breakdown .is-parent { font-weight:600; }
.listo-payout-breakdown .is-subrow { padding-top:4px; padding-bottom:4px; border-bottom:0; color:var(--ink-muted); font-size:11px; }
.listo-payout-breakdown .is-subrow span { padding-left:13px; }
.listo-payout-breakdown .is-subrow strong { font-size:11px; font-weight:600; }
.listo-payout-cohost-breakdown { margin-top:11px; padding-top:10px; }
.listo-payout-cohost-breakdown h3 { margin:0 0 1px; font-size:12.5px; }
.listo-payout-cohost-breakdown small { font-size:10px; }
.listo-payout-cohost-breakdown .is-total { padding-top:9px; }
.listo-payout-history-detail__note { margin:9px 0 0 !important; font-size:10.5px; line-height:1.4; }

/* All edit controls remain white/dark even when a global disabled/primary rule exists. */
button.listo-btn--edit,
a.listo-btn--edit,
button.listo-btn--primary.listo-btn--edit,
button.listo-btn--edit:disabled,
button.listo-btn--primary.listo-btn--edit:disabled {
  background:#FFFFFF !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border-color:#111827 !important;
  box-shadow:none !important;
  opacity:1 !important;
}

@media (max-width:900px) {
  .listo-payout-overview__grid { grid-template-columns:1fr 1fr; }
  .listo-payout-overview__card.is-primary { grid-column:1 / -1; }
  .listo-payout-fees-card { grid-template-columns:1fr; gap:10px; }
}

@media (max-width:700px) {
  .listo-payout-overview { margin-top:26px; }
  .listo-payout-overview h2,
  .listo-payout-settings h2,
  .listo-payout-history h2 { font-size:17px; }
  .listo-payout-overview__header,
  .listo-payout-settings__header { margin-bottom:8px; }
  .listo-payout-overview__grid { grid-template-columns:1fr 1fr; gap:8px; }
  .listo-payout-overview__card { padding:12px 13px; border-radius:12px; }
  .listo-payout-overview__card strong { font-size:18px; }
  .listo-payout-overview__card small { font-size:10px; }
  .listo-payout-overview__card.is-primary { grid-column:1 / -1; }
  .listo-payout-settings { margin-top:28px; }
  .listo-payout-fees-card { margin-top:10px; padding:12px 13px; border-radius:12px; }
  .listo-payout-history { margin-top:28px; }
  .listo-payout-history__header { align-items:flex-start; flex-direction:column; gap:9px; }
  .listo-payout-history__actions { width:100%; justify-content:flex-start; }
  .listo-payout-history__actions .listo-btn { min-height:34px; padding:8px 10px; font-size:11px; }
  .listo-payout-history-detail { margin:0 0 8px; padding:12px; }
  .listo-payout-history-detail__header { align-items:flex-start; }
  .listo-payout-history-detail__actions { gap:5px; }
  .listo-payout-history-detail__actions .listo-btn { min-height:30px; padding:6px 8px; font-size:10px; }
}

@media (max-width:480px) {
  .listo-payout-overview__grid { grid-template-columns:1fr; }
  .listo-payout-overview__card.is-primary { grid-column:auto; }
  .listo-payout-history-detail__header { flex-wrap:wrap; }
  .listo-payout-history-detail__actions { width:100%; justify-content:flex-end; }
}


/* NEXT361 — compact checkout info disclosures + viewport-safe info popovers. */
.listo-checkout-inline-info {
  display: block;
  position: relative;
  min-height: 0;
  margin: -2px 0 10px;
}
.listo-info-trigger {
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #B9C7D8;
  border-radius: 50%;
  background: #F8FAFC;
  color: #6B7B8E;
  cursor: pointer;
  box-sizing: border-box;
  vertical-align: middle;
}
.listo-info-trigger svg { width: 13px; height: 13px; }
.listo-info-trigger:hover,
.listo-info-trigger:focus-visible,
.listo-info-trigger[aria-expanded="true"] {
  border-color: #8DBDEB;
  background: #EAF5FF;
  color: #1976D2;
  outline: none;
}
.listo-info-popover {
  position: fixed;
  z-index: 1200;
  width: min(300px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(70vh, 220px);
  overflow: auto;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid #D7E2EE;
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--ink-muted);
  box-shadow: 0 8px 24px rgba(25,45,70,.14);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
  white-space: normal;
  overflow-wrap: anywhere;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.listo-info-popover[data-positioned="1"] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.listo-checkout-contact-note {
  margin: 12px 0 10px;
  padding: 10px 12px;
  border: 1px solid #D9E9F8;
  border-radius: 10px;
  background: #F8FBFE;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}
.listo-checkout-contact-note strong { color: var(--ink); }
.listo-checkout-contact-note a { color: #1976D2; font-weight: 700; text-decoration: none; }
.listo-checkout-contact-note .listo-amenity-checkbox { margin-top: 8px; font-size: 12px; }

/* Prevent the page-title disclosure from ever entering normal layout while
   the mobile runtime computes its exact fixed viewport position. */
@media (max-width: 800px) {
  .listo-page-title-info__popover {
    position: fixed;
    width: min(300px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: min(70vh, 220px);
    box-sizing: border-box;
    overflow: auto;
    white-space: normal;
    overflow-wrap: anywhere;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
  }
  .listo-page-title-info[open][data-positioned="1"] .listo-page-title-info__popover {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Small screens should never allow expandable dashboard help text to push the
   card beyond the viewport. */
.listo-earnings-panel__description {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: normal;
}


/* NEXT362 — checkout fee-line info icons stay inline with their line item. */
.listo-checkout-price-breakdown { font-size: 13px; }
.listo-checkout-price-breakdown > div { align-items: center; }
.listo-checkout-fee-line__label { min-width: 0; display: inline-flex; align-items: center; gap: 4px; }
.listo-checkout-inline-info { display: inline-flex; position: relative; min-height: 0; margin: 0; vertical-align: middle; flex: 0 0 auto; }
.listo-checkout-inline-info .listo-info-trigger { width: 18px; height: 18px; }
.listo-checkout-inline-info .listo-info-trigger svg { width: 11px; height: 11px; }
.listo-checkout-fee-line--waived { color: var(--listo-green-dark, #16734d) !important; font-weight: 700; }
.listo-checkout-fee-line--waived .listo-checkout-fee-line__label { color: var(--listo-green-dark, #16734d); }
@media (max-width:700px) {
  .listo-checkout-price-breakdown { font-size: 12.5px; }
  .listo-checkout-fee-line__label { gap: 3px; }
  .listo-checkout-inline-info .listo-info-trigger { width: 17px; height: 17px; }
}


/* NEXT364 — Branded logged-out authentication gate. */
.listo-auth-gate {
  display: flex;
  justify-content: center;
  width: 100%;
}

.listo-auth-gate__card {
  width: min(100%, 560px);
  padding: 40px 36px 34px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(26, 26, 26, 0.06);
  text-align: center;
}

.listo-auth-gate__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--listo-green-dark);
  background: var(--listo-green-tint);
}

.listo-auth-gate__icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

.listo-auth-gate__title {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ink);
}

.listo-auth-gate__message {
  max-width: 460px;
  margin: 0 auto;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.55;
}

.listo-auth-gate__button {
  margin-top: 24px;
  min-width: 230px;
}

.listo-auth-gate__return-note {
  margin: 12px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}

.listo-auth-gate__button:focus-visible {
  outline: 3px solid var(--listo-green-tint);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .listo-auth-gate__card {
    padding: 32px 22px 26px;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(26, 26, 26, 0.05);
  }

  .listo-auth-gate__icon {
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
  }

  .listo-auth-gate__icon svg {
    width: 26px;
    height: 26px;
  }

  .listo-auth-gate__title {
    font-size: 22px;
  }

  .listo-auth-gate__message {
    font-size: 14px;
  }

  .listo-auth-gate__button {
    width: 100%;
    min-width: 0;
    margin-top: 20px;
  }
}


/* NEXT367 — Emphasize the mobile conversation-details chevron without changing its touch target. */
.listo-inbox-info-btn .listo-inbox-info-chevron { width: 21px; height: 21px; stroke-width: 2.7; }
@media (max-width: 800px) {
  .listo-inbox-info-btn .listo-inbox-info-chevron { width: 21px; height: 21px; stroke-width: 2.7; }
}

/* NEXT381 — Unified Save → Edit behavior for editable settings sections.
 * After a successful save, the same action becomes a white/dark Edit button.
 * This is a production-wide presentation standard; transactional Save actions
 * such as booking, publishing, or rule creation are intentionally excluded.
 */
.listo-btn--edit,
.listo-btn--edit:hover,
.listo-btn--edit:focus-visible,
.listo-guest-profile-action.is-editing,
.listo-guest-profile-action.is-editing:hover,
.listo-guest-profile-action.is-editing:focus {
  background:#FFFFFF !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border-color:#111827 !important;
  box-shadow:none !important;
  opacity:1 !important;
}

/* NEXT384 — Short post-save confirmation shown beside the newly active Edit button. */
.listo-save-confirmation {
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:10px;
  color:#176B43;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  vertical-align:middle;
  animation:listo-save-confirmation-in .16s ease-out;
}
.listo-save-confirmation__icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:17px;
  height:17px;
  border-radius:50%;
  background:#DDF5E7;
  color:#176B43;
  font-size:11px;
  font-weight:800;
}
@keyframes listo-save-confirmation-in {
  from { opacity:0; transform:translateY(1px); }
  to { opacity:1; transform:translateY(0); }
}
@media (max-width:700px) {
  .listo-save-confirmation { margin-left:8px; font-size:12px; }
}


/* NEXT415 — My Trips app-style refresh.
 * Preserve the standardized Listo page-title row and shared .listo-container width.
 * The app feel comes from lighter section chrome, compact summaries, responsive
 * two-column desktop cards, stronger payment attention state, and hidden empty queues.
 */
.listo-my-trips-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -4px 0 22px;
}
.listo-my-trips-summary__item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.1;
}
.listo-my-trips-summary__item strong { color: var(--ink); font-size: 14px; }
.listo-my-trips-summary__item--attention { background: var(--listo-green-tint); border-color: rgba(33,150,243,.18); color: var(--listo-green-dark); }
.listo-my-trips-summary__item--attention strong { color: var(--listo-green-dark); }
.listo-my-trips-sections { gap: 28px; margin-top: 0; }
.listo-trip-section { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.listo-trip-section--secondary { margin-top: 2px; }
.listo-trip-section__header {
  padding: 0 2px 11px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.listo-trip-section__header h2 { font-size: 20px; letter-spacing: -0.01em; }
.listo-trip-section__count { min-width: 28px; height: 28px; padding: 0 8px; font-size: 12px; background: var(--surface-alt); }
.listo-trip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px 0 0;
}
.listo-trip-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
}
.listo-trip-card:hover { border-color: #d8dee8; box-shadow: 0 4px 12px rgba(15, 23, 42, .06); }
.listo-trip-card--pending_payment { border-color: rgba(33,150,243,.24); background: #fbfdff; }
.listo-trip-card--pending_host_approval { background: #fcfcfd; }
.listo-trip-card--past, .listo-trip-card--cancelled { box-shadow: none; }
.listo-trip-card__photo { width: 132px; height: 112px; border-radius: 12px; }
.listo-trip-card__body { display: flex; flex-direction: column; min-width: 0; }
.listo-trip-card__kicker {
  margin-bottom: 7px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.listo-trip-card__kicker--attention { color: var(--listo-green-dark); }
.listo-trip-card__title { font-size: 15px; line-height: 1.32; }
.listo-trip-card__dates { margin-top: 2px; font-size: 13px; color: var(--ink-muted); }
.listo-trip-card__price { font-size: 15px; }
.listo-trip-card__meta { margin-top: 9px; }
.listo-trip-card__reference { margin-top: 7px; font-size: 11px; }
.listo-trip-card__payment-window {
  margin-top: 9px;
  color: var(--listo-green-dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.listo-trip-card__payment-window--countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(33,150,243,.24);
  border-radius: 10px;
  background: #eef7ff;
  color: #175cd3;
}
.listo-trip-card__payment-window--countdown strong {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}
.listo-trip-card__payment-window--countdown.is-urgent {
  border-color: rgba(180,35,24,.25);
  background: #fff4f2;
  color: #b42318;
}
.listo-trip-card__payment-window--countdown.is-expired,
.listo-trip-card__payment-window--expired {
  color: #b42318;
}
.listo-trip-card__payment-window--submitted { color: var(--ink-muted); }
@media (max-width: 700px) {
  .listo-trip-card__payment-window--countdown { padding: 7px 9px; font-size: 11px; }
  .listo-trip-card__payment-window--countdown strong { font-size: 15px; }
}
.listo-trip-card__actions { margin-top: auto; padding-top: 12px; }
.listo-trip-card__actions--compact > .listo-btn { min-height: 34px; padding: 7px 10px; font-size: 12px; }
.listo-trip-card--pending_payment .listo-trip-card__actions > .listo-btn--primary { box-shadow: 0 1px 2px rgba(33,150,243,.16); }

@media (max-width: 980px) {
  .listo-trip-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .listo-my-trips-summary { margin-bottom: 18px; }
  .listo-trip-section__header { padding-bottom: 9px; }
  .listo-trip-section__header h2 { font-size: 18px; }
  .listo-trip-grid { padding-top: 10px; gap: 10px; }
  .listo-trip-card { grid-template-columns: 88px minmax(0, 1fr); gap: 11px; padding: 10px; border-radius: 14px; }
  .listo-trip-card__photo { width: 88px; height: 82px; border-radius: 10px; }
  .listo-trip-card__kicker { margin-bottom: 5px; font-size: 10px; }
  .listo-trip-card__title { font-size: 14px; }
  .listo-trip-card__dates { font-size: 12px; }
  .listo-trip-card__price { font-size: 14px; }
  .listo-trip-card__meta { margin-top: 7px; }
  .listo-trip-card__reference { font-size: 10.5px; }
  .listo-trip-card__payment-window { font-size: 11px; }
  .listo-trip-card__actions { gap: 6px; }
  .listo-trip-card__actions--compact > .listo-btn { flex: 1 1 auto; min-width: 0; text-align: center; }
  .listo-trip-card--pending_payment .listo-trip-card__actions > .listo-btn--primary { flex-basis: 100%; }
}
@media (max-width: 420px) {
  .listo-my-trips-summary__item { font-size: 12px; padding: 6px 10px; }
  .listo-trip-card { grid-template-columns: 76px minmax(0,1fr); gap: 9px; padding: 9px; }
  .listo-trip-card__photo { width: 76px; height: 74px; }
  .listo-trip-card__topline { gap: 8px; }
  .listo-trip-card__title { font-size: 13px; }
  .listo-trip-card__dates { font-size: 11px; }
  .listo-trip-card__price { font-size: 13px; }
  .listo-trip-card__actions--compact > .listo-btn { padding: 7px 7px; font-size: 11px; }
}


/* NEXT417 — page-level Co-host invitation now asks the host to choose the
   listing first. Existing listing-level invitation forms/actions are reused;
   this is presentation + navigation only. Desktop uses a centered dialog;
   mobile becomes a bottom sheet for a natural app-like selection flow. */
html.listo-cohost-picker-open { overflow: hidden; }
.listo-cohost-listing-picker[open] {
  width: min(720px, calc(100% - 32px));
  max-width: 720px;
  max-height: min(86vh, 760px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(15, 23, 42, .22);
  overflow: hidden;
}
.listo-cohost-listing-picker::backdrop {
  background: rgba(15, 22, 24, .45);
  backdrop-filter: blur(2px);
}
.listo-cohost-listing-picker__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(86vh, 760px);
  padding: 28px;
}
.listo-cohost-listing-picker__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-alt, #f5f7f8);
  color: var(--ink);
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}
.listo-cohost-listing-picker__close:hover { background: #edf1f3; }
.listo-cohost-listing-picker__handle { display: none; }
.listo-cohost-listing-picker h2 {
  margin: 0 44px 6px 0;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.listo-cohost-listing-picker__intro {
  margin: 0 44px 20px 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}
.listo-cohost-listing-picker__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow: auto;
  padding: 2px;
}
.listo-cohost-listing-option {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 84px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.listo-cohost-listing-option:hover {
  border-color: rgba(33, 150, 243, .45);
  box-shadow: 0 8px 22px rgba(33, 150, 243, .08);
}
.listo-cohost-listing-option:focus-visible {
  outline: 3px solid rgba(33, 150, 243, .22);
  outline-offset: 2px;
}
.listo-cohost-listing-option.is-selected {
  border-color: #2196F3;
  background: #F6FAFF;
  box-shadow: inset 0 0 0 1px #2196F3;
}
.listo-cohost-listing-option__thumb {
  width: 68px;
  height: 58px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface-alt, #f5f7f8);
  color: var(--ink-muted);
}
.listo-cohost-listing-option__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.listo-cohost-listing-option__thumb svg { width: 24px; height: 24px; }
.listo-cohost-listing-option__copy { min-width: 0; }
.listo-cohost-listing-option__copy strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listo-cohost-listing-option__copy > span {
  display: block;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}
.listo-cohost-listing-option__check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--border-strong, #c9ced1);
  border-radius: 50%;
  color: transparent;
  font-size: 13px;
  font-weight: 800;
}
.listo-cohost-listing-option.is-selected .listo-cohost-listing-option__check {
  border-color: #2196F3;
  background: #2196F3;
  color: #fff;
}
.listo-cohost-listing-picker__actions {
  display: grid;
  grid-template-columns: minmax(120px, .75fr) minmax(160px, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.listo-cohost-listing-picker__actions .listo-btn { min-height: 46px; justify-content: center; }
.listo-cohost-listing-picker__actions .listo-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
@media (max-width: 700px) {
  .listo-cohost-listing-picker[open] {
    width: 100%;
    max-width: none;
    max-height: 88vh;
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 60px rgba(15, 23, 42, .18);
  }
  .listo-cohost-listing-picker__inner {
    max-height: 88vh;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .listo-cohost-listing-picker__handle {
    display: block;
    width: 42px;
    height: 4px;
    margin: 0 auto 16px;
    border-radius: 999px;
    background: #cfd5d8;
  }
  .listo-cohost-listing-picker__close { top: 12px; right: 12px; width: 36px; height: 36px; }
  .listo-cohost-listing-picker h2 { margin-right: 40px; font-size: 21px; }
  .listo-cohost-listing-picker__intro { margin-right: 36px; margin-bottom: 16px; font-size: 13px; }
  .listo-cohost-listing-picker__options { grid-template-columns: 1fr; gap: 9px; max-height: 58vh; padding: 2px; }
  .listo-cohost-listing-option { grid-template-columns: 60px minmax(0, 1fr) 24px; min-height: 76px; padding: 8px; }
  .listo-cohost-listing-option__thumb { width: 60px; height: 54px; }
  .listo-cohost-listing-option__copy strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .listo-cohost-listing-picker__actions { grid-template-columns: 1fr 1fr; margin-top: 14px; }
}
@media (max-width: 420px) {
  .listo-cohost-listing-picker__actions { grid-template-columns: 1fr; }
  .listo-cohost-listing-picker__actions .listo-btn:first-child { order: 2; }
}

/* ==========================================================================\n   NEXT422 — Marketplace navigation + Parking vertical\n   App-like, touch-friendly, responsive. Parking styles are isolated from\n   the existing Stay listing/booking UI.\n   ========================================================================== */

.listo-market-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 30px;
  flex: 1 1 auto;
  min-width: 0;
  height: 64px;
  margin: 0 28px;
}

.listo-market-nav__item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 70px;
  padding: 7px 6px 8px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .16s ease, transform .16s ease;
}
.listo-market-nav__item:hover { color: var(--ink); }
.listo-market-nav__item:active { transform: translateY(1px); }
.listo-market-nav__item.is-active { color: var(--ink); }
.listo-market-nav__item.is-active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--listo-green);
}
.listo-market-nav__icon { display: grid; place-items: center; width: 28px; height: 28px; }
.listo-market-nav__icon svg { width: 25px; height: 25px; }

/* Parking marketplace shell */
.listo-parking-page,
.listo-parking-owner-page,
.listo-parking-detail,
.listo-marketplace-placeholder { background: #fff; min-height: calc(100vh - 70px); }
.listo-parking-container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.listo-parking-hero {
  padding: 58px 0 42px;
  background: linear-gradient(180deg, #f5faff 0%, #fff 100%);
  border-bottom: 1px solid #edf2f7;
}
.listo-parking-hero__copy { max-width: 720px; }
.listo-parking-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
  color: var(--listo-green-dark);
  margin-bottom: 10px;
}
.listo-parking-hero h1,
.listo-parking-owner-head__title h1,
.listo-marketplace-placeholder h1 { font-size: clamp(32px, 5vw, 48px); letter-spacing: -.035em; margin: 0 0 10px; }
.listo-parking-hero p,
.listo-parking-owner-head__title p,
.listo-marketplace-placeholder p { margin: 0; color: var(--ink-muted); font-size: 16px; }

.listo-parking-search {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, .8fr) auto;
  align-items: center;
  gap: 0;
  margin-top: 28px;
  padding: 7px;
  background: #fff;
  border: 1px solid #e2e8ef;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(26,26,26,.08);
}
.listo-parking-search__field { min-width: 0; padding: 8px 20px; border-right: 1px solid #e5e8eb; }
.listo-parking-search__field span { display: block; font-size: 11px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.listo-parking-search__field input,
.listo-parking-search__field select { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink-muted); font: inherit; padding: 0; min-height: 22px; }
.listo-parking-search__field select { cursor: pointer; }
.listo-parking-search__submit { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--listo-green); color: #fff; font-weight: 700; cursor: pointer; }
.listo-parking-search__submit:hover { background: var(--listo-green-dark); }
.listo-parking-search__submit svg { width: 18px; height: 18px; }

.listo-parking-content { padding: 42px 0 70px; }
.listo-parking-section__head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.listo-parking-section__head h2 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 5px; }
.listo-parking-section__head p { margin: 0; color: var(--ink-muted); }
.listo-parking-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 18px; }
.listo-parking-card { min-width: 0; }
.listo-parking-card__media { display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #eef5fb; }
.listo-parking-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.listo-parking-card__media:hover img { transform: scale(1.025); }
.listo-parking-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(145deg, #eef7ff, #f8fbfe); color: var(--listo-green-dark); }
.listo-parking-card__placeholder svg { width: 46px; height: 46px; }
.listo-parking-card__body { padding: 11px 4px 0; }
.listo-parking-card__body h3 { font-size: 15px; line-height: 1.3; margin: 0 0 4px; }
.listo-parking-card__location { margin: 0; color: var(--ink-muted); font-size: 13px; }
.listo-parking-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 10px; }
.listo-parking-card__tags span { padding: 4px 8px; border-radius: 999px; background: #f2f5f7; color: #4e5963; font-size: 11px; font-weight: 600; }
.listo-parking-card__price { display: flex; align-items: baseline; gap: 4px; font-size: 13px; color: var(--ink-muted); }
.listo-parking-card__price strong { color: var(--ink); font-size: 15px; }

.listo-parking-empty { max-width: 620px; margin: 18px auto 48px; padding: 48px 28px; text-align: center; border: 1px solid #e7edf3; border-radius: 24px; background: #fbfdff; }
.listo-parking-empty__icon { width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 18px; display: grid; place-items: center; background: var(--listo-green-tint); color: var(--listo-green-dark); }
.listo-parking-empty__icon svg { width: 30px; height: 30px; }
.listo-parking-empty h3 { margin: 0 0 8px; font-size: 20px; }
.listo-parking-empty p { margin: 0 auto 20px; max-width: 480px; color: var(--ink-muted); }

.listo-parking-owner-callout { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; margin-top: 54px; padding: 24px; border: 1px solid #e1ebf4; border-radius: 22px; background: #f7fbff; }
.listo-parking-owner-callout__icon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: #fff; color: var(--listo-green-dark); box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.listo-parking-owner-callout__icon svg { width: 25px; height: 25px; }
.listo-parking-owner-callout h2 { margin: 0 0 4px; font-size: 18px; }
.listo-parking-owner-callout p { margin: 0; color: var(--ink-muted); font-size: 14px; }

/* Parking owner app */
.listo-parking-owner-page { padding: 42px 0 72px; }
.listo-parking-owner-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.listo-parking-owner-head__title { min-width: 0; }
.listo-parking-owner-head__title h1 { font-size: clamp(30px, 4vw, 42px); }
.listo-parking-owner-toolbar > .listo-btn { flex-shrink: 0; }
.listo-parking-owner-toolbar > .listo-btn span { font-size: 19px; line-height: 1; }
.listo-parking-owner-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.listo-parking-owner-stats > div { padding: 18px 20px; border: 1px solid #e7edf3; border-radius: 18px; background: #fff; }
.listo-parking-owner-stats span { display: block; color: var(--ink-muted); font-size: 12px; font-weight: 600; }
.listo-parking-owner-stats strong { display: block; margin-top: 5px; font-size: 27px; letter-spacing: -.02em; }
.listo-parking-owner-list { display: grid; gap: 12px; }
.listo-parking-owner-card { display: grid; grid-template-columns: 128px minmax(0,1fr) auto; align-items: center; gap: 18px; padding: 12px; border: 1px solid #e4e9ee; border-radius: 20px; background: #fff; }
.listo-parking-owner-card__media { width: 128px; aspect-ratio: 4 / 3; border-radius: 13px; overflow: hidden; background: #eef5fb; }
.listo-parking-owner-card__media img { width: 100%; height: 100%; object-fit: cover; }
.listo-parking-owner-card__media .listo-parking-card__placeholder { min-height: 96px; }
.listo-parking-owner-card__body h2 { margin: 3px 0 2px; font-size: 17px; }
.listo-parking-owner-card__body p { margin: 0 0 5px; color: var(--ink-muted); font-size: 13px; }
.listo-parking-owner-card__body > strong { font-size: 14px; }
.listo-parking-status { color: var(--listo-green-dark); font-size: 11px; font-weight: 700; }
.listo-parking-owner-card__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.listo-parking-owner-card__actions span { color: var(--ink-muted); font-size: 11px; text-align: right; max-width: 180px; }
.listo-parking-owner-empty { max-width: 620px; margin: 24px auto; padding: 50px 30px; text-align: center; border: 1px solid #e7edf3; border-radius: 24px; }
.listo-parking-owner-empty h2 { margin-bottom: 7px; }
.listo-parking-owner-empty p { color: var(--ink-muted); margin: 0 auto 20px; max-width: 500px; }
.listo-parking-success,
.listo-parking-alert { padding: 13px 16px; border-radius: 14px; margin: 0 0 18px; font-size: 14px; }
.listo-parking-success { background: #effaf4; color: #17643d; border: 1px solid #cdebd9; }
.listo-parking-alert { background: #fff6f6; color: #8d2f2f; border: 1px solid #f0d1d1; }

/* Parking owner creation wizard */
.listo-parking-form-page { padding: 30px 0 90px; }
.listo-parking-owner-head { margin-bottom: 28px; }
.listo-parking-back { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-muted); font-size: 13px; font-weight: 700; margin-bottom: 22px; }
.listo-parking-back:hover { color: var(--ink); }
.listo-parking-form { max-width: 820px; }
.listo-parking-form-card { padding: 24px; border: 1px solid #e5eaf0; border-radius: 22px; background: #fff; box-shadow: 0 4px 18px rgba(26,26,26,.035); margin-bottom: 14px; }
.listo-parking-form-card__head { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 22px; }
.listo-parking-form-card__head > span { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 10px; background: var(--listo-green-tint); color: var(--listo-green-dark); font-size: 11px; font-weight: 800; }
.listo-parking-form-card__head h2 { margin: 1px 0 3px; font-size: 18px; }
.listo-parking-form-card__head p { margin: 0; color: var(--ink-muted); font-size: 13px; }
.listo-parking-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.listo-parking-field { display: block; min-width: 0; }
.listo-parking-field > span { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; }
.listo-parking-field input,
.listo-parking-field select,
.listo-parking-field textarea { width: 100%; border: 1px solid #dfe5eb; border-radius: 12px; padding: 12px 13px; background: #fff; color: var(--ink); font: inherit; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.listo-parking-field input:focus,
.listo-parking-field select:focus,
.listo-parking-field textarea:focus { border-color: var(--listo-green); box-shadow: 0 0 0 3px rgba(33,150,243,.10); }
.listo-parking-field textarea { resize: vertical; min-height: 100px; }
.listo-parking-form-card > .listo-parking-field + .listo-parking-field { margin-top: 14px; }
.listo-parking-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.listo-parking-check { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border: 1px solid #e2e7ec; border-radius: 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.listo-parking-check input { width: 16px; height: 16px; accent-color: var(--listo-green); }
.listo-parking-info { display: flex; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 13px; background: #f7fbff; color: var(--ink-muted); font-size: 12px; }
.listo-parking-info strong { color: var(--ink); white-space: nowrap; }
.listo-parking-submitbar { position: sticky; bottom: 14px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 14px 16px; border: 1px solid #dce5ed; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 10px 28px rgba(26,26,26,.10); backdrop-filter: blur(12px); }
.listo-parking-submitbar strong,
.listo-parking-submitbar span { display: block; }
.listo-parking-submitbar strong { font-size: 13px; }
.listo-parking-submitbar span { margin-top: 2px; color: var(--ink-muted); font-size: 11px; }

/* Parking detail */
.listo-parking-detail { padding: 30px 0 80px; }
.listo-parking-detail__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, .65fr); gap: 38px; align-items: start; }
.listo-parking-detail__media { overflow: hidden; border-radius: 22px; background: #eef5fb; aspect-ratio: 16 / 9; }
.listo-parking-detail__media img { width: 100%; height: 100%; object-fit: cover; }
.listo-parking-detail__content { padding: 28px 4px; }
.listo-parking-detail__content h1 { margin-bottom: 7px; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.03em; }
.listo-parking-detail__location { color: var(--ink-muted); margin: 0 0 22px; }
.listo-parking-detail__content > p { color: #4f5962; }
.listo-parking-detail__facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 24px 0 30px; }
.listo-parking-detail__facts div { padding: 13px; border: 1px solid #e5eaf0; border-radius: 14px; }
.listo-parking-detail__facts span { display: block; color: var(--ink-muted); font-size: 11px; }
.listo-parking-detail__facts strong { display: block; margin-top: 3px; font-size: 13px; }
.listo-parking-detail__content h2 { margin-top: 28px; font-size: 19px; }
.listo-parking-detail__booking { position: sticky; top: 92px; padding: 22px; border: 1px solid #e0e7ed; border-radius: 22px; box-shadow: 0 8px 28px rgba(26,26,26,.07); background: #fff; }
.listo-parking-detail__price { display: flex; align-items: baseline; gap: 5px; margin-bottom: 18px; }
.listo-parking-detail__price strong { font-size: 25px; }
.listo-parking-detail__price span { color: var(--ink-muted); font-size: 13px; }
.listo-parking-detail__booking-fields { border: 1px solid #e0e5e9; border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.listo-parking-detail__booking-fields div { padding: 12px 13px; }
.listo-parking-detail__booking-fields div + div { border-top: 1px solid #e8ecef; }
.listo-parking-detail__booking-fields span { display: block; color: var(--ink-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.listo-parking-detail__booking-fields strong { display: block; margin-top: 2px; font-size: 13px; }
.listo-parking-detail__booking .listo-btn { width: 100%; }
.listo-parking-detail__booking-note { margin: 13px 0 0; color: var(--ink-muted); font-size: 11px; line-height: 1.5; }

.listo-marketplace-placeholder { display: grid; place-items: center; text-align: center; padding: 60px 0; }
.listo-marketplace-placeholder > .listo-parking-container { display: flex; flex-direction: column; align-items: center; }
.listo-marketplace-placeholder__icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--listo-green-tint); color: var(--listo-green-dark); margin-bottom: 18px; }
.listo-marketplace-placeholder__icon svg { width: 26px; height: 26px; }
.listo-marketplace-placeholder p { max-width: 520px; margin-bottom: 22px; }

@media (max-width: 1050px) {
  .listo-market-nav { gap: 16px; margin-inline: 14px; }
  .listo-market-nav__item { min-width: 62px; }
  .listo-parking-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .listo-header__inner { padding: 10px 18px; }
  .listo-market-nav { order: 3; flex: 0 0 100%; width: 100%; height: 58px; margin: 0; justify-content: flex-start; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .listo-market-nav::-webkit-scrollbar { display: none; }
  .listo-market-nav__item { min-width: 74px; flex: 0 0 auto; padding-inline: 7px; }
  .listo-market-nav__item.is-active::after { left: 8px; right: 8px; }
  .listo-market-nav__icon svg { width: 23px; height: 23px; }

  .listo-parking-container { width: min(100% - 32px, 680px); }
  .listo-parking-hero { padding: 38px 0 28px; }
  .listo-parking-search { grid-template-columns: 1fr auto; border-radius: 20px; padding: 8px; }
  .listo-parking-search__field { border-right: 0; border-bottom: 1px solid #e5e8eb; padding: 10px 12px; }
  .listo-parking-search__field:nth-child(2) { border-bottom: 0; }
  .listo-parking-search__submit { grid-column: 2; grid-row: 1 / span 2; width: 52px; height: 52px; padding: 0; }
  .listo-parking-search__submit span { display: none; }
  .listo-parking-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .listo-parking-owner-callout { grid-template-columns: auto 1fr; }
  .listo-parking-owner-callout .listo-btn { grid-column: 1 / -1; width: 100%; }
  .listo-parking-detail__grid { grid-template-columns: 1fr; gap: 0; }
  .listo-parking-detail__booking { position: static; }
  .listo-parking-owner-card { grid-template-columns: 92px minmax(0,1fr); }
  .listo-parking-owner-card__media { width: 92px; }
  .listo-parking-owner-card__actions { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 3px 3px; }
  .listo-parking-owner-card__actions span { text-align: left; max-width: none; }
  .listo-parking-choice-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .listo-parking-container { width: calc(100% - 24px); }
  .listo-parking-hero h1 { font-size: 34px; }
  .listo-parking-hero p { font-size: 14px; }
  .listo-parking-grid { grid-template-columns: 1fr; gap: 25px; }
  .listo-parking-card__media { aspect-ratio: 16 / 10; border-radius: 16px; }
  .listo-parking-owner-toolbar { align-items: flex-start; flex-direction: column; }
  .listo-parking-owner-toolbar > .listo-btn { width: 100%; justify-content: center; }
  .listo-parking-owner-stats { gap: 7px; }
  .listo-parking-owner-stats > div { padding: 14px 12px; border-radius: 14px; }
  .listo-parking-owner-stats strong { font-size: 23px; }
  .listo-parking-owner-card { grid-template-columns: 80px minmax(0,1fr); gap: 12px; border-radius: 16px; }
  .listo-parking-owner-card__media { width: 80px; }
  .listo-parking-owner-card__body h2 { font-size: 15px; }
  .listo-parking-form-grid { grid-template-columns: 1fr; }
  .listo-parking-form-card { padding: 18px; border-radius: 18px; }
  .listo-parking-choice-grid { grid-template-columns: 1fr 1fr; }
  .listo-parking-info { flex-direction: column; gap: 3px; }
  .listo-parking-submitbar { align-items: stretch; flex-direction: column; bottom: 8px; }
  .listo-parking-submitbar .listo-btn { width: 100%; justify-content: center; }
  .listo-parking-detail { padding-top: 18px; }
  .listo-parking-detail__media { border-radius: 16px; }
  .listo-parking-detail__content { padding-top: 22px; }
  .listo-parking-detail__facts { grid-template-columns: 1fr 1fr; }
  .listo-parking-detail__booking { border-radius: 18px; padding: 17px; }
}
body[data-listo-mode="host"] .listo-market-nav { display: none; }

/* ==========================================================================\n   NEXT423 — Lively marketplace navigation + Services landing\n   Graphic image assets are used instead of icon fonts/inline UI glyphs.\n   ========================================================================== */
.listo-market-nav__item { min-width: 96px; padding: 5px 12px 9px; gap: 0; font-size: 14px; font-weight: 600; border-radius: 20px; transition: background .18s ease, color .18s ease, transform .18s ease; }
.listo-market-nav__item:hover { background: #f7f7f7; }
.listo-market-nav__item.is-active { background: #fff; color: var(--ink); box-shadow: 0 0 0 2px #222; }
.listo-market-nav__item.is-active::after { height: 4px; left: 12px; right: 12px; bottom: -1px; background: #222; border-radius: 999px; }
.listo-market-nav__icon { width: 54px; height: 46px; margin-bottom: 1px; }
.listo-market-nav__icon img { display: block; width: 48px; height: 48px; object-fit: contain; }

.listo-marketplace-page { min-height: calc(100vh - 70px); background: #fff; }
.listo-marketplace-container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.listo-marketplace-hero { padding: 58px 0 42px; background: linear-gradient(180deg, #f7fbff 0%, #fff 100%); border-bottom: 1px solid #edf2f7; }
.listo-marketplace-eyebrow { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 999px; background: #e8f4ff; color: #1976d2; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.listo-marketplace-hero h1 { margin: 15px 0 8px; font-size: clamp(30px, 4vw, 46px); line-height: 1.05; letter-spacing: -.03em; }
.listo-marketplace-hero p { max-width: 650px; margin: 0; color: #667085; font-size: 16px; line-height: 1.6; }
.listo-marketplace-content { padding: 42px 0 72px; }
.listo-marketplace-section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 22px; }
.listo-marketplace-section-heading h2 { margin: 0 0 5px; font-size: 26px; }
.listo-marketplace-section-heading p { margin: 0; color: #667085; }
.listo-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.listo-service-card { display: grid; grid-template-columns: 150px 1fr; min-height: 205px; overflow: hidden; border: 1px solid #e7eaee; border-radius: 24px; background: #fff; box-shadow: 0 7px 24px rgba(15,23,42,.06); text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.listo-service-card:hover { transform: translateY(-3px); border-color: #cfe7fb; box-shadow: 0 14px 32px rgba(15,23,42,.10); }
.listo-service-card--parking { background: linear-gradient(135deg, #f5fbff 0%, #fff 58%); }
.listo-service-card--soon { background: #fbfcfd; }
.listo-service-card__art { display: grid; place-items: center; background: linear-gradient(145deg, #e1f3ff 0%, #f7fbff 100%); }
.listo-service-card__art--soon { background: linear-gradient(145deg, #fff1f6 0%, #f7f2ff 100%); }
.listo-service-card__copy { padding: 25px 24px 22px; }
.listo-service-card__badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: #e8f5e9; color: #2e7d32; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.listo-service-card__badge--muted { background: #f1f3f5; color: #667085; }
.listo-service-card h3 { margin: 13px 0 6px; font-size: 22px; }
.listo-service-card p { margin: 0; color: #667085; line-height: 1.5; font-size: 14px; }
.listo-service-card__link { display: inline-flex; gap: 7px; margin-top: 17px; color: #1976d2; font-size: 13px; font-weight: 800; }
.listo-marketplace-empty-card { max-width: 640px; margin: 20px auto 0; padding: 48px 28px; text-align: center; border: 1px solid #e7eaee; border-radius: 26px; box-shadow: 0 8px 28px rgba(15,23,42,.06); }
.listo-marketplace-empty-card img { margin-bottom: 12px; }
.listo-marketplace-empty-card h2 { margin: 0 0 8px; }
.listo-marketplace-empty-card p { margin: 0 auto 22px; color: #667085; max-width: 460px; line-height: 1.55; }

@media (max-width: 1050px) {
  .listo-market-nav { gap: 12px; margin-inline: 10px; }
  .listo-market-nav__item { min-width: 86px; }
}
@media (max-width: 820px) {
  .listo-market-nav { height: 68px; gap: 4px; padding: 0 4px 2px; }
  .listo-market-nav__item { min-width: 86px; padding: 4px 8px 8px; font-size: 12px; border-radius: 17px; }
  .listo-market-nav__icon { width: 48px; height: 43px; }
  .listo-market-nav__icon img { width: 44px; height: 44px; }
  .listo-market-nav__item.is-active::after { left: 10px; right: 10px; }
  .listo-marketplace-container { width: min(100% - 32px, 680px); }
  .listo-marketplace-hero { padding: 38px 0 30px; }
  .listo-marketplace-content { padding: 30px 0 54px; }
  .listo-service-grid { grid-template-columns: 1fr; gap: 14px; }
  .listo-service-card { grid-template-columns: 118px 1fr; min-height: 178px; border-radius: 20px; }
  .listo-service-card__copy { padding: 20px 18px; }
  .listo-service-card h3 { font-size: 20px; }
}
@media (max-width: 520px) {
  .listo-marketplace-container { width: calc(100% - 24px); }
  .listo-marketplace-hero h1 { font-size: 30px; }
  .listo-marketplace-hero p { font-size: 14px; }
  .listo-service-card { grid-template-columns: 100px 1fr; }
  .listo-service-card__art img { width: 82px; height: auto; }
  .listo-service-card__copy { padding: 17px 15px; }
  .listo-service-card p { font-size: 13px; }
}

/* ========================================================================
   NEXT424 — Five-marketplace navigation + Airbnb-style homepage morph
   ------------------------------------------------------------------------
   The category navigation borrows the lively visual rhythm of a modern
   marketplace without copying Airbnb's exact menu. Icons are transparent
   graphic assets so they sit naturally on the Listo header surface.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-header--homepage {
    padding-bottom: 154px;
    background: #F7FBFF;
  }

  .listo-header--homepage .listo-header__inner {
    min-height: 72px;
    flex-wrap: nowrap;
  }

  .listo-header--homepage .listo-hero {
    top: 104px;
    padding: 18px 0 34px;
  }

  .listo-header--homepage .listo-search-bar-wrap,
  .listo-header--homepage .listo-search-bar {
    width: min(860px, calc(100vw - 80px));
  }

  .listo-header--homepage .listo-market-nav {
    transition: opacity .28s ease, transform .42s cubic-bezier(.22,.61,.36,1), visibility .28s ease;
  }

  .listo-header--homepage.is-scrolled .listo-market-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
  }

  .listo-header--homepage.is-scrolled {
    padding-bottom: 0;
  }

  .listo-header--homepage.is-scrolled .listo-header__inner {
    min-height: 84px;
  }

  .listo-header--homepage.is-scrolled .listo-hero {
    top: 0;
    padding: 14px 0 16px;
  }

  .listo-header--homepage.is-scrolled .listo-search-bar-wrap,
  .listo-header--homepage.is-scrolled .listo-search-bar {
    width: min(570px, calc(100vw - 430px));
  }

  .listo-header--homepage.is-scrolled .listo-search-bar {
    height: 54px;
    min-height: 54px;
    padding: 4px 5px 4px 4px;
    border-color: #e3e6e8;
    box-shadow: 0 2px 10px rgba(26,26,26,.10);
  }

  .listo-header--homepage.is-scrolled .listo-search-trigger {
    min-height: 44px;
    padding: 6px 14px;
    flex-direction: row;
    align-items: center;
  }

  .listo-header--homepage.is-scrolled .listo-search-trigger__label,
  .listo-header--homepage.is-scrolled .listo-search-trigger__value {
    max-height: 0;
    max-width: 0;
    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
  }

  .listo-header--homepage.is-scrolled .listo-search-trigger__compact {
    left: 12px;
    opacity: 1;
    transform: translateY(-50%) scale(1);
    font-size: 14px;
    font-weight: 600;
  }

  .listo-header--homepage.is-scrolled .listo-search-trigger[data-panel="where"] {
    padding-left: 47px;
  }

  .listo-header--homepage.is-scrolled .listo-search-trigger:not(:first-of-type)::before {
    top: 22%;
    height: 56%;
    background: #e5e7e9;
  }

  .listo-header--homepage.is-scrolled .listo-search-compact-icon {
    display: grid;
    position: absolute;
    left: 9px;
    top: 50%;
    width: 31px;
    height: 31px;
    place-items: center;
    transform: translateY(-50%);
    z-index: 31;
    pointer-events: none;
  }

  .listo-header--homepage.is-scrolled .listo-search-compact-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }

  .listo-header--homepage.is-scrolled .listo-search-bar__submit {
    width: 44px;
    height: 44px;
    background: var(--listo-green);
  }
}

/* Marketplace navigation: colorful graphic assets, no icon wells. */
.listo-market-nav {
  gap: 34px;
}
.listo-market-nav__item {
  min-width: 84px;
  padding: 5px 8px 9px;
  border-radius: 14px;
  background: transparent;
}
.listo-market-nav__item:hover {
  background: rgba(255,255,255,.55);
}
.listo-market-nav__item.is-active {
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}
.listo-market-nav__item.is-active::after {
  left: 15px;
  right: 15px;
  bottom: 0;
  height: 3px;
  background: #222;
  border-radius: 999px;
}
.listo-market-nav__icon {
  width: 52px;
  height: 47px;
  margin-bottom: 2px;
}
.listo-market-nav__icon img {
  width: 45px;
  height: 45px;
  object-fit: contain;
  background: transparent;
}

/* Compact-search icon is only part of the sticky morph, never the expanded bar. */
.listo-search-compact-icon {
  display: none;
}

@media (max-width: 1050px) and (min-width: 821px) {
  .listo-market-nav { gap: 18px; margin-inline: 12px; }
  .listo-market-nav__item { min-width: 76px; }
}

@media (max-width: 820px) {
  .listo-market-nav {
    gap: 5px;
    height: 70px;
    padding: 0 6px 2px;
  }
  .listo-market-nav__item {
    min-width: 82px;
    padding: 4px 7px 8px;
    font-size: 12px;
    border-radius: 14px;
  }
  .listo-market-nav__icon {
    width: 46px;
    height: 42px;
  }
  .listo-market-nav__icon img {
    width: 42px;
    height: 42px;
  }
  .listo-market-nav__item.is-active::after {
    left: 11px;
    right: 11px;
  }
}

@media (max-width: 560px) {
  .listo-market-nav {
    gap: 2px;
    padding-inline: 3px;
  }
  .listo-market-nav__item {
    min-width: 76px;
    padding-inline: 5px;
    font-size: 11px;
  }
  .listo-market-nav__icon img {
    width: 39px;
    height: 39px;
  }
}

/* ========================================================================
   NEXT425 — Unified marketplace shell + same-document transitions
   ======================================================================== */
.listo-market-nav {
  position: relative;
  align-items: stretch;
  gap: 30px;
  padding-bottom: 4px;
}
.listo-market-nav__item {
  position: relative;
  z-index: 2;
  min-width: 86px;
  padding: 3px 8px 10px;
  background: transparent;
  border-radius: 18px;
  transition: transform .22s ease, opacity .22s ease;
}
.listo-market-nav__item:hover { background: transparent; transform: translateY(-1px); }
.listo-market-nav__item.is-active { background: transparent; box-shadow: none; }
.listo-market-nav__item.is-active::after { display: none; }
.listo-market-nav__indicator {
  position: absolute;
  z-index: 3;
  left: var(--market-indicator-left, 0px);
  bottom: 0;
  width: var(--market-indicator-width, 86px);
  height: 3px;
  border-radius: 999px;
  background: #222;
  transform: translateZ(0);
  transition: left .48s cubic-bezier(.22,.61,.36,1), width .48s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.listo-market-nav__indicator.is-no-transition { transition: none; }
.listo-market-nav__icon img { filter: drop-shadow(0 2px 1px rgba(26,26,26,.08)); }

/* The five categories and the search bar are one visual header system.
   Keep deliberate breathing room between the category row and the search. */
@media (min-width: 901px) {
  .listo-header--homepage {
    padding-bottom: 170px;
  }
  .listo-header--homepage .listo-market-nav {
    margin-top: 2px;
    margin-bottom: 28px;
  }
  .listo-header--homepage .listo-hero {
    top: 124px;
    padding: 18px 0 30px;
  }
  .listo-header--homepage .listo-search-bar-wrap,
  .listo-header--homepage .listo-search-bar {
    width: min(880px, calc(100vw - 80px));
  }

  /* On the homepage the search morphs into a compact pill while the
     marketplace row gracefully exits upward. The shared indicator remains
     the visual anchor for the category transition. */
  .listo-header--homepage.is-scrolled .listo-market-nav {
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
  }
  .listo-header--homepage.is-scrolled .listo-hero {
    top: 0;
    padding: 13px 0 14px;
  }
}

/* Same-document page transition. */
.listo-marketplace-page-root {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.listo-marketplace-page-root.is-leaving {
  opacity: 0;
  transform: translateY(8px);
}
.listo-marketplace-page-root.is-entering {
  opacity: 0;
  transform: translateY(10px);
}

@media (prefers-reduced-motion: reduce) {
  .listo-market-nav__indicator,
  .listo-marketplace-page-root,
  .listo-market-nav__item { transition: none !important; }
}

@media (max-width: 820px) {
  .listo-market-nav {
    gap: 5px;
    padding-bottom: 3px;
  }
  .listo-market-nav__item {
    min-width: 82px;
    padding: 4px 7px 8px;
  }
  .listo-market-nav__indicator { height: 3px; }
}

@media (max-width: 560px) {
  .listo-market-nav {
    gap: 2px;
    padding-bottom: 2px;
  }
  .listo-market-nav__item { min-width: 76px; }
}

.listo-marketplace-empty-card--large { max-width: 720px; padding: 58px 30px 54px; }
.listo-marketplace-empty-card--large img { filter: drop-shadow(0 4px 2px rgba(26,26,26,.08)); }
.listo-marketplace-coming-soon-badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: #eef6ff; color: #1976d2; font-size: 10px; font-weight: 800; letter-spacing: .08em; }

/* NEXT426 — Marketplace icon refresh. The category artwork is intentionally
   dimensional: soft internal gradients, highlights and cast shadows, while
   remaining transparent so it sits directly on the Listo header surface. */
.listo-market-nav__icon { width: 58px; height: 52px; margin-bottom: 1px; }
.listo-market-nav__icon img { width: 52px; height: 52px; object-fit: contain; overflow: visible; }
@media (max-width: 820px) {
  .listo-market-nav__icon { width: 48px; height: 46px; }
  .listo-market-nav__icon img { width: 46px; height: 46px; }
}

/* ========================================================================
   NEXT428 — Marketplace header spacing + icon scale refinement
   ------------------------------------------------------------------------
   Reduce the category artwork by ~25% and tighten the vertical rhythm
   between the marketplace row, search bar, and bottom of the homepage header.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-market-nav__icon {
    width: 44px;
    height: 40px;
    margin-bottom: 0;
  }
  .listo-market-nav__icon img {
    width: 39px;
    height: 39px;
  }

  .listo-header--homepage {
    padding-bottom: 120px;
  }
  .listo-header--homepage .listo-market-nav {
    margin-bottom: 12px;
  }
  .listo-header--homepage .listo-hero {
    padding-top: 10px;
    padding-bottom: 20px;
  }
}

@media (max-width: 900px) {
  .listo-market-nav__icon {
    width: 40px;
    height: 36px;
  }
  .listo-market-nav__icon img {
    width: 34px;
    height: 34px;
  }
}

/* ========================================================================
   NEXT429 — Homepage marketplace/search vertical rhythm
   ------------------------------------------------------------------------
   Bring the search bar closer to the marketplace categories and preserve
   the same compact breathing room below the search bar. This keeps the
   three-part header rhythm visually balanced: categories / search / bottom.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-header--homepage {
    padding-bottom: 80px;
  }

  .listo-header--homepage .listo-hero {
    top: 84px;
  }
}


/* ========================================================================
   NEXT430 — Global guest marketplace header + client-side category shell
   ------------------------------------------------------------------------
   The marketplace header is visually standardized across guest-facing
   pages. Homepage search behavior remains scoped to the homepage, while
   All/Stays/Parking/Experiences/Services share one persistent header shell.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-header--marketplace {
    background: #F7FBFF;
    border-bottom-color: transparent;
  }

  .listo-header--marketplace .listo-header__inner {
    min-height: 72px;
    flex-wrap: nowrap;
  }
}

@media (max-width: 900px) {
  .listo-header--marketplace {
    background: #F7FBFF;
    border-bottom-color: transparent;
  }
}

.listo-marketplace-page-root.is-leaving {
  pointer-events: none;
}


/* ========================================================================
   NEXT431 — Persistent global marketplace search
   ------------------------------------------------------------------------
   The search bar is part of the guest marketplace header itself. It is
   rendered once in header.php and remains mounted while marketplace content
   transitions between All / Stays / Parking / Experiences / Services.
   ======================================================================== */
.listo-header__marketplace-search {
  position: relative;
  width: 100%;
  background: transparent;
  padding: 8px 28px 12px;
  z-index: 4;
}
.listo-header__marketplace-search > .listo-hero {
  background: transparent;
  padding: 0;
  border: 0;
}
.listo-header__marketplace-search .listo-search-bar-wrap {
  width: min(860px, calc(100vw - 80px));
  max-width: 860px;
  margin: 0 auto;
}
.listo-header__marketplace-search .listo-search-bar {
  width: 100%;
  max-width: none;
  background: #fff;
}
.listo-header__marketplace-search .listo-search-results-searchbar-wrap,
.listo-header__marketplace-search .listo-search-results-top-bar { display: none; }

/* Homepage morphing now acts on the persistent header rather than moving a
   separate hero node into/out of the header. */
@media (min-width: 901px) {
  .listo-header--marketplace {
    background: #F7FBFF;
    padding-bottom: 0;
  }
  .listo-header--marketplace .listo-header__inner {
    min-height: 72px;
  }
  .listo-header--marketplace .listo-header__marketplace-search {
    padding-top: 6px;
    padding-bottom: 12px;
  }
  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search {
    padding-top: 8px;
    padding-bottom: 10px;
  }
  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search .listo-search-bar-wrap,
  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search .listo-search-bar {
    width: min(560px, calc(100vw - 420px));
  }
  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search .listo-search-bar {
    height: 54px;
    padding: 4px 5px;
  }
}

@media (max-width: 900px) {
  .listo-header__marketplace-search {
    padding: 4px 12px 10px;
  }
  .listo-header__marketplace-search .listo-search-bar-wrap {
    width: 100%;
    max-width: 700px;
  }
  .listo-header__marketplace-search .listo-hero {
    padding: 0;
  }
}

/* ========================================================================
   NEXT432 — Marketplace search restored inside the header container
   ------------------------------------------------------------------------
   The global search remains persistent across marketplace categories, but
   now occupies the second row of the same header container as the category
   navigation. This restores the intended visual hierarchy:
   logo / categories / account -> search -> marketplace content.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-header--marketplace .listo-header__inner {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
    padding-bottom: 14px;
  }

  .listo-header--marketplace .listo-header__marketplace-search {
    order: 20;
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0 4px;
  }

  .listo-header--marketplace .listo-header__marketplace-search .listo-search-bar-wrap {
    width: min(880px, calc(100vw - 80px));
    max-width: 880px;
  }

  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search {
    padding-top: 6px;
    padding-bottom: 2px;
  }
}

@media (max-width: 900px) {
  .listo-header--marketplace .listo-header__inner {
    row-gap: 0;
  }

  .listo-header--marketplace .listo-header__marketplace-search {
    order: 20;
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ========================================================================
   NEXT433 — Marketplace header normalization + nav focus cleanup
   ------------------------------------------------------------------------
   The global marketplace search must render identically on All / Stays /
   Parking / Experiences / Services. Older homepage-only header rules are
   intentionally neutralized when the persistent marketplace search exists.
   Category links are transparent artwork controls; they must never render a
   rounded focus/active container around an icon.
   ======================================================================== */

@media (min-width: 901px) {
  /* The marketplace shell owns its two-row layout, even on the homepage.
     This prevents legacy homepage hero positioning from taking control of
     the persistent global search. */
  .listo-header--marketplace .listo-header__inner {
    position: relative;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 72px;
    padding-bottom: 14px;
    pointer-events: auto;
  }

  .listo-header--marketplace .listo-header__inner > * {
    pointer-events: auto;
  }

  .listo-header--marketplace .listo-market-nav {
    position: relative;
    flex: 1 1 auto;
    order: 10;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    margin-bottom: 0;
  }

  .listo-header--marketplace .listo-header__marketplace-search {
    position: relative;
    order: 20;
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    top: auto;
    left: auto;
    padding: 8px 0 4px;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .listo-header--marketplace .listo-header__marketplace-search > .listo-hero,
  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search > .listo-hero {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-height: none;
    padding: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .listo-header--marketplace .listo-header__marketplace-search .listo-search-bar-wrap,
  .listo-header--marketplace .listo-header__marketplace-search .listo-search-bar {
    width: min(880px, calc(100vw - 80px));
    max-width: 880px;
  }

  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search {
    padding-top: 6px;
    padding-bottom: 2px;
  }

  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search .listo-search-bar-wrap,
  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search .listo-search-bar {
    width: min(560px, calc(100vw - 420px));
    max-width: none;
  }
}

/* No rounded focus/selection container around marketplace artwork. The
   moving underline remains the active-state affordance. */
.listo-market-nav__item:focus,
.listo-market-nav__item:focus-visible,
.listo-market-nav__item:active {
  outline: none;
  box-shadow: none;
  background: transparent;
}

.listo-market-nav__item:hover {
  background: transparent;
}

@media (max-width: 900px) {
  .listo-header--marketplace .listo-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
    padding-bottom: 10px;
  }

  .listo-header--marketplace .listo-market-nav {
    order: 10;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .listo-header--marketplace .listo-header__marketplace-search {
    order: 20;
    flex: 0 0 100%;
    width: 100%;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .listo-header--marketplace .listo-header__marketplace-search > .listo-hero {
    position: relative;
    top: auto;
    left: auto;
    padding: 0;
    transform: none;
    max-height: none;
    opacity: 1;
    visibility: visible;
  }
}


/* ========================================================================
   NEXT434 — Restore marketplace header action positions
   ------------------------------------------------------------------------
   Keep the marketplace category navigation centered between the Listo logo
   and the right-side host/menu controls. The persistent search remains on
   its own second row. The previous flex ordering accidentally left the
   logged-out controls immediately beside the logo.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-header--marketplace .listo-header__inner > .listo-logo {
    order: 1;
  }

  .listo-header--marketplace .listo-market-nav {
    order: 10;
  }

  .listo-header--marketplace .listo-header__account-group,
  .listo-header--marketplace .listo-header__logged-out-group {
    order: 20;
    flex-shrink: 0;
  }

  .listo-header--marketplace .listo-header__marketplace-search {
    order: 30;
  }
}

/* ========================================================================
   NEXT435 — Add breathing room between marketplace menu and search
   ------------------------------------------------------------------------
   Keep the NEXT434 header arrangement intact. Add a small amount of vertical
   space above the persistent search so the category row, especially Services,
   does not feel pressed against the search row.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-header--marketplace .listo-header__marketplace-search {
    padding-top: 14px;
  }

  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search {
    padding-top: 10px;
  }
}

@media (max-width: 900px) {
  .listo-header--marketplace .listo-header__marketplace-search {
    padding-top: 8px;
  }
}

/* ========================================================================
   NEXT436 — Add 6px vertical breathing room around marketplace search
   ------------------------------------------------------------------------
   Keep the NEXT435 layout and header positions unchanged. Increase the
   spacing above and below the persistent search row by exactly 6px so the
   search bar has clearer separation from both the category row and the
   content/header boundary.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-header--marketplace .listo-header__marketplace-search {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search {
    padding-top: 16px;
    padding-bottom: 8px;
  }
}

@media (max-width: 900px) {
  .listo-header--marketplace .listo-header__marketplace-search {
    padding-top: 14px;
    padding-bottom: 10px;
  }
}

/* ========================================================================
   NEXT437 — Marketplace search bottom breathing room
   ------------------------------------------------------------------------
   Keep the NEXT436 top spacing and add exactly 6px more to the bottom
   spacing around the persistent marketplace search.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-header--marketplace .listo-header__marketplace-search {
    padding-bottom: 16px;
  }

  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search {
    padding-bottom: 14px;
  }
}

@media (max-width: 900px) {
  .listo-header--marketplace .listo-header__marketplace-search {
    padding-bottom: 16px;
  }
}

/* ========================================================================
   NEXT438 — Marketplace search bottom spacing + header divider
   ------------------------------------------------------------------------
   Keep the NEXT437 layout intact. Add exactly 12px more below the search
   area, then add a subtle Airbnb-inspired light-grey divider at the bottom
   of the marketplace header.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-header--marketplace .listo-header__marketplace-search {
    padding-bottom: 28px;
  }

  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search {
    padding-bottom: 26px;
  }
}

@media (max-width: 900px) {
  .listo-header--marketplace .listo-header__marketplace-search {
    padding-bottom: 28px;
  }
}

.listo-header--marketplace {
  border-bottom: 2px solid #e7e7e7;
}


/* ========================================================================
   NEXT439 — Restore marketplace-wide search/header morph
   ------------------------------------------------------------------------
   Reapply the established homepage morph to the persistent marketplace
   header so All / Stays / Parking / Experiences / Services share the same
   compact-on-scroll interaction. The category row gracefully fades upward
   while the search pill narrows into the compact form.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-header--marketplace .listo-market-nav {
    transition: opacity .28s ease, transform .42s cubic-bezier(.22,.61,.36,1), visibility .28s ease;
  }

  .listo-header--marketplace .listo-header__marketplace-search,
  .listo-header--marketplace .listo-header__marketplace-search > .listo-hero,
  .listo-header--marketplace .listo-header__marketplace-search .listo-search-bar-wrap,
  .listo-header--marketplace .listo-header__marketplace-search .listo-search-bar {
    transition:
      width .42s cubic-bezier(.22,.61,.36,1),
      max-width .42s cubic-bezier(.22,.61,.36,1),
      padding .32s ease,
      height .32s ease,
      min-height .32s ease,
      box-shadow .28s ease,
      border-color .28s ease;
  }

  .listo-header--marketplace.is-scrolled .listo-market-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-14px);
  }

  .listo-header--marketplace.is-scrolled .listo-header__inner {
    min-height: 84px;
  }

  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search {
    padding-top: 13px;
    padding-bottom: 26px;
  }

  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search .listo-search-bar-wrap,
  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search .listo-search-bar {
    width: min(570px, calc(100vw - 430px));
    max-width: 570px;
  }

  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search .listo-search-bar {
    height: 54px;
    min-height: 54px;
    padding: 4px 5px 4px 4px;
    border-color: #e3e6e8;
    box-shadow: 0 2px 10px rgba(26,26,26,.10);
  }

  .listo-header--marketplace.is-scrolled .listo-search-trigger {
    min-height: 44px;
    padding: 6px 14px;
    flex-direction: row;
    align-items: center;
  }

  .listo-header--marketplace.is-scrolled .listo-search-trigger__label,
  .listo-header--marketplace.is-scrolled .listo-search-trigger__value {
    max-height: 0;
    max-width: 0;
    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
  }

  .listo-header--marketplace.is-scrolled .listo-search-trigger__compact {
    left: 12px;
    opacity: 1;
    transform: translateY(-50%) scale(1);
    font-size: 14px;
    font-weight: 600;
  }

  .listo-header--marketplace.is-scrolled .listo-search-trigger[data-panel="where"] {
    padding-left: 47px;
  }

  .listo-header--marketplace.is-scrolled .listo-search-trigger:not(:first-of-type)::before {
    top: 22%;
    height: 56%;
    background: #e5e7e9;
  }

  .listo-header--marketplace.is-scrolled .listo-search-compact-icon {
    display: grid;
    position: absolute;
    left: 9px;
    top: 50%;
    width: 31px;
    height: 31px;
    place-items: center;
    transform: translateY(-50%);
    z-index: 31;
    pointer-events: none;
  }

  .listo-header--marketplace.is-scrolled .listo-search-compact-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }

  .listo-header--marketplace.is-scrolled .listo-search-bar__submit {
    width: 44px;
    height: 44px;
  }
}


/* ========================================================================
   NEXT441 — Marketplace morph alignment + category-aware compact icon
   ------------------------------------------------------------------------
   The compact marketplace search belongs in the same horizontal header row
   as the Listo logo and right-side account/menu controls. Its artwork follows
   the active marketplace category instead of always using the Stay icon.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-header--marketplace.is-scrolled .listo-header__inner {
    position: relative;
    flex-wrap: nowrap;
    min-height: 84px;
    padding-bottom: 0;
    align-items: center;
  }

  .listo-header--marketplace.is-scrolled .listo-header__inner > .listo-logo {
    order: 1;
    flex: 0 0 auto;
  }

  .listo-header--marketplace.is-scrolled .listo-market-nav {
    order: 10;
    flex: 1 1 auto;
    min-width: 0;
  }

  .listo-header--marketplace.is-scrolled .listo-header__account-group,
  .listo-header--marketplace.is-scrolled .listo-header__logged-out-group {
    order: 20;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50%;
    width: min(570px, calc(100vw - 520px));
    flex: 0 0 auto;
    padding: 0;
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }

  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search > .listo-hero,
  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search .listo-search-bar-wrap,
  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search .listo-search-bar {
    width: 100%;
    max-width: none;
  }

  .listo-header--marketplace.is-scrolled .listo-search-trigger[data-panel="where"] {
    padding-left: 54px;
  }

  .listo-header--marketplace.is-scrolled .listo-search-trigger[data-panel="where"] .listo-search-trigger__compact {
    left: 50px;
  }

  .listo-header--marketplace.is-scrolled .listo-search-compact-icon {
    left: 9px;
  }

  .listo-header--marketplace.is-scrolled .listo-search-compact-icon img {
    width: 30px;
    height: 30px;
  }
}

/* ========================================================================
   NEXT442 — Marketplace pages use their actual content height
   ------------------------------------------------------------------------
   Do not reserve viewport-height space for one marketplace route and carry
   that visual footprint into another route during the lightweight SPA
   transition. Each All / Stays / Parking / Experiences / Services page
   should end where its actual content ends; the shared footer follows the
   current page naturally.
   ======================================================================== */
.listo-marketplace-page-root,
.listo-marketplace-page,
.listo-marketplace-placeholder,
.listo-parking-page {
  min-height: auto !important;
  height: auto !important;
}


/* ========================================================================
   NEXT443 — Marketplace route height hardening + Homes terminology
   ------------------------------------------------------------------------
   Marketplace navigation is a lightweight same-document transition. Never
   let a previous route's viewport-height/min-height footprint persist in the
   shared main or the homepage root when returning to Homes. The content
   determines the document height; the footer follows the actual content.
   Internal routing keys remain "stays" for backward compatibility.
   ======================================================================== */
body:has(#listo-marketplace-page-root) .listo-main,
body:has(#listo-marketplace-page-root) #listo-marketplace-page-root,
body:has(#listo-marketplace-page-root) .listo-homepage-content,
body:has(#listo-marketplace-page-root) .listo-marketplace-page,
body:has(#listo-marketplace-page-root) .listo-marketplace-placeholder,
body:has(#listo-marketplace-page-root) .listo-parking-page {
  min-height: 0 !important;
  height: auto !important;
}

@media (max-width: 900px) {
  body:has(#listo-marketplace-page-root) .listo-main {
    min-height: 0 !important;
  }
}

/* ========================================================================
   NEXT444 — Homes marketplace natural document height
   ------------------------------------------------------------------------
   Keep the public marketplace document strictly content-driven. The
   marketplace SPA swaps only #listo-marketplace-page-root, so neither the
   previous route nor a viewport-sized document shell should leave a stale
   vertical footprint after the footer. Do not alter the footer's visual
   spacing; only remove any height/min-height constraint from the document
   flow on marketplace routes.
   ======================================================================== */
html:has(#listo-marketplace-page-root),
body:has(#listo-marketplace-page-root) {
  height: auto !important;
  min-height: 0 !important;
}

body:has(#listo-marketplace-page-root) .listo-main,
body:has(#listo-marketplace-page-root) #listo-marketplace-page-root,
body:has(#listo-marketplace-page-root) .listo-footer,
body:has(#listo-marketplace-page-root) .listo-footer .listo-container,
body:has(#listo-marketplace-page-root) .listo-footer .listo-section {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body:has(#listo-marketplace-page-root) .listo-main {
  overflow: visible !important;
}

body:has(#listo-marketplace-page-root) .listo-footer {
  position: static !important;
  margin-top: 0 !important;
}


/* ========================================================================
   NEXT445 — Dedicated Homes route + strict marketplace document flow
   ------------------------------------------------------------------------
   All remains the root URL (/). Homes is a dedicated /homes/ page that
   renders the same homepage content. Marketplace pages must never inherit a
   viewport-sized flex/height footprint from another route; the document
   ends immediately after the actual footer content.
   ======================================================================== */
@supports selector(body:has(*)) {
  html:has(#listo-marketplace-page-root),
  body:has(#listo-marketplace-page-root) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
  }

  body:has(#listo-marketplace-page-root) .listo-main,
  body:has(#listo-marketplace-page-root) #listo-marketplace-page-root,
  body:has(#listo-marketplace-page-root) .listo-homepage-content,
  body:has(#listo-marketplace-page-root) .listo-marketplace-page,
  body:has(#listo-marketplace-page-root) .listo-marketplace-placeholder,
  body:has(#listo-marketplace-page-root) .listo-parking-page,
  body:has(#listo-marketplace-page-root) .listo-footer,
  body:has(#listo-marketplace-page-root) .listo-footer > .listo-container,
  body:has(#listo-marketplace-page-root) .listo-footer > .listo-container > .listo-section {
    display: block !important;
    position: static !important;
    float: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 0 !important;
  }

  body:has(#listo-marketplace-page-root) .listo-main {
    padding-bottom: 0 !important;
    overflow: visible !important;
  }

  body:has(#listo-marketplace-page-root) .listo-footer {
    padding-bottom: 32px !important;
    overflow: visible !important;
  }
}


/* ========================================================================
   NEXT446 — Marketplace footer/document flow
   ------------------------------------------------------------------------
   The shared footer inherits .listo-section's generous section padding.
   On short marketplace pages this makes the footer visually look as if a
   large empty area continues below it. Marketplace pages use a compact,
   content-sized footer while all other site pages retain the existing
   footer treatment.
   ======================================================================== */
@supports selector(body:has(*)) {
  body:has(#listo-marketplace-page-root) .listo-footer {
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    display: block !important;
  }

  body:has(#listo-marketplace-page-root) .listo-footer > .listo-container.listo-section,
  body:has(#listo-marketplace-page-root) .listo-footer > .listo-container.listo-section.listo-section {
    padding: 32px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  @media (max-width: 480px) {
    body:has(#listo-marketplace-page-root) .listo-footer > .listo-container.listo-section,
    body:has(#listo-marketplace-page-root) .listo-footer > .listo-container.listo-section.listo-section {
      padding: 24px !important;
    }
  }
}

/* ========================================================================
   NEXT447 — Apply Parking's natural footer flow to All + Homes
   ------------------------------------------------------------------------
   Parking / Experiences / Services already terminate naturally after their
   footer. Apply the same strict content-flow treatment to the homepage and
   dedicated Homes route without changing the shared footer design or the
   rest of the site.
   ======================================================================== */
@supports selector(body:has(*)) {
  body:has(#listo-marketplace-page-root .listo-homepage-content) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body:has(#listo-marketplace-page-root .listo-homepage-content) .listo-main,
  body:has(#listo-marketplace-page-root .listo-homepage-content) #listo-marketplace-page-root,
  body:has(#listo-marketplace-page-root .listo-homepage-content) .listo-homepage-content {
    display: flow-root !important;
    position: static !important;
    float: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
  }

  body:has(#listo-marketplace-page-root .listo-homepage-content) .listo-footer {
    clear: both !important;
    position: static !important;
    float: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:has(#listo-marketplace-page-root .listo-homepage-content) .listo-footer > .listo-container.listo-section {
    display: block !important;
    position: static !important;
    float: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 32px !important;
    overflow: visible !important;
  }

  body:has(#listo-marketplace-page-root .listo-homepage-content) .listo-homepage-content::after {
    content: "";
    display: table;
    clear: both;
  }

  @media (max-width: 480px) {
    body:has(#listo-marketplace-page-root .listo-homepage-content) .listo-footer > .listo-container.listo-section {
      padding: 24px !important;
    }
  }
}


/* ========================================================================
   NEXT448 — Marketplace route transitions keep document flow content-sized
   ------------------------------------------------------------------------
   All/Homes can be reached after another marketplace route through the
   lightweight SPA transition. Keep the shell from re-adopting a viewport
   footprint between swaps; the JS transition also writes explicit inline
   flow values so this remains robust against route-level styles.
   ======================================================================== */
@supports selector(body:has(*)) {
  body:has(#listo-marketplace-page-root) .listo-main,
  body:has(#listo-marketplace-page-root) #listo-marketplace-page-root,
  body:has(#listo-marketplace-page-root) .listo-footer {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* ========================================================================
   NEXT453 — Price transparency notice lower directory placement
   Keep the existing animated notice intact. Position it below the listing
   prices on typical directory viewports without changing page layout.
   ======================================================================== */
.listo-price-transparency-notice {
  bottom: clamp(64px, 8vh, 88px);
}

@media (max-width: 900px) {
  .listo-price-transparency-notice {
    bottom: clamp(64px, 9vh, 88px);
  }
}

.listo-price-transparency-notice__icon {
  background: transparent;
  color: inherit;
}

.listo-price-transparency-notice__icon svg {
  width: 34px;
  height: 34px;
  overflow: visible;
}

/* ========================================================================
   NEXT455 — Mobile marketplace shell: search + service pills + bottom nav
   ------------------------------------------------------------------------
   Rebuild only the logged-out mobile homepage shell. The desktop marketplace
   header remains untouched. On mobile, keep the existing collapsed search
   interaction visible at the top, place the five marketplace destinations
   immediately below it as tactile pills, hide the public footer, and keep
   the existing three-item Explore / Favorites / Log in navigation fixed to
   the bottom of the viewport.
   ======================================================================== */
@media (max-width: 900px) {
  /* The mobile homepage previously hid the entire header in order to make
     room for the old mobile search treatment. Keep the header shell, but
     expose only the search + marketplace controls. */
  .listo-header--mobile-hero {
    display: block !important;
    background: #fff !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  .listo-header--mobile-hero .listo-header__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    padding: 18px 16px 10px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  /* Keep the old mobile app-like treatment: no desktop logo/account row. */
  .listo-header--mobile-hero .listo-header__inner > .listo-logo,
  .listo-header--mobile-hero .listo-header__account-group,
  .listo-header--mobile-hero .listo-header__logged-out-group {
    display: none !important;
  }

  /* The full three-field desktop form stays hidden on mobile. The existing
     collapsed pill is the intended mobile search entry point and opens the
     same full-screen search modal already wired by homepage.js. */
  .listo-header--mobile-hero .listo-header__marketplace-search {
    display: block !important;
    order: 1 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .listo-header--mobile-hero .listo-header__marketplace-search > .listo-hero {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .listo-header--mobile-hero .listo-header__marketplace-search .listo-container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .listo-header--mobile-hero .listo-search-bar-wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .listo-header--mobile-hero .listo-search-collapsed {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 56px;
    box-sizing: border-box;
    justify-content: flex-start;
    padding: 0 22px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e2e5e8;
    box-shadow: 0 2px 8px rgba(26,26,26,.08), 0 1px 2px rgba(26,26,26,.04);
    font-size: 15px;
    font-weight: 700;
  }

  .listo-header--mobile-hero .listo-search-collapsed::after {
    content: 'Start your search';
  }

  /* Hide the PHP-generated summary text while preserving the same button
     and click handler. */
  .listo-header--mobile-hero .listo-search-collapsed {
    font-size: 0;
  }

  .listo-header--mobile-hero .listo-search-collapsed svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-right: 2px;
  }

  .listo-header--mobile-hero .listo-search-collapsed::after {
    font-size: 15px;
    line-height: 1;
  }

  /* The existing marketplace nav becomes the horizontal, tactile category
     strip. Keep the same Listo dimensional icons and route/data attributes. */
  .listo-header--mobile-hero .listo-market-nav {
    order: 2 !important;
    display: flex !important;
    width: calc(100vw - 32px) !important;
    max-width: none !important;
    height: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 2px 2px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .listo-header--mobile-hero .listo-market-nav::-webkit-scrollbar {
    display: none;
  }

  .listo-header--mobile-hero .listo-market-nav__item {
    position: relative;
    flex: 0 0 auto !important;
    min-width: auto !important;
    width: auto !important;
    height: 58px;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 17px !important;
    border: 1px solid #e2e5e8 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--ink) !important;
    box-shadow: 0 2px 5px rgba(26,26,26,.09), 0 1px 2px rgba(26,26,26,.05) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    transform: translateY(0) scale(1);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease !important;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .listo-header--mobile-hero .listo-market-nav__item::after {
    display: none !important;
  }

  .listo-header--mobile-hero .listo-market-nav__item:hover {
    background: #fff !important;
    color: var(--ink) !important;
    transform: translateY(0) !important;
  }

  /* Physical pressed/inset effect requested for touch. */
  .listo-header--mobile-hero .listo-market-nav__item:active,
  .listo-header--mobile-hero .listo-market-nav__item.is-pressed {
    transform: translateY(2px) scale(.985) !important;
    background: #f5f6f7 !important;
    border-color: #d7dade !important;
    box-shadow: inset 0 2px 5px rgba(26,26,26,.13), inset 0 0 0 1px rgba(26,26,26,.025) !important;
  }

  .listo-header--mobile-hero .listo-market-nav__item.is-active {
    background: #fff !important;
    color: var(--ink) !important;
    border-color: #dfe3e6 !important;
    box-shadow: inset 0 1px 2px rgba(26,26,26,.05), 0 2px 5px rgba(26,26,26,.09) !important;
  }

  .listo-header--mobile-hero .listo-market-nav__icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    margin: 0 !important;
  }

  .listo-header--mobile-hero .listo-market-nav__icon img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain;
  }

  /* The search/navigation shell should breathe before the first homepage
     row, without recreating the old oversized mobile header. */
  .listo-header--mobile-hero + .listo-main {
    padding-top: 8px;
  }

  /* Mobile marketplace footer is replaced by the fixed three-item app nav. */
  .listo-header--mobile-hero ~ .listo-footer,
  body:has(#listo-marketplace-page-root) .listo-footer {
    display: none !important;
  }

  /* The existing three-item nav is the only mobile bottom navigation.
     Keep it fixed to the viewport and reserve only its real height. */
  .listo-mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-height: 64px;
    z-index: 1000 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    background: rgba(255,255,255,.98) !important;
    border-top: 1px solid #e5e7e9 !important;
    box-shadow: 0 -4px 14px rgba(26,26,26,.05) !important;
    padding: 0 env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0) !important;
  }

  .listo-mobile-bottom-nav__item {
    flex: 1 1 0 !important;
    width: 33.333% !important;
    max-width: 140px;
    min-height: 64px;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px 7px !important;
    font-size: 11px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
  }

  .listo-mobile-bottom-nav__item:active {
    transform: translateY(1px);
  }

  .listo-mobile-bottom-nav-spacer {
    display: block !important;
    height: 72px !important;
  }
}

/* ========================================================================
   NEXT657 — Persistent mobile marketplace shell for service pages
   ------------------------------------------------------------------------
   Keep logged-out Parking / Experiences / Services in the same mobile shell
   as the marketplace homepage: logo + account actions on row one, the
   persistent search on row two, and horizontally scrollable category pills
   below. This is deliberately scoped away from the homepage/search-results
   mobile hero classes, which have their own focused presentation.
   ======================================================================== */
@media (max-width: 900px) {
  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-header__inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 12px 16px 8px !important;
    box-sizing: border-box !important;
  }

  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-header__inner > .listo-logo {
    order: 1 !important;
    flex: 0 0 auto !important;
  }

  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-header__account-group,
  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-header__logged-out-group {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-header__marketplace-search {
    order: 20 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 8px 0 0 !important;
    box-sizing: border-box !important;
  }

  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-header__marketplace-search .listo-search-bar-wrap,
  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-header__marketplace-search .listo-search-collapsed {
    width: 100% !important;
    max-width: none !important;
  }

  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-market-nav {
    order: 30 !important;
    display: flex !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 8px 0 0 !important;
    padding: 1px 1px 7px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    box-sizing: border-box !important;
  }

  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-market-nav::-webkit-scrollbar {
    display: none !important;
  }

  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-market-nav__indicator {
    display: none !important;
  }

  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-market-nav__item {
    position: relative !important;
    flex: 0 0 auto !important;
    min-width: auto !important;
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 12px !important;
    border: 1px solid #e1e4e7 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--ink) !important;
    box-shadow: 0 2px 4px rgba(26,26,26,.10), 0 1px 1px rgba(26,26,26,.04) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    scroll-snap-align: start;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-market-nav__item.is-active,
  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-market-nav__item.is-pressed,
  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-market-nav__item:active {
    background: #f3f4f5 !important;
    border-color: #d3d7db !important;
    transform: translateY(1px) scale(.985) !important;
    box-shadow: inset 0 2px 5px rgba(26,26,26,.14), inset 0 0 0 1px rgba(26,26,26,.025) !important;
  }

  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-market-nav__item.is-active::after {
    display: none !important;
  }

  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-market-nav__icon,
  body:not(.listo-logged-in) .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) .listo-market-nav__icon img {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    object-fit: contain;
  }

  body.listo-marketplace-mobile .listo-header--marketplace:not(.listo-header--mobile-hero):not(.listo-header--search-results-mobile) {
    overflow: visible !important;
  }
}

/* ========================================================================
   NEXT456 — Mobile marketplace pills + true viewport-sticky bottom nav
   ------------------------------------------------------------------------
   Mobile category controls are intentionally compact, tactile pills. The
   three-item app navigation is portaled to <body> by marketplace-nav.js so
   the marketplace root's transition transform cannot turn position:fixed
   into a root-relative position.
   ======================================================================== */
@media (max-width: 900px) {
  .listo-header--mobile-hero .listo-market-nav {
    gap: 8px !important;
    padding: 2px 2px 6px !important;
  }

  .listo-header--mobile-hero .listo-market-nav__item {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    gap: 6px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(26,26,26,.10), 0 1px 1px rgba(26,26,26,.04) !important;
  }

  .listo-header--mobile-hero .listo-market-nav__item.is-pressed,
  .listo-header--mobile-hero .listo-market-nav__item:active {
    transform: translateY(2px) scale(.975) !important;
    background: #f3f4f5 !important;
    border-color: #d3d7db !important;
    box-shadow: inset 0 2px 5px rgba(26,26,26,.14), inset 0 0 0 1px rgba(26,26,26,.025) !important;
  }

  .listo-header--mobile-hero .listo-market-nav__icon,
  .listo-header--mobile-hero .listo-market-nav__icon img {
    width: 30px !important;
    height: 30px !important;
  }

  /* Once portaled, this nav is a direct child of body and is therefore truly
     anchored to the device viewport rather than the transformed marketplace
     content root. */
  body > .listo-mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 72px !important;
    min-height: 72px !important;
    margin: 0 !important;
    z-index: 2147483000 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    background: rgba(255,255,255,.98) !important;
    border-top: 1px solid #e5e7e9 !important;
    box-shadow: 0 -4px 16px rgba(26,26,26,.07) !important;
    padding: 0 env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0) !important;
  }

  body > .listo-mobile-bottom-nav .listo-mobile-bottom-nav__item {
    flex: 1 1 0 !important;
    width: 33.333% !important;
    max-width: none !important;
    min-height: 72px !important;
    padding: 8px 4px 7px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  /* Keep enough content clearance for the fixed bar, including devices with
     a bottom safe-area inset. */
  .listo-mobile-bottom-nav-spacer {
    height: 84px !important;
  }
}

/* ========================================================================
   NEXT457 — Mobile marketplace pill refinement
   ------------------------------------------------------------------------
   Keep the marketplace controls compact and tactile on the homepage. On
   mobile these controls behave like app-style pills rather than ordinary
   navigation links: no desktop underline, subtle raised resting state, and
   a clearly inset/pressed state on touch.
   ======================================================================== */
@media (max-width: 900px) {
  .listo-header--mobile-hero .listo-market-nav {
    gap: 7px !important;
    padding: 1px 1px 5px !important;
    margin: 0 !important;
  }

  /* The moving desktop indicator has no role in the mobile pill treatment. */
  .listo-header--mobile-hero .listo-market-nav__indicator {
    display: none !important;
  }

  .listo-header--mobile-hero .listo-market-nav__item {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    gap: 5px !important;
    border-radius: 999px !important;
    border: 1px solid #e1e4e7 !important;
    background: #fff !important;
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow:
      0 2px 5px rgba(26,26,26,.11),
      0 1px 1px rgba(26,26,26,.05) !important;
    transform: translateY(0) scale(1) !important;
    transition:
      transform .11s ease,
      box-shadow .11s ease,
      background-color .11s ease,
      border-color .11s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  .listo-header--mobile-hero .listo-market-nav__item:hover {
    background: #fff !important;
    color: var(--ink) !important;
    transform: translateY(0) scale(1) !important;
  }

  .listo-header--mobile-hero .listo-market-nav__item.is-active {
    background: #fff !important;
    color: var(--ink) !important;
    border-color: #dfe3e6 !important;
    box-shadow:
      0 2px 5px rgba(26,26,26,.12),
      0 1px 1px rgba(26,26,26,.05) !important;
  }

  /* Physical push: the pill moves slightly inward and the outer shadow
     collapses into a soft inset shadow, matching the reference interaction. */
  .listo-header--mobile-hero .listo-market-nav__item.is-pressed,
  .listo-header--mobile-hero .listo-market-nav__item:active {
    transform: translateY(1px) scale(.965) !important;
    background: #f4f5f6 !important;
    border-color: #d2d6da !important;
    box-shadow:
      inset 0 2px 5px rgba(26,26,26,.18),
      inset 0 0 0 1px rgba(26,26,26,.025),
      0 1px 1px rgba(26,26,26,.04) !important;
  }

  .listo-header--mobile-hero .listo-market-nav__icon,
  .listo-header--mobile-hero .listo-market-nav__icon img {
    width: 27px !important;
    height: 27px !important;
    flex: 0 0 27px !important;
  }

  /* Do not let the active state restore an underline through older rules. */
  .listo-header--mobile-hero .listo-market-nav__item.is-active::after {
    display: none !important;
  }
}

/* ========================================================================
   NEXT458 — Mobile marketplace pills: compact + persistent pressed state
   ------------------------------------------------------------------------
   The mobile category picker is intentionally smaller than the NEXT457
   treatment. The selected category remains visually pressed until another
   category is chosen; navigation remains client-side on mobile.
   ======================================================================== */
@media (max-width: 900px) {
  /* Give the search pill a little more breathing room before the category
     strip without changing the spacing elsewhere in the mobile header. */
  .listo-header--mobile-hero .listo-market-nav {
    margin-top: 10px !important;
  }

  .listo-header--mobile-hero .listo-market-nav__item {
    height: 33px !important;
    min-height: 33px !important;
    padding: 0 9px !important;
    gap: 4px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    box-shadow:
      0 2px 4px rgba(26,26,26,.10),
      0 1px 1px rgba(26,26,26,.04) !important;
    transform: translateY(0) scale(1) !important;
  }

  .listo-header--mobile-hero .listo-market-nav__icon,
  .listo-header--mobile-hero .listo-market-nav__icon img {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
  }

  /* A selected category is permanently pressed until another category is
     selected. This is the resting state of the active mobile pill, not a
     transient :active effect. */
  .listo-header--mobile-hero .listo-market-nav__item.is-active,
  .listo-header--mobile-hero .listo-market-nav__item.is-pressed,
  .listo-header--mobile-hero .listo-market-nav__item:active {
    background: #f3f4f5 !important;
    border-color: #d3d7db !important;
    transform: translateY(1px) scale(.985) !important;
    box-shadow:
      inset 0 2px 5px rgba(26,26,26,.15),
      inset 0 0 0 1px rgba(26,26,26,.025),
      0 1px 1px rgba(26,26,26,.04) !important;
  }

  .listo-header--mobile-hero .listo-market-nav__item.is-active:hover {
    background: #f3f4f5 !important;
    transform: translateY(1px) scale(.985) !important;
  }
}

/* ========================================================================
   NEXT459 — Price transparency notice: low Airbnb-style resting position
   ------------------------------------------------------------------------
   Keep the notice close to the bottom of the viewport. On mobile, reserve
   the height of Listo's fixed bottom navigation plus a small visual gap so
   the notice sits immediately above it without overlapping the nav.
   Desktop uses the same low, viewport-anchored treatment without affecting
   document flow or any existing homepage layout.
   ======================================================================== */
.listo-price-transparency-notice {
  /* Keep the desktop notice genuinely low in the viewport, close to the
     footer area rather than floating noticeably above it. */
  bottom: 24px !important;
}

@media (max-width: 900px) {
  .listo-price-transparency-notice {
    /* NEXT461: once portaled to <body>, this is measured against the true
       device viewport. Keep the notice immediately above the 72px app nav. */
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ========================================================================
   NEXT462 — Dedicated mobile guest account pages
   ------------------------------------------------------------------------
   Wishlist remains a real destination. Login now has its own dedicated
   page while reusing the existing Listo authentication/AJAX flow.
   ======================================================================== */
@media (max-width: 900px) {
  body:has(#listo-login-page) .listo-header,
  body:has(#listo-login-page) .listo-footer {
    display: none !important;
  }

  body:has(#listo-login-page) {
    background: #fff !important;
  }

  body:has(#listo-login-page) .listo-login-page {
    min-height: 100vh;
  }

  body:has(#listo-login-page) #listo-auth-overlay {
    position: relative !important;
    inset: auto !important;
    min-height: calc(100vh - 72px) !important;
    width: 100% !important;
    padding: 72px 24px 96px !important;
    background: #fff !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    z-index: 1 !important;
  }

  body:has(#listo-login-page) #listo-auth-overlay .listo-modal {
    width: 100% !important;
    max-width: 630px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body:has(#listo-login-page) #listo-auth-overlay .listo-login-page__logo {
    width: 76px !important;
    height: 76px !important;
    margin: 18px auto 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body:has(#listo-login-page) #listo-auth-overlay .listo-login-page__logo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body:has(#listo-login-page) #listo-auth-overlay .listo-login-page__logo-placeholder {
    width: 64px !important;
    height: 64px !important;
    border: 2px dashed #d8dde2 !important;
    border-radius: 16px !important;
    background: #fafbfc !important;
  }

  body:has(#listo-login-page) #listo-auth-overlay h2 {
    margin: 0 0 34px !important;
    font-size: 32px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: -0.6px !important;
    text-align: center !important;
  }

  body:has(#listo-login-page) #listo-auth-overlay .listo-field {
    margin-bottom: 18px !important;
  }

  body:has(#listo-login-page) #listo-auth-overlay .listo-field label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  body:has(#listo-login-page) #listo-auth-overlay .listo-field input {
    min-height: 72px !important;
    box-sizing: border-box !important;
    padding: 0 28px !important;
    border: 1.5px solid #9da3a8 !important;
    border-radius: 18px !important;
    font-size: 20px !important;
    background: #fff !important;
  }
  body:has(#listo-login-page) #listo-auth-overlay .listo-field input::placeholder {
    color: #8a939c !important;
    opacity: 1 !important;
  }

  body:has(#listo-login-page) #listo-auth-overlay .listo-btn--block {
    min-height: 72px !important;
    border-radius: 18px !important;
    font-size: 20px !important;
  }

  body:has(#listo-login-page) #listo-auth-overlay .listo-modal__footnote {
    margin-top: 20px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  body:has(#listo-login-page) #listo-auth-overlay .listo-modal__back {
    margin-bottom: 18px !important;
  }

  body:has(#listo-login-page) #listo-auth-overlay .listo-modal__loading {
    margin-bottom: 16px !important;
  }
}

@media (min-width: 901px) {
  body:has(#listo-login-page) .listo-login-page {
    min-height: calc(100vh - 100px);
  }

  body:has(#listo-login-page) #listo-auth-overlay {
    position: relative !important;
    inset: auto !important;
    min-height: calc(100vh - 100px) !important;
    background: #fff !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 72px 24px 48px !important;
  }

  body:has(#listo-login-page) #listo-auth-overlay .listo-modal {
    max-width: 500px !important;
    box-shadow: none !important;
  }
}


/* ========================================================================
   NEXT463 — Clean mobile Wishlist destination
   ------------------------------------------------------------------------
   The mobile Favorites page intentionally has no global Listo marketplace
   header. It mirrors the clean Airbnb-style destination shown in the
   reference: the page title is the first visible Listo content, with the
   persistent three-item bottom navigation remaining available.
   Desktop header/layout remains untouched.
   ======================================================================== */
@media (max-width: 900px) {
  body:has(.listo-favorites-page) .listo-header {
    display: none !important;
  }

  body:has(.listo-favorites-page) {
    background: #fff !important;
  }

  body:has(.listo-favorites-page) .listo-favorites-page {
    padding-top: 32px !important;
  }

  body:has(.listo-favorites-page) .listo-favorites-page__title-row {
    margin: 0 0 72px !important;
  }

  body:has(.listo-favorites-page) .listo-favorites-page__title-row h1 {
    margin: 0 !important;
    font-size: 32px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
  }

  body:has(.listo-favorites-page) .listo-favorites-signed-out h2 {
    margin-bottom: 10px !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
  }

  body:has(.listo-favorites-page) .listo-favorites-signed-out .listo-caption {
    margin-bottom: 24px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}

/* ========================================================================
   NEXT464 — Compact mobile login controls
   ------------------------------------------------------------------------
   Keep the dedicated mobile login page visually lighter and more compact.
   The existing authentication markup and behavior remain unchanged.
   ======================================================================== */
@media (max-width: 900px) {
  body:has(#listo-login-page) #listo-auth-overlay .listo-field {
    margin-bottom: 14px !important;
  }

  body:has(#listo-login-page) #listo-auth-overlay .listo-field input {
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 20px !important;
    border-radius: 14px !important;
    font-size: 17px !important;
  }

  body:has(#listo-login-page) #listo-auth-overlay .listo-btn--block {
    min-height: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    font-size: 17px !important;
  }
}

/* ========================================================================
   NEXT465 — Mobile bottom-nav page transitions + lower Favorites content
   ------------------------------------------------------------------------
   Dedicated Wishlist/Login destinations now use the same lightweight
   client-side content swap as the marketplace service menus. The existing
   sticky navigation stays mounted while only .listo-main transitions.
   Favorites content is intentionally positioned lower on the mobile screen,
   closer to the visual midpoint of the page.
   ======================================================================== */
@media (max-width: 900px) {
  .listo-main {
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .listo-main.listo-page-transition-leaving {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    pointer-events: none !important;
  }

  .listo-main.listo-page-transition-entering {
    opacity: 0 !important;
    transform: translateY(-8px) !important;
  }

  .listo-main:not(.listo-page-transition-leaving):not(.listo-page-transition-entering) {
    opacity: 1;
    transform: none;
  }

  /* Keep dedicated guest pages visually clean beneath the fixed app nav. */
  body:has(.listo-favorites-page) .listo-footer,
  body:has(#listo-login-page) .listo-footer {
    display: none !important;
  }

}

/* ========================================================================
   NEXT466 — App-like mobile navigation + Favorites login bottom sheet
   ------------------------------------------------------------------------
   1) Initialize the existing bottom-nav portal before the first paint when
      possible, preventing the hard-refresh top-to-bottom flicker.
   2) On the clean mobile Favorites page, its Log in button opens the existing
      Listo authentication flow as an Airbnb-style bottom tray instead of
      navigating away to the dedicated Login page.
   ======================================================================== */
@media (max-width: 900px) {
  body:has(.listo-favorites-page) #listo-auth-overlay {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    position: fixed !important;
    inset: 0 !important;
    padding: 0 !important;
    background: rgba(26, 26, 26, .42) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms !important;
    z-index: 2147482500 !important;
  }

  body:has(.listo-favorites-page) #listo-auth-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 180ms ease !important;
  }

  body:has(.listo-favorites-page) #listo-auth-overlay .listo-modal {
    width: 100% !important;
    max-width: 640px !important;
    max-height: min(88vh, 760px) !important;
    overflow-y: auto !important;
    padding: 30px 24px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 28px 28px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -10px 35px rgba(0,0,0,.16) !important;
    transform: translateY(100%) !important;
    transition: transform 220ms cubic-bezier(.22,.61,.36,1) !important;
  }

  body:has(.listo-favorites-page) #listo-auth-overlay.is-open .listo-modal {
    transform: translateY(0) !important;
  }

  body:has(.listo-favorites-page) #listo-auth-overlay .listo-modal__close {
    top: 18px !important;
    right: 18px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 28px !important;
    line-height: 40px !important;
  }

  body:has(.listo-favorites-page) #listo-auth-overlay .listo-login-page__logo {
    width: 64px !important;
    height: 64px !important;
    margin: 4px auto 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body:has(.listo-favorites-page) #listo-auth-overlay .listo-login-page__logo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body:has(.listo-favorites-page) #listo-auth-overlay h2 {
    margin: 0 0 28px !important;
    font-size: 30px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }
}

/* ========================================================================
   NEXT468 — Remove marketplace promotional hero sections
   ------------------------------------------------------------------------
   Parking, Experiences, and Services now begin directly with their
   remaining marketplace content. The hero sections are intentionally
   removed from the templates; these rules keep the retained content
   visually clean on both desktop and mobile.
   ======================================================================== */
.listo-parking-content { padding-top: 34px; }
.listo-marketplace-content { padding-top: 34px; }

@media (max-width: 820px) {
  .listo-parking-content { padding-top: 26px; }
  .listo-marketplace-content { padding-top: 26px; }
}


/* ========================================================================
   NEXT474 — Natural marketplace scroll anchoring
   ------------------------------------------------------------------------
   Parking, Experiences, and Services use the same persistent marketplace
   header. The header changes height during its desktop compact morph, so the
   browser's native scroll anchoring must remain available to preserve the
   user's visible content instead of allowing short pages to clamp upward.
   ======================================================================== */
@supports selector(body:has(*)) {
  html:has(#listo-marketplace-page-root),
  body:has(#listo-marketplace-page-root) {
    overflow-anchor: auto !important;
  }
}

/* ========================================================================
   NEXT474 — Natural marketplace scroll anchoring
   ------------------------------------------------------------------------
   The persistent marketplace header changes height during its desktop
   compact morph. Keep native browser scroll anchoring enabled so short
   marketplace routes such as Parking and Experiences do not clamp the
   scroll position upward during that transition. Services uses this natural
   behavior as the reference implementation.
   ======================================================================== */
@supports selector(body:has(*)) {
  html:has(#listo-marketplace-page-root),
  body:has(#listo-marketplace-page-root) {
    overflow-anchor: auto !important;
  }
}


/* ========================================================================
   NEXT475 — Protect short marketplace pages from scroll-range clamping
   ------------------------------------------------------------------------
   The desktop marketplace search morph intentionally reduces the sticky
   header's height. JavaScript now avoids starting that geometry change when
   the user is already near the document bottom, where the reduced maximum
   scroll range could otherwise pull the active downward scroll upward. No
   layout spacer or scroll-position correction is introduced.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-header--marketplace {
    overscroll-behavior-y: contain;
  }
}

/* ========================================================================
   NEXT476 — Scroll-neutral marketplace search morph
   ------------------------------------------------------------------------
   Keep the desktop marketplace morph visually intact, but do not let the
   compact state reduce the document's available scroll range while a user
   is scrolling. The browser remains in control of scroll position; a small
   route-level bottom reserve preserves the pre-morph scroll range during
   the transition/state. This avoids the upward clamp seen on short Parking
   and Experiences pages without disabling the morph.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-header--marketplace.is-scrolled {
    --listo-marketplace-morph-reserve: 112px;
  }

  body:has(.listo-header--marketplace.is-scrolled) .listo-marketplace-page-root::after {
    content: '';
    display: block;
    height: var(--listo-marketplace-morph-reserve, 0px);
    width: 100%;
    pointer-events: none;
  }
}

/* NEXT478 — Remove the visible search-row container on the logged-in homepage.
 * The homepage header should remain a single continuous light-blue surface;
 * only the search pill itself should have a white background. Keep this
 * scoped to the homepage search row so marketplace/search-result layouts are
 * not affected.
 */
@media (min-width: 901px) {
  body.listo-logged-in .listo-header--homepage .listo-header__marketplace-search,
  body.listo-logged-in .listo-header--homepage .listo-header__marketplace-search > .listo-hero,
  body.listo-logged-in .listo-header--homepage .listo-header__marketplace-search .listo-container {
    background: transparent !important;
  }
}

/* ========================================================================
   NEXT479 — Logged-in mobile marketplace pills after search
   ------------------------------------------------------------------------
   On mobile, logged-in users use the same compact marketplace pill treatment
   established for the homepage mobile header. The category strip moves below
   the persistent search bar while the desktop header/navigation remains
   unchanged. Search/morph mechanics are not modified.
   ======================================================================== */
@media (max-width: 900px) {
  body.listo-logged-in .listo-header--marketplace .listo-header__marketplace-search {
    order: 20 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    padding-top: 14px !important;
    padding-bottom: 0 !important;
  }

  body.listo-logged-in .listo-header--marketplace .listo-market-nav {
    order: 30 !important;
    display: flex !important;
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    height: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 10px 0 0 !important;
    padding: 1px 1px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  body.listo-logged-in .listo-header--marketplace .listo-market-nav::-webkit-scrollbar {
    display: none !important;
  }

  body.listo-logged-in .listo-header--marketplace .listo-market-nav__indicator {
    display: none !important;
  }

  body.listo-logged-in .listo-header--marketplace .listo-market-nav__item {
    position: relative;
    flex: 0 0 auto !important;
    min-width: auto !important;
    width: auto !important;
    height: 33px !important;
    min-height: 33px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    border: 1px solid #e1e4e7 !important;
    background: #fff !important;
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow:
      0 2px 4px rgba(26,26,26,.10),
      0 1px 1px rgba(26,26,26,.04) !important;
    transform: translateY(0) scale(1) !important;
    transition:
      transform .11s ease,
      box-shadow .11s ease,
      background-color .11s ease,
      border-color .11s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    scroll-snap-align: start;
  }

  body.listo-logged-in .listo-header--marketplace .listo-market-nav__item:hover {
    background: #fff !important;
    color: var(--ink) !important;
    transform: translateY(0) scale(1) !important;
  }

  body.listo-logged-in .listo-header--marketplace .listo-market-nav__item.is-active,
  body.listo-logged-in .listo-header--marketplace .listo-market-nav__item.is-pressed,
  body.listo-logged-in .listo-header--marketplace .listo-market-nav__item:active {
    background: #f3f4f5 !important;
    border-color: #d3d7db !important;
    color: var(--ink) !important;
    transform: translateY(1px) scale(.985) !important;
    box-shadow:
      inset 0 2px 5px rgba(26,26,26,.15),
      inset 0 0 0 1px rgba(26,26,26,.025),
      0 1px 1px rgba(26,26,26,.04) !important;
  }

  body.listo-logged-in .listo-header--marketplace .listo-market-nav__item.is-active::after {
    display: none !important;
  }

  body.listo-logged-in .listo-header--marketplace .listo-market-nav__icon,
  body.listo-logged-in .listo-header--marketplace .listo-market-nav__icon img {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
  }

  /* Give the pill row a compact, deliberate ending before page content. */
  body.listo-logged-in .listo-header--marketplace .listo-header__inner {
    padding-bottom: 8px !important;
  }
}


/* ========================================================================
   NEXT480 — Logged-in mobile homepage pill placement + guest account shell
   ------------------------------------------------------------------------
   The logged-in homepage uses the same shared marketplace header as Homes,
   Parking, Experiences, and Services. On mobile, search is followed by the
   compact marketplace pills. Guest account-menu pages remain free of the
   marketplace search and category pills.
   ======================================================================== */
@media (max-width: 900px) {
  body.listo-logged-in .listo-mobile-home-market-nav {
    display: flex !important;
    width: calc(100vw - 24px);
    max-width: none;
    margin: 12px auto 4px;
    padding: 1px 1px 8px;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.listo-logged-in .listo-mobile-home-market-nav::-webkit-scrollbar {
    display: none;
  }

  body.listo-logged-in .listo-mobile-home-market-nav__item {
    flex: 0 0 auto;
    min-width: auto;
    height: 33px;
    min-height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 9px;
    border: 1px solid #e1e4e7;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(26,26,26,.10), 0 1px 1px rgba(26,26,26,.04);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  body.listo-logged-in .listo-mobile-home-market-nav__item.is-active {
    background: #f3f4f5;
    border-color: #d3d7db;
    transform: translateY(1px) scale(.985);
    box-shadow: inset 0 2px 5px rgba(26,26,26,.15), inset 0 0 0 1px rgba(26,26,26,.025), 0 1px 1px rgba(26,26,26,.04);
  }

  body.listo-logged-in .listo-mobile-home-market-nav__icon,
  body.listo-logged-in .listo-mobile-home-market-nav__icon img {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    object-fit: contain;
  }

  /* The guest account-menu pages do not need marketplace discovery/search
     competing with the account task itself. Keep this mobile-only. */
  body.listo-logged-in .listo-header--guest-account .listo-header__marketplace-search,
  body.listo-logged-in .listo-header--guest-account .listo-market-nav {
    display: none !important;
  }

  body.listo-logged-in .listo-header--guest-account .listo-header__inner {
    padding-bottom: 8px !important;
  }
}

@media (min-width: 901px) {
  .listo-mobile-home-market-nav {
    display: none !important;
  }
}


/* ==========================================================================
   NEXT482 — Favorites page UI normalization
   --------------------------------------------------------------------------
   Favorites is now the canonical saved-listings page. Restore the shared
   Guest account-page header/title treatment used by Wallet, Trips, Inbox,
   Cases, etc. The authenticated avatar/account menu must remain visible.
   ========================================================================== */

/* Favorites uses the same shared page-title system as every Guest account page. */
.listo-favorites-page .listo-page-title-row,
.listo-favorites-signed-out .listo-page-title-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}

.listo-favorites-page .listo-page-title-row > h1,
.listo-favorites-signed-out .listo-page-title-row > h1 {
  margin: 0 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

.listo-favorites-page .listo-page-title__icon,
.listo-favorites-signed-out .listo-page-title__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 14px;
}

.listo-favorites-page .listo-page-title__icon svg,
.listo-favorites-signed-out .listo-page-title__icon svg {
  width: 23px;
  height: 23px;
}

/* The account header stays present on Favorites. Logged-in account pages
   already suppress the marketplace search/nav separately. */
@media (max-width: 900px) {
  body:has(.listo-favorites-page) .listo-header {
    display: block !important;
  }

  body:has(.listo-favorites-page) {
    background: var(--surface, #fff) !important;
  }

  /* Match the shared Guest account-page vertical canvas exactly.
     Favorites must enter at the same top position as Wallet, Trips, Inbox,
     Cases, etc., so switching pages does not make the title appear to jump. */
  body:has(.listo-favorites-page) .listo-favorites-page,
  body:has(.listo-favorites-signed-out) .listo-favorites-signed-out {
    padding-top: var(--section-pad) !important;
    padding-bottom: 96px !important;
  }

  body:has(.listo-favorites-page) .listo-favorites-page__title-row,
  body:has(.listo-favorites-signed-out) .listo-favorites-signed-out .listo-page-title-row {
    margin: 0 0 14px !important;
    gap: 10px;
  }

  body:has(.listo-favorites-page) .listo-page-title__icon,
  body:has(.listo-favorites-signed-out) .listo-page-title__icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px;
  }

  body:has(.listo-favorites-page) .listo-page-title__icon svg,
  body:has(.listo-favorites-signed-out) .listo-page-title__icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  body:has(.listo-favorites-page) .listo-page-title-row > h1,
  body:has(.listo-favorites-signed-out) .listo-page-title-row > h1 {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }

  /* Keep the mobile Favorites page free of the legacy oversized Wishlist
     spacing while preserving the existing login tray. */
  body:has(.listo-favorites-signed-out) .listo-favorites-signed-out h2 {
    margin-bottom: 10px !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
  }

  body:has(.listo-favorites-signed-out) .listo-favorites-signed-out .listo-caption {
    margin-bottom: 24px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  body:has(.listo-favorites-page) .listo-footer {
    display: none !important;
  }
}

/* ==========================================================================
   NEXT484 — Favorites mobile title-position parity
   --------------------------------------------------------------------------
   My Wallet and My Trips use the normal .listo-section canvas. Favorites
   must use that exact same mobile top padding so the title does not jump
   vertically when navigating between Guest account pages. Remove the legacy
   Wishlist-era offset entirely rather than overriding it conditionally.
   ========================================================================== */
@media (max-width: 700px) {
  .listo-container.listo-section.listo-favorites-page {
    padding-top: var(--section-pad) !important;
    padding-bottom: 96px !important;
  }

  .listo-container.listo-section.listo-favorites-page .listo-page-title-row {
    margin-top: 0 !important;
  }
}

/* Keep the logged-in account trigger available on Favorites at every
   mobile breakpoint; the global Guest-account rules still hide only
   marketplace search/category navigation. */
@media (max-width: 480px) {
  body.listo-logged-in .listo-header--guest-account .listo-header__account-group {
    display: flex !important;
  }

  body.listo-logged-in .listo-header--guest-account .listo-account-menu {
    display: block !important;
  }
}


/* ==========================================================================
   NEXT485 — Remove homepage greeting + unify mobile marketplace navigation
   --------------------------------------------------------------------------
   The logged-in greeting is removed from the homepage entirely. The shared
   marketplace navigation in header.php is now the single mobile category
   strip for the homepage and every marketplace service page, so navigation
   always follows the same order: header row -> search -> service pills.
   ========================================================================== */
@media (max-width: 900px) {
  body.listo-logged-in .listo-header--marketplace .listo-market-nav {
    display: flex !important;
    order: 30 !important;
  }

  /* Account pages intentionally remain task-focused and do not show
     marketplace discovery controls. */
  body.listo-logged-in .listo-header--guest-account .listo-market-nav {
    display: none !important;
  }

  /* Legacy homepage content-row navigation is no longer used. */
  .listo-mobile-home-market-nav {
    display: none !important;
  }
}

/* The homepage greeting is no longer rendered; keep any legacy CSS inert. */
.listo-home-greeting-container,
.listo-home-greeting {
  display: none !important;
}


/* ========================================================================
   NEXT487 — Logged-out Favorites mobile shell + explicit password control
   ------------------------------------------------------------------------
   Favorites is an account destination even before authentication. Hide
   marketplace search/category discovery on the logged-out Favorites page,
   while keeping the normal header row. Make the auth password visibility
   control and login CTA explicit so both are present on first render.
   ======================================================================== */
@media (max-width: 900px) {
  body:has(.listo-favorites-signed-out) .listo-header__marketplace-search,
  body:has(.listo-favorites-signed-out) .listo-market-nav {
    display: none !important;
  }

  body:has(.listo-favorites-signed-out) .listo-header__inner {
    padding-bottom: 8px !important;
  }

  body:has(.listo-favorites-page) #listo-auth-overlay .listo-modal__step[data-step="email-login"] > .listo-btn--primary {
    display: flex !important;
    width: 100% !important;
    min-height: 56px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body:has(.listo-favorites-page) #listo-auth-overlay .listo-password-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2;
  }
}


/* ==========================================================================
   NEXT488 — Favorites signed-out content position + auth CTA clearance
   --------------------------------------------------------------------------
   The logged-out Favorites screen should sit a little lower than the standard
   account-page title so the short authentication prompt feels vertically
   balanced. The auth tray must also paint above the portaled mobile bottom
   navigation; otherwise the password-stage Log in CTA can be physically
   covered by that fixed navigation bar.
   ========================================================================== */
@media (max-width: 700px) {
  body:has(.listo-favorites-signed-out) .listo-favorites-signed-out {
    padding-top: calc(var(--section-pad) + 60px) !important;
  }
}

@media (max-width: 900px) {
  body:has(.listo-favorites-page) #listo-auth-overlay {
    z-index: 2147483500 !important;
  }

  body:has(.listo-favorites-page) #listo-auth-overlay .listo-modal {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ========================================================================
   NEXT490 — Logged-out Favorites centered mobile canvas
   ------------------------------------------------------------------------
   The logged-out Favorites page is a focused account destination. Remove
   the marketplace/account header entirely on mobile and vertically lower
   the short login prompt so the content sits closer to the visual center.
   Logged-in Favorites and all other account pages retain their headers.
   ======================================================================== */
@media (max-width: 900px) {
  body:has(.listo-favorites-signed-out) .listo-header {
    display: none !important;
  }
}

@media (max-width: 700px) {
  body:has(.listo-favorites-signed-out) .listo-favorites-signed-out {
    padding-top: clamp(300px, 38vh, 420px) !important;
  }
}

/* ========================================================================
   NEXT491 — Logged-out Favorites vertical position parity
   ------------------------------------------------------------------------
   Match the vertical starting position of the logged-out Favorites content
   to the supplied Airbnb Wishlist reference. The entire content block moves
   together; authentication overlay behavior and other pages are unchanged.
   ======================================================================== */
@media (max-width: 700px) {
  body:has(.listo-favorites-signed-out) .listo-favorites-signed-out {
    position: relative;
    top: 140px !important;
  }
}

/* ========================================================================
   NEXT492 — Logged-out mobile navigation + signup bonus popup positioning
   ------------------------------------------------------------------------
   The three-item guest navigation should read as one compact app control,
   rather than three items spread across the full viewport. The signup-bonus
   popup must also sit above that navigation on mobile, while retaining its
   centered modal treatment on desktop.
   ======================================================================== */
@media (max-width: 900px) {
  body > .listo-mobile-bottom-nav {
    gap: 36px !important;
    justify-content: center !important;
  }

  body > .listo-mobile-bottom-nav .listo-mobile-bottom-nav__item {
    flex: 0 0 78px !important;
    width: 78px !important;
    max-width: 78px !important;
    min-width: 78px !important;
  }

  /* The signup-bonus sheet sits above the three-item navigation instead of
     covering it. Keep the sheet full-width within a small side margin and
     allow it to scroll on short screens. */
  #listo-signup-bonus-popup {
    z-index: 2147483001 !important;
    box-sizing: border-box;
    padding: 12px 12px calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: flex-end !important;
  }

  #listo-signup-bonus-popup .listo-promo-popup {
    width: 100%;
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    box-sizing: border-box;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
  }
}

@media (min-width: 901px) {
  #listo-signup-bonus-popup {
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
  }

  #listo-signup-bonus-popup .listo-promo-popup {
    width: 100%;
    max-width: 400px;
    max-height: min(90vh, 720px);
    overflow-y: auto;
    box-sizing: border-box;
  }
}

/* ========================================================================
   NEXT496 — Mobile signup-bonus inline ad refinement
   ------------------------------------------------------------------------
   Reuses the compact 104px card footprint from the earlier continuation
   card. The content is dedicated to the signup bonus and the only attention
   animation is a short left/right shake on page load.
   ======================================================================== */
.listo-signup-bonus-inline-ad {
  display: none;
}

@media (max-width: 900px) {
  .listo-signup-bonus-inline-ad {
    width: 100%;
    min-height: 104px;
    margin: 0 0 18px;
    padding: 14px 14px 14px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    border: 1px solid rgba(26,26,26,.08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(0,0,0,.07);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    opacity: 0;
    transform: translateX(0);
    transition: opacity .3s ease, box-shadow .2s ease, transform .2s ease;
    will-change: transform, opacity;
  }

  .listo-signup-bonus-inline-ad.is-visible {
    opacity: 1;
    animation: listo-signup-bonus-shake .72s cubic-bezier(.36,.07,.19,.97) .2s both;
  }

  .listo-signup-bonus-inline-ad:active {
    box-shadow: 0 2px 9px rgba(0,0,0,.08);
    transform: scale(.992);
  }

  .listo-signup-bonus-inline-ad__icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.12));
  }

  .listo-signup-bonus-inline-ad__copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }

  .listo-signup-bonus-inline-ad__headline {
    display: block;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
  }

  .listo-signup-bonus-inline-ad__subtext {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    color: #666;
  }

  .listo-signup-bonus-inline-ad__arrow {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    color: #777;
  }
}

@media (max-width: 380px) {
  .listo-signup-bonus-inline-ad {
    gap: 10px;
    padding-left: 13px;
    padding-right: 12px;
  }

  .listo-signup-bonus-inline-ad__icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 37px;
  }

  .listo-signup-bonus-inline-ad__headline {
    font-size: 17px;
  }

  .listo-signup-bonus-inline-ad__subtext {
    font-size: 13px;
  }
}

@keyframes listo-signup-bonus-shake {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(-7px); }
  24% { transform: translateX(7px); }
  36% { transform: translateX(-5px); }
  48% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  72% { transform: translateX(3px); }
  84% { transform: translateX(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  .listo-signup-bonus-inline-ad.is-visible {
    animation: none;
  }
}

/* ========================================================================
   NEXT498 — P200 signup card on All/Homes mobile navigation
   ------------------------------------------------------------------------
   The card is rendered by the shared homepage-content template, which is
   used by both the All homepage and the dedicated Homes page. No new card
   styling is introduced here: NEXT496/NEXT497 remain the visual baseline.
   The marketplace navigation script explicitly reinitializes the card after
   mobile All/Homes root swaps so it appears and performs its attention shake
   each time those destinations are selected.
   ======================================================================== */

/* ========================================================================
   NEXT494 — Mobile "Continue searching for homes" card
   ------------------------------------------------------------------------
   Mirrors the compact continuation card shown in the supplied Airbnb mobile
   reference: it sits directly below the category pills and before the first
   listing row. It is mobile-only and enters with a restrained upward/fade
   motion so it feels like part of the marketplace feed rather than a popup.
   ======================================================================== */
.listo-continue-search-card {
  display: none;
}

@media (max-width: 900px) {
  .listo-continue-search-card {
    width: 100%;
    min-height: 104px;
    margin: 0 0 18px;
    padding: 14px 14px 14px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(26,26,26,.08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(0,0,0,.07);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
    will-change: opacity, transform;
  }

  .listo-continue-search-card.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .listo-continue-search-card:active {
    box-shadow: 0 1px 7px rgba(0,0,0,.08);
    transform: scale(.992);
  }

  .listo-continue-search-card__copy {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 7px;
  }

  .listo-continue-search-card__copy strong {
    display: block;
    max-width: 210px;
    font-size: 16px;
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
  }

  .listo-continue-search-card__copy > span {
    display: block;
    font-size: 12px;
    line-height: 1.3;
    color: var(--ink-muted);
    white-space: nowrap;
  }

  .listo-continue-search-card__copy > span span {
    font-size: 15px;
    vertical-align: -1px;
  }

  .listo-continue-search-card__image {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
  }
}

@media (max-width: 380px) {
  .listo-continue-search-card {
    min-height: 96px;
    padding-left: 14px;
    gap: 10px;
  }

  .listo-continue-search-card__copy strong {
    max-width: 185px;
    font-size: 15px;
  }

  .listo-continue-search-card__image {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }
}

/* ========================================================================
   NEXT499 — Restore account-dropdown menu icon geometry
   ------------------------------------------------------------------------
   The functional icon color rules must not control the layout geometry.
   Explicitly restore the compact icon + label row used by the account menu
   so the colored icon tiles cannot expand into full-width bars.
   ======================================================================== */
.listo-account-dropdown__item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}

.listo-account-dropdown__icon,
.listo-account-dropdown__icon--dashboard,
.listo-account-dropdown__icon--listings,
.listo-account-dropdown__icon--home,
.listo-account-dropdown__icon--bookings,
.listo-account-dropdown__icon--calendar-pricing,
.listo-account-dropdown__icon--external-calendars,
.listo-account-dropdown__icon--cohosts,
.listo-account-dropdown__icon--support,
.listo-account-dropdown__icon--payouts,
.listo-account-dropdown__icon--wallet,
.listo-account-dropdown__icon--inbox,
.listo-account-dropdown__icon--affiliate,
.listo-account-dropdown__icon--cases,
.listo-account-dropdown__icon--deposits,
.listo-account-dropdown__icon--profile,
.listo-account-dropdown__icon--faq,
.listo-account-dropdown__icon--heart,
.listo-account-dropdown__icon--logout {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  min-height: 32px;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 9px;
  box-sizing: border-box;
  overflow: hidden;
}

.listo-account-dropdown__icon svg {
  display: block;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px;
  max-height: 18px;
  flex: 0 0 18px;
}

.listo-account-dropdown__label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.listo-account-dropdown__item + .listo-account-dropdown__item {
  border-top: 1px solid var(--border);
}


/* ========================================================================
   NEXT501 — Minimal header on individual stay listing detail pages
   ------------------------------------------------------------------------
   The marketplace search/category navigation belongs to discovery pages.
   Once a guest opens an actual stay listing, keep only the compact global
   header controls. This class is emitted only by single listo_listing
   requests, so All/Homes/Parking/Experiences/Services are unaffected.
   ======================================================================== */
.listo-header--listing-detail .listo-market-nav,
.listo-header--listing-detail .listo-header__marketplace-search {
  display: none !important;
}

.listo-header--listing-detail .listo-header__inner {
  flex-wrap: nowrap;
  row-gap: 0;
}

@media (max-width: 900px) {
  .listo-header--listing-detail .listo-header__inner {
    min-height: 74px;
    padding: 10px 18px;
  }
}

@media (min-width: 901px) {
  .listo-header--listing-detail .listo-header__inner {
    min-height: 72px;
    padding-bottom: 14px;
  }
}

/* ========================================================================
   NEXT502 — Desktop search trigger duplicate compact values
   ------------------------------------------------------------------------
   The compact values (Anywhere / Anytime / Add guests) are intended only
   for the morphing/scrolled search state. Keep them out of the normal
   expanded desktop search bar so each field shows one value only.
   ======================================================================== */
.listo-search-trigger__compact {
  display: none;
}

@media (min-width: 901px) {
  .listo-header--homepage.is-scrolled .listo-search-trigger__compact,
  .listo-header--marketplace.is-scrolled .listo-search-trigger__compact {
    display: block;
  }
}


/* ========================================================================
   NEXT503 — Desktop homepage contextual notices in the initial viewport
   ------------------------------------------------------------------------
   The marketplace root can be transformed during category navigation. A
   fixed notice inside that transformed root becomes root-relative, which
   can make it appear at the bottom of the long homepage instead of in the
   user's viewport. The notice is now portaled to <body> by homepage JS.

   The signup-bonus card remains the same compact 104px design used on
   mobile, but is also surfaced on desktop so the incentive is visible on
   the initial All/Homes marketplace view.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-signup-bonus-inline-ad {
    width: min(760px, calc(100% - 32px));
    min-height: 104px;
    margin: 0 auto 20px;
    padding: 14px 18px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    border: 1px solid rgba(26,26,26,.08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(0,0,0,.07);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }

  .listo-signup-bonus-inline-ad__icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.12));
  }

  .listo-signup-bonus-inline-ad__copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }

  .listo-signup-bonus-inline-ad__headline {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
  }

  .listo-signup-bonus-inline-ad__subtext {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    color: #666;
  }

  .listo-signup-bonus-inline-ad__arrow {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    color: #777;
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
  .listo-signup-bonus-inline-ad.is-visible {
    animation: listo-signup-bonus-shake .72s cubic-bezier(.36,.07,.19,.97) .2s both;
  }
}

/* Once portaled to <body>, keep the desktop notice anchored to the actual
   viewport rather than the transformed marketplace root. It is therefore
   visible immediately on a fresh homepage load. */
@media (min-width: 901px) {
  body > #listo-price-transparency-notice {
    position: fixed !important;
    left: 50% !important;
    bottom: 24px !important;
    z-index: 2147482000 !important;
  }
}

/* ========================================================================
   NEXT504 — Desktop P200 signup-bonus card vertical refinement
   ------------------------------------------------------------------------
   Move the desktop signup-bonus incentive slightly closer to the search
   area without changing its size, content, or the listing-row position.
   ======================================================================== */
@media (min-width: 901px) {
  /* NEXT665 — Move the logged-out desktop signup-bonus banner 20px
     closer to the header without competing with the banner's shake
     animation, which owns the transform property. */
  .listo-signup-bonus-inline-ad {
    position: relative;
    top: -20px;
  }
}

/* ========================================================================
   NEXT505 — Compact account dropdown for both Guest and Host modes
   ------------------------------------------------------------------------
   Keep the account menu fully visible within shorter desktop/mobile
   viewports. Guest and Host use the same dropdown markup, so one compact
   geometry rule keeps both modes consistent without changing menu content.
   ======================================================================== */
.listo-account-dropdown {
  min-width: 176px;
}

.listo-account-dropdown__item {
  min-height: 40px !important;
  padding: 5px 10px !important;
  gap: 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.listo-account-dropdown__icon,
.listo-account-dropdown__icon--dashboard,
.listo-account-dropdown__icon--listings,
.listo-account-dropdown__icon--home,
.listo-account-dropdown__icon--bookings,
.listo-account-dropdown__icon--calendar-pricing,
.listo-account-dropdown__icon--external-calendars,
.listo-account-dropdown__icon--cohosts,
.listo-account-dropdown__icon--support,
.listo-account-dropdown__icon--payouts,
.listo-account-dropdown__icon--wallet,
.listo-account-dropdown__icon--inbox,
.listo-account-dropdown__icon--affiliate,
.listo-account-dropdown__icon--cases,
.listo-account-dropdown__icon--deposits,
.listo-account-dropdown__icon--profile,
.listo-account-dropdown__icon--faq,
.listo-account-dropdown__icon--heart,
.listo-account-dropdown__icon--logout {
  flex-basis: 28px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 8px !important;
}

.listo-account-dropdown__icon svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  flex-basis: 16px !important;
}

.listo-account-dropdown__label {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* ========================================================================
   NEXT507 — Guest account desktop shell
   ------------------------------------------------------------------------
   Guest account menu pages should remain task-focused on desktop just as
   they already are on mobile. The Guest Home page is intentionally excluded
   because it is not one of the account-menu templates that receives the
   .listo-header--guest-account class.
   ======================================================================== */
@media (min-width: 901px) {
  body.listo-logged-in .listo-header--guest-account .listo-header__marketplace-search,
  body.listo-logged-in .listo-header--guest-account .listo-market-nav {
    display: none !important;
  }

  body.listo-logged-in .listo-header--guest-account .listo-header__inner {
    padding-bottom: 8px !important;
  }
}


/* NEXT508 — replace long page-title descriptions with compact info affordances. */
.listo-page-description-info-wrap { margin: 4px 0 10px !important; line-height: 1; }
.listo-page-description-info {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #8b98a7;
  border-radius: 50%;
  background: #fff;
  color: #5f6f80;
  font-size: 14px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  box-sizing: border-box;
}
.listo-page-description-info:hover,
.listo-page-description-info:focus-visible {
  color: #2196F3;
  border-color: #2196F3;
  outline: none;
}
.listo-refunds-help-row { align-items: center; }
.listo-refunds-help-row .listo-page-description-info { flex: 0 0 24px; }
@media (max-width: 600px) {
  .listo-page-description-info-wrap { margin: 3px 0 9px !important; }
  .listo-page-description-info { width: 22px; height: 22px; font-size: 13px; line-height: 20px; }
}

/* NEXT510 — Host Dashboard desktop control alignment.
 * Keep the explanatory control on the left, while moving the month/year
 * selector and Download Report action to the far right of the page. Mobile
 * dashboard layout remains unchanged.
 */
@media (min-width: 701px) {
  .listo-dashboard-page .listo-earnings__header-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .listo-dashboard-page #listo-month-select-form {
    margin-left: auto;
  }
}

/* ========================================================================
   NEXT511 — Center compact/morphed search values
   ------------------------------------------------------------------------
   In the desktop morphed search pill, center Anywhere / Anytime / Add
   guests within their respective search segments. The marketplace icon
   remains anchored at the left of the first segment.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-header--homepage.is-scrolled .listo-search-trigger__compact,
  .listo-header--marketplace.is-scrolled .listo-search-trigger__compact {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    text-align: center;
    white-space: nowrap;
  }
}

/* ========================================================================
   NEXT512 — True segment-center alignment for the morphed search values
   ------------------------------------------------------------------------
   Center the compact labels against the visible search segment itself.
   The marketplace/category icon is the visual marker at the beginning of
   the first segment, so Anywhere is centered in the space after that icon;
   Anytime and Add guests are centered in their full respective segments.
   ======================================================================== */
@media (min-width: 901px) {
  .listo-header--homepage.is-scrolled .listo-search-trigger__compact,
  .listo-header--marketplace.is-scrolled .listo-search-trigger__compact {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .listo-header--homepage.is-scrolled .listo-search-trigger[data-panel="where"] .listo-search-trigger__compact,
  .listo-header--marketplace.is-scrolled .listo-search-trigger[data-panel="where"] .listo-search-trigger__compact {
    left: 47px !important;
    right: 0 !important;
  }
}


/* NEXT513 — Parking listing completeness + responsive search */
.listo-parking-location-meta { margin-top: 14px; }
.listo-parking-map-help { margin: 14px 0 9px; color: var(--ink-muted); font-size: 12px; line-height: 1.5; }
.listo-parking-map-status { min-height: 18px; margin: 0 0 7px; color: var(--ink-muted); font-size: 12px; line-height: 1.45; }
.listo-parking-map-status[data-state="loading"] { color: #6b7a90; }
.listo-parking-map-status[data-state="success"] { color: #2e7d32; }
.listo-parking-map-status[data-state="error"] { color: #c62828; }
.listo-parking-location-map { width: 100%; height: 300px; border: 1px solid #dfe5eb; border-radius: 16px; overflow: hidden; background: #eef5fb; }
.listo-parking-map-search-row { margin-top: 12px; }
.listo-parking-photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.listo-parking-photo-card { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 13px; background: #eef5fb; border: 1px solid #e0e7ed; }
.listo-parking-photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listo-parking-photo-card button { position: absolute; top: 7px; right: 7px; width: 28px; height: 28px; border: 0; border-radius: 999px; background: rgba(0,0,0,.68); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.listo-parking-photo-add { margin-top: 2px; }
.listo-parking-photo-input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.listo-parking-photo-add[disabled] { opacity:.55; cursor:wait; }
.listo-parking-photo-status { min-height:18px; margin:8px 0 0; color:var(--ink-muted); font-size:13px; }
.listo-parking-photo-status[data-state="loading"] { color:var(--ink-muted); }
.listo-parking-photo-status[data-state="success"] { color:#168447; }
.listo-parking-photo-status[data-state="error"] { color:#c62828; }
.listo-parking-photo-featured { position:absolute; left:7px; bottom:7px; padding:4px 8px; border-radius:999px; background:rgba(33,150,243,.94); color:#fff; font-size:11px; font-weight:700; line-height:1; }
.listo-parking-photo-note { margin: 8px 0 0; color: var(--ink-muted); font-size: 12px; }
.listo-parking-vehicle-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.listo-parking-vehicle-grid .listo-parking-check { padding: 9px 10px; }
.listo-search-vehicle-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.listo-search-vehicle-option { min-height: 46px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.listo-search-vehicle-option:hover, .listo-search-vehicle-option.is-selected { border-color: var(--listo-green); background: #f2f8ff; color: var(--listo-green-dark); }

/* Desktop-only 25% reduction of the morphed marketplace search pill. */
@media (min-width: 901px) {
  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search { width: min(430px, calc(100vw - 520px)); }
  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search .listo-search-bar-wrap,
  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search .listo-search-bar { width: 100%; max-width: none; }
  .listo-header--marketplace.is-scrolled .listo-header__marketplace-search .listo-search-bar { height: 41px; min-height: 41px; padding: 3px 4px 3px 3px; }
  .listo-header--marketplace.is-scrolled .listo-search-trigger { min-height: 33px; padding: 4px 10px; }
  .listo-header--marketplace.is-scrolled .listo-search-trigger__compact { left: 9px; font-size: 12px; }
  .listo-header--marketplace.is-scrolled .listo-search-trigger[data-panel="where"] { padding-left: 39px; }
  .listo-header--marketplace.is-scrolled .listo-search-trigger[data-panel="where"] .listo-search-trigger__compact { left: 39px; }
  .listo-header--marketplace.is-scrolled .listo-search-compact-icon { left: 7px; width: 25px; height: 25px; }
  .listo-header--marketplace.is-scrolled .listo-search-compact-icon img { width: 24px; height: 24px; }
  .listo-header--marketplace.is-scrolled .listo-search-bar__submit { width: 33px; height: 33px; }
  .listo-header--marketplace.is-scrolled .listo-search-bar__submit svg { width: 15px; height: 15px; }
}
@media (max-width: 560px) {
  .listo-parking-photo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .listo-parking-location-map { height: 250px; border-radius: 14px; }
  .listo-parking-vehicle-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   NEXT515 — Host operating context refinement
   One Host account, two operating contexts: Staycation and Parking.
   The secondary navigation sits slightly below the global header, has no
   divider underneath, and uses a bright orange active state so the selected
   business context is unmistakable.
   ========================================================================== */
.listo-host-context-nav {
  width: 100%;
  background: #fff;
  border-bottom: 0;
  position: relative;
  z-index: 20;
  padding-top: 10px;
  padding-bottom: 4px;
}
.listo-host-context-nav__inner {
  width: min(1180px, calc(100% - 48px));
  min-height: 54px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.listo-host-context-pill {
  min-width: 150px;
  min-height: 38px;
  padding: 7px 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #59636d;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.listo-host-context-pill:hover { background: #fff3e8; color: #e85d00; }
.listo-host-context-pill.is-active {
  background: #ff6a00;
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,106,0,.22);
}
.listo-host-context-pill.is-active:hover { background: #ff6a00; color: #fff; }
.listo-host-context-pill__icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; }
.listo-host-context-pill__icon svg { width: 18px; height: 18px; }
.listo-host-context-page { padding-top: 28px; }
.listo-host-context-page .listo-page-title-row { margin-bottom: 22px; }
.listo-host-context-page__icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: #2196F3; flex: 0 0 32px; }
.listo-host-context-page__icon svg { width: 26px; height: 26px; }
.listo-host-context-hero {
  border: 1px solid #e5ebf0;
  border-radius: 20px;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(180deg, #fff, #f9fbfd);
  margin-bottom: 20px;
}
.listo-host-context-eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #2196F3; margin-bottom: 5px; }
.listo-host-context-hero h2 { margin: 0 0 6px; font-size: 23px; line-height: 1.2; }
.listo-host-context-hero p { margin: 0; color: #68747f; max-width: 680px; line-height: 1.55; }
.listo-host-parking-stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
.listo-host-parking-stat { border: 1px solid #e5ebf0; border-radius: 16px; padding: 19px 20px; background: #fff; }
.listo-host-parking-stat span, .listo-host-parking-stat small { display: block; color: #6e7983; }
.listo-host-parking-stat span { font-size: 13px; font-weight: 700; }
.listo-host-parking-stat strong { display: block; font-size: 28px; line-height: 1.1; margin: 7px 0 5px; color: #1f2933; }
.listo-host-parking-stat small { font-size: 12px; }
.listo-host-parking-action-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.listo-host-parking-action { display: flex; flex-direction: column; gap: 8px; min-height: 155px; padding: 20px; border: 1px solid #e5ebf0; border-radius: 16px; background: #fff; text-decoration: none; color: inherit; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.listo-host-parking-action:hover { transform: translateY(-1px); border-color: #c9dff0; box-shadow: 0 7px 20px rgba(20,50,80,.06); }
.listo-host-parking-action strong { font-size: 16px; }
.listo-host-parking-action span { color: #68747f; font-size: 13px; line-height: 1.5; }
.listo-host-parking-action b { margin-top: auto; color: #2196F3; font-size: 13px; }
.listo-host-context-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }
.listo-host-context-toolbar p { margin:0; color:#68747f; }
.listo-host-parking-list { display:grid; gap:14px; }
.listo-host-parking-list-card { display:grid; grid-template-columns:160px minmax(0,1fr) auto; gap:20px; align-items:center; padding:14px; border:1px solid #e5ebf0; border-radius:18px; background:#fff; }
.listo-host-parking-list-card__media { width:160px; aspect-ratio:4/3; border-radius:13px; overflow:hidden; background:#f1f6fa; }
.listo-host-parking-list-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.listo-host-parking-placeholder { width:100%; height:100%; display:grid; place-items:center; color:#2196F3; }
.listo-host-parking-placeholder svg { width:38px; height:38px; }
.listo-host-parking-status { font-size:11px; font-weight:800; color:#2196F3; }
.listo-host-parking-list-card h2 { margin:4px 0 3px; font-size:17px; }
.listo-host-parking-list-card p { margin:0; color:#68747f; font-size:13px; }
.listo-host-parking-tags { display:flex; flex-wrap:wrap; gap:6px; margin:9px 0; }
.listo-host-parking-tags span { padding:4px 8px; border-radius:999px; background:#f2f5f7; color:#56616b; font-size:11px; font-weight:700; }
.listo-host-parking-list-card__body > strong { font-size:13px; }
.listo-host-parking-empty, .listo-host-parking-workspace { border:1px solid #e5ebf0; border-radius:20px; background:#fff; padding:34px; }
.listo-host-parking-empty { text-align:center; }
.listo-host-parking-empty__icon { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; margin:0 auto 14px; background:#eaf5fe; color:#2196F3; font-weight:800; }
.listo-host-parking-empty h2, .listo-host-parking-workspace h2 { margin:0 0 7px; font-size:21px; }
.listo-host-parking-empty p, .listo-host-parking-workspace > p { margin:0 auto 20px; max-width:700px; color:#68747f; line-height:1.55; }
.listo-host-parking-workspace { max-width:900px; }
.listo-host-parking-workspace__steps { display:grid; grid-template-columns:auto 1fr; gap:12px 14px; margin-top:25px; }
.listo-host-parking-workspace__steps > span { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#eaf5fe; color:#2196F3; font-weight:800; }
.listo-host-parking-workspace__steps strong, .listo-host-parking-workspace__steps small { display:block; }
.listo-host-parking-workspace__steps small { color:#68747f; margin-top:3px; }
.listo-host-parking-rule-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:24px; }
.listo-host-parking-rule-grid > div { padding:16px; border-radius:14px; background:#f8fafc; }
.listo-host-parking-rule-grid strong, .listo-host-parking-rule-grid span { display:block; }
.listo-host-parking-rule-grid strong { margin-bottom:5px; }
.listo-host-parking-rule-grid span { color:#68747f; font-size:13px; line-height:1.45; }

@media (max-width: 760px) {
  .listo-host-context-nav { padding-top: 8px; padding-bottom: 3px; }
  .listo-host-context-nav__inner { width:calc(100% - 24px); min-height:50px; gap:6px; }
  .listo-host-context-pill { min-width:0; flex:1 1 0; min-height:36px; padding:6px 10px; font-size:13px; }
  .listo-host-context-pill__icon { width:16px; height:16px; flex-basis:16px; }
  .listo-host-context-pill__icon svg { width:16px; height:16px; }
  .listo-host-context-page { padding-top:20px; }
  .listo-host-context-hero { padding:20px; align-items:stretch; flex-direction:column; gap:16px; }
  .listo-host-context-hero h2 { font-size:20px; }
  .listo-host-context-hero .listo-btn { width:100%; justify-content:center; }
  .listo-host-parking-stat-grid, .listo-host-parking-action-grid, .listo-host-parking-rule-grid { grid-template-columns:1fr; }
  .listo-host-parking-stat { padding:16px; }
  .listo-host-parking-list-card { grid-template-columns:88px minmax(0,1fr); gap:12px; padding:11px; }
  .listo-host-parking-list-card__media { width:88px; border-radius:10px; }
  .listo-host-parking-list-card__action { grid-column:1 / -1; }
  .listo-host-parking-list-card__action .listo-btn { width:100%; justify-content:center; }
  .listo-host-context-toolbar { align-items:stretch; flex-direction:column; }
  .listo-host-context-toolbar .listo-btn { width:100%; justify-content:center; }
  .listo-host-parking-empty, .listo-host-parking-workspace { padding:24px 18px; }
}

/* ========================================================================
   NEXT527 — Service color coordination + shared Host navigation cleanup
   Staycation uses Listo Sky Blue; Parking uses bright orange. Shared Host
   infrastructure (Inbox, Cases, Edit Profile) has no business-context switch.
   ======================================================================== */
.listo-host-context-pill--staycation.is-active {
  background: #2196F3;
  color: #fff;
  box-shadow: 0 2px 8px rgba(33,150,243,.22);
}
.listo-host-context-pill--staycation.is-active:hover { background: #2196F3; color: #fff; }
.listo-host-context-pill--staycation:hover { background: #eef6ff; color: #1976D2; }
.listo-host-context-pill--parking.is-active {
  background: #ff6a00;
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,106,0,.22);
}
.listo-host-context-pill--parking.is-active:hover { background: #ff6a00; color: #fff; }
.listo-host-context-pill--parking:hover { background: #fff3e8; color: #e85d00; }

/* Parking is an orange service context. Keep semantic danger/success states
   untouched; these overrides only recolor ordinary interactive controls. */
body[data-listo-host-context="parking"] .listo-btn--primary,
body[data-listo-host-context="parking"] .listo-btn--primary:hover,
body[data-listo-host-context="parking"] .listo-btn--primary:focus,
body[data-listo-host-context="parking"] .listo-btn--secondary,
body[data-listo-host-context="parking"] .listo-btn--secondary:hover,
body[data-listo-host-context="parking"] .listo-btn--secondary:focus {
  background: #ff6a00;
  border-color: #ff6a00;
  color: #fff !important;
}
body[data-listo-host-context="parking"] .listo-btn--outline {
  color: #e85d00;
  border-color: #ff6a00;
}
body[data-listo-host-context="parking"] .listo-btn--outline:hover,
body[data-listo-host-context="parking"] .listo-btn--outline:focus {
  background: #fff3e8;
  border-color: #e85d00;
  color: #d95700;
}
body[data-listo-host-context="parking"] .listo-btn--tinted {
  background: #fff3e8;
  border-color: transparent;
  color: #e85d00;
}
body[data-listo-host-context="parking"] .listo-btn--tinted:hover {
  background: #ffe6d2;
  color: #d95700;
}
body[data-listo-host-context="parking"] .listo-btn:focus-visible {
  outline-color: #ff6a00;
}

/* Parking host pages should not retain blue-only links for primary workflow
   actions. This intentionally targets service-specific Host components. */
body[data-listo-host-context="parking"] .listo-host-parking-action b,
body[data-listo-host-context="parking"] .listo-host-parking-dashboard-card__head > a,
body[data-listo-host-context="parking"] .listo-host-parking-dashboard-empty a,
body[data-listo-host-context="parking"] .listo-host-parking-dashboard-space__meta a,
body[data-listo-host-context="parking"] .listo-host-parking-quick-action-list b,
body[data-listo-host-context="parking"] .listo-host-parking-payout-table a,
body[data-listo-host-context="parking"] .listo-host-parking-payout-empty a,
body[data-listo-host-context="parking"] .listo-host-parking-payout-links b,
body[data-listo-host-context="parking"] .listo-host-parking-status {
  color: #ff6a00;
}
body[data-listo-host-context="parking"] .listo-host-parking-metric__icon,
body[data-listo-host-context="parking"] .listo-host-parking-empty-icon,
body[data-listo-host-context="parking"] .listo-host-parking-empty__icon,
body[data-listo-host-context="parking"] .listo-host-parking-workspace__steps > span,
body[data-listo-host-context="parking"] .listo-host-parking-placeholder {
  color: #ff6a00;
}
body[data-listo-host-context="parking"] .listo-host-parking-metric__icon,
body[data-listo-host-context="parking"] .listo-host-parking-empty-icon,
body[data-listo-host-context="parking"] .listo-host-parking-empty__icon,
body[data-listo-host-context="parking"] .listo-host-parking-workspace__steps > span {
  background: #fff3e8;
}

/* ==========================================================================
   NEXT516 — Parking Dashboard
   Parking dashboard follows the existing Host visual language but prioritizes
   operations (today, rentals, inventory) before financial analytics.
   Desktop and mobile use the same information hierarchy with responsive
   stacking rather than simply shrinking the desktop layout.
   ========================================================================== */
.listo-host-parking-dashboard-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin: 0 0 20px;
  padding: 22px 24px;
  border:1px solid #e5ebf0;
  border-radius:18px;
  background:#fff;
}
.listo-host-parking-dashboard-intro h2 { margin:0 0 5px; font-size:22px; line-height:1.2; }
.listo-host-parking-dashboard-intro p { margin:0; color:#68747f; line-height:1.5; }
.listo-host-parking-dashboard-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.listo-host-parking-metric { min-width:0; display:flex; align-items:center; gap:13px; padding:18px 19px; border:1px solid #e5ebf0; border-radius:16px; background:#fff; }
.listo-host-parking-metric__icon { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:12px; background:#eef7ff; color:#2196F3; }
.listo-host-parking-metric__icon svg { width:21px; height:21px; }
.listo-host-parking-metric div { min-width:0; }
.listo-host-parking-metric div > span, .listo-host-parking-metric small { display:block; color:#68747f; }
.listo-host-parking-metric div > span { font-size:12px; font-weight:700; }
.listo-host-parking-metric strong { display:block; margin:4px 0 2px; font-size:25px; line-height:1.05; color:#1f2933; }
.listo-host-parking-metric small { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.listo-host-parking-dashboard-columns { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.9fr); gap:16px; margin-bottom:16px; }
.listo-host-parking-dashboard-card { min-width:0; border:1px solid #e5ebf0; border-radius:18px; background:#fff; padding:20px; }
.listo-host-parking-dashboard-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.listo-host-parking-dashboard-card__head h2 { margin:0 0 3px; font-size:18px; line-height:1.25; }
.listo-host-parking-dashboard-card__head p { margin:0; color:#68747f; font-size:12px; }
.listo-host-parking-dashboard-card__head > a { flex:0 0 auto; color:#2196F3; font-size:12px; font-weight:800; text-decoration:none; }
.listo-host-parking-today-list { display:grid; gap:8px; }
.listo-host-parking-today-item { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:11px; align-items:center; padding:11px 0; border-top:1px solid #edf1f4; }
.listo-host-parking-today-item:first-child { border-top:0; padding-top:0; }
.listo-host-parking-today-item__marker { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:#fff4ec; color:#ff6a00; }
.listo-host-parking-today-item__marker svg { width:20px; height:20px; }
.listo-host-parking-today-item__body { min-width:0; }
.listo-host-parking-today-item__body strong, .listo-host-parking-today-item__body span, .listo-host-parking-today-item__body small { display:block; }
.listo-host-parking-today-item__body strong { font-size:14px; color:#1f2933; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.listo-host-parking-today-item__body span { margin-top:2px; color:#68747f; font-size:12px; }
.listo-host-parking-today-item__body small { margin-top:4px; color:#56616b; font-size:11px; font-weight:700; }
.listo-host-parking-status-badge { white-space:nowrap; padding:5px 8px; border-radius:999px; background:#f4f6f8; color:#68747f; font-size:10px; font-weight:800; }
.listo-host-parking-dashboard-note { margin-top:12px; padding-top:11px; border-top:1px solid #edf1f4; color:#7a858e; font-size:11px; line-height:1.45; }
.listo-host-parking-dashboard-empty { min-height:155px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px 12px; }
.listo-host-parking-dashboard-empty strong { font-size:14px; color:#1f2933; }
.listo-host-parking-dashboard-empty span { max-width:420px; margin:6px 0 10px; color:#68747f; font-size:12px; line-height:1.5; }
.listo-host-parking-dashboard-empty a { color:#2196F3; font-size:12px; font-weight:800; text-decoration:none; }
.listo-host-parking-empty-icon { width:42px; height:42px; display:grid; place-items:center; margin-bottom:9px; border-radius:12px; background:#eef7ff; color:#2196F3; }
.listo-host-parking-empty-icon svg { width:21px; height:21px; }
.listo-host-parking-inventory { margin-bottom:16px; }
.listo-host-parking-dashboard-inventory-list { display:grid; gap:9px; }
.listo-host-parking-dashboard-space { display:grid; grid-template-columns:84px minmax(0,1fr) auto; gap:13px; align-items:center; padding:10px; border:1px solid #edf1f4; border-radius:14px; }
.listo-host-parking-dashboard-space__media { width:84px; aspect-ratio:4/3; overflow:hidden; border-radius:10px; background:#f1f6fa; }
.listo-host-parking-dashboard-space__media img { width:100%; height:100%; object-fit:cover; display:block; }
.listo-host-parking-dashboard-space__body { min-width:0; }
.listo-host-parking-dashboard-space__body h3 { margin:3px 0 2px; font-size:14px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.listo-host-parking-dashboard-space__body p { margin:0; color:#68747f; font-size:11px; }
.listo-host-parking-dashboard-space__body .listo-host-parking-tags { margin:6px 0 0; }
.listo-host-parking-dashboard-space__body .listo-host-parking-tags span { padding:3px 7px; font-size:10px; }
.listo-host-parking-dashboard-space__meta { min-width:92px; display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.listo-host-parking-dashboard-space__meta strong { color:#1f2933; font-size:13px; white-space:nowrap; }
.listo-host-parking-dashboard-space__meta strong small { color:#68747f; font-size:10px; font-weight:600; }
.listo-host-parking-dashboard-space__meta a { color:#2196F3; font-size:11px; font-weight:800; text-decoration:none; }
.listo-host-parking-dashboard-bottom { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:16px; }
.listo-host-parking-earnings-amount { margin:4px 0 3px; font-size:34px; font-weight:800; line-height:1.05; color:#216fc2; }
.listo-host-parking-earnings-label { padding:5px 8px; border-radius:999px; background:#f4f6f8; color:#68747f; font-size:10px; font-weight:800; white-space:nowrap; }
.listo-host-parking-earnings-note { margin:0; color:#68747f; font-size:12px; line-height:1.5; }
.listo-host-parking-quick-action-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.listo-host-parking-quick-action-list a { display:flex; flex-direction:column; gap:8px; min-height:64px; justify-content:center; padding:11px 12px; border:1px solid #edf1f4; border-radius:12px; text-decoration:none; color:#1f2933; }
.listo-host-parking-quick-action-list a:hover { border-color:#c9dff0; }
.listo-host-parking-quick-action-list span { font-size:11px; color:#56616b; }
.listo-host-parking-quick-action-list b { color:#2196F3; font-size:11px; }

@media (max-width: 980px) {
  .listo-host-parking-dashboard-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .listo-host-parking-dashboard-columns { grid-template-columns:1fr; }
  .listo-host-parking-dashboard-bottom { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .listo-host-parking-dashboard-intro { align-items:stretch; flex-direction:column; gap:14px; padding:18px; }
  .listo-host-parking-dashboard-intro h2 { font-size:20px; }
  .listo-host-parking-dashboard-intro .listo-btn { width:100%; justify-content:center; }
  .listo-host-parking-dashboard-metrics { grid-template-columns:1fr 1fr; gap:9px; }
  .listo-host-parking-metric { padding:13px 12px; gap:9px; align-items:flex-start; }
  .listo-host-parking-metric__icon { width:34px; height:34px; flex-basis:34px; border-radius:10px; }
  .listo-host-parking-metric__icon svg { width:18px; height:18px; }
  .listo-host-parking-metric strong { font-size:21px; }
  .listo-host-parking-metric div > span { font-size:10.5px; }
  .listo-host-parking-metric small { font-size:9.5px; }
  .listo-host-parking-dashboard-card { padding:16px; border-radius:16px; }
  .listo-host-parking-dashboard-card__head { margin-bottom:12px; }
  .listo-host-parking-dashboard-card__head h2 { font-size:17px; }
  .listo-host-parking-dashboard-card__head > a { font-size:11px; }
  .listo-host-parking-today-item { grid-template-columns:34px minmax(0,1fr); }
  .listo-host-parking-today-item__marker { width:34px; height:34px; }
  .listo-host-parking-status-badge { grid-column:2; justify-self:start; margin-top:-4px; }
  .listo-host-parking-dashboard-space { grid-template-columns:72px minmax(0,1fr); gap:10px; }
  .listo-host-parking-dashboard-space__media { width:72px; }
  .listo-host-parking-dashboard-space__meta { grid-column:2; flex-direction:row; align-items:center; justify-content:space-between; min-width:0; }
  .listo-host-parking-dashboard-bottom { gap:12px; }
  .listo-host-parking-quick-action-list { grid-template-columns:1fr; }
  .listo-host-parking-quick-action-list a { min-height:48px; flex-direction:row; align-items:center; justify-content:space-between; }
}

/* ========================================================================== 
   NEXT517 — Parking Bookings + Dashboard rental data connection
   ========================================================================== */
.listo-host-parking-bookings-intro { margin: 0 0 16px; padding: 18px 20px; border: 1px solid #edf1f4; border-radius: 16px; background: var(--surface); }
.listo-host-parking-bookings-intro h2 { margin: 3px 0 3px; font-size: 21px; line-height: 1.2; }
.listo-host-parking-bookings-intro p { margin: 0; color: #68747f; font-size: 12px; line-height: 1.5; }
.listo-parking-booking-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; }
.listo-parking-booking-tabs a { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:999px; text-decoration:none; color:#68747f; background:#f5f7f8; font-size:12px; font-weight:800; }
.listo-parking-booking-tabs a span { min-width:18px; text-align:center; padding:2px 5px; border-radius:999px; background:#fff; font-size:10px; }
.listo-parking-booking-tabs a.is-active { color:#fff; background:#ff6a00; }
.listo-parking-booking-tabs a.is-active span { color:#ff6a00; }
.listo-parking-booking-filters { display:grid; grid-template-columns:minmax(220px,1.5fr) minmax(180px,1fr) minmax(160px,.8fr) auto; gap:9px; align-items:end; margin-bottom:16px; padding:13px; border:1px solid #edf1f4; border-radius:14px; background:#fafbfc; }
.listo-parking-booking-filters label { display:flex; flex-direction:column; gap:5px; }
.listo-parking-booking-filters label span { font-size:10px; font-weight:800; color:#68747f; }
.listo-parking-booking-filters input,.listo-parking-booking-filters select { width:100%; min-height:40px; border:1px solid #dfe5e9; border-radius:10px; background:#fff; padding:8px 10px; font:inherit; font-size:12px; color:#1f2933; }
.listo-parking-booking-filters .listo-btn { min-height:40px; }
.listo-parking-rental-list { display:grid; gap:9px; }
.listo-parking-rental-card { display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:18px; align-items:center; padding:14px 16px; border:1px solid #edf1f4; border-radius:14px; background:#fff; }
.listo-parking-rental-card__when { display:flex; flex-direction:column; gap:3px; }
.listo-parking-rental-card__when strong { font-size:15px; color:#1f2933; }
.listo-parking-rental-card__when span { color:#68747f; font-size:11px; }
.listo-parking-rental-card__main { min-width:0; }
.listo-parking-rental-card__tx { color:#ff6a00; font-size:10px; font-weight:900; letter-spacing:.03em; }
.listo-parking-rental-card__main h3 { margin:3px 0 2px; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.listo-parking-rental-card__main p { margin:0; color:#68747f; font-size:11px; }
.listo-parking-rental-card__amount { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.listo-parking-rental-card__amount strong { font-size:14px; }
.listo-parking-rental-status { display:inline-flex; padding:4px 8px; border-radius:999px; font-size:9px; font-weight:900; }
.listo-parking-rental-status--upcoming { background:#fff4e8; color:#d85b00; }
.listo-parking-rental-status--active { background:#eaf6ef; color:#217a47; }
.listo-parking-rental-status--completed { background:#f1f3f5; color:#59636d; }
.listo-parking-rental-status--cancelled { background:#fff0f0; color:#b33b3b; }
.listo-parking-bookings-empty { margin-top:0; min-height:300px; display:flex; align-items:center; justify-content:center; text-align:center; flex-direction:column; padding:28px; }
.listo-parking-bookings-empty strong { font-size:16px; margin-bottom:6px; }
.listo-parking-bookings-empty > span { max-width:480px; color:#68747f; font-size:12px; line-height:1.55; }
.listo-parking-bookings-empty > a { margin-top:12px; color:#2196F3; font-size:12px; font-weight:800; text-decoration:none; }
@media (max-width: 800px) {
  .listo-parking-booking-filters { grid-template-columns:1fr 1fr; }
  .listo-parking-booking-filters label:first-child { grid-column:1 / -1; }
  .listo-parking-booking-filters .listo-btn { width:100%; }
  .listo-parking-rental-card { grid-template-columns:1fr auto; gap:10px 14px; }
  .listo-parking-rental-card__when { grid-column:1 / -1; flex-direction:row; align-items:baseline; justify-content:space-between; padding-bottom:8px; border-bottom:1px solid #edf1f4; }
  .listo-parking-rental-card__amount { grid-column:2; grid-row:2; }
}
@media (max-width: 520px) {
  .listo-host-parking-bookings-intro { padding:16px; }
  .listo-host-parking-bookings-intro h2 { font-size:19px; }
  .listo-parking-booking-tabs { overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; scrollbar-width:none; }
  .listo-parking-booking-tabs::-webkit-scrollbar { display:none; }
  .listo-parking-booking-tabs a { flex:0 0 auto; }
  .listo-parking-booking-filters { grid-template-columns:1fr; padding:11px; }
  .listo-parking-booking-filters label:first-child { grid-column:auto; }
  .listo-parking-rental-card { grid-template-columns:1fr; padding:13px; }
  .listo-parking-rental-card__when { grid-column:auto; }
  .listo-parking-rental-card__amount { grid-column:auto; grid-row:auto; flex-direction:row; justify-content:space-between; align-items:center; }
}

/* NEXT518 — Parking Calendar & Pricing */
.listo-host-parking-notice{margin:0 0 16px;padding:11px 14px;border:1px solid #dcefe5;border-radius:12px;background:#f4fbf7;color:#2f6b4d;font-size:12px;font-weight:700}
.listo-host-parking-calendar-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 16px;padding:18px 20px;border:1px solid #edf1f4;border-radius:16px;background:#fff}
.listo-host-parking-calendar-toolbar h2{margin:3px 0 3px;font-size:21px;line-height:1.2}.listo-host-parking-calendar-toolbar p{margin:0;color:#68747f;font-size:12px;line-height:1.5}.listo-parking-space-picker{min-width:260px}.listo-parking-space-picker label,.listo-parking-block-form label,.listo-parking-pricing-form label{display:flex;flex-direction:column;gap:6px}.listo-parking-space-picker span,.listo-parking-block-form span,.listo-parking-pricing-form span{font-size:11px;font-weight:800;color:#56616b}.listo-parking-space-picker select,.listo-parking-block-form input,.listo-parking-pricing-form input,.listo-parking-availability-row input[type=time]{height:40px;border:1px solid #dfe6eb;border-radius:10px;background:#fff;padding:0 11px;color:#1f2933;font:inherit;box-sizing:border-box}.listo-host-parking-calendar-card{border:1px solid #e5ebf0;border-radius:18px;background:#fff;padding:20px;margin-bottom:16px;min-width:0}.listo-parking-calendar-head,.listo-parking-day-head,.listo-parking-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.listo-parking-calendar-head strong{display:block;font-size:20px;line-height:1.2}.listo-parking-calendar-head span{display:block;margin-top:4px;color:#68747f;font-size:11px}.listo-parking-calendar-nav{display:flex;gap:6px}.listo-parking-calendar-nav a{width:36px;height:36px;border:1px solid #e1e7ec;border-radius:10px;display:grid;place-items:center;text-decoration:none;color:#ff6a00;font-size:25px;line-height:1}.listo-parking-calendar-legend{display:flex;gap:15px;flex-wrap:wrap;margin:16px 0 10px}.listo-parking-calendar-legend span{display:flex;align-items:center;gap:6px;color:#68747f;font-size:10px;font-weight:700}.listo-parking-calendar-legend i{width:8px;height:8px;border-radius:50%;display:inline-block;background:#cbd5dc}.listo-parking-calendar-legend i.is-available{background:#2e9d67}.listo-parking-calendar-legend i.is-booked{background:#ff6a00}.listo-parking-calendar-legend i.is-blocked{background:#8c6bff}.listo-parking-calendar-legend i.is-closed{background:#aab3ba}.listo-parking-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid #edf1f4;border-left:1px solid #edf1f4}.listo-parking-month-dow{padding:9px 8px;border-right:1px solid #edf1f4;border-bottom:1px solid #edf1f4;color:#7a858e;font-size:10px;font-weight:800;text-transform:uppercase}.listo-parking-month-day{min-height:76px;padding:9px 8px;border-right:1px solid #edf1f4;border-bottom:1px solid #edf1f4;text-decoration:none;color:#1f2933;display:flex;flex-direction:column;align-items:flex-start;gap:4px;transition:background .15s ease}.listo-parking-month-day strong{font-size:13px}.listo-parking-month-day span{font-size:10px;font-weight:800}.listo-parking-month-day small{font-size:9px;color:#68747f}.listo-parking-month-day.is-outside{opacity:.38}.listo-parking-month-day.is-today{box-shadow:inset 0 2px 0 #ff6a00}.listo-parking-month-day.is-available span{color:#2e8b5d}.listo-parking-month-day.is-booked span{color:#d95b00}.listo-parking-month-day.is-blocked span{color:#7657d7}.listo-parking-month-day.is-closed span{color:#7a858e}.listo-parking-month-day:hover{background:#fffaf6}.listo-parking-day-card{padding-bottom:16px}.listo-parking-day-head{align-items:center}.listo-parking-day-head h2{margin:4px 0 0;font-size:20px}.listo-parking-day-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:16px}.listo-parking-day-summary div{padding:12px;border:1px solid #edf1f4;border-radius:12px}.listo-parking-day-summary span{display:block;color:#7a858e;font-size:10px}.listo-parking-day-summary strong{display:block;margin-top:4px;font-size:13px}.listo-parking-booked-periods,.listo-parking-blocked-periods{margin-top:16px}.listo-parking-booked-periods h3,.listo-parking-blocked-periods h3{margin:0 0 8px;font-size:13px}.listo-parking-booked-periods a,.listo-parking-blocked-periods>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid #edf1f4;text-decoration:none;color:#1f2933}.listo-parking-booked-periods a strong,.listo-parking-blocked-periods strong{font-size:12px}.listo-parking-booked-periods a span{color:#68747f;font-size:11px}.listo-parking-blocked-periods button{border:0;background:none;color:#ff6a00;font-size:11px;font-weight:800;cursor:pointer}.listo-parking-calendar-management-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.listo-parking-calendar-management-grid>.listo-host-parking-calendar-card:last-child{grid-column:1 / -1}.listo-parking-card-head{margin-bottom:14px}.listo-parking-card-head h2{margin:0 0 3px;font-size:17px}.listo-parking-card-head p{margin:0;color:#68747f;font-size:11px;line-height:1.5}.listo-parking-availability-form{display:grid;gap:7px}.listo-parking-availability-row{display:grid;grid-template-columns:minmax(120px,1fr) 110px 18px 110px;align-items:center;gap:7px;padding:8px 0;border-bottom:1px solid #f0f3f5}.listo-parking-day-toggle{display:flex;align-items:center;gap:8px;color:#1f2933;font-size:12px;font-weight:700}.listo-parking-day-toggle input{accent-color:#ff6a00}.listo-parking-availability-row>span{text-align:center;color:#7a858e;font-size:10px}.listo-parking-availability-form .listo-btn{justify-self:start;margin-top:8px}.listo-parking-block-form{display:grid;gap:12px}.listo-parking-form-inline{display:grid;grid-template-columns:1fr 1fr;gap:10px}.listo-parking-block-form em{font-style:normal;font-weight:500;color:#8b959d}.listo-parking-pricing-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}.listo-parking-pricing-form label>div{display:flex;align-items:center;border:1px solid #dfe6eb;border-radius:10px;height:40px;overflow:hidden}.listo-parking-pricing-form label>div b{padding:0 0 0 11px;color:#68747f}.listo-parking-pricing-form label>div input{border:0;height:38px;padding-left:6px;width:100%;outline:0}.listo-parking-pricing-form .listo-btn{grid-column:1 / -1;justify-self:start}.listo-host-parking-calendar .listo-btn--primary{background:#ff6a00;border-color:#ff6a00}.listo-host-parking-calendar .listo-btn--secondary:hover{border-color:#ff6a00;color:#ff6a00}
@media(max-width:900px){.listo-host-parking-calendar-toolbar{align-items:stretch;flex-direction:column}.listo-parking-space-picker{min-width:0;width:100%}.listo-parking-calendar-management-grid{grid-template-columns:1fr}.listo-parking-calendar-management-grid>.listo-host-parking-calendar-card:last-child{grid-column:auto}}
@media(max-width:640px){.listo-host-parking-calendar-card{padding:16px;border-radius:16px}.listo-host-parking-calendar-toolbar{padding:16px}.listo-host-parking-calendar-toolbar h2{font-size:19px}.listo-parking-month-grid{display:none}.listo-parking-calendar-legend{gap:10px}.listo-parking-calendar-head strong{font-size:18px}.listo-parking-day-summary{grid-template-columns:1fr 1fr}.listo-parking-day-summary div:last-child{grid-column:1 / -1}.listo-parking-availability-row{grid-template-columns:minmax(95px,1fr) 86px 12px 86px}.listo-parking-availability-row input[type=time]{padding:0 7px}.listo-parking-pricing-form{grid-template-columns:1fr}.listo-parking-pricing-form .listo-btn{grid-column:auto}.listo-parking-booked-periods a,.listo-parking-blocked-periods>div{align-items:flex-start;flex-direction:column}.listo-parking-blocked-periods>div form{align-self:flex-end}.listo-parking-calendar-head span{max-width:190px}.listo-parking-calendar-head{align-items:center}}


/* ========================================================================== 
   NEXT519 — Parking Listings
   Inventory-first UI. Listings is the source for parking-space identity;
   Calendar & Pricing owns availability/rates, Bookings owns rentals, and
   Dashboard summarizes activity. Responsive from the start.
   ========================================================================== */
.listo-host-parking-listings-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 18px;padding:22px 24px;border:1px solid #e5ebf0;border-radius:18px;background:#fff}
.listo-host-parking-listings-head h2{margin:3px 0 5px;font-size:22px;line-height:1.2}.listo-host-parking-listings-head p{margin:0;color:#68747f;line-height:1.5;max-width:720px}.listo-host-parking-listings-head .listo-btn{flex:0 0 auto}
.listo-host-parking-listings-success{margin:0 0 14px;padding:11px 14px;border:1px solid #dcefe5;border-radius:12px;background:#f4fbf7;color:#2f6b4d;font-size:12px;font-weight:700}
.listo-host-parking-listing-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}.listo-host-parking-listing-summary>div{padding:14px 16px;border:1px solid #e5ebf0;border-radius:14px;background:#fff}.listo-host-parking-listing-summary span{display:block;color:#68747f;font-size:11px;font-weight:700}.listo-host-parking-listing-summary strong{display:block;margin-top:4px;font-size:23px;color:#1f2933}
.listo-host-parking-listings-grid{display:grid;gap:12px}.listo-host-parking-listing-card{display:grid;grid-template-columns:190px minmax(0,1fr) 180px;gap:20px;align-items:center;padding:14px;border:1px solid #e5ebf0;border-radius:18px;background:#fff}.listo-host-parking-listing-card__media{width:190px;aspect-ratio:4/3;overflow:hidden;border-radius:13px;background:#f1f6fa}.listo-host-parking-listing-card__media img{width:100%;height:100%;object-fit:cover;display:block}.listo-host-parking-listing-card__body{min-width:0}.listo-host-parking-listing-status{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:#f5f7f8;color:#68747f;font-size:10px;font-weight:800}.listo-host-parking-listing-status.is-published{background:#eef9f3;color:#2e8b5d}.listo-host-parking-listing-status.is-pending{background:#fff4e9;color:#e56300}.listo-host-parking-listing-status.is-draft{background:#f2f3f5;color:#68747f}.listo-host-parking-listing-card h2{margin:6px 0 3px;font-size:18px;line-height:1.2}.listo-host-parking-listing-card__body>p{margin:0;color:#68747f;font-size:12px}.listo-host-parking-listing-card__pricing{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px}.listo-host-parking-listing-card__pricing strong{font-size:14px;color:#1f2933}.listo-host-parking-listing-card__pricing small{margin-left:3px;color:#68747f;font-size:10px;font-weight:600}.listo-host-parking-listing-card__side{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:13px}.listo-host-parking-listing-card__activity{padding:10px 12px;border-radius:12px;background:#f8fafc;text-align:center}.listo-host-parking-listing-card__activity strong{display:block;font-size:18px;line-height:1}.listo-host-parking-listing-card__activity span{display:block;margin-top:4px;color:#68747f;font-size:10px}.listo-host-parking-listing-card__actions{display:grid;gap:6px}.listo-host-parking-listing-card__actions .listo-btn{width:100%;justify-content:center}.listo-host-parking-listing-card__actions>a:not(.listo-btn){padding:3px 0;text-align:center;color:#ff6a00;text-decoration:none;font-size:11px;font-weight:800}.listo-host-parking-listings-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px;padding:13px 2px;color:#68747f;font-size:11px;line-height:1.45}.listo-host-parking-listings-footer>div{display:flex;gap:14px;flex:0 0 auto}.listo-host-parking-listings-footer a{color:#ff6a00;text-decoration:none;font-weight:800}.listo-host-parking-listings-empty{margin-top:4px}
@media(max-width:900px){.listo-host-parking-listing-card{grid-template-columns:140px minmax(0,1fr);gap:14px}.listo-host-parking-listing-card__media{width:140px}.listo-host-parking-listing-card__side{grid-column:1/-1;display:grid;grid-template-columns:130px minmax(0,1fr);align-items:center;gap:12px}.listo-host-parking-listing-card__actions{grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}.listo-host-parking-listing-card__actions .listo-btn{grid-column:1/-1}.listo-host-parking-listings-footer{align-items:flex-start;flex-direction:column}.listo-host-parking-listings-footer>div{flex-wrap:wrap}.listo-host-parking-listing-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.listo-host-parking-listings-head{align-items:stretch;flex-direction:column;padding:18px 16px}.listo-host-parking-listings-head h2{font-size:20px}.listo-host-parking-listings-head .listo-btn{width:100%;justify-content:center}.listo-host-parking-listing-summary{gap:8px}.listo-host-parking-listing-summary>div{padding:12px}.listo-host-parking-listing-summary strong{font-size:21px}.listo-host-parking-listing-card{grid-template-columns:86px minmax(0,1fr);gap:11px;padding:11px;border-radius:16px}.listo-host-parking-listing-card__media{width:86px;border-radius:10px}.listo-host-parking-listing-card h2{font-size:15px}.listo-host-parking-listing-card__body>p{font-size:11px}.listo-host-parking-tags{margin:7px 0}.listo-host-parking-tags span{font-size:9px;padding:3px 6px}.listo-host-parking-listing-card__pricing{gap:9px;margin-top:6px}.listo-host-parking-listing-card__pricing strong{font-size:12px}.listo-host-parking-listing-card__side{grid-template-columns:1fr;gap:9px}.listo-host-parking-listing-card__actions{grid-template-columns:1fr 1fr;gap:6px}.listo-host-parking-listing-card__actions .listo-btn{grid-column:1/-1}.listo-host-parking-listings-footer{padding:10px 2px}.listo-host-parking-listings-footer>div{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:100%}.listo-host-parking-listings-footer a:last-child{grid-column:1/-1}}


/* NEXT520 — Parking Payouts */
.listo-host-parking-payouts-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:0 0 20px}.listo-host-parking-payouts-intro h2{margin:2px 0 5px;font-size:22px;line-height:1.2}.listo-host-parking-payouts-intro p{margin:0;color:#68747f;line-height:1.5}.listo-host-parking-payout-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.listo-host-parking-payout-metrics article{border:1px solid #e5ebf0;border-radius:16px;padding:19px 20px;background:#fff}.listo-host-parking-payout-metrics span,.listo-host-parking-payout-metrics small{display:block;color:#6e7983}.listo-host-parking-payout-metrics span{font-size:13px;font-weight:700}.listo-host-parking-payout-metrics strong{display:block;font-size:27px;line-height:1.1;margin:7px 0 5px;color:#1f2933}.listo-host-parking-payout-metrics small{font-size:12px;line-height:1.4}.listo-host-parking-payout-panel{border:1px solid #e5ebf0;border-radius:18px;background:#fff;padding:20px;margin-bottom:20px}.listo-host-parking-payout-panel__head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:17px}.listo-host-parking-payout-panel__head h2{margin:0 0 5px;font-size:19px}.listo-host-parking-payout-panel__head p{margin:0;color:#68747f;font-size:13px}.listo-host-parking-payout-month,.listo-host-parking-payout-filters form{display:flex;align-items:center;gap:8px}.listo-host-parking-payout-month input,.listo-host-parking-payout-filters select,.listo-host-parking-payout-filters input{height:40px;border:1px solid #dfe6eb;border-radius:10px;padding:0 11px;background:#fff;color:#26323d}.listo-host-parking-payout-breakdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.listo-host-parking-payout-breakdown>div{padding:14px;border-radius:12px;background:#f8fafc}.listo-host-parking-payout-breakdown span,.listo-host-parking-payout-breakdown strong{display:block}.listo-host-parking-payout-breakdown span{font-size:12px;color:#6e7983}.listo-host-parking-payout-breakdown strong{margin-top:6px}.listo-host-parking-payout-breakdown .is-total{background:#f1f7fc}.listo-host-parking-payout-note{margin:13px 0 0;color:#74808a;font-size:12px;line-height:1.5}.listo-host-parking-payout-table-wrap{overflow-x:auto}.listo-host-parking-payout-table{width:100%;border-collapse:collapse;min-width:760px}.listo-host-parking-payout-table th,.listo-host-parking-payout-table td{text-align:left;padding:13px 10px;border-bottom:1px solid #edf1f4;font-size:13px;vertical-align:middle}.listo-host-parking-payout-table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#74808a}.listo-host-parking-payout-table a{color:#2196F3;text-decoration:none;font-weight:700}.listo-host-parking-payout-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:32px 16px;border-radius:14px;background:#f8fafc}.listo-host-parking-payout-empty strong{font-size:16px}.listo-host-parking-payout-empty span{color:#68747f;font-size:13px}.listo-host-parking-payout-empty a{color:#2196F3;font-weight:700;text-decoration:none;margin-top:5px}.listo-host-parking-payout-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}.listo-host-parking-payout-links a{display:flex;flex-direction:column;gap:7px;min-height:130px;padding:17px;border:1px solid #e5ebf0;border-radius:16px;background:#fff;color:inherit;text-decoration:none}.listo-host-parking-payout-links a:hover{border-color:#c9dff0;box-shadow:0 7px 20px rgba(20,50,80,.06)}.listo-host-parking-payout-links strong{font-size:15px}.listo-host-parking-payout-links span{color:#68747f;font-size:12px;line-height:1.45}.listo-host-parking-payout-links b{margin-top:auto;color:#2196F3;font-size:12px}.listo-host-parking-payout-settings{display:flex;justify-content:space-between;gap:20px;align-items:center;border:1px solid #e5ebf0;border-radius:18px;background:#fff;padding:20px}.listo-host-parking-payout-settings h2{margin:0 0 5px;font-size:18px}.listo-host-parking-payout-settings p{margin:0;color:#68747f;font-size:13px;line-height:1.5;max-width:760px}
@media (max-width:900px){.listo-host-parking-payout-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.listo-host-parking-payout-breakdown{grid-template-columns:repeat(2,minmax(0,1fr))}.listo-host-parking-payout-links{grid-template-columns:repeat(2,minmax(0,1fr))}.listo-host-parking-payout-panel__head{flex-direction:column}.listo-host-parking-payout-filters form{width:100%;flex-wrap:wrap}.listo-host-parking-payout-filters select,.listo-host-parking-payout-filters input{flex:1;min-width:150px}}
@media (max-width:640px){.listo-host-parking-payouts-intro{display:block}.listo-host-parking-payout-metrics{grid-template-columns:1fr;gap:10px}.listo-host-parking-payout-metrics article{padding:16px}.listo-host-parking-payout-metrics strong{font-size:24px}.listo-host-parking-payout-panel{padding:16px;border-radius:16px}.listo-host-parking-payout-month{width:100%}.listo-host-parking-payout-month input{flex:1}.listo-host-parking-payout-breakdown{grid-template-columns:1fr}.listo-host-parking-payout-links{grid-template-columns:1fr}.listo-host-parking-payout-settings{display:block;padding:17px}.listo-host-parking-payout-settings .listo-btn{width:100%;justify-content:center;margin-top:14px}.listo-host-parking-payout-filters form{display:grid;grid-template-columns:1fr;gap:8px}.listo-host-parking-payout-filters select,.listo-host-parking-payout-filters input,.listo-host-parking-payout-filters button{width:100%;min-width:0}.listo-host-parking-payout-table{min-width:700px}}
/* NEXT521 — Parking-aware Inbox: shared Inbox architecture, distinct context + chat IDs. */
.listo-inbox-thread-item__vertical{display:flex;align-items:center;gap:7px;margin:5px 0 2px;min-width:0}.listo-inbox-vertical-badge{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.05em;line-height:1}.listo-inbox-vertical-badge--parking{background:#fff0e6;color:#ff6a00}.listo-inbox-vertical-badge--staycation{background:#eef6ff;color:#2196F3}.listo-inbox-chat-id{color:#89939c;font-size:9px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.listo-inbox__thread-header-chat{display:flex;align-items:center;gap:7px;margin-top:3px;color:#89939c;font-size:9px;font-weight:800}.listo-inbox__thread-header-chat .listo-inbox-vertical-badge{font-size:8px}.listo-parking-contact-host{display:block;width:100%;margin-top:10px;padding:11px 14px;border:1px solid #dfe6eb;border-radius:12px;background:#fff;color:#ff6a00;font-weight:800;cursor:pointer}.listo-parking-contact-host:hover{border-color:#ffb98d;background:#fffaf6}.listo-parking-contact-host__status{min-height:18px;margin-top:6px;color:#68747f;font-size:11px;line-height:1.4}@media(max-width:640px){.listo-inbox-thread-item__vertical{margin-top:4px}.listo-inbox__thread-header-chat{font-size:8px}.listo-parking-contact-host{min-height:44px}}
/* NEXT521 — Parking Contact Host card */
.listo-parking-contact-host-card{margin-top:14px;padding:16px;border:1px solid #e5ebf0;border-radius:16px;background:#f8fafc}.listo-parking-contact-host-card strong{display:block;font-size:14px;color:#1f2933}.listo-parking-contact-host-card>span{display:block;margin-top:3px;color:#68747f;font-size:11px}.listo-parking-contact-host-card textarea{display:block;width:100%;min-height:76px;margin:11px 0 9px;padding:10px 11px;border:1px solid #dfe6eb;border-radius:10px;background:#fff;resize:vertical;font:inherit;font-size:12px;color:#26323d;box-sizing:border-box}.listo-parking-contact-host-card .listo-btn{width:100%;justify-content:center}.listo-parking-contact-host__status{min-height:17px;margin-top:6px;color:#68747f;font-size:11px;line-height:1.4}@media(max-width:640px){.listo-parking-contact-host-card{padding:14px;border-radius:14px}.listo-parking-contact-host-card textarea{min-height:84px}}
/* NEXT521 — Parking Dashboard ↔ Inbox workflow */
.listo-host-parking-dashboard-inquiry{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 20px;padding:15px 18px;border:1px solid #ffe0cc;border-radius:16px;background:#fffaf6;color:inherit;text-decoration:none}.listo-host-parking-dashboard-inquiry strong{display:block;margin:2px 0 3px;font-size:15px;color:#1f2933}.listo-host-parking-dashboard-inquiry small{display:block;color:#68747f;font-size:11px}.listo-host-parking-dashboard-inquiry>span{color:#ff6a00;font-size:11px;font-weight:800;white-space:nowrap}@media(max-width:640px){.listo-host-parking-dashboard-inquiry{align-items:flex-start;padding:14px;gap:12px}.listo-host-parking-dashboard-inquiry>span{margin-top:2px}}


/* NEXT522 — Parking Cases */
.listo-parking-cases-intro{margin:0 0 18px}.listo-parking-cases-intro h2{margin:3px 0 5px;font-size:22px;line-height:1.2}.listo-parking-cases-intro p{margin:0;color:#68747f;line-height:1.5}.listo-parking-case-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}.listo-parking-case-summary>div{border:1px solid #e5ebf0;border-radius:15px;background:#fff;padding:16px 17px}.listo-parking-case-summary span{display:block;color:#68747f;font-size:11px;font-weight:700}.listo-parking-case-summary strong{display:block;margin-top:6px;font-size:24px}.listo-parking-case-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px}.listo-parking-case-toolbar .listo-cases-filter-pills{display:flex;gap:7px;flex-wrap:wrap}.listo-parking-case-toolbar .listo-cases-search{flex:0 1 310px}.listo-parking-case-list{display:grid;gap:10px}.listo-parking-case-card{border:1px solid #e5ebf0;border-radius:16px;background:#fff;overflow:hidden}.listo-parking-case-card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 18px}.listo-parking-case-card>summary::-webkit-details-marker{display:none}.listo-parking-case-card>summary>div{min-width:0;flex:1}.listo-parking-case-card>summary>span{font-size:24px;color:#ff6a00;line-height:1}.listo-parking-case-card__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;color:#68747f;font-size:11px;font-weight:700}.listo-parking-case-card h3{margin:0;font-size:15px}.listo-parking-case-card p{margin:5px 0 0;color:#68747f;font-size:12px}.listo-parking-case-card__details{border-top:1px solid #edf1f4;padding:17px 18px}.listo-parking-case-records{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.listo-parking-case-records>div{border:1px solid #edf1f4;border-radius:12px;padding:12px}.listo-parking-case-records span,.listo-parking-case-records strong,.listo-parking-case-records small{display:block}.listo-parking-case-records span{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#7a858e;font-weight:800}.listo-parking-case-records strong{margin-top:5px;font-size:12px;word-break:break-word}.listo-parking-case-records small{margin-top:4px;color:#68747f;font-size:10px}.listo-parking-case-actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}.listo-parking-case-actions a{color:#2196F3;text-decoration:none;font-weight:800;font-size:12px}.listo-parking-case-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;border:1px solid #e5ebf0;border-radius:18px;background:#fff;padding:42px 20px}.listo-parking-case-empty__icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#fff4ea;color:#ff6a00}.listo-parking-case-empty__icon svg{width:24px;height:24px}.listo-parking-case-empty strong{font-size:16px}.listo-parking-case-empty span{max-width:540px;color:#68747f;font-size:13px;line-height:1.5}.listo-parking-case-empty a{margin-top:5px;color:#2196F3;text-decoration:none;font-size:12px;font-weight:800}.listo-host-parking-dashboard-case-link{margin-top:10px}.listo-host-parking-dashboard-case-link strong{font-size:15px}
@media (max-width:760px){.listo-parking-case-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.listo-parking-case-summary>div{padding:13px}.listo-parking-case-summary strong{font-size:21px}.listo-parking-case-toolbar{display:grid;gap:10px}.listo-parking-case-toolbar .listo-cases-search{width:100%;flex:none}.listo-parking-case-toolbar .listo-cases-filter-pills{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.listo-parking-case-toolbar .listo-cases-filter-pill{white-space:nowrap}.listo-parking-case-card>summary{padding:15px}.listo-parking-case-card__details{padding:14px}.listo-parking-case-records{grid-template-columns:1fr}.listo-parking-case-actions{display:grid;gap:9px}.listo-parking-case-actions a{display:flex;justify-content:space-between;align-items:center;border:1px solid #e5ebf0;border-radius:10px;padding:11px 12px}.listo-parking-case-empty{padding:34px 16px}}


/* NEXT523 — Parking Edit Profile */
.listo-parking-profile-settings{margin-top:20px}.listo-parking-profile-settings .listo-host-context-eyebrow{display:inline-block;margin-bottom:2px}.listo-parking-profile-setting-group{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:17px 0;border-top:1px solid #edf1f4}.listo-parking-profile-setting-copy{display:grid;gap:4px;min-width:0}.listo-parking-profile-setting-copy strong{font-size:14px}.listo-parking-profile-setting-copy span{color:#68747f;font-size:12px;line-height:1.45}.listo-parking-profile-setting-group select{min-width:180px;border:1px solid #dfe6eb;border-radius:10px;padding:10px 12px;background:#fff;font:inherit;font-size:12px}.listo-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}.listo-toggle input{position:absolute;opacity:0;pointer-events:none}.listo-toggle>span{position:relative;width:42px;height:24px;border-radius:999px;background:#dfe5ea;transition:.18s}.listo-toggle>span:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.16);transition:.18s}.listo-toggle input:checked+span{background:#ff6a00}.listo-toggle input:checked+span:after{transform:translateX(18px)}.listo-toggle b{font-size:11px;color:#68747f;min-width:18px}.listo-parking-profile-notifications{border-top:1px solid #edf1f4;padding-top:17px}.listo-notification-grid,.listo-parking-notification-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px}.listo-parking-notification-grid label{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #e7edf1;border-radius:12px;padding:12px 13px;font-size:12px}.listo-parking-notification-grid input{position:absolute;opacity:0;pointer-events:none}.listo-parking-notification-grid i{position:relative;display:block;width:34px;height:20px;border-radius:999px;background:#dfe5ea;flex:0 0 auto}.listo-parking-notification-grid i:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 2px rgba(0,0,0,.12)}.listo-parking-notification-grid input:checked+i{background:#ff6a00}.listo-parking-notification-grid input:checked+i:after{transform:translateX(14px)}.listo-parking-profile-save-row{display:flex;align-items:center;gap:12px;margin-top:18px}.listo-parking-profile-save-row>span{font-size:12px;color:#68747f}.listo-parking-contact-host-unavailable{display:grid;gap:3px;margin-top:16px;border:1px solid #e7edf1;border-radius:12px;padding:13px;background:#fafbfc}.listo-parking-contact-host-unavailable strong{font-size:12px}.listo-parking-contact-host-unavailable span{font-size:11px;color:#68747f;line-height:1.4}
@media (max-width:760px){.listo-parking-profile-setting-group{align-items:flex-start;gap:15px}.listo-parking-profile-setting-group--select{display:grid}.listo-parking-profile-setting-group select{width:100%}.listo-parking-notification-grid{grid-template-columns:1fr}.listo-parking-profile-save-row{display:grid}.listo-parking-profile-save-row .listo-btn{width:100%}}

/* NEXT526 — unified Cases service labels */
.listo-cases-page .listo-cases-service-filters{margin-left:auto}
.listo-case-service-badge{display:inline-flex;align-items:center;min-height:22px;padding:3px 8px;border-radius:999px;background:#eef6ff;color:#2171b5;font-size:9px;font-weight:900;letter-spacing:.05em;line-height:1}
.listo-case-service-badge--parking{background:#fff1e6;color:#d95b00}
.listo-cases-filter-pill--parking.is-active{border-color:#ff6a00;background:#fff1e6;color:#d95b00}
.listo-case-card--parking .listo-case-card__dates{color:#68747f}
.listo-case-card--parking .listo-case-card__reason span{color:#7a858e}
.listo-case-card__actions--parking{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.listo-case-card__actions--parking a{color:#2196F3;text-decoration:none;font-weight:800;font-size:12px}
@media(max-width:760px){.listo-cases-page .listo-cases-service-filters{margin-left:0;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.listo-cases-page .listo-cases-service-filters .listo-cases-filter-pill{white-space:nowrap}.listo-case-card__actions--parking{display:grid;gap:9px}.listo-case-card__actions--parking a{display:flex;justify-content:space-between;align-items:center;border:1px solid #e5ebf0;border-radius:10px;padding:11px 12px}}

/* NEXT529 — Parking Host page titles use the same title geometry and filled
   icon treatment as Staycation Host pages, with Parking's orange service accent. */
body[data-listo-mode="host"] .listo-main .listo-host-parking-page-title .listo-page-title__icon--parking {
  color: #FFFFFF !important;
  background: #FF6A00 !important;
  border-color: #FF6A00 !important;
}
body[data-listo-mode="host"] .listo-main .listo-host-parking-page-title .listo-page-title__icon--parking svg {
  color: #FFFFFF !important;
  stroke: currentColor !important;
}


/* ========================================================================
   NEXT530 — Parking menu/title icon parity
   Parking uses the exact same SVG icon in the Host menu and corresponding
   page title. Each Parking function gets its own service accent color; the
   orange Parking context pill remains the business-context color.
   ======================================================================== */
.listo-page-title-row--parking .listo-page-title__icon {
  color: #fff !important;
  border-radius: 14px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08), 0 4px 10px rgba(31,41,51,.08);
}
.listo-page-title__icon--parking-dashboard { background: #2196F3; }
.listo-page-title__icon--parking-listings { background: #8B5CF6; }
.listo-page-title__icon--parking-bookings { background: #16A34A; }
.listo-page-title__icon--parking-calendar { background: #F59E0B; }
.listo-page-title__icon--parking-payouts { background: #EC4899; }

.listo-account-dropdown__icon--parking-dashboard { color:#fff !important; background:#2196F3 !important; }
.listo-account-dropdown__icon--parking-listings { color:#fff !important; background:#8B5CF6 !important; }
.listo-account-dropdown__icon--parking-bookings { color:#fff !important; background:#16A34A !important; }
.listo-account-dropdown__icon--parking-calendar { color:#fff !important; background:#F59E0B !important; }
.listo-account-dropdown__icon--parking-payouts { color:#fff !important; background:#EC4899 !important; }

@media (max-width:700px) {
  .listo-page-title-row--parking .listo-page-title__icon { border-radius:12px; }
}

/* ========================================================================== 
   NEXT532 — Parking Dashboard app-like refinement
   ========================================================================== */
.listo-host-parking-dashboard-intro{padding:18px 20px;border-radius:16px;margin-bottom:14px;background:#fbfcfd}
.listo-host-parking-dashboard-intro h2{font-size:20px;margin-bottom:4px}
.listo-host-parking-dashboard-intro p{font-size:13px}
.listo-host-parking-dashboard-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.listo-host-parking-metric{padding:15px 16px;border-radius:15px;gap:11px}
.listo-host-parking-metric__icon--blue{background:#eef7ff;color:#2196F3}.listo-host-parking-metric__icon--green{background:#eaf9f0;color:#16a34a}.listo-host-parking-metric__icon--amber{background:#fff6df;color:#d88a00}.listo-host-parking-metric__icon--pink{background:#fff0f7;color:#e83e93}
.listo-host-parking-metric strong{font-size:23px}
.listo-host-parking-dashboard-card{padding:18px;border-radius:16px;margin-bottom:14px}
.listo-host-parking-dashboard-card__head{margin-bottom:13px}
.listo-host-parking-dashboard-card__head h2{font-size:17px}
.listo-host-parking-dashboard-card__head > a{color:#ff6a00}
.listo-host-parking-dashboard-empty--compact{min-height:112px}
.listo-host-parking-empty-icon--green{background:#eaf9f0;color:#16a34a}.listo-host-parking-empty-icon--amber{background:#fff6df;color:#d88a00}
.listo-host-parking-upcoming-list{display:grid;gap:8px}
.listo-host-parking-upcoming-item{display:grid;grid-template-columns:105px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px;border:1px solid #edf1f4;border-radius:13px}
.listo-host-parking-upcoming-item__date strong,.listo-host-parking-upcoming-item__date span,.listo-host-parking-upcoming-item__body strong,.listo-host-parking-upcoming-item__body span{display:block}
.listo-host-parking-upcoming-item__date strong{font-size:14px;color:#1f2933}.listo-host-parking-upcoming-item__date span{margin-top:3px;font-size:11px;color:#68747f}
.listo-host-parking-upcoming-item__body strong{font-size:13px}.listo-host-parking-upcoming-item__body span{margin-top:3px;font-size:11px;color:#68747f}
.listo-host-parking-upcoming-item__tx{font-size:10px;font-weight:800;color:#ff6a00;white-space:nowrap}
.listo-host-parking-dashboard-bottom{gap:14px}
.listo-host-parking-quick-action-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.listo-host-parking-quick-action-list a{min-height:56px;padding:10px 12px}
.listo-host-parking-quick-action-list a.is-primary{border-color:#ff6a00;background:#fff7f1}
.listo-host-parking-quick-action-list a.is-primary b{color:#ff6a00}
.listo-host-parking-earnings-amount{color:#ff6a00;font-size:32px}
@media(max-width:980px){.listo-host-parking-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.listo-host-parking-upcoming-item{grid-template-columns:92px minmax(0,1fr)}}
@media(max-width:760px){.listo-host-parking-dashboard-intro{padding:16px;margin-bottom:10px}.listo-host-parking-dashboard-intro h2{font-size:19px}.listo-host-parking-dashboard-intro p{font-size:12px}.listo-host-parking-dashboard-metrics{gap:8px;margin-bottom:10px}.listo-host-parking-metric{padding:12px 11px;border-radius:13px}.listo-host-parking-metric strong{font-size:20px}.listo-host-parking-dashboard-card{padding:14px;border-radius:15px;margin-bottom:10px}.listo-host-parking-upcoming-item{grid-template-columns:76px minmax(0,1fr);gap:9px;padding:11px}.listo-host-parking-upcoming-item__tx{grid-column:2}.listo-host-parking-quick-action-list{grid-template-columns:1fr}.listo-host-parking-quick-action-list a{min-height:48px}.listo-host-parking-earnings-amount{font-size:29px}}


/* ==========================================================================
   NEXT533 — Parking Dashboard financial-only redesign
   ========================================================================== */

.listo-host-parking-dashboard-finance-controls{
  display:flex;
  justify-content:flex-end;
  margin:0 0 16px;
}
.listo-host-parking-dashboard-finance-controls form{
  display:flex;
  align-items:center;
  gap:10px;
}
.listo-host-parking-dashboard-finance-controls label{
  color:#68747f;
  font-size:12px;
  font-weight:700;
}
.listo-host-parking-dashboard-finance-controls .listo-select{
  min-width:170px;
}

.listo-host-parking-finance-snapshot{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  border:1px solid #dbe8f4;
  border-radius:20px;
  background:#f7fbff;
  overflow:hidden;
  margin-bottom:16px;
}
.listo-host-parking-finance-snapshot__hero{
  display:flex;
  align-items:center;
  gap:16px;
  padding:24px 26px;
}
.listo-host-parking-finance-snapshot__icon{
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  color:#fff;
  background:#2196F3;
  box-shadow:0 7px 16px rgba(33,150,243,.18);
  flex:0 0 auto;
}
.listo-host-parking-finance-snapshot__icon svg{
  width:24px;
  height:24px;
}
.listo-host-parking-finance-snapshot__hero > div:last-child{
  min-width:0;
}
.listo-host-parking-finance-snapshot__hero span{
  display:block;
  color:#4e6170;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}
.listo-host-parking-finance-snapshot__hero strong{
  display:block;
  margin-top:3px;
  color:#174f88;
  font-size:40px;
  line-height:1.04;
  font-weight:850;
}
.listo-host-parking-finance-snapshot__hero small{
  display:block;
  margin-top:6px;
  color:#6f7e89;
  font-size:12px;
}
.listo-host-parking-finance-snapshot__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:#fff;
  border-left:1px solid #dbe8f4;
}
.listo-host-parking-finance-snapshot__stats > div{
  padding:21px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-left:1px solid #eef2f5;
}
.listo-host-parking-finance-snapshot__stats > div:first-child{border-left:0}
.listo-host-parking-finance-snapshot__stats span{
  color:#68747f;
  font-size:11px;
  line-height:1.35;
}
.listo-host-parking-finance-snapshot__stats strong{
  margin-top:7px;
  color:#18212a;
  font-size:24px;
  line-height:1.05;
  font-weight:800;
}

.listo-host-parking-finance-chart-card,
.listo-host-parking-finance-card{
  border:1px solid #e4ebf0;
  border-radius:18px;
  background:#fff;
  padding:20px;
}
.listo-host-parking-finance-chart-card{
  margin-bottom:16px;
}
.listo-host-parking-finance-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.listo-host-parking-finance-section-head h2{
  margin:0 0 4px;
  font-size:19px;
  line-height:1.25;
}
.listo-host-parking-finance-section-head p{
  margin:0;
  color:#68747f;
  font-size:12px;
  line-height:1.45;
}
.listo-host-parking-finance-section-head > span{
  flex:0 0 auto;
  padding:6px 9px;
  border-radius:999px;
  background:#f4f7fa;
  color:#667784;
  font-size:10px;
  font-weight:800;
}
.listo-host-parking-finance-section-head > a{
  color:#ff6a00;
  font-size:11px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}
.listo-host-parking-finance-chart{
  width:100%;
  min-height:250px;
}
.listo-host-parking-finance-chart svg{
  width:100%;
  height:250px;
  display:block;
}
.listo-host-parking-finance-chart__grid line{
  stroke:#edf1f4;
  stroke-width:1;
}
.listo-host-parking-finance-chart__labels,
.listo-host-parking-finance-chart__x{
  fill:#8b98a2;
  font-size:10px;
}
.listo-host-parking-finance-chart__line{
  fill:none;
  stroke:#2196F3;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.listo-host-parking-finance-chart__point{
  fill:#fff;
  stroke:#2196F3;
  stroke-width:3;
}

.listo-host-parking-finance-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  margin-bottom:16px;
}
.listo-host-parking-finance-breakdown{
  display:grid;
  gap:0;
}
.listo-host-parking-finance-breakdown > div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid #edf1f4;
}
.listo-host-parking-finance-breakdown > div:last-child{
  border-bottom:0;
}
.listo-host-parking-finance-breakdown span{
  color:#68747f;
  font-size:12px;
}
.listo-host-parking-finance-breakdown strong{
  color:#1f2933;
  font-size:13px;
  font-weight:800;
}
.listo-host-parking-finance-breakdown .is-total{
  margin-top:4px;
  padding:14px 12px;
  border:0;
  border-radius:12px;
  background:#f7fbff;
}
.listo-host-parking-finance-breakdown .is-total span{
  color:#26333d;
  font-weight:800;
}
.listo-host-parking-finance-breakdown .is-total strong{
  color:#1768b4;
  font-size:19px;
}
.listo-host-parking-finance-note{
  margin:13px 0 0;
  color:#8a959d;
  font-size:11px;
}
.listo-host-parking-finance-position{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
.listo-host-parking-finance-position > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 0;
  border-bottom:1px solid #edf1f4;
}
.listo-host-parking-finance-position > div:last-child{
  border-bottom:0;
}
.listo-host-parking-finance-position span{
  color:#68747f;
  font-size:12px;
}
.listo-host-parking-finance-position strong{
  color:#1f2933;
  font-size:18px;
  font-weight:800;
}

.listo-host-parking-space-earnings{
  margin-bottom:10px;
}
.listo-host-parking-space-earnings__list{
  display:grid;
  gap:0;
}
.listo-host-parking-space-earnings__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 0;
  border-bottom:1px solid #edf1f4;
}
.listo-host-parking-space-earnings__row:last-child{border-bottom:0}
.listo-host-parking-space-earnings__row span{
  min-width:0;
  color:#34414b;
  font-size:13px;
  font-weight:650;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.listo-host-parking-space-earnings__row strong{
  color:#1768b4;
  font-size:15px;
  white-space:nowrap;
}
.listo-host-parking-finance-empty{
  min-height:95px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;
}
.listo-host-parking-finance-empty strong{
  color:#25313a;
  font-size:13px;
}
.listo-host-parking-finance-empty span{
  margin-top:5px;
  color:#7a8791;
  font-size:11px;
}

@media (max-width:980px){
  .listo-host-parking-finance-snapshot{
    grid-template-columns:1fr;
  }
  .listo-host-parking-finance-snapshot__stats{
    border-left:0;
    border-top:1px solid #dbe8f4;
  }
  .listo-host-parking-finance-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:760px){
  .listo-host-parking-dashboard-finance-controls{
    justify-content:stretch;
  }
  .listo-host-parking-dashboard-finance-controls form{
    width:100%;
    justify-content:space-between;
  }
  .listo-host-parking-dashboard-finance-controls .listo-select{
    flex:1;
    min-width:0;
  }

  .listo-host-parking-finance-snapshot__hero{
    padding:19px 18px;
  }
  .listo-host-parking-finance-snapshot__hero strong{
    font-size:34px;
  }
  .listo-host-parking-finance-snapshot__stats{
    grid-template-columns:1fr;
  }
  .listo-host-parking-finance-snapshot__stats > div{
    padding:14px 18px;
    border-left:0;
    border-top:1px solid #eef2f5;
  }
  .listo-host-parking-finance-snapshot__stats > div:first-child{
    border-top:0;
  }
  .listo-host-parking-finance-snapshot__stats strong{
    margin-top:4px;
    font-size:21px;
  }

  .listo-host-parking-finance-chart-card,
  .listo-host-parking-finance-card{
    padding:16px;
    border-radius:16px;
  }
  .listo-host-parking-finance-chart{
    min-height:210px;
  }
  .listo-host-parking-finance-chart svg{
    height:210px;
  }
  .listo-host-parking-finance-section-head h2{
    font-size:17px;
  }
  .listo-host-parking-finance-section-head p{
    font-size:11px;
  }
  .listo-host-parking-finance-section-head{
    gap:10px;
  }
  .listo-host-parking-finance-section-head > a{
    font-size:10px;
  }
  .listo-host-parking-finance-breakdown > div{
    padding:10px 0;
  }
  .listo-host-parking-finance-breakdown span,
  .listo-host-parking-finance-position span{
    font-size:11px;
  }
  .listo-host-parking-finance-breakdown strong{
    font-size:12px;
  }
  .listo-host-parking-finance-breakdown .is-total{
    padding:13px 11px;
  }
  .listo-host-parking-finance-breakdown .is-total strong{
    font-size:18px;
  }
  .listo-host-parking-finance-position > div{
    padding:12px 0;
  }
  .listo-host-parking-finance-position strong{
    font-size:16px;
  }
  .listo-host-parking-space-earnings__row{
    padding:12px 0;
  }
  .listo-host-parking-space-earnings__row span{
    font-size:12px;
  }
  .listo-host-parking-space-earnings__row strong{
    font-size:14px;
  }
}


/* ==========================================================================
   NEXT534 — Parking Bookings app-like UI
   ========================================================================== */

.listo-parking-booking-tabs{
  display:flex;
  gap:7px;
  margin:0 0 14px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.listo-parking-booking-tabs::-webkit-scrollbar{display:none}
.listo-parking-booking-tabs a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border-radius:999px;
  background:#f4f6f8;
  color:#5d6d79;
  text-decoration:none;
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
  border:1px solid transparent;
}
.listo-parking-booking-tabs a b{
  min-width:20px;
  height:20px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#fff;
  color:#697984;
  font-size:10px;
}
.listo-parking-booking-tabs a.is-active{
  color:#fff;
  background:#ff6a00;
  box-shadow:0 6px 14px rgba(255,106,0,.18);
}
.listo-parking-booking-tabs a.is-active b{color:#ff6a00}

.listo-parking-booking-filters--app{
  display:flex;
  gap:10px;
  align-items:flex-end;
  margin-bottom:16px;
  padding:12px;
  border:1px solid #e3eaf0;
  border-radius:16px;
  background:#fbfcfd;
}
.listo-parking-booking-search{
  flex:1 1 360px;
  position:relative;
  min-width:220px;
}
.listo-parking-booking-search svg{
  position:absolute;
  left:13px;
  top:50%;
  width:19px;
  height:19px;
  transform:translateY(-50%);
  color:#778692;
}
.listo-parking-booking-search input{
  width:100%;
  height:44px;
  padding:0 14px 0 40px;
  border:1px solid #dfe6eb;
  border-radius:12px;
  background:#fff;
  color:#1f2933;
  font-size:13px;
}
.listo-parking-booking-filter-fields{
  display:flex;
  gap:9px;
  align-items:flex-end;
  flex:0 0 auto;
}
.listo-parking-booking-filter-fields label{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:155px;
}
.listo-parking-booking-filter-fields label span{
  color:#68747f;
  font-size:10px;
  font-weight:800;
}
.listo-parking-booking-filter-fields select{
  height:44px;
  min-width:155px;
  padding:0 32px 0 12px;
  border:1px solid #dfe6eb;
  border-radius:12px;
  background:#fff;
  color:#1f2933;
  font-size:12px;
}
.listo-parking-booking-filters--app .listo-btn{
  height:44px;
  padding:0 17px;
  border-radius:12px;
  white-space:nowrap;
}

.listo-parking-rental-list{
  display:grid;
  gap:10px;
}
.listo-parking-rental-card--app{
  position:relative;
  display:grid;
  grid-template-columns:155px minmax(0,1fr) 86px;
  align-items:center;
  gap:18px;
  min-width:0;
  padding:15px 17px;
  border:1px solid #e3eaf0;
  border-radius:16px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.listo-parking-rental-card--app:hover{
  transform:translateY(-1px);
  border-color:#d7e0e7;
  box-shadow:0 7px 18px rgba(33,49,62,.07);
}
.listo-parking-rental-card__primary{
  position:relative;
  min-width:0;
  padding-top:23px;
}
.listo-parking-rental-card__status{
  position:absolute;
  left:0;
  top:0;
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:3px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:850;
}
.listo-parking-rental-card__status--upcoming{background:#fff1dc;color:#a65d00}
.listo-parking-rental-card__status--active{background:#e9f8ef;color:#108343}
.listo-parking-rental-card__status--completed{background:#eef2f5;color:#596a76}
.listo-parking-rental-card__status--cancelled{background:#fff0f0;color:#c23b3b}
.listo-parking-rental-card__date{
  display:block;
  color:#1d2933;
  font-size:15px;
  line-height:1.15;
  font-weight:800;
}
.listo-parking-rental-card__time{
  display:block;
  margin-top:4px;
  color:#68747f;
  font-size:11px;
  line-height:1.35;
}
.listo-parking-rental-card__main{min-width:0}
.listo-parking-rental-card__main h3{
  margin:0 0 4px;
  color:#1f2933;
  font-size:15px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.listo-parking-rental-card__main p{
  margin:0;
  color:#667680;
  font-size:12px;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.listo-parking-rental-card__main small{
  display:block;
  margin-top:7px;
  color:#8b979f;
  font-size:10px;
  letter-spacing:.01em;
}
.listo-parking-rental-card__amount{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.listo-parking-rental-card__amount strong{
  color:#1b6eb9;
  font-size:15px;
  font-weight:850;
  white-space:nowrap;
}
.listo-parking-rental-card__amount span{
  color:#8d99a1;
  font-size:23px;
  line-height:1;
  font-weight:400;
}
.listo-parking-bookings-empty{
  min-height:230px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:25px 18px;
  border:1px solid #e3eaf0;
  border-radius:18px;
  background:#fff;
}
.listo-parking-bookings-empty__icon{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:11px;
  color:#ff6a00;background:#fff2e8;
}
.listo-parking-bookings-empty__icon svg{width:22px;height:22px}
.listo-parking-bookings-empty strong{font-size:15px;color:#25313a}
.listo-parking-bookings-empty span{max-width:420px;margin-top:6px;color:#68747f;font-size:11px;line-height:1.5}
.listo-parking-bookings-empty a{margin-top:10px;color:#ff6a00;font-size:11px;font-weight:800;text-decoration:none}

@media(max-width:1000px){
  .listo-parking-booking-filters--app{
    flex-wrap:wrap;
  }
  .listo-parking-booking-search{
    flex-basis:100%;
  }
  .listo-parking-booking-filter-fields{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  }
  .listo-parking-booking-filter-fields label,
  .listo-parking-booking-filter-fields select{min-width:0;width:100%}
}

@media(max-width:760px){
  .listo-parking-booking-tabs{margin-bottom:12px}
  .listo-parking-booking-tabs a{padding:8px 10px;font-size:11px}
  .listo-parking-booking-filters--app{
    display:block;
    padding:10px;
    border-radius:14px;
  }
  .listo-parking-booking-search{display:block}
  .listo-parking-booking-search input{height:42px}
  .listo-parking-booking-filter-fields{
    margin-top:9px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .listo-parking-booking-filter-fields label{
    min-width:0;
  }
  .listo-parking-booking-filter-fields label:nth-child(3){
    grid-column:1 / 2;
  }
  .listo-parking-booking-filters--app .listo-btn{
    width:100%;
    grid-column:2;
  }
  .listo-parking-rental-card--app{
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px 12px;
    padding:14px;
    border-radius:16px;
  }
  .listo-parking-rental-card__primary{
    grid-column:1 / -1;
    padding-top:23px;
  }
  .listo-parking-rental-card__main{
    grid-column:1;
  }
  .listo-parking-rental-card__amount{
    grid-column:2;
    grid-row:2;
    align-self:end;
  }
  .listo-parking-rental-card__main h3{font-size:14px}
  .listo-parking-rental-card__main p{font-size:11px}
  .listo-parking-rental-card__main small{margin-top:6px;font-size:9px}
  .listo-parking-rental-card__amount strong{font-size:14px}
}


/* ==========================================================================
   NEXT535 — Parking Calendar & Pricing app-like UI
   ========================================================================== */
.listo-host-parking-calendar-v546 .listo-host-parking-notice{
  margin-bottom:12px;
  border-radius:12px;
}
.listo-parking-calendar-context{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid #e1e9ef;
  border-radius:16px;
  background:#fbfcfd;
}
.listo-parking-calendar-context>div:first-child{
  min-width:0;
}
.listo-parking-calendar-context>div:first-child>span{
  display:block;
  margin-bottom:2px;
  color:#89959e;
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
}
.listo-parking-calendar-context>div:first-child>strong{
  display:block;
  color:#26333c;
  font-size:15px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.listo-parking-calendar-context>div:first-child>small{
  display:block;
  margin-top:3px;
  color:#71808a;
  font-size:10px;
}
.listo-parking-space-picker--app{
  flex:0 0 250px;
}
.listo-parking-space-picker--app label{
  display:flex;
  align-items:center;
  gap:8px;
}
.listo-parking-space-picker--app label>span{
  color:#7b8992;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.listo-parking-space-picker--app select{
  width:100%;
  height:42px;
  padding:0 35px 0 12px;
  border:1px solid #dce5eb;
  border-radius:11px;
  background:#fff;
  color:#26333c;
  font-size:12px;
  font-weight:700;
}

.listo-parking-calendar-main-card{
  padding:18px;
  margin-bottom:12px;
}
.listo-parking-calendar-head--v535{
  margin-bottom:8px;
}
.listo-parking-calendar-head__month-row{
  display:flex;
  align-items:baseline;
  gap:9px;
}
.listo-parking-calendar-head__month-row strong{
  font-size:20px;
  color:#1e2a33;
}
.listo-parking-calendar-head__month-row span{
  color:#84919a;
  font-size:11px;
}
.listo-parking-calendar-legend{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 12px;
}
.listo-parking-calendar-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#71808a;
  font-size:10px;
  font-weight:650;
}
.listo-parking-calendar-legend i{
  width:7px;
  height:7px;
  border-radius:50%;
  display:inline-block;
}
.listo-parking-calendar-legend i.is-available{background:#3ebd78}
.listo-parking-calendar-legend i.is-booked{background:#2196F3}
.listo-parking-calendar-legend i.is-blocked{background:#ff9a3d}
.listo-parking-calendar-legend i.is-closed{background:#aab4bc}

.listo-parking-month-grid--v535{
  gap:2px;
  border-radius:13px;
  overflow:hidden;
}
.listo-parking-month-day--v535{
  min-height:82px;
  padding:9px 8px;
  border-radius:9px;
  background:#fff;
  border:1px solid #edf1f4;
  text-decoration:none;
  color:#293640;
  position:relative;
}
.listo-parking-month-day--v535.is-outside{
  opacity:.4;
}
.listo-parking-month-day--v535 strong{
  display:block;
  font-size:14px;
  font-weight:800;
}
.listo-parking-month-day--v535 .listo-parking-month-day__dot{
  display:block;
  width:8px;
  height:8px;
  margin-top:17px;
  border-radius:50%;
}
.listo-parking-month-day--v535.is-available .listo-parking-month-day__dot{background:#3ebd78}
.listo-parking-month-day--v535.is-booked .listo-parking-month-day__dot{background:#2196F3}
.listo-parking-month-day--v535.is-blocked .listo-parking-month-day__dot{background:#ff9a3d}
.listo-parking-month-day--v535.is-closed .listo-parking-month-day__dot{background:#aab4bc}
.listo-parking-month-day--v535 small{
  display:block;
  margin-top:8px;
  color:#83909a;
  font-size:9px;
  line-height:1.2;
}
.listo-parking-month-day--v535.is-selected{
  border-color:#ff6a00;
  box-shadow:inset 0 0 0 1px #ff6a00;
}
.listo-parking-month-day--v535.is-today strong{
  color:#ff6a00;
}

.listo-parking-mobile-date-strip{
  display:none;
}

.listo-parking-selected-day-v535{
  padding:18px;
  margin-bottom:14px;
}
.listo-parking-selected-day-v535__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.listo-parking-selected-day-v535__head>div:first-child>span{
  display:block;
  color:#89959e;
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
}
.listo-parking-selected-day-v535__head h2{
  margin:3px 0 0;
  color:#1f2b34;
  font-size:18px;
  line-height:1.2;
}
.listo-parking-selected-day-v535__actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.listo-parking-selected-day-v535__actions .listo-btn{
  min-height:36px;
  padding:0 12px;
  border-radius:10px;
  font-size:11px;
}
.listo-parking-selected-day-v535__status{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 9px;
  border-radius:999px;
  text-decoration:none;
  font-size:9px;
  font-weight:850;
}
.listo-parking-selected-day-v535__status.is-available{background:#eaf8f0;color:#118343}
.listo-parking-selected-day-v535__status.is-booked{background:#e9f3fc;color:#1c6fae}
.listo-parking-selected-day-v535__status.is-blocked{background:#fff2e6;color:#a85d00}
.listo-parking-selected-day-v535__status.is-closed{background:#eef1f3;color:#64727b}
.listo-parking-selected-day-v535__summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.listo-parking-selected-day-v535__summary>div{
  padding:11px 12px;
  border-radius:11px;
  background:#f7f9fb;
}
.listo-parking-selected-day-v535__summary span{
  display:block;
  color:#7c8992;
  font-size:10px;
}
.listo-parking-selected-day-v535__summary strong{
  display:block;
  margin-top:3px;
  color:#2b3943;
  font-size:13px;
}
.listo-parking-selected-day-v535__list{
  margin-top:12px;
  border-top:1px solid #edf1f4;
}
.listo-parking-selected-day-v535__list>a,
.listo-parking-selected-day-v535__list>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid #edf1f4;
  text-decoration:none;
}
.listo-parking-selected-day-v535__list strong{
  display:block;
  color:#2a3740;
  font-size:12px;
}
.listo-parking-selected-day-v535__list span{
  display:block;
  margin-top:3px;
  color:#7a8892;
  font-size:10px;
}
.listo-parking-selected-day-v535__list>a>b{
  color:#9aa4ab;
  font-size:22px;
  font-weight:400;
}
.listo-parking-selected-day-v535__list--blocked form button{
  border:0;
  background:none;
  color:#c84b2e;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.listo-parking-selected-day-v535__empty{
  margin-top:12px;
  padding:12px;
  border-radius:11px;
  background:#f8fafb;
  color:#7a8891;
  font-size:11px;
  text-align:center;
}

.listo-parking-manage-v535{
  margin-top:4px;
}
.listo-parking-manage-v535__heading{
  margin:0 0 10px 2px;
}
.listo-parking-manage-v535__heading h2{
  margin:0 0 3px;
  color:#25323b;
  font-size:18px;
}
.listo-parking-manage-v535__heading p{
  margin:0;
  color:#7a8790;
  font-size:11px;
}
.listo-parking-manage-panel-v535{
  margin-bottom:9px;
  border:1px solid #e2e9ee;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}
.listo-parking-manage-panel-v535 summary{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 24px;
  gap:11px;
  align-items:center;
  padding:13px 14px;
  cursor:pointer;
  list-style:none;
}
.listo-parking-manage-panel-v535 summary::-webkit-details-marker{display:none}
.listo-parking-manage-panel-v535 summary>span:nth-child(2){
  min-width:0;
}
.listo-parking-manage-panel-v535 summary strong{
  display:block;
  color:#27343d;
  font-size:13px;
}
.listo-parking-manage-panel-v535 summary small{
  display:block;
  margin-top:3px;
  color:#83909a;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.listo-parking-manage-panel-v535 summary>b{
  color:#9aa4ab;
  font-size:16px;
  font-weight:500;
  text-align:center;
}
.listo-parking-manage-panel-v535[open] summary>b{
  transform:rotate(180deg);
}
.listo-parking-manage-panel-v535__icon{
  width:36px;
  height:36px;
  border-radius:11px;
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:900;
}
.listo-parking-manage-panel-v535__icon--schedule{background:#eaf6ff;color:#2196F3}
.listo-parking-manage-panel-v535__icon--block{background:#fff2e8;color:#ff6a00}
.listo-parking-manage-panel-v535__icon--price{background:#f9efff;color:#9c42d8}
.listo-parking-manage-panel-v535__body{
  padding:0 14px 14px;
  border-top:1px solid #edf1f4;
}
.listo-parking-manage-panel-v535__footer{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}
.listo-parking-manage-panel-v535__footer .listo-btn{
  min-height:38px;
  padding:0 14px;
  border-radius:10px;
  font-size:11px;
}
.listo-parking-weekly-rows-v535{
  display:grid;
  gap:6px;
  padding-top:11px;
}
.listo-parking-weekly-row-v535{
  display:grid;
  grid-template-columns:74px 1fr 18px 1fr;
  align-items:center;
  gap:7px;
  min-height:38px;
}
.listo-parking-weekly-day-v535{
  display:flex;
  align-items:center;
  gap:6px;
}
.listo-parking-weekly-day-v535 input{
  accent-color:#ff6a00;
}
.listo-parking-weekly-day-v535 span{
  color:#33414b;
  font-size:11px;
  font-weight:750;
}
.listo-parking-weekly-row-v535>input[type=time],
.listo-parking-block-form--v535 input[type=time],
.listo-parking-block-form--v535 input[type=date],
.listo-parking-block-form--v535 input[type=text],
.listo-parking-pricing-form--v535 input[type=number]{
  width:100%;
  height:38px;
  border:1px solid #dfe6eb;
  border-radius:9px;
  background:#fff;
  color:#293640;
  font-size:11px;
  padding:0 9px;
}
.listo-parking-weekly-row-v535>span{
  color:#8a969e;
  font-size:10px;
  text-align:center;
}
.listo-parking-block-form--v535,
.listo-parking-pricing-form--v535{
  display:grid;
  gap:10px;
  padding-top:11px;
}
.listo-parking-block-form--v535>label,
.listo-parking-form-inline label,
.listo-parking-pricing-form--v535>label{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.listo-parking-block-form--v535 label>span,
.listo-parking-form-inline label>span,
.listo-parking-pricing-form--v535>label>span{
  color:#71808a;
  font-size:10px;
  font-weight:800;
}
.listo-parking-form-inline{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.listo-parking-pricing-form--v535{
  grid-template-columns:1fr 1fr;
}
.listo-parking-pricing-form--v535>label>div{
  display:flex;
  align-items:center;
}
.listo-parking-pricing-form--v535>label>div>b{
  height:38px;
  display:grid;
  place-items:center;
  min-width:34px;
  border:1px solid #dfe6eb;
  border-right:0;
  border-radius:9px 0 0 9px;
  background:#f7f9fb;
  color:#697781;
  font-size:12px;
}
.listo-parking-pricing-form--v535>label>div input{
  border-radius:0 9px 9px 0;
}
.listo-parking-pricing-form--v535 .listo-parking-manage-panel-v535__footer{
  grid-column:1/-1;
}

@media(max-width:760px){
  .listo-parking-calendar-context{
    display:block;
    padding:12px;
  }
  .listo-parking-space-picker--app{
    margin-top:10px;
    width:100%;
  }
  .listo-parking-space-picker--app label{
    display:block;
  }
  .listo-parking-space-picker--app label>span{
    display:block;
    margin-bottom:5px;
  }
  .listo-parking-space-picker--app select{
    height:43px;
  }
  .listo-parking-calendar-main-card{
    padding:14px;
  }
  .listo-parking-calendar-head__month-row{
    display:block;
  }
  .listo-parking-calendar-head__month-row strong{
    font-size:18px;
  }
  .listo-parking-calendar-head__month-row span{
    display:block;
    margin-top:3px;
  }
  .listo-parking-month-grid--v535{
    display:none;
  }
  .listo-parking-mobile-date-strip{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:4px;
    margin:4px 0 2px;
  }
  .listo-parking-mobile-date-strip a{
    min-width:0;
    padding:8px 3px 7px;
    border:1px solid #e4ebf0;
    border-radius:10px;
    background:#fff;
    color:#64737d;
    text-align:center;
    text-decoration:none;
  }
  .listo-parking-mobile-date-strip a>span{
    display:block;
    font-size:9px;
    font-weight:750;
  }
  .listo-parking-mobile-date-strip a>strong{
    display:block;
    margin-top:3px;
    color:#293640;
    font-size:15px;
    line-height:1;
  }
  .listo-parking-mobile-date-strip a>i{
    display:block;
    width:6px;
    height:6px;
    margin:6px auto 0;
    border-radius:50%;
  }
  .listo-parking-mobile-date-strip a.is-available i{background:#3ebd78}
  .listo-parking-mobile-date-strip a.is-booked i{background:#2196F3}
  .listo-parking-mobile-date-strip a.is-blocked i{background:#ff9a3d}
  .listo-parking-mobile-date-strip a.is-closed i{background:#aab4bc}
  .listo-parking-mobile-date-strip a.is-selected{
    border-color:#ff6a00;
    background:#fff7f0;
    box-shadow:inset 0 0 0 1px #ff6a00;
  }
  .listo-parking-selected-day-v535{
    padding:14px;
  }
  .listo-parking-selected-day-v535__head{
    align-items:flex-start;
  }
  .listo-parking-selected-day-v535__actions{
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
  }
  .listo-parking-selected-day-v535__summary{
    grid-template-columns:1fr 1fr;
  }
  .listo-parking-manage-panel-v535 summary{
    padding:12px;
  }
  .listo-parking-weekly-row-v535{
    grid-template-columns:58px 1fr 14px 1fr;
    gap:5px;
  }
  .listo-parking-weekly-day-v535 span{
    font-size:10px;
  }
  .listo-parking-manage-panel-v535__footer{
    justify-content:stretch;
  }
  .listo-parking-manage-panel-v535__footer .listo-btn{
    width:100%;
    justify-content:center;
  }
  .listo-parking-pricing-form--v535{
    grid-template-columns:1fr;
  }
  .listo-parking-pricing-form--v535 .listo-parking-manage-panel-v535__footer{
    grid-column:auto;
  }
}

@media(min-width:761px){
  .listo-parking-manage-v535{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:10px;
  }
  .listo-parking-manage-v535__heading{
    grid-column:1/-1;
  }
  .listo-parking-manage-panel-v535{
    margin-bottom:0;
  }
}


/* ==========================================================================
   NEXT536 — Parking Calendar empty state refinement
   ========================================================================== */
.listo-parking-calendar-empty-v536{
  width:min(620px,100%);
  margin:4px auto 0;
  padding:44px 28px 40px;
  border:1px solid #e3eaf0;
  border-radius:20px;
  background:#fff;
  text-align:center;
  box-shadow:0 8px 24px rgba(33,49,62,.045);
}
.listo-parking-calendar-empty-v536__icon{
  width:64px;
  height:64px;
  margin:0 auto 16px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#fff2e8;
  color:#ff6a00;
}
.listo-parking-calendar-empty-v536__icon svg{
  width:31px;
  height:31px;
}
.listo-parking-calendar-empty-v536__copy h2{
  margin:0;
  color:#1f2b34;
  font-size:20px;
  line-height:1.2;
  font-weight:800;
}
.listo-parking-calendar-empty-v536__copy p{
  max-width:430px;
  margin:8px auto 18px;
  color:#71808a;
  font-size:13px;
  line-height:1.5;
}
.listo-parking-calendar-empty-v536 .listo-btn{
  min-height:42px;
  padding:0 18px;
  border-radius:11px;
}
@media(max-width:760px){
  .listo-parking-calendar-empty-v536{
    margin-top:2px;
    padding:32px 18px 30px;
    border-radius:17px;
  }
  .listo-parking-calendar-empty-v536__icon{
    width:56px;
    height:56px;
    border-radius:16px;
    margin-bottom:13px;
  }
  .listo-parking-calendar-empty-v536__icon svg{
    width:27px;
    height:27px;
  }
  .listo-parking-calendar-empty-v536__copy h2{
    font-size:18px;
  }
  .listo-parking-calendar-empty-v536__copy p{
    margin-bottom:16px;
    font-size:12px;
  }
  .listo-parking-calendar-empty-v536 .listo-btn{
    width:100%;
    justify-content:center;
  }
}


/* ==========================================================================
   NEXT537 — Parking Listings app-like inventory UI
   ========================================================================== */
.listo-host-parking-listings-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 14px;
}
.listo-host-parking-listings-topline h2{
  margin:0 0 3px;
  color:#26333c;
  font-size:20px;
  line-height:1.2;
}
.listo-host-parking-listings-topline p{
  margin:0;
  color:#788690;
  font-size:12px;
}
.listo-host-parking-listings-topline .listo-btn{
  flex:0 0 auto;
}

.listo-host-parking-listing-status-tabs{
  display:flex;
  gap:7px;
  overflow-x:auto;
  scrollbar-width:none;
  margin-bottom:12px;
}
.listo-host-parking-listing-status-tabs::-webkit-scrollbar{display:none}
.listo-host-parking-listing-status-tabs a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border-radius:999px;
  background:#f4f6f8;
  color:#5d6d79;
  text-decoration:none;
  font-size:11px;
  font-weight:750;
  white-space:nowrap;
  border:1px solid transparent;
}
.listo-host-parking-listing-status-tabs a b{
  min-width:19px;
  height:19px;
  padding:0 6px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#fff;
  color:#6f7d86;
  font-size:9px;
}
.listo-host-parking-listing-status-tabs a.is-active{
  color:#fff;
  background:#ff6a00;
  box-shadow:0 6px 14px rgba(255,106,0,.16);
}
.listo-host-parking-listing-status-tabs a.is-active b{color:#ff6a00}

.listo-host-parking-listings-controls{
  display:flex;
  align-items:flex-end;
  gap:9px;
  padding:10px;
  margin-bottom:14px;
  border:1px solid #e3eaf0;
  border-radius:15px;
  background:#fbfcfd;
}
.listo-host-parking-listings-search{
  position:relative;
  flex:1 1 auto;
  min-width:230px;
}
.listo-host-parking-listings-search svg{
  position:absolute;
  top:50%;
  left:12px;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  color:#7e8b95;
}
.listo-host-parking-listings-search input,
.listo-host-parking-listings-sort select{
  width:100%;
  height:42px;
  border:1px solid #dfe6eb;
  border-radius:11px;
  background:#fff;
  color:#2a3740;
  font-size:12px;
}
.listo-host-parking-listings-search input{
  padding:0 12px 0 38px;
}
.listo-host-parking-listings-sort{
  flex:0 0 180px;
}
.listo-host-parking-listings-sort span{
  display:block;
  margin:0 0 5px;
  color:#71808a;
  font-size:10px;
  font-weight:800;
}
.listo-host-parking-listings-sort select{
  padding:0 30px 0 11px;
}
.listo-host-parking-listings-controls .listo-btn{
  height:42px;
  padding:0 15px;
  border-radius:11px;
}

.listo-host-parking-listings-list{
  display:grid;
  gap:11px;
}
.listo-host-parking-inventory-card{
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 180px;
  gap:18px;
  align-items:center;
  padding:13px;
  border:1px solid #e1e8ed;
  border-radius:18px;
  background:#fff;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.listo-host-parking-inventory-card:hover{
  transform:translateY(-1px);
  border-color:#d5dee5;
  box-shadow:0 8px 20px rgba(33,49,62,.06);
}
.listo-host-parking-inventory-card__media{
  width:220px;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:13px;
  background:#f1f6fa;
}
.listo-host-parking-inventory-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.listo-host-parking-inventory-placeholder,
.listo-host-parking-inventory-placeholder svg{
  width:100%;
  height:100%;
}
.listo-host-parking-inventory-placeholder{
  display:grid;
  place-items:center;
  color:#a3afb8;
  background:#f5f8fa;
}
.listo-host-parking-inventory-placeholder svg{
  width:42px;
  max-width:42px;
  height:42px;
}

.listo-host-parking-inventory-card__body{
  min-width:0;
}
.listo-host-parking-inventory-card__body h2{
  margin:6px 0 3px;
  color:#202c35;
  font-size:18px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.listo-host-parking-inventory-card__location{
  margin:0;
  color:#6f7e88;
  font-size:11px;
}
.listo-host-parking-inventory-card__vehicles{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:9px;
}
.listo-host-parking-inventory-card__vehicles span{
  padding:4px 7px;
  border-radius:999px;
  background:#f4f7f9;
  color:#667681;
  font-size:9px;
  font-weight:750;
}
.listo-host-parking-inventory-card__pricing{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:11px;
}
.listo-host-parking-inventory-card__pricing strong{
  color:#1f2933;
  font-size:14px;
  font-weight:850;
}
.listo-host-parking-inventory-card__pricing small{
  margin-left:3px;
  color:#78858e;
  font-size:9px;
  font-weight:600;
}
.listo-host-parking-inventory-card__activity{
  display:inline-block;
  margin-top:11px;
  color:#78858e;
  font-size:10px;
  font-weight:650;
}
.listo-host-parking-inventory-card__actions{
  display:grid;
  gap:7px;
}
.listo-host-parking-inventory-card__actions .listo-btn{
  width:100%;
  justify-content:center;
  min-height:38px;
  padding:0 12px;
  border-radius:10px;
  font-size:11px;
}
.listo-host-parking-inventory-card__actions>a:not(.listo-btn){
  padding:2px 0;
  color:#ff6a00;
  text-align:center;
  text-decoration:none;
  font-size:10px;
  font-weight:800;
}

.listo-host-parking-listings-empty-v537{
  max-width:620px;
  margin:8px auto 0;
  padding:42px 24px 38px;
  border:1px solid #e3eaf0;
  border-radius:20px;
  background:#fff;
  text-align:center;
  box-shadow:0 8px 24px rgba(33,49,62,.045);
}
.listo-host-parking-listings-empty-v537__icon{
  width:62px;
  height:62px;
  margin:0 auto 15px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#fff2e8;
  color:#ff6a00;
}
.listo-host-parking-listings-empty-v537__icon svg{
  width:30px;
  height:30px;
}
.listo-host-parking-listings-empty-v537 h2{
  margin:0;
  color:#202d36;
  font-size:20px;
}
.listo-host-parking-listings-empty-v537 p{
  max-width:420px;
  margin:8px auto 17px;
  color:#74828b;
  font-size:12px;
  line-height:1.5;
}
.listo-host-parking-listings-empty-v537 .listo-btn{
  min-height:42px;
  padding:0 18px;
  border-radius:11px;
}

@media(max-width:1000px){
  .listo-host-parking-inventory-card{
    grid-template-columns:170px minmax(0,1fr) 150px;
    gap:14px;
  }
  .listo-host-parking-inventory-card__media{width:170px}
}

@media(max-width:760px){
  .listo-host-parking-listings-topline{
    align-items:stretch;
    flex-direction:column;
    gap:10px;
  }
  .listo-host-parking-listings-topline h2{font-size:18px}
  .listo-host-parking-listings-topline .listo-btn{
    width:100%;
    justify-content:center;
  }
  .listo-host-parking-listings-controls{
    display:block;
    padding:10px;
  }
  .listo-host-parking-listings-search{min-width:0}
  .listo-host-parking-listings-sort{
    width:100%;
    margin-top:8px;
  }
  .listo-host-parking-listings-controls .listo-btn{
    width:100%;
    margin-top:8px;
    justify-content:center;
  }

  .listo-host-parking-inventory-card{
    display:block;
    padding:10px;
    border-radius:16px;
  }
  .listo-host-parking-inventory-card__media{
    width:100%;
    aspect-ratio:16/9;
    border-radius:12px;
  }
  .listo-host-parking-inventory-card__body{
    padding:12px 3px 0;
  }
  .listo-host-parking-inventory-card__body h2{
    font-size:17px;
  }
  .listo-host-parking-inventory-card__vehicles{
    margin-top:8px;
  }
  .listo-host-parking-inventory-card__pricing{
    margin-top:10px;
  }
  .listo-host-parking-inventory-card__activity{
    margin-top:9px;
  }
  .listo-host-parking-inventory-card__actions{
    margin-top:12px;
    padding-top:11px;
    border-top:1px solid #edf1f4;
  }
  .listo-host-parking-inventory-card__actions .listo-btn{
    min-height:42px;
  }

  .listo-host-parking-listings-empty-v537{
    margin-top:4px;
    padding:32px 18px 30px;
    border-radius:17px;
  }
  .listo-host-parking-listings-empty-v537__icon{
    width:56px;
    height:56px;
    border-radius:16px;
  }
  .listo-host-parking-listings-empty-v537 h2{font-size:18px}
  .listo-host-parking-listings-empty-v537 p{font-size:11px;margin-bottom:16px}
  .listo-host-parking-listings-empty-v537 .listo-btn{
    width:100%;
    justify-content:center;
  }
}


/* ==========================================================================
   NEXT538 — Parking Payouts app-like financial UI
   ========================================================================== */
.listo-host-parking-payout-period{
  display:flex;
  justify-content:flex-end;
  margin:0 0 12px;
}
.listo-host-parking-payout-period form{
  display:flex;
  align-items:center;
  gap:8px;
}
.listo-host-parking-payout-period label{
  color:#7a8992;
  font-size:10px;
  font-weight:800;
}
.listo-host-parking-payout-period select{
  min-width:160px;
  height:40px;
  padding:0 30px 0 11px;
  border:1px solid #dfe6eb;
  border-radius:10px;
  background:#fff;
  color:#293640;
  font-size:11px;
  font-weight:700;
}

.listo-host-parking-payout-hero-v538{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  border:1px solid #dbe8f4;
  border-radius:18px;
  overflow:hidden;
  background:#f7fbff;
  margin-bottom:14px;
}
.listo-host-parking-payout-hero-v538__main{
  padding:24px 25px;
}
.listo-host-parking-payout-hero-v538__main>span{
  display:block;
  color:#4f6372;
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
}
.listo-host-parking-payout-hero-v538__main>strong{
  display:block;
  margin-top:4px;
  color:#1768b4;
  font-size:38px;
  line-height:1.05;
  font-weight:850;
}
.listo-host-parking-payout-hero-v538__main>small{
  display:block;
  margin-top:6px;
  color:#71808a;
  font-size:11px;
}
.listo-host-parking-payout-hero-v538__stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#fff;
  border-left:1px solid #dbe8f4;
}
.listo-host-parking-payout-hero-v538__stats>div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:20px 18px;
  border-left:1px solid #edf1f4;
}
.listo-host-parking-payout-hero-v538__stats>div:first-child{border-left:0}
.listo-host-parking-payout-hero-v538__stats span{
  color:#71808a;
  font-size:10px;
}
.listo-host-parking-payout-hero-v538__stats strong{
  display:block;
  margin-top:5px;
  color:#27343e;
  font-size:21px;
  line-height:1.1;
  font-weight:800;
}

.listo-host-parking-payout-breakdown-v538,
.listo-host-parking-payout-transactions-v538{
  padding:18px;
  border:1px solid #e2e9ee;
  border-radius:17px;
  background:#fff;
  margin-bottom:14px;
}
.listo-host-parking-payout-section-head-v538{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:11px;
}
.listo-host-parking-payout-section-head-v538 h2{
  margin:0 0 3px;
  color:#26333c;
  font-size:18px;
  line-height:1.2;
}
.listo-host-parking-payout-section-head-v538 p{
  margin:0;
  color:#778690;
  font-size:11px;
}
.listo-host-parking-payout-breakdown-list-v538{
  display:grid;
}
.listo-host-parking-payout-breakdown-list-v538>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:11px 0;
  border-bottom:1px solid #edf1f4;
}
.listo-host-parking-payout-breakdown-list-v538>div:last-child{border-bottom:0}
.listo-host-parking-payout-breakdown-list-v538 span{
  color:#68747f;
  font-size:12px;
}
.listo-host-parking-payout-breakdown-list-v538 strong{
  color:#28353f;
  font-size:13px;
  font-weight:800;
}
.listo-host-parking-payout-breakdown-list-v538 .is-total{
  margin-top:5px;
  padding:13px 12px;
  border:0;
  border-radius:12px;
  background:#f7fbff;
}
.listo-host-parking-payout-breakdown-list-v538 .is-total span{
  color:#24313a;
  font-weight:800;
}
.listo-host-parking-payout-breakdown-list-v538 .is-total strong{
  color:#1768b4;
  font-size:19px;
}
.listo-host-parking-payout-info-v538{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid #edf1f4;
}
.listo-host-parking-payout-info-v538>span{
  width:16px;
  height:16px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border:1px solid #cbd9e3;
  border-radius:50%;
  color:#5f7381;
  font-size:9px;
  font-weight:850;
}
.listo-host-parking-payout-info-v538 p{
  margin:0;
  color:#82909a;
  font-size:10px;
  line-height:1.45;
}

.listo-host-parking-payout-filters-v538{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin-bottom:12px;
  padding:9px;
  border:1px solid #e3eaf0;
  border-radius:14px;
  background:#fbfcfd;
}
.listo-host-parking-payout-search-v538{
  position:relative;
  flex:1 1 auto;
  min-width:200px;
}
.listo-host-parking-payout-search-v538 svg{
  position:absolute;
  left:11px;
  top:50%;
  width:17px;
  height:17px;
  transform:translateY(-50%);
  color:#82909a;
}
.listo-host-parking-payout-search-v538 input{
  width:100%;
  height:40px;
  padding:0 11px 0 35px;
  border:1px solid #dfe6eb;
  border-radius:10px;
  background:#fff;
  color:#293640;
  font-size:11px;
}
.listo-host-parking-payout-space-v538{
  flex:0 0 210px;
}
.listo-host-parking-payout-space-v538 span{
  display:block;
  margin-bottom:5px;
  color:#71808a;
  font-size:9px;
  font-weight:800;
}
.listo-host-parking-payout-space-v538 select{
  width:100%;
  height:40px;
  padding:0 30px 0 10px;
  border:1px solid #dfe6eb;
  border-radius:10px;
  background:#fff;
  color:#293640;
  font-size:11px;
}
.listo-host-parking-payout-filters-v538 .listo-btn{
  height:40px;
  padding:0 14px;
  border-radius:10px;
  font-size:10px;
}

.listo-host-parking-payout-records-v538{
  display:grid;
  gap:8px;
}
.listo-host-parking-payout-record-v538{
  display:grid;
  grid-template-columns:68px minmax(0,1fr) 150px;
  align-items:center;
  gap:14px;
  padding:12px 13px;
  border:1px solid #e4eaee;
  border-radius:14px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.listo-host-parking-payout-record-v538:hover{
  transform:translateY(-1px);
  border-color:#d6e0e7;
  box-shadow:0 6px 16px rgba(33,49,62,.055);
}
.listo-host-parking-payout-record-v538__date strong{
  display:block;
  color:#26333c;
  font-size:14px;
  font-weight:850;
}
.listo-host-parking-payout-record-v538__date span{
  display:block;
  margin-top:2px;
  color:#89959e;
  font-size:9px;
}
.listo-host-parking-payout-record-v538__main{
  min-width:0;
}
.listo-host-parking-payout-record-v538__main>strong{
  display:block;
  color:#26333c;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.listo-host-parking-payout-record-v538__main>span{
  display:block;
  margin-top:3px;
  color:#687780;
  font-size:10px;
}
.listo-host-parking-payout-record-v538__main>small{
  display:block;
  margin-top:5px;
  color:#8a969f;
  font-size:9px;
}
.listo-host-parking-payout-record-v538__amount{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.listo-host-parking-payout-record-v538__amount>span{
  color:#8a969f;
  font-size:9px;
}
.listo-host-parking-payout-record-v538__amount>strong{
  color:#1768b4;
  font-size:14px;
  font-weight:850;
  white-space:nowrap;
}
.listo-host-parking-payout-record-v538__amount>b{
  color:#9aa4ab;
  font-size:21px;
  line-height:1;
  font-weight:400;
}

.listo-host-parking-payout-empty-v538{
  min-height:190px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:25px 18px;
  border:1px solid #e3eaf0;
  border-radius:15px;
  background:#fbfcfd;
}
.listo-host-parking-payout-empty-v538__icon{
  width:48px;
  height:48px;
  margin-bottom:10px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#f0f7fd;
  color:#2196F3;
}
.listo-host-parking-payout-empty-v538__icon svg{
  width:24px;
  height:24px;
}
.listo-host-parking-payout-empty-v538 strong{
  color:#28353f;
  font-size:13px;
}
.listo-host-parking-payout-empty-v538 span{
  max-width:360px;
  margin-top:5px;
  color:#7b8992;
  font-size:10px;
  line-height:1.45;
}
.listo-host-parking-payout-empty-v538 a{
  margin-top:9px;
  color:#ff6a00;
  font-size:10px;
  font-weight:800;
  text-decoration:none;
}
.listo-host-parking-shared-payout-link-v538{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:12px 14px;
  border:1px solid #e4eaee;
  border-radius:13px;
  background:#fff;
}
.listo-host-parking-shared-payout-link-v538 strong{
  display:block;
  color:#303d46;
  font-size:11px;
}
.listo-host-parking-shared-payout-link-v538 span{
  display:block;
  margin-top:2px;
  color:#83909a;
  font-size:9px;
}
.listo-host-parking-shared-payout-link-v538 a{
  color:#ff6a00;
  font-size:10px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}

@media(max-width:900px){
  .listo-host-parking-payout-hero-v538{
    grid-template-columns:1fr;
  }
  .listo-host-parking-payout-hero-v538__stats{
    border-left:0;
    border-top:1px solid #dbe8f4;
  }
  .listo-host-parking-payout-filters-v538{
    flex-wrap:wrap;
  }
  .listo-host-parking-payout-search-v538{
    flex-basis:100%;
  }
}
@media(max-width:760px){
  .listo-host-parking-payout-period{
    justify-content:stretch;
  }
  .listo-host-parking-payout-period form{
    width:100%;
    justify-content:space-between;
  }
  .listo-host-parking-payout-period select{
    flex:1;
    min-width:0;
  }
  .listo-host-parking-payout-hero-v538__main{
    padding:20px 18px;
  }
  .listo-host-parking-payout-hero-v538__main>strong{
    font-size:34px;
  }
  .listo-host-parking-payout-hero-v538__stats{
    grid-template-columns:1fr 1fr;
  }
  .listo-host-parking-payout-hero-v538__stats>div{
    padding:14px 15px;
  }
  .listo-host-parking-payout-breakdown-v538,
  .listo-host-parking-payout-transactions-v538{
    padding:15px;
    border-radius:15px;
  }
  .listo-host-parking-payout-filters-v538{
    display:block;
    padding:9px;
  }
  .listo-host-parking-payout-space-v538{
    width:100%;
    margin-top:8px;
  }
  .listo-host-parking-payout-filters-v538 .listo-btn{
    width:100%;
    margin-top:8px;
    justify-content:center;
  }
  .listo-host-parking-payout-record-v538{
    grid-template-columns:52px minmax(0,1fr) auto;
    gap:10px;
    padding:11px;
    border-radius:13px;
  }
  .listo-host-parking-payout-record-v538__date strong{
    font-size:13px;
  }
  .listo-host-parking-payout-record-v538__main>strong{
    font-size:12px;
  }
  .listo-host-parking-payout-record-v538__main>span{
    font-size:9px;
  }
  .listo-host-parking-payout-record-v538__amount{
    gap:5px;
  }
  .listo-host-parking-payout-record-v538__amount>span{
    display:none;
  }
  .listo-host-parking-payout-record-v538__amount>strong{
    font-size:12px;
  }
  .listo-host-parking-payout-record-v538__amount>b{
    font-size:19px;
  }
  .listo-host-parking-shared-payout-link-v538{
    padding:11px 12px;
  }
}


/* ==========================================================================
   NEXT539 — List Parking onboarding / stepper experience
   ========================================================================== */

/* Logged-out onboarding */
.listo-parking-public-onboarding{
  max-width:1040px;
  margin:28px auto 54px;
  padding:0 20px;
}
.listo-parking-public-onboarding__hero{
  max-width:720px;
  margin:0 auto 20px;
  padding:36px 28px 32px;
  border:1px solid #e3eaf0;
  border-radius:22px;
  background:#fff;
  text-align:center;
  box-shadow:0 10px 28px rgba(33,49,62,.045);
}
.listo-parking-public-onboarding__hero .listo-parking-eyebrow{
  display:block;
  color:#ff6a00;
  font-size:10px;
  font-weight:850;
  letter-spacing:.1em;
}
.listo-parking-public-onboarding__hero h1{
  margin:8px 0 7px;
  color:#202d36;
  font-size:32px;
  line-height:1.12;
}
.listo-parking-public-onboarding__hero p{
  max-width:560px;
  margin:0 auto 19px;
  color:#687780;
  font-size:14px;
  line-height:1.5;
}
.listo-parking-public-onboarding__hero .listo-btn{
  min-height:44px;
  padding:0 18px;
  border-radius:12px;
}
.listo-parking-public-onboarding__hero small{
  display:block;
  margin-top:9px;
  color:#8b979f;
  font-size:10px;
}
.listo-parking-public-onboarding__steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.listo-parking-public-onboarding__steps>div{
  padding:16px 15px;
  border:1px solid #e4eaef;
  border-radius:15px;
  background:#fbfcfd;
}
.listo-parking-public-onboarding__steps>div>span{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  margin-bottom:9px;
  border-radius:10px;
  background:#fff2e8;
  color:#ff6a00;
  font-size:11px;
  font-weight:850;
}
.listo-parking-public-onboarding__steps strong{
  display:block;
  color:#28353e;
  font-size:13px;
}
.listo-parking-public-onboarding__steps small{
  display:block;
  margin-top:4px;
  color:#7c8992;
  font-size:10px;
  line-height:1.45;
}

/* Logged-in form experience */
.listo-parking-form-page-v539{
  --parking-orange:#ff6a00;
}
.listo-parking-form-page-v539 .listo-parking-owner-head{
  margin-bottom:15px;
}
.listo-parking-form-page-v539 .listo-parking-owner-head__title p{
  max-width:650px;
}

.listo-parking-stepper-v539{
  margin-bottom:12px;
}
.listo-parking-stepper-v539__desktop{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
}
.listo-parking-stepper-item-v539{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 8px;
  border:1px solid transparent;
  border-radius:11px;
  background:#f5f7f9;
  color:#71808a;
  text-align:left;
  cursor:pointer;
}
.listo-parking-stepper-item-v539 span{
  width:22px;
  height:22px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#fff;
  color:#73818b;
  font-size:9px;
  font-weight:850;
}
.listo-parking-stepper-item-v539 strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
}
.listo-parking-stepper-item-v539.is-current{
  color:#ff6a00;
  background:#fff7f0;
  border-color:#ffd7bd;
}
.listo-parking-stepper-item-v539.is-current span{
  background:#ff6a00;
  color:#fff;
}
.listo-parking-stepper-item-v539.is-complete{
  color:#368766;
}
.listo-parking-stepper-item-v539.is-complete span{
  background:#eaf8f0;
  color:#168047;
}
.listo-parking-stepper-item-v539:disabled{
  cursor:default;
  opacity:.7;
}
.listo-parking-stepper-v539__mobile{
  display:none;
}

.listo-parking-form-layout-v539{
  display:grid;
  grid-template-columns:minmax(0,1fr) 270px;
  gap:14px;
  align-items:start;
}
.listo-parking-form-layout-v539 .listo-parking-form{
  min-width:0;
}
.listo-parking-form-page-v539 .listo-parking-form-card{
  display:none;
  margin-bottom:12px;
  border-radius:18px;
  box-shadow:0 5px 15px rgba(33,49,62,.035);
}
.listo-parking-form-page-v539 .listo-parking-form-card.is-current{
  display:block;
}
.listo-parking-form-page-v539 .listo-parking-form-card__head{
  padding-bottom:13px;
  margin-bottom:15px;
}
.listo-parking-form-page-v539 .listo-parking-form-card__head>span{
  background:#fff2e8;
  color:#ff6a00;
}
.listo-parking-step-actions-v539{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:19px;
  padding-top:13px;
  border-top:1px solid #edf1f4;
}
.listo-parking-step-actions-v539 .listo-btn{
  min-height:42px;
  padding:0 15px;
  border-radius:11px;
  font-size:11px;
}
.listo-parking-step-actions-v539 [data-back]{
  color:#6f7d87;
}
.listo-parking-step-actions-v539 [data-next]{
  margin-left:auto;
}
.listo-parking-step-error-v539{
  margin-top:9px;
  padding:8px 10px;
  border-radius:10px;
  background:#fff3f3;
  color:#bc3f3f;
  font-size:10px;
}

.listo-parking-form-summary-v539{
  position:sticky;
  top:90px;
  padding:15px;
  border:1px solid #e3eaf0;
  border-radius:17px;
  background:#fbfcfd;
}
.listo-parking-form-summary-v539__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.listo-parking-form-summary-v539__head span{
  color:#8a969f;
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
}
.listo-parking-form-summary-v539__head b{
  color:#ff6a00;
  font-size:9px;
}
.listo-parking-form-summary-v539__photo{
  height:120px;
  margin:12px 0 11px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#f0f5f8;
  color:#97a3ab;
  font-size:10px;
}
.listo-parking-form-summary-v539>strong{
  display:block;
  color:#24313a;
  font-size:15px;
}
.listo-parking-form-summary-v539>span{
  display:block;
  margin-top:4px;
  color:#71808a;
  font-size:10px;
}
.listo-parking-form-summary-v539__chips{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:9px;
}
.listo-parking-form-summary-v539__chips span{
  padding:4px 7px;
  border-radius:999px;
  background:#fff;
  color:#667680;
  font-size:8px;
  font-weight:750;
}
.listo-parking-form-summary-v539__price{
  margin-top:12px;
  color:#1768b4;
  font-size:12px;
  font-weight:850;
}
.listo-parking-form-summary-v539>small{
  display:block;
  margin-top:13px;
  padding-top:11px;
  border-top:1px solid #e7edf1;
  color:#8a969f;
  font-size:9px;
  line-height:1.45;
}
.listo-parking-submitbar-v539{
  display:none;
  margin-top:12px;
}
.listo-parking-submitbar-v539.is-visible{
  display:flex;
}
.listo-parking-form-summary-v539 + *{
  margin-top:0;
}
.listo-parking-submitbar-v539 .listo-btn{
  min-height:42px;
  border-radius:11px;
}

@media(max-width:980px){
  .listo-parking-form-layout-v539{
    grid-template-columns:1fr;
  }
  .listo-parking-form-summary-v539{
    display:none;
  }
}
@media(max-width:760px){
  .listo-parking-public-onboarding{
    margin:18px auto 35px;
    padding:0 14px;
  }
  .listo-parking-public-onboarding__hero{
    padding:30px 18px 26px;
    border-radius:18px;
  }
  .listo-parking-public-onboarding__hero h1{
    font-size:26px;
  }
  .listo-parking-public-onboarding__hero p{
    font-size:12px;
  }
  .listo-parking-public-onboarding__hero .listo-btn{
    width:100%;
    justify-content:center;
  }
  .listo-parking-public-onboarding__steps{
    grid-template-columns:1fr;
  }
  .listo-parking-public-onboarding__steps>div{
    padding:13px 14px;
  }
  .listo-parking-public-onboarding__steps>div>span{
    float:left;
    margin:0 9px 0 0;
  }

  .listo-parking-stepper-v539__desktop{
    display:none;
  }
  .listo-parking-stepper-v539__mobile{
    display:block;
    padding:11px 12px;
    border:1px solid #e3eaf0;
    border-radius:13px;
    background:#fbfcfd;
  }
  .listo-parking-stepper-v539__mobile>div:first-child{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .listo-parking-stepper-v539__mobile strong{
    color:#28353d;
    font-size:10px;
  }
  .listo-parking-stepper-v539__mobile span{
    color:#ff6a00;
    font-size:10px;
    font-weight:800;
  }
  .listo-parking-stepper-v539__progress{
    height:5px;
    margin-top:9px;
    overflow:hidden;
    border-radius:999px;
    background:#e8edf1;
  }
  .listo-parking-stepper-v539__progress i{
    display:block;
    width:14%;
    height:100%;
    border-radius:999px;
    background:#ff6a00;
    transition:width .2s ease;
  }
  .listo-parking-form-page-v539 .listo-parking-form-card{
    border-radius:16px;
  }
  .listo-parking-form-page-v539 .listo-parking-form-card__head{
    margin-bottom:13px;
  }
  .listo-parking-step-actions-v539{
    position:sticky;
    bottom:0;
    z-index:4;
    margin-left:-16px;
    margin-right:-16px;
    margin-bottom:-16px;
    padding:11px 16px;
    background:rgba(255,255,255,.96);
    border-top:1px solid #e9eef2;
    box-shadow:0 -6px 18px rgba(33,49,62,.05);
    backdrop-filter:blur(8px);
  }
  .listo-parking-step-actions-v539 .listo-btn{
    flex:1;
    justify-content:center;
  }
  .listo-parking-submitbar-v539.is-visible{
    position:sticky;
    bottom:0;
    z-index:5;
    margin:12px -1px 0;
    padding:11px;
    border:1px solid #e2e9ee;
    border-radius:14px;
    background:#fff;
    box-shadow:0 -6px 18px rgba(33,49,62,.05);
  }
  .listo-parking-submitbar-v539>div{
    display:none;
  }
  .listo-parking-submitbar-v539 .listo-btn{
    width:100%;
    justify-content:center;
  }
}


.listo-parking-review-v539{
  margin-top:14px;
  padding:15px;
  border:1px solid #e0e9ef;
  border-radius:15px;
  background:#f8fbfd;
}
.listo-parking-review-v539__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.listo-parking-review-v539__head span{
  display:block;
  color:#8a969f;
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
}
.listo-parking-review-v539__head h3{
  margin:3px 0 0;
  color:#26333c;
  font-size:15px;
}
.listo-parking-review-v539__head b{
  padding:5px 8px;
  border-radius:999px;
  background:#fff2e8;
  color:#a85d00;
  font-size:8px;
  white-space:nowrap;
}
.listo-parking-review-v539__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px;
}
.listo-parking-review-v539__grid>div{
  padding:10px 11px;
  border:1px solid #e4ebef;
  border-radius:11px;
  background:#fff;
}
.listo-parking-review-v539__grid span{
  display:block;
  color:#83909a;
  font-size:9px;
}
.listo-parking-review-v539__grid strong{
  display:block;
  margin-top:3px;
  color:#293640;
  font-size:11px;
  line-height:1.35;
}
.listo-parking-review-v539>p{
  margin:10px 0 0;
  color:#7e8b94;
  font-size:10px;
  line-height:1.45;
}
@media(max-width:760px){
  .listo-parking-review-v539{
    padding:13px;
  }
  .listo-parking-review-v539__grid{
    grid-template-columns:1fr;
  }
  .listo-parking-review-v539__head{
    display:block;
  }
  .listo-parking-review-v539__head b{
    display:inline-flex;
    margin-top:7px;
  }
}

/* NEXT540 — Parking workflow connection layer */
.listo-host-parking-workspace-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:4px 0;}
.listo-host-parking-workspace-links a{display:inline-flex;align-items:center;min-height:34px;padding:7px 12px;border:1px solid #e4eaf0;border-radius:999px;background:#fff;color:#53606b;text-decoration:none;font-size:12px;font-weight:700;transition:border-color .15s ease,background .15s ease,color .15s ease;}
.listo-host-parking-workspace-links a:hover{border-color:#ffc7a5;color:#d95300;background:#fffaf7;}
.listo-host-parking-workspace-links a.is-active{border-color:#FF6A00;background:#FF6A00;color:#fff;}
.listo-host-parking-space-earnings__row{display:flex!important;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;color:inherit;}
.listo-host-parking-space-earnings__row strong span{display:inline-block;margin-left:5px;}
.listo-host-parking-listings-toolbar-links{margin:-8px 0 8px;}
.listo-host-parking-listings-toolbar-links a{font-size:13px;font-weight:700;color:#68747f;text-decoration:none;}
.listo-host-parking-listings-toolbar-links a:hover{color:#FF6A00;}
.listo-host-parking-inventory-card.is-highlighted{border-color:#FFB27D;box-shadow:0 0 0 2px rgba(255,106,0,.10),0 12px 30px rgba(29,44,55,.07);}
.listo-host-parking-calendar-context{position:relative;}
.listo-host-parking-payout-selection{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px;padding:12px 14px;border:1px solid #ffd8c2;border-radius:14px;background:#fff8f3;}
.listo-host-parking-payout-selection span{display:block;color:#d95300;font-size:10px;font-weight:800;letter-spacing:.08em;}
.listo-host-parking-payout-selection strong{display:block;margin-top:3px;font-size:14px;}
.listo-host-parking-payout-selection a{font-size:12px;font-weight:800;color:#d95300;text-decoration:none;}
.listo-parking-rental-detail-v540{padding-top:10px;}
.listo-parking-rental-detail__title-copy h1{margin:0;font-size:26px;line-height:1.15;}
.listo-parking-rental-detail__title-copy span{display:block;margin-top:4px;color:#68747f;font-size:13px;}
.listo-parking-rental-detail__topbar{display:flex;justify-content:space-between;gap:16px;margin:0 0 18px;}
.listo-parking-rental-detail__topbar a{font-size:13px;font-weight:700;color:#68747f;text-decoration:none;}
.listo-parking-rental-detail__topbar a:hover{color:#FF6A00;}
.listo-parking-rental-detail__hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:22px;border:1px solid #e5ebf0;border-radius:20px;background:#fff;margin-bottom:16px;}
.listo-parking-rental-detail__eyebrow{display:block;color:#FF6A00;font-size:10px;font-weight:800;letter-spacing:.08em;}
.listo-parking-rental-detail__hero h2{margin:4px 0 3px;font-size:22px;}
.listo-parking-rental-detail__hero p{margin:0;color:#68747f;font-size:13px;}
.listo-parking-rental-detail__status{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap;}
.listo-parking-rental-detail__status--upcoming{background:#fff4d9;color:#9a6a00;}
.listo-parking-rental-detail__status--active{background:#e8f7ef;color:#167648;}
.listo-parking-rental-detail__status--completed{background:#eef2f4;color:#52606b;}
.listo-parking-rental-detail__status--cancelled{background:#fdecea;color:#b42318;}
.listo-parking-rental-detail__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.listo-parking-rental-detail__card{padding:20px;border:1px solid #e5ebf0;border-radius:18px;background:#fff;}
.listo-parking-rental-detail__card h3{margin:0 0 14px;font-size:16px;}
.listo-parking-rental-detail__card>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid #eef1f3;}
.listo-parking-rental-detail__card>div:first-of-type{border-top:0;padding-top:0;}
.listo-parking-rental-detail__card span{color:#68747f;font-size:12px;}
.listo-parking-rental-detail__card strong{font-size:13px;text-align:right;}
.listo-parking-rental-detail__card .is-total{margin-top:3px;padding-top:13px;font-size:14px;}
.listo-parking-rental-detail__links{margin-top:16px;padding:20px;border:1px solid #e5ebf0;border-radius:18px;background:#fff;}
.listo-parking-rental-detail__links h3{margin:0 0 12px;font-size:16px;}
.listo-parking-rental-detail__links>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.listo-parking-rental-detail__links a{display:flex;flex-direction:column;gap:5px;padding:13px 14px;border:1px solid #edf0f2;border-radius:14px;text-decoration:none;color:inherit;transition:border-color .15s ease,transform .15s ease;}
.listo-parking-rental-detail__links a:hover{border-color:#ffc7a5;transform:translateY(-1px);}
.listo-parking-rental-detail__links .listo-parking-detail-cancel-approval{display:flex;flex-direction:column;gap:5px;padding:13px 14px;border:1px solid #f2b8b5;border-radius:14px;text-decoration:none;color:var(--error);background:#fff;cursor:pointer;text-align:left;font:inherit;transition:border-color .15s ease,transform .15s ease;}
.listo-parking-rental-detail__links .listo-parking-detail-cancel-approval:hover{border-color:var(--error);transform:translateY(-1px);}
.listo-parking-rental-detail__links .listo-parking-detail-cancel-approval span{color:#68747f;}
.listo-parking-rental-detail__links strong{font-size:13px;}
.listo-parking-rental-detail__links span{font-size:12px;color:#68747f;line-height:1.4;}
.listo-parking-rental-detail__listing-link{margin-top:12px;text-align:right;}
.listo-parking-rental-detail__listing-link a{font-size:13px;font-weight:800;color:#d95300;text-decoration:none;}
.listo-parking-rental-detail__actions{display:flex;align-items:stretch;justify-content:flex-start;gap:10px;text-align:left;}
.listo-parking-rental-detail__actions a{display:flex;flex-direction:column;gap:4px;min-width:210px;padding:13px 14px;border:1px solid #edf0f2;border-radius:14px;background:#fff;color:inherit;text-decoration:none;}
.listo-parking-rental-detail__actions a:hover{border-color:#ffc7a5;}
.listo-parking-rental-detail__actions a strong{font-size:13px;color:#d95300;}
.listo-parking-rental-detail__actions a span{font-size:12px;color:#68747f;line-height:1.4;font-weight:500;}
@media (max-width: 900px){
 .listo-host-parking-workspace-links{overflow:auto;flex-wrap:nowrap;padding-bottom:3px;margin-bottom:16px;scrollbar-width:none;}
 .listo-host-parking-workspace-links::-webkit-scrollbar{display:none;}
 .listo-host-parking-workspace-links a{flex:0 0 auto;}
 .listo-parking-rental-detail__hero{align-items:flex-start;}
 .listo-parking-rental-detail__links>div{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 640px){
 .listo-host-parking-workspace-links{margin-right:-4px;margin-left:-4px;padding-left:4px;}
 .listo-host-parking-payout-selection{align-items:flex-start;flex-direction:column;}
 .listo-parking-rental-detail__topbar{flex-direction:column;gap:7px;}
 .listo-parking-rental-detail__hero{flex-direction:column;padding:18px;}
 .listo-parking-rental-detail__status{align-self:flex-start;}
 .listo-parking-rental-detail__grid{grid-template-columns:1fr;}
 .listo-parking-rental-detail__card{padding:17px;}
 .listo-parking-rental-detail__links>div{grid-template-columns:1fr;}
 .listo-parking-rental-detail__listing-link{text-align:left;}
.listo-parking-rental-detail__actions{flex-direction:column;} .listo-parking-rental-detail__actions a{min-width:0;width:100%;box-sizing:border-box;}
}

/* NEXT540b — connect the entire Parking Host workspace with one persistent navigation layer. */
.listo-parking-owner-workspace-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:6px 0;color:#66727c;font-size:12px;font-weight:700;}
.listo-parking-owner-workspace-links span{margin-right:2px;}
.listo-parking-owner-workspace-links a{display:inline-flex;align-items:center;min-height:32px;padding:6px 11px;border:1px solid #e4eaf0;border-radius:999px;background:#fff;color:#53606b;text-decoration:none;font-weight:700;}
.listo-parking-owner-workspace-links a:hover{border-color:#ffc7a5;color:#d95300;background:#fffaf7;}
@media (max-width:767px){.listo-parking-owner-workspace-links{overflow:auto;flex-wrap:nowrap;white-space:nowrap;margin:0 -4px 16px;padding:6px 4px;scrollbar-width:none}.listo-parking-owner-workspace-links::-webkit-scrollbar{display:none}.listo-parking-owner-workspace-links a{flex:0 0 auto}.listo-parking-owner-workspace-links span{flex:0 0 auto}}


/* ========================================================================
   NEXT542 — Parking page canvas + title geometry parity
   Parking Host pages must occupy the same 1200px content canvas as the
   existing Staycation Host pages. Public Parking and the Parking onboarding
   form use that same canvas as well so the left/right content edges do not
   jump when moving between Parking workflows.
   ======================================================================== */
.listo-parking-container,
.listo-marketplace-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* The onboarding form is a full Parking page rather than a narrower legacy
   form canvas. Keep its title/content edges on the same Host grid. */
.listo-parking-form-page-v539 {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding-top: 28px !important;
}
.listo-parking-form-page-v539 > .listo-parking-container {
  width: 100% !important;
  max-width: 1200px !important;
}

/* Parking Host title rows inherit the same fixed title geometry as
   Staycation Host pages. */
body[data-listo-mode="host"] .listo-main .listo-page-title-row--parking {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}
body[data-listo-mode="host"] .listo-main .listo-page-title-row--parking > h1 {
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

/* The Parking listing form uses a custom onboarding header, but its title
   typography should still land on the same Host title scale. */
body[data-listo-mode="host"] .listo-main .listo-parking-form-page-v539 .listo-parking-owner-head__title h1 {
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 8px !important;
}

@media (max-width: 700px) {
  .listo-parking-form-page-v539 {
    padding-top: 24px !important;
  }

  body[data-listo-mode="host"] .listo-main .listo-page-title-row--parking {
    margin-bottom: 20px !important;
  }

  body[data-listo-mode="host"] .listo-main .listo-parking-form-page-v539 .listo-parking-owner-head__title h1 {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }
}


/* NEXT543 — Parking title alignment. Bookings and Payouts now use the same
   direct icon + H1 title-row structure as Dashboard, Listings, and Calendar. */

/* ========================================================================
   NEXT544 — Parking Calendar page-width parity
   The Parking Calendar & Pricing workspace is rendered through a dedicated
   partial, so enforce the same Host canvas directly on the partial root.
   This keeps its title row, workspace navigation, calendar cards, and
   management sections on the exact same 1200px page grid as the other
   Parking Host pages.
   ======================================================================== */
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-page-title-row,
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-workspace-links,
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-parking-calendar-context,
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-parking-calendar-main-card,
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-parking-selected-day-v535,
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-parking-manage-v535 {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 {
    max-width: 100% !important;
  }
}

/* ========================================================================
   NEXT545 — Parking Calendar & Pricing exact Host canvas parity
   The calendar workspace is a dedicated partial, so its root and every
   page-level child are explicitly normalized to the same Host content grid
   used by Parking Dashboard, Listings, Bookings, and Payouts.
   ======================================================================== */
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 {
  display: block !important;
  width: 100% !important;
  max-width: 1200px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > * {
  max-width: none !important;
  box-sizing: border-box !important;
}

body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-page-title-row,
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-workspace-links,
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-notice,
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-parking-calendar-context,
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-parking-calendar-main-card,
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-parking-selected-day-v535,
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-parking-manage-v535,
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-parking-calendar-empty-v536 {
  width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-page-title-row {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-page-title-row,
  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-workspace-links,
  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-notice,
  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-parking-calendar-context,
  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-parking-calendar-main-card,
  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-parking-selected-day-v535,
  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-parking-manage-v535,
  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-parking-calendar-empty-v536 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ========================================================================
   NEXT546 — Parking workspace active-pill + Calendar title alignment
   Mobile Parking navigation should always surface the page currently being
   viewed. The active pill moves to the leading position only on mobile; the
   desktop order remains Dashboard, Listings, Bookings, Calendar & Pricing,
   Payouts. The Calendar title is explicitly anchored to the same Host title
   geometry as the other Parking workspace pages.
   ======================================================================== */
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-page-title-row {
  position: relative !important;
  inset: auto !important;
  align-self: flex-start !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}

@media (max-width: 900px) {
  .listo-host-parking-workspace-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .listo-host-parking-workspace-links a {
    flex: 0 0 auto !important;
    order: 0 !important;
    scroll-snap-align: center;
  }
}


/* ========================================================================
   NEXT547 — Parking workspace shell + Listings title cleanup
   All Parking Host workspace pages use one canonical outer shell and one
   canonical title-row geometry. This removes Calendar & Pricing's page-specific
   geometry from the equation and keeps its title aligned with the other Parking
   workspace pages. Listings no longer carries a redundant back-link/secondary
   inventory heading; its add action lives in the page title row instead.
   ======================================================================== */
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell {
  width: 100% !important;
  max-width: 1200px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell > .listo-page-title-row--parking {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  box-sizing: border-box !important;
}

body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell > .listo-page-title-row--parking > .listo-page-title__icon {
  flex: 0 0 48px !important;
}

body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell > .listo-page-title-row--parking > h1 {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.listo-page-title-row--parking-action .listo-host-parking-listings-add {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 12px;
  background: #FF6A00;
  border-color: #FF6A00;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
}
.listo-page-title-row--parking-action .listo-host-parking-listings-add:hover {
  background: #e85f00;
  border-color: #e85f00;
  color: #fff;
}

/* The old Listings subheading/back-link is intentionally retired. */
.listo-host-parking-listings-toolbar-links,
.listo-host-parking-listings-topline {
  display: none !important;
}

@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell > .listo-page-title-row--parking {
    min-height: 40px !important;
    margin-bottom: 20px !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell > .listo-page-title-row--parking > .listo-page-title__icon {
    flex: 0 0 40px !important;
  }

  .listo-page-title-row--parking-action .listo-host-parking-listings-add {
    min-height: 38px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 11.5px;
  }
}

@media (max-width: 380px) {
  .listo-page-title-row--parking-action {
    gap: 8px !important;
  }
  .listo-page-title-row--parking-action .listo-host-parking-listings-add {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 10.5px;
  }
}

/* NEXT563 — Parking access schedule single-source-of-truth UI */
.listo-parking-access-mode-note{display:flex;gap:8px;align-items:flex-start;margin:10px 0;padding:11px 13px;border:1px solid #e5ebf0;border-radius:12px;background:#fafcfd;color:#4e5d68;font-size:12px;line-height:1.45}
.listo-parking-access-mode-note strong{color:#24313a;white-space:nowrap}
.listo-parking-custom-schedule{grid-column:1 / -1;margin-top:8px;padding:12px 14px;border:1px solid #e5ebf0;border-radius:14px;background:#fafcfd}
.listo-parking-custom-schedule[hidden]{display:none}
.listo-parking-custom-schedule .listo-parking-weekly-rows-v535{padding-top:4px}
.listo-parking-custom-schedule input:disabled{opacity:.55;background:#f1f4f6;cursor:not-allowed}
@media (max-width:700px){.listo-parking-access-mode-note{flex-direction:column;gap:2px}.listo-parking-custom-schedule{padding:10px}}

/* NEXT550 — Parking listing access-hour controls */
.listo-parking-access-time-fields{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;margin-top:-2px;padding:12px 14px;border:1px solid #e5ebf0;border-radius:14px;background:#fafcfd}
.listo-parking-access-time-fields[hidden]{display:none}
.listo-parking-access-time-fields .listo-parking-field{min-width:0}
.listo-parking-access-time-help{grid-column:1 / -1;margin:0;color:#68747f;font-size:11px;line-height:1.45}
@media (max-width:700px){.listo-parking-access-time-fields{grid-template-columns:1fr}.listo-parking-access-time-help{grid-column:auto}}

/* ==========================================================================
   NEXT553 — Parking published/approved directory visibility
   ========================================================================== */

/* ==========================================================================
   NEXT554 — Parking directory card details
   ========================================================================== */
.listo-parking-card__pricing-grid{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;margin-top:10px}
.listo-parking-card__pricing-grid>div{display:inline-flex;align-items:baseline;gap:4px}
.listo-parking-card__pricing-grid strong{color:var(--ink);font-size:15px;font-weight:700}
.listo-parking-card__pricing-grid span{font-size:12px;color:var(--ink-muted)}
.listo-parking-card__hours{display:flex;gap:6px;align-items:baseline;margin-top:6px;font-size:12px;color:var(--ink-muted)}
.listo-parking-card__hours strong{font-weight:600;color:var(--ink)}
@media (max-width:700px){.listo-parking-card__pricing-grid{gap:12px}.listo-parking-card__hours{font-size:11px}}

/* ========================================================================
   NEXT557 — Dedicated login page shell (desktop + mobile)
   ------------------------------------------------------------------------
   /login/ is a true authentication destination. It must not inherit the
   marketplace header/search shell. The existing auth markup and redirect
   behavior remain unchanged; this block only establishes the standalone
   presentation consistently at every breakpoint.
   ======================================================================== */
body.listo-login-route {
  background: #fff !important;
  min-height: 100vh;
}

body.listo-login-route .listo-header,
body.listo-login-route .listo-footer {
  display: none !important;
}

body.listo-login-route .listo-main {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
}

body.listo-login-route #listo-login-page {
  display: none;
}

body.listo-login-route #listo-auth-overlay {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: clamp(48px, 8vh, 88px) 24px 48px !important;
  background: #fff !important;
  z-index: 1 !important;
}

body.listo-login-route #listo-auth-overlay .listo-modal {
  width: min(100%, 456px) !important;
  max-width: 456px !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.listo-login-route #listo-auth-overlay .listo-login-page__logo {
  width: 88px !important;
  height: 88px !important;
  margin: 0 auto 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.listo-login-route #listo-auth-overlay .listo-login-page__logo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

body.listo-login-route #listo-auth-overlay .listo-login-page__logo-placeholder {
  width: 76px !important;
  height: 76px !important;
  border: 2px dashed #d8dde2 !important;
  border-radius: 18px !important;
  background: #fafbfc !important;
}

body.listo-login-route #listo-auth-overlay h2 {
  margin: 0 0 28px !important;
  font-size: 30px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  letter-spacing: -0.55px !important;
  text-align: center !important;
}

body.listo-login-route #listo-auth-overlay .listo-field {
  margin-bottom: 14px !important;
}

body.listo-login-route #listo-auth-overlay .listo-field label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.listo-login-route #listo-auth-overlay .listo-field input {
  width: 100% !important;
  min-height: 56px !important;
  height: 56px !important;
  box-sizing: border-box !important;
  padding: 0 18px !important;
  border: 1px solid #b7bdc3 !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  background: #fff !important;
}
body.listo-login-route #listo-auth-overlay .listo-field input::placeholder {
  color: #8a939c !important;
  opacity: 1 !important;
}

body.listo-login-route #listo-auth-overlay .listo-field input:focus {
  border-color: #2196F3 !important;
  outline: 3px solid rgba(33, 150, 243, 0.14) !important;
  outline-offset: 0 !important;
}

body.listo-login-route #listo-auth-overlay .listo-btn--block {
  width: 100% !important;
  min-height: 56px !important;
  height: 56px !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

body.listo-login-route #listo-auth-overlay .listo-modal__footnote {
  max-width: 430px !important;
  margin: 18px auto 0 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

body.listo-login-route #listo-auth-overlay .listo-modal__close {
  display: none !important;
}

body.listo-login-route #listo-auth-overlay .listo-modal__step[data-step="email-entry"] {
  margin: 0 !important;
}

@media (max-width: 900px) {
  body.listo-login-route #listo-auth-overlay {
    min-height: 100dvh !important;
    padding: max(28px, env(safe-area-inset-top, 0px) + 28px) 20px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.listo-login-route #listo-auth-overlay .listo-modal {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
  }

  body.listo-login-route #listo-auth-overlay .listo-login-page__logo {
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 22px !important;
  }

  body.listo-login-route #listo-auth-overlay .listo-login-page__logo-placeholder {
    width: 64px !important;
    height: 64px !important;
    border-radius: 16px !important;
  }

  body.listo-login-route #listo-auth-overlay h2 {
    margin-bottom: 24px !important;
    font-size: 26px !important;
    letter-spacing: -0.4px !important;
  }

  body.listo-login-route #listo-auth-overlay .listo-field input,
  body.listo-login-route #listo-auth-overlay .listo-btn--block {
    min-height: 54px !important;
    height: 54px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }

  body.listo-login-route #listo-auth-overlay .listo-modal__footnote {
    margin-top: 16px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  body.listo-login-route #listo-auth-overlay {
    padding-inline: 16px !important;
  }

  body.listo-login-route #listo-auth-overlay .listo-login-page__logo {
    width: 64px !important;
    height: 64px !important;
    margin-bottom: 18px !important;
  }

  body.listo-login-route #listo-auth-overlay h2 {
    font-size: 24px !important;
    margin-bottom: 20px !important;
  }
}

/* ========================================================================
   NEXT558 — Dedicated 404 page
   ------------------------------------------------------------------------
   Unresolved routes use the native WordPress 404 template and status. The
   marketplace header/footer are hidden so the missing-page state is a clean,
   standalone destination on desktop and mobile.
   ======================================================================== */
body.error404 {
  background: #fff !important;
}

body.error404 .listo-header,
body.error404 .listo-footer,
body.error404 > .listo-mobile-bottom-nav,
body.error404 > .listo-mobile-bottom-nav-spacer {
  display: none !important;
}

body.error404 .listo-main {
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

.listo-404-page {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 32px 24px 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.listo-404-page__inner {
  width: min(100%, 560px);
  text-align: center;
}

.listo-404-page__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 44px;
}

.listo-404-page__logo img {
  width: auto;
  max-width: 150px;
  max-height: 44px;
  object-fit: contain;
}

.listo-404-page__logo-fallback {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #2196F3;
  font-size: 31px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -1px;
}

.listo-404-page__logo-fallback img {
  width: 42px;
  height: 42px;
  max-width: none;
  max-height: none;
}

.listo-404-page__icon {
  width: 116px;
  height: 116px;
  margin: 0 auto 28px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EAF5FF;
}

.listo-404-page__icon-mark {
  color: #2196F3;
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -1px;
}

.listo-404-page__eyebrow {
  margin: 0 0 8px;
  color: #2196F3;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.listo-404-page h1 {
  margin: 0;
  color: #1A1A1A;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.08;
  font-weight: 750;
  letter-spacing: -1.3px;
}

.listo-404-page__message {
  max-width: 500px;
  margin: 16px auto 0;
  color: #6B6B6B;
  font-size: 16px;
  line-height: 1.55;
}

.listo-404-page__actions {
  width: min(100%, 460px);
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.listo-404-page__actions .listo-btn {
  min-height: 52px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.listo-404-page__support {
  max-width: 490px;
  margin: 20px auto 0;
  color: #8A8F94;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .listo-404-page {
    padding: 28px 18px calc(40px + env(safe-area-inset-bottom, 0px));
  }

  .listo-404-page__inner {
    width: min(100%, 440px);
  }

  .listo-404-page__logo {
    margin-bottom: 34px;
  }

  .listo-404-page__logo img {
    max-width: 132px;
    max-height: 40px;
  }

  .listo-404-page__icon {
    width: 92px;
    height: 92px;
    margin-bottom: 24px;
    border-radius: 24px;
  }

  .listo-404-page__icon-mark {
    font-size: 25px;
  }

  .listo-404-page__eyebrow {
    font-size: 12px;
  }

  .listo-404-page h1 {
    font-size: 32px;
    letter-spacing: -0.9px;
  }

  .listo-404-page__message {
    margin-top: 14px;
    font-size: 15px;
  }

  .listo-404-page__actions {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 26px;
  }

  .listo-404-page__actions .listo-btn {
    min-height: 52px;
  }

  .listo-404-page__support {
    margin-top: 17px;
  }
}

/* NEXT564 — Parking inventory availability-hours summary */
.listo-host-parking-inventory-card__hours{display:flex;align-items:baseline;gap:8px;margin-top:5px;color:#68747f;font-size:11px;line-height:1.35}
.listo-host-parking-inventory-card__hours span{font-weight:700;color:#8b949e}
.listo-host-parking-inventory-card__hours strong{font-weight:800;color:#344050}
@media(max-width:640px){.listo-host-parking-inventory-card__hours{font-size:10px;margin-top:4px;gap:6px;flex-wrap:wrap}}


/* NEXT570 — transaction pages use a clean header. */
.listo-header--transaction-clean .listo-market-nav,
.listo-header--transaction-clean .listo-header__marketplace-search { display: none !important; }
.listo-header--transaction-clean .listo-header__inner { min-height: 72px; }

/* NEXT570 — Payment Submitted confirmation. */
.listo-payment-submitted-page { min-height: calc(100vh - 72px); display:flex; align-items:center; justify-content:center; padding:48px 24px 80px; }
.listo-payment-submitted-card { width:min(620px,100%); margin:0 auto; padding:42px 34px; border:1px solid #e5eaf0; border-radius:24px; background:#fff; box-shadow:0 10px 34px rgba(26,26,26,.07); text-align:center; }
.listo-payment-submitted-card h1,.listo-payment-submitted-card p { text-align:center; }
.listo-payment-submitted-card h1 { margin:18px 0 10px; }
.listo-payment-submitted-message { max-width:500px; margin:0 auto; color:var(--ink-muted); line-height:1.55; }
.listo-payment-submitted-countdown { margin:20px auto 0; color:var(--ink-muted); font-size:13px; }
.listo-payment-submitted-countdown strong { color:var(--ink); }

/* NEXT570 — Staycation-linked Parking selector. */
.listo-checkout-card--parking { margin-top:20px; }
.listo-checkout-card--parking .listo-checkout-card__header { margin-bottom:8px; }
.listo-checkout-card--parking .listo-amenity-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.listo-checkout-card--parking .listo-amenity-checkbox { margin:0; }
@media (max-width:640px) {
  .listo-payment-submitted-page { padding:30px 16px 60px; }
  .listo-payment-submitted-card { padding:32px 20px; }
  .listo-checkout-card--parking .listo-amenity-grid { grid-template-columns:1fr; }
}


/* NEXT573 — guest-facing linked Parking section on Staycation listings */
.listo-public-parking {
	margin: 0;
	padding: 4px 0 0;
}
.listo-public-parking__title {
	margin: 0;
	font-size: 24px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--ink, #111827);
}
.listo-public-parking__subtitle {
	margin: 6px 0 0;
	font-size: 14px;
	color: #667085;
	line-height: 1.5;
}
.listo-public-parking__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line, #e1e5e6);
}
.listo-public-parking__summary strong { font-size: 16px; color: var(--ink, #111827); }
.listo-public-parking__summary span { display: block; margin-top: 2px; font-size: 12px; color: #667085; }
.listo-public-parking__count { font-size: 13px; color: #475467; white-space: nowrap; }
.listo-public-parking__vehicle { margin-top: 14px; max-width: 360px; }
.listo-public-parking__vehicle label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--ink, #111827); }
.listo-public-parking__vehicle .listo-select { width: 100%; }
.listo-public-parking__status { margin-top: 12px; font-size: 13px; color: #475467; line-height: 1.45; }
.listo-public-parking__status.is-available { font-weight: 600; color: #147a43; }
.listo-public-parking__status.is-unavailable { font-weight: 600; color: #b42318; }
.listo-public-parking__note { margin: 9px 0 0; font-size: 12px; color: #667085; line-height: 1.5; }
@media (max-width: 700px) {
	.listo-public-parking__title { font-size: 22px; }
	.listo-public-parking__summary { align-items: flex-start; }
	.listo-public-parking__vehicle { max-width: none; }
}

/* NEXT574 — Reservation widget price-breakdown rows. The widget renders
 * these rows dynamically from booking-calendar.js; keep labels and values
 * in two stable columns so long amounts never collide or concatenate. */
.listo-price-breakdown {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink, #111827);
}
.listo-price-breakdown__total {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 12px;
}
.listo-price-breakdown__total strong {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink, #111827);
}
.listo-price-breakdown__rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.listo-price-breakdown__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 14px;
  width: 100%;
  line-height: 1.4;
}
.listo-price-breakdown__row > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.listo-price-breakdown__row > span:last-child {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.listo-price-breakdown__rows > .listo-caption {
  margin: -4px 0 2px !important;
  line-height: 1.45;
}
@media (max-width: 700px) {
  .listo-price-breakdown { font-size: 13px; }
  .listo-price-breakdown__total strong { font-size: 20px; }
  .listo-price-breakdown__row { column-gap: 10px; }
}

/* NEXT575 — Listing-first Stay configuration. Parking and optional add-ons
 * are configured below the date calendar; Checkout is review/payment only. */
.listo-public-parking__spaces { margin-top: 12px; display: grid; gap: 8px; }
.listo-public-parking__space { margin: 0; }
.listo-public-parking__space small { color: #667085; }
.listo-public-parking__vehicle .listo-select:disabled { opacity: .65; cursor: not-allowed; }
.listo-public-addon--selectable { align-items: center; }
.listo-public-addon__stepper { flex: 0 0 auto; }
.listo-public-addon__stepper button:disabled { opacity: .45; cursor: not-allowed; }
.listo-public-addon__formula { font-size: 12px; color: #475467; margin-top: 2px; }
.listo-checkout-card--selections { margin-top: 16px; }
.listo-checkout-selection-group { padding: 12px 0; border-bottom: 1px solid var(--line, #e1e5e6); display: flex; flex-direction: column; gap: 7px; }
.listo-checkout-selection-group:last-child { border-bottom: 0; }
.listo-checkout-selection-line { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: start; font-size: 14px; }
.listo-checkout-selection-line > span:last-child { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.listo-checkout-selection-line small { color: #667085; }
@media (max-width:700px) {
  .listo-checkout-selection-line { gap: 10px; }
  .listo-public-addon { align-items: flex-start; }
}

/* NEXT585 — Parking listing Message the Host moved out of the reservation widget. */
.listo-parking-message-host{margin-top:28px;padding:20px;border:1px solid #e3e9ee;border-radius:18px;background:#f8fafc;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:22px;align-items:start}
.listo-parking-message-host__copy{min-width:0}
.listo-parking-message-host__eyebrow{display:block;margin-bottom:6px;color:#2196F3;font-size:10px;font-weight:900;letter-spacing:.08em}
.listo-parking-message-host__copy h2{margin:0;font-size:18px;line-height:1.25}
.listo-parking-message-host__copy p{margin:7px 0 0;color:#68747f;font-size:12px;line-height:1.5;max-width:560px}
.listo-parking-message-host__form{min-width:0}
.listo-parking-message-host__form textarea{display:block;width:100%;min-height:88px;padding:11px 12px;border:1px solid #dfe6eb;border-radius:11px;background:#fff;resize:vertical;font:inherit;font-size:12px;color:#26323d;box-sizing:border-box}
.listo-parking-message-host__actions{display:flex;align-items:center;gap:10px;margin-top:9px;min-height:38px}
.listo-parking-message-host__actions .listo-btn{flex:0 0 auto;justify-content:center}
.listo-parking-contact-host__status{flex:1;min-height:17px;color:#68747f;font-size:11px;line-height:1.4}
@media(max-width:900px){.listo-parking-message-host{grid-template-columns:1fr;gap:14px}.listo-parking-message-host__form{width:100%}}
@media(max-width:640px){.listo-parking-message-host{margin-top:22px;padding:16px;border-radius:15px;gap:12px}.listo-parking-message-host__copy h2{font-size:16px}.listo-parking-message-host__copy p{font-size:11px}.listo-parking-message-host__form textarea{min-height:82px}.listo-parking-message-host__actions{display:grid;grid-template-columns:1fr;gap:5px}.listo-parking-message-host__actions .listo-btn{width:100%}.listo-parking-contact-host__status{text-align:center}}

/* NEXT586 — Parking Reviews + shared Host profile. */
.listo-parking-trust{margin-top:4px}
.listo-parking-section-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:4px}
.listo-parking-section-title-row h2{margin:0;font-size:22px}
.listo-parking-review-grid{margin-top:14px}
.listo-parking-empty-trust{margin-top:12px;padding:16px;border:1px solid #e5eaf0;border-radius:14px;background:#fbfcfd;color:var(--ink-muted);font-size:13px;line-height:1.5}
.listo-parking-host-profile{margin-top:28px;padding:22px;border:1px solid #e2e8ee;border-radius:18px;background:#fff}
.listo-parking-host-profile__top{display:flex;align-items:center;gap:14px;margin-top:9px}
.listo-parking-host-profile__avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;background:#e9f4ff;color:#1976d2;display:grid;place-items:center;font-size:24px;font-weight:800;flex:0 0 auto}
.listo-parking-host-profile__avatar img{width:100%;height:100%;object-fit:cover}
.listo-parking-host-profile__top h2{margin:0;font-size:20px}
.listo-parking-host-profile__top p{margin:4px 0 0;color:var(--ink-muted);font-size:12px}
.listo-parking-host-profile__bio{margin:16px 0 0;color:#4f5962;font-size:13px;line-height:1.6;max-width:720px}
.listo-parking-host-profile__stats{display:flex;flex-wrap:wrap;gap:22px;margin-top:17px;padding-top:14px;border-top:1px solid #edf0f2}
.listo-parking-host-profile__stats div{display:flex;flex-direction:column}
.listo-parking-host-profile__stats strong{font-size:14px}
.listo-parking-host-profile__stats span{margin-top:2px;color:var(--ink-muted);font-size:10px}
@media(max-width:640px){
 .listo-parking-host-profile{padding:17px;border-radius:15px}
 .listo-parking-host-profile__avatar{width:56px;height:56px;font-size:21px}
 .listo-parking-host-profile__top h2{font-size:18px}
 .listo-parking-host-profile__stats{gap:16px}
}

/* NEXT587 — Parking detail page UX refinement: confidence on the page, transaction in the booking panel. */
.listo-parking-title-trust{display:flex;align-items:center;gap:9px;margin:-8px 0 24px;color:#667085;font-size:12px;font-weight:600}
.listo-parking-title-trust span:first-child{color:#1f2937;font-weight:800}
.listo-parking-about h2{margin:0 0 10px;font-size:20px}
.listo-parking-about > p{margin:0;color:#4f5962;line-height:1.65}
.listo-parking-good-to-know{margin-top:28px;padding:20px;border:1px solid #e3e9ee;border-radius:18px;background:#fbfcfd}
.listo-parking-section-heading h2{margin:0;font-size:19px}
.listo-parking-section-heading .listo-parking-eyebrow{margin-bottom:5px}
.listo-parking-detail-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}
.listo-parking-detail-facts>div{padding:13px 14px;border:1px solid #e4e9ee;border-radius:13px;background:#fff;min-width:0}
.listo-parking-detail-facts span,.listo-parking-rules-compact>span{display:block;color:#667085;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.listo-parking-detail-facts strong{display:block;margin-top:4px;font-size:13px;line-height:1.4}
.listo-parking-rules-compact{margin-top:10px;padding:13px 14px;border-top:1px solid #e7ebef}
.listo-parking-rules-compact p{margin:5px 0 0;color:#4f5962;font-size:12px;line-height:1.55}
.listo-parking-booking-heading{margin-bottom:13px;padding-bottom:12px;border-bottom:1px solid #edf0f2}
.listo-parking-booking-heading h2{margin:0;font-size:18px;line-height:1.25}
.listo-parking-booking-close{display:none}
.listo-parking-mobile-reservebar{display:none}
.listo-parking-write-review-prompt{margin-top:14px}
.listo-parking-write-review-prompt .listo-btn{width:auto}

@media (min-width:821px){
  .listo-parking-detail__booking{top:82px}
  .listo-parking-detail__price{margin-bottom:12px}
  .listo-parking-detail__booking-note{padding-top:2px}
}

@media (max-width:820px){
  body.listo-parking-booking-open{overflow:hidden}
  .listo-parking-detail{padding-bottom:132px}
  .listo-parking-detail__grid{gap:0}
  .listo-parking-detail__content{padding:22px 0 12px}
  .listo-parking-title-trust{margin:-7px 0 20px}
  .listo-parking-good-to-know{margin-top:22px;padding:16px;border-radius:16px}
  .listo-parking-detail-facts{grid-template-columns:1fr 1fr;gap:8px}
  .listo-parking-detail-facts>div{padding:11px 12px}
  .listo-parking-detail__booking{position:fixed;z-index:1200;left:0;right:0;bottom:0;top:auto;max-height:min(88vh,760px);overflow:auto;padding:20px 16px calc(24px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;border:1px solid #dfe6ec;box-shadow:0 -12px 34px rgba(26,26,26,.16);transform:translateY(105%);transition:transform .24s ease;visibility:hidden}
  .listo-parking-detail__booking.is-mobile-open{transform:translateY(0);visibility:visible}
  .listo-parking-booking-close{display:grid;place-items:center;position:absolute;right:14px;top:13px;width:36px;height:36px;border:1px solid #e1e6eb;border-radius:50%;background:#fff;color:#26323d;font-size:25px;line-height:1;cursor:pointer}
  .listo-parking-booking-heading{padding-right:48px;margin-bottom:14px}
  .listo-parking-mobile-reservebar{position:fixed;display:flex;flex-direction:column;align-items:stretch;gap:8px;left:10px;right:10px;bottom:10px;z-index:1190;padding:10px 10px 10px 10px;border:1px solid #dbe5ed;border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 8px 28px rgba(26,26,26,.15);backdrop-filter:blur(14px);padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .listo-parking-mobile-reservebar__row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
  .listo-parking-mobile-reservebar__row>div{min-width:0}
  .listo-parking-mobile-modes{flex:none;width:100%;margin:0}
  .listo-parking-mobile-modes.lpr-mode-switch{margin:0}
  .listo-parking-mobile-reservebar strong{display:block;font-size:14px;line-height:1.2}
  .listo-parking-mobile-reservebar span{display:block;margin-top:2px;color:#667085;font-size:10px}
  .listo-parking-mobile-reservebar .listo-btn{flex:0 0 auto;min-height:44px;padding-inline:20px;border-radius:13px}
  .listo-parking-detail__booking-note{font-size:11px}
  .listo-parking-write-review-prompt .listo-btn{width:100%}
}

@media (max-width:560px){
  .listo-parking-detail__content h1{font-size:30px;line-height:1.08}
  .listo-parking-detail__location{margin-bottom:17px}
  .listo-parking-detail-facts{grid-template-columns:1fr 1fr}
  .listo-parking-detail-facts strong{font-size:12px}
  .listo-parking-mobile-reservebar{left:8px;right:8px;bottom:8px;border-radius:16px}
  .listo-parking-mobile-reservebar .listo-btn{padding-inline:17px}
}

/* NEXT593 — Parking pre-rental inquiry date context. */
.listo-parking-message-host__schedule{margin:0 0 10px;padding:12px;border:1px solid #e2e8ed;border-radius:12px;background:#fff}
.listo-parking-message-host__schedule-label{margin-bottom:8px;font-size:11px;font-weight:800;color:#33404b}
.listo-parking-message-host__mode{display:flex;gap:4px;margin-bottom:9px;padding:3px;border:1px solid #e4e9ee;border-radius:10px;background:#f7f9fb}
.listo-parking-message-host__mode button{flex:1;min-height:31px;border:0;border-radius:8px;background:transparent;color:#66727d;font:inherit;font-size:11px;font-weight:750;cursor:pointer}
.listo-parking-message-host__mode button.is-active{background:#2196F3;color:#fff;box-shadow:0 1px 3px rgba(33,150,243,.18)}
.listo-parking-message-host__dates{display:grid;grid-template-columns:1fr;gap:8px}
.listo-parking-message-host__dates.is-daily{grid-template-columns:1fr 1fr}
.listo-parking-message-host__date-field{display:block;min-width:0}
.listo-parking-message-host__date-field[hidden]{display:none !important}
.listo-parking-message-host__date-field span{display:block;margin:0 0 5px;font-size:10px;font-weight:750;color:#66727d}
.listo-parking-message-host__date-field input{display:block;width:100%;height:38px;box-sizing:border-box;padding:0 9px;border:1px solid #dce4ea;border-radius:9px;background:#fff;color:#26323d;font:inherit;font-size:12px}
.listo-parking-message-host__date-field input:focus{outline:2px solid rgba(33,150,243,.15);border-color:#2196F3}
.listo-parking-message-host__schedule-note{margin-top:7px;font-size:10px;line-height:1.4;color:#7a858e}
@media(max-width:640px){.listo-parking-message-host__dates{grid-template-columns:1fr}.listo-parking-message-host__schedule{padding:11px}}

/* NEXT1274 — Account-shell notification badge.
 * Notifications belong to the destination that requires attention, not the avatar.
 */
.listo-account-notification-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-width:18px;height:18px;margin-left:auto;padding:0 5px;box-sizing:border-box;
  border-radius:999px;background:#e53935;color:#fff;font-size:9px;font-weight:800;
  line-height:1;white-space:nowrap;text-align:center;
}
.listo-account-notification-badge[hidden]{display:none !important;}
.listo-guest-sidebar__item,.listo-host-sidebar__item{min-width:0;}
.listo-guest-sidebar__label,.listo-host-sidebar__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.listo-guest-floating-dock > a,.listo-guest-floating-dock > button,.listo-host-floating-dock > a,.listo-host-floating-dock > button{position:relative;}
.listo-guest-floating-dock .listo-account-notification-badge,.listo-host-floating-dock .listo-account-notification-badge{position:absolute;top:5px;right:12px;min-width:16px;height:16px;padding:0 4px;margin:0;font-size:8px;pointer-events:none;}
.listo-guest-floating__more-grid > a,.listo-dashboard-v2__more-grid > a{min-width:0;}
@media(max-width:800px){.listo-account-notification-badge{min-width:17px;height:17px;font-size:8.5px;padding:0 4px;}}

/* NEXT598 — Guest My Bookings secondary service navigation.
 * Mirrors the Host mode's secondary context navigation, but is scoped to
 * My Bookings and uses guest-facing service routing.
 */
.listo-guest-bookings-context-nav {
  width: 100%;
  background: #fff;
  border-bottom: 0;
  position: relative;
  z-index: 20;
  padding-top: 10px;
  padding-bottom: 4px;
}
.listo-guest-bookings-context-nav__inner {
  width: min(1180px, calc(100% - 48px));
  min-height: 54px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.listo-guest-bookings-context-pill {
  min-width: 150px;
  min-height: 38px;
  padding: 7px 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #59636d;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.listo-guest-bookings-context-pill--staycation:hover { background: #eef6ff; color: #1976D2; }
.listo-guest-bookings-context-pill--staycation.is-active {
  background: #2196F3;
  color: #fff;
  box-shadow: 0 2px 8px rgba(33,150,243,.22);
}
.listo-guest-bookings-context-pill--staycation.is-active:hover { background: #2196F3; color: #fff; }
.listo-guest-bookings-context-pill--parking:hover { background: #fff3e8; color: #e85d00; }
.listo-guest-bookings-context-pill--parking.is-active {
  background: #ff6a00;
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,106,0,.22);
}
.listo-guest-bookings-context-pill--parking.is-active:hover { background: #ff6a00; color: #fff; }
.listo-guest-bookings-context-pill__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}
.listo-guest-bookings-context-pill__icon svg { width: 18px; height: 18px; }

/* Preserve the Parking booking card styles that were appended in NEXT597. */
.listo-parking-guest-card { color: inherit; text-decoration: none; cursor: pointer; }
.listo-parking-guest-card:hover { border-color: rgba(33,150,243,.38); box-shadow: 0 3px 12px rgba(0,0,0,.05); }
.listo-parking-guest-card__placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--surface-alt); color:var(--ink-muted); font-size:30px; }
.listo-parking-guest-card .listo-trip-card__actions { margin-top:10px; }
.listo-parking-guest-card .listo-trip-card__actions .listo-btn { pointer-events:auto; position:relative; z-index:2; }
.listo-guest-parking-detail .listo-parking-rental-detail__topbar { margin-bottom:18px; }

@media (max-width: 700px) {
  .listo-guest-bookings-context-nav { padding-top: 8px; padding-bottom: 3px; }
  .listo-guest-bookings-context-nav__inner { width: calc(100% - 24px); min-height: 50px; gap: 6px; }
  .listo-guest-bookings-context-pill { min-width: 0; flex: 1 1 0; min-height: 36px; padding: 6px 10px; font-size: 13px; }
  .listo-guest-bookings-context-pill__icon { width: 16px; height: 16px; flex-basis: 16px; }
  .listo-guest-bookings-context-pill__icon svg { width: 16px; height: 16px; }
  .listo-parking-guest-card .listo-trip-card__actions { display:none; }
  .listo-parking-guest-card--cancellable .listo-trip-card__actions { display:flex; }
}

/* NEXT606 — Message Host uses the primary Parking reservation dates as its single source of truth. */
.listo-parking-message-host__selected-dates{margin:0 0 10px;padding:11px 12px;border:1px solid #e2e8ed;border-radius:12px;background:#fff;font-size:11px;line-height:1.4}
.listo-parking-message-host__selected-dates strong{display:block;margin-bottom:3px;font-size:10px;font-weight:800;color:#33404b;text-transform:uppercase;letter-spacing:.04em}
.listo-parking-message-host__selected-dates span{display:block;color:#66727d}

/* ==========================================================================\n   NEXT610 — Simplified Parking Host Dashboard\n   ========================================================================== */
.listo-host-parking-dashboard-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin:0 0 16px;
}
.listo-host-parking-dashboard-toolbar form{
  display:flex;
  align-items:center;
  gap:9px;
}
.listo-host-parking-dashboard-toolbar label{
  color:#68747f;
  font-size:11px;
  font-weight:750;
}
.listo-host-parking-dashboard-toolbar .listo-select{
  min-width:155px;
}
.listo-host-parking-dashboard-download{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:0 14px;
  border-radius:12px;
  text-decoration:none;
  white-space:nowrap;
}
.listo-host-parking-dashboard-metrics{
  display:grid;
  grid-template-columns:minmax(1.35fr,1.35fr) repeat(3,minmax(0,1fr));
  border:1px solid #dce7ef;
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  margin-bottom:14px;
}
.listo-host-parking-dashboard-metric{
  min-width:0;
  min-height:126px;
  padding:21px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-left:1px solid #e9eef2;
}
.listo-host-parking-dashboard-metric--hero{
  background:#f7fbff;
  border-left:0;
}
.listo-host-parking-dashboard-metric span{
  color:#68747f;
  font-size:11px;
  line-height:1.35;
  font-weight:750;
}
.listo-host-parking-dashboard-metric strong{
  margin-top:7px;
  color:#1d2933;
  font-size:25px;
  line-height:1.05;
  font-weight:850;
  letter-spacing:-.02em;
}
.listo-host-parking-dashboard-metric--hero strong{
  color:#1768b4;
  font-size:34px;
}
.listo-host-parking-dashboard-metric small{
  margin-top:7px;
  color:#89959e;
  font-size:10px;
  line-height:1.35;
}
.listo-host-parking-dashboard-metric--pending strong{
  color:#1768b4;
}
.listo-host-parking-dashboard-context-note{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  margin:0 0 14px;
  border:1px solid #e1e9ef;
  border-radius:13px;
  background:#fbfdff;
}
.listo-host-parking-dashboard-context-note__icon{
  flex:0 0 auto;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e9f5ff;
  color:#1976d2;
  font-size:12px;
  font-weight:850;
}
.listo-host-parking-dashboard-context-note > div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.listo-host-parking-dashboard-context-note strong{
  color:#293640;
  font-size:11px;
}
.listo-host-parking-dashboard-context-note > div span{
  color:#72808a;
  font-size:10px;
  line-height:1.4;
}
.listo-host-parking-dashboard-context-note a{
  margin-left:auto;
  flex:0 0 auto;
  color:#ff6a00;
  font-size:10px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}
.listo-host-parking-dashboard-next{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.listo-host-parking-dashboard-next a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  min-width:0;
  padding:15px 16px;
  border:1px solid #e3ebf0;
  border-radius:14px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.listo-host-parking-dashboard-next a:hover{
  border-color:#c9dce9;
  box-shadow:0 5px 18px rgba(31,62,84,.06);
  transform:translateY(-1px);
}
.listo-host-parking-dashboard-next a > span{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.listo-host-parking-dashboard-next strong{
  color:#26333d;
  font-size:12px;
}
.listo-host-parking-dashboard-next small{
  color:#7b8891;
  font-size:10px;
  line-height:1.4;
}
.listo-host-parking-dashboard-next b{
  flex:0 0 auto;
  color:#2196f3;
  font-size:20px;
  line-height:1;
}
@media (max-width:980px){
  .listo-host-parking-dashboard-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .listo-host-parking-dashboard-metric:nth-child(3){
    border-left:0;
    border-top:1px solid #e9eef2;
  }
  .listo-host-parking-dashboard-metric:nth-child(4){
    border-top:1px solid #e9eef2;
  }
}
@media (max-width:760px){
  .listo-host-parking-dashboard-toolbar{
    justify-content:stretch;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .listo-host-parking-dashboard-toolbar form{
    width:100%;
    justify-content:space-between;
  }
  .listo-host-parking-dashboard-toolbar .listo-select{
    flex:1;
    min-width:0;
  }
  .listo-host-parking-dashboard-download{
    width:100%;
  }
  .listo-host-parking-dashboard-metrics{
    display:grid;
    grid-template-columns:1fr;
    border-radius:16px;
  }
  .listo-host-parking-dashboard-metric,
  .listo-host-parking-dashboard-metric:nth-child(3),
  .listo-host-parking-dashboard-metric:nth-child(4){
    min-height:0;
    padding:17px 16px;
    border-left:0;
    border-top:1px solid #e9eef2;
  }
  .listo-host-parking-dashboard-metric:first-child{
    border-top:0;
  }
  .listo-host-parking-dashboard-metric--hero strong{
    font-size:31px;
  }
  .listo-host-parking-dashboard-metric strong{
    font-size:23px;
  }
  .listo-host-parking-dashboard-context-note{
    align-items:flex-start;
  }
  .listo-host-parking-dashboard-context-note a{
    margin-left:0;
    align-self:center;
  }
  .listo-host-parking-dashboard-next{
    grid-template-columns:1fr;
  }
}
@media (max-width:460px){
  .listo-host-parking-dashboard-context-note{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
  }
  .listo-host-parking-dashboard-context-note a{
    grid-column:2;
  }
}

/* NEXT612 — simplified Parking payout history */
.listo-host-parking-payouts-v612 .listo-host-parking-payout-toolbar-v612{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 18px}
.listo-host-parking-payout-period-v612{display:flex;align-items:center;gap:8px}
.listo-host-parking-payout-period-v612 label{font-size:12px;font-weight:700;color:#68747f}
.listo-host-parking-payout-period-v612 select{height:42px;min-width:175px;border:1px solid #dfe6eb;border-radius:12px;padding:0 12px;background:#fff;color:#26323d;font-weight:600}
.listo-host-parking-payout-report-v612{height:42px!important;white-space:nowrap}
.listo-host-parking-payout-report-v612 span{font-size:18px;line-height:1}
.listo-host-parking-payout-history-v612{border:1px solid #e5ebf0;border-radius:18px;background:#fff;overflow:hidden}
.listo-host-parking-payout-history-head-v612{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 22px 18px;border-bottom:1px solid #edf1f4}
.listo-host-parking-payout-history-head-v612 h2{margin:0 0 5px;font-size:20px;line-height:1.2}
.listo-host-parking-payout-history-head-v612 p{margin:0;color:#68747f;font-size:13px;line-height:1.5}
.listo-host-parking-payout-history-total-v612{text-align:right;min-width:150px}
.listo-host-parking-payout-history-total-v612 span,.listo-host-parking-payout-history-total-v612 small{display:block;color:#74808a;font-size:11px}
.listo-host-parking-payout-history-total-v612 strong{display:block;color:#1f2933;font-size:22px;line-height:1.2;margin:3px 0}
.listo-host-parking-payout-filters-v612{display:grid;grid-template-columns:minmax(0,1fr) 230px auto;gap:9px;padding:16px 22px;border-bottom:1px solid #edf1f4;background:#fbfcfd}
.listo-host-parking-payout-search-v612,.listo-host-parking-payout-space-v612{position:relative;display:block}
.listo-host-parking-payout-search-v612 svg{position:absolute;left:12px;top:12px;width:17px;height:17px;color:#7b8791;pointer-events:none}
.listo-host-parking-payout-search-v612 input,.listo-host-parking-payout-space-v612 select{width:100%;height:40px;border:1px solid #dfe6eb;border-radius:10px;background:#fff;color:#26323d;padding:0 11px;font-size:13px}
.listo-host-parking-payout-search-v612 input{padding-left:36px}
.listo-host-parking-payout-filters-v612 .listo-btn{height:40px;padding:0 18px}
.listo-host-parking-payout-list-v612{display:flex;flex-direction:column}
.listo-host-parking-payout-card-v612{border-bottom:1px solid #edf1f4}
.listo-host-parking-payout-card-v612:last-child{border-bottom:0}
.listo-host-parking-payout-card__main-v612{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;width:100%;border:0;background:#fff;text-align:left;padding:16px 22px;cursor:pointer;color:inherit;font:inherit;gap:15px}
.listo-host-parking-payout-card__main-v612:hover{background:#fbfcfd}
.listo-host-parking-payout-card__date-v612{display:flex;flex-direction:column;align-items:flex-start}
.listo-host-parking-payout-card__date-v612 strong{font-size:15px;line-height:1.2}
.listo-host-parking-payout-card__date-v612 small{color:#7a8690;font-size:11px;margin-top:3px}
.listo-host-parking-payout-card__body-v612{display:flex;flex-direction:column;min-width:0}
.listo-host-parking-payout-card__body-v612 strong{font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listo-host-parking-payout-card__body-v612 span{font-size:12px;color:#68747f;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listo-host-parking-payout-card__body-v612 small{font-size:11px;color:#1f9d55;font-weight:700;margin-top:3px}
.listo-host-parking-payout-card__amount-v612{display:flex;align-items:center;gap:12px}
.listo-host-parking-payout-card__amount-v612 strong{font-size:16px;color:#1f2933;white-space:nowrap}
.listo-host-parking-payout-card__amount-v612 b{font-size:23px;line-height:1;color:#2196F3;font-weight:400}
.listo-host-parking-payout-card__detail-v612{padding:0 22px 18px 101px;background:#fbfcfd}
.listo-host-parking-payout-detail-grid-v612{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #e5ebf0;border-radius:12px;overflow:hidden;background:#fff}
.listo-host-parking-payout-detail-grid-v612>div{padding:12px 14px;border-right:1px solid #edf1f4}
.listo-host-parking-payout-detail-grid-v612>div:last-child{border-right:0}
.listo-host-parking-payout-detail-grid-v612 span{display:block;color:#74808a;font-size:11px}
.listo-host-parking-payout-detail-grid-v612 strong{display:block;margin-top:5px;font-size:14px}
.listo-host-parking-payout-detail-grid-v612 .is-total{background:#f3f8fd}
.listo-host-parking-payout-detail-grid-v612 .is-total strong{color:#156fbd}
.listo-host-parking-payout-card__detail-actions-v612{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;font-size:11px;color:#74808a}
.listo-host-parking-payout-card__detail-actions-v612 a{color:#2196F3;font-weight:700;text-decoration:none}
.listo-host-parking-payout-empty-v612{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:44px 20px}
.listo-host-parking-payout-empty-v612__icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#f3f8fd;color:#2196F3;margin-bottom:3px}
.listo-host-parking-payout-empty-v612__icon svg{width:22px;height:22px}
.listo-host-parking-payout-empty-v612 strong{font-size:16px}
.listo-host-parking-payout-empty-v612 span{color:#68747f;font-size:13px;line-height:1.5}
.listo-host-parking-payout-empty-v612 a{color:#2196F3;text-decoration:none;font-size:12px;font-weight:700;margin-top:4px}
.listo-host-parking-shared-payout-link-v612{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px;padding:14px 16px;border:1px solid #e5ebf0;border-radius:14px;background:#fff}
.listo-host-parking-shared-payout-link-v612 strong{display:block;font-size:13px}
.listo-host-parking-shared-payout-link-v612 span{display:block;margin-top:2px;color:#68747f;font-size:12px}
.listo-host-parking-shared-payout-link-v612 a{color:#2196F3;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}
@media (max-width:700px){
 .listo-host-parking-payouts-v612 .listo-host-parking-payout-toolbar-v612{align-items:stretch;justify-content:stretch;flex-direction:column;margin-bottom:14px}
 .listo-host-parking-payout-period-v612{width:100%;justify-content:space-between}
 .listo-host-parking-payout-period-v612 select{flex:1;min-width:0}
 .listo-host-parking-payout-report-v612{width:100%;justify-content:center}
 .listo-host-parking-payout-history-v612{border-radius:16px}
 .listo-host-parking-payout-history-head-v612{padding:17px 16px 15px;gap:12px}
 .listo-host-parking-payout-history-head-v612 h2{font-size:18px}
 .listo-host-parking-payout-history-total-v612{min-width:100px}
 .listo-host-parking-payout-history-total-v612 strong{font-size:18px}
 .listo-host-parking-payout-filters-v612{grid-template-columns:1fr;padding:12px 14px}
 .listo-host-parking-payout-filters-v612 .listo-btn{width:100%}
 .listo-host-parking-payout-card__main-v612{grid-template-columns:48px minmax(0,1fr) auto;padding:15px 14px;gap:10px}
 .listo-host-parking-payout-card__date-v612 strong{font-size:14px}
 .listo-host-parking-payout-card__body-v612 strong{font-size:13px}
 .listo-host-parking-payout-card__amount-v612{gap:5px}
 .listo-host-parking-payout-card__amount-v612 strong{font-size:14px}
 .listo-host-parking-payout-card__amount-v612 b{font-size:20px}
 .listo-host-parking-payout-card__detail-v612{padding:0 14px 15px}
 .listo-host-parking-payout-detail-grid-v612{grid-template-columns:1fr 1fr}
 .listo-host-parking-payout-detail-grid-v612>div:nth-child(2){border-right:0}
 .listo-host-parking-payout-detail-grid-v612>div:nth-child(-n+2){border-bottom:1px solid #edf1f4}
 .listo-host-parking-payout-card__detail-actions-v612{align-items:flex-start;flex-direction:column}
 .listo-host-parking-shared-payout-link-v612{align-items:flex-start;flex-direction:column}
 .listo-host-parking-shared-payout-link-v612 a{align-self:flex-end}
}

/* ========================================================================== 
   NEXT613 — Parking Listings scalable inventory UI
   One job for this page: identify and manage Parking inventory. Analytics,
   booking detail, calendar and payout accounting stay on their own pages.
   ========================================================================== */
.listo-host-parking-listings-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 9px;
  color:#74818a;
  font-size:12px;
}
.listo-host-parking-listings-summary strong{color:#26333c;font-size:13px}
.listo-host-parking-listings-summary a{color:#e85d00;font-size:11px;font-weight:800;text-decoration:none}
.listo-host-parking-listings-controls{
  display:grid;
  grid-template-columns:minmax(260px,1.7fr) minmax(145px,.7fr) minmax(185px,.9fr) minmax(155px,.75fr) auto;
  align-items:end;
  gap:8px;
  padding:10px;
  margin-bottom:14px;
  border:1px solid #e3eaf0;
  border-radius:15px;
  background:#fbfcfd;
}
.listo-host-parking-listings-search{min-width:0}
.listo-host-parking-listings-filter{min-width:0;display:block}
.listo-host-parking-listings-filter > span{display:block;margin:0 0 5px;color:#71808a;font-size:10px;font-weight:800}
.listo-host-parking-listings-search input,
.listo-host-parking-listings-filter select{
  width:100%;height:42px;border:1px solid #dfe6eb;border-radius:11px;background:#fff;color:#2a3740;font-size:12px;
}
.listo-host-parking-listings-filter select{padding:0 30px 0 11px}
.listo-host-parking-listings-controls .listo-btn{height:42px;padding:0 15px;border-radius:11px;white-space:nowrap}
.listo-host-parking-inventory-card__type{margin-top:7px;color:#5f707b;font-size:11px;font-weight:750}
.listo-host-parking-inventory-card__actions{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:8px}
.listo-host-parking-inventory-card__actions .listo-btn{width:100%;justify-content:center;min-height:40px}
.listo-host-parking-inventory-card__more{position:relative;text-align:center}
.listo-host-parking-inventory-card__more summary{list-style:none;cursor:pointer;padding:4px 0;color:#e85d00;font-size:11px;font-weight:800}
.listo-host-parking-inventory-card__more summary::-webkit-details-marker{display:none}
.listo-host-parking-inventory-card__more summary::after{content:'⌄';display:inline-block;margin-left:5px;font-size:12px;transition:transform .15s ease}
.listo-host-parking-inventory-card__more[open] summary::after{transform:rotate(180deg)}
.listo-host-parking-inventory-card__more > div{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:185px;padding:6px;border:1px solid #e2e8ed;border-radius:12px;background:#fff;box-shadow:0 12px 28px rgba(28,43,54,.12);text-align:left}
.listo-host-parking-inventory-card__more a{display:block;padding:9px 10px;color:#34434d;text-decoration:none;font-size:11px;font-weight:700;border-radius:8px}
.listo-host-parking-inventory-card__more a:hover{background:#fff4ea;color:#e85d00}
@media(max-width:1100px){
  .listo-host-parking-listings-controls{grid-template-columns:minmax(220px,1.5fr) repeat(2,minmax(150px,1fr)) minmax(145px,.9fr) auto}
  .listo-host-parking-listings-controls .listo-host-parking-listings-sort{grid-column:4}
}
@media(max-width:900px){
  .listo-host-parking-listings-controls{grid-template-columns:1fr 1fr}
  .listo-host-parking-listings-search{grid-column:1 / -1}
  .listo-host-parking-listings-controls .listo-btn{grid-column:1 / -1;width:100%;justify-content:center}
}
@media(max-width:760px){
  .listo-host-parking-listings-summary{margin-bottom:8px}
  .listo-host-parking-listings-controls{display:grid;padding:9px;gap:7px;margin-bottom:12px}
  .listo-host-parking-listings-search{grid-column:1 / -1}
  .listo-host-parking-listings-filter{grid-column:span 1}
  .listo-host-parking-listings-controls .listo-btn{grid-column:1 / -1;margin-top:0}
  .listo-host-parking-inventory-card__type{font-size:10.5px}
  .listo-host-parking-inventory-card__actions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid #edf1f4}
  .listo-host-parking-inventory-card__actions .listo-btn{width:auto;min-height:42px}
  .listo-host-parking-inventory-card__more summary{min-height:42px;display:flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid #dfe6eb;border-radius:10px;color:#e85d00;background:#fff}
  .listo-host-parking-inventory-card__more > div{right:0;bottom:calc(100% + 6px);top:auto;min-width:205px}
}
@media(max-width:480px){
  .listo-host-parking-listings-controls{grid-template-columns:1fr}
  .listo-host-parking-listings-filter{grid-column:1}
  .listo-host-parking-listings-controls .listo-btn{grid-column:1}
}

/* NEXT614 — Parking listing visibility + cleaner More control. */
.listo-host-parking-inventory-card .listo-host-parking-listing-status.is-unpublished{background:#f2f3f5;color:#68747f}
.listo-host-parking-inventory-card__more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 13px;border:1px solid #e1e7ec;border-radius:12px;background:#fff;color:#26313b;font-size:12px;font-weight:800;user-select:none}
.listo-host-parking-inventory-card__more summary::-webkit-details-marker{display:none}
.listo-host-parking-inventory-card__more summary::after{content:'';width:7px;height:7px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .16s ease}
.listo-host-parking-inventory-card__more[open] summary::after{transform:rotate(225deg) translate(-1px,-1px)}
.listo-host-parking-inventory-card__more summary:hover{border-color:#cfd8df;background:#f8fafb}
.listo-host-parking-inventory-card__more>div{z-index:20}
.listo-host-parking-inventory-card__more button.listo-listing-visibility-toggle{display:block;width:100%;padding:9px 12px;border:0;background:#fff;text-align:left;color:#26313b;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.listo-host-parking-inventory-card__more button.listo-listing-visibility-toggle:hover{background:#f5f8fa;color:#ff6a00}
@media(max-width:640px){.listo-host-parking-inventory-card__more summary{min-height:38px;padding:0 12px}}

/* NEXT616 — Parking Calendar & Pricing aligned with Staycation calendar UI */
.listo-parking-calendar-layout-v616{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(310px,.75fr);
  gap:18px;
  align-items:start;
  margin-bottom:28px;
}
.listo-parking-calendar-main-card{
  padding:20px;
}
.listo-parking-calendar-head--v616{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:18px;
}
.listo-parking-calendar-head--v616 h2{
  margin:0 0 4px;
  font-size:22px;
  line-height:1.2;
  color:#1b2224;
}
.listo-parking-calendar-head--v616 p{
  margin:0;
  color:#6a7174;
  font-size:13px;
}
.listo-parking-calendar-nav--v616{
  display:flex;
  gap:7px;
}
.listo-parking-calendar-nav--v616 a{
  width:38px;
  height:38px;
  border:1px solid #d9dfe0;
  border-radius:10px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:#1d2426;
  font-weight:700;
  background:#fff;
  box-sizing:border-box;
}
.listo-parking-calendar-nav--v616 a.today{
  width:auto;
  padding:0 13px;
}
.listo-parking-calendar-nav--v616 a:hover{
  border-color:#ff6a00;
  color:#ff6a00;
}
.listo-parking-month-grid--v616{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
}
.listo-parking-month-grid--v616 .listo-parking-month-dow{
  border:0;
  padding:7px 0;
  text-align:center;
  color:#71787b;
  font-size:12px;
  font-weight:700;
  text-transform:none;
}
.listo-parking-month-day--v616{
  min-height:72px;
  border:1px solid #e0e5e5;
  border-radius:9px;
  background:#f7fbfe;
  text-align:left;
  padding:9px;
  cursor:pointer;
  color:#1b2224;
  text-decoration:none;
  box-sizing:border-box;
}
.listo-parking-month-day--v616>span{
  display:block;
  font-weight:700;
  font-size:13px;
}
.listo-parking-month-day--v616 small{
  display:block;
  margin-top:9px;
  color:#5b7fa3;
  font-size:11px;
  line-height:1.2;
}
.listo-parking-month-day--v616.is-outside{
  background:#fafafa;
  color:#b4bbbd;
}
.listo-parking-month-day--v616.is-outside small{display:none}
.listo-parking-month-day--v616.is-available{background:#f3f9ff}
.listo-parking-month-day--v616.is-booked{background:#eef0f1;color:#72797c}
.listo-parking-month-day--v616.is-booked small{color:#72797c}
.listo-parking-month-day--v616.is-blocked{background:#fff4ed;border-color:#f2d7c3;color:#a85d00}
.listo-parking-month-day--v616.is-blocked small{color:#a85d00}
.listo-parking-month-day--v616.is-closed{background:#f7f8f8;color:#7b8488}
.listo-parking-month-day--v616.is-closed small{color:#7b8488}
.listo-parking-month-day--v616.is-today{
  box-shadow:inset 0 0 0 2px #ff6a00;
}
.listo-parking-month-day--v616.is-today>span{color:#ff6a00}
.listo-parking-month-day--v616.is-selected{
  background:#ff6a00;
  color:#fff;
  border-color:#ff6a00;
}
.listo-parking-month-day--v616.is-selected small{color:#fff !important}
.listo-parking-month-day--v616.is-selected,
.listo-parking-month-day--v616.is-selected *,
.listo-parking-month-day--v616.is-selected .listo-parking-month-day__rates span{color:#fff !important}
.listo-parking-month-day--v616.is-selected>span{color:#fff !important}
.listo-parking-month-day--v616.is-selected:hover{background:#ff6a00;border-color:#ff6a00}
.listo-parking-calendar-layout-v616.is-month-loading{pointer-events:none}
.listo-parking-calendar-layout-v616.is-month-transition-out{opacity:.35;transform:translateX(-8px);transition:opacity .14s ease,transform .14s ease}
.listo-parking-calendar-layout-v616.is-month-transition-in{opacity:0;transform:translateX(8px)}
.listo-parking-calendar-layout-v616{transition:opacity .18s ease,transform .18s ease}
.listo-parking-calendar-layout-v616.is-month-transition-in{transition:none}
.listo-parking-calendar-nav--v616 a[aria-busy="true"]{cursor:wait}
.listo-parking-calendar-nav--v616 a[aria-busy="true"]:focus{outline:none}
.listo-parking-month-day--v616:hover:not(.is-selected){
  background:#fffaf6;
  border-color:#ffd7bb;
}
.listo-parking-selected-day-v616{
  padding:22px;
  position:sticky;
  top:90px;
}
.listo-parking-selected-day-v616 .listo-parking-selected-day-v535__head{
  align-items:flex-start;
  margin-bottom:18px;
}
.listo-parking-selected-day-v616 .listo-parking-selected-day-v535__head h2{
  font-size:22px;
}
.listo-parking-selected-day-v616 .listo-parking-selected-day-v535__actions{
  flex-wrap:wrap;
  justify-content:flex-end;
}
.listo-parking-selected-day-v616 .listo-parking-selected-day-v535__summary{
  margin-top:0;
}
@media(max-width:900px){
  .listo-parking-calendar-layout-v616{
    grid-template-columns:1fr;
  }
  .listo-parking-selected-day-v616{
    position:static;
  }
}
@media(max-width:640px){
  .listo-parking-calendar-main-card{padding:16px}
  .listo-parking-calendar-head--v616{
    align-items:flex-start;
    flex-direction:column;
    margin-bottom:14px;
  }
  .listo-parking-calendar-head--v616 h2{font-size:20px}
  .listo-parking-calendar-head--v616 p{font-size:12px}
  .listo-parking-calendar-nav--v616{width:100%;justify-content:flex-end}
  .listo-parking-month-grid--v616{gap:4px}
  .listo-parking-month-grid--v616 .listo-parking-month-dow{font-size:10px;padding:6px 0}
  .listo-parking-month-day--v616{min-height:64px;padding:7px 6px;border-radius:8px}
  .listo-parking-month-day--v616>span{font-size:12px}
  .listo-parking-month-day--v616 small{font-size:9px;margin-top:7px}
  .listo-parking-selected-day-v616{padding:18px}
  .listo-parking-selected-day-v616 .listo-parking-selected-day-v535__head{flex-direction:column}
  .listo-parking-selected-day-v616 .listo-parking-selected-day-v535__actions{width:100%;justify-content:space-between}
}

/* NEXT618 — Keep Parking month navigation in-place and show both rates in each date. */
.listo-host-parking-calendar-v546 .listo-parking-calendar-main-card {
  transition: opacity .16s ease, transform .16s ease;
}
.listo-host-parking-calendar-v546 .listo-parking-calendar-main-card.is-month-transition-out {
  opacity: .45;
  transform: translateX(-6px);
}
.listo-host-parking-calendar-v546 .listo-parking-calendar-main-card.is-month-transition-in {
  opacity: 0;
  transform: translateX(6px);
  transition: none;
}
.listo-host-parking-calendar-v546.is-month-loading .listo-parking-calendar-nav--v616 a[aria-busy="true"] {
  cursor: wait;
}

.listo-parking-month-day--v616 .listo-parking-month-day__rates {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 7px;
  color: #5b7fa3;
  font-size: 10px;
  line-height: 1.15;
  white-space: nowrap;
}
.listo-parking-month-day--v616 .listo-parking-month-day__rates span {
  display: block;
}
.listo-parking-month-day--v616.is-selected .listo-parking-month-day__rates {
  color: #fff3e8;
}
.listo-parking-month-day--v616.is-booked .listo-parking-month-day__rates,
.listo-parking-month-day--v616.is-blocked .listo-parking-month-day__rates,
.listo-parking-month-day--v616.is-closed .listo-parking-month-day__rates {
  color: inherit;
}

@media (min-width: 901px) {
  .listo-parking-month-day--v616 {
    min-height: 82px;
  }
}

@media (max-width: 640px) {
  .listo-parking-month-day--v616 {
    min-height: 72px;
    padding: 7px 6px;
  }
  .listo-parking-month-day--v616 .listo-parking-month-day__rates {
    gap: 2px;
    margin-top: 6px;
    font-size: 8px;
  }
}

/* NEXT619 — Selecting a Parking calendar date is asynchronous and keeps both
 * workspace columns anchored in place. */
.listo-host-parking-calendar-v546 .listo-parking-calendar-main-card.is-date-transition-out,
.listo-host-parking-calendar-v546 .listo-parking-selected-day-v616.is-date-transition-out{
  opacity:.55;
  transition:opacity .12s ease;
}
.listo-host-parking-calendar-v546.is-month-loading .listo-parking-month-day--v616{
  cursor:wait;
}

/* ========================================================================== 
   NEXT620 — Parking Bookings scalable app workspace
   ========================================================================== */
.listo-parking-bookings-subtitle{margin:3px 0 0;color:#71808b;font-size:11px;line-height:1.4}
.listo-parking-bookings-attention{display:flex;align-items:center;gap:11px;margin:0 0 14px;padding:11px 13px;border:1px solid #ffe1bd;border-radius:14px;background:#fff9f2}
.listo-parking-bookings-attention__icon{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border-radius:9px;background:#ff6a00;color:#fff;font-size:13px;font-weight:900}
.listo-parking-bookings-attention>div:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:2px}
.listo-parking-bookings-attention strong{font-size:12px;color:#293640}
.listo-parking-bookings-attention span{font-size:10px;color:#778692}
.listo-parking-bookings-attention>a{margin-left:auto;white-space:nowrap;color:#d65a00;font-size:10px;font-weight:850;text-decoration:none}
.listo-parking-booking-filters--app{align-items:center}
.listo-parking-booking-filter-fields{align-items:center}
.listo-parking-booking-clear{align-self:center;color:#778692;font-size:10px;font-weight:800;text-decoration:none;white-space:nowrap;padding:0 3px}
.listo-parking-bookings-result-meta{display:flex;justify-content:space-between;align-items:center;min-height:24px;margin:-3px 2px 8px;color:#87939b;font-size:10px}
.listo-parking-bookings-result-meta strong{color:#42515b;font-size:11px}
.listo-parking-rental-card--app{display:block;padding:0;overflow:hidden}
.listo-parking-rental-card__body{display:grid;grid-template-columns:155px minmax(0,1fr) 90px;align-items:center;gap:18px;padding:15px 17px;color:inherit;text-decoration:none}
.listo-parking-rental-card__body:hover{color:inherit}
.listo-parking-rental-card__primary{padding-top:23px}
.listo-parking-rental-card__main p{margin:0 0 6px}
.listo-parking-rental-card__meta{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden}
.listo-parking-rental-card__meta>span{display:inline-flex;align-items:center;min-height:19px;padding:2px 6px;border-radius:999px;background:#f3f6f8;color:#65747e;font-size:9px;font-weight:800}
.listo-parking-rental-card__meta small{margin:0 0 0 auto;color:#96a0a7;font-size:9px;overflow:hidden;text-overflow:ellipsis}
.listo-parking-rental-card__actions{display:flex;gap:8px;padding:10px 17px;border-top:1px solid #edf1f4;background:#fbfcfd}
.listo-parking-rental-card__actions .listo-btn{min-height:34px;padding:7px 13px;border-radius:10px;font-size:10px}
.listo-parking-rental-card__actions.is-processing{opacity:.65}
.listo-parking-rental-card__status--pending_approval{background:#fff1dc;color:#a65d00}
.listo-parking-rental-card__status--pending_payment{background:#fff1dc;color:#a65d00}
.listo-parking-rental-card__status--confirmed{background:#e9f8ef;color:#108343}
.listo-parking-bookings-pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0 4px}
.listo-parking-bookings-pagination a{width:34px;height:34px;display:grid;place-items:center;border:1px solid #dfe6eb;border-radius:10px;background:#fff;color:#44545e;text-decoration:none;font-size:21px;line-height:1}
.listo-parking-bookings-pagination span{font-size:10px;font-weight:800;color:#73818b}
@media(max-width:1000px){
  .listo-parking-rental-card__body{grid-template-columns:140px minmax(0,1fr) 82px;gap:13px}
}
@media(max-width:760px){
  .listo-parking-bookings-subtitle{font-size:10px}
  .listo-parking-bookings-attention{align-items:flex-start;padding:10px}
  .listo-parking-bookings-attention>a{align-self:center}
  .listo-parking-booking-filter-fields{margin-top:9px}
  .listo-parking-booking-clear{grid-column:1 / -1;text-align:center;padding:3px 0}
  .listo-parking-bookings-result-meta{margin-top:0}
  .listo-parking-rental-card__body{grid-template-columns:minmax(0,1fr) auto;gap:9px 12px;padding:13px}
  .listo-parking-rental-card__primary{grid-column:1 / -1;padding-top:23px}
  .listo-parking-rental-card__main{grid-column:1}
  .listo-parking-rental-card__amount{grid-column:2;grid-row:2;align-self:end}
  .listo-parking-rental-card__meta{flex-wrap:wrap;white-space:normal}
  .listo-parking-rental-card__meta small{flex-basis:100%;margin-top:2px}
  .listo-parking-rental-card__actions{padding:9px 13px}
  .listo-parking-rental-card__actions .listo-btn{flex:1}
}

/* ========================================================================
   NEXT623 — AJAX-style Parking workspace navigation
   Navigation replaces only the Parking workspace without fading, translating,
   or otherwise moving the page. This keeps the interaction instantaneous and
   prevents the whole page from appearing to bounce.
   ======================================================================== */
.listo-host-parking-page-shell[aria-busy="true"] {
  cursor: progress;
}

/* NEXT624 — Parking Bookings title-size parity
 * Keep the Bookings page title on the same shared Host title scale as the
 * other Parking workspace pages. The icon remains 48px; only the H1 scale
 * is normalized here to prevent theme-level H1 rules from enlarging it.
 */
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-page-title-row--parking > h1 {
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-page-title-row--parking > h1 {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }
}


/* NEXT625 — Parking Bookings title uses the exact same direct-child title
 * structure as the Parking Dashboard so both pages inherit identical
 * typography from the shared Parking Host title system. */
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-page-title-row--parking > h1 {
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-page-title-row--parking > h1 {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }
}


/* NEXT631 — service-specific Parking payout settings and payout-event history */
.listo-host-parking-payout-settings-v631{border:1px solid #e5ebf0;border-radius:18px;background:#fff;padding:20px;margin:0 0 20px}.listo-host-parking-payout-settings-v631__head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px}.listo-host-parking-payout-settings-v631 h2{margin:0 0 5px;font-size:20px}.listo-host-parking-payout-settings-v631 p{margin:0;color:#68747f;font-size:13px;line-height:1.5}.listo-host-parking-payout-settings-v631__badge{padding:7px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}.listo-host-parking-payout-settings-v631__badge.is-ready{background:#e8f7ee;color:#18794e}.listo-host-parking-payout-settings-v631__badge.is-missing{background:#fff4d6;color:#8a5a00}.listo-host-parking-payout-schedule-v631{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.listo-host-parking-payout-option-v631{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid #dfe6eb;border-radius:14px;cursor:pointer}.listo-host-parking-payout-option-v631.is-selected{border-color:#2196F3;background:#f5faff}.listo-host-parking-payout-option-v631 input{position:absolute;opacity:0;pointer-events:none}.listo-host-parking-payout-option-v631__indicator{width:18px;height:18px;border:2px solid #b8c4ce;border-radius:50%;margin-top:2px;flex:0 0 18px;box-sizing:border-box}.listo-host-parking-payout-option-v631.is-selected .listo-host-parking-payout-option-v631__indicator{border:5px solid #2196F3}.listo-host-parking-payout-option-v631 strong,.listo-host-parking-payout-option-v631 small,.listo-host-parking-payout-option-v631 em{display:block}.listo-host-parking-payout-option-v631 strong{font-size:15px}.listo-host-parking-payout-option-v631 small{margin-top:4px;color:#68747f;line-height:1.45}.listo-host-parking-payout-option-v631 em{margin-top:7px;color:#2196F3;font-size:12px;font-style:normal;font-weight:700}.listo-host-parking-payout-settings-v631__actions{display:flex;align-items:center;gap:12px;margin-top:15px}.listo-host-parking-payout-settings-v631__actions span{color:#18794e;font-size:13px}.listo-host-parking-payout-destination-v631{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:18px;padding:14px 16px;border-radius:14px;background:#f8fafc}.listo-host-parking-payout-destination-v631 strong,.listo-host-parking-payout-destination-v631 span{display:block}.listo-host-parking-payout-destination-v631 span{margin-top:4px;color:#68747f;font-size:13px}.listo-host-parking-payout-destination-v631 a{color:#2196F3;font-weight:700;text-decoration:none;white-space:nowrap}.listo-host-parking-payout-batch-items-v631{display:grid;gap:6px;margin:12px 0;padding:12px;border-radius:12px;background:#f8fafc}.listo-host-parking-payout-batch-items-v631 strong{font-size:12px}.listo-host-parking-payout-batch-items-v631 span{font-size:12px;color:#68747f}.listo-parking-admin-batches{margin:0 0 18px;background:#fff;border:1px solid #d9e2ea;border-radius:10px;overflow:hidden}.listo-parking-admin-batches__head{padding:14px 16px;background:#f5faff;border-bottom:1px solid #d9e2ea}.listo-parking-admin-batches__head strong,.listo-parking-admin-batches__head span{display:block}.listo-parking-admin-batches__head span{margin-top:3px;color:#646970}.listo-parking-admin-batch{display:grid;grid-template-columns:1.1fr 1fr auto;gap:18px;align-items:center;padding:14px 16px;border-bottom:1px solid #edf1f4}.listo-parking-admin-batch:last-child{border-bottom:0}.listo-parking-admin-batch strong,.listo-parking-admin-batch span{display:block}.listo-parking-admin-batch span{margin-top:4px;color:#646970;font-size:12px}.listo-parking-admin-batch__missing{color:#b32d2e!important;font-weight:700}.listo-parking-admin-batch__action{white-space:nowrap}@media(max-width:700px){.listo-host-parking-payout-settings-v631__head,.listo-host-parking-payout-destination-v631{display:block}.listo-host-parking-payout-settings-v631__badge{display:inline-block;margin-top:12px}.listo-host-parking-payout-schedule-v631{grid-template-columns:1fr}.listo-host-parking-payout-destination-v631 a{display:inline-block;margin-top:10px}.listo-parking-admin-batch{grid-template-columns:1fr;gap:10px}.listo-parking-admin-batch__action{white-space:normal}.listo-parking-admin-batch__action .button{width:100%;text-align:center}}

/* ========================================================================
   NEXT646 — Logged-in mobile listing-detail marketplace navigation
   ------------------------------------------------------------------------
   On individual Stay listings, keep the primary account controls on the
   first header row and place the marketplace service navigation on its own
   compact, horizontally scrollable row below it. This mirrors the logged-in
   homepage mobile header treatment and prevents the category pills from
   competing with the logo / Become a Host / avatar controls.
   Desktop listing-detail behavior remains unchanged.
   ======================================================================== */
@media (max-width: 900px) {
  body.listo-logged-in .listo-header--listing-detail .listo-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 0;
    row-gap: 0;
    min-height: 0;
    padding: 10px 18px 8px;
    box-sizing: border-box;
    overflow: visible;
  }

  body.listo-logged-in .listo-header--listing-detail .listo-header__inner > .listo-logo {
    order: 1;
    flex: 0 0 auto;
    min-width: 0;
  }

  body.listo-logged-in .listo-header--listing-detail .listo-header__inner > .listo-header__account-group {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    max-width: calc(100% - 112px);
    min-width: 0;
    margin-left: auto;
    gap: 8px;
  }

  /* Re-enable the shared marketplace nav only for authenticated users on
     the listing-detail mobile header. It gets its own full-width row. */
  body.listo-logged-in .listo-header--listing-detail .listo-market-nav {
    display: flex !important;
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 33px;
    margin: 12px 0 2px;
    padding: 1px 1px 8px;
    box-sizing: content-box;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.listo-logged-in .listo-header--listing-detail .listo-market-nav::-webkit-scrollbar {
    display: none;
  }

  body.listo-logged-in .listo-header--listing-detail .listo-market-nav__item {
    flex: 0 0 auto;
    min-width: auto;
    width: auto;
    height: 33px;
    min-height: 33px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 9px;
    border: 1px solid #e1e4e7;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(26,26,26,.10), 0 1px 1px rgba(26,26,26,.04);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  body.listo-logged-in .listo-header--listing-detail .listo-market-nav__item:hover {
    background: #fff;
    color: var(--ink);
    transform: none;
  }

  body.listo-logged-in .listo-header--listing-detail .listo-market-nav__item.is-active {
    background: #f3f4f5;
    border-color: #d3d7db;
    color: var(--ink);
    transform: translateY(1px) scale(.985);
    box-shadow: inset 0 2px 5px rgba(26,26,26,.15), inset 0 0 0 1px rgba(26,26,26,.025), 0 1px 1px rgba(26,26,26,.04);
  }

  body.listo-logged-in .listo-header--listing-detail .listo-market-nav__item.is-active::after {
    display: none;
  }

  body.listo-logged-in .listo-header--listing-detail .listo-market-nav__icon,
  body.listo-logged-in .listo-header--listing-detail .listo-market-nav__icon img {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px;
    object-fit: contain;
  }

  body.listo-logged-in .listo-header--listing-detail .listo-market-nav__indicator {
    display: none !important;
  }
}

/* ========================================================================
   Search-results directory — NEXT649
   A map-free directory for browsing homes in a location. Desktop uses six
   cards per row to match the homepage density; mobile uses two columns.
   Server-side pagination keeps very large result sets bounded.
   ======================================================================== */
.listo-search-directory-page {
  width: 100%; min-width: 0; padding-top: 12px; padding-bottom: 56px;
}
.listo-search-results-heading {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-bottom: 18px; min-width: 0;
}
.listo-search-results-heading h1 {
  margin: 0; min-width: 0; color: var(--ink);
  font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15;
  font-weight: 700; letter-spacing: -.02em;
}
.listo-search-results-heading p {
  flex: 0 0 auto; margin: 0; color: var(--ink-muted);
  font-size: 13px; white-space: nowrap;
}
.listo-search-results-top-bar { width: 100%; min-width: 0; margin-bottom: 22px; }
.listo-filter-chips {
  display: flex; align-items: center; gap: 8px; overflow-x: auto;
  scrollbar-width: none; min-width: 0; padding: 2px 0 4px;
}
.listo-filter-chips::-webkit-scrollbar { display: none; }
.listo-filter-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 14px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); color: var(--ink);
  text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.listo-filter-chip:hover, .listo-filter-chip.is-active {
  border-color: var(--ink); background: var(--surface-alt);
}
.listo-search-results-list { width: 100%; min-width: 0; }
.listo-search-results-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 32px 18px; min-width: 0;
}
.listo-search-card { display: block; min-width: 0; color: inherit; text-decoration: none; }
.listo-search-card__image {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 14px; background: var(--surface-alt);
}
.listo-search-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.listo-search-card__body { padding-top: 10px; min-width: 0; }
.listo-search-card__title-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; min-width: 0;
}
.listo-search-card__title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 600;
}
.listo-search-card__rating {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; white-space: nowrap;
}
.listo-search-card__details, .listo-search-card__price, .listo-search-card__cancellation {
  margin-top: 4px; color: var(--ink-muted); font-size: 12px; line-height: 1.35;
}
.listo-search-card__price { color: var(--ink); }
.listo-search-card__price strong { font-weight: 700; }
.listo-search-card__cancellation { color: var(--ink); text-decoration: underline; }
.listo-pagination {
  display: flex; justify-content: center; gap: 8px; padding: 40px 0 8px;
}
.listo-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 999px; color: var(--ink);
  text-decoration: none; font-size: 13px; font-weight: 600;
}
.listo-pagination .page-numbers.current { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.listo-pagination .page-numbers:hover:not(.current) { background: var(--surface-alt); }
@media (max-width: 1149px) and (min-width: 901px) { .listo-search-results-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .listo-search-directory-page { padding-top: 8px; padding-bottom: 40px; }
  .listo-search-results-heading { display: block; margin-bottom: 14px; }
  .listo-search-results-heading h1 { font-size: 24px; }
  .listo-search-results-heading p { margin-top: 5px; font-size: 12px; }
  .listo-search-results-top-bar { margin-bottom: 18px; }
  .listo-filter-chip { min-height: 34px; padding: 0 12px; font-size: 12px; }
  .listo-search-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
  .listo-search-card__image { aspect-ratio: 1 / 1; border-radius: 12px; }
  .listo-search-card__body { padding-top: 8px; }
  .listo-search-card__title { font-size: 13px; }
  .listo-search-card__rating { font-size: 10px; }
  .listo-search-card__details, .listo-search-card__price, .listo-search-card__cancellation { font-size: 11px; }
  .listo-pagination { gap: 6px; padding: 34px 0 12px; flex-wrap: wrap; }
  .listo-pagination .page-numbers { min-width: 34px; height: 34px; padding: 0 9px; font-size: 12px; }
}
@media (max-width: 480px) {
  .listo-search-results-heading h1 { font-size: 22px; }
  .listo-search-results-grid { gap: 22px 10px; }
  .listo-search-card__image { border-radius: 11px; }
}

/* ========================================================================
   NEXT650 — Search directory alignment + origin-aware Back button
   ------------------------------------------------------------------------
   Center the result heading, result count and filter categories on both
   desktop and mobile. Add deliberate breathing room below the marketplace
   header and provide one consistent Back control for the results directory.
   ======================================================================== */
.listo-search-results-back-row {
  width: 100%;
  margin: 0 0 18px;
}
.listo-search-results-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
  box-shadow: 0 1px 3px rgba(26,26,26,.05);
}
.listo-search-results-back:hover { background: var(--surface-alt); }
.listo-search-results-back svg { width: 17px; height: 17px; flex: 0 0 auto; }
.listo-search-results-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 22px;
  text-align: center;
}
.listo-search-results-heading h1 { text-align: center; }
.listo-search-results-heading p { margin: 0; text-align: center; }
.listo-search-results-top-bar { display: flex; justify-content: center; width: 100%; }
.listo-filter-chips { justify-content: center; }

/* The previous mobile search bar contained a second, arrow-only Back link.
   NEXT650 provides the same Back action in the results content itself so
   desktop and mobile have one consistent control. */
.listo-search-bar-wrap .listo-search-back { display: none !important; }

@media (min-width: 901px) {
  .listo-search-directory-page { padding-top: 42px; }
}

@media (max-width: 900px) {
  .listo-search-directory-page { padding-top: 38px; }
  .listo-search-results-back-row { margin-bottom: 16px; }
  .listo-search-results-heading { display: flex; margin-bottom: 18px; }
  .listo-search-results-heading h1 { font-size: 24px; text-align: center; }
  .listo-search-results-heading p { margin-top: 0; font-size: 12px; }
  .listo-search-results-top-bar { justify-content: center; }
  .listo-filter-chips {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .listo-search-results-heading h1 { font-size: 22px; }
}

/* ==========================================================================
   NEXT653 — Scalable Parking marketplace directory
   Dense marketplace browsing on desktop, two-column scan-friendly cards on
   mobile, and server-side pagination for large inventories.
   ========================================================================== */
.listo-parking-directory-head {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:5px;
  margin:0 auto 26px;
}
.listo-parking-directory-head h1 {
  margin:0;
  color:var(--ink);
  font-size:clamp(24px, 2.5vw, 32px);
  line-height:1.15;
  letter-spacing:-.025em;
}
.listo-parking-directory-head p {
  margin:0;
  color:var(--ink-muted);
  font-size:14px;
}
.listo-parking-grid {
  grid-template-columns:repeat(6, minmax(0, 1fr));
  column-gap:16px;
  row-gap:30px;
}
.listo-parking-card__meta-row {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:8px;
}
.listo-parking-card__meta-row span {
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:4px 7px;
  border-radius:999px;
  background:#f2f5f7;
  color:#4e5963;
  font-size:10px;
  font-weight:650;
}
.listo-parking-pagination {
  display:flex;
  justify-content:center;
  margin:42px auto 0;
}
.listo-parking-pagination ul {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  list-style:none;
  margin:0;
  padding:0;
}
.listo-parking-pagination li { margin:0; padding:0; }
.listo-parking-pagination a,
.listo-parking-pagination span {
  display:grid;
  place-items:center;
  min-width:38px;
  height:38px;
  padding:0 11px;
  border:1px solid #e1e7ec;
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
}
.listo-parking-pagination .current {
  border-color:var(--listo-green);
  background:var(--listo-green);
  color:#fff;
}
.listo-parking-pagination a:hover { border-color:var(--listo-green); color:var(--listo-green-dark); }

@media (max-width:1199px) {
  .listo-parking-container { width:min(100% - 40px, 1120px); }
  .listo-parking-grid { grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width:820px) {
  .listo-parking-container { width:min(100% - 32px, 760px); }
  .listo-parking-content { padding-top:32px; }
  .listo-parking-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px 14px; }
  .listo-parking-directory-head { margin-bottom:22px; }
  .listo-parking-directory-head h1 { font-size:24px; }
  .listo-parking-card__body { padding-top:9px; }
  .listo-parking-card__body h3 { font-size:14px; }
  .listo-parking-card__location { font-size:12px; }
  .listo-parking-card__pricing-grid { gap:8px 12px; margin-top:8px; }
  .listo-parking-card__pricing-grid strong { font-size:14px; }
  .listo-parking-card__pricing-grid span { font-size:11px; }
  .listo-parking-card__hours { font-size:10.5px; }
  .listo-parking-card__meta-row span { font-size:9.5px; }
}
@media (max-width:560px) {
  .listo-parking-container { width:calc(100% - 24px); }
  .listo-parking-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 10px; }
  .listo-parking-card__media { aspect-ratio:4 / 3; border-radius:14px; }
  .listo-parking-directory-head h1 { font-size:22px; }
  .listo-parking-directory-head p { font-size:13px; }
  .listo-parking-pagination { margin-top:34px; }
  .listo-parking-pagination a,
  .listo-parking-pagination span { min-width:34px; height:34px; padding:0 8px; }
}


/* ==========================================================================
   NEXT654 — Parking discovery directory
   Location-based discovery rows on the Parking landing page. The landing
   page intentionally avoids a global title/count and exposes a maximum of
   eight spaces per location. Full location results retain pagination.
   ========================================================================== */
.listo-parking-location-directory{display:flex;flex-direction:column;gap:42px}
.listo-parking-location-row{min-width:0}
.listo-parking-location-row__head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin:0 0 16px}
.listo-parking-location-row__head h2{margin:0;color:var(--ink);font-size:22px;line-height:1.2;letter-spacing:-.02em}
.listo-parking-location-row__head a{flex:0 0 auto;color:var(--ink);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.listo-parking-location-row__head a:hover{color:var(--listo-green-dark)}
.listo-parking-location-row__track{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:18px;min-width:0}
.listo-parking-card__details{margin:6px 0 0;color:var(--ink-muted);font-size:11px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listo-parking-card__details span{display:inline}
.listo-parking-results-head{margin:0 0 26px;text-align:center}
.listo-parking-results-back{display:inline-block;margin-bottom:14px;color:var(--ink);font-size:13px;font-weight:700;text-decoration:none}
.listo-parking-results-head h1{margin:0;color:var(--ink);font-size:clamp(24px,2.5vw,32px);line-height:1.15;letter-spacing:-.025em}
@media (max-width:1399px){
  .listo-parking-location-row__track{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 16px}
}
@media (max-width:1100px){
  .listo-parking-location-row__track{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 14px}
}
@media (max-width:820px){
  .listo-parking-location-directory{gap:34px}
  .listo-parking-location-row__head{margin-bottom:13px}
  .listo-parking-location-row__head h2{font-size:19px}
  .listo-parking-location-row__head a{font-size:12px}
  .listo-parking-location-row__track{display:flex;overflow-x:auto;overflow-y:hidden;gap:12px;padding:0 1px 5px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .listo-parking-location-row__track::-webkit-scrollbar{display:none}
  .listo-parking-location-row__track>.listo-parking-card{flex:0 0 calc((100% - 12px)/2);width:calc((100% - 12px)/2);min-width:0;scroll-snap-align:start}
  .listo-parking-card__details{font-size:10px}
}
@media (max-width:560px){
  .listo-parking-location-directory{gap:30px}
  .listo-parking-location-row__head h2{font-size:18px}
  .listo-parking-location-row__track{gap:10px}
  .listo-parking-location-row__track>.listo-parking-card{flex-basis:calc((100% - 10px)/2);width:calc((100% - 10px)/2)}
}

/* ========================================================================
   NEXT655 — Parking directory card simplification
   Keep cards focused on title, pricing, and availability. Location and
   attribute/tag repetition is intentionally omitted because each card sits
   inside a location row. Pricing is presented as a simple three-line stack.
   ======================================================================== */
.listo-parking-card__body h3 {
  margin-bottom: 9px;
}
.listo-parking-card__pricing-grid {
  display: grid;
  gap: 5px;
  margin-top: 0;
}
.listo-parking-card__pricing-grid > div {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}
.listo-parking-card__pricing-grid span {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}
.listo-parking-card__pricing-grid strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
@media (max-width: 820px) {
  .listo-parking-card__body h3 { margin-bottom: 8px; }
  .listo-parking-card__pricing-grid { gap: 4px; }
  .listo-parking-card__pricing-grid span { font-size: 10.5px; }
  .listo-parking-card__pricing-grid strong { font-size: 13px; }
}


/* ========================================================================
   NEXT660 — CSS-first mobile marketplace hard-refresh protection
   ------------------------------------------------------------------------
   The public marketplace must render responsively from the viewport, not from
   JavaScript timing. A hard refresh / pull-to-refresh can restore the document
   before marketplace-nav.js has initialized, so the mobile shell is also
   explicitly scoped to the server's mobile hint. The normal @media rules
   remain authoritative for responsive browsers; this is a defensive layer
   for mobile user agents during document restoration.
   ======================================================================== */
@media (max-width: 900px) {
  body.listo-server-mobile .listo-header--marketplace {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  body.listo-server-mobile .listo-header--marketplace .listo-header__inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.listo-server-mobile .listo-header--marketplace .listo-header__marketplace-search,
  body.listo-server-mobile .listo-header--marketplace .listo-market-nav {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
}

/* A server-mobile document must never be forced into the desktop marketplace
   shell by a stale desktop-only transform/state class during restoration. */
body.listo-server-mobile .listo-header--marketplace.is-scrolled .listo-market-nav {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

@media (max-width: 900px) {
  body.listo-server-mobile .listo-header--marketplace.is-scrolled .listo-header__marketplace-search,
  body.listo-server-mobile .listo-header--marketplace.is-scrolled .listo-header__marketplace-search .listo-search-bar-wrap,
  body.listo-server-mobile .listo-header--marketplace.is-scrolled .listo-header__marketplace-search .listo-search-bar {
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
  }
}

/* ========================================================================
   NEXT661 — Parking directory card pricing typography and spacing
   Keep pricing values at the same visual size as the listing title while
   retaining bold emphasis. Stack the three specification rows with clear,
   compact vertical breathing room.
   ======================================================================== */
.listo-parking-card__pricing-grid {
  display: grid;
  gap: 0;
  margin-top: 0;
}
.listo-parking-card__pricing-grid > div {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}
.listo-parking-card__pricing-grid span,
.listo-parking-card__pricing-grid strong {
  font-size: 13px;
  line-height: 1.35;
}
.listo-parking-card__pricing-grid span {
  color: var(--ink-muted);
  font-weight: 400;
}
.listo-parking-card__pricing-grid strong {
  color: var(--ink);
  font-weight: 700;
}
@media (max-width: 820px) {
  .listo-parking-card__pricing-grid {
    gap: 0;
  }
  .listo-parking-card__pricing-grid span,
  .listo-parking-card__pricing-grid strong {
    font-size: 12px;
  }
}

/* ========================================================================
   NEXT666 — Logged-in homepage referral commission promotion
   ------------------------------------------------------------------------
   Reuses the logged-out signup-bonus card's visual language while sending
   signed-in members to the Referral Center to learn about referring hosts
   and guests for commission.
   ======================================================================== */
.listo-referral-inline-ad {
  display: none;
}

@media (max-width: 900px) {
  .listo-referral-inline-ad {
    width: 100%;
    min-height: 104px;
    margin: 0 0 18px;
    padding: 14px 14px 14px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    border: 1px solid rgba(26,26,26,.08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(0,0,0,.07);
    color: var(--ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    transform: translateX(0);
    transition: opacity .3s ease, box-shadow .2s ease, transform .2s ease;
    will-change: transform, opacity;
  }

  .listo-referral-inline-ad.is-visible {
    opacity: 1;
    animation: listo-signup-bonus-shake .72s cubic-bezier(.36,.07,.19,.97) .2s both;
  }

  .listo-referral-inline-ad:active {
    box-shadow: 0 2px 9px rgba(0,0,0,.08);
    transform: scale(.992);
  }

  .listo-referral-inline-ad__icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.12));
  }

  .listo-referral-inline-ad__copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }

  .listo-referral-inline-ad__headline {
    display: block;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
  }

  .listo-referral-inline-ad__subtext {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    color: #666;
  }

  .listo-referral-inline-ad__arrow {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    color: #777;
  }
}

@media (max-width: 380px) {
  .listo-referral-inline-ad {
    gap: 10px;
    padding-left: 13px;
    padding-right: 12px;
  }

  .listo-referral-inline-ad__icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 37px;
  }

  .listo-referral-inline-ad__headline {
    font-size: 17px;
  }

  .listo-referral-inline-ad__subtext {
    font-size: 13px;
  }
}

@media (min-width: 901px) {
  .listo-referral-inline-ad {
    width: min(760px, calc(100% - 32px));
    min-height: 104px;
    margin: 0 auto 20px;
    padding: 14px 18px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    border: 1px solid rgba(26,26,26,.08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(0,0,0,.07);
    color: var(--ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .listo-referral-inline-ad__icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.12));
  }

  .listo-referral-inline-ad__copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }

  .listo-referral-inline-ad__headline {
    display: block;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
  }

  .listo-referral-inline-ad__subtext {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    color: #666;
  }

  .listo-referral-inline-ad__arrow {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    color: #777;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .listo-referral-inline-ad.is-visible {
    animation: listo-signup-bonus-shake .72s cubic-bezier(.36,.07,.19,.97) .2s both;
  }
}

/* NEXT667 — Mobile Refund Activity card cleanup.
 * Keep refund activity readable on narrow screens: amount, status and details
 * no longer compete for the same row width. Desktop/tablet layout is untouched.
 */
@media (max-width: 700px) {
  .listo-refunds-table__row > summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 16px;
  }
  .listo-refunds-table__booking,
  .listo-refunds-table__amount,
  .listo-refunds-table__row > summary > .listo-status-badge,
  .listo-refunds-table__view {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
  .listo-refunds-table__amount {
    margin-top: 3px;
    font-size: 18px;
    line-height: 1.25;
  }
  .listo-refunds-table__row > summary > .listo-status-badge {
    justify-self: start;
    margin-top: 1px;
  }
  .listo-refunds-table__view {
    margin-top: 2px;
  }
}

@media (max-width: 380px) {
  .listo-refunds-table__row > summary { padding: 14px; }
  .listo-refunds-table__booking strong { font-size: 13px; }
  .listo-refunds-table__booking small { font-size: 11px; }
  .listo-refunds-table__amount { font-size: 17px; }
}

/* NEXT668 — Parking booking status tabs: secondary active treatment
   Keep strong orange for the primary Bookings workspace tab; use a light
   orange tint for the secondary status filter so the two navigation levels
   do not compete visually. */
.listo-parking-booking-tabs a.is-active{
  color:#c75b00;
  background:#fff3e8;
  border-color:#ffd9bf;
  box-shadow:none;
}
.listo-parking-booking-tabs a.is-active b{
  color:#c75b00;
  background:#fff;
}


/* NEXT669 — Parking Host mobile workspace pills preserve their canonical
   order. JavaScript centers the active pill and supplies edge padding so even
   Dashboard and Payouts can sit in the visual center without widening the page. */
@media (max-width: 900px) {
  .listo-host-parking-workspace-links {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* NEXT672 — Inbox vertical separation. One shared messaging engine,
   separate Staycation/Parking Inbox views. */
.listo-inbox__vertical-switcher {
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 14px 0;
  overflow-x:auto;
  scrollbar-width:none;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.listo-inbox__vertical-switcher::-webkit-scrollbar { display:none; }
.listo-inbox__vertical-tab {
  flex:0 0 auto;
  min-height:34px;
  padding:7px 14px;
  border:1px solid transparent;
  border-radius:999px 999px 0 0;
  background:transparent;
  color:var(--ink-muted);
  font-size:12px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
}
.listo-inbox__vertical-tab:hover { background:var(--surface-alt); color:var(--ink); }
.listo-inbox__vertical-tab.is-active {
  color:var(--listo-blue, #2196F3);
  background:#F3F8FF;
  border-color:#D7E9FA;
  border-bottom-color:#F3F8FF;
}
@media (max-width:800px) {
  .listo-inbox__vertical-switcher { padding:8px 10px 0; gap:5px; }
  .listo-inbox__vertical-tab { min-height:32px; padding:7px 12px; font-size:11.5px; }
}

/* ========================================================================
   NEXT677 — Unified Host Staycation/Parking title-level top spacing
   Keep the first page title at the same distance from the Host header across
   both service workspaces. This is layout-only; content and navigation are
   unchanged. The shared values intentionally mirror the Host canvas rhythm
   while neutralizing page-specific shell drift.
   ======================================================================== */
body[data-listo-mode="host"] .listo-main > .listo-container.listo-section,
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell {
  padding-top: 56px !important;
}

body[data-listo-mode="host"] .listo-main > .listo-container.listo-section > .listo-page-title-row:first-child,
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell > .listo-page-title-row:first-child {
  margin-top: 0 !important;
}

@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-main > .listo-container.listo-section,
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell {
    padding-top: 28px !important;
  }
}


/* NEXT679 — Restore Parking Host Inbox workspace pill and keep the Parking
   Inbox vertical tab on the same visual strength as the Staycation blue tab,
   using Listo's orange service color. */
.listo-host-parking-workspace-links a.is-active {
  border-color: #FF6A00;
  background: #FF6A00;
  color: #fff;
}
.listo-inbox__vertical-tab[data-inbox-vertical="parking"].is-active {
  color: #FF6A00;
  background: #FFF4EC;
  border-color: #FFD8BF;
  border-bottom-color: #FFF4EC;
}

/* ========================================================================
   NEXT680 — Parking Calendar & Pricing functional tabs + responsive calendar
   Mirrors the Staycation Calendar & Pricing information architecture while
   keeping Parking's orange visual identity and independent data workflow.
   ======================================================================== */
.listo-host-parking-calendar-v546.listo-calendar-pricing-page .listo-parking-cp-tabs{
  margin: 0 0 30px;
}
.listo-host-parking-calendar-v546.listo-calendar-pricing-page .listo-parking-cp-tabs a.is-active{
  color:#ff6a00;
  border-color:#ff6a00;
  background:transparent;
}
.listo-host-parking-calendar-v546.listo-calendar-pricing-page .listo-parking-cp-tabs a:hover{
  color:#ff6a00;
}
.listo-parking-cp-view[hidden]{display:none !important}
.listo-parking-cp-view{
  width:100%;
  box-sizing:border-box;
}
.listo-parking-cp-view--access.listo-cp-rules,
.listo-parking-cp-view--block.listo-cp-rules,
.listo-parking-cp-view--pricing.listo-cp-settings{
  margin-top:0;
}
.listo-parking-cp-panel-content{
  margin-top:4px;
}
.listo-parking-cp-view .listo-parking-manage-panel-v535__footer{
  margin-top:18px;
}
.listo-parking-cp-view .listo-parking-weekly-rows-v535{
  margin-top:4px;
}
.listo-parking-cp-existing-blocks{
  margin-top:28px;
}
.listo-parking-cp-existing-blocks h3{
  margin:0 0 12px;
  font-size:16px;
  color:#202729;
}
.listo-parking-cp-block-row{
  margin-bottom:10px;
  align-items:center;
}
.listo-parking-cp-block-row .listo-cp-rule-actions form{
  margin:0;
}
.listo-parking-cp-block-row .listo-cp-rule-actions button{
  border:0;
  background:none;
  cursor:pointer;
  color:#c84b4f;
  font:inherit;
  font-weight:700;
}
.listo-parking-cp-price-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  max-width:760px;
}
.listo-parking-cp-price-grid>label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:#5c6467;
}
.listo-parking-cp-price-grid>label>span{
  display:block;
  margin-bottom:8px;
}
.listo-parking-cp-price-grid>label>div{
  display:flex;
  height:48px;
  border:1px solid #d7dcde;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.listo-parking-cp-price-grid>label>div>b{
  width:44px;
  display:grid;
  place-items:center;
  background:#f6f8f8;
  color:#202729;
}
.listo-parking-cp-price-grid input{
  min-width:0;
  flex:1;
  border:0;
  outline:0;
  padding:0 12px;
  font:inherit;
  font-weight:700;
}
.listo-parking-cp-view--pricing .listo-parking-manage-panel-v535__footer{
  max-width:760px;
  display:flex;
  justify-content:flex-start;
}
.listo-parking-cp-view--pricing .listo-parking-manage-panel-v535__footer .listo-btn{
  min-width:150px;
}

/* The Parking calendar now uses the same desktop two-card composition as
   Staycation, while retaining the existing Parking availability data. */
.listo-host-parking-calendar-v546 .listo-parking-calendar-layout-v616{
  margin-bottom:0;
}
.listo-host-parking-calendar-v546 .listo-parking-calendar-main-card,
.listo-host-parking-calendar-v546 .listo-parking-selected-day-v616{
  border:1px solid #e4e7e8;
  border-radius:18px;
  background:#fff;
}
.listo-host-parking-calendar-v546 .listo-parking-calendar-main-card{
  padding:20px;
}
.listo-host-parking-calendar-v546 .listo-parking-selected-day-v616{
  padding:22px;
}
.listo-host-parking-calendar-v546 .listo-parking-selected-day-v535__summary{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.listo-parking-selected-day-v616 .listo-parking-selected-day-v535__summary .listo-parking-rate-summary{
  grid-column:auto;
}
.listo-parking-rate-summary strong{
  color:#202729;
}

@media (max-width:900px){
  .listo-host-parking-calendar-v546 .listo-parking-cp-tabs{
    margin-bottom:24px;
  }
  .listo-parking-cp-price-grid{
    max-width:none;
  }
}

@media (max-width:640px){
  /* Match Staycation's mobile tab treatment, but use two rows so all four
     Parking functions remain readable without horizontal scrolling. */
  .listo-host-parking-calendar-v546.listo-calendar-pricing-page .listo-parking-cp-tabs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    padding:0;
    border:0;
    margin:0 0 20px;
  }
  .listo-host-parking-calendar-v546.listo-calendar-pricing-page .listo-parking-cp-tabs a,
  .listo-host-parking-calendar-v546.listo-calendar-pricing-page .listo-parking-cp-tabs a.is-active{
    min-height:44px;
    padding:10px 6px;
    border:1px solid #d9dfe0;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:12px;
    line-height:1.2;
    box-sizing:border-box;
    color:#555d60;
    background:#fff;
  }
  .listo-host-parking-calendar-v546.listo-calendar-pricing-page .listo-parking-cp-tabs a.is-active{
    background:#ff6a00;
    border-color:#ff6a00;
    color:#fff;
  }
  .listo-parking-cp-price-grid{
    grid-template-columns:1fr;
  }
  .listo-parking-cp-view--pricing .listo-parking-manage-panel-v535__footer .listo-btn{
    width:100%;
  }
  .listo-parking-cp-block-row{
    align-items:flex-start;
    gap:10px;
  }
  .listo-parking-cp-block-row .listo-cp-rule-actions{
    flex:none;
  }

  /* Mobile calendar: show the date/status only. Detailed rates live in the
     selected-date card below the calendar, eliminating the desktop overflow
     visible when hourly + daily prices are rendered inside seven columns. */
  .listo-host-parking-calendar-v546 .listo-parking-month-grid--v616{
    gap:4px;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-grid--v616 .listo-parking-month-dow{
    font-size:10px;
    padding:6px 0;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616{
    min-height:52px;
    padding:7px 4px;
    border-radius:8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616>span{
    font-size:13px;
    line-height:1.2;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616 .listo-parking-month-day__rates{
    display:none !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616 small{
    margin-top:5px;
    font-size:8px;
    line-height:1.1;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-main-card{
    padding:14px;
  }
  .listo-host-parking-calendar-v546 .listo-parking-selected-day-v616{
    padding:18px;
  }
  .listo-host-parking-calendar-v546 .listo-parking-selected-day-v535__summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .listo-parking-rate-summary strong{
    font-size:12px;
  }
}

/* ========================================================================
   NEXT681 — Calendar & Pricing tab hierarchy + mobile selected-day actions
   The Calendar & Pricing tabs are navigation controls, not primary action
   buttons. Use a light orange active state for both Staycation and Parking.
   On mobile, keep the selected-date Today/status controls on one row.
   ======================================================================== */
.listo-calendar-pricing-page .listo-cp-tabs a.is-active,
.listo-calendar-pricing-page .listo-cp-tabs a.is-active:hover,
.listo-host-parking-calendar-v546.listo-calendar-pricing-page .listo-parking-cp-tabs a.is-active,
.listo-host-parking-calendar-v546.listo-calendar-pricing-page .listo-parking-cp-tabs a.is-active:hover {
  background: #FFF4EC !important;
  border-color: #FFD8BF !important;
  color: #D85F00 !important;
}

@media (max-width: 640px) {
  .listo-host-parking-calendar-v546 .listo-parking-selected-day-v616 .listo-parking-selected-day-v535__head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-selected-day-v616 .listo-parking-selected-day-v535__actions {
    width: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-selected-day-v616 .listo-parking-selected-day-v535__actions .listo-btn,
  .listo-host-parking-calendar-v546 .listo-parking-selected-day-v616 .listo-parking-selected-day-v535__status {
    flex: 0 0 auto !important;
  }
}

/* ========================================================================
   NEXT682 — Mobile Parking selected-day actions: Today + status side by side
   Keep the selected-day title on its own line, then render the Today and
   availability controls as a compact horizontal pair.
   ======================================================================== */
@media (max-width: 640px) {
  .listo-host-parking-calendar-v546 .listo-parking-selected-day-v616 .listo-parking-selected-day-v535__actions {
    display: grid !important;
    grid-template-columns: max-content max-content !important;
    width: max-content !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    justify-content: start !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-selected-day-v616 .listo-parking-selected-day-v535__actions .listo-btn,
  .listo-host-parking-calendar-v546 .listo-parking-selected-day-v616 .listo-parking-selected-day-v535__actions .listo-parking-selected-day-v535__status {
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    flex: none !important;
    white-space: nowrap !important;
  }
}

/* NEXT1024 — Cross-document workspace transition.
   Use the browser View Transition API where supported so switching between
   equivalent Staycation/Parking pages feels continuous instead of like a
   hard page reload. Falls back to the normal navigation automatically. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(.22,.8,.24,1);
}

::view-transition-old(listo-host-workspace-switcher),
::view-transition-new(listo-host-workspace-switcher) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(.22,.8,.24,1);
}

.listo-host-context-nav {
  view-transition-name: listo-host-workspace-switcher;
}

/* ========================================================================
   NEXT1023 — Host workspace switcher: sliding pill
   The Host workspace switcher is intentionally a single, obvious pill.
   The active surface slides between Staycation and Parking; there are no
   divider lines or secondary descriptors.
   ======================================================================== */
.listo-host-context-nav {
  padding: 14px 0 12px;
}
.listo-host-context-nav__inner {
  width: min(1180px, calc(100% - 48px));
  min-height: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listo-host-context-nav__switcher {
  position: relative;
  width: min(520px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: #f1f4f7;
  box-shadow: inset 0 0 0 1px rgba(28, 42, 54, .055), 0 2px 8px rgba(24, 45, 64, .06);
  overflow: hidden;
}
.listo-host-context-nav__switcher::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: #2196F3;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.10), inset 0 -1px 2px rgba(255,255,255,.18), 0 3px 9px rgba(33,150,243,.22);
  transform: translateX(0);
  transition: transform .24s cubic-bezier(.22,.8,.24,1), background-color .24s ease, box-shadow .24s ease;
}
.listo-host-context-nav__switcher:has(.listo-host-context-pill--parking.is-active)::before {
  transform: translateX(100%);
  background: #FFB300;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.10), inset 0 -1px 2px rgba(255,255,255,.18), 0 3px 9px rgba(255,179,0,.22);
}
.listo-host-context-pill {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 52px;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #53606b;
  background: #EEF1F4;
  text-decoration: none;
  font-size: 14px;
  font-weight: 750;
  transition: color .2s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.listo-host-context-pill:hover {
  background: #E6EBEF;
  color: #25313b;
}
.listo-host-context-pill.is-disabled,
.listo-host-context-pill.is-disabled:hover,
.listo-host-context-pill.is-disabled:active {
  cursor: default;
  pointer-events: none;
  color: #9aa4ad;
  background: #F4F6F8;
  box-shadow: none;
  transform: none;
  opacity: .72;
}
.listo-host-context-pill.is-disabled .listo-host-context-pill__icon {
  opacity: .62;
}
.listo-host-context-pill.is-active,
.listo-host-context-pill.is-active:hover {
  color: #fff;
  background: transparent;
}
.listo-host-context-pill:active {
  transform: scale(.985);
}
.listo-host-context-pill__icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  transition: transform .24s ease;
}
.listo-host-context-pill__icon svg { width: 24px; height: 24px; }
.listo-host-context-pill.is-active .listo-host-context-pill__icon {
  transform: scale(1.03);
}
.listo-host-context-pill__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  line-height: 1.15;
}
.listo-host-context-pill__copy strong {
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .listo-host-context-nav {
    padding: 10px 0 9px;
  }
  .listo-host-context-nav__inner {
    width: calc(100% - 24px);
  }
  .listo-host-context-nav__switcher {
    width: min(420px, 100%);
    padding: 4px;
    border-radius: 999px;
  }
  .listo-host-context-pill {
    min-height: 54px;
    padding: 7px 10px;
    gap: 7px;
    border-radius: 999px;
  }
  .listo-host-context-pill__icon,
  .listo-host-context-pill__icon svg {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
  .listo-host-context-pill__copy strong {
    font-size: 13.5px;
  }
}

/* NEXT686 — Uniform Back control for Staycation and Parking listing forms. */
.listo-listing-form__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 18px;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.listo-listing-form__back:hover,
.listo-listing-form__back:focus-visible {
  color: var(--ink);
}
.listo-listing-form__back span {
  font-size: 18px;
  line-height: 1;
}
.listo-parking-back {
  text-decoration: none;
}
@media (max-width: 700px) {
  .listo-listing-form__back {
    margin-bottom: 14px;
  }
}


/* NEXT688 — Parking Listings mobile search field alignment.
 * Keep the search control full-width inside the filter card on narrow/tablet mobile
 * layouts, even when the browser reports a wider CSS viewport.
 */
@media (max-width: 900px) {
  .listo-host-parking-listings-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    width: 100%;
    box-sizing: border-box;
  }
  .listo-host-parking-listings-search {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }
  .listo-host-parking-listings-search input {
    display: block;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 480px) {
  .listo-host-parking-listings-controls {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* NEXT689 — Parking Host Listings mobile search: explicit grid-area layout.
 * The search control must occupy the complete first row on mobile.  Use an
 * explicit grid area plus high-specificity selectors so legacy responsive
 * rules cannot collapse it back to a single column.
 */
@media (max-width: 900px) {
  body .listo-host-parking-listings .listo-host-parking-listings-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "parking-search parking-search"
      "parking-status parking-type"
      "parking-sort parking-apply" !important;
    align-items: end !important;
  }
  body .listo-host-parking-listings .listo-host-parking-listings-controls > .listo-host-parking-listings-search,
  body .listo-host-parking-listings .listo-host-parking-listings-controls > label.listo-host-parking-listings-search[data-listo-parking-search-control] {
    grid-area: parking-search !important;
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    inline-size: 100% !important;
    justify-self: stretch !important;
  }
  body .listo-host-parking-listings .listo-host-parking-listings-controls > .listo-host-parking-listings-filter:nth-of-type(2) {
    grid-area: parking-status !important;
  }
  body .listo-host-parking-listings .listo-host-parking-listings-controls > .listo-host-parking-listings-filter:nth-of-type(3) {
    grid-area: parking-type !important;
  }
  body .listo-host-parking-listings .listo-host-parking-listings-controls > .listo-host-parking-listings-sort {
    grid-area: parking-sort !important;
  }
  body .listo-host-parking-listings .listo-host-parking-listings-controls > .listo-btn {
    grid-area: parking-apply !important;
    grid-column: auto !important;
    width: 100% !important;
    justify-content: center !important;
  }
  body .listo-host-parking-listings .listo-host-parking-listings-controls > .listo-host-parking-listings-search input {
    display: block !important;
    width: 100% !important;
    inline-size: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 480px) {
  body .listo-host-parking-listings .listo-host-parking-listings-controls {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "parking-search"
      "parking-status"
      "parking-type"
      "parking-sort"
      "parking-apply" !important;
  }
}

/* NEXT1102 — Host workspace pills: muted inactive surface + system-color active surface.
   The active selector remains the same dimensional icon artwork; only the pill
   surface and label color change. The selected surface uses a subtle inset
   shadow so it reads as physically pressed. */
.listo-host-context-pill:not(.is-active) {
  background: #EEF1F4 !important;
  color: #53606b !important;
}
.listo-host-context-pill:not(.is-active):hover {
  background: #E6EBEF !important;
}
.listo-host-context-pill.is-active,
.listo-host-context-pill.is-active:hover {
  background: transparent !important;
  color: #fff !important;
}

/* ========================================================================
   NEXT691 — Actual dimensional Host Workspace system icons
   Replace the previous flat line-pictogram treatment with inline dimensional
   SVG illustrations. The light system-color backgrounds remain navigation
   surfaces; the icons themselves provide the 3D visual identity.
   ======================================================================== */
.listo-host-context-pill__icon {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  transform: translateY(0);
  filter: none !important;
  opacity: 1 !important;
  transition: transform .18s ease;
}
.listo-host-context-pill__icon::before {
  content: none;
}
.listo-host-context-pill__icon svg {
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  overflow: visible;
}
.listo-host-context-pill:not(.is-active) .listo-host-context-pill__icon {
  opacity: .72 !important;
  filter: saturate(.72) !important;
}
.listo-host-context-pill.is-active .listo-host-context-pill__icon {
  transform: translateY(-1px) scale(1.02);
}
.listo-host-context-pill:hover .listo-host-context-pill__icon {
  transform: translateY(-1px) scale(1.02);
}
.listo-host-context-pill:active .listo-host-context-pill__icon {
  transform: translateY(1px) scale(.99);
}
@media (max-width: 760px) {
  .listo-host-context-pill__icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .listo-host-context-pill__icon svg {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
}


/* NEXT696 — Scheduled Parking payout visibility and testing controls */
.listo-host-parking-upcoming-scheduled-v696{border:1px solid #dfe7ef;border-radius:18px;background:#fff;padding:20px;margin:0 0 20px}.listo-host-parking-upcoming-scheduled-v696__head h2{margin:0 0 5px;font-size:20px}.listo-host-parking-upcoming-scheduled-v696__head p{margin:0;color:#68747f;font-size:13px;line-height:1.5}.listo-host-parking-upcoming-scheduled-v696__list{display:grid;gap:12px;margin-top:16px}.listo-host-parking-upcoming-scheduled-v696__card{display:grid;grid-template-columns:1.1fr .7fr .9fr 1.7fr;gap:16px;align-items:start;padding:15px;border:1px solid #edf1f4;border-radius:14px;background:#f8fafc}.listo-host-parking-upcoming-scheduled-v696__card strong,.listo-host-parking-upcoming-scheduled-v696__card small,.listo-host-parking-upcoming-scheduled-v696__card span{display:block}.listo-host-parking-upcoming-scheduled-v696__card strong{margin-top:4px;font-size:15px}.listo-host-parking-upcoming-scheduled-v696__card small{margin-top:5px;color:#68747f;font-size:12px;line-height:1.4}.listo-host-parking-upcoming-scheduled-v696__card small.is-ready{color:#18794e;font-weight:700}.listo-host-parking-upcoming-scheduled-v696__label{text-transform:uppercase;letter-spacing:.04em;color:#7a8791;font-size:10px;font-weight:700}.listo-host-parking-upcoming-scheduled-v696__items{display:grid;gap:6px}.listo-host-parking-upcoming-scheduled-v696__items a{padding:8px 10px;border-radius:10px;background:#fff;color:inherit;text-decoration:none;border:1px solid #e5ebf0}.listo-host-parking-upcoming-scheduled-v696__items a:hover{border-color:#bfd8ef}.listo-host-parking-upcoming-scheduled-v696__items a span{font-weight:700;color:#2196F3}.listo-host-parking-upcoming-scheduled-v696__items a small{margin-top:3px}@media(max-width:900px){.listo-host-parking-upcoming-scheduled-v696__card{grid-template-columns:1fr 1fr}.listo-host-parking-upcoming-scheduled-v696__items{grid-column:1/-1}}@media(max-width:640px){.listo-host-parking-upcoming-scheduled-v696{padding:16px;border-radius:16px}.listo-host-parking-upcoming-scheduled-v696__card{grid-template-columns:1fr;gap:10px}.listo-host-parking-upcoming-scheduled-v696__items{grid-column:auto}}

/* NEXT698 — shared Scheduled Payout panel for Staycation + Parking */
.listo-scheduled-payout-panel{margin:0 0 20px;padding:20px;border:1px solid #dfe7ef;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.03)}
.listo-scheduled-payout-panel__header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.listo-scheduled-payout-panel__header>div{min-width:0}
.listo-scheduled-payout-panel__eyebrow{display:block;margin:0 0 5px;color:#2196F3;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.listo-scheduled-payout-panel h2{margin:0;font-size:20px;line-height:1.25;color:#111827}
.listo-scheduled-payout-panel__header p{margin:6px 0 0;max-width:780px;color:#68747f;font-size:13px;line-height:1.5}
.listo-scheduled-payout-panel__groups{display:grid;gap:12px;margin-top:16px}
.listo-scheduled-payout-panel__empty{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px dashed #d8e1ea;border-radius:14px;background:#f8fafc;color:#5f6b76}.listo-scheduled-payout-panel__empty strong{font-size:14px;color:#1f2937}.listo-scheduled-payout-panel__empty span{font-size:12px;line-height:1.5}
.listo-scheduled-payout-group{display:grid;grid-template-columns:1.08fr .68fr .88fr 1.55fr;gap:16px;align-items:start;padding:15px;border:1px solid #e7edf2;border-radius:14px;background:#f8fafc}
.listo-scheduled-payout-group>div>span,.listo-scheduled-payout-group__date>span{display:block;color:#7a8791;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.listo-scheduled-payout-group>div>strong,.listo-scheduled-payout-group__date>strong{display:block;margin-top:4px;color:#111827;font-size:15px;line-height:1.3}
.listo-scheduled-payout-group small{display:block;margin-top:5px;color:#68747f;font-size:12px;line-height:1.4}
.listo-scheduled-payout-group small.is-ready{color:#18794e;font-weight:700}
.listo-scheduled-payout-group__items{display:grid;gap:6px;min-width:0}
.listo-scheduled-payout-group__items>div,.listo-scheduled-payout-group__items>a{display:block;min-width:0;padding:8px 10px;border:1px solid #e3eaf0;border-radius:10px;background:#fff;color:inherit;text-decoration:none}
.listo-scheduled-payout-group__items>a:hover{border-color:#bfd8ef}
.listo-scheduled-payout-group__items strong{display:block;overflow:hidden;color:#2196F3;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.listo-scheduled-payout-group__items small{margin-top:2px;font-size:11px}
.listo-scheduled-payout-group__more{font-size:11px!important;color:#7a8791!important}
.listo-scheduled-payout-panel--parking{margin-top:0}

@media (max-width:980px){
  .listo-scheduled-payout-group{grid-template-columns:1fr 1fr;gap:12px}
  .listo-scheduled-payout-group__items{grid-column:1/-1}
}
@media (max-width:640px){
  .listo-scheduled-payout-panel{padding:16px;border-radius:16px;margin-bottom:14px}
  .listo-scheduled-payout-panel__header{display:block}
  .listo-scheduled-payout-panel__header .listo-btn{margin-top:12px;width:100%;justify-content:center}
  .listo-scheduled-payout-panel h2{font-size:18px}
  .listo-scheduled-payout-panel__header p{font-size:12px}
  .listo-scheduled-payout-group{grid-template-columns:1fr;gap:10px;padding:13px;border-radius:13px}
  .listo-scheduled-payout-group__items{grid-column:auto}
}

/* NEXT700 — Keep Scheduled Payouts directly after Total earned on the Staycation Dashboard. */
@media (min-width:701px) {
  .listo-dashboard-page .listo-scheduled-payout-panel--dashboard-desktop {
    margin-top:18px;
  }
  .listo-dashboard-page .listo-scheduled-payout-panel--dashboard-mobile {
    display:none !important;
  }
}
@media (max-width:700px) {
  .listo-dashboard-page .listo-scheduled-payout-panel--dashboard-desktop {
    display:none !important;
  }
  .listo-dashboard-page .listo-scheduled-payout-panel--dashboard-mobile {
    display:block;
    margin-bottom:0;
  }
}

/* NEXT723 — unified transaction service-level accounting panels */
.listo-service-attribution-panel{margin:24px 0;padding:22px;border:1px solid rgba(33,150,243,.14);border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.05)}
.listo-service-attribution-panel__header span{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin-bottom:4px}
.listo-service-attribution-panel__header h2{margin:0;font-size:20px;line-height:1.25;color:#0f172a}
.listo-service-attribution-panel__header p{margin:6px 0 0;color:#64748b;font-size:13px;line-height:1.55}
.listo-service-attribution-panel__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.listo-service-attribution-panel__grid>div{padding:15px;border-radius:14px;background:#f8fafc}
.listo-service-attribution-panel__grid span{display:block;font-size:12px;color:#64748b;font-weight:700}
.listo-service-attribution-panel__grid strong{display:block;margin-top:5px;font-size:20px;line-height:1.2;color:#0f172a}
.listo-service-attribution-panel__grid small{display:block;margin-top:6px;color:#64748b;font-size:11px;line-height:1.45}
.listo-service-attribution-panel__note{margin-top:14px;padding:12px 14px;border-radius:12px;background:#eff6ff;color:#334155;font-size:12px;line-height:1.5}
.listo-service-attribution-panel__note strong{color:#075985}
@media (max-width:900px){.listo-service-attribution-panel__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.listo-service-attribution-panel{padding:17px;margin:18px 0;border-radius:15px}.listo-service-attribution-panel__grid{grid-template-columns:1fr;gap:9px}.listo-service-attribution-panel__grid>div{padding:13px}.listo-service-attribution-panel__grid strong{font-size:18px}}

/* NEXT727 — Financial-first Host Dashboards */
.listo-financial-dashboard{margin:10px 0 42px;color:#0f172a}
.listo-financial-dashboard__header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 18px}
.listo-financial-dashboard__eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#64748b;margin-bottom:4px}
.listo-financial-dashboard__header h2{margin:0;font-size:32px;line-height:1.08;letter-spacing:-.03em}
.listo-financial-dashboard__controls{display:flex;align-items:center;gap:8px}
.listo-financial-dashboard__controls form{margin:0}
.listo-financial-dashboard__controls .listo-select{min-width:148px;height:42px;border-radius:14px}
.listo-financial-dashboard__download{width:42px;height:42px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:#0f172a;background:#fff;border:1px solid rgba(15,23,42,.08);box-shadow:0 5px 18px rgba(15,23,42,.05);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.listo-financial-dashboard__download:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(15,23,42,.08)}
.listo-financial-dashboard__download svg{width:18px;height:18px}
.listo-financial-dashboard__text-link{font-size:13px;font-weight:800;color:#1677c8;text-decoration:none;white-space:nowrap}
.listo-financial-dashboard__text-link:hover{text-decoration:underline}
.listo-financial-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:26px 28px;border-radius:24px;background:linear-gradient(135deg,#f4f9ff 0%,#fff 78%);border:1px solid rgba(33,150,243,.12);box-shadow:0 10px 28px rgba(15,23,42,.05);margin-bottom:12px}
.listo-financial-hero>div>span{display:block;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#64748b}
.listo-financial-hero strong{display:block;margin-top:4px;font-size:clamp(38px,5vw,58px);line-height:1;letter-spacing:-.045em}
.listo-financial-hero small{display:block;margin-top:8px;font-size:12px;color:#64748b}
.listo-financial-status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:20px;overflow:hidden;box-shadow:0 6px 20px rgba(15,23,42,.035);margin-bottom:12px}
.listo-financial-status>div{padding:18px 20px;border-right:1px solid rgba(15,23,42,.07)}
.listo-financial-status>div:last-child{border-right:0}
.listo-financial-status span{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#64748b}
.listo-financial-status strong{display:block;margin-top:5px;font-size:23px;line-height:1.12;letter-spacing:-.02em}
.listo-financial-status small{display:block;margin-top:5px;font-size:11px;color:#94a3b8}
.listo-financial-section{padding:22px 24px;background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:20px;box-shadow:0 6px 20px rgba(15,23,42,.035);margin-bottom:12px}
.listo-financial-section__heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.listo-financial-section__heading span{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.listo-financial-section__heading h3{margin:4px 0 0;font-size:19px;line-height:1.25;letter-spacing:-.02em}
.listo-financial-breakdown{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.listo-financial-breakdown>div{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;border-top:1px solid rgba(15,23,42,.07)}
.listo-financial-breakdown>div:first-child,.listo-financial-breakdown>div:nth-child(2){border-top:0;padding-top:0}
.listo-financial-breakdown__label{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:#334155}
.listo-financial-breakdown>div>strong{font-size:18px;line-height:1.1;letter-spacing:-.015em}
.listo-financial-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 10px;background:#2196F3}
.listo-financial-dot--blue{background:#2196F3}
.listo-financial-dot--orange{background:#e87516}
.listo-financial-note{margin:16px 0 0;padding-top:13px;border-top:1px solid rgba(15,23,42,.07);font-size:11px;line-height:1.5;color:#64748b}
.listo-financial-payout-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0 2px;border-top:1px solid rgba(15,23,42,.07)}
.listo-financial-payout-row>div{display:flex;align-items:baseline;gap:12px;min-width:0}
.listo-financial-payout-row strong{font-size:26px;line-height:1.1;letter-spacing:-.025em}
.listo-financial-payout-row span{font-size:13px;font-weight:700;color:#475569}
.listo-financial-payout-row small{font-size:11px;color:#64748b;text-align:right}
.listo-financial-callout{display:grid;grid-template-columns:1fr auto;gap:5px 18px;padding:15px 16px;border-radius:14px;border:1px solid rgba(245,158,11,.2);background:#fffaf0}
.listo-financial-callout strong{font-size:13px}
.listo-financial-callout span{font-size:11px;color:#64748b}
.listo-financial-callout a{grid-row:1 / span 2;grid-column:2;align-self:center;font-size:12px;font-weight:800;color:#9a5d00;text-decoration:none;white-space:nowrap}
.listo-financial-empty{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0 2px;border-top:1px solid rgba(15,23,42,.07)}
.listo-financial-empty strong{font-size:13px}
.listo-financial-empty span{font-size:11px;color:#64748b;text-align:right}
.listo-financial-dashboard--parking .listo-financial-hero{background:linear-gradient(135deg,#fff7f0 0%,#fff 78%);border-color:rgba(232,117,22,.14)}
.listo-financial-dashboard--parking .listo-financial-dot--blue{background:#2196F3}
.listo-financial-dashboard--parking .listo-financial-dot--orange{background:#e87516}

/* NEXT735 — Parking Dashboard service accent
   Keep the exact shared Dashboard icon geometry/position, but use the Parking
   orange service accent for the icon only. The title typography remains shared. */
body[data-listo-mode="host"] .listo-main .listo-financial-dashboard--parking .listo-financial-dashboard__header .listo-page-title-row .listo-page-title__icon {
  background: #e87516 !important;
  color: #ffffff !important;
}

/* NEXT732 — Dashboard title/control parity
   Staycation and Parking dashboards intentionally share the exact same title
   row, icon geometry, control dimensions, and horizontal alignment. */
body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 0 18px !important;
  gap: 18px !important;
}
body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header .listo-page-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: auto !important;
  margin: 0 !important;
}
body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header .listo-page-title-row > h1 {
  margin: 0 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header .listo-page-title-row .listo-page-title__icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  flex: 0 0 48px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}
body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header .listo-page-title-row .listo-page-title__icon svg {
  width: 23px !important;
  height: 23px !important;
}
body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header .listo-financial-dashboard__controls {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
}
body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header .listo-financial-dashboard__controls form {
  margin: 0 !important;
}
body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header .listo-financial-dashboard__controls .listo-select {
  min-width: 148px !important;
  height: 42px !important;
  border-radius: 14px !important;
}
body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header .listo-financial-dashboard__download {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header .listo-financial-dashboard__download svg {
  width: 18px !important;
  height: 18px !important;
}
@media (max-width: 640px) {
  body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header {
    align-items: flex-start !important;
    margin-bottom: 12px !important;
    gap: 10px !important;
  }
  body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header .listo-page-title-row {
    gap: 10px !important;
  }
  body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header .listo-page-title-row > h1 {
    font-size: 22px !important;
  }
  body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header .listo-page-title-row .listo-page-title__icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex-basis: 40px !important;
    border-radius: 12px !important;
  }
  body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header .listo-page-title-row .listo-page-title__icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header .listo-financial-dashboard__controls {
    gap: 6px !important;
    flex: 0 0 auto !important;
  }
  body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header .listo-financial-dashboard__controls .listo-select {
    min-width: 112px !important;
    height: 38px !important;
    font-size: 12px !important;
    padding-left: 10px !important;
    padding-right: 28px !important;
    border-radius: 12px !important;
  }
  body[data-listo-mode="host"] .listo-main .listo-financial-dashboard__header .listo-financial-dashboard__download {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 12px !important;
  }
}

/* The previous analytics remain in the template as the detailed financial
   source of truth, but the Host dashboard intentionally exposes only the
   simplified financial view above. Full transaction detail stays in Payouts. */
.listo-dashboard-page > .listo-earnings__header,
.listo-dashboard-page > .listo-payout-reminder-banner,
.listo-dashboard-page > .listo-dashboard-desktop-analytics,
.listo-dashboard-page > .listo-dashboard-mobile-analytics,
.listo-dashboard-page > .listo-earnings-grid{display:none !important}
.listo-host-parking-dashboard > .listo-page-title-row--parking,
.listo-host-parking-dashboard > .listo-host-parking-workspace-links,
.listo-host-parking-dashboard > .listo-host-parking-dashboard-toolbar,
.listo-host-parking-dashboard > .listo-host-parking-dashboard-metrics,
.listo-host-parking-dashboard > .listo-scheduled-payout-panel,
.listo-host-parking-dashboard > .listo-host-parking-dashboard-context-note,
.listo-host-parking-dashboard > .listo-service-attribution-panel,
.listo-host-parking-dashboard > .listo-host-parking-dashboard-next{display:none !important}

@media (max-width:900px){
  .listo-financial-dashboard{margin-top:8px}
  .listo-financial-dashboard__header h2{font-size:28px}
}
@media (max-width:640px){
  .listo-financial-dashboard{margin:2px 0 28px}
  .listo-financial-dashboard__header{align-items:flex-start;margin-bottom:12px}
  .listo-financial-dashboard__eyebrow{font-size:10px}
  .listo-financial-dashboard__header h2{font-size:25px}
  .listo-financial-dashboard__controls{gap:6px}
  .listo-financial-dashboard__controls .listo-select{min-width:112px;height:38px;font-size:12px;padding-left:10px;padding-right:28px;border-radius:12px}
  .listo-financial-dashboard__download{width:38px;height:38px;border-radius:12px}
  .listo-financial-hero{align-items:flex-start;padding:21px 18px 19px;border-radius:19px;gap:14px}
  .listo-financial-hero strong{font-size:42px}
  .listo-financial-hero small{font-size:11px;max-width:220px}
  .listo-financial-hero .listo-financial-dashboard__text-link{padding-top:3px}
  .listo-financial-status{grid-template-columns:1fr;border-radius:17px}
  .listo-financial-status>div{padding:14px 16px;border-right:0;border-bottom:1px solid rgba(15,23,42,.07)}
  .listo-financial-status>div:last-child{border-bottom:0}
  .listo-financial-status strong{font-size:21px}
  .listo-financial-section{padding:18px 17px;border-radius:17px}
  .listo-financial-section__heading{margin-bottom:14px}
  .listo-financial-section__heading h3{font-size:17px}
  .listo-financial-breakdown{grid-template-columns:1fr;gap:0}
  .listo-financial-breakdown>div,.listo-financial-breakdown>div:first-child,.listo-financial-breakdown>div:nth-child(2){padding:12px 0;border-top:1px solid rgba(15,23,42,.07)}
  .listo-financial-breakdown>div:first-child{border-top:0;padding-top:0}
  .listo-financial-breakdown>div>strong{font-size:17px}
  .listo-financial-payout-row{display:block}
  .listo-financial-payout-row>div{justify-content:space-between;gap:10px}
  .listo-financial-payout-row small{display:block;margin-top:8px;text-align:left}
  .listo-financial-callout{grid-template-columns:1fr;gap:6px}
  .listo-financial-callout a{grid-row:auto;grid-column:auto;justify-self:start;margin-top:3px}
  .listo-financial-empty{display:block}
  .listo-financial-empty span{display:block;margin-top:5px;text-align:left}
}

/* ========================================================================
   NEXT738 — Unified Host task navigation
   Keep the Host Workspace selector as the primary context control, then use
   one shared, non-pill task navigation row for both Staycation and Parking.
   Staycation-only tools live inside the More dropdown.
   ======================================================================== */
.listo-host-primary-nav {
  width: 100%;
  padding: 2px 0 10px;
}
.listo-host-primary-nav__inner {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: visible;
  scrollbar-width: none;
}
.listo-host-primary-nav__inner::-webkit-scrollbar { display: none; }
.listo-host-primary-nav__item,
.listo-host-primary-nav__more > summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 13px 10px;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: #566575;
  text-decoration: none;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.listo-host-primary-nav__item::after,
.listo-host-primary-nav__more > summary::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 1px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
}
.listo-host-primary-nav__item:hover,
.listo-host-primary-nav__more > summary:hover {
  color: #1f3448;
  background: #f7f9fb;
}
.listo-host-primary-nav__item:focus-visible,
.listo-host-primary-nav__more > summary:focus-visible {
  outline: 2px solid rgba(33, 150, 243, .35);
  outline-offset: 2px;
}
.listo-host-primary-nav__item.is-active,
.listo-host-primary-nav__more.is-active > summary {
  color: #15263d;
}
.listo-host-primary-nav__item.is-active::after,
.listo-host-primary-nav__more.is-active > summary::after {
  background: #2196F3;
}
.listo-host-primary-nav__more {
  position: relative;
  flex: 0 0 auto;
}
.listo-host-primary-nav__more > summary {
  list-style: none;
  gap: 6px;
}
.listo-host-primary-nav__more > summary::-webkit-details-marker { display: none; }
.listo-host-primary-nav__more > summary span.listo-host-primary-nav__chevron {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-top: -3px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease, margin-top .18s ease;
  opacity: .82;
}
.listo-host-primary-nav__more[open] > summary {
  background: #f7f9fb;
  color: #1f3448;
}
.listo-host-primary-nav__more[open] > summary span.listo-host-primary-nav__chevron {
  margin-top: 3px;
  transform: rotate(225deg);
}
.listo-host-primary-nav__menu {
  position: absolute;
  z-index: 1000;
  top: calc(100% - 1px);
  right: 0;
  min-width: 190px;
  padding: 7px;
  border: 1px solid #e0e7ed;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(30, 48, 65, .14);
}
.listo-host-primary-nav__menu a {
  display: block;
  padding: 9px 11px;
  border-radius: 9px;
  color: #334556;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
}
.listo-host-primary-nav__menu a:hover {
  background: #f5f8fb;
  color: #162a3d;
}
.listo-host-context-nav:has(.listo-host-context-pill--parking.is-active) .listo-host-primary-nav__item.is-active::after,
.listo-host-context-nav:has(.listo-host-context-pill--parking.is-active) .listo-host-primary-nav__more.is-active > summary::after {
  background: #ff6a00;
}
@media (max-width: 760px) {
  .listo-host-primary-nav {
    padding: 1px 0 8px;
  }
  .listo-host-primary-nav__inner {
    width: calc(100% - 24px);
    justify-content: flex-start;
    gap: 1px;
    padding-bottom: 2px;
    overflow-x: auto;
    overflow-y: visible;
  }
  .listo-host-primary-nav__item,
  .listo-host-primary-nav__more > summary {
    min-height: 34px;
    padding: 6px 9px 9px;
    border-radius: 8px 8px 0 0;
    font-size: 12px;
  }
  .listo-host-primary-nav__item::after,
  .listo-host-primary-nav__more > summary::after {
    left: 8px;
    right: 8px;
  }
  .listo-host-primary-nav__menu {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    margin-top: 0;
    min-width: 0;
  }
}


/* NEXT758 — Review Reservation: quiet, app-like hierarchy.
 * This page is a reservation review, not a payment checkout. Keep the
 * visual system deliberately restrained so the interface can scale as
 * Parking, extras and other booking components are added. */
.listo-review-flow {
  width: min(100%, 820px);
  margin: 0 auto;
}
.listo-review-property {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--border, #e4e7eb);
}
.listo-review-property img {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  object-fit: cover;
  border-radius: 12px;
}
.listo-review-property__copy h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 750;
  letter-spacing: -.2px;
}
.listo-review-property__copy p {
  margin: 5px 0 0;
  color: var(--ink-muted, #667085);
  font-size: 13px;
  line-height: 1.45;
}
.listo-review-section {
  padding: 24px 0;
  border-bottom: 1px solid var(--border, #e4e7eb);
}
.listo-review-section h2 {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 750;
  letter-spacing: -.1px;
}
.listo-review-trip-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(120px, .7fr) minmax(120px, .7fr);
  gap: 20px;
}
.listo-review-trip-grid > div { min-width: 0; }
.listo-review-label {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-muted, #667085);
  font-size: 12px;
  line-height: 1.3;
}
.listo-review-trip-grid strong {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 650;
  color: var(--ink, #111827);
}
.listo-review-section__heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.listo-review-section__heading-row h2 { margin-bottom: 16px; }
.listo-review-section__heading-row a {
  color: #2196F3;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.listo-review-section__heading-row a:hover { text-decoration: underline; }
.listo-review-section--selections[hidden] { display: none !important; }
.listo-review-selection-group {
  padding: 0 0 14px;
  margin: 0 0 14px;
  border-bottom: 1px solid #edf0f2;
}
.listo-review-selection-group:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.listo-checkout-selection-group {
  padding: 0;
  border: 0;
  gap: 7px;
}
.listo-checkout-selection-group > strong {
  font-size: 14px;
  line-height: 1.4;
}
.listo-checkout-selection-group > .listo-caption {
  margin: 0 0 2px;
}
.listo-review-section--price .listo-checkout-price-breakdown {
  font-size: 14px;
}
.listo-review-section--price .listo-checkout-price-breakdown > div {
  margin-bottom: 10px;
}
.listo-review-section--price .listo-checkout-total-row {
  margin-top: 18px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: var(--ink, #111827);
  font-size: 18px;
  font-weight: 750;
}
.listo-review-section--price .listo-checkout-total-row span:last-child {
  font-variant-numeric: tabular-nums;
}
.listo-review-price-detail {
  margin: -4px 0 10px;
  color: var(--ink-muted, #667085);
  font-size: 12px;
  line-height: 1.45;
}
.listo-review-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-muted, #667085);
  font-size: 12px;
  cursor: pointer;
  vertical-align: -1px;
}
.listo-review-payment-note {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 0 4px;
  color: var(--ink-muted, #667085);
  font-size: 13px;
  line-height: 1.5;
}
.listo-review-payment-note strong {
  color: var(--ink, #111827);
  font-weight: 700;
}
.listo-review-actions {
  width: min(100%, 440px);
  margin: 20px auto 0;
  text-align: center;
}
.listo-review-actions .listo-checkout-reserve-btn {
  width: 100%;
  min-height: 50px;
  margin: 0;
  font-size: 15px;
}
.listo-review-back {
  display: inline-block;
  margin-top: 13px;
  color: var(--ink-muted, #667085);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.listo-review-back:hover { color: var(--ink, #111827); text-decoration: underline; }
.listo-review-flow .listo-checkout-contact-note {
  margin-top: 18px;
}
.listo-review-flow .listo-field-error {
  margin-top: 12px;
}
@media (max-width: 700px) {
  .listo-checkout { padding-left: 16px; padding-right: 16px; }
  .listo-review-flow { width: 100%; }
  .listo-review-property { gap: 12px; padding-bottom: 18px; }
  .listo-review-property img { width: 64px; height: 64px; flex-basis: 64px; border-radius: 10px; }
  .listo-review-property__copy h2 { font-size: 16px; }
  .listo-review-property__copy p { font-size: 12px; }
  .listo-review-section { padding: 20px 0; }
  .listo-review-section h2 { font-size: 16px; margin-bottom: 14px; }
  .listo-review-trip-grid { grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .listo-review-trip-grid > div:first-child { grid-column: 1 / -1; }
  .listo-review-trip-grid strong { font-size: 14px; }
  .listo-review-payment-note { font-size: 12px; padding-top: 16px; }
  .listo-review-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    width: calc(100% + 32px);
    margin-left: -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.97);
    border-top: 1px solid #e4e7eb;
    box-shadow: 0 -5px 18px rgba(16,24,40,.06);
    box-sizing: border-box;
    backdrop-filter: blur(8px);
  }
  .listo-review-actions .listo-checkout-reserve-btn { min-height: 48px; }
  .listo-review-back { margin-top: 8px; font-size: 12px; }
}

/* NEXT759 — reservation-flow mobile header and guest-count consistency. */
@media (max-width: 900px) {
  /* Reservation review/payment is a focused transaction flow. Keep the
     mobile header quiet; marketplace service navigation remains available
     elsewhere on mobile. */
  body.page-template-template-checkout .listo-market-nav {
    display: none !important;
  }
}


/* NEXT765 — Emphasize guest-selectable Parking and simplify Optional add-ons.
 * Parking uses the Listo brand blue outline; Optional add-ons retain their
 * existing green treatment. Both sections remain conditional and only render
 * when the listing actually offers them. */
.listo-single-main .listo-public-parking--emphasized {
    margin: 24px 0 0;
    padding: 22px 24px;
    border: 2px solid #2196F3;
    border-radius: 16px;
    background: #fff;
    box-sizing: border-box;
}
.listo-single-main .listo-public-parking--emphasized .listo-public-parking__title {
    margin: 0;
}
.listo-single-main .listo-public-parking--emphasized .listo-public-parking__subtitle {
    margin-top: 6px;
}
.listo-single-main .listo-public-parking--emphasized .listo-public-parking__summary {
    margin-top: 14px;
}
@media (max-width: 700px) {
    .listo-single-main .listo-public-parking--emphasized {
        margin-top: 20px;
        padding: 18px 16px;
        border-radius: 15px;
    }
}

/* NEXT765 — keep the add-ons emphasis while removing the redundant
 * explanatory paragraph from the guest-facing listing. */
.listo-single-main .listo-public-addons__title {
    margin-bottom: 0;
}

/* NEXT766 — Inline reservation editing. Keep editing lightweight and native;
 * the Review page remains a review surface, not a second checkout form. */
.listo-review-edit-link {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: #2196F3;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.listo-review-edit-link:hover { text-decoration: underline; }
.listo-review-inline-editor {
  margin-top: 4px;
  padding: 16px;
  border: 1px solid #dfe4e8;
  border-radius: 12px;
  background: #fafbfc;
}
.listo-review-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.listo-review-edit-grid label,
.listo-review-editor-label { display: flex; flex-direction: column; gap: 6px; }
.listo-review-edit-grid label > span,
.listo-review-editor-label { color: #667085; font-size: 12px; font-weight: 650; }
.listo-review-edit-grid input,
.listo-review-editor-label select {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  background: #fff;
  color: #111827;
  font: inherit;
  box-sizing: border-box;
}
.listo-review-edit-guests {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e8ebee;
  color: #344054;
  font-size: 13px;
  font-weight: 650;
}
.listo-review-stepper { display: inline-flex; align-items: center; gap: 12px; }
.listo-review-stepper button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #d0d5dd;
  border-radius: 50%;
  background: #fff;
  color: #111827;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.listo-review-stepper button:disabled { opacity: .4; cursor: default; }
.listo-review-stepper strong { min-width: 18px; text-align: center; font-size: 14px; }
.listo-review-edit-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.listo-review-edit-actions .listo-btn { min-height: 42px; }
.listo-review-edit-cancel {
  border: 0;
  background: transparent;
  color: #667085;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.listo-review-edit-error { display: none; margin: 12px 0 0; color: #b42318; font-size: 12px; line-height: 1.45; }
.listo-review-edit-error.is-visible { display: block; }
.listo-review-empty-selection { margin: 0; color: #667085; font-size: 13px; }
.listo-review-promo-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.listo-review-promo-row input[type="text"] {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  font-size: 14px;
}
.listo-review-promo-row .listo-btn { min-height: 44px; white-space: nowrap; }
.listo-review-promo-message {
  margin: 8px 0 0;
  min-height: 18px;
  font-size: 12px;
  line-height: 1.45;
  color: #667085;
}
.listo-review-wallet-balance {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #667085;
}
.listo-review-wallet-balance strong { color: #111827; font-weight: 700; }
.listo-review-wallet-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.listo-review-wallet-field { flex: 1; min-width: 0; }
.listo-review-wallet-field input[type="number"] {
  width: 100%;
  min-height: 44px;
  margin-top: 5px;
  padding: 10px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  font-size: 14px;
  box-sizing: border-box;
}
@media (max-width: 700px) {
  .listo-review-promo-row { flex-direction: column; }
  .listo-review-promo-row .listo-btn { width: 100%; }
  .listo-review-wallet-row { flex-direction: column; align-items: stretch; }
}
.listo-review-editor-group + .listo-review-editor-group { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e8ebee; }
.listo-review-editor-group > strong { display: block; margin-bottom: 10px; font-size: 14px; }
.listo-review-edit-options { display: grid; gap: 8px; margin-top: 12px; }
.listo-review-edit-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid #e1e5e9;
  border-radius: 9px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}
.listo-review-edit-option input { margin-top: 2px; }
.listo-review-edit-option small { display: block; margin-top: 2px; color: #667085; font-size: 11px; }
.listo-review-editor-addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #e8ebee;
}
.listo-review-editor-addon:last-child { border-bottom: 0; }
.listo-review-editor-addon > div:first-child { min-width: 0; }
.listo-review-editor-addon strong { display: block; font-size: 13px; }
.listo-review-editor-addon small { display: block; margin-top: 3px; color: #667085; font-size: 11px; }
.listo-review-editor-addon .listo-review-stepper { flex: 0 0 auto; }
@media (max-width: 700px) {
  .listo-review-inline-editor { padding: 14px; }
  .listo-review-edit-grid { grid-template-columns: 1fr; }
  .listo-review-edit-actions { flex-direction: column; align-items: stretch; }
  .listo-review-edit-actions .listo-btn { width: 100%; }
  .listo-review-edit-cancel { min-height: 36px; }
}

/* NEXT769 — harden the mobile transaction header.
 * Earlier marketplace/mobile rules use !important and appear later in the
 * stylesheet, so the original transaction-clean rule could be overridden on
 * review/checkout pages. Keep these reservation-flow pages focused on mobile:
 * no marketplace service navigation or marketplace search shell. Desktop
 * navigation remains unchanged.
 */
@media (max-width: 900px) {
  .listo-header--transaction-clean .listo-market-nav,
  .listo-header--transaction-clean .listo-header__marketplace-search,
  body.listo-server-mobile .listo-header--transaction-clean .listo-market-nav,
  body.listo-server-mobile .listo-header--transaction-clean .listo-header__marketplace-search {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .listo-header--transaction-clean .listo-header__inner,
  body.listo-server-mobile .listo-header--transaction-clean .listo-header__inner {
    min-height: 64px !important;
  }
}


/* NEXT771 — Host Bookings request workspace: clear task-oriented desktop/mobile treatment. */
.listo-host-bookings-request-grid .listo-trip-card {
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  align-items:center;
  gap:18px;
  min-height:132px;
  padding:14px 16px;
  border:1px solid #fed7aa;
  background:#fffaf5;
  border-radius:16px;
  box-shadow:0 4px 14px rgba(146,84,15,.05);
}
.listo-host-bookings-request-grid .listo-trip-card__photo { width:150px; height:104px; border-radius:12px; }
.listo-host-bookings-request-grid .listo-host-bookings-card__body { min-width:0; }
.listo-host-bookings-request-grid .listo-trip-card__title { font-size:17px; line-height:1.25; margin-bottom:5px; }
.listo-host-bookings-request-grid .listo-caption { font-size:13px; line-height:1.45; }
.listo-host-booking-request-timer {
  display:flex;
  align-items:baseline;
  gap:9px;
  margin-top:10px;
  color:#7c4a03;
}
.listo-host-booking-request-timer__label { font-size:11px; font-weight:700; color:#8a6a36; }
.listo-host-booking-request-timer strong { font-size:14px; font-weight:800; color:#b45309; }
.listo-host-booking-request-timer.is-expired strong { color:#b42318; }
.listo-booking-request-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.listo-booking-request-actions .listo-btn { min-width:112px; min-height:40px; }
.listo-host-request-expired { opacity:.78; }
.listo-host-request-expired .listo-booking-request-actions .listo-btn { cursor:not-allowed; }

@media (max-width: 720px) {
  .listo-host-bookings-request-grid .listo-trip-card {
    grid-template-columns:82px minmax(0,1fr);
    gap:11px;
    align-items:start;
    min-height:0;
    padding:10px;
    border-radius:13px;
  }
  .listo-host-bookings-request-grid .listo-trip-card__photo { width:82px; height:82px; border-radius:10px; }
  .listo-host-bookings-request-grid .listo-trip-card__title { font-size:14px; }
  .listo-host-bookings-request-grid .listo-caption { font-size:11.5px; }
  .listo-host-booking-request-timer { display:block; margin-top:9px; }
  .listo-host-booking-request-timer__label { display:block; margin-bottom:2px; }
  .listo-host-booking-request-timer strong { font-size:13px; }
  .listo-booking-request-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
  .listo-booking-request-actions .listo-btn { width:100%; min-width:0; min-height:40px; padding:8px 7px; }
}

/* NEXT773 — Host Bookings lifecycle sections + responsive card grids. */
.listo-host-bookings-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.listo-host-bookings-summary__item--pending strong { color: #155E9C; }
.listo-host-bookings-section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin: 26px 0 10px;
  padding: 0 2px 11px;
  border-bottom:1px solid var(--border);
}
.listo-host-bookings-section-heading h2 { margin:0; font-size:20px; letter-spacing:-.01em; }
.listo-host-bookings-section-heading p { margin:4px 0 0; }
.listo-host-bookings-pending-section { margin-bottom: 24px; }
.listo-host-bookings-pending-grid,
.listo-host-bookings-request-grid,
.listo-host-bookings-main-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.listo-host-bookings-pending-grid .listo-trip-card,
.listo-host-bookings-request-grid .listo-trip-card,
.listo-host-bookings-main-grid .listo-trip-card { min-width:0; }
.listo-bookings-filter-hidden { display:none !important; }

@media (max-width: 980px) {
  .listo-host-bookings-summary { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .listo-host-bookings-pending-grid,
  .listo-host-bookings-request-grid,
  .listo-host-bookings-main-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .listo-host-bookings-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .listo-host-bookings-pending-grid,
  .listo-host-bookings-request-grid,
  .listo-host-bookings-main-grid { grid-template-columns: 1fr; }
  .listo-host-bookings-section-heading { align-items:flex-start; margin-top:20px; }
  .listo-host-bookings-section-heading h2 { font-size:18px; }
}


/* NEXT774 — Host Bookings pending lifecycle + direct-to-Host payment UI. */
.listo-host-bookings-summary { grid-template-columns:repeat(5,minmax(0,1fr)); }
.listo-host-bookings-summary__item--pending strong { color:#2196F3; }
.listo-host-bookings-pending-grid,
.listo-host-bookings-request-grid,
.listo-host-bookings-main-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.listo-host-bookings-pending-grid .listo-trip-card { border-color:#d7e8f6; background:#fff; }
.listo-host-bookings-pending-grid .listo-status-badge--awaiting_confirmation { color:#1976D2; background:#EAF5FF; }
@media (max-width:980px) {
  .listo-host-bookings-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .listo-host-bookings-pending-grid,
  .listo-host-bookings-request-grid,
  .listo-host-bookings-main-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .listo-host-bookings-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .listo-host-bookings-pending-grid,
  .listo-host-bookings-request-grid,
  .listo-host-bookings-main-grid { grid-template-columns:1fr; }
  .listo-host-bookings-section-heading { align-items:flex-start; }
}

/* NEXT775 — Host Bookings card fit correction.
 * The two-column lifecycle layout remains intact, but Pending/booking cards
 * use a tighter internal layout so titles, dates, references, statuses and
 * payment actions fit cleanly inside each desktop column and remain readable
 * on mobile. This is presentation-only.
 */
.listo-host-bookings-pending-grid .listo-trip-card,
.listo-host-bookings-main-grid .listo-trip-card {
  grid-template-columns: 118px minmax(0,1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 11px;
  box-sizing: border-box;
}
.listo-host-bookings-pending-grid .listo-trip-card__photo,
.listo-host-bookings-main-grid .listo-trip-card__photo {
  width: 118px;
  height: 92px;
  min-width: 0;
  border-radius: 11px;
  box-sizing: border-box;
}
.listo-host-bookings-pending-grid .listo-host-bookings-card__body,
.listo-host-bookings-main-grid .listo-host-bookings-card__body {
  min-width: 0;
  width: 100%;
  padding: 1px 0;
  box-sizing: border-box;
}
.listo-host-bookings-pending-grid .listo-trip-card__title,
.listo-host-bookings-main-grid .listo-trip-card__title {
  font-size: 15px;
  line-height: 1.28;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.listo-host-bookings-pending-grid .listo-caption,
.listo-host-bookings-main-grid .listo-caption {
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.listo-host-bookings-pending-grid .listo-status-badge,
.listo-host-bookings-main-grid .listo-status-badge {
  display: inline-flex;
  max-width: 100%;
  margin: 2px 4px 2px 0;
  white-space: normal;
  line-height: 1.2;
  vertical-align: top;
}
.listo-host-bookings-pending-grid .listo-v745-host-payment-actions {
  margin-top: 8px !important;
  padding: 10px !important;
}
.listo-host-bookings-pending-grid .listo-v745-host-payment-actions strong {
  font-size: 13px;
}
.listo-host-bookings-pending-grid .listo-v745-host-payment-actions .listo-caption {
  font-size: 11.5px;
}
.listo-host-bookings-pending-grid .listo-v745-host-payment-actions .listo-btn {
  min-height: 36px;
  padding: 7px 9px;
  font-size: 12px;
}

@media (max-width: 900px) and (min-width: 701px) {
  .listo-host-bookings-pending-grid .listo-trip-card,
  .listo-host-bookings-main-grid .listo-trip-card {
    grid-template-columns: 100px minmax(0,1fr);
    gap: 10px;
    padding: 10px;
  }
  .listo-host-bookings-pending-grid .listo-trip-card__photo,
  .listo-host-bookings-main-grid .listo-trip-card__photo {
    width: 100px;
    height: 84px;
  }
  .listo-host-bookings-pending-grid .listo-trip-card__title,
  .listo-host-bookings-main-grid .listo-trip-card__title {
    font-size: 14px;
  }
  .listo-host-bookings-pending-grid .listo-caption,
  .listo-host-bookings-main-grid .listo-caption {
    font-size: 11.5px;
  }
}

@media (max-width: 700px) {
  .listo-host-bookings-pending-grid .listo-trip-card,
  .listo-host-bookings-main-grid .listo-trip-card {
    grid-template-columns: 72px minmax(0,1fr);
    gap: 10px;
    padding: 9px;
    border-radius: 13px;
  }
  .listo-host-bookings-pending-grid .listo-trip-card__photo,
  .listo-host-bookings-main-grid .listo-trip-card__photo {
    width: 72px;
    height: 72px;
    border-radius: 10px;
  }
  .listo-host-bookings-pending-grid .listo-trip-card__title,
  .listo-host-bookings-main-grid .listo-trip-card__title {
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 3px;
  }
  .listo-host-bookings-pending-grid .listo-caption,
  .listo-host-bookings-main-grid .listo-caption {
    font-size: 11px;
    line-height: 1.35;
  }
  .listo-host-bookings-pending-grid .listo-status-badge,
  .listo-host-bookings-main-grid .listo-status-badge {
    font-size: 11px;
    padding: 4px 7px;
    margin-top: 3px;
  }
  .listo-host-bookings-pending-grid .listo-v745-host-payment-actions {
    grid-column: 1 / -1;
    margin-top: 4px !important;
  }
  .listo-host-bookings-pending-grid .listo-v745-host-payment-actions .listo-btn {
    width: 100%;
    margin: 0 0 6px !important;
  }
  .listo-host-bookings-pending-grid .listo-v745-host-payment-actions .listo-btn:last-of-type {
    margin-bottom: 0 !important;
  }
}

/* NEXT776 — Host Bookings workspace UI refactor.
 * Status-aware cards, structurally isolated media/content columns, and
 * responsive action layouts. Presentation only; transaction state is unchanged.
 */
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item {
  position:relative;
  min-width:0;
  min-height:78px;
  padding:13px 15px 11px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item span {
  font-size:11px;
  line-height:1.2;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item strong {
  margin-top:5px;
  font-size:24px;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item small {
  display:block;
  margin-top:4px;
  color:var(--ink-muted);
  font-size:10px;
  line-height:1.2;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item--attention {
  border-color:#f3d8b8;
  background:#fffaf5;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item--pending {
  border-color:#d8e9f7;
  background:#fbfdff;
}

.listo-host-bookings-controls .listo-bookings-filter {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}
.listo-bookings-filter__count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#e8edf1;
  color:#5d6972;
  font-size:10px;
  font-weight:800;
  line-height:1;
}
.listo-host-bookings-controls .listo-bookings-filter.is-active .listo-bookings-filter__count {
  background:rgba(255,255,255,.22);
  color:#fff;
}

/* Request cards are action cards: the media column is fixed and the content
 * column is explicitly allowed to shrink. This prevents long listing titles
 * from ever painting over the image or action area. */
.listo-host-bookings-request-grid {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-items:stretch;
}
.listo-host-bookings-request-grid .listo-trip-card {
  display:grid !important;
  grid-template-columns:136px minmax(0,1fr) !important;
  gap:14px !important;
  align-items:stretch;
  min-width:0 !important;
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
  padding:12px !important;
}
.listo-host-bookings-request-grid .listo-trip-card__photo {
  width:136px !important;
  min-width:136px !important;
  height:112px !important;
  border-radius:11px;
  overflow:hidden;
}
.listo-host-bookings-request-grid .listo-trip-card__photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.listo-host-bookings-request-grid .listo-host-bookings-card__body {
  min-width:0 !important;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  overflow:hidden;
}
.listo-host-bookings-request-grid .listo-trip-card__title {
  min-width:0;
  max-width:100%;
  margin:0 0 4px;
  font-size:17px;
  line-height:1.25;
  overflow-wrap:anywhere;
  word-break:normal;
}
.listo-host-bookings-request-grid .listo-caption {
  min-width:0;
  max-width:100%;
  font-size:12.5px;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.listo-host-booking-card__kicker {
  margin:0 0 6px;
  color:var(--ink-muted);
  font-size:10px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.listo-host-booking-card__kicker--request { color:#b45309; }
.listo-host-booking-card__kicker--pending { color:#1976d2; }
.listo-host-booking-card__kicker--upcoming { color:#4f6878; }
.listo-host-booking-card__kicker--past { color:#7a858d; }
.listo-host-booking-request-timer {
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid rgba(180,83,9,.12);
}
.listo-host-booking-request-timer__label {
  flex:0 0 auto;
  font-size:10px;
  font-weight:800;
  color:#8a6a36;
}
.listo-host-booking-request-timer strong {
  min-width:0;
  font-size:14px;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.listo-booking-request-actions {
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:7px;
  width:100%;
  margin-top:auto !important;
  padding-top:11px;
}
.listo-booking-request-actions .listo-btn {
  width:100%;
  min-width:0 !important;
  min-height:40px;
  padding:8px 10px;
}

/* Regular lifecycle cards use the same fixed media/content contract. */
.listo-host-bookings-pending-grid .listo-trip-card,
.listo-host-bookings-main-grid .listo-trip-card {
  grid-template-columns:112px minmax(0,1fr) !important;
  gap:12px !important;
  min-width:0 !important;
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.listo-host-bookings-pending-grid .listo-trip-card__photo,
.listo-host-bookings-main-grid .listo-trip-card__photo {
  width:112px !important;
  min-width:112px !important;
  height:96px !important;
  border-radius:11px;
  overflow:hidden;
}
.listo-host-bookings-pending-grid .listo-host-bookings-card__body,
.listo-host-bookings-main-grid .listo-host-bookings-card__body {
  min-width:0 !important;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.listo-host-bookings-pending-grid .listo-trip-card__title,
.listo-host-bookings-main-grid .listo-trip-card__title {
  max-width:100%;
  font-size:15.5px;
  line-height:1.28;
  overflow-wrap:anywhere;
}
.listo-host-bookings-pending-grid .listo-caption,
.listo-host-bookings-main-grid .listo-caption {
  max-width:100%;
  font-size:12px;
  line-height:1.38;
  overflow-wrap:anywhere;
}
.listo-host-booking-card--pending {
  border-color:#d7e8f6 !important;
  background:#fbfdff !important;
}
.listo-host-booking-card--upcoming {
  border-color:#e0e7eb;
}
.listo-host-booking-card--past {
  background:#fcfcfd !important;
  border-color:#e6eaed !important;
  box-shadow:none !important;
}
.listo-host-booking-card--past .listo-trip-card__photo {
  opacity:.92;
}
.listo-host-bookings-main-grid .listo-status-badge,
.listo-host-bookings-pending-grid .listo-status-badge {
  display:inline-flex;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.2;
  vertical-align:top;
}
.listo-host-bookings-pending-grid .listo-v745-host-payment-actions {
  width:100%;
  box-sizing:border-box;
  margin-top:10px !important;
  padding:10px !important;
  overflow:hidden;
}
.listo-host-bookings-pending-grid .listo-v745-host-payment-actions .listo-btn {
  max-width:100%;
  white-space:normal;
}

@media (max-width:1100px) and (min-width:701px) {
  .listo-host-bookings-request-grid .listo-trip-card {
    grid-template-columns:112px minmax(0,1fr) !important;
    gap:11px !important;
  }
  .listo-host-bookings-request-grid .listo-trip-card__photo {
    width:112px !important;
    min-width:112px !important;
    height:100px !important;
  }
  .listo-host-bookings-request-grid .listo-trip-card__title { font-size:15px; }
  .listo-host-bookings-request-grid .listo-caption { font-size:11.5px; }
}

@media (max-width:700px) {
  .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item {
    min-height:70px;
    padding:11px 12px 10px;
  }
  .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item strong { font-size:21px; }
  .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item small { font-size:9.5px; }

  .listo-host-bookings-request-grid,
  .listo-host-bookings-pending-grid,
  .listo-host-bookings-main-grid {
    grid-template-columns:1fr !important;
  }
  .listo-host-bookings-request-grid .listo-trip-card {
    grid-template-columns:84px minmax(0,1fr) !important;
    gap:10px !important;
    padding:9px !important;
    border-radius:13px;
  }
  .listo-host-bookings-request-grid .listo-trip-card__photo {
    width:84px !important;
    min-width:84px !important;
    height:84px !important;
    border-radius:10px;
  }
  .listo-host-bookings-request-grid .listo-trip-card__title {
    font-size:14px;
    line-height:1.28;
  }
  .listo-host-bookings-request-grid .listo-caption { font-size:11.5px; }
  .listo-host-booking-card__kicker { font-size:9.5px; margin-bottom:5px; }
  .listo-host-booking-request-timer {
    display:block;
    margin-top:8px;
    padding-top:8px;
  }
  .listo-host-booking-request-timer__label { display:block; margin-bottom:2px; }
  .listo-host-booking-request-timer strong { font-size:13px; }
  .listo-booking-request-actions {
    grid-template-columns:1fr 1fr;
    gap:6px;
    padding-top:9px;
  }

  .listo-host-bookings-pending-grid .listo-trip-card,
  .listo-host-bookings-main-grid .listo-trip-card {
    grid-template-columns:76px minmax(0,1fr) !important;
    gap:10px !important;
    padding:9px !important;
    border-radius:13px;
  }
  .listo-host-bookings-pending-grid .listo-trip-card__photo,
  .listo-host-bookings-main-grid .listo-trip-card__photo {
    width:76px !important;
    min-width:76px !important;
    height:76px !important;
    border-radius:10px;
  }
  .listo-host-bookings-pending-grid .listo-trip-card__title,
  .listo-host-bookings-main-grid .listo-trip-card__title { font-size:13.5px; }
  .listo-host-bookings-pending-grid .listo-caption,
  .listo-host-bookings-main-grid .listo-caption { font-size:11px; }
  .listo-host-bookings-pending-grid .listo-v745-host-payment-actions {
    grid-column:1 / -1;
    margin-top:4px !important;
  }
  .listo-host-bookings-pending-grid .listo-v745-host-payment-actions .listo-btn {
    width:100%;
    margin:0 0 6px !important;
  }
  .listo-host-bookings-pending-grid .listo-v745-host-payment-actions .listo-btn:last-of-type { margin-bottom:0 !important; }
}

@media (max-width:420px) {
  .listo-host-bookings-request-grid .listo-trip-card {
    grid-template-columns:68px minmax(0,1fr) !important;
    gap:9px !important;
  }
  .listo-host-bookings-request-grid .listo-trip-card__photo {
    width:68px !important;
    min-width:68px !important;
    height:68px !important;
  }
  .listo-host-bookings-request-grid .listo-trip-card__title { font-size:13.5px; }
  .listo-host-bookings-pending-grid .listo-trip-card,
  .listo-host-bookings-main-grid .listo-trip-card {
    grid-template-columns:68px minmax(0,1fr) !important;
    gap:9px !important;
  }
  .listo-host-bookings-pending-grid .listo-trip-card__photo,
  .listo-host-bookings-main-grid .listo-trip-card__photo {
    width:68px !important;
    min-width:68px !important;
    height:68px !important;
  }
}

/* NEXT1069 — Payment Details: exact shared Host payment profile for Staycation + Parking. */
.listo-payment-details-page {
  width:100%;
  max-width:none;
  box-sizing:border-box;
}
.listo-payment-details-page > .listo-page-title-row {
  margin:0 0 0 !important;
  gap:0 !important;
}
.listo-payment-details-page > .listo-page-title-row > h1 {
  margin:0 !important;
  font-size:24px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  letter-spacing:normal;
}
.listo-payment-details-page > .listo-page-intro {
  max-width:760px;
  margin:6px 0 22px !important;
  color:var(--ink-muted,#667085);
  font-size:14px !important;
  font-weight:400;
  line-height:1.5 !important;
}
.listo-payment-details-card {
  width:100%;
  box-sizing:border-box;
  border:1px solid #e4e7ec;
  border-radius:14px;
  background:#fff;
  padding:24px;
}
.listo-payment-details-card__header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid #eaecf0;
}
.listo-payment-details-card__header h2 {
  margin:0 0 5px;
  font-size:18px;
  line-height:1.35;
  font-weight:600;
  color:#101828;
}
.listo-payment-details-card__header .listo-caption { max-width:760px; margin:0; }
.listo-payment-status-pill--required {
  background:#fff8eb !important;
  color:#b54708 !important;
  border-color:#fedf89 !important;
}
.listo-payment-details-notice {
  display:flex;
  flex-direction:column;
  gap:3px;
  margin:18px 0 0;
  padding:13px 15px;
  border:1px solid #fedf89;
  border-radius:10px;
  background:#fffcf5;
  color:#7a2e0e;
  font-size:13px;
  line-height:1.5;
}
.listo-payment-details-notice strong { color:#7a2e0e; }
.listo-payment-details-view { margin-top:22px; }
.listo-payment-details-summary {
  max-width:760px;
  border:1px solid #e4e7ec;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.listo-payment-details-summary__row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:54px;
  padding:12px 16px;
  border-bottom:1px solid #eaecf0;
}
.listo-payment-details-summary__row:last-child { border-bottom:0; }
.listo-payment-details-summary__row span { color:#667085; font-size:13px; }
.listo-payment-details-summary__row strong { color:#101828; font-size:14px; font-weight:600; text-align:right; }
.listo-payment-details-qr-section {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:28px;
  align-items:start;
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid #eaecf0;
}
.listo-payment-details-qr-section h3,
.listo-payment-details-edit-heading h3 {
  margin:0 0 5px;
  font-size:17px;
  line-height:1.35;
  font-weight:600;
  color:#101828;
}
.listo-payment-details-qr-section .listo-caption { margin:0; max-width:520px; }
.listo-payment-details-qr-preview {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:250px;
  margin:18px 0 16px;
  padding:16px;
  border:1px dashed #cfd6df;
  border-radius:12px;
  background:#fff;
  box-sizing:border-box;
}
.listo-payment-details-qr-preview[hidden] { display:none; }
.listo-payment-details-qr-preview img {
  display:block;
  width:auto;
  max-width:280px;
  max-height:300px;
  height:auto;
  border-radius:8px;
}
.listo-payment-details-qr-preview--saved {
  width:320px;
  min-height:320px;
  margin:0;
  justify-self:end;
  border-style:solid;
}
.listo-payment-details-qr-preview--saved img { max-width:285px; max-height:285px; }
.listo-payment-details-used {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:22px;
  padding:15px 16px;
  border:1px solid #dbeafe;
  border-radius:10px;
  background:#f8fbff;
  color:#475467;
}
.listo-payment-details-used__icon {
  flex:0 0 24px;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#eff8ff;
  border:1px solid #b2ddff;
  color:#175cd3;
  font-size:12px;
  font-weight:800;
}
.listo-payment-details-used strong { display:block; margin-bottom:3px; color:#344054; font-size:13px; }
.listo-payment-details-used p { margin:0; font-size:13px; line-height:1.5; }
.listo-payment-details-actions {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid #eaecf0;
}
.listo-payment-details-actions .listo-btn { min-height:44px; }
.listo-payment-details-actions--view { padding-top:18px; }
.listo-payment-details-actions--edit { margin-top:22px; }
.listo-payment-details-actions--edit .listo-btn { min-width:150px; }
#listo-payment-details-status-text.is-success { color:#067647; }
#listo-payment-details-status-text.is-error { color:#b42318; }
.listo-payment-details-edit-panel { margin-top:22px; padding-top:22px; border-top:1px solid #eaecf0; }
.listo-payment-details-edit-heading { margin-bottom:20px; }
.listo-payment-details-grid {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  gap:28px;
}
.listo-payment-details-grid--payout {
  grid-template-columns:minmax(0,520px);
  max-width:560px;
}
.listo-payment-details-fields { min-width:0; display:flex; flex-direction:column; gap:16px; }
.listo-payment-details-fields .listo-field { margin:0; }
.listo-payment-details-page #listo-payment-bank-field,
.listo-payment-details-page #listo-payment-summary-bank-row {
  display: none !important;
}
.listo-payment-details-page #listo-payment-bank-field.is-open,
.listo-payment-details-page #listo-payment-summary-bank-row.is-open {
  display: block !important;
}
.listo-payment-details-card .listo-field label,
.listo-payment-details-file label {
  display:block;
  margin-bottom:7px;
  font-size:13px;
  font-weight:600;
  color:#344054;
}
.listo-payment-details-card .listo-field input,
.listo-payment-details-card .listo-field select {
  width:100%;
  min-height:46px;
  box-sizing:border-box;
  border:1px solid #d0d5dd;
  border-radius:10px;
  background:#fff;
  color:#101828;
  font-size:14px;
  padding:0 13px;
}
.listo-payment-details-card .listo-field input:focus,
.listo-payment-details-card .listo-field select:focus {
  border-color:#84caff;
  box-shadow:0 0 0 3px rgba(33,150,243,.10);
  outline:none;
}
.listo-payment-details-qr-panel {
  min-width:0;
  padding:20px;
  border:1px solid #e4e7ec;
  border-radius:12px;
  background:#f8fafc;
}
.listo-payment-details-qr-heading h3 { margin:0 0 4px; font-size:17px; line-height:1.35; font-weight:600; color:#101828; }
.listo-payment-details-qr-heading .listo-caption { margin:0; }
.listo-payment-details-file { margin-top:4px; }
.listo-payment-details-file input[type=file] {
  display:block;
  width:100%;
  box-sizing:border-box;
  min-height:44px;
  padding:9px 10px;
  border:1px solid #d0d5dd;
  border-radius:10px;
  background:#fff;
  font-size:13px;
}
.listo-payment-details-file span { display:block; margin-top:6px; color:#667085; font-size:12px; line-height:1.4; }
.listo-payment-details-remove { margin-top:12px; }
#listo-payment-details-error { margin-top:16px; }
.listo-payment-details-explainer {
  display:flex;
  align-items:flex-start;
  gap:12px;
  max-width:920px;
  margin-top:20px;
  padding:16px 18px;
  border-top:1px solid #eaecf0;
  color:#475467;
}
.listo-payment-details-explainer__icon {
  flex:0 0 24px;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #b2ddff;
  border-radius:50%;
  color:#175cd3;
  font-size:13px;
  font-weight:800;
  background:#eff8ff;
}
.listo-payment-details-explainer strong { display:block; margin-bottom:3px; color:#344054; font-size:14px; }
.listo-payment-details-explainer p { margin:0; font-size:13px; line-height:1.55; }
@media (max-width:900px) {
  .listo-payment-details-qr-section { grid-template-columns:1fr; }
  .listo-payment-details-qr-preview--saved { width:100%; max-width:340px; justify-self:start; }
  .listo-payment-details-grid { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .listo-payment-details-page { padding-bottom:120px; }
  .listo-payment-details-page > .listo-page-title-row > h1 { font-size:20px !important; line-height:25px !important; }
  .listo-payment-details-page > .listo-page-intro { margin:4px 0 18px !important; font-size:13px !important; line-height:1.5 !important; }
  .listo-payment-details-card { padding:18px; border-radius:12px; }
  .listo-payment-details-card__header { gap:10px; flex-wrap:wrap; }
  .listo-payment-details-card__header h2 { font-size:17px; }
  .listo-payment-details-grid--payout { max-width:none; grid-template-columns:1fr; }
  .listo-payment-details-card__header .listo-status-pill { margin-top:2px; white-space:nowrap; }
  .listo-payment-details-summary__row { align-items:flex-start; gap:16px; padding:12px 14px; }
  .listo-payment-details-summary__row span { flex:1 1 50%; }
  .listo-payment-details-summary__row strong { flex:1 1 50%; }
  .listo-payment-details-view { margin-top:18px; }
  .listo-payment-details-qr-section { gap:16px; margin-top:20px; padding-top:20px; }
  .listo-payment-details-qr-preview--saved { min-height:280px; margin-top:0; }
  .listo-payment-details-qr-preview--saved img { max-width:245px; max-height:245px; }
  .listo-payment-details-grid { gap:20px; }
  .listo-payment-details-qr-panel { padding:16px; }
  .listo-payment-details-actions { align-items:stretch; flex-direction:column; }
  .listo-payment-details-actions .listo-btn { width:100%; }
  .listo-payment-details-actions--edit { padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
  .listo-payment-details-edit-panel { margin-top:18px; padding-top:18px; }
  .listo-payment-details-explainer { margin-top:18px; padding:14px 2px 110px; }
}
@media (max-width:480px) {
  .listo-payment-details-card__header { display:block; }
  .listo-payment-details-card__header .listo-status-pill { display:inline-flex; margin-top:9px; }
  .listo-payment-details-notice { padding:12px; }
  .listo-payment-details-summary__row { display:block; }
  .listo-payment-details-summary__row strong { display:block; margin-top:4px; text-align:left; }
  .listo-payment-details-qr-preview--saved { min-height:250px; }
}

/* NEXT805 — linked Parking follows the Staycation occupancy window. */
.listo-parking-linked-occupancy {
  display:flex;
  flex-direction:column;
  gap:4px;
  background:#f7fbff;
  border:1px solid #d8eafa;
  color:#374151;
}
.listo-parking-linked-occupancy strong {
  color:#111827;
  font-size:14px;
}
.listo-parking-linked-occupancy span {
  color:#1267a3;
  font-weight:700;
}
.listo-parking-linked-occupancy small {
  display:block;
  color:#5b6777;
  line-height:1.45;
}
.listo-parking-linked-badge {
  color:#1267a3;
  font-weight:700;
}
@media (max-width:640px) {
  .listo-parking-linked-occupancy {
    font-size:13px;
  }
  .listo-parking-linked-occupancy strong {
    font-size:13px;
  }
}

/* NEXT806 — Guest Parking linked-payment clarification. */
.listo-parking-linked-payment-note{margin-top:16px;padding:14px 16px;border:1px solid rgba(33,150,243,.22);border-radius:14px;background:#f5f9ff;display:flex;flex-direction:column;gap:5px;line-height:1.45}
.listo-parking-linked-payment-note strong{font-size:14px;color:#111827}
.listo-parking-linked-payment-note span{font-size:13px;color:#52606d}
.listo-parking-guest-card:focus-visible{outline:3px solid rgba(33,150,243,.28);outline-offset:3px}

/* ========================================================================
   NEXT826 — Unified Bookings action-first workspace
   Presentation-only layer. Existing lifecycle/state/action handlers remain
   unchanged; this groups them around the current user's required actions.
   ======================================================================== */
.listo-action-hero{position:relative;}
.listo-action-hero__link{margin-left:auto;border:0;background:transparent;color:#c45f00;font:inherit;font-size:11px;font-weight:850;white-space:nowrap;cursor:pointer;padding:6px 2px;}
.listo-action-hero__link:hover{text-decoration:underline;}
.listo-bookings-workspace--host-focused .listo-action-hero{min-width:0;width:100%;}
.listo-bookings-workspace--host-focused .listo-host-bookings-intro{align-items:center;}
.listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary{border-color:#fed7aa;background:#fff9f2;}
.listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary__count{background:#ff6a00;color:#fff;}
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item--attention{border-color:#fed7aa;background:#fff9f2;}

/* Parking Host */
.listo-parking-action-hero{box-shadow:0 4px 14px rgba(30,45,55,.04);}
.listo-parking-action-hero--clear{border-color:#cfe6f4;background:#f7fbff;}
.listo-parking-action-hero--clear .listo-parking-bookings-attention__icon{background:#2196F3;}
.listo-host-parking-bookings .listo-parking-booking-tabs{margin-bottom:14px;}
.listo-host-parking-bookings .listo-parking-booking-tabs a{gap:6px;}
.listo-host-parking-bookings .listo-parking-booking-tabs a b{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#edf1f4;color:#63717b;font-size:9px;line-height:1;}
.listo-host-parking-bookings .listo-parking-booking-tabs a.is-active b{background:rgba(255,255,255,.22);color:#fff;}
.listo-host-parking-bookings .listo-parking-rental-card--app[data-booking-action="1"]{border-color:#ffd9ad;box-shadow:0 3px 12px rgba(255,106,0,.06);}
.listo-host-parking-bookings .listo-parking-rental-card--app[data-booking-action="1"] .listo-parking-rental-card__status{font-weight:850;}

/* Guest */
.listo-guest-bookings-workspace{padding-top:2px;}
.listo-guest-action-hero{display:flex;align-items:center;gap:11px;margin:0 0 14px;padding:12px 14px;border:1px solid #fed7aa;border-radius:15px;background:#fff9f2;box-shadow:0 4px 14px rgba(30,45,55,.04);}
.listo-guest-action-hero.is-clear{border-color:#cfe6f4;background:#f7fbff;}
.listo-guest-action-hero__icon{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:10px;background:#ff6a00;color:#fff;font-size:14px;font-weight:900;}
.listo-guest-action-hero.is-clear .listo-guest-action-hero__icon{background:#2196F3;}
.listo-guest-action-hero__copy{min-width:0;display:flex;flex-direction:column;gap:2px;}
.listo-guest-action-hero__copy strong{font-size:13px;line-height:1.25;color:var(--ink);}
.listo-guest-action-hero__copy span{font-size:11px;line-height:1.4;color:var(--ink-muted);}
.listo-guest-action-hero__link{margin-left:auto;border:0;background:transparent;color:#c45f00;font-size:11px;font-weight:850;white-space:nowrap;cursor:pointer;padding:6px 2px;}
.listo-guest-action-hero__link:hover{text-decoration:underline;}
.listo-guest-booking-filters{display:flex;align-items:center;gap:4px;overflow-x:auto;margin:0 0 20px;padding:4px;border:1px solid #e1e7ea;border-radius:13px;background:#f7f9fa;scrollbar-width:none;}
.listo-guest-booking-filters::-webkit-scrollbar{display:none;}
.listo-guest-booking-filters button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:0;border-radius:9px;background:transparent;color:var(--ink-muted);padding:8px 12px;font-size:12px;font-weight:750;white-space:nowrap;cursor:pointer;}
.listo-guest-booking-filters button:hover{background:#fff;color:var(--ink);}
.listo-guest-booking-filters button.is-active{background:#2196F3;color:#fff;box-shadow:0 2px 7px rgba(33,150,243,.22);}
.listo-guest-booking-filters button span{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#e8edf1;color:#5d6972;font-size:9px;font-weight:850;line-height:1;}
.listo-guest-booking-filters button.is-active span{background:rgba(255,255,255,.22);color:#fff;}
.listo-guest-booking-filter-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:180px;padding:30px;text-align:center;border:1px dashed #dce4e9;border-radius:16px;background:#fbfcfd;}
.listo-guest-booking-filter-empty strong{font-size:14px;color:var(--ink);}
.listo-guest-booking-filter-empty span{font-size:11px;color:var(--ink-muted);}
.listo-guest-bookings-workspace .listo-trip-card[data-guest-booking-action="1"]{border-color:#ffd9ad;box-shadow:0 3px 12px rgba(255,106,0,.05);}
.listo-guest-bookings-workspace .listo-trip-card[data-guest-booking-action="1"] .listo-trip-card__kicker--attention{font-weight:850;}
.listo-guest-bookings-workspace .listo-trip-card[hidden]{display:none !important;}

@media (max-width:700px){
  .listo-bookings-workspace--host-focused .listo-host-bookings-intro{align-items:stretch;}
  .listo-bookings-workspace--host-focused .listo-action-hero__link{align-self:center;}
  .listo-host-parking-bookings .listo-parking-booking-tabs{overflow-x:auto;justify-content:flex-start;scrollbar-width:none;}
  .listo-host-parking-bookings .listo-parking-booking-tabs::-webkit-scrollbar{display:none;}
  .listo-host-parking-bookings .listo-parking-booking-tabs a{flex:0 0 auto;white-space:nowrap;}
  .listo-parking-action-hero{padding:10px 11px;}
  .listo-parking-bookings-attention>div:nth-child(2){gap:3px;}
  .listo-parking-bookings-attention>a{font-size:10px;}
  .listo-guest-action-hero{align-items:flex-start;padding:11px 12px;}
  .listo-guest-action-hero__icon{width:30px;height:30px;flex-basis:30px;}
  .listo-guest-action-hero__copy strong{font-size:12px;}
  .listo-guest-action-hero__copy span{font-size:10.5px;}
  .listo-guest-action-hero__link{align-self:center;font-size:10px;}
  .listo-guest-booking-filters{margin-bottom:16px;padding:3px;}
  .listo-guest-booking-filters button{min-height:38px;padding:8px 11px;font-size:11px;}
  .listo-guest-booking-filter-empty{min-height:150px;}
}


/* ========================================================================
   NEXT847 — Host Bookings calm operations UI
   Presentation-only refactor. Existing booking/lifecycle state, actions,
   detail drawers and filters remain authoritative; this layer reduces visual
   competition and makes the same mental model work on desktop and mobile.
   ======================================================================== */
.listo-bookings-page-shell .listo-bookings-workspace--host-focused{
  --bookings-gap:12px;
}
/* Keep the page title/icon untouched; start the operational workspace closer
 * to it and eliminate the redundant metric dashboard. */
.listo-bookings-workspace--host-focused .listo-host-bookings-intro{
  margin:0 0 12px;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-intro__copy{
  display:none;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-summary{
  display:none !important;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary,
.listo-bookings-workspace--host-focused .listo-host-bookings-all-clear{
  width:100%;
  min-height:52px;
  margin:0;
  box-sizing:border-box;
  border-radius:14px;
  padding:10px 14px;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary__count{
  width:30px;height:30px;flex:0 0 30px;
  display:grid;place-items:center;border-radius:9px;
  font-size:14px;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary > span:nth-child(2),
.listo-bookings-workspace--host-focused .listo-host-bookings-all-clear > span:nth-child(2){
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary strong,
.listo-bookings-workspace--host-focused .listo-host-bookings-all-clear strong{font-size:12px;line-height:1.2}
.listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary small,
.listo-bookings-workspace--host-focused .listo-host-bookings-all-clear small{font-size:10px;line-height:1.3}
.listo-bookings-workspace--host-focused .listo-host-bookings-controls{margin:0 0 14px}
.listo-bookings-workspace--host-focused .listo-bookings-filters{
  display:flex;align-items:center;gap:10px;
  padding:6px 7px;
  margin:0;
  border:1px solid #e3e9ed;
  border-radius:14px;
  background:#fff;
  box-shadow:0 2px 8px rgba(24,48,64,.035);
}
.listo-bookings-workspace--host-focused .listo-bookings-filter-group{
  min-width:0;display:flex;align-items:center;gap:4px;
  overflow-x:auto;scrollbar-width:none;
  flex:1;
}
.listo-bookings-workspace--host-focused .listo-bookings-filter-group::-webkit-scrollbar{display:none}
.listo-bookings-workspace--host-focused .listo-bookings-filter{
  min-height:34px;padding:7px 11px;border:0;border-radius:10px;
  background:transparent;color:#5e6b74;font-size:11px;font-weight:800;
  flex:0 0 auto;cursor:pointer;
}
.listo-bookings-workspace--host-focused .listo-bookings-filter:hover{background:#f4f7f9;color:#25313a}
.listo-bookings-workspace--host-focused .listo-bookings-filter.is-active{
  background:#2196F3;color:#fff;box-shadow:0 3px 8px rgba(33,150,243,.18)
}
.listo-bookings-workspace--host-focused .listo-bookings-filter-select{
  display:flex;align-items:center;gap:7px;flex:0 0 auto;margin:0;padding:0 3px 0 10px;
  border-left:1px solid #edf1f4;
}
.listo-bookings-workspace--host-focused .listo-bookings-filter-select span{
  color:#7a8790;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
}
.listo-bookings-workspace--host-focused .listo-bookings-filter-select select{
  min-height:34px;max-width:190px;padding:7px 28px 7px 9px;border:1px solid #e1e7eb;border-radius:10px;
  background:#fff;color:#26343d;font-size:10px;font-weight:700;
}
/* Request section and ordinary cards become a single visual stream. */
.listo-bookings-workspace--host-focused .listo-host-bookings-request-section h2{font-size:15px;margin-bottom:4px}
.listo-bookings-workspace--host-focused .listo-host-bookings-request-section > p{font-size:10px}
.listo-bookings-workspace--host-focused .listo-host-bookings-request-grid{margin-bottom:18px !important}
.listo-bookings-workspace--host-focused .listo-trip-card,
.listo-bookings-workspace--host-focused .listo-host-booking-card{
  border-color:#e4eaee;box-shadow:0 2px 10px rgba(24,48,64,.035)
}
.listo-bookings-workspace--host-focused .listo-trip-card:hover{box-shadow:0 6px 18px rgba(24,48,64,.07)}
.listo-bookings-workspace--host-focused .listo-bookings-list-view{margin-top:0}

/* Parking: same hierarchy as Staycation, with the Parking orange accent.
 * Search remains visible; secondary filters collapse behind one control. */
.listo-host-parking-bookings .listo-parking-bookings-attention{
  min-height:52px;box-sizing:border-box;margin:0 0 12px;padding:9px 12px;border-radius:14px;
}
.listo-host-parking-bookings .listo-parking-booking-tabs{
  display:flex;align-items:center;gap:4px;margin:0 0 10px;padding:5px;
  border:1px solid #e5eaee;border-radius:14px;background:#fff;overflow-x:auto;scrollbar-width:none;
}
.listo-host-parking-bookings .listo-parking-booking-tabs::-webkit-scrollbar{display:none}
.listo-host-parking-bookings .listo-parking-booking-tabs a{
  min-height:34px;display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;padding:7px 11px;border-radius:10px;
  color:#64727b;text-decoration:none;font-size:10px;font-weight:850;white-space:nowrap;
}
.listo-host-parking-bookings .listo-parking-booking-tabs a:hover{background:#f5f7f8;color:#26343d}
.listo-host-parking-bookings .listo-parking-booking-tabs a.is-active{background:#ff6a00;color:#fff;box-shadow:0 3px 8px rgba(255,106,0,.18)}
.listo-host-parking-bookings .listo-parking-booking-tabs b{
  min-width:17px;height:17px;display:inline-grid;place-items:center;padding:0 4px;border-radius:999px;background:#eef2f4;color:#6b7780;font-size:9px;line-height:1;
}
.listo-host-parking-bookings .listo-parking-booking-tabs a.is-active b{background:rgba(255,255,255,.2);color:#fff}
.listo-host-parking-bookings .listo-parking-booking-filters--app{
  display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:7px;border:1px solid #e3e9ed;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(24,48,64,.035)
}
.listo-host-parking-bookings .listo-parking-booking-search{flex:1;min-width:180px;height:36px;margin:0;border:1px solid #e1e7eb;border-radius:10px;background:#fafcfd}
.listo-host-parking-bookings .listo-parking-booking-search input{height:34px;font-size:10px}
.listo-host-parking-bookings .listo-parking-booking-filter-disclosure{flex:0 0 auto;position:relative}
.listo-host-parking-bookings .listo-parking-booking-filter-disclosure > summary{
  list-style:none;cursor:pointer;min-height:36px;display:flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #e1e7eb;border-radius:10px;background:#fff;color:#46555f;font-size:10px;font-weight:850;white-space:nowrap;
}
.listo-host-parking-bookings .listo-parking-booking-filter-disclosure > summary::-webkit-details-marker{display:none}
.listo-host-parking-bookings .listo-parking-booking-filter-disclosure__icon{font-size:14px;line-height:1}
.listo-host-parking-bookings .listo-parking-booking-filter-disclosure summary b{min-width:17px;height:17px;display:grid;place-items:center;border-radius:999px;background:#fff1e6;color:#e35c00;font-size:9px}
.listo-host-parking-bookings .listo-parking-booking-filter-disclosure__chevron{font-size:12px;transition:transform .15s ease}
.listo-host-parking-bookings .listo-parking-booking-filter-disclosure[open] .listo-parking-booking-filter-disclosure__chevron{transform:rotate(180deg)}
.listo-host-parking-bookings .listo-parking-booking-filter-fields{display:flex;align-items:flex-end;gap:8px;padding-top:8px}
.listo-host-parking-bookings .listo-parking-booking-filter-fields label{min-width:130px}
.listo-host-parking-bookings .listo-parking-booking-filter-fields label span{display:block;margin-bottom:4px;color:#7a8790;font-size:9px;font-weight:800}
.listo-host-parking-bookings .listo-parking-booking-filter-fields select{width:100%;min-height:34px;padding:7px 26px 7px 8px;border:1px solid #e1e7eb;border-radius:9px;background:#fff;font-size:10px}
.listo-host-parking-bookings .listo-parking-booking-filter-fields .listo-btn{min-height:34px;padding:7px 12px;font-size:10px}
.listo-host-parking-bookings .listo-parking-booking-filter-fields .listo-parking-booking-clear{font-size:10px;padding:8px 4px}
.listo-host-parking-bookings .listo-parking-booking-filter-disclosure[open]{position:relative}
.listo-host-parking-bookings .listo-parking-booking-filter-disclosure[open] .listo-parking-booking-filter-fields{
  position:absolute;z-index:20;right:0;top:calc(100% + 6px);min-width:430px;padding:10px;border:1px solid #e1e7eb;border-radius:12px;background:#fff;box-shadow:0 10px 30px rgba(24,48,64,.12)
}
.listo-host-parking-bookings .listo-parking-booking-filter-disclosure[open] .listo-parking-booking-filter-fields label{flex:1}
.listo-host-parking-bookings .listo-parking-bookings-result-meta{margin:0 2px 8px;min-height:20px}

@media(max-width:760px){
  .listo-bookings-workspace--host-focused .listo-host-bookings-intro{margin-bottom:10px}
  .listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary,
  .listo-bookings-workspace--host-focused .listo-host-bookings-all-clear{min-height:48px;padding:8px 10px}
  .listo-bookings-workspace--host-focused .listo-host-bookings-controls{margin-bottom:10px}
  .listo-bookings-workspace--host-focused .listo-bookings-filters{padding:5px;gap:5px}
  .listo-bookings-workspace--host-focused .listo-bookings-filter-group{width:100%}
  .listo-bookings-workspace--host-focused .listo-bookings-filter-select{display:block;flex:0 0 auto;border-left:0;padding:0 0 0 3px}
  .listo-bookings-workspace--host-focused .listo-bookings-filter-select span{display:none}
  .listo-bookings-workspace--host-focused .listo-bookings-filter-select select{width:38px;max-width:38px;padding:0 0 0 5px;color:transparent;border-color:#e1e7eb;background:#fff}
  .listo-bookings-workspace--host-focused .listo-host-bookings-request-grid{grid-template-columns:1fr !important}

  .listo-host-parking-bookings .listo-parking-bookings-attention{margin-bottom:10px}
  .listo-host-parking-bookings .listo-parking-booking-tabs{margin-bottom:8px}
  .listo-host-parking-bookings .listo-parking-booking-tabs a{min-height:32px;padding:6px 10px;font-size:10px}
  .listo-host-parking-bookings .listo-parking-booking-filters--app{align-items:stretch;padding:6px;gap:6px}
  .listo-host-parking-bookings .listo-parking-booking-search{min-width:0;height:38px}
  .listo-host-parking-bookings .listo-parking-booking-filter-disclosure{width:40px;flex:0 0 40px}
  .listo-host-parking-bookings .listo-parking-booking-filter-disclosure > summary{width:40px;box-sizing:border-box;justify-content:center;padding:7px;font-size:0}
  .listo-host-parking-bookings .listo-parking-booking-filter-disclosure__icon{font-size:15px}
  .listo-host-parking-bookings .listo-parking-booking-filter-disclosure__chevron{display:none}
  .listo-host-parking-bookings .listo-parking-booking-filter-disclosure[open] .listo-parking-booking-filter-fields{
    position:absolute;right:0;left:auto;top:calc(100% + 6px);min-width:min(300px,calc(100vw - 34px));display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px
  }
  .listo-host-parking-bookings .listo-parking-booking-filter-fields label{min-width:0}
  .listo-host-parking-bookings .listo-parking-booking-filter-fields label:last-of-type{grid-column:1 / -1}
  .listo-host-parking-bookings .listo-parking-booking-filter-fields .listo-btn{grid-column:1 / -1;width:100%}
  .listo-host-parking-bookings .listo-parking-booking-filter-fields .listo-parking-booking-clear{grid-column:1 / -1;text-align:center}
}

/* NEXT855 — Hidden empty states must remain hidden even though the shared
 * empty-panel component uses display:flex. This prevents the empty-state
 * message from appearing above real reservation/booking content. */
.listo-bookings-empty-panel[hidden] { display:none !important; }

/* NEXT848 — Bookings empty-state alignment and Parking filter simplification. */
.listo-bookings-empty-panel{
  width:100%;
  min-height:276px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:34px 24px;
  margin-top:0;
  border:1px solid #e1e8ed;
  border-radius:18px;
  background:#fff;
  text-align:center;
  box-shadow:0 2px 10px rgba(24,48,64,.025);
}
.listo-bookings-empty-panel__icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  margin-bottom:15px;
  border-radius:15px;
  background:#edf5ff;
  color:#2196F3;
}
.listo-bookings-empty-panel--parking .listo-bookings-empty-panel__icon{
  background:#fff1e7;
  color:#ff6a00;
}
.listo-bookings-empty-panel__icon svg{width:24px;height:24px}
.listo-bookings-empty-panel strong{
  color:#18242c;
  font-size:17px;
  line-height:1.3;
  font-weight:800;
}
.listo-bookings-empty-panel span{
  max-width:430px;
  margin-top:7px;
  color:#68747f;
  font-size:12px;
  line-height:1.55;
}
.listo-bookings-empty-panel a{
  display:inline-flex;
  align-items:center;
  margin-top:13px;
  color:#2196F3;
  font-size:12px;
  line-height:1.2;
  font-weight:800;
  text-decoration:none;
}
.listo-bookings-empty-panel--parking a{color:#ff6a00}
.listo-bookings-empty-panel a:hover{text-decoration:underline}

/* Parking no longer needs an always-visible search field. Filters remain available
   because parking space, vehicle and date are meaningful structured constraints. */
.listo-host-parking-bookings .listo-parking-booking-filters--app{
  justify-content:flex-end;
}
.listo-host-parking-bookings .listo-parking-booking-filter-disclosure{
  margin-left:auto;
}

/* Preserve the compact filter control on small screens. */
@media (max-width:760px){
  .listo-bookings-empty-panel{
    min-height:250px;
    padding:28px 18px;
    border-radius:16px;
  }
  .listo-bookings-empty-panel__icon{width:46px;height:46px;margin-bottom:13px;border-radius:14px}
  .listo-bookings-empty-panel strong{font-size:16px}
  .listo-bookings-empty-panel span{font-size:11.5px}
  .listo-host-parking-bookings .listo-parking-booking-filters--app{
    justify-content:flex-end;
  }
  .listo-host-parking-bookings .listo-parking-booking-filter-disclosure{
    margin-left:0;
  }
}

/* NEXT849 — Final Bookings mobile cleanup.
 * Parking no longer exposes a secondary filter container on the Host Bookings
 * page. Staycation keeps its status/listing controls, but the mobile layout
 * must not collapse the Listing selector into a blank 38px control.
 */
.listo-host-parking-bookings .listo-parking-booking-filters--app {
  display:none !important;
}

@media (max-width:720px) {
  .listo-bookings-workspace--host-focused .listo-host-bookings-controls .listo-bookings-filters {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    box-sizing:border-box;
    padding:6px;
    gap:7px;
  }

  .listo-bookings-workspace--host-focused .listo-host-bookings-controls .listo-bookings-filter-group {
    width:100%;
    min-width:0;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;
    gap:5px;
    padding:0;
    box-sizing:border-box;
    scrollbar-width:none;
  }

  .listo-bookings-workspace--host-focused .listo-host-bookings-controls .listo-bookings-filter-group::-webkit-scrollbar {
    display:none;
  }

  .listo-bookings-workspace--host-focused .listo-host-bookings-controls .listo-bookings-filter {
    width:auto;
    min-width:max-content;
    flex:0 0 auto;
    min-height:38px;
    padding:8px 13px;
    white-space:nowrap;
    border:0;
    border-radius:10px;
  }

  .listo-bookings-workspace--host-focused .listo-host-bookings-controls .listo-bookings-filter-select {
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:0;
    padding:0;
    border:0;
    box-sizing:border-box;
  }

  .listo-bookings-workspace--host-focused .listo-host-bookings-controls .listo-bookings-filter-select span {
    display:block;
    flex:0 0 auto;
    color:#7a8790;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  .listo-bookings-workspace--host-focused .listo-host-bookings-controls .listo-bookings-filter-select select {
    width:auto;
    min-width:0;
    max-width:none;
    flex:1 1 auto;
    min-height:40px;
    padding:8px 30px 8px 10px;
    border:1px solid #e1e7eb;
    border-radius:10px;
    background:#fff;
    color:#26343d;
    font-size:12px;
    font-weight:700;
  }
}

/* NEXT850 — Parking Bookings uses the same calm status-control UI as Staycation. */
.listo-host-parking-bookings-controls { padding:0 0 14px; margin:0 0 18px; border-bottom:1px solid #e7ecef; }
.listo-host-parking-bookings-controls .listo-bookings-filters { display:block; }
.listo-host-parking-bookings-controls .listo-bookings-filter-group { display:flex; align-items:center; gap:4px; padding:4px; border:1px solid #e1e7ea; background:#F7F9FA; border-radius:12px; }
.listo-host-parking-bookings-controls .listo-bookings-filter { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:9px; padding:8px 13px; background:transparent; color:var(--ink-muted); font-weight:750; font-size:13px; text-decoration:none; white-space:nowrap; }
.listo-host-parking-bookings-controls .listo-bookings-filter:hover { color:var(--ink); background:#fff; }
.listo-host-parking-bookings-controls .listo-bookings-filter.is-active { background:#2196F3; color:#fff; box-shadow:0 2px 7px rgba(33,150,243,.22); }
.listo-host-parking-bookings-controls .listo-bookings-filter__count { min-width:18px; height:18px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#edf1f4; color:#63717b; font-size:9px; line-height:1; font-weight:800; }
.listo-host-parking-bookings-controls .listo-bookings-filter.is-active .listo-bookings-filter__count { background:rgba(255,255,255,.22); color:#fff; }

@media (max-width:720px) {
  .listo-host-parking-bookings-controls { padding-bottom:10px; margin-bottom:14px; }
  .listo-host-parking-bookings-controls .listo-bookings-filter-group { width:100%; overflow-x:auto; flex-wrap:nowrap; gap:5px; padding:3px; border-radius:11px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .listo-host-parking-bookings-controls .listo-bookings-filter-group::-webkit-scrollbar { display:none; }
  .listo-host-parking-bookings-controls .listo-bookings-filter { flex:0 0 auto; min-height:38px; padding:8px 12px; font-size:12px; }
}

/* NEXT851 — Unified Host Bookings result container.
 * Staycation and Parking now share the same visual hierarchy: one action
 * strip, one status control, and one bordered results container. The old
 * separator line and Parking-specific intro shell are intentionally removed.
 */
.listo-bookings-workspace--host-focused .listo-host-bookings-controls,
.listo-host-parking-bookings .listo-host-bookings-controls {
  padding-bottom:0;
  margin-bottom:14px;
  border-bottom:0;
}

.listo-host-parking-bookings .listo-host-parking-bookings-intro {
  margin:0 0 12px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.listo-host-parking-bookings .listo-host-parking-bookings-intro__copy,
.listo-host-parking-bookings .listo-host-bookings-intro__copy {
  display:none;
}
.listo-host-parking-bookings .listo-host-bookings-attention-summary,
.listo-host-parking-bookings .listo-host-bookings-all-clear {
  width:100%;
  min-height:52px;
  margin:0;
  box-sizing:border-box;
  border-radius:14px;
  padding:10px 14px;
}
.listo-host-parking-bookings .listo-host-bookings-attention-summary > span:nth-child(2),
.listo-host-parking-bookings .listo-host-bookings-all-clear > span:nth-child(2) {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.listo-host-parking-bookings .listo-host-bookings-attention-summary strong,
.listo-host-parking-bookings .listo-host-bookings-all-clear strong { font-size:12px; line-height:1.2; }
.listo-host-parking-bookings .listo-host-bookings-attention-summary small,
.listo-host-parking-bookings .listo-host-bookings-all-clear small { font-size:10px; line-height:1.3; }

/* Parking uses exactly the same status-control treatment as Staycation. */
.listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filters {
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 7px;
  margin:0;
  border:1px solid #e3e9ed;
  border-radius:14px;
  background:#fff;
  box-shadow:0 2px 8px rgba(24,48,64,.035);
}
.listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter-group {
  min-width:0;
  display:flex;
  align-items:center;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:none;
  flex:1;
}
.listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter-group::-webkit-scrollbar { display:none; }
.listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter {
  min-height:34px;
  padding:7px 11px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#5e6b74;
  font-size:11px;
  font-weight:800;
  flex:0 0 auto;
  cursor:pointer;
}
.listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter:hover { background:#f4f7f9; color:#25313a; }
.listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter.is-active,
.listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter[aria-current="page"] {
  background:#2196F3 !important;
  color:#fff !important;
  border-color:#2196F3 !important;
  box-shadow:0 3px 8px rgba(33,150,243,.18) !important;
  text-decoration:none !important;
}
.listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter__count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#e8edf1;
  color:#5d6972;
  font-size:10px;
  font-weight:800;
  line-height:1;
}
.listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter.is-active .listo-bookings-filter__count {
  background:rgba(255,255,255,.22);
  color:#fff;
}

/* One container owns the content below the tabs. */
.listo-bookings-results-panel {
  width:100%;
  box-sizing:border-box;
  min-height:276px;
  padding:18px;
  border:1px solid #e1e8ed;
  border-radius:18px;
  background:#fff;
  box-shadow:0 2px 10px rgba(24,48,64,.025);
}
.listo-bookings-results-panel > .listo-bookings-empty-panel {
  min-height:240px;
  margin:0;
  padding:28px 20px;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
.listo-bookings-results-panel .listo-host-bookings-request-section:first-child,
.listo-bookings-results-panel .listo-host-bookings-pending-section:first-child,
.listo-bookings-results-panel .listo-trip-grid:first-child,
.listo-bookings-results-panel .listo-parking-rental-list:first-child { margin-top:0; }

@media (max-width:760px) {
  .listo-host-parking-bookings .listo-host-bookings-attention-summary,
  .listo-host-parking-bookings .listo-host-bookings-all-clear {
    min-height:48px;
    padding:8px 10px;
  }
  .listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filters {
    padding:5px;
    gap:5px;
  }
  .listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter-group {
    width:100%;
    flex:0 0 auto;
    gap:5px;
    flex-wrap:nowrap;
  }
  .listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter {
    min-width:max-content;
    min-height:38px;
    padding:8px 13px;
    white-space:nowrap;
  }
  .listo-bookings-results-panel {
    min-height:250px;
    padding:12px;
    border-radius:16px;
  }
  .listo-bookings-results-panel > .listo-bookings-empty-panel {
    min-height:226px;
    padding:24px 12px;
  }
}

/* NEXT852 — Parking Bookings listing selector aligned with Staycation UI. */
.listo-host-parking-bookings .listo-host-bookings-controls .listo-host-parking-bookings__listing-select {
  padding-left:14px;
  border-left:1px solid #e7ecef;
}
@media (max-width:700px) {
  .listo-host-parking-bookings .listo-host-bookings-controls .listo-host-parking-bookings__listing-select {
    padding-left:0;
    border-left:0;
    padding-top:10px;
    border-top:1px solid #e7ecef;
  }
}

/* NEXT858 — Parking rental detail mobile topbar keeps navigation on opposite sides. */
@media (max-width: 640px){
 .listo-parking-rental-detail__topbar{
   flex-direction:row;
   align-items:center;
   justify-content:space-between;
   gap:12px;
   width:100%;
 }
 .listo-parking-rental-detail__topbar a{
   flex:0 1 auto;
   min-width:0;
 }
 .listo-parking-rental-detail__topbar a:last-child{
   margin-left:auto;
   text-align:right;
 }
}

/* NEXT859 — Parking Bookings mobile tabs now match Staycation exactly.
 * The five Host-facing buckets are all visible in the mobile control row:
 * All, Needs Action, Pending, Upcoming, Past. The row is intentionally
 * non-scrolling at normal phone widths so the Host sees the complete workflow
 * at a glance, just like Staycation. */
@media (max-width:720px) {
  .listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filters {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    box-sizing:border-box;
    padding:6px;
    gap:7px;
  }

  .listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter-group {
    width:100%;
    min-width:0;
    flex:0 0 auto;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;
    gap:3px;
    overflow:visible;
    padding:0;
    box-sizing:border-box;
  }

  .listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter {
    width:100%;
    min-width:0;
    min-height:38px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:8px 4px;
    border:0;
    border-radius:10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
    font-size:11px;
    line-height:1.1;
    flex:initial;
  }

  .listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter__count {
    flex:0 0 auto;
    min-width:17px;
    height:17px;
    padding:0 4px;
    font-size:9px;
  }

  .listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter.is-active,
  .listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter[aria-current="page"] {
    background:#2196F3 !important;
    color:#fff !important;
    box-shadow:0 3px 8px rgba(33,150,243,.18) !important;
  }

  .listo-host-parking-bookings .listo-host-bookings-controls .listo-host-parking-bookings__listing-select {
    width:100%;
    min-width:0;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:0;
    padding:10px 0 0;
    border-left:0;
    border-top:1px solid #e7ecef;
  }

  .listo-host-parking-bookings .listo-host-bookings-controls .listo-host-parking-bookings__listing-select span {
    display:block;
    flex:0 0 auto;
    font-size:11px;
    font-weight:800;
    color:#66737c;
    text-transform:none;
    letter-spacing:0;
  }

  .listo-host-parking-bookings .listo-host-bookings-controls .listo-host-parking-bookings__listing-select select {
    width:auto;
    min-width:0;
    max-width:none;
    flex:1 1 auto;
    min-height:40px;
    padding:8px 30px 8px 10px;
    border:1px solid #e1e7eb;
    border-radius:10px;
    background:#fff;
    color:#26343d;
    font-size:12px;
    font-weight:700;
  }
}

/* Extra-small phones: keep all five workflow tabs visible without clipping. */
@media (max-width:360px) {
  .listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter {
    padding-left:2px;
    padding-right:2px;
    font-size:10px;
  }
  .listo-host-parking-bookings .listo-host-bookings-controls .listo-bookings-filter__count {
    min-width:15px;
    height:15px;
    padding:0 3px;
    font-size:8px;
  }
}

/* ==========================================================================\n   NEXT861 — Host Dashboard 2.0\n   Shared Staycation/Parking operational command center. Presentation only.\n   ========================================================================== */
.listo-dashboard-v2{max-width:none!important;padding-bottom:56px}
.listo-dashboard-v2__header{display:flex;justify-content:space-between;align-items:flex-end;margin:4px 0 24px}
.listo-dashboard-v2__eyebrow,.listo-dashboard-v2__section-head>div>span{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#718096}
.listo-dashboard-v2__header h1{margin:3px 0 4px;font-size:30px;line-height:1.15;color:var(--ink)}
.listo-dashboard-v2__header p{margin:0;color:var(--ink-muted);font-size:13px}
.listo-dashboard-v2__attention,.listo-dashboard-v2__today,.listo-dashboard-v2__panel,.listo-dashboard-v2__earnings{border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 3px 14px rgba(24,39,75,.035)}
.listo-dashboard-v2__attention{padding:20px;margin-bottom:18px}
.listo-dashboard-v2__attention.has-items{border-color:#F0D7A1;background:#FFFDF7}
.listo-dashboard-v2__attention.is-clear{background:#FBFEFC}
.listo-dashboard-v2__section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.listo-dashboard-v2__section-head h2{margin:3px 0 0;font-size:17px;line-height:1.2;color:var(--ink)}
.listo-dashboard-v2__section-head>a{font-size:12px;font-weight:800;color:#1677C8;text-decoration:none;white-space:nowrap}
.listo-dashboard-v2__attention-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.listo-dashboard-v2__attention-card{display:flex;flex-direction:column;min-height:118px;padding:14px;border:1px solid #E7E9ED;border-radius:12px;background:#fff;text-decoration:none;color:var(--ink);transition:transform .16s ease,box-shadow .16s ease}
.listo-dashboard-v2__attention-card:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(24,39,75,.07)}
.listo-dashboard-v2__attention-card strong{font-size:13px}.listo-dashboard-v2__attention-card span{margin-top:6px;font-size:11.5px;line-height:1.45;color:var(--ink-muted)}.listo-dashboard-v2__attention-card b{margin-top:auto;padding-top:10px;font-size:11px;color:#1677C8}
.listo-dashboard-v2__attention-card--payment{border-color:#D7E8F8}.listo-dashboard-v2__attention-card--inbox{border-color:#DCE7F0}.listo-dashboard-v2__attention-card--case{border-color:#F0DCDC}
.listo-dashboard-v2__clear{display:flex;align-items:center;gap:12px;padding:12px 2px}.listo-dashboard-v2__clear>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#E9F8EF;color:#198754;font-weight:900}.listo-dashboard-v2__clear strong,.listo-dashboard-v2__clear small{display:block}.listo-dashboard-v2__clear strong{font-size:13px}.listo-dashboard-v2__clear small{margin-top:3px;font-size:11.5px;color:var(--ink-muted)}
.listo-dashboard-v2__today{padding:18px 20px;margin-bottom:18px}.listo-dashboard-v2__metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;overflow:hidden;border:1px solid var(--border);border-radius:12px}.listo-dashboard-v2__metrics a{padding:15px;background:#fff;text-decoration:none;color:var(--ink);min-width:0}.listo-dashboard-v2__metrics a:hover{background:#F8FBFE}.listo-dashboard-v2__metrics strong,.listo-dashboard-v2__metrics span{display:block}.listo-dashboard-v2__metrics strong{font-size:23px;line-height:1.1}.listo-dashboard-v2__metrics span{margin-top:5px;font-size:11px;color:var(--ink-muted)}
.listo-dashboard-v2__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-bottom:18px}.listo-dashboard-v2__panel{padding:18px;min-width:0}.listo-dashboard-v2__booking-list{display:flex;flex-direction:column}.listo-dashboard-v2__booking-list>a{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #EEF0F3;text-decoration:none;color:var(--ink)}.listo-dashboard-v2__booking-list>a:first-child{border-top:0}.listo-dashboard-v2__booking-date{font-size:12px;font-weight:800;color:#1677C8}.listo-dashboard-v2__booking-main{min-width:0}.listo-dashboard-v2__booking-main strong,.listo-dashboard-v2__booking-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.listo-dashboard-v2__booking-main strong{font-size:12.5px}.listo-dashboard-v2__booking-main small{font-size:10.5px;color:var(--ink-muted);margin-top:2px}.listo-dashboard-v2__status{font-size:9.5px;font-weight:800;padding:5px 8px;border-radius:999px;background:#EEF6FD;color:#155E9C;white-space:nowrap}.listo-dashboard-v2__status--pending_host_approval,.listo-dashboard-v2__status--pending_approval{background:#FFF4D8;color:#8A5B00}.listo-dashboard-v2__status--host_payment_submitted{background:#E9F8EF;color:#176B42}.listo-dashboard-v2__empty{padding:22px 4px}.listo-dashboard-v2__empty strong,.listo-dashboard-v2__empty span{display:block}.listo-dashboard-v2__empty span{margin-top:4px;font-size:11.5px;color:var(--ink-muted)}
.listo-dashboard-v2__listing-stat{padding:8px 0 15px}.listo-dashboard-v2__listing-stat strong,.listo-dashboard-v2__listing-stat span{display:block}.listo-dashboard-v2__listing-stat strong{font-size:31px}.listo-dashboard-v2__listing-stat span{font-size:11.5px;color:var(--ink-muted)}.listo-dashboard-v2__split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #EEF0F3}.listo-dashboard-v2__split>div{padding:13px 8px 3px}.listo-dashboard-v2__split>div+div{border-left:1px solid #EEF0F3}.listo-dashboard-v2__split strong,.listo-dashboard-v2__split span{display:block}.listo-dashboard-v2__split strong{font-size:18px}.listo-dashboard-v2__split span{font-size:10.5px;color:var(--ink-muted)}
.listo-dashboard-v2__big-stat{padding:7px 0}.listo-dashboard-v2__big-stat strong{font-size:31px;display:block}.listo-dashboard-v2__big-stat span{font-size:11.5px;color:var(--ink-muted)}.listo-dashboard-v2__panel p{font-size:11.5px;color:var(--ink-muted);margin:4px 0 0;line-height:1.5}
.listo-dashboard-v2__earnings{padding:18px 20px;margin-bottom:18px}.listo-dashboard-v2__earnings-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1px;border:1px solid var(--border);border-radius:12px;overflow:hidden}.listo-dashboard-v2__earnings-grid>div{padding:15px;background:#fff}.listo-dashboard-v2__earnings-grid span,.listo-dashboard-v2__earnings-grid strong,.listo-dashboard-v2__earnings-grid small{display:block}.listo-dashboard-v2__earnings-grid span{font-size:10.5px;color:var(--ink-muted)}.listo-dashboard-v2__earnings-grid strong{font-size:21px;margin-top:4px}.listo-dashboard-v2__earnings-grid small{font-size:10px;color:var(--ink-muted);margin-top:4px;line-height:1.4}.listo-dashboard-v2__earnings-hero{background:#F7FBFF!important}.listo-dashboard-v2__earnings-hero strong{font-size:28px}
.listo-dashboard-v2__quick{display:flex;flex-wrap:wrap;gap:8px}.listo-dashboard-v2__quick a{padding:9px 12px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--ink-muted);font-size:11px;font-weight:700;text-decoration:none}.listo-dashboard-v2__quick a:hover{border-color:#BBDCF7;color:#1677C8;background:#F8FBFE}
@media(max-width:800px){.listo-dashboard-v2{padding:0 2px 40px}.listo-dashboard-v2__header{margin:0 0 18px}.listo-dashboard-v2__header h1{font-size:25px}.listo-dashboard-v2__attention,.listo-dashboard-v2__today,.listo-dashboard-v2__panel,.listo-dashboard-v2__earnings{border-radius:13px;padding:15px}.listo-dashboard-v2__attention-grid{grid-template-columns:1fr}.listo-dashboard-v2__attention-card{min-height:94px}.listo-dashboard-v2__metrics{grid-template-columns:1fr 1fr}.listo-dashboard-v2__metrics a{padding:13px}.listo-dashboard-v2__metrics strong{font-size:21px}.listo-dashboard-v2__grid{grid-template-columns:1fr;gap:12px}.listo-dashboard-v2__booking-list>a{grid-template-columns:50px minmax(0,1fr) auto;gap:9px}.listo-dashboard-v2__status{font-size:8.5px}.listo-dashboard-v2__earnings-grid{grid-template-columns:1fr}.listo-dashboard-v2__earnings-hero strong{font-size:25px}.listo-dashboard-v2__quick{display:grid;grid-template-columns:1fr 1fr}.listo-dashboard-v2__quick a{text-align:center}.listo-dashboard-v2__section-head h2{font-size:15px}}

/* NEXT862 — Dashboard 2.0 app-like UI layer. Presentation only; no workflow/data changes. */
.listo-dashboard-v2{
  --dash-blue:#2196F3;
  --dash-blue-soft:#EEF7FF;
  --dash-ink:#18232D;
  --dash-muted:#71808C;
  --dash-line:#E7EDF2;
  max-width:none!important;
  padding-bottom:48px;
}
.listo-dashboard-v2__header{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  margin:0 0 20px;padding:4px 2px;
}
.listo-dashboard-v2__header-copy{min-width:0}
.listo-dashboard-v2__mode-pill{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:7px;padding:6px 10px;
  border:1px solid #D8EAF9;border-radius:999px;background:#F7FBFF;color:#1769A8;
  font-size:10px;font-weight:850;letter-spacing:.02em;
}
.listo-dashboard-v2__mode-dot{width:7px;height:7px;border-radius:50%;background:#2196F3;box-shadow:0 0 0 3px #E2F1FF}
.listo-dashboard-v2[data-dashboard-mode="parking"] .listo-dashboard-v2__mode-pill{border-color:#FFE0C8;background:#FFF9F4;color:#C95700}
.listo-dashboard-v2[data-dashboard-mode="parking"] .listo-dashboard-v2__mode-dot{background:#FF6A00;box-shadow:0 0 0 3px #FFEBDD}
.listo-dashboard-v2__header h1{margin:0 0 4px;font-size:30px;line-height:1.08;letter-spacing:-.02em;color:var(--dash-ink)}
.listo-dashboard-v2__header p{margin:0;color:var(--dash-muted);font-size:13px}
.listo-dashboard-v2__header-date{min-width:125px;padding:11px 13px;border:1px solid var(--dash-line);border-radius:14px;background:#fff;text-align:right;box-shadow:0 5px 18px rgba(24,39,75,.035)}
.listo-dashboard-v2__header-date span,.listo-dashboard-v2__header-date strong{display:block}
.listo-dashboard-v2__header-date span{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#87939D}
.listo-dashboard-v2__header-date strong{margin-top:3px;font-size:12px;color:var(--dash-ink)}
.listo-dashboard-v2__attention,.listo-dashboard-v2__today,.listo-dashboard-v2__panel,.listo-dashboard-v2__earnings{border:1px solid var(--dash-line);border-radius:20px;background:#fff;box-shadow:0 7px 25px rgba(24,39,75,.045)}
.listo-dashboard-v2__attention{padding:18px;margin-bottom:14px}
.listo-dashboard-v2__attention.has-items{border-color:#F1DCA9;background:linear-gradient(180deg,#FFFDF8 0%,#FFF 100%)}
.listo-dashboard-v2__attention.is-clear{background:#FBFEFC;border-color:#DDEFE5}
.listo-dashboard-v2__section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.listo-dashboard-v2__section-head>div>span{font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:#82909B}
.listo-dashboard-v2__section-head h2{margin:3px 0 0;font-size:16px;line-height:1.2;color:var(--dash-ink);letter-spacing:-.01em}
.listo-dashboard-v2__section-head>a{font-size:11px;font-weight:850;color:#1677C8;text-decoration:none;white-space:nowrap}
.listo-dashboard-v2__attention-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.listo-dashboard-v2__attention-card{display:flex;align-items:center;gap:10px;min-height:74px;padding:11px 12px;border:1px solid #E7E9ED;border-radius:15px;background:#fff;text-decoration:none;color:var(--dash-ink);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.listo-dashboard-v2__attention-card:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(24,39,75,.07)}
.listo-dashboard-v2__attention-icon{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:11px;background:#FFF4D8;color:#8A5B00;font-size:14px;font-weight:900}
.listo-dashboard-v2__attention-copy{min-width:0;flex:1}
.listo-dashboard-v2__attention-copy strong,.listo-dashboard-v2__attention-copy small{display:block}
.listo-dashboard-v2__attention-copy strong{font-size:11.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listo-dashboard-v2__attention-copy small{margin-top:3px;font-size:9.5px;line-height:1.3;color:var(--dash-muted)}
.listo-dashboard-v2__attention-card>b{font-size:10px;color:#1677C8;white-space:nowrap}
.listo-dashboard-v2__attention-card--payment .listo-dashboard-v2__attention-icon{background:#EAF5FF;color:#1677C8}
.listo-dashboard-v2__attention-card--inbox .listo-dashboard-v2__attention-icon{background:#EEF4F8;color:#496575}
.listo-dashboard-v2__attention-card--case .listo-dashboard-v2__attention-icon{background:#FFF0F0;color:#B34D4D}
.listo-dashboard-v2__clear{display:flex;align-items:center;gap:10px;padding:5px 2px}
.listo-dashboard-v2__clear>span{width:32px;height:32px;display:grid;place-items:center;border-radius:11px;background:#E9F8EF;color:#198754;font-weight:900}
.listo-dashboard-v2__clear strong,.listo-dashboard-v2__clear small{display:block}.listo-dashboard-v2__clear strong{font-size:12px}.listo-dashboard-v2__clear small{margin-top:2px;font-size:10px;color:var(--dash-muted)}
.listo-dashboard-v2__today{padding:17px 18px;margin-bottom:14px}
.listo-dashboard-v2__metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:0;overflow:visible}
.listo-dashboard-v2__metrics a{position:relative;padding:13px 15px;background:#F8FAFC;text-decoration:none;color:var(--dash-ink);min-width:0;border:1px solid #EDF1F4;border-right:0}
.listo-dashboard-v2__metrics a:first-child{border-radius:13px 0 0 13px}.listo-dashboard-v2__metrics a:last-child{border-right:1px solid #EDF1F4;border-radius:0 13px 13px 0}
.listo-dashboard-v2__metrics a:hover{background:#F3F8FC}.listo-dashboard-v2__metrics strong,.listo-dashboard-v2__metrics span{display:block}.listo-dashboard-v2__metrics strong{font-size:23px;line-height:1.05;letter-spacing:-.02em}.listo-dashboard-v2__metrics span{margin-top:4px;font-size:9.5px;color:var(--dash-muted)}
.listo-dashboard-v2__grid{display:grid;grid-template-columns:minmax(0,1.45fr) repeat(2,minmax(0,.8fr));gap:14px;margin-bottom:14px;align-items:stretch}
.listo-dashboard-v2__panel{padding:17px;min-width:0}
.listo-dashboard-v2__panel--upcoming{grid-row:span 2}
.listo-dashboard-v2__booking-list{display:flex;flex-direction:column}
.listo-dashboard-v2__booking-list>a{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 0;border-top:1px solid #EEF1F4;text-decoration:none;color:var(--dash-ink)}
.listo-dashboard-v2__booking-list>a:first-child{border-top:0}.listo-dashboard-v2__booking-date{font-size:11px;font-weight:850;color:#1677C8}.listo-dashboard-v2__booking-main{min-width:0}.listo-dashboard-v2__booking-main strong,.listo-dashboard-v2__booking-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.listo-dashboard-v2__booking-main strong{font-size:11.5px}.listo-dashboard-v2__booking-main small{font-size:9.5px;color:var(--dash-muted);margin-top:2px}.listo-dashboard-v2__status{font-size:8.5px;font-weight:850;padding:5px 7px;border-radius:999px;background:#EEF6FD;color:#155E9C;white-space:nowrap}.listo-dashboard-v2__status--pending_host_approval,.listo-dashboard-v2__status--pending_approval{background:#FFF4D8;color:#8A5B00}.listo-dashboard-v2__status--host_payment_submitted{background:#E9F8EF;color:#176B42}.listo-dashboard-v2__empty{padding:25px 4px}.listo-dashboard-v2__empty strong,.listo-dashboard-v2__empty span{display:block}.listo-dashboard-v2__empty span{margin-top:4px;font-size:10px;color:var(--dash-muted)}
.listo-dashboard-v2__listing-stat{padding:5px 0 13px}.listo-dashboard-v2__listing-stat strong,.listo-dashboard-v2__listing-stat span{display:block}.listo-dashboard-v2__listing-stat strong{font-size:30px;letter-spacing:-.03em}.listo-dashboard-v2__listing-stat span{font-size:10px;color:var(--dash-muted)}.listo-dashboard-v2__split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #EEF0F3}.listo-dashboard-v2__split>div{padding:11px 7px 2px}.listo-dashboard-v2__split>div+div{border-left:1px solid #EEF0F3}.listo-dashboard-v2__split strong,.listo-dashboard-v2__split span{display:block}.listo-dashboard-v2__split strong{font-size:17px}.listo-dashboard-v2__split span{font-size:9px;color:var(--dash-muted)}
.listo-dashboard-v2__big-stat{padding:5px 0}.listo-dashboard-v2__big-stat strong{font-size:30px;display:block;letter-spacing:-.03em}.listo-dashboard-v2__big-stat span{font-size:10px;color:var(--dash-muted)}.listo-dashboard-v2__panel p{font-size:10px;color:var(--dash-muted);margin:4px 0 0;line-height:1.45}
.listo-dashboard-v2__earnings{padding:17px 18px;margin-bottom:14px}.listo-dashboard-v2__earnings-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:8px;border:0;overflow:visible}.listo-dashboard-v2__earnings-grid>div{padding:14px;border:1px solid #EDF1F4;border-radius:14px;background:#F8FAFC}.listo-dashboard-v2__earnings-grid span,.listo-dashboard-v2__earnings-grid strong,.listo-dashboard-v2__earnings-grid small{display:block}.listo-dashboard-v2__earnings-grid span{font-size:9px;color:var(--dash-muted)}.listo-dashboard-v2__earnings-grid strong{font-size:20px;margin-top:4px;letter-spacing:-.02em}.listo-dashboard-v2__earnings-grid small{font-size:9px;color:var(--dash-muted);margin-top:4px;line-height:1.35}.listo-dashboard-v2__earnings-hero{background:var(--dash-blue-soft)!important;border-color:#DCEEFF!important}.listo-dashboard-v2__earnings-hero strong{font-size:27px;color:#1269A8}
.listo-dashboard-v2__quick{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.listo-dashboard-v2__quick a{min-height:40px;display:flex;align-items:center;justify-content:center;padding:8px 10px;border:1px solid var(--dash-line);border-radius:12px;background:#fff;color:#5D6C77;font-size:10px;font-weight:800;text-decoration:none;transition:background .15s ease,border-color .15s ease,color .15s ease}.listo-dashboard-v2__quick a:hover{border-color:#BBDCF7;color:#1677C8;background:#F8FBFE}
@media(max-width:1050px){.listo-dashboard-v2__attention-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.listo-dashboard-v2__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr)}.listo-dashboard-v2__panel--upcoming{grid-row:span 1;grid-column:1 / -1}.listo-dashboard-v2__quick{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){
  .listo-dashboard-v2{padding:0 0 74px}
  .listo-dashboard-v2__header{align-items:flex-start;margin:0 0 14px;padding:0 2px}.listo-dashboard-v2__header h1{font-size:25px}.listo-dashboard-v2__header p{font-size:11px}.listo-dashboard-v2__header-date{display:none}
  .listo-dashboard-v2__mode-pill{margin-bottom:6px;padding:5px 9px;font-size:9px}
  .listo-dashboard-v2__attention,.listo-dashboard-v2__today,.listo-dashboard-v2__panel,.listo-dashboard-v2__earnings{border-radius:17px;padding:14px;box-shadow:0 5px 18px rgba(24,39,75,.04)}
  .listo-dashboard-v2__attention{margin-bottom:10px}.listo-dashboard-v2__attention-grid{grid-template-columns:1fr;gap:7px}.listo-dashboard-v2__attention-card{min-height:62px;padding:10px;border-radius:13px}.listo-dashboard-v2__attention-icon{width:30px;height:30px;flex-basis:30px;border-radius:10px}.listo-dashboard-v2__attention-copy strong{font-size:11px}.listo-dashboard-v2__attention-copy small{font-size:9px}.listo-dashboard-v2__attention-card>b{font-size:9px}
  .listo-dashboard-v2__today{margin-bottom:10px;padding:13px}.listo-dashboard-v2__section-head{margin-bottom:10px}.listo-dashboard-v2__section-head h2{font-size:14px}.listo-dashboard-v2__section-head>div>span{font-size:8px}.listo-dashboard-v2__metrics{grid-template-columns:1fr 1fr;gap:6px}.listo-dashboard-v2__metrics a,.listo-dashboard-v2__metrics a:first-child,.listo-dashboard-v2__metrics a:last-child{border:1px solid #EDF1F4;border-radius:12px;padding:11px 12px;background:#F8FAFC}.listo-dashboard-v2__metrics strong{font-size:20px}.listo-dashboard-v2__metrics span{font-size:8.5px}
  .listo-dashboard-v2__grid{grid-template-columns:1fr;gap:10px;margin-bottom:10px}.listo-dashboard-v2__panel--upcoming{grid-column:auto}.listo-dashboard-v2__panel{padding:13px}.listo-dashboard-v2__booking-list>a{grid-template-columns:47px minmax(0,1fr) auto;gap:8px;padding:11px 0}.listo-dashboard-v2__booking-date{font-size:10px}.listo-dashboard-v2__booking-main strong{font-size:11px}.listo-dashboard-v2__booking-main small{font-size:9px}.listo-dashboard-v2__status{font-size:7.5px;padding:4px 6px;max-width:92px;overflow:hidden;text-overflow:ellipsis}
  .listo-dashboard-v2__listing-stat strong,.listo-dashboard-v2__big-stat strong{font-size:27px}.listo-dashboard-v2__earnings{padding:13px;margin-bottom:10px}.listo-dashboard-v2__earnings-grid{grid-template-columns:1fr;gap:6px}.listo-dashboard-v2__earnings-grid>div{padding:12px;border-radius:12px}.listo-dashboard-v2__earnings-hero strong{font-size:24px}.listo-dashboard-v2__quick{position:fixed;left:10px;right:10px;bottom:10px;z-index:1000;grid-template-columns:repeat(3,1fr);gap:5px;padding:6px;border:1px solid #DDE5EB;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 10px 30px rgba(20,35,50,.16);backdrop-filter:blur(12px)}.listo-dashboard-v2__quick a{min-height:38px;border:0;border-radius:10px;background:transparent;font-size:9px;padding:6px 4px}.listo-dashboard-v2__quick a:first-child{background:#EEF7FF;color:#1677C8}
}
@media(max-width:380px){.listo-dashboard-v2__attention-card>b{display:none}.listo-dashboard-v2__quick a{font-size:8.5px}.listo-dashboard-v2__metrics span{font-size:8px}}

/* NEXT864 — Dashboard editorial/app UI refinement. Dashboard-only presentation layer. */
.listo-dashboard-v2{
  --dash-blue:#2196F3;
  --dash-ink:#17212B;
  --dash-muted:#6E7B86;
  --dash-line:#E3E8EC;
  --dash-soft:#F7F9FA;
  max-width:none!important;
  padding-bottom:52px;
}
.listo-dashboard-v2__header{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin:0 0 26px;padding:0;
}
.listo-dashboard-v2__mode-pill{
  display:inline-flex;align-items:center;gap:7px;margin:0 0 8px;padding:0;
  border:0;background:none;color:#5E6D78;font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
}
.listo-dashboard-v2__mode-dot{width:7px;height:7px;border-radius:50%;background:var(--dash-blue);box-shadow:none}
.listo-dashboard-v2[data-dashboard-mode="parking"] .listo-dashboard-v2__mode-pill{border:0;background:none;color:#5E6D78}
.listo-dashboard-v2[data-dashboard-mode="parking"] .listo-dashboard-v2__mode-dot{background:#F47B20;box-shadow:none}
.listo-dashboard-v2__header h1{margin:0 0 5px;font-size:31px;line-height:1.08;letter-spacing:-.025em;color:var(--dash-ink)}
.listo-dashboard-v2__header p{margin:0;color:var(--dash-muted);font-size:13px;line-height:1.45}
.listo-dashboard-v2__header-date{min-width:110px;padding:0 0 2px;border:0;background:none;text-align:right;box-shadow:none}
.listo-dashboard-v2__header-date span,.listo-dashboard-v2__header-date strong{display:block}
.listo-dashboard-v2__header-date span{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8A969F}
.listo-dashboard-v2__header-date strong{margin-top:4px;font-size:12px;color:var(--dash-ink)}

.listo-dashboard-v2__attention,
.listo-dashboard-v2__today,
.listo-dashboard-v2__panel,
.listo-dashboard-v2__earnings{
  border:0;border-radius:0;background:transparent;box-shadow:none;
}
.listo-dashboard-v2__attention{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--dash-line)}
.listo-dashboard-v2__attention.has-items{background:none;border-color:var(--dash-line)}
.listo-dashboard-v2__attention.is-clear{background:none;border-color:var(--dash-line)}
.listo-dashboard-v2__section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:13px}
.listo-dashboard-v2__section-head>div>span{font-size:9px;font-weight:850;letter-spacing:.11em;text-transform:uppercase;color:#87939C}
.listo-dashboard-v2__section-head h2{margin:4px 0 0;font-size:16px;line-height:1.2;color:var(--dash-ink);letter-spacing:-.01em}
.listo-dashboard-v2__section-head>a{font-size:11px;font-weight:800;color:#1677C8;text-decoration:none;white-space:nowrap}

/* Attention is intentionally a list, not a grid of decorative cards. */
.listo-dashboard-v2__attention-grid{display:flex;flex-direction:column;border-top:1px solid var(--dash-line)}
.listo-dashboard-v2__attention-card{
  display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:12px;
  min-height:58px;padding:10px 2px;border:0;border-bottom:1px solid var(--dash-line);border-radius:0;
  background:transparent;text-decoration:none;color:var(--dash-ink);transition:background .12s ease;
}
.listo-dashboard-v2__attention-card:hover{transform:none;box-shadow:none;background:#FAFBFC}
.listo-dashboard-v2__attention-icon{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#D49A19;box-shadow:none}
.listo-dashboard-v2__attention-card--payment .listo-dashboard-v2__attention-icon{background:#2196F3}
.listo-dashboard-v2__attention-card--inbox .listo-dashboard-v2__attention-icon{background:#6C7C87}
.listo-dashboard-v2__attention-card--case .listo-dashboard-v2__attention-icon{background:#D45858}
.listo-dashboard-v2__attention-copy{min-width:0}
.listo-dashboard-v2__attention-copy strong,.listo-dashboard-v2__attention-copy small{display:block}
.listo-dashboard-v2__attention-copy strong{font-size:12px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listo-dashboard-v2__attention-copy small{margin-top:2px;font-size:10px;line-height:1.35;color:var(--dash-muted)}
.listo-dashboard-v2__attention-card>b{font-size:10px;color:#1677C8;white-space:nowrap}
.listo-dashboard-v2__clear{display:flex;align-items:center;gap:10px;padding:10px 2px}
.listo-dashboard-v2__clear>span{width:7px;height:7px;display:block;border-radius:50%;background:#39A66B;color:transparent;font-size:0}
.listo-dashboard-v2__clear strong,.listo-dashboard-v2__clear small{display:block}
.listo-dashboard-v2__clear strong{font-size:12px}.listo-dashboard-v2__clear small{margin-top:2px;font-size:10px;color:var(--dash-muted)}

/* Today: compact app-style stat rail. */
.listo-dashboard-v2__today{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--dash-line)}
.listo-dashboard-v2__metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--dash-line);border-radius:10px;overflow:hidden;background:#fff}
.listo-dashboard-v2__metrics a{position:relative;padding:14px 16px;background:#fff;text-decoration:none;color:var(--dash-ink);min-width:0}
.listo-dashboard-v2__metrics a+a{border-left:1px solid var(--dash-line)}
.listo-dashboard-v2__metrics a:hover{background:var(--dash-soft)}
.listo-dashboard-v2__metrics strong,.listo-dashboard-v2__metrics span{display:block}
.listo-dashboard-v2__metrics strong{font-size:22px;line-height:1.05;letter-spacing:-.02em}
.listo-dashboard-v2__metrics span{margin-top:4px;font-size:9.5px;color:var(--dash-muted)}

.listo-dashboard-v2__grid{display:grid;grid-template-columns:minmax(0,1.45fr) repeat(2,minmax(0,.8fr));gap:0;margin-bottom:24px;align-items:stretch}
.listo-dashboard-v2__panel{padding:0 18px;min-width:0;border-left:1px solid var(--dash-line)}
.listo-dashboard-v2__panel:first-child{padding-left:0;border-left:0;padding-right:24px}
.listo-dashboard-v2__panel:last-child{padding-right:0}
.listo-dashboard-v2__panel--upcoming{grid-row:span 2}
.listo-dashboard-v2__booking-list{display:flex;flex-direction:column;border-top:1px solid var(--dash-line)}
.listo-dashboard-v2__booking-list>a{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--dash-line);text-decoration:none;color:var(--dash-ink)}
.listo-dashboard-v2__booking-list>a:first-child{border-top:0}
.listo-dashboard-v2__booking-date{font-size:10px;font-weight:850;color:#1677C8;text-transform:uppercase;letter-spacing:.03em}
.listo-dashboard-v2__booking-main{min-width:0}
.listo-dashboard-v2__booking-main strong,.listo-dashboard-v2__booking-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listo-dashboard-v2__booking-main strong{font-size:11.5px}.listo-dashboard-v2__booking-main small{font-size:9.5px;color:var(--dash-muted);margin-top:2px}
.listo-dashboard-v2__status{font-size:8.5px;font-weight:800;padding:0;border-radius:0;background:none;color:#55707F;white-space:nowrap}
.listo-dashboard-v2__status--pending_host_approval,.listo-dashboard-v2__status--pending_approval{background:none;color:#9A6900}
.listo-dashboard-v2__status--host_payment_submitted{background:none;color:#21824F}
.listo-dashboard-v2__empty{padding:18px 0;border-top:1px solid var(--dash-line)}
.listo-dashboard-v2__empty strong,.listo-dashboard-v2__empty span{display:block}.listo-dashboard-v2__empty strong{font-size:11.5px}.listo-dashboard-v2__empty span{margin-top:4px;font-size:10px;color:var(--dash-muted)}

.listo-dashboard-v2__listing-stat{padding:4px 0 14px;border-bottom:1px solid var(--dash-line)}
.listo-dashboard-v2__listing-stat strong,.listo-dashboard-v2__listing-stat span{display:block}
.listo-dashboard-v2__listing-stat strong{font-size:28px;letter-spacing:-.03em}.listo-dashboard-v2__listing-stat span{font-size:9.5px;color:var(--dash-muted)}
.listo-dashboard-v2__split{display:grid;grid-template-columns:1fr 1fr}.listo-dashboard-v2__split>div{padding:12px 6px 2px 0}.listo-dashboard-v2__split>div+div{padding-left:12px;border-left:1px solid var(--dash-line)}
.listo-dashboard-v2__split strong,.listo-dashboard-v2__split span{display:block}.listo-dashboard-v2__split strong{font-size:16px}.listo-dashboard-v2__split span{font-size:9px;color:var(--dash-muted)}
.listo-dashboard-v2__big-stat{padding:4px 0}.listo-dashboard-v2__big-stat strong{font-size:28px;display:block;letter-spacing:-.03em}.listo-dashboard-v2__big-stat span{font-size:9.5px;color:var(--dash-muted)}.listo-dashboard-v2__panel p{font-size:10px;color:var(--dash-muted);margin:4px 0 0;line-height:1.45}

.listo-dashboard-v2__earnings{padding:20px 0 0;margin-bottom:20px;border-top:1px solid var(--dash-line)}
.listo-dashboard-v2__earnings-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:0;border:1px solid var(--dash-line);border-radius:10px;overflow:hidden;background:#fff}
.listo-dashboard-v2__earnings-grid>div{padding:14px 16px;background:#fff}.listo-dashboard-v2__earnings-grid>div+div{border-left:1px solid var(--dash-line)}
.listo-dashboard-v2__earnings-grid span,.listo-dashboard-v2__earnings-grid strong,.listo-dashboard-v2__earnings-grid small{display:block}
.listo-dashboard-v2__earnings-grid span{font-size:9px;color:var(--dash-muted)}.listo-dashboard-v2__earnings-grid strong{font-size:19px;margin-top:4px;letter-spacing:-.02em}.listo-dashboard-v2__earnings-grid small{font-size:9px;color:var(--dash-muted);margin-top:4px;line-height:1.35}
.listo-dashboard-v2__earnings-hero{background:#F8FBFE!important}.listo-dashboard-v2__earnings-hero strong{font-size:25px;color:#1269A8}

.listo-dashboard-v2__quick{display:flex;align-items:center;gap:18px;padding-top:2px}
.listo-dashboard-v2__quick a{padding:4px 0;border:0;border-radius:0;background:none;color:#5D6C77;font-size:10px;font-weight:800;text-decoration:none}
.listo-dashboard-v2__quick a:hover{color:#1677C8;background:none}

@media(max-width:1050px){
  .listo-dashboard-v2__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr)}
  .listo-dashboard-v2__panel--upcoming{grid-row:span 1;grid-column:1 / -1;padding:0 0 20px;margin-bottom:20px;border-left:0;border-bottom:1px solid var(--dash-line)}
  .listo-dashboard-v2__panel:nth-child(2){padding-left:0}
  .listo-dashboard-v2__quick{flex-wrap:wrap;gap:14px}
}
@media(max-width:700px){
  .listo-dashboard-v2{padding:0 0 24px}
  .listo-dashboard-v2__header{align-items:flex-start;margin:0 0 20px;padding:0 1px}
  .listo-dashboard-v2__header h1{font-size:25px}.listo-dashboard-v2__header p{font-size:11px;max-width:260px}.listo-dashboard-v2__header-date{display:none}
  .listo-dashboard-v2__mode-pill{margin-bottom:6px;font-size:9px}
  .listo-dashboard-v2__attention,.listo-dashboard-v2__today{padding-bottom:18px;margin-bottom:18px}
  .listo-dashboard-v2__section-head{margin-bottom:10px}.listo-dashboard-v2__section-head h2{font-size:14px}.listo-dashboard-v2__section-head>div>span{font-size:8px}
  .listo-dashboard-v2__attention-card{grid-template-columns:8px minmax(0,1fr) auto;min-height:60px;padding:10px 1px;gap:9px}
  .listo-dashboard-v2__attention-icon{width:6px;height:6px;flex-basis:6px}.listo-dashboard-v2__attention-copy strong{font-size:11px}.listo-dashboard-v2__attention-copy small{font-size:9px}.listo-dashboard-v2__attention-card>b{font-size:9px}
  .listo-dashboard-v2__metrics{grid-template-columns:1fr 1fr;border-radius:9px}.listo-dashboard-v2__metrics a{padding:12px 13px}.listo-dashboard-v2__metrics a:nth-child(3){border-left:0;border-top:1px solid var(--dash-line)}.listo-dashboard-v2__metrics a:nth-child(4){border-top:1px solid var(--dash-line)}.listo-dashboard-v2__metrics strong{font-size:20px}.listo-dashboard-v2__metrics span{font-size:8.5px}
  .listo-dashboard-v2__grid{grid-template-columns:1fr;gap:0;margin-bottom:18px}
  .listo-dashboard-v2__panel,.listo-dashboard-v2__panel:first-child,.listo-dashboard-v2__panel:last-child,.listo-dashboard-v2__panel:nth-child(2){padding:18px 0;border-left:0;border-bottom:1px solid var(--dash-line)}
  .listo-dashboard-v2__panel--upcoming{grid-column:auto;padding-top:0;margin-bottom:0;border-bottom:1px solid var(--dash-line)}
  .listo-dashboard-v2__booking-list>a{grid-template-columns:55px minmax(0,1fr) auto;gap:8px;padding:11px 0}.listo-dashboard-v2__booking-date{font-size:9px}.listo-dashboard-v2__booking-main strong{font-size:11px}.listo-dashboard-v2__booking-main small{font-size:9px}.listo-dashboard-v2__status{font-size:7.5px;max-width:85px;overflow:hidden;text-overflow:ellipsis}
  .listo-dashboard-v2__listing-stat strong,.listo-dashboard-v2__big-stat strong{font-size:26px}
  .listo-dashboard-v2__earnings{padding:18px 0 0;margin-bottom:18px}.listo-dashboard-v2__earnings-grid{grid-template-columns:1fr;border-radius:9px}.listo-dashboard-v2__earnings-grid>div{padding:12px 13px}.listo-dashboard-v2__earnings-grid>div+div{border-left:0;border-top:1px solid var(--dash-line)}.listo-dashboard-v2__earnings-hero strong{font-size:23px}
  .listo-dashboard-v2__quick{position:sticky;bottom:0;z-index:20;display:flex;gap:0;margin:0 -1px;padding:6px 2px;border:1px solid #DCE4EA;border-radius:12px;background:#fff;box-shadow:0 4px 18px rgba(20,35,50,.08);overflow-x:auto;-webkit-overflow-scrolling:touch}
  .listo-dashboard-v2__quick a{flex:0 0 auto;min-width:72px;text-align:center;padding:7px 8px;font-size:9px;border-right:1px solid #EDF1F4}.listo-dashboard-v2__quick a:last-child{border-right:0}
}
@media(max-width:380px){.listo-dashboard-v2__attention-card>b{display:none}.listo-dashboard-v2__quick a{min-width:66px;font-size:8.5px}}

/* NEXT865 — Listo Floating Dashboard Dock + contained panel refinement. Dashboard-only. */
.listo-dashboard-v2{
  --dash-blue:#2196F3;
  --dash-blue-dark:#1677C8;
  --dash-ink:#17232D;
  --dash-muted:#6F7D88;
  --dash-border:#E3E9EE;
  --dash-soft:#F7FAFC;
  max-width:none!important;
  padding-bottom:112px!important;
}
.listo-dashboard-v2__header{
  margin-bottom:22px!important;
}
.listo-dashboard-v2__header h1{font-size:32px!important;letter-spacing:-.025em!important}
.listo-dashboard-v2__mode-pill{border-radius:10px!important;padding:6px 9px!important}
.listo-dashboard-v2__header-date{border-radius:12px!important;box-shadow:none!important}
.listo-dashboard-v2__attention,
.listo-dashboard-v2__today,
.listo-dashboard-v2__panel,
.listo-dashboard-v2__earnings{
  border:1px solid var(--dash-border)!important;
  border-radius:16px!important;
  box-shadow:0 4px 16px rgba(20,35,48,.045)!important;
}
.listo-dashboard-v2__attention{padding:20px!important;margin-bottom:16px!important}
.listo-dashboard-v2__attention.has-items{background:#FFFDF8!important;border-color:#EEDDB8!important}
.listo-dashboard-v2__attention-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.listo-dashboard-v2__attention-card{
  min-height:72px!important;border-radius:12px!important;padding:11px 13px!important;
  box-shadow:none!important;transform:none!important;
}
.listo-dashboard-v2__attention-card:hover{transform:none!important;box-shadow:0 5px 14px rgba(20,35,48,.06)!important}
.listo-dashboard-v2__attention-icon{width:30px!important;height:30px!important;flex-basis:30px!important;border-radius:9px!important}
.listo-dashboard-v2__today{padding:18px!important;margin-bottom:16px!important}
.listo-dashboard-v2__metrics{border:0!important;border-radius:0!important;gap:10px!important;overflow:visible!important;background:transparent!important}
.listo-dashboard-v2__metrics a{border:1px solid var(--dash-border)!important;border-radius:12px!important;padding:13px 14px!important;box-shadow:none!important}
.listo-dashboard-v2__metrics a+a{border-left:1px solid var(--dash-border)!important}
.listo-dashboard-v2__metrics a:hover{background:#fff!important;border-color:#CFE5F6!important}
.listo-dashboard-v2__metrics strong{font-size:24px!important;letter-spacing:-.02em}
.listo-dashboard-v2__grid{grid-template-columns:minmax(0,1.45fr) minmax(270px,.8fr)!important;gap:16px!important;margin-bottom:16px!important}
.listo-dashboard-v2__panel{padding:18px!important}
.listo-dashboard-v2__panel--upcoming{grid-row:span 2}
.listo-dashboard-v2__booking-list>a{padding:13px 0!important}
.listo-dashboard-v2__booking-list>a:first-child{border-top:0!important}
.listo-dashboard-v2__status{border-radius:8px!important;padding:5px 8px!important}
.listo-dashboard-v2__listing-stat strong{font-size:30px!important}
.listo-dashboard-v2__big-stat strong{font-size:30px!important}
.listo-dashboard-v2__earnings{padding:18px!important;margin-bottom:0!important}
.listo-dashboard-v2__earnings-grid{border:0!important;border-radius:0!important;gap:10px!important;overflow:visible!important;background:transparent!important}
.listo-dashboard-v2__earnings-grid>div{border:1px solid var(--dash-border);border-radius:12px!important;padding:14px!important}
.listo-dashboard-v2__earnings-hero{background:#F7FBFF!important;border-color:#D8EAF8!important}

/* Floating navigation dock. It belongs to the Dashboard only; global Host navigation is untouched. */
.listo-dashboard-v2__dock{
  position:fixed!important;
  z-index:10020!important;
  left:50%!important;
  bottom:18px!important;
  transform:translateX(-50%)!important;
  display:grid!important;
  grid-auto-flow:column!important;
  grid-auto-columns:minmax(92px,1fr)!important;
  align-items:stretch!important;
  min-width:500px!important;
  max-width:680px!important;
  padding:7px!important;
  border:1px solid rgba(214,223,230,.95)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 12px 34px rgba(20,35,48,.14),0 2px 8px rgba(20,35,48,.06)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
.listo-dashboard-v2__dock a,
.listo-dashboard-v2__dock button{
  position:relative!important;
  min-height:50px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  border:0!important;
  border-radius:12px!important;
  background:transparent!important;
  color:#687781!important;
  text-decoration:none!important;
  font:inherit!important;
  font-size:10px!important;
  font-weight:750!important;
  cursor:pointer!important;
}
.listo-dashboard-v2__dock a:hover,
.listo-dashboard-v2__dock button:hover{background:#F6FAFD!important;color:var(--dash-blue-dark)!important}
.listo-dashboard-v2__dock a.is-active{background:#EAF5FF!important;color:var(--dash-blue-dark)!important}
.listo-dashboard-v2__dock-icon{font-size:17px!important;line-height:1!important;font-weight:700!important}
.listo-dashboard-v2__dock-badge{
  position:absolute!important;top:7px!important;right:calc(50% - 25px)!important;
  min-width:15px!important;height:15px!important;padding:0 4px!important;
  display:grid!important;place-items:center!important;border-radius:999px!important;
  background:#E34B4B!important;color:#fff!important;font-size:8px!important;line-height:1!important;
}
.listo-dashboard-v2__dock-more{appearance:none!important;-webkit-appearance:none!important}

@media(max-width:800px){
  .listo-dashboard-v2{padding:0 2px 108px!important}
  .listo-dashboard-v2__header{align-items:flex-start!important;margin-bottom:16px!important}
  .listo-dashboard-v2__header h1{font-size:26px!important}
  .listo-dashboard-v2__header-date{display:none!important}
  .listo-dashboard-v2__attention,
  .listo-dashboard-v2__today,
  .listo-dashboard-v2__panel,
  .listo-dashboard-v2__earnings{border-radius:15px!important;padding:15px!important}
  .listo-dashboard-v2__attention-grid{grid-template-columns:1fr!important}
  .listo-dashboard-v2__attention-card{min-height:70px!important}
  .listo-dashboard-v2__metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .listo-dashboard-v2__metrics a{padding:12px!important}
  .listo-dashboard-v2__metrics strong{font-size:22px!important}
  .listo-dashboard-v2__grid{grid-template-columns:1fr!important;gap:12px!important}
  .listo-dashboard-v2__panel--upcoming{grid-row:auto}
  .listo-dashboard-v2__booking-list>a{grid-template-columns:52px minmax(0,1fr) auto!important;gap:9px!important}
  .listo-dashboard-v2__status{font-size:8px!important;padding:5px 6px!important}
  .listo-dashboard-v2__earnings-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .listo-dashboard-v2__earnings-grid>div:first-child{grid-column:1/-1}
  .listo-dashboard-v2__dock{
    left:12px!important;right:12px!important;bottom:12px!important;transform:none!important;
    width:auto!important;min-width:0!important;max-width:none!important;
    grid-auto-columns:1fr!important;padding:6px!important;border-radius:18px!important;
  }
  .listo-dashboard-v2__dock a,
  .listo-dashboard-v2__dock button{min-height:48px!important;font-size:9px!important}
  .listo-dashboard-v2__dock-icon{font-size:16px!important}
  .listo-dashboard-v2__dock-badge{right:calc(50% - 23px)!important;top:5px!important}
}

/* NEXT866 — Dashboard floating dock refinement. Dashboard-only. */
body:has(.listo-dashboard-v2) .listo-host-primary-nav{display:none!important}
body:has(.listo-dashboard-v2) .listo-host-context-nav{margin-bottom:22px!important}

/* Attention panel: warmer, more visible, but still light and restrained. */
.listo-dashboard-v2__attention.has-items{
  background:#FFF6DE!important;
  border-color:#F0D18A!important;
  box-shadow:0 5px 20px rgba(173,126,24,.07)!important;
}
.listo-dashboard-v2__attention.has-items .listo-dashboard-v2__section-head h2{color:#24313B!important}

/* Fix the attention row/icon collision seen in NEXT865. */
.listo-dashboard-v2__attention-card{
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
}
.listo-dashboard-v2__attention-icon{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  flex:none!important;
  display:grid!important;
  place-items:center!important;
  border-radius:9px!important;
  background:#E6A817!important;
}
.listo-dashboard-v2__attention-icon:before{content:'!';font-size:14px;font-weight:900;color:#fff;line-height:1}
.listo-dashboard-v2__attention-card--payment .listo-dashboard-v2__attention-icon{background:#2196F3!important}
.listo-dashboard-v2__attention-card--payment .listo-dashboard-v2__attention-icon:before{content:'₱';font-size:12px}
.listo-dashboard-v2__attention-card--inbox .listo-dashboard-v2__attention-icon{background:#667985!important}
.listo-dashboard-v2__attention-card--inbox .listo-dashboard-v2__attention-icon:before{content:'✉';font-size:12px}
.listo-dashboard-v2__attention-card--case .listo-dashboard-v2__attention-icon{background:#D45858!important}
.listo-dashboard-v2__attention-card--case .listo-dashboard-v2__attention-icon:before{content:'!';font-size:13px}
.listo-dashboard-v2__attention-copy{min-width:0!important}
.listo-dashboard-v2__attention-copy strong{white-space:normal!important}
.listo-dashboard-v2__attention-card>b{align-self:center!important}

/* The floating More sheet is part of the Dashboard dock, not the global Host nav. */
.listo-dashboard-v2__more-backdrop{
  position:fixed!important;inset:0!important;z-index:10010!important;
  background:rgba(20,31,39,.14)!important;opacity:0!important;visibility:hidden!important;
  pointer-events:none!important;transition:opacity .16s ease,visibility .16s ease!important;
}
.listo-dashboard-v2__more-panel{
  position:fixed!important;left:50%!important;bottom:92px!important;transform:translate(-50%,10px)!important;
  z-index:10030!important;width:min(620px,calc(100vw - 32px))!important;
  padding:16px!important;border:1px solid #DCE4EA!important;border-radius:18px!important;
  background:#fff!important;box-shadow:0 18px 45px rgba(20,35,48,.18),0 3px 12px rgba(20,35,48,.07)!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease!important;
}
.listo-dashboard-v2.is-more-open .listo-dashboard-v2__more-backdrop{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.listo-dashboard-v2.is-more-open .listo-dashboard-v2__more-panel{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translate(-50%,0)!important}
.listo-dashboard-v2__more-head{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:2px 3px 12px!important;border-bottom:1px solid #EDF1F4!important}
.listo-dashboard-v2__more-head span,.listo-dashboard-v2__more-head strong{display:block!important}
.listo-dashboard-v2__more-head span{font-size:8px!important;font-weight:850!important;letter-spacing:.11em!important;color:#87939C!important}
.listo-dashboard-v2__more-head strong{margin-top:3px!important;font-size:16px!important;color:#17232D!important}
.listo-dashboard-v2__more-close{width:32px!important;height:32px!important;border:0!important;border-radius:10px!important;background:#F4F7F9!important;color:#5E6D78!important;font-size:22px!important;line-height:1!important;cursor:pointer!important}
.listo-dashboard-v2__more-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;padding-top:10px!important}
.listo-dashboard-v2__more-item{display:grid!important;grid-template-columns:34px minmax(0,1fr) 14px!important;align-items:center!important;gap:9px!important;min-height:58px!important;padding:9px!important;border:1px solid #E8EDF1!important;border-radius:12px!important;background:#fff!important;color:#17232D!important;text-decoration:none!important}
.listo-dashboard-v2__more-item:hover{border-color:#CFE5F6!important;background:#F8FBFE!important}
.listo-dashboard-v2__more-icon{width:34px!important;height:34px!important;display:grid!important;place-items:center!important;border-radius:10px!important;background:#F1F6F9!important;color:#4D6573!important}
.listo-dashboard-v2__more-icon svg{width:18px!important;height:18px!important;display:block!important}
.listo-dashboard-v2__more-item>span:nth-child(2){min-width:0!important}
.listo-dashboard-v2__more-item strong,.listo-dashboard-v2__more-item small{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.listo-dashboard-v2__more-item strong{font-size:10.5px!important;line-height:1.25!important}
.listo-dashboard-v2__more-item small{margin-top:2px!important;font-size:8.5px!important;color:#7A8790!important}
.listo-dashboard-v2__more-item>b{font-size:18px!important;font-weight:500!important;color:#9AA6AE!important;text-align:right!important}

/* Cleaner, consistent line icons for the floating dock. */
.listo-dashboard-v2__dock-icon{width:20px!important;height:20px!important;display:grid!important;place-items:center!important;font-size:0!important}
.listo-dashboard-v2__dock-icon svg{width:19px!important;height:19px!important;display:block!important}
.listo-dashboard-v2__dock a.is-active .listo-dashboard-v2__dock-icon{color:#1677C8!important}

@media(max-width:800px){
  body:has(.listo-dashboard-v2) .listo-host-context-nav{margin-bottom:16px!important}
  .listo-dashboard-v2__attention.has-items{background:#FFF4D4!important}
  .listo-dashboard-v2__attention-card{grid-template-columns:30px minmax(0,1fr) auto!important;gap:10px!important;min-height:68px!important}
  .listo-dashboard-v2__attention-icon{width:30px!important;height:30px!important;min-width:30px!important}
  .listo-dashboard-v2__more-panel{left:12px!important;right:12px!important;bottom:88px!important;transform:translateY(10px)!important;width:auto!important;padding:13px!important;border-radius:18px!important}
  .listo-dashboard-v2.is-more-open .listo-dashboard-v2__more-panel{transform:translateY(0)!important}
  .listo-dashboard-v2__more-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .listo-dashboard-v2__more-item{min-height:54px!important;padding:8px!important}
  .listo-dashboard-v2__dock{bottom:12px!important}
}
@media(max-width:380px){
  .listo-dashboard-v2__more-grid{grid-template-columns:1fr!important}
}


/* ==========================================================================\n   NEXT867 — Staycation Bookings: Listo Host app workspace\n   Scoped to this page only. Parking Bookings keeps its dedicated UI.\n   ========================================================================== */
body.listo-host-staycation-bookings-app .listo-host-primary-nav{display:none!important}
body.listo-host-staycation-bookings-app .listo-host-context-nav{margin-bottom:22px!important}
body.listo-host-staycation-bookings-app .listo-bookings-page-shell{padding-bottom:112px!important}

.listo-host-app-page__header{
  display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:24px!important;
  margin:4px 0 24px!important;padding:0 2px!important;
}
.listo-host-app-page__header-copy{min-width:0!important}
.listo-host-app-page__eyebrow{display:flex!important;align-items:center!important;gap:8px!important;margin:0 0 8px!important;font-size:11px!important;font-weight:850!important;letter-spacing:.12em!important;color:#687A86!important}
.listo-host-app-page__eyebrow>span{width:8px!important;height:8px!important;border-radius:50%!important;background:#2196F3!important;display:block!important}
.listo-host-app-page__header h1{margin:0!important;font-size:34px!important;line-height:1.04!important;letter-spacing:-.035em!important;color:#14232F!important;font-weight:780!important}
.listo-host-app-page__header p{margin:8px 0 0!important;font-size:15px!important;line-height:1.45!important;color:#70818D!important}
.listo-host-app-page__header-date{text-align:right!important;flex:none!important}
.listo-host-app-page__header-date span,.listo-host-app-page__header-date strong{display:block!important}
.listo-host-app-page__header-date span{font-size:9px!important;font-weight:850!important;letter-spacing:.1em!important;color:#84919A!important;margin-bottom:5px!important}
.listo-host-app-page__header-date strong{font-size:15px!important;color:#17232D!important}

.listo-bookings-workspace--host-focused{max-width:none!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-intro{
  display:block!important;margin:0 0 14px!important;padding:0!important;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-intro__copy{display:none!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary,
.listo-bookings-workspace--host-focused .listo-host-bookings-all-clear{
  min-height:76px!important;padding:16px 18px!important;border:1px solid #F0D18A!important;border-radius:16px!important;
  background:#FFF6DE!important;box-shadow:0 5px 18px rgba(173,126,24,.06)!important;
  display:grid!important;grid-template-columns:42px minmax(0,1fr) auto!important;align-items:center!important;gap:14px!important;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary__count{
  width:42px!important;height:42px!important;min-width:42px!important;display:grid!important;place-items:center!important;
  border-radius:12px!important;background:#E6A817!important;color:#fff!important;font-size:17px!important;font-weight:850!important;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary > span:nth-child(2),
.listo-bookings-workspace--host-focused .listo-host-bookings-all-clear > span:nth-child(2){min-width:0!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary strong,
.listo-bookings-workspace--host-focused .listo-host-bookings-all-clear strong{display:block!important;font-size:15px!important;line-height:1.25!important;color:#182631!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary small,
.listo-bookings-workspace--host-focused .listo-host-bookings-all-clear small{display:block!important;margin-top:3px!important;font-size:12px!important;line-height:1.35!important;color:#6D5B31!important}
.listo-bookings-workspace--host-focused .listo-action-hero__link{border:0!important;background:transparent!important;color:#1478C9!important;font-size:12px!important;font-weight:800!important;cursor:pointer!important;white-space:nowrap!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-all-clear{border-color:#DCE8E2!important;background:#F4FAF7!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-all-clear__icon{width:42px!important;height:42px!important;border-radius:12px!important;background:#E5F4EC!important;color:#258A5B!important;display:grid!important;place-items:center!important;font-size:18px!important;font-weight:850!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-all-clear small{color:#587267!important}

.listo-bookings-workspace--host-focused .listo-host-bookings-summary{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important;margin:0 0 14px!important;padding:0!important;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item{
  min-width:0!important;padding:15px!important;border:1px solid #E2E8ED!important;border-radius:14px!important;background:#fff!important;
  box-shadow:0 4px 14px rgba(28,45,58,.035)!important;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item span,
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item small{display:block!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item span{font-size:10px!important;font-weight:750!important;color:#75848E!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item strong{display:block!important;margin:5px 0 1px!important;font-size:25px!important;line-height:1!important;letter-spacing:-.03em!important;color:#172631!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item small{font-size:9px!important;color:#93A0A8!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item--attention{border-color:#F0D18A!important;background:#FFFDF7!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item--attention strong{color:#B87800!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item--pending{border-color:#D7E8F7!important;background:#F8FBFE!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-summary__item--pending strong{color:#1677C8!important}

.listo-bookings-workspace--host-focused .listo-host-bookings-controls{
  margin:0 0 14px!important;padding:10px!important;border:1px solid #E2E8ED!important;border-radius:14px!important;background:#fff!important;
  box-shadow:0 4px 14px rgba(28,45,58,.03)!important;
}
.listo-bookings-workspace--host-focused .listo-bookings-filters{gap:10px!important}
.listo-bookings-workspace--host-focused .listo-bookings-filter-group{gap:5px!important}
.listo-bookings-workspace--host-focused .listo-bookings-filter{
  min-height:36px!important;padding:0 12px!important;border:1px solid transparent!important;border-radius:10px!important;background:transparent!important;
  color:#667781!important;font-size:11px!important;font-weight:760!important;
}
.listo-bookings-workspace--host-focused .listo-bookings-filter:hover{background:#F6FAFD!important;color:#1B6FAE!important}
.listo-bookings-workspace--host-focused .listo-bookings-filter.is-active{background:#EAF5FF!important;color:#1677C8!important;border-color:#D5E9F9!important}
.listo-bookings-workspace--host-focused .listo-bookings-filter__count{margin-left:5px!important;background:#DCEAF4!important;color:#3B6178!important;border-radius:999px!important;padding:2px 5px!important;font-size:8px!important}
.listo-bookings-workspace--host-focused .listo-bookings-filter.is-active .listo-bookings-filter__count{background:#CBE5F8!important;color:#1677C8!important}
.listo-bookings-workspace--host-focused .listo-bookings-filter-select{gap:6px!important}
.listo-bookings-workspace--host-focused .listo-bookings-filter-select span{font-size:9px!important;font-weight:800!important;letter-spacing:.04em!important;color:#82919A!important}
.listo-bookings-workspace--host-focused .listo-bookings-filter-select select{min-height:36px!important;border:1px solid #DCE4E9!important;border-radius:10px!important;background:#fff!important;color:#2B3A44!important;font-size:11px!important;padding:0 30px 0 10px!important}

.listo-bookings-workspace--host-focused .listo-bookings-results-panel{padding:0!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-request-section,
.listo-bookings-workspace--host-focused .listo-host-bookings-pending-section,
.listo-bookings-workspace--host-focused .listo-host-bookings-main-grid{
  padding:16px!important;border:1px solid #E2E8ED!important;border-radius:16px!important;background:#fff!important;
  box-shadow:0 5px 18px rgba(28,45,58,.035)!important;
}
.listo-bookings-workspace--host-focused .listo-host-bookings-request-section h2,
.listo-bookings-workspace--host-focused .listo-host-bookings-pending-section h2{margin:0!important;font-size:16px!important;color:#182631!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-request-section > p{margin:5px 0 14px!important;font-size:11px!important;color:#75848E!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-section-heading{margin-bottom:12px!important}
.listo-bookings-workspace--host-focused .listo-host-bookings-section-heading .listo-trip-section__count{background:#EDF4F8!important;color:#527081!important;border-radius:999px!important;padding:4px 8px!important;font-size:9px!important;font-weight:800!important}

/* Booking cards: retain all existing actions/markup, but visually align them with the new Dashboard panels. */
.listo-host-staycation-bookings-app .listo-trip-grid{gap:12px!important}
.listo-host-staycation-bookings-app .listo-trip-card{
  border:1px solid #E0E7EC!important;border-radius:14px!important;background:#fff!important;overflow:hidden!important;
  box-shadow:0 4px 14px rgba(28,45,58,.035)!important;
}
.listo-host-staycation-bookings-app .listo-trip-card:hover{border-color:#CFE2EF!important;box-shadow:0 8px 20px rgba(28,45,58,.06)!important}
.listo-host-staycation-bookings-app .listo-trip-card__photo{background:#F2F6F8!important}
.listo-host-staycation-bookings-app .listo-host-bookings-card__body{padding:14px!important}
.listo-host-staycation-bookings-app .listo-host-booking-card__kicker{font-size:9px!important;letter-spacing:.08em!important;text-transform:uppercase!important;font-weight:850!important;margin-bottom:6px!important;color:#7C8A93!important}
.listo-host-staycation-bookings-app .listo-host-booking-card__kicker--request{color:#B87800!important}
.listo-host-staycation-bookings-app .listo-host-booking-card__kicker--pending{color:#1677C8!important}
.listo-host-staycation-bookings-app .listo-host-booking-card__kicker--upcoming{color:#258A5B!important}
.listo-host-staycation-bookings-app .listo-trip-card__title{font-size:15px!important;line-height:1.25!important;color:#172631!important}
.listo-host-staycation-bookings-app .listo-caption{font-size:10.5px!important;line-height:1.4!important;color:#71808A!important}
.listo-host-staycation-bookings-app .listo-status-badge{border-radius:8px!important;padding:5px 8px!important;font-size:9px!important;font-weight:800!important}
.listo-host-staycation-bookings-app .listo-booking-request-actions{display:flex!important;gap:7px!important;margin-top:12px!important}
.listo-host-staycation-bookings-app .listo-booking-request-actions .listo-btn{min-height:38px!important;border-radius:9px!important;font-size:11px!important;font-weight:800!important}
.listo-host-staycation-bookings-app .listo-host-booking-request-timer{margin-top:10px!important;padding:8px 9px!important;border-radius:9px!important;background:#FFF8E8!important;border:1px solid #F3DEAA!important}
.listo-host-staycation-bookings-app .listo-host-booking-request-timer__label{font-size:8px!important;color:#856B2F!important}
.listo-host-staycation-bookings-app .listo-host-booking-request-timer strong{font-size:10px!important;color:#6E5317!important}

/* Floating dock uses the same Dashboard component classes, but belongs to Bookings too. */
body.listo-host-staycation-bookings-app .listo-dashboard-v2__dock{display:grid!important}
body.listo-host-staycation-bookings-app .listo-dashboard-v2__more-backdrop{display:block!important}
body.listo-host-staycation-bookings-app .listo-dashboard-v2__more-panel{display:block!important}
body.listo-host-staycation-bookings-app .listo-host-app-page__header + .listo-bookings-workspace--host-focused{margin-top:0!important}

@media(max-width:900px){
  .listo-host-app-page__header{margin-bottom:18px!important}
  .listo-host-app-page__header h1{font-size:30px!important}
  .listo-bookings-workspace--host-focused .listo-host-bookings-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item:nth-child(4),
  .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item:nth-child(5){display:none!important}
}
@media(max-width:800px){
  body.listo-host-staycation-bookings-app .listo-host-context-nav{margin-bottom:16px!important}
  body.listo-host-staycation-bookings-app .listo-bookings-page-shell{padding:0 2px 112px!important}
  .listo-host-app-page__header{align-items:flex-start!important;margin:0 0 14px!important;padding:0 2px!important}
  .listo-host-app-page__header h1{font-size:27px!important}
  .listo-host-app-page__header p{font-size:13px!important}
  .listo-host-app-page__header-date{display:none!important}
  .listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary,
  .listo-bookings-workspace--host-focused .listo-host-bookings-all-clear{grid-template-columns:36px minmax(0,1fr) auto!important;gap:10px!important;min-height:68px!important;padding:12px!important;border-radius:14px!important}
  .listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary__count,
  .listo-bookings-workspace--host-focused .listo-host-bookings-all-clear__icon{width:36px!important;height:36px!important;min-width:36px!important;border-radius:10px!important}
  .listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary strong,
  .listo-bookings-workspace--host-focused .listo-host-bookings-all-clear strong{font-size:13px!important}
  .listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary small,
  .listo-bookings-workspace--host-focused .listo-host-bookings-all-clear small{font-size:10px!important}
  .listo-bookings-workspace--host-focused .listo-host-bookings-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item{padding:11px 9px!important;border-radius:12px!important}
  .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item strong{font-size:21px!important}
  .listo-bookings-workspace--host-focused .listo-host-bookings-controls{padding:8px!important;border-radius:12px!important}
  .listo-bookings-workspace--host-focused .listo-bookings-filters{display:block!important}
  .listo-bookings-workspace--host-focused .listo-bookings-filter-group{overflow-x:auto!important;display:flex!important;padding-bottom:3px!important}
  .listo-bookings-workspace--host-focused .listo-bookings-filter{white-space:nowrap!important;flex:none!important;min-height:34px!important;padding:0 10px!important}
  .listo-bookings-workspace--host-focused .listo-bookings-filter-select{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;margin-top:7px!important}
  .listo-bookings-workspace--host-focused .listo-bookings-filter-select select{width:100%!important}
  .listo-bookings-workspace--host-focused .listo-host-bookings-request-section,
  .listo-bookings-workspace--host-focused .listo-host-bookings-pending-section,
  .listo-bookings-workspace--host-focused .listo-host-bookings-main-grid{padding:12px!important;border-radius:14px!important}
  .listo-host-staycation-bookings-app .listo-trip-grid{grid-template-columns:1fr!important}
  .listo-host-staycation-bookings-app .listo-trip-card__photo{height:170px!important}
  .listo-host-staycation-bookings-app .listo-host-booking-request-timer{display:flex!important;justify-content:space-between!important;align-items:center!important}
  body.listo-host-staycation-bookings-app .listo-dashboard-v2__more-panel{left:12px!important;right:12px!important;bottom:88px!important;width:auto!important}
}
/* NEXT867 — apply the existing More-sheet open state to the Bookings app shell. */
.listo-host-app-page.is-more-open .listo-dashboard-v2__more-backdrop{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.listo-host-app-page.is-more-open .listo-dashboard-v2__more-panel{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translate(-50%,0)!important}
@media(max-width:800px){
  .listo-host-app-page.is-more-open .listo-dashboard-v2__more-panel{transform:translateY(0)!important}
}

/* ==========================================================================
   NEXT868 — Staycation Bookings refinement
   Standard Listo page title + compact mobile booking media rows.
   Scoped to Staycation Bookings only.
   ========================================================================== */
body.listo-host-staycation-bookings-app .listo-host-bookings-title-row{
  margin:0 0 20px!important;
}
body.listo-host-staycation-bookings-app .listo-host-bookings-title-row h1{
  margin:0!important;
  font-size:26px!important;
  line-height:1.15!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
  color:#172631!important;
}

@media(max-width:800px){
  body.listo-host-staycation-bookings-app .listo-host-bookings-title-row{
    margin:0 0 16px!important;
    padding:0!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-title-row h1{
    font-size:22px!important;
    line-height:1.15!important;
  }

  /* Replace the tall desktop property image with an app-style compact thumbnail. */
  body.listo-host-staycation-bookings-app .listo-trip-grid .listo-trip-card{
    display:grid!important;
    grid-template-columns:84px minmax(0,1fr)!important;
    align-items:start!important;
    gap:12px!important;
    padding:12px!important;
    overflow:visible!important;
    border-radius:16px!important;
  }
  body.listo-host-staycation-bookings-app .listo-trip-grid .listo-trip-card__photo{
    width:84px!important;
    height:84px!important;
    min-width:84px!important;
    margin:0!important;
    border-radius:12px!important;
    overflow:hidden!important;
    background:#F2F6F8!important;
  }
  body.listo-host-staycation-bookings-app .listo-trip-grid .listo-trip-card__photo img{
    width:100%!important;
    height:100%!important;
    display:block!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  body.listo-host-staycation-bookings-app .listo-trip-grid .listo-host-bookings-card__body{
    min-width:0!important;
    padding:1px 0 0!important;
  }
  body.listo-host-staycation-bookings-app .listo-trip-grid .listo-trip-card__title{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
    font-size:15px!important;
    line-height:1.25!important;
  }
  body.listo-host-staycation-bookings-app .listo-trip-grid .listo-caption{
    font-size:10.5px!important;
    line-height:1.35!important;
  }
  body.listo-host-staycation-bookings-app .listo-trip-grid .listo-host-booking-request-timer{
    grid-column:auto!important;
    margin-top:10px!important;
    padding:8px 9px!important;
  }
  body.listo-host-staycation-bookings-app .listo-trip-grid .listo-booking-request-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  body.listo-host-staycation-bookings-app .listo-trip-grid .listo-booking-request-actions .listo-btn{
    width:100%!important;
    min-height:40px!important;
  }

  /* The fixed dock must never cover the final booking card/action area. */
  body.listo-host-staycation-bookings-app .listo-bookings-page-shell{
    padding-bottom:132px!important;
  }
}

/* NEXT869 — Staycation Calendar & Pricing: Listo Host app workspace.
 * Presentation-only. Existing calendar/rules AJAX and pricing logic remain intact. */
body:has(.listo-host-staycation-calendar-app) .listo-host-primary-nav{display:none!important}
body:has(.listo-host-staycation-calendar-app) .listo-host-context-nav{margin-bottom:22px!important}
.listo-host-staycation-calendar-app{padding-bottom:116px!important}
.listo-host-staycation-calendar-app .listo-host-calendar-page__header{margin:4px 0 24px!important;padding:0 2px!important;align-items:flex-end!important}
.listo-host-staycation-calendar-app .listo-host-app-page__header h1{font-size:34px!important;line-height:1.04!important;letter-spacing:-.035em!important;font-weight:780!important;color:#14232F!important}
.listo-host-staycation-calendar-app .listo-host-app-page__header p{margin:8px 0 0!important;font-size:15px!important;color:#70818D!important}
.listo-host-staycation-calendar-app .listo-cp-listing-bar{border-radius:16px!important;border-color:#E2E8ED!important;box-shadow:0 6px 20px rgba(28,45,58,.035)!important;margin-bottom:22px!important}
.listo-host-staycation-calendar-app .listo-cp-listing-selector{padding:18px 20px!important}
.listo-host-staycation-calendar-app .listo-cp-listing-summary{padding:14px 18px!important}
.listo-host-staycation-calendar-app .listo-cp-tabs{border:1px solid #E2E8ED!important;border-radius:14px!important;background:#fff!important;padding:5px!important;gap:4px!important;margin-bottom:18px!important;box-shadow:0 4px 14px rgba(28,45,58,.025)!important}
.listo-host-staycation-calendar-app .listo-cp-tabs a{border:0!important;border-radius:10px!important;padding:10px 14px!important;color:#667680!important;font-size:12px!important}
.listo-host-staycation-calendar-app .listo-cp-tabs a.is-active{background:#EAF5FF!important;color:#1478C9!important}
.listo-host-staycation-calendar-app .listo-cp-calendar-card,.listo-host-staycation-calendar-app .listo-cp-date-card,.listo-host-staycation-calendar-app .listo-cp-rules,.listo-host-staycation-calendar-app .listo-cp-settings{border-radius:16px!important;border-color:#E2E8ED!important;box-shadow:0 6px 20px rgba(28,45,58,.035)!important}
.listo-host-staycation-calendar-app .listo-cp-calendar-card{padding:18px!important}
.listo-host-staycation-calendar-app .listo-cp-date-card{padding:20px!important}
.listo-host-staycation-calendar-app .listo-cp-calendar-heading h2{font-size:21px!important;color:#172631!important}
.listo-host-staycation-calendar-app .listo-cp-calendar-heading p{color:#71808A!important}
.listo-host-staycation-calendar-app .listo-cp-day{border-color:#E2E8ED!important;border-radius:10px!important;background:#F8FBFD!important;min-height:68px!important}
.listo-host-staycation-calendar-app .listo-cp-day.is-today{box-shadow:inset 0 0 0 2px #2196F3!important}
.listo-host-staycation-calendar-app .listo-cp-day.is-selected{background:#2196F3!important;border-color:#2196F3!important}
.listo-host-staycation-calendar-app .listo-cp-legend{border:0!important;background:transparent!important;height:auto!important;padding-top:0!important;font-weight:650!important}
.listo-host-staycation-calendar-app .listo-cp-rule{border-color:#E2E8ED!important;border-radius:12px!important;box-shadow:0 3px 10px rgba(28,45,58,.025)!important}
.listo-host-staycation-calendar-app .listo-cp-section-heading h2,.listo-host-staycation-calendar-app .listo-cp-settings h2{font-size:21px!important;color:#172631!important}
.listo-host-staycation-calendar-app .listo-cp-rule-heading-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important}
.listo-host-staycation-calendar-app .listo-dashboard-v2__dock{z-index:10020!important}
.listo-host-staycation-calendar-app .listo-dashboard-v2__more-panel{z-index:10021!important}
.listo-host-staycation-calendar-app .listo-dashboard-v2__more-backdrop{z-index:10020!important}
@media(max-width:800px){
  body:has(.listo-host-staycation-calendar-app) .listo-host-context-nav{margin-bottom:16px!important}
  .listo-host-staycation-calendar-app{padding-bottom:112px!important}
  .listo-host-staycation-calendar-app .listo-host-calendar-page__header{margin:0 0 16px!important}
  .listo-host-staycation-calendar-app .listo-host-app-page__header h1{font-size:27px!important}
  .listo-host-staycation-calendar-app .listo-host-app-page__header p{font-size:13px!important}
  .listo-host-staycation-calendar-app .listo-cp-tabs{overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .listo-host-staycation-calendar-app .listo-cp-tabs::-webkit-scrollbar{display:none}
  .listo-host-staycation-calendar-app .listo-cp-tabs a{flex:0 0 auto;padding:9px 12px!important;font-size:11px!important}
  .listo-host-staycation-calendar-app .listo-cp-calendar-card{padding:12px!important}
  .listo-host-staycation-calendar-app .listo-cp-calendar-heading{align-items:flex-start!important;margin-bottom:12px!important}
  .listo-host-staycation-calendar-app .listo-cp-calendar-heading p{display:none!important}
  .listo-host-staycation-calendar-app .listo-cp-calendar-nav a{width:34px!important;height:34px!important}
  .listo-host-staycation-calendar-app .listo-cp-calendar-nav a.today{padding:0 10px!important}
  .listo-host-staycation-calendar-app .listo-cp-weekdays,.listo-host-staycation-calendar-app .listo-cp-grid{gap:3px!important}
  .listo-host-staycation-calendar-app .listo-cp-weekdays span{font-size:10px!important;padding:5px 0!important}
  .listo-host-staycation-calendar-app .listo-cp-day{min-height:52px!important;padding:6px 5px!important;border-radius:8px!important}
  .listo-host-staycation-calendar-app .listo-cp-day span{font-size:12px!important}
  .listo-host-staycation-calendar-app .listo-cp-day small{font-size:8px!important;margin-top:5px!important;white-space:nowrap}
  .listo-host-staycation-calendar-app .listo-cp-legend{gap:9px!important;font-size:9px!important;margin-top:12px!important}
  .listo-host-staycation-calendar-app .listo-cp-legend i{width:8px!important;height:8px!important}
  .listo-host-staycation-calendar-app .listo-cp-date-card{padding:16px!important}
  .listo-host-staycation-calendar-app .listo-cp-date-card h2{font-size:20px!important;margin-bottom:16px!important}
  .listo-host-staycation-calendar-app .listo-cp-rule{padding:14px!important}
}


/* ========================================================================== 
   NEXT870 — Listo Host page-title contract + floating dock language.
   Title: 26px desktop / 22px mobile. One-line description sits directly below.
   Dashboard, Bookings, Calendar & Pricing, and Inbox share this geometry.
   ========================================================================== */
.listo-host-page-header,
.listo-host-app-page__header,
.listo-host-bookings-title-row,
.listo-dashboard-v2__header{
  margin:0 0 20px!important;
  padding:0 2px!important;
}
.listo-host-page-header h1,
.listo-host-app-page__header h1,
.listo-host-bookings-title-row h1,
.listo-dashboard-v2__header h1,
.listo-inbox__heading{
  margin:0!important;
  font-size:26px!important;
  line-height:1.15!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
  color:#172631!important;
}
.listo-host-page-description,
.listo-host-app-page__header p,
.listo-dashboard-v2__header p{
  margin:6px 0 0!important;
  font-size:14px!important;
  line-height:1.45!important;
  color:#70818D!important;
  max-width:760px!important;
}
/* The Dashboard keeps its date, but the title/description use the same title geometry. */
.listo-dashboard-v2__header{align-items:flex-end!important}
.listo-dashboard-v2__header-date{padding:0!important;border:0!important;background:transparent!important}

/* Remove the old decorative system eyebrow from the Dashboard. */
.listo-dashboard-v2__mode-pill{display:none!important}

/* Calendar and Bookings now obey the same title contract. */
.listo-host-staycation-calendar-app .listo-host-app-page__header h1{font-size:26px!important;line-height:1.15!important}
.listo-host-staycation-calendar-app .listo-host-app-page__header p{font-size:14px!important;margin-top:6px!important}
body.listo-host-staycation-bookings-app .listo-host-bookings-title-row{margin-bottom:0!important}
.listo-host-bookings-description{margin:6px 0 20px!important}

/* Shared floating dock: five destinations, bright semantic icon colors, and
   one active background that physically slides between destinations. */
.listo-host-floating-dock{position:relative!important;overflow:visible!important}
.listo-host-floating-dock__active-bg{
  position:absolute!important;z-index:0!important;top:7px!important;bottom:7px!important;left:7px!important;
  width:calc((100% - 14px)/5)!important;border-radius:13px!important;
  background:var(--dock-active-bg,#EAF5FF)!important;
  transform:translateX(calc(var(--dock-active-index,0) * 100%))!important;
  transition:transform .28s cubic-bezier(.22,.75,.25,1),background-color .2s ease!important;
  pointer-events:none!important;
}
.listo-host-floating-dock>a,
.listo-host-floating-dock>button{z-index:1!important;background:transparent!important}
.listo-host-floating-dock>a:hover,
.listo-host-floating-dock>button:hover{background:transparent!important}
.listo-host-floating-dock .listo-dashboard-v2__dock-icon{transition:color .18s ease,transform .18s ease!important}
.listo-host-floating-dock > a:nth-of-type(1) .listo-dashboard-v2__dock-icon{color:#2196F3!important}
.listo-host-floating-dock > a:nth-of-type(2) .listo-dashboard-v2__dock-icon{color:#7C3AED!important}
.listo-host-floating-dock > a:nth-of-type(3) .listo-dashboard-v2__dock-icon{color:#F59E0B!important}
.listo-host-floating-dock > a:nth-of-type(4) .listo-dashboard-v2__dock-icon{color:#EC4899!important}
.listo-host-floating-dock > button .listo-dashboard-v2__dock-icon{color:#14B8A6!important}
.listo-host-floating-dock a.is-active,
.listo-host-floating-dock button.is-active{color:#172631!important;background:transparent!important}
.listo-host-floating-dock a.is-active .listo-dashboard-v2__dock-icon,
.listo-host-floating-dock button.is-active .listo-dashboard-v2__dock-icon{transform:translateY(-1px) scale(1.04)!important}

/* Inbox is now a full Host app page and uses the same floating dock. */
body.listo-host-inbox-app .listo-host-primary-nav{display:none!important}
body.listo-host-inbox-app .listo-host-context-nav{margin-bottom:22px!important}
body.listo-host-inbox-app .listo-inbox-page{padding-bottom:116px!important}
body.listo-host-inbox-app .listo-inbox__title-row{display:none!important}
body.listo-host-inbox-app .listo-host-page-header{display:block!important}
body.listo-host-inbox-app .listo-inbox--host{margin-top:0!important}
body.listo-host-inbox-app .listo-host-floating-dock{z-index:10020!important}
body.listo-host-inbox-app .listo-host-floating-dock__more-panel{z-index:10030!important}
body.listo-host-inbox-app .listo-host-floating-dock__backdrop{z-index:10010!important}
body.listo-host-inbox-app .listo-host-floating-dock__more-panel{left:50%!important;bottom:92px!important}
body.listo-host-inbox-app.is-more-open .listo-host-floating-dock__backdrop{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
body.listo-host-inbox-app.is-more-open .listo-host-floating-dock__more-panel{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translate(-50%,0)!important}

@media(max-width:800px){
  .listo-host-page-header,
  .listo-host-app-page__header,
  .listo-host-bookings-title-row,
  .listo-dashboard-v2__header{margin:0 0 16px!important;padding:0 2px!important}
  .listo-host-page-header h1,
  .listo-host-app-page__header h1,
  .listo-host-bookings-title-row h1,
  .listo-dashboard-v2__header h1,
  .listo-inbox__heading{font-size:22px!important;line-height:1.15!important}
  .listo-host-page-description,
  .listo-host-app-page__header p,
  .listo-dashboard-v2__header p{font-size:13px!important;margin-top:5px!important}
  .listo-dashboard-v2__header-date{display:none!important}
  .listo-host-staycation-calendar-app .listo-host-app-page__header h1{font-size:22px!important}
  .listo-host-staycation-calendar-app .listo-host-app-page__header p{font-size:13px!important}
  .listo-host-bookings-description{margin-bottom:16px!important}
  body.listo-host-inbox-app .listo-host-context-nav{margin-bottom:16px!important}
  body.listo-host-inbox-app .listo-inbox-page{padding:0 2px 116px!important}
  body.listo-host-inbox-app .listo-host-floating-dock__more-panel{left:12px!important;right:12px!important;bottom:88px!important;transform:translateY(10px)!important;width:auto!important}
  body.listo-host-inbox-app.is-more-open .listo-host-floating-dock__more-panel{transform:translateY(0)!important}
  .listo-host-floating-dock__active-bg{top:6px!important;bottom:6px!important;left:6px!important;width:calc((100% - 12px)/5)!important;border-radius:13px!important}
}


/* ========================================================================== 
   NEXT871 — Canonical Host floating dock.
   The Dashboard is the first Host page, but it must use exactly the same
   dock geometry, active-slide behavior, colors, and More interaction as the
   rest of the redesigned Host pages.
   ========================================================================== */
.listo-host-floating-dock,
.listo-dashboard-v2__dock{
  position:fixed!important;
  z-index:10020!important;
  left:50%!important;
  right:auto!important;
  bottom:18px!important;
  transform:translateX(-50%)!important;
  width:min(680px,calc(100vw - 32px))!important;
  min-width:0!important;
  max-width:680px!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-auto-flow:initial!important;
  grid-auto-columns:auto!important;
  align-items:stretch!important;
  padding:7px!important;
  border:1px solid rgba(214,223,230,.95)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 12px 34px rgba(20,35,48,.14),0 2px 8px rgba(20,35,48,.06)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  overflow:visible!important;
}
.listo-host-floating-dock>a,
.listo-host-floating-dock>button,
.listo-dashboard-v2__dock>a,
.listo-dashboard-v2__dock>button{
  position:relative!important;
  z-index:1!important;
  min-height:50px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  border:0!important;
  border-radius:12px!important;
  background:transparent!important;
  color:#687781!important;
  text-decoration:none!important;
  font:inherit!important;
  font-size:10px!important;
  font-weight:750!important;
  cursor:pointer!important;
}
.listo-host-floating-dock>a:hover,
.listo-host-floating-dock>button:hover,
.listo-dashboard-v2__dock>a:hover,
.listo-dashboard-v2__dock>button:hover{background:transparent!important;color:#172631!important}
.listo-host-floating-dock__active-bg{
  position:absolute!important;
  z-index:0!important;
  top:7px!important;
  bottom:7px!important;
  left:7px!important;
  width:calc((100% - 14px)/5)!important;
  border-radius:13px!important;
  background:var(--dock-active-bg,#EAF5FF)!important;
  transform:translateX(calc(var(--dock-active-index,0) * 100%))!important;
  transition:transform .30s cubic-bezier(.22,.75,.25,1),background-color .20s ease!important;
  pointer-events:none!important;
}
.listo-host-floating-dock .listo-dashboard-v2__dock-icon,
.listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon{
  width:22px!important;height:22px!important;display:grid!important;place-items:center!important;
  color:inherit!important;transition:color .18s ease,transform .22s ease!important;
}
.listo-host-floating-dock .listo-dashboard-v2__dock-icon img,
.listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon img{width:22px!important;height:22px!important;max-width:22px!important;max-height:22px!important;display:block!important;object-fit:contain!important}
.listo-host-floating-dock>a:nth-of-type(1) .listo-dashboard-v2__dock-icon,
.listo-dashboard-v2__dock>a:nth-of-type(1) .listo-dashboard-v2__dock-icon{color:#2196F3!important}
.listo-host-floating-dock>a:nth-of-type(2) .listo-dashboard-v2__dock-icon,
.listo-dashboard-v2__dock>a:nth-of-type(2) .listo-dashboard-v2__dock-icon{color:#7C3AED!important}
.listo-host-floating-dock>a:nth-of-type(3) .listo-dashboard-v2__dock-icon,
.listo-dashboard-v2__dock>a:nth-of-type(3) .listo-dashboard-v2__dock-icon{color:#F59E0B!important}
.listo-host-floating-dock>a:nth-of-type(4) .listo-dashboard-v2__dock-icon,
.listo-dashboard-v2__dock>a:nth-of-type(4) .listo-dashboard-v2__dock-icon{color:#EC4899!important}
.listo-host-floating-dock>button .listo-dashboard-v2__dock-icon,
.listo-dashboard-v2__dock>button .listo-dashboard-v2__dock-icon{color:#14B8A6!important}
.listo-host-floating-dock a.is-active .listo-dashboard-v2__dock-icon,
.listo-host-floating-dock button.is-active .listo-dashboard-v2__dock-icon,
.listo-dashboard-v2__dock a.is-active .listo-dashboard-v2__dock-icon,
.listo-dashboard-v2__dock button.is-active .listo-dashboard-v2__dock-icon{transform:translateY(-1px) scale(1.04)!important}
.listo-host-floating-dock a.is-active,
.listo-host-floating-dock button.is-active,
.listo-dashboard-v2__dock a.is-active,
.listo-dashboard-v2__dock button.is-active{background:transparent!important;color:#172631!important}

/* Dashboard More uses the same panel/backdrop contract as every other Host page. */
body:has(.listo-host-floating-dock).is-more-open .listo-host-floating-dock__backdrop,
body.is-more-open .listo-host-floating-dock__backdrop{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
body:has(.listo-host-floating-dock).is-more-open .listo-host-floating-dock__more-panel,
body.is-more-open .listo-host-floating-dock__more-panel{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translate(-50%,0)!important}

@media(max-width:800px){
  .listo-host-floating-dock,
  .listo-dashboard-v2__dock{
    left:12px!important;right:12px!important;bottom:12px!important;transform:none!important;
    width:auto!important;min-width:0!important;max-width:none!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    padding:6px!important;border-radius:18px!important;
  }
  .listo-host-floating-dock>a,
  .listo-host-floating-dock>button,
  .listo-dashboard-v2__dock>a,
  .listo-dashboard-v2__dock>button{min-height:48px!important;font-size:9px!important}
  .listo-host-floating-dock__active-bg{top:6px!important;bottom:6px!important;left:6px!important;width:calc((100% - 12px)/5)!important;border-radius:13px!important}
}


/* NEXT872 — Canonical Host page-title geometry reinforcement.
   Every redesigned Host page uses the same title baseline, type scale,
   description gap, and header block height on desktop and mobile. */
.listo-host-page-header,
.listo-host-app-page__header,
.listo-host-bookings-title-row,
.listo-dashboard-v2__header{
  position:relative!important;
  min-height:59px!important;
  margin:0 0 20px!important;
  padding:0!important;
  box-sizing:border-box!important;
  align-items:flex-start!important;
}
.listo-host-page-header h1,
.listo-host-app-page__header h1,
.listo-host-bookings-title-row h1,
.listo-dashboard-v2__header h1,
.listo-inbox__heading{
  font-size:26px!important;
  line-height:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:0!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
}
.listo-host-page-description,
.listo-host-app-page__header p,
.listo-dashboard-v2__header p,
.listo-inbox-page__description{
  margin:5px 0 0!important;
  padding:0!important;
  font-size:14px!important;
  line-height:20px!important;
  min-height:20px!important;
  color:#70818D!important;
  max-width:760px!important;
}
.listo-dashboard-v2__header-date{
  position:absolute!important;
  right:0!important;
  top:2px!important;
  margin:0!important;
}
.listo-host-bookings-description{margin-top:5px!important;margin-bottom:20px!important}

/* The Inbox title is part of the same Host title contract; do not let its
   messaging workspace introduce a second title scale or offset. */
body.listo-host-inbox-app .listo-host-page-header{display:block!important;min-height:59px!important;margin:0 0 20px!important}
body.listo-host-inbox-app .listo-inbox-page__description{margin-top:5px!important}

/* Canonical five-position dock: Home, Bookings, Calendar, Inbox, More.
   The same active background geometry and sliding transition is used by every
   redesigned Host page, including Dashboard. */
.listo-host-floating-dock__active-bg,
.listo-dashboard-v2__dock .listo-host-floating-dock__active-bg{
  transition:transform .30s cubic-bezier(.22,.75,.25,1),background-color .20s ease!important;
  will-change:transform,background-color!important;
}

@media(max-width:800px){
  .listo-host-page-header,
  .listo-host-app-page__header,
  .listo-host-bookings-title-row,
  .listo-dashboard-v2__header{
    min-height:55px!important;
    margin:0 0 16px!important;
    padding:0 2px!important;
  }
  .listo-host-page-header h1,
  .listo-host-app-page__header h1,
  .listo-host-bookings-title-row h1,
  .listo-dashboard-v2__header h1,
  .listo-inbox__heading{
    font-size:22px!important;
    line-height:27px!important;
    min-height:27px!important;
  }
  .listo-host-page-description,
  .listo-host-app-page__header p,
  .listo-dashboard-v2__header p,
  .listo-inbox-page__description{
    margin-top:4px!important;
    font-size:13px!important;
    line-height:18px!important;
    min-height:18px!important;
  }
  .listo-dashboard-v2__header-date{display:none!important}
  .listo-host-bookings-description{margin-top:4px!important;margin-bottom:16px!important}
  body.listo-host-inbox-app .listo-host-page-header{min-height:55px!important;margin:0 0 16px!important;padding:0 2px!important}
  body.listo-host-inbox-app .listo-inbox-page{padding-bottom:132px!important}
}


/* ========================================================================== 
   NEXT873 — Host shell consistency + Listings (Staycation) app page.
   - Bookings title/description now share the exact same header block as the
     Dashboard, Calendar & Pricing, Inbox, and Listings pages.
   - Listings joins the canonical Host app shell and More menu.
   - Floating dock establishes its initial state without a page-load slide;
     navigation then uses one consistent transform + background transition.
   ========================================================================== */
body.listo-host-staycation-listings-app .listo-host-primary-nav{display:none!important}
body.listo-host-staycation-listings-app .listo-host-context-nav{margin-bottom:22px!important}
body.listo-host-staycation-listings-app .listo-my-listings-page{padding-bottom:116px!important}

/* Listings header: same title/description geometry, with Add listing aligned
   to the top of the header without affecting the title baseline. */
body.listo-host-staycation-listings-app .listo-my-listings-page__header{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:18px!important;
  width:100%!important;
  margin:0 0 20px!important;
  padding:0!important;
  min-height:59px!important;
  box-sizing:border-box!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-page__heading-copy{min-width:0!important}
body.listo-host-staycation-listings-app .listo-my-listings-page__heading-copy h1{
  margin:0!important;
  font-size:26px!important;
  line-height:30px!important;
  min-height:30px!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
  color:#172631!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-page__heading-copy p{
  margin:5px 0 0!important;
  padding:0!important;
  font-size:14px!important;
  line-height:20px!important;
  min-height:20px!important;
  color:#70818D!important;
  max-width:760px!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-page__add{
  min-height:40px!important;
  height:40px!important;
  margin:0!important;
  padding:0 14px!important;
  border-radius:11px!important;
  white-space:nowrap!important;
}

/* Bookings now keeps the description inside the same fixed title block. */
body.listo-host-staycation-bookings-app .listo-host-bookings-header{
  display:block!important;
  min-height:59px!important;
  margin:0 0 20px!important;
  padding:0!important;
  box-sizing:border-box!important;
}
body.listo-host-staycation-bookings-app .listo-host-bookings-header h1{
  margin:0!important;
  font-size:26px!important;
  line-height:30px!important;
  min-height:30px!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
  color:#172631!important;
}
body.listo-host-staycation-bookings-app .listo-host-bookings-header .listo-host-bookings-description{
  margin:5px 0 0!important;
  padding:0!important;
  font-size:14px!important;
  line-height:20px!important;
  min-height:20px!important;
  color:#70818D!important;
}

/* Canonical dock transition contract. Initial state is static; once ready,
   only the active background moves and recolors. */
.listo-host-floating-dock__active-bg,
.listo-dashboard-v2__dock .listo-host-floating-dock__active-bg{
  transition:none!important;
  background-color:var(--dock-active-bg,#EAF5FF)!important;
  /* A subtle inset shadow makes the selected system pill feel physically
     pressed into the switcher rather than merely recolored. */
  box-shadow:inset 0 2px 4px rgba(20,38,52,.16),
             inset 0 -1px 2px rgba(255,255,255,.34),
             0 1px 2px rgba(20,38,52,.06)!important;
  will-change:transform,background-color!important;
}
.listo-host-floating-dock.is-dock-ready .listo-host-floating-dock__active-bg,
.listo-dashboard-v2__dock.is-dock-ready .listo-host-floating-dock__active-bg{
  transition:transform .30s cubic-bezier(.22,.75,.25,1),background-color .30s ease!important;
}

@media(max-width:800px){
  body.listo-host-staycation-listings-app .listo-host-context-nav{margin-bottom:16px!important}
  body.listo-host-staycation-listings-app .listo-my-listings-page{padding-bottom:132px!important}
  body.listo-host-staycation-listings-app .listo-my-listings-page__header{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:12px!important;
    min-height:55px!important;
    margin:0 0 16px!important;
    padding:0 2px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-page__heading-copy h1{
    font-size:22px!important;
    line-height:27px!important;
    min-height:27px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-page__heading-copy p{
    margin-top:4px!important;
    font-size:13px!important;
    line-height:18px!important;
    min-height:18px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-page__add{
    min-height:38px!important;
    height:38px!important;
    padding:0 11px!important;
    border-radius:10px!important;
    font-size:12px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-page__add svg{width:15px!important;height:15px!important}

  body.listo-host-staycation-bookings-app .listo-host-bookings-header{
    min-height:55px!important;
    margin:0 0 16px!important;
    padding:0 2px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-header h1{
    font-size:22px!important;
    line-height:27px!important;
    min-height:27px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-header .listo-host-bookings-description{
    margin-top:4px!important;
    font-size:13px!important;
    line-height:18px!important;
    min-height:18px!important;
  }
}


/* NEXT874 — Floating Host dock interaction hardening.
   The server-rendered data-dock-active state supplies a visible active pill
   even before JavaScript initializes. Navigation links remain immediately
   clickable; JS no longer delays the browser's normal page navigation. */
.listo-host-floating-dock,
.listo-dashboard-v2__dock{
  isolation:isolate!important;
  pointer-events:auto!important;
}
.listo-host-floating-dock__active-bg,
.listo-dashboard-v2__dock .listo-host-floating-dock__active-bg{
  z-index:0!important;
  pointer-events:none!important;
  width:calc((100% - 14px)/5)!important;
  transform:translate3d(calc(var(--dock-active-index,0) * 100%),0,0)!important;
}
.listo-host-floating-dock>a,
.listo-host-floating-dock>button,
.listo-dashboard-v2__dock>a,
.listo-dashboard-v2__dock>button{
  position:relative!important;
  z-index:3!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
/* Mobile has 6px horizontal inset instead of 7px. */
@media(max-width:800px){
  .listo-host-floating-dock__active-bg,
  .listo-dashboard-v2__dock .listo-host-floating-dock__active-bg{
    width:calc((100% - 12px)/5)!important;
    transform:translate3d(calc(var(--dock-active-index,0) * 100%),0,0)!important;
  }
}
/* Server-side active state: the correct pill is visible even if the JS
   bundle is momentarily delayed or cached. */
.listo-host-floating-dock[data-dock-active="home"],
.listo-dashboard-v2__dock[data-dock-active="home"]{--dock-active-index:0;--dock-active-bg:#EAF5FF!important;}
.listo-host-floating-dock[data-dock-active="bookings"],
.listo-dashboard-v2__dock[data-dock-active="bookings"]{--dock-active-index:1;--dock-active-bg:#F2EAFF!important;}
.listo-host-floating-dock[data-dock-active="calendar"],
.listo-dashboard-v2__dock[data-dock-active="calendar"]{--dock-active-index:2;--dock-active-bg:#FFF4D8!important;}
.listo-host-floating-dock[data-dock-active="inbox"],
.listo-dashboard-v2__dock[data-dock-active="inbox"]{--dock-active-index:3;--dock-active-bg:#FDEAF4!important;}
.listo-host-floating-dock[data-dock-active="more"],
.listo-dashboard-v2__dock[data-dock-active="more"],
.listo-host-floating-dock[data-dock-active="listings"],
.listo-dashboard-v2__dock[data-dock-active="listings"]{--dock-active-index:4;--dock-active-bg:#E6FAF6!important;}

/* NEXT875 package correction: no functional code change. Theme root package verified. */

/* ========================================================================== 
   NEXT876 — Simple uniform Host floating dock.
   All dock icons use Listo blue. The current page is distinguished by a
   static light-blue active tile. No sliding, color-changing, scaling, hover
   animation, or transition is used on the dock.
   ========================================================================== */
.listo-host-floating-dock,
.listo-dashboard-v2__dock{
  --dock-uniform-blue:#2196F3!important;
  --dock-active-bg:#EAF5FF!important;
}

.listo-host-floating-dock__active-bg,
.listo-dashboard-v2__dock .listo-host-floating-dock__active-bg{
  background:#EAF5FF!important;
  transform:translate3d(calc(var(--dock-active-index,0) * 100%),0,0)!important;
  transition:none!important;
  animation:none!important;
  will-change:auto!important;
}

.listo-host-floating-dock .listo-dashboard-v2__dock-icon,
.listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon,
.listo-host-floating-dock>a:nth-of-type(1) .listo-dashboard-v2__dock-icon,
.listo-host-floating-dock>a:nth-of-type(2) .listo-dashboard-v2__dock-icon,
.listo-host-floating-dock>a:nth-of-type(3) .listo-dashboard-v2__dock-icon,
.listo-host-floating-dock>a:nth-of-type(4) .listo-dashboard-v2__dock-icon,
.listo-host-floating-dock>button .listo-dashboard-v2__dock-icon,
.listo-dashboard-v2__dock>a:nth-of-type(1) .listo-dashboard-v2__dock-icon,
.listo-dashboard-v2__dock>a:nth-of-type(2) .listo-dashboard-v2__dock-icon,
.listo-dashboard-v2__dock>a:nth-of-type(3) .listo-dashboard-v2__dock-icon,
.listo-dashboard-v2__dock>a:nth-of-type(4) .listo-dashboard-v2__dock-icon,
.listo-dashboard-v2__dock>button .listo-dashboard-v2__dock-icon{
  color:#2196F3!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}

.listo-host-floating-dock>a,
.listo-host-floating-dock>button,
.listo-dashboard-v2__dock>a,
.listo-dashboard-v2__dock>button,
.listo-host-floating-dock>a:hover,
.listo-host-floating-dock>button:hover,
.listo-dashboard-v2__dock>a:hover,
.listo-dashboard-v2__dock>button:hover{
  transition:none!important;
  animation:none!important;
}

.listo-host-floating-dock a.is-active,
.listo-host-floating-dock button.is-active,
.listo-dashboard-v2__dock a.is-active,
.listo-dashboard-v2__dock button.is-active{
  background:transparent!important;
  color:#145EA8!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}

.listo-host-floating-dock[data-dock-active="home"],
.listo-dashboard-v2__dock[data-dock-active="home"],
.listo-host-floating-dock[data-dock-active="bookings"],
.listo-dashboard-v2__dock[data-dock-active="bookings"],
.listo-host-floating-dock[data-dock-active="calendar"],
.listo-dashboard-v2__dock[data-dock-active="calendar"],
.listo-host-floating-dock[data-dock-active="inbox"],
.listo-dashboard-v2__dock[data-dock-active="inbox"],
.listo-host-floating-dock[data-dock-active="more"],
.listo-dashboard-v2__dock[data-dock-active="more"],
.listo-host-floating-dock[data-dock-active="listings"],
.listo-dashboard-v2__dock[data-dock-active="listings"]{
  --dock-active-bg:#EAF5FF!important;
}


/* ========================================================================== 
   NEXT879 — Host floating navigation icon parity + cleaner More tray.
   The floating dock now uses the exact line-icon geometry from the Host
   account main menu. More-tray items use the same canonical icon family and
   show only the menu name (no redundant "Open" sublabel).
   ========================================================================== */
.listo-host-floating-dock .listo-dashboard-v2__dock-icon,
.listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon{
  width:20px!important;
  height:20px!important;
  display:grid!important;
  place-items:center!important;
  font-size:0!important;
  color:#2196F3!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
.listo-host-floating-dock .listo-dashboard-v2__dock-icon svg,
.listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon svg{
  width:19px!important;
  height:19px!important;
  display:block!important;
}
.listo-host-floating-dock .listo-dashboard-v2__dock-icon svg,
.listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon svg{
  stroke-width:2!important;
}
.listo-host-floating-dock__more-panel .listo-dashboard-v2__more-item{
  grid-template-columns:34px minmax(0,1fr) 14px!important;
  align-items:center!important;
}
.listo-host-floating-dock__more-panel .listo-dashboard-v2__more-item>span:nth-child(2){
  display:flex!important;
  align-items:center!important;
  min-height:34px!important;
}
.listo-host-floating-dock__more-panel .listo-dashboard-v2__more-item strong{
  margin:0!important;
  font-size:10.5px!important;
  line-height:1.25!important;
}
.listo-host-floating-dock__more-panel .listo-dashboard-v2__more-item small{display:none!important}
.listo-host-floating-dock__more-panel .listo-dashboard-v2__more-icon svg{
  width:19px!important;
  height:19px!important;
  display:block!important;
  stroke-width:2!important;
}
@media(max-width:800px){
  .listo-host-floating-dock .listo-dashboard-v2__dock-icon,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon{width:20px!important;height:20px!important}
  .listo-host-floating-dock .listo-dashboard-v2__dock-icon svg,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon svg{width:19px!important;height:19px!important}
}

/* ========================================================================== 
   NEXT880 — Host account workspace visual system
   Extends the Dashboard / Bookings / Calendar visual language to the remaining
   Host tools in both Staycation and Parking. Presentation only: existing
   fields, IDs, AJAX hooks, forms, filters and workflows are untouched.
   ========================================================================== */

/* Shared Host shell: calm white canvas, compact title geometry, and the same
   spacing rhythm used by the redesigned operational pages. */
body:has(.listo-host-account-floating-shell) .listo-host-primary-nav{display:none!important}
body:has(.listo-host-account-floating-shell) .listo-host-context-nav{margin-bottom:22px!important}
body:has(.listo-host-account-floating-shell) .listo-main{padding-bottom:112px!important}
body:has(.listo-host-account-floating-shell) .listo-host-account-page,
body:has(.listo-host-account-floating-shell) .listo-cases-page,
body:has(.listo-host-account-floating-shell) .listo-external-cal-page,
body:has(.listo-host-account-floating-shell) .listo-faq-page,
body:has(.listo-host-account-floating-shell) .listo-support-page{
  width:min(1240px,calc(100% - 48px))!important;
  max-width:1240px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-top:0!important;
}
body:has(.listo-host-account-floating-shell) .listo-page-title-row{
  min-height:59px!important;
  margin:0 0 20px!important;
  gap:12px!important;
}
body:has(.listo-host-account-floating-shell) .listo-page-title-row > h1{
  font-size:26px!important;
  line-height:30px!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
  color:#172631!important;
}
body:has(.listo-host-account-floating-shell) .listo-page-title__icon{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  border-radius:12px!important;
}
body:has(.listo-host-account-floating-shell) .listo-page-title__icon svg{width:20px!important;height:20px!important}

/* Canonical surfaces. */
body:has(.listo-host-account-floating-shell) .listo-host-account-page > section,
body:has(.listo-host-account-floating-shell) .listo-host-account-page > .listo-host-profile-layout > *,
body:has(.listo-host-account-floating-shell) .listo-cases-help,
body:has(.listo-host-account-floating-shell) .listo-cases-summary,
body:has(.listo-host-account-floating-shell) .listo-cases-list,
body:has(.listo-host-account-floating-shell) .listo-external-cal-notice,
body:has(.listo-host-account-floating-shell) .listo-external-cal-summary,
body:has(.listo-host-account-floating-shell) .listo-external-cal-table,
body:has(.listo-host-account-floating-shell) .listo-support-host-links,
body:has(.listo-host-account-floating-shell) .listo-support-help,
body:has(.listo-host-account-floating-shell) .listo-support-offline-card,
body:has(.listo-host-account-floating-shell) .listo-support-entry-card,
body:has(.listo-host-account-floating-shell) .listo-support-closed-card,
body:has(.listo-host-account-floating-shell) .listo-faq-search-hero,
body:has(.listo-host-account-floating-shell) .listo-faq-discovery__section,
body:has(.listo-host-account-floating-shell) .listo-faq-category,
body:has(.listo-host-account-floating-shell) .listo-faq-support-cta{
  box-shadow:0 3px 14px rgba(24,39,75,.035)!important;
}

/* More-sheet is now a first-class Host shell on pages that previously had
   only the desktop secondary navigation. */
.listo-host-account-floating-shell .listo-dashboard-v2__more-panel{width:min(680px,calc(100vw - 32px))!important}
.listo-host-account-floating-shell .listo-dashboard-v2__more-grid{gap:9px!important}
.listo-host-account-floating-shell .listo-dashboard-v2__more-item{min-height:60px!important;border-radius:13px!important}
.listo-host-account-floating-shell .listo-dashboard-v2__more-item strong{font-size:11px!important}
.listo-host-account-floating-shell .listo-dashboard-v2__more-icon{
  background:transparent!important;
  border-radius:0!important;
  color:inherit!important;
}

/* --------------------------------------------------------------------------
   Cases
   -------------------------------------------------------------------------- */
body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-page-description{
  margin:-12px 0 18px!important;
  color:#70818D!important;
  font-size:13px!important;
}
body:has(.listo-host-account-floating-shell) .listo-cases-help{
  margin-bottom:16px!important;
  border-radius:15px!important;
  border-color:#E2E9EF!important;
  background:#fff!important;
}
body:has(.listo-host-account-floating-shell) .listo-cases-summary{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:1px!important;
  overflow:hidden!important;
  margin-bottom:16px!important;
  border:1px solid #E3EAF0!important;
  border-radius:15px!important;
  background:#E3EAF0!important;
}
body:has(.listo-host-account-floating-shell) .listo-cases-summary__item{
  min-height:86px!important;
  padding:14px 16px!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
}
body:has(.listo-host-account-floating-shell) .listo-cases-summary__item--active{background:#F7FBFF!important}
body:has(.listo-host-account-floating-shell) .listo-cases-toolbar{
  margin-bottom:12px!important;
  padding:10px!important;
  border:1px solid #E3EAF0!important;
  border-radius:14px!important;
  background:#fff!important;
}
body:has(.listo-host-account-floating-shell) .listo-cases-filter-pill{
  min-height:34px!important;
  padding:0 11px!important;
  border-radius:9px!important;
  font-size:11px!important;
  font-weight:750!important;
}
body:has(.listo-host-account-floating-shell) .listo-cases-search input{
  min-height:42px!important;
  border-radius:10px!important;
}
body:has(.listo-host-account-floating-shell) .listo-cases-list{
  padding:10px!important;
  border:1px solid #E3EAF0!important;
  border-radius:16px!important;
  background:#F8FAFC!important;
}
body:has(.listo-host-account-floating-shell) .listo-cases-list .listo-case-card{
  margin:0 0 9px!important;
  border:1px solid #E3EAF0!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:none!important;
}
body:has(.listo-host-account-floating-shell) .listo-cases-list .listo-case-card:last-child{margin-bottom:0!important}

/* --------------------------------------------------------------------------
   Payout Setting
   -------------------------------------------------------------------------- */
body:has(.listo-host-account-floating-shell) .listo-payouts-page .listo-page-intro{margin:-10px 0 20px!important}
body:has(.listo-host-account-floating-shell) .listo-payouts-page .listo-payout-section-card,
body:has(.listo-host-account-floating-shell) .listo-payouts-page .listo-payout-details-card,
body:has(.listo-host-account-floating-shell) .listo-payouts-page .listo-payout-history-table{
  border-color:#E2E9EF!important;
  border-radius:16px!important;
  box-shadow:0 3px 14px rgba(24,39,75,.035)!important;
}
body:has(.listo-host-account-floating-shell) .listo-payouts-page .listo-payout-section-card{padding:20px!important}
body:has(.listo-host-account-floating-shell) .listo-payouts-page .listo-payout-section-card__header{margin-bottom:16px!important}
body:has(.listo-host-account-floating-shell) .listo-payouts-page .listo-payout-section-card h2{font-size:17px!important}
body:has(.listo-host-account-floating-shell) .listo-payouts-page .listo-field input,
body:has(.listo-host-account-floating-shell) .listo-payouts-page .listo-field select{min-height:46px!important;border-radius:10px!important}
body:has(.listo-host-account-floating-shell) .listo-payouts-page .listo-payout-method-summary{border-color:#D8EAF8!important;background:#F7FBFF!important}

/* --------------------------------------------------------------------------
   External Calendars
   -------------------------------------------------------------------------- */
body:has(.listo-host-account-floating-shell) .listo-external-cal-hero{margin-bottom:18px!important}
body:has(.listo-host-account-floating-shell) .listo-external-cal-notice{
  border:1px solid #D8EAF8!important;
  border-radius:15px!important;
  background:#F7FBFF!important;
}
body:has(.listo-host-account-floating-shell) .listo-external-cal-summary{
  border-color:#E2E9EF!important;
  border-radius:15px!important;
  background:#fff!important;
}
body:has(.listo-host-account-floating-shell) .listo-external-cal-table{
  border-color:#E2E9EF!important;
  border-radius:16px!important;
  box-shadow:0 3px 14px rgba(24,39,75,.035)!important;
}
body:has(.listo-host-account-floating-shell) .listo-external-cal-item-row{min-height:74px!important}
body:has(.listo-host-account-floating-shell) .listo-external-cal-editor-inner{border-top-color:#E8EDF2!important;background:#FAFCFD!important}

/* --------------------------------------------------------------------------
   Co-hosts
   -------------------------------------------------------------------------- */
body:has(.listo-host-account-floating-shell) .listo-cohost-page{max-width:1240px!important}
body:has(.listo-host-account-floating-shell) .listo-cohost-stats{gap:1px!important;border:1px solid #E3EAF0!important;border-radius:15px!important;overflow:hidden!important;background:#E3EAF0!important}
body:has(.listo-host-account-floating-shell) .listo-cohost-stat{border:0!important;border-radius:0!important;background:#fff!important;padding:16px!important}
body:has(.listo-host-account-floating-shell) .listo-cohost-layout{gap:16px!important}
body:has(.listo-host-account-floating-shell) .listo-cohost-page-section{border-color:#E2E9EF!important;border-radius:16px!important;box-shadow:0 3px 14px rgba(24,39,75,.035)!important}
body:has(.listo-host-account-floating-shell) .listo-cohost-section-head{margin-bottom:14px!important}
body:has(.listo-host-account-floating-shell) .listo-cohost-management-toolbar{border-color:#E5EBF0!important;border-radius:12px!important;background:#FAFCFD!important}
body:has(.listo-host-account-floating-shell) .listo-cohost-management-row{border-color:#E5EBF0!important;border-radius:12px!important;background:#fff!important}
body:has(.listo-host-account-floating-shell) .listo-cohost-sidebar-section{background:#fff!important}

/* --------------------------------------------------------------------------
   Support
   -------------------------------------------------------------------------- */
body:has(.listo-host-account-floating-shell) .listo-support-host-links{
  margin-bottom:16px!important;
  padding:16px!important;
  border:1px solid #E2E9EF!important;
  border-radius:16px!important;
  background:#fff!important;
}
body:has(.listo-host-account-floating-shell) .listo-support-host-links__grid{gap:9px!important}
body:has(.listo-host-account-floating-shell) .listo-support-host-link{
  border-color:#E2E9EF!important;
  border-radius:12px!important;
  background:#fff!important;
}
body:has(.listo-host-account-floating-shell) .listo-support-help{border-color:#E2E9EF!important;border-radius:14px!important;background:#fff!important}
body:has(.listo-host-account-floating-shell) .listo-support-chat,
body:has(.listo-host-account-floating-shell) .listo-support-entry-card,
body:has(.listo-host-account-floating-shell) .listo-support-offline-card,
body:has(.listo-host-account-floating-shell) .listo-support-closed-card{border-color:#E2E9EF!important;box-shadow:0 3px 14px rgba(24,39,75,.035)!important}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
body:has(.listo-host-account-floating-shell) .listo-faq-search-hero{
  border:1px solid #DDE7EE!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#fff,#F8FBFD)!important;
  box-shadow:0 3px 14px rgba(24,39,75,.035)!important;
}
body:has(.listo-host-account-floating-shell) .listo-faq-search-hero input{min-height:48px!important;border-radius:12px!important}
body:has(.listo-host-account-floating-shell) .listo-faq-section-heading{margin-bottom:12px!important}
body:has(.listo-host-account-floating-shell) .listo-faq-popular__grid,
body:has(.listo-host-account-floating-shell) .listo-faq-topics__grid{gap:10px!important}
body:has(.listo-host-account-floating-shell) .listo-faq-popular__grid > *,
body:has(.listo-host-account-floating-shell) .listo-faq-topics__grid > *{border-color:#E2E9EF!important;border-radius:13px!important;background:#fff!important}
body:has(.listo-host-account-floating-shell) .listo-faq-category{border-color:#E2E9EF!important;border-radius:15px!important;background:#fff!important;box-shadow:0 3px 14px rgba(24,39,75,.035)!important}

/* --------------------------------------------------------------------------
   Host Profile
   -------------------------------------------------------------------------- */
body:has(.listo-host-account-floating-shell) .listo-host-profile-layout{gap:16px!important}
body:has(.listo-host-account-floating-shell) .listo-host-profile-card{border-color:#E2E9EF!important;border-radius:16px!important;box-shadow:0 3px 14px rgba(24,39,75,.035)!important}
body:has(.listo-host-account-floating-shell) .listo-host-profile-card__header{padding-bottom:14px!important;border-bottom-color:#E8EDF2!important}
body:has(.listo-host-account-floating-shell) .listo-host-profile-fields__section{border-top-color:#E8EDF2!important}
body:has(.listo-host-account-floating-shell) .listo-host-profile-page input,
body:has(.listo-host-account-floating-shell) .listo-host-profile-page textarea{border-radius:10px!important}

/* --------------------------------------------------------------------------
   Parking workspace pages that do not have their own dock (Listings,
   Bookings, Calendar, Payouts) inherit the same app shell without changing
   their data structures or booking/calendar behavior.
   -------------------------------------------------------------------------- */
body:has(.listo-host-account-floating-shell) .listo-host-parking-page-shell{padding-bottom:4px!important}
body:has(.listo-host-account-floating-shell) .listo-host-parking-page-shell .listo-page-title-row{margin-bottom:20px!important}
body:has(.listo-host-account-floating-shell) .listo-host-parking-page-shell .listo-host-context-hero,
body:has(.listo-host-account-floating-shell) .listo-host-parking-page-shell .listo-host-parking-dashboard-card,
body:has(.listo-host-account-floating-shell) .listo-host-parking-page-shell .listo-host-parking-payout-card,
body:has(.listo-host-account-floating-shell) .listo-host-parking-page-shell .listo-host-parking-workspace,
body:has(.listo-host-account-floating-shell) .listo-host-parking-page-shell .listo-host-parking-empty{
  border-color:#E2E9EF!important;
  box-shadow:0 3px 14px rgba(24,39,75,.035)!important;
}
body:has(.listo-host-account-floating-shell) .listo-host-parking-page-shell .listo-btn{border-radius:10px!important}

/* Dock remains identical to Dashboard / Bookings / Calendar. */
.listo-host-account-floating-shell .listo-host-floating-dock{z-index:10020!important}
.listo-host-account-floating-shell .listo-host-floating-dock__backdrop{z-index:10010!important}
.listo-host-account-floating-shell .listo-host-floating-dock__more-panel{z-index:10030!important}

@media (max-width:800px){
  body:has(.listo-host-account-floating-shell) .listo-host-context-nav{margin-bottom:16px!important}
  body:has(.listo-host-account-floating-shell) .listo-main{padding-bottom:104px!important}
  body:has(.listo-host-account-floating-shell) .listo-host-account-page,
  body:has(.listo-host-account-floating-shell) .listo-cases-page,
  body:has(.listo-host-account-floating-shell) .listo-external-cal-page,
  body:has(.listo-host-account-floating-shell) .listo-faq-page,
  body:has(.listo-host-account-floating-shell) .listo-support-page{
    width:calc(100% - 24px)!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  body:has(.listo-host-account-floating-shell) .listo-page-title-row{
    min-height:55px!important;
    margin-bottom:16px!important;
    gap:10px!important;
  }
  body:has(.listo-host-account-floating-shell) .listo-page-title-row > h1{font-size:22px!important;line-height:27px!important}
  body:has(.listo-host-account-floating-shell) .listo-page-title__icon{width:40px!important;height:40px!important;min-width:40px!important}

  body:has(.listo-host-account-floating-shell) .listo-cases-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body:has(.listo-host-account-floating-shell) .listo-cases-summary__item{min-height:74px!important;padding:11px 9px!important}
  body:has(.listo-host-account-floating-shell) .listo-cases-summary__item strong{font-size:20px!important}
  body:has(.listo-host-account-floating-shell) .listo-cases-summary__item span{font-size:10px!important}
  body:has(.listo-host-account-floating-shell) .listo-cases-toolbar{padding:8px!important}
  body:has(.listo-host-account-floating-shell) .listo-cases-filter-pills{overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:2px!important}
  body:has(.listo-host-account-floating-shell) .listo-cases-filter-pill{flex:0 0 auto!important}
  body:has(.listo-host-account-floating-shell) .listo-cases-search{width:100%!important;margin-top:7px!important}
  body:has(.listo-host-account-floating-shell) .listo-cases-list{padding:8px!important}

  body:has(.listo-host-account-floating-shell) .listo-payouts-page .listo-payout-section-card{padding:16px!important;border-radius:14px!important}
  body:has(.listo-host-account-floating-shell) .listo-payouts-page .listo-payout-details-grid{grid-template-columns:1fr!important}
  body:has(.listo-host-account-floating-shell) .listo-payouts-page .listo-payout-section-card__actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  body:has(.listo-host-account-floating-shell) .listo-payouts-page .listo-payout-section-card__actions .listo-btn{width:100%!important}

  body:has(.listo-host-account-floating-shell) .listo-external-cal-toolbar{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  body:has(.listo-host-account-floating-shell) .listo-external-cal-filter{width:100%!important}
  body:has(.listo-host-account-floating-shell) .listo-external-cal-table-head{display:none!important}
  body:has(.listo-host-account-floating-shell) .listo-external-cal-item-row{grid-template-columns:58px minmax(0,1fr) auto!important;gap:10px!important;padding:10px!important}
  body:has(.listo-host-account-floating-shell) .listo-external-cal-item-count{display:none!important}

  body:has(.listo-host-account-floating-shell) .listo-cohost-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body:has(.listo-host-account-floating-shell) .listo-cohost-layout{grid-template-columns:1fr!important}
  body:has(.listo-host-account-floating-shell) .listo-cohost-page-section{border-radius:14px!important}

  body:has(.listo-host-account-floating-shell) .listo-support-host-links{padding:13px!important;border-radius:14px!important}
  body:has(.listo-host-account-floating-shell) .listo-support-host-links__grid{grid-template-columns:1fr 1fr!important}
  body:has(.listo-host-account-floating-shell) .listo-support-host-link{min-height:74px!important}

  body:has(.listo-host-account-floating-shell) .listo-faq-search-hero{padding:18px!important;border-radius:15px!important}
  body:has(.listo-host-account-floating-shell) .listo-faq-category{border-radius:13px!important}

  body:has(.listo-host-account-floating-shell) .listo-host-profile-layout{grid-template-columns:1fr!important}
  body:has(.listo-host-account-floating-shell) .listo-host-profile-card{border-radius:14px!important}

  .listo-host-account-floating-shell .listo-dashboard-v2__more-panel{left:12px!important;right:12px!important;bottom:88px!important;width:auto!important;transform:translateY(10px)!important;padding:13px!important;border-radius:18px!important}
  body.is-more-open .listo-host-account-floating-shell .listo-dashboard-v2__more-panel{transform:translateY(0)!important}
  .listo-host-account-floating-shell .listo-dashboard-v2__more-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .listo-host-account-floating-shell .listo-dashboard-v2__more-item{min-height:54px!important}
}

@media(max-width:380px){
  body:has(.listo-host-account-floating-shell) .listo-support-host-links__grid{grid-template-columns:1fr!important}
  .listo-host-account-floating-shell .listo-dashboard-v2__more-grid{grid-template-columns:1fr!important}
}

/* NEXT880b — Focused Host listing forms use the same calm app surfaces while
   keeping their existing step order, field IDs and submit behavior intact. */
body:has(.listo-listing-form) .listo-listing-form{max-width:900px!important;padding-bottom:48px!important}
body:has(.listo-listing-form) .listo-listing-form > .listo-page-title-row{margin-bottom:8px!important}
body:has(.listo-listing-form) .listo-listing-form > .listo-caption{max-width:760px!important;margin:0 0 22px!important;line-height:1.55!important;color:#70818D!important}
body:has(.listo-listing-form) .listo-listing-form .listo-form-section{
  margin-bottom:14px!important;
  padding:20px!important;
  border:1px solid #E2E9EF!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 3px 14px rgba(24,39,75,.035)!important;
}
body:has(.listo-listing-form) .listo-listing-form .listo-form-section h2{font-size:17px!important;margin-bottom:15px!important;color:#172631!important}
body:has(.listo-listing-form) .listo-listing-form input,
body:has(.listo-listing-form) .listo-listing-form select,
body:has(.listo-listing-form) .listo-listing-form textarea{border-radius:10px!important}
body:has(.listo-listing-form) .listo-listing-form input,
body:has(.listo-listing-form) .listo-listing-form select{min-height:46px!important}

body:has(.listo-parking-form-page) .listo-parking-form-page{background:transparent!important}
body:has(.listo-parking-form-page) .listo-parking-form-card,
body:has(.listo-parking-form-page) .listo-parking-form-summary-v539{
  border-color:#E2E9EF!important;
  border-radius:16px!important;
  box-shadow:0 3px 14px rgba(24,39,75,.035)!important;
}
body:has(.listo-parking-form-page) .listo-parking-form-card__head h2{color:#172631!important;font-size:17px!important}
body:has(.listo-parking-form-page) .listo-parking-form-card input,
body:has(.listo-parking-form-page) .listo-parking-form-card select,
body:has(.listo-parking-form-page) .listo-parking-form-card textarea{border-radius:10px!important}

@media(max-width:800px){
  body:has(.listo-listing-form) .listo-listing-form{width:calc(100% - 24px)!important;padding:0 0 34px!important}
  body:has(.listo-listing-form) .listo-listing-form .listo-form-section{padding:16px!important;border-radius:14px!important}
  body:has(.listo-parking-form-page) .listo-parking-form-card{border-radius:14px!important}
}

/* ========================================================================
   NEXT881 — Host Inbox workspace overhaul
   Presentation and responsive interaction chrome only. The existing
   messaging, polling, AJAX, attachments, reactions, reservation/inquiry,
   cancellation and sidebar workflows remain unchanged.
   ======================================================================== */

body[data-listo-mode="host"] .listo-inbox-page__header {
  margin-bottom: 0 !important;
}

body[data-listo-mode="host"] .listo-inbox--host {
  position: relative;
  isolation: isolate;
  grid-template-columns: 292px minmax(0, 1fr) 276px;
  height: min(760px, calc(100dvh - 250px));
  min-height: 560px;
  border: 1px solid #DDE5ED;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(31, 49, 70, .07);
}

body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list {
  background: #F8FAFC;
  border-right: 1px solid #DDE5ED;
}

body[data-listo-mode="host"] .listo-inbox__list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 16px 12px;
  background: #fff;
  border-bottom: 1px solid #E5EAF0;
}
body[data-listo-mode="host"] .listo-inbox__list-head > div {
  min-width: 0;
}
body[data-listo-mode="host"] .listo-inbox__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #7B8795;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1.1;
  text-transform: uppercase;
}
body[data-listo-mode="host"] .listo-inbox__list-head strong {
  display: block;
  color: #1F2A37;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.2;
}
body[data-listo-mode="host"] .listo-inbox__unread-count {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid #D7EAFB;
  border-radius: 999px;
  background: #F1F8FF;
  color: #1769A6;
  font-size: 9.5px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

body[data-listo-mode="host"] .listo-inbox__vertical-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 12px 12px 0;
  padding: 4px;
  border: 1px solid #DCE5EE;
  border-radius: 11px;
  background: #F2F5F8;
}
body[data-listo-mode="host"] .listo-inbox__vertical-tab {
  min-width: 0;
  min-height: 32px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #697687;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
body[data-listo-mode="host"] .listo-inbox__vertical-tab:hover {
  color: #253241;
}
body[data-listo-mode="host"] .listo-inbox__vertical-tab.is-active {
  background: #fff;
  color: #1769A6;
  box-shadow: 0 1px 4px rgba(25, 43, 62, .09);
}
body[data-listo-mode="host"] .listo-inbox__vertical-tab[data-inbox-vertical="parking"].is-active {
  color: #B45309;
  box-shadow: 0 1px 4px rgba(180, 83, 9, .12);
}

body[data-listo-mode="host"] .listo-inbox__toolbar--host {
  position: static;
  padding: 11px 12px 10px;
  border-bottom: 1px solid #E5EAF0;
  background: #F8FAFC;
}
body[data-listo-mode="host"] .listo-inbox__toolbar--host .listo-inbox__search-wrap {
  min-height: 38px;
  border-color: #D8E1EA;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}
body[data-listo-mode="host"] .listo-inbox__toolbar--host .listo-inbox__search:focus {
  outline: none;
}
body[data-listo-mode="host"] .listo-inbox__filters--host {
  margin-top: 8px;
}
body[data-listo-mode="host"] .listo-inbox__filters--host .listo-inbox__filter {
  min-height: 29px;
  padding: 5px 9px;
  color: #718096;
}
body[data-listo-mode="host"] .listo-inbox__filters--host .listo-inbox__filter.is-active {
  color: #1769A6;
  background: #EAF5FF;
  border-color: #D4EAFB;
}

body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item {
  padding: 12px 13px;
  gap: 10px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid #E7ECF1;
  background: transparent;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item:hover {
  background: #F2F7FB;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item.is-active {
  background: #EAF5FF;
  border-left-color: #2196F3;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__photo {
  width: 40px;
  height: 40px;
  background: #EAF5FF;
  color: #1769A6;
  font-size: 14px;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__title {
  color: #253241;
  font-size: 13.5px;
  font-weight: 700;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__time {
  color: #8995A4;
  font-size: 10px;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag {
  color: #687688;
  font-size: 10.5px;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__stay {
  color: #7A8796;
  font-size: 10px;
  line-height: 1.25;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__vertical {
  display: none;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__context {
  margin-top: 4px;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__preview {
  color: #788594;
  font-size: 11.5px;
  line-height: 1.35;
}

@media (min-width: 801px) {
  /* Host desktop: the blue context/status badge is the only status line.
     The mobile-only status subline must never render on desktop. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__mobile-subline {
    display: none !important;
  }

  /* If the latest message is exactly the same as the status label, do not
     repeat it as a second black line. Keep the blue status label visible. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__context--status-duplicate .listo-inbox-thread-item__preview {
    display: none;
  }
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item.is-unread .listo-inbox-thread-item__title,
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item.is-unread .listo-inbox-thread-item__preview {
  font-weight: 700;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__new {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: #2196F3;
}

body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread {
  background: #fff;
  min-width: 0;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-empty {
  padding: 32px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-empty svg {
  width: 50px;
  height: 50px;
  padding: 13px;
  border-radius: 14px;
  background: #EAF5FF;
  color: #2196F3;
  opacity: 1;
  box-sizing: border-box;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-empty-title {
  color: #263342;
  font-size: 15px;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-empty .listo-caption {
  max-width: 280px;
  text-align: center;
  line-height: 1.5;
}

body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header {
  min-height: 72px;
  padding: 12px 16px;
  border-bottom-color: #DDE5ED;
  box-shadow: none;
  background: #fff;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-avatar {
  width: 40px;
  height: 40px;
  background: #EAF5FF;
  color: #1769A6;
  font-size: 14px;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-name {
  color: #1F2A37;
  font-size: 14.5px;
  font-weight: 750;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-chat {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: #718096;
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-chat #listo-inbox-thread-chat-id {
  color: #9AA5B1;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-subrow {
  margin-top: 3px;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-subrow .listo-caption {
  color: #687688;
  font-size: 11px;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-info-btn {
  display: flex;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border: 1px solid #DCE5EE;
  border-radius: 10px;
  background: #F7F9FB;
  color: #64748B;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-info-btn:hover,
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-info-btn[aria-expanded="true"] {
  border-color: #C6E1F7;
  background: #EAF5FF;
  color: #1769A6;
}

body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__messages {
  padding: 22px 24px 10px;
  background: #FFFFFF;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-notice {
  margin: 0 auto 14px;
  padding: 5px 12px;
  border: 1px solid #E2E8EF;
  border-radius: 999px;
  background: #F8FAFC;
  color: #7A8796;
  font-size: 10px;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble-row {
  margin-bottom: 12px;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble {
  max-width: 72%;
  padding: 10px 14px;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(25, 43, 62, .05);
  font-size: 14px;
  line-height: 1.48;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble-row--mine .listo-msg-bubble {
  background: #2196F3;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-msg-avatar {
  width: 25px;
  height: 25px;
  font-size: 10px;
}

body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer {
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid #E1E7ED;
  background: #FBFCFE;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer textarea {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid #D7E0E9;
  border-radius: 12px;
  background: #fff;
  font-size: 13.5px;
  box-shadow: none;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer textarea:focus {
  border-color: #9BCBF0;
  box-shadow: 0 0 0 3px rgba(33,150,243,.10);
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer-icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid #DCE5EE;
  background: #fff;
  color: #6B7888;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer-send {
  width: 40px;
  height: 40px;
  background: #2196F3;
  box-shadow: 0 3px 9px rgba(33,150,243,.20);
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer-send:hover {
  background: #1976D2;
}

body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__reply-banner {
  padding: 8px 14px;
  border-top-color: #DCE5EE;
  background: #F3F8FC;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__attach-preview {
  padding: 8px 14px;
  border-top-color: #DCE5EE;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer-closed-notice {
  border-top-color: #DCE5EE;
  background: #F8FAFC;
}

body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar {
  padding: 16px 15px;
  background: #F8FAFC;
  border-left: 1px solid #DDE5ED;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__panel {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom-color: #E2E8EF;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__label {
  color: #7A8796;
  font-size: 9.5px;
  letter-spacing: .08em;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__title {
  color: #253241;
  font-size: 15px;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__facts li {
  padding: 8px 0;
  border-top-color: #E5EAF0;
  font-size: 12px;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__actions .listo-btn {
  min-height: 35px;
  border-radius: 9px;
  font-size: 11.5px;
}

/* Mobile: list first, conversation second. Details remain an on-demand drawer. */
@media (max-width: 800px) {
  body[data-listo-mode="host"] .listo-inbox-page__description {
    margin-bottom: 16px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host {
    height: calc(100dvh - 168px);
    min-height: 500px;
    margin-left: 0;
    margin-right: 0;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(31,49,70,.06);
  }

  body[data-listo-mode="host"] .listo-inbox__list-head {
    padding: 13px 14px 10px;
  }
  body[data-listo-mode="host"] .listo-inbox__list-head strong {
    font-size: 15px;
  }
  body[data-listo-mode="host"] .listo-inbox__unread-count {
    font-size: 9px;
  }
  body[data-listo-mode="host"] .listo-inbox__vertical-switcher {
    margin: 10px 10px 0;
  }
  body[data-listo-mode="host"] .listo-inbox__vertical-tab {
    min-height: 34px;
    font-size: 11px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host {
    padding: 9px 10px 9px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item {
    min-height: 74px;
    padding: 11px 12px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__photo {
    width: 42px;
    height: 42px;
    font-size: 14px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__title {
    font-size: 13.5px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__preview {
    font-size: 11.5px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header {
    min-height: 64px;
    padding: 10px 11px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-avatar {
    width: 38px;
    height: 38px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-name {
    font-size: 14px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-subrow .listo-caption {
    font-size: 10.5px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__messages {
    padding: 14px 11px 7px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble {
    max-width: 84%;
    font-size: 14px;
    padding: 10px 13px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer {
    padding: 8px 9px calc(8px + env(safe-area-inset-bottom));
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer textarea {
    min-height: 40px;
    font-size: 15px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar {
    max-height: 88dvh;
    padding: 0;
  }

  /* Focused chat mode: remove the floating Host dock so the composer owns
     the bottom edge of the phone. The dock returns when the user taps Back. */
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-floating-dock {
    display: none !important;
  }
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-floating-dock__backdrop,
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-floating-dock__more-panel {
    display: none !important;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 250px minmax(0, 1fr) 250px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar {
    padding: 14px 12px;
  }
}

@media (max-width: 480px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    min-height: 460px;
    height: calc(100dvh - 158px);
    border-radius: 13px;
  }
  body[data-listo-mode="host"] .listo-inbox__list-head {
    padding-left: 12px;
    padding-right: 12px;
  }
  body[data-listo-mode="host"] .listo-inbox__unread-count {
    padding: 5px 7px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-chat #listo-inbox-thread-chat-id {
    display: none;
  }
}

/* ========================================================================== 
   NEXT882 — Host workspace shell
   Desktop and mobile are intentionally different UX models.
   Desktop: persistent sidebar + fluid work canvas.
   Mobile: existing bottom navigation remains the touch-first control.
   Presentation/navigation only; existing routes, selectors, forms, AJAX and
   booking/financial workflows are untouched.
   ========================================================================== */

.listo-host-sidebar{display:none}

@media (min-width:901px){
  /* Host header uses the full desktop width rather than the marketplace's
     narrower centered canvas. */
  body[data-listo-mode="host"] .listo-header--host .listo-header__inner{
    max-width:none!important;
    width:100%!important;
    padding-left:28px!important;
    padding-right:28px!important;
  }

  body[data-listo-mode="host"] .listo-host-context-nav{display:none!important}

  /* Persistent desktop navigation. The header remains sticky above it. */
  .listo-host-sidebar{
    display:block;
    position:fixed;
    z-index:90;
    top:68px;
    left:0;
    bottom:0;
    width:236px;
    background:#fff;
    border-right:1px solid #E3EAF0;
  }
  .listo-host-sidebar__scroll{
    height:100%;
    overflow-y:auto;
    padding:22px 12px 24px;
  }
  .listo-host-sidebar__eyebrow{
    padding:0 12px 10px;
    color:#8A98A6;
    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:.12em;
  }
  .listo-host-sidebar__section{margin-top:22px}
  .listo-host-sidebar__section-title{
    padding:0 12px 8px;
    color:#8A98A6;
    font-size:9.5px;
    line-height:1;
    font-weight:800;
    letter-spacing:.09em;
  }
  .listo-host-sidebar__item{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:40px;
    padding:8px 12px;
    border-radius:9px;
    color:#526171;
    text-decoration:none!important;
    font-size:13px;
    font-weight:600;
    line-height:1.2;
    transition:none!important;
  }
  .listo-host-sidebar__item:hover{background:#F6F9FB;color:#253443}
  .listo-host-sidebar__item.is-active{
    background:#EAF5FF;
    color:#1976D2;
    font-weight:700;
  }
  .listo-host-sidebar__icon{
    width:19px;
    height:19px;
    flex:0 0 19px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#7A8997;
  }
  .listo-host-sidebar__icon svg{width:18px;height:18px;display:block}
  .listo-host-sidebar__item.is-active .listo-host-sidebar__icon{color:#2196F3}
  .listo-host-sidebar__footer-note{
    display:flex;
    align-items:center;
    gap:7px;
    margin:24px 10px 0;
    padding:11px 2px 0;
    border-top:1px solid #EDF1F4;
    color:#9AA6B2;
    font-size:10px;
  }
  .listo-host-sidebar__footer-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#2196F3;
    flex:0 0 6px;
  }

  /* The sidebar is the desktop navigation surface, so remove all of the
     legacy floating-dock vertical reservation and hide every dock variant.
     This is deliberately CSS-only so the existing page templates continue
     to render their known markup and JS hooks unchanged. */
  body[data-listo-mode="host"] .listo-host-floating-dock,
  body[data-listo-mode="host"] .listo-host-account-floating-shell,
  body[data-listo-mode="host"] .listo-dashboard-v2__dock{
    display:none!important;
  }
  body[data-listo-mode="host"] .listo-host-floating-dock__backdrop,
  body[data-listo-mode="host"] .listo-host-floating-dock__more-panel{display:none!important}

  body[data-listo-mode="host"] .listo-main{margin-left:236px!important;padding:0 32px 48px!important}
  body[data-listo-mode="host"] .listo-main > .listo-container{
    width:min(100%,1500px)!important;
    max-width:1500px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* The former NEXT880 1240px ceiling is useful on narrow account pages but
     wastes the desktop canvas. Let the host workspace breathe while keeping
     individual components' own internal max-widths intact. */
  body[data-listo-mode="host"] .listo-host-account-page,
  body[data-listo-mode="host"] .listo-cases-page,
  body[data-listo-mode="host"] .listo-external-cal-page,
  body[data-listo-mode="host"] .listo-faq-page,
  body[data-listo-mode="host"] .listo-support-page,
  body[data-listo-mode="host"] .listo-cohost-page,
  body[data-listo-mode="host"] .listo-inbox-page,
  body[data-listo-mode="host"] .listo-host-parking-page-shell{
    width:100%!important;
    max-width:1500px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Desktop type scale: 10/12 is treated as the compact UI scale, not
     literal 10px body copy. Keep operational text comfortably readable. */
  body[data-listo-mode="host"] .listo-page-title-row > h1,
  body[data-listo-mode="host"] .listo-page-title-row .listo-inbox__heading{
    font-size:30px!important;
    line-height:36px!important;
  }
  body[data-listo-mode="host"] .listo-page-title-subtitle,
  body[data-listo-mode="host"] .listo-page-intro,
  body[data-listo-mode="host"] .listo-page-title-row + p.listo-caption{
    font-size:14px!important;
    line-height:1.5!important;
  }
  body[data-listo-mode="host"] .listo-main,
  body[data-listo-mode="host"] .listo-main input,
  body[data-listo-mode="host"] .listo-main select,
  body[data-listo-mode="host"] .listo-main textarea,
  body[data-listo-mode="host"] .listo-main button{font-size:14px}

  /* Account/workspace cards gain horizontal room without becoming oversized. */
  body[data-listo-mode="host"] .listo-host-account-page > section,
  body[data-listo-mode="host"] .listo-cases-help,
  body[data-listo-mode="host"] .listo-cases-summary,
  body[data-listo-mode="host"] .listo-cases-list,
  body[data-listo-mode="host"] .listo-external-cal-notice,
  body[data-listo-mode="host"] .listo-external-cal-summary,
  body[data-listo-mode="host"] .listo-external-cal-table,
  body[data-listo-mode="host"] .listo-support-host-links,
  body[data-listo-mode="host"] .listo-support-help,
  body[data-listo-mode="host"] .listo-faq-search-hero,
  body[data-listo-mode="host"] .listo-faq-category{
    width:100%;
  }
}

@media (max-width:900px){
  /* NEXT1022 — Mobile Host workspace switcher.
     Desktop uses the persistent Host sidebar, while mobile exposes the
     Staycation/Parking workspace selector beneath the global header. Home
     omits it because Host Home is intentionally a consolidated overview. */
  .listo-host-sidebar{display:none!important}
  body[data-listo-mode="host"] .listo-main{margin-left:0!important}
  body[data-listo-mode="host"] .listo-host-context-nav{
    display:block!important;
    padding:8px 0 6px!important;
    background:#fff;
    border:0;
  }
  body[data-listo-mode="host"] .listo-host-context-nav__inner{
    width:calc(100% - 24px)!important;
    min-height:0!important;
    margin:0 auto!important;
    gap:5px!important;
    align-items:center!important;
  }
  body[data-listo-mode="host"] .listo-host-context-nav__label{
    display:none!important;
  }
  body[data-listo-mode="host"] .listo-host-context-nav__switcher{
    width:min(360px,100%)!important;
    padding:3px!important;
    border:1px solid #e1e8ee!important;
    border-radius:12px!important;
    background:#f7f9fb!important;
    box-shadow:none!important;
  }
  body[data-listo-mode="host"] .listo-host-context-pill{
    min-width:0!important;
    min-height:38px!important;
    padding:5px 10px!important;
    border-radius:9px!important;
    gap:6px!important;
    font-size:12px!important;
  }
  body[data-listo-mode="host"] .listo-host-context-pill__icon,
  body[data-listo-mode="host"] .listo-host-context-pill__icon svg{
    width:17px!important;
    height:17px!important;
    flex-basis:17px!important;
  }
  body[data-listo-mode="host"] .listo-host-context-pill__copy strong{
    font-size:12px!important;
  }
  body[data-listo-mode="host"] .listo-host-context-pill__copy small{
    display:none!important;
  }
}

@media (min-width:901px) and (max-width:1180px){
  .listo-host-sidebar{width:220px}
  body[data-listo-mode="host"] .listo-main{margin-left:220px!important;padding-left:24px!important;padding-right:24px!important}
  body[data-listo-mode="host"] .listo-host-sidebar__item{font-size:12px}
}

/* ========================================================================
   NEXT987 — Host Home global business intelligence workspace
   Presentation-only. Existing Host data, navigation, booking and financial
   logic remain the source of truth. Future analytics are intentionally
   represented as designed "Coming soon" states until tracking exists.
   ======================================================================== */
.listo-host-home--analytics{
  --home-ink:#172631;
  --home-muted:#74818C;
  --home-soft:#F6F8FA;
  --home-line:#E3EAF0;
  --home-line-strong:#D5DEE6;
  --home-stay:#2196F3;
  --home-parking:#F47B20;
  --home-positive:#16A34A;
  --home-neutral:#A7B2BC;
  color:var(--home-ink);
}
body[data-listo-mode="host"] .listo-host-home--analytics{max-width:none!important;padding-bottom:34px}
body[data-listo-mode="host"] .listo-host-home--analytics .listo-dashboard-v2__header{margin:2px 0 34px}
body[data-listo-mode="host"] .listo-host-home--analytics .listo-dashboard-v2__header h1{font-size:32px!important;line-height:1.12!important;letter-spacing:-.035em!important}
body[data-listo-mode="host"] .listo-host-home--analytics .listo-dashboard-v2__header p{font-size:14px!important;color:var(--home-muted)}
.listo-host-home--analytics .listo-dashboard-v2__header-copy .listo-dashboard-v2__eyebrow{display:none}

.listo-home-business{margin:0 0 42px;padding:0 0 28px;border-bottom:1px solid var(--home-line)}
.listo-home-business__head,.listo-home-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.listo-home-business__head{margin-bottom:18px}
.listo-home-business__head span,.listo-home-section-head>div>span{display:block;color:#8A969F;font-size:9px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.listo-home-business__head h2,.listo-home-section-head h2{margin:5px 0 0;font-size:22px;line-height:1.2;letter-spacing:-.025em;color:var(--home-ink)}
.listo-home-business__head small,.listo-home-section-head>small,.listo-home-section-head>strong{color:var(--home-muted);font-size:12px;font-weight:600}
.listo-home-business__metrics{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;border-top:1px solid var(--home-line);border-bottom:1px solid var(--home-line)}
.listo-home-business__metric{min-width:0;padding:20px 24px 20px 0;margin-right:24px;border-right:1px solid var(--home-line)}
.listo-home-business__metric:last-child{border-right:0;margin-right:0}
.listo-home-business__metric span,.listo-home-business__metric small{display:block;color:var(--home-muted);font-size:11px;line-height:1.45}
.listo-home-business__metric strong{display:block;margin:6px 0 4px;color:var(--home-ink);font-size:27px;line-height:1.05;letter-spacing:-.035em}
.listo-home-business__metric--earnings strong{font-size:35px;color:var(--home-positive)}
.listo-home-business__metric--future strong{font-size:17px;letter-spacing:-.015em}

.listo-home-section{padding:0 0 38px;margin:0 0 38px;border-bottom:1px solid var(--home-line)}
.listo-home-section-head{margin:0 0 18px}
.listo-home-section-head h2{font-size:22px}
.listo-home-section-head a{color:#1677C8;font-size:12px;font-weight:800;text-decoration:none}
.listo-home-section-head a:hover{text-decoration:underline}
.listo-home-analytics-hero{padding-top:3px}
.listo-home-chart-block{min-width:0}
.listo-home-chart-block h3,.listo-home-mix-block h3{margin:0;font-size:16px;color:var(--home-ink)}
.listo-home-chart-block>p,.listo-home-mix-block>p{margin:5px 0 15px;color:var(--home-muted);font-size:12px;line-height:1.5}
.listo-home-chart{display:block;width:100%;height:auto;overflow:visible}
.listo-home-chart__grid{stroke:#E9EEF2;stroke-width:1}
.listo-home-chart__line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.listo-home-chart__line--stay{stroke:var(--home-stay)}
.listo-home-chart__line--parking{stroke:var(--home-parking)}
.listo-home-chart__dot--stay{fill:var(--home-stay)}
.listo-home-chart__dot--parking{fill:var(--home-parking)}
.listo-home-chart__bar--stay{fill:var(--home-stay)}
.listo-home-chart__bar--parking{fill:var(--home-parking)}
.listo-home-chart__label{font-size:10px;fill:#89959F}
.listo-home-chart__legend{display:flex;gap:18px;margin-top:4px;color:#64727D;font-size:11px;flex-wrap:wrap}
.listo-home-chart__legend span{display:flex;align-items:center;gap:6px}
.listo-home-chart__legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.listo-home-chart__legend-dot--stay{background:var(--home-stay)}
.listo-home-chart__legend-dot--parking{background:var(--home-parking)}

.listo-home-discovery-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.listo-home-future-panel{min-width:0;border:1px solid var(--home-line);border-radius:14px;padding:22px;background:#fff}
.listo-home-future-panel__top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.listo-home-future-panel__top span{display:block;color:#8A969F;font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.listo-home-future-panel__top h3{margin:5px 0 0;font-size:17px;letter-spacing:-.02em}
.listo-home-future-panel__top>b{flex:0 0 auto;color:#667681;font-size:10px;font-weight:800;padding-top:2px}
.listo-home-future-panel>p{margin:16px 0 0;color:var(--home-muted);font-size:12px;line-height:1.5}
.listo-home-future-chart{height:150px;margin:22px 0 0;border-top:1px solid #E9EEF2;border-bottom:1px solid #E9EEF2;position:relative;display:flex;align-items:center;justify-content:center}
.listo-home-future-chart:before,.listo-home-future-chart:after{content:"";position:absolute;left:0;right:0;border-top:1px solid #F0F3F5}
.listo-home-future-chart:before{top:33%}.listo-home-future-chart:after{top:66%}
.listo-home-future-chart__axis{position:absolute;left:0;top:0;bottom:0;border-left:1px solid #E9EEF2}
.listo-home-future-chart__line{width:58%;height:1px;border-top:2px dashed #B9C4CC;transform:rotate(-8deg);opacity:.7}
.listo-home-future-chart__dot{width:8px;height:8px;border:2px solid #B9C4CC;border-radius:50%;background:#fff;position:absolute}
.listo-home-future-chart__dot.d1{left:22%;top:62%}.listo-home-future-chart__dot.d2{left:38%;top:52%}.listo-home-future-chart__dot.d3{left:55%;top:44%}.listo-home-future-chart__dot.d4{left:70%;top:32%}
.listo-home-funnel{margin-top:18px;display:grid;gap:7px}
.listo-home-funnel>div{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 13px;border:1px solid #E8EDF1;border-radius:9px;background:#FBFCFD}
.listo-home-funnel strong{font-size:12px}.listo-home-funnel span{font-size:10px;color:#7D8992;font-weight:700}.listo-home-funnel>i{text-align:center;color:#A0ABB3;font-style:normal;font-size:13px}

.listo-home-listings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.listo-home-listing-card{display:block;min-width:0;border:1px solid var(--home-line);border-radius:14px;overflow:hidden;background:#fff;text-decoration:none!important;color:var(--home-ink);transition:border-color .16s ease,transform .16s ease}
.listo-home-listing-card:hover{border-color:#C8D4DD;transform:translateY(-1px)}
.listo-home-listing-card__image{height:185px;background:#EEF2F5;position:relative;overflow:hidden}
.listo-home-listing-card__image img{width:100%;height:100%;object-fit:cover;display:block}
.listo-home-listing-card__placeholder{height:100%;display:grid;place-items:center;color:#8C99A3;font-size:11px}
.listo-home-listing-card__system{position:absolute;left:12px;top:12px;padding:5px 8px;border-radius:6px;background:rgba(255,255,255,.94);font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.listo-home-listing-card__system--staycation{color:#1976D2}.listo-home-listing-card__system--parking{color:#D96C16}
.listo-home-listing-card__body{padding:15px 16px 17px}
.listo-home-listing-card__body h3{margin:0;font-size:16px;line-height:1.25;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listo-home-listing-card__meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;color:#65737E;font-size:11px}
.listo-home-listing-card__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px;padding-top:13px;border-top:1px solid #EDF1F4}
.listo-home-listing-card__stats span{display:block;color:#8A969F;font-size:9px;text-transform:uppercase;letter-spacing:.06em}.listo-home-listing-card__stats strong{display:block;margin-top:4px;color:var(--home-ink);font-size:12px;line-height:1.2}.listo-home-listing-card__stats div:last-child strong{font-size:10px;color:#7A8790}
.listo-home-listing-card__link{display:block;margin-top:15px;color:#1677C8;font-size:11px;font-weight:800}

.listo-home-mix-analytics-grid{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);gap:42px;align-items:start}
.listo-home-mix-block{min-width:0}.listo-home-donut-wrap{display:flex;align-items:center;gap:24px;margin-top:14px}.listo-home-donut{width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--donut-stops));position:relative;display:grid;place-items:center;flex:0 0 150px}.listo-home-donut:after{content:"";position:absolute;inset:25px;border-radius:50%;background:#fff}.listo-home-donut span{position:relative;z-index:1;font-size:24px;font-weight:800;color:var(--home-ink)}.listo-home-donut__label{color:var(--home-muted);font-size:11px;line-height:1.35;max-width:90px}.listo-home-donut__legend{margin-top:16px;display:grid;gap:8px}.listo-home-donut__legend>div{display:grid;grid-template-columns:8px minmax(0,1fr) auto auto;gap:7px;align-items:center;font-size:11px}.listo-home-donut__legend span{color:#52616D}.listo-home-donut__legend strong{font-size:11px;color:var(--home-ink)}.listo-home-donut__legend small{color:#89959F}.listo-home-donut__dot{width:7px;height:7px;border-radius:50%}.listo-home-donut__dot--stay{background:var(--home-stay)}.listo-home-donut__dot--parking{background:var(--home-parking)}.listo-home-donut__dot--neutral{background:var(--home-neutral)}

.listo-home-today-summary{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:-2px 0 18px}.listo-home-today-summary strong{font-size:26px;letter-spacing:-.03em}.listo-home-today-summary span{font-size:12px;color:var(--home-muted)}.listo-home-today-summary em{font-style:normal;font-size:11px;color:#87939C}
.listo-home-today-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.listo-home-today-card{display:grid;grid-template-columns:112px minmax(0,1fr);min-width:0;border:1px solid var(--home-line);border-radius:13px;overflow:hidden;background:#fff;text-decoration:none!important;color:var(--home-ink)}
.listo-home-today-card__image{min-height:154px;background:#EEF2F5}.listo-home-today-card__image img{width:100%;height:100%;object-fit:cover;display:block}.listo-home-today-card__placeholder{width:100%;height:100%;min-height:154px}
.listo-home-today-card__body{padding:13px 13px 12px;min-width:0}.listo-home-today-card__system{font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.listo-home-today-card__system--staycation{color:#1976D2}.listo-home-today-card__system--parking{color:#D96C16}.listo-home-today-card h3{margin:5px 0 3px;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.listo-home-today-card p{margin:0;color:var(--home-muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.listo-home-today-card__body>div{display:flex;flex-direction:column;gap:2px;margin-top:10px}.listo-home-today-card__body>div strong{font-size:10px}.listo-home-today-card__body>div span{font-size:10px;color:var(--home-muted)}.listo-home-today-card__body>b{display:block;margin-top:11px;color:#1677C8;font-size:10px}

.listo-home-attention{padding:18px 22px 20px;margin:0 0 38px;border:1px solid #E1E8EE;border-radius:13px;background:#FBFCFD}.listo-home-attention__list{border-top:1px solid #E7EDF2}.listo-home-attention__list>a{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #EDF1F4;text-decoration:none!important;color:var(--home-ink)}.listo-home-attention__list>a:hover{background:#F8FAFB}.listo-home-attention__list strong,.listo-home-attention__list small{display:block}.listo-home-attention__list strong{font-size:13px}.listo-home-attention__list small{margin-top:3px;color:var(--home-muted);font-size:11px}.listo-home-attention__list b{font-size:11px;color:#1677C8}.listo-home-attention__dot{width:8px;height:8px;border-radius:50%;background:#A7B2BC}.listo-home-attention__dot--approval{background:#F59E0B}.listo-home-attention__dot--payment{background:#E45757}.listo-home-attention__dot--inbox{background:#2196F3}.listo-home-attention__dot--case{background:#7C3AED}.listo-home-attention--clear{background:transparent}.listo-home-attention--clear .listo-home-section-head{margin-bottom:4px}

.listo-home-upcoming{border-top:1px solid var(--home-line)}.listo-home-upcoming>a{display:grid;grid-template-columns:70px minmax(0,1fr) auto 20px;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid #EDF1F4;text-decoration:none!important;color:var(--home-ink)}.listo-home-upcoming__date{font-size:13px;font-weight:800;color:#51616D}.listo-home-upcoming__main strong,.listo-home-upcoming__main small{display:block}.listo-home-upcoming__main strong{margin-top:3px;font-size:13px}.listo-home-upcoming__main small{margin-top:2px;color:var(--home-muted);font-size:11px}.listo-home-upcoming__system{display:inline-block;font-style:normal;font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.listo-home-upcoming__system--staycation{color:#1976D2}.listo-home-upcoming__system--parking{color:#D96C16}.listo-home-upcoming__status{font-size:11px;color:#687681}.listo-home-upcoming>a>b{color:#1677C8}
.listo-home-empty{padding:18px 0;color:var(--home-muted);font-size:13px}.listo-home-empty--prominent{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:28px 0}.listo-home-empty--prominent strong{font-size:17px;color:var(--home-ink)}.listo-home-empty--prominent a{margin-top:8px;color:#1677C8;font-size:11px;font-weight:800;text-decoration:none}
.listo-home-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--home-line);border-bottom:1px solid var(--home-line)}.listo-home-quick-grid a{display:grid;grid-template-columns:1fr auto;gap:3px 8px;padding:16px 20px 16px 0;margin-right:20px;border-right:1px solid var(--home-line);text-decoration:none!important;color:var(--home-ink)}.listo-home-quick-grid a:last-child{border-right:0;margin-right:0}.listo-home-quick-grid strong{font-size:12px}.listo-home-quick-grid span{font-size:10px;color:var(--home-muted)}.listo-home-quick-grid a{font-size:11px;color:#1677C8}

@media (max-width:1100px){
  .listo-home-listings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .listo-home-today-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .listo-home-business__metrics{grid-template-columns:1.15fr 1fr 1fr 1fr}
}
@media (max-width:900px){
  body[data-listo-mode="host"] .listo-host-home--analytics{max-width:none!important;padding:0 0 90px}
  body[data-listo-mode="host"] .listo-host-home--analytics .listo-dashboard-v2__header{margin:0 0 24px}
  body[data-listo-mode="host"] .listo-host-home--analytics .listo-dashboard-v2__header h1{font-size:28px!important}
  .listo-home-business{margin-bottom:30px;padding-bottom:22px}
  .listo-home-business__head h2,.listo-home-section-head h2{font-size:19px}
  .listo-home-business__metrics{grid-template-columns:1fr 1fr}
  .listo-home-business__metric{padding:15px 14px 15px 0;margin-right:14px;border-right:0;border-bottom:1px solid var(--home-line)}
  .listo-home-business__metric:nth-child(odd){border-right:1px solid var(--home-line)}
  .listo-home-business__metric:nth-child(3),.listo-home-business__metric:nth-child(4){border-bottom:0}
  .listo-home-business__metric--earnings{grid-column:1 / -1;border-right:0!important}
  .listo-home-business__metric strong,.listo-home-business__metric--earnings strong{font-size:24px}.listo-home-business__metric--future strong{font-size:15px}
  .listo-home-discovery-grid,.listo-home-mix-analytics-grid{grid-template-columns:1fr;gap:18px}
  .listo-home-listings-grid{grid-template-columns:1fr 1fr}
  .listo-home-today-grid{grid-template-columns:1fr}
  .listo-home-today-card{grid-template-columns:118px minmax(0,1fr)}
  .listo-home-quick-grid{grid-template-columns:1fr 1fr}.listo-home-quick-grid a{border-bottom:1px solid var(--home-line);padding-left:0}.listo-home-quick-grid a:nth-child(2){border-right:0;margin-right:0}.listo-home-quick-grid a:nth-child(3),.listo-home-quick-grid a:nth-child(4){border-bottom:0}
  .listo-home-section{padding-bottom:28px;margin-bottom:28px}
}
@media (max-width:600px){
  .listo-home-business__head,.listo-home-section-head{align-items:flex-start}
  .listo-home-business__head small,.listo-home-section-head>small{padding-top:4px;font-size:10px}
  .listo-home-business__metric--earnings strong{font-size:29px}
  .listo-home-future-panel{padding:17px;border-radius:12px}
  .listo-home-future-chart{height:128px}
  .listo-home-listings-grid{display:flex;overflow-x:auto;gap:12px;padding-bottom:4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .listo-home-listing-card{flex:0 0 78vw;scroll-snap-align:start}
  .listo-home-listing-card__image{height:175px}
  .listo-home-today-card{grid-template-columns:104px minmax(0,1fr)}
  .listo-home-today-card__image,.listo-home-today-card__placeholder{min-height:142px}
  .listo-home-today-card__body{padding:12px}
  .listo-home-upcoming>a{grid-template-columns:54px minmax(0,1fr) 16px;gap:10px;padding:13px 0}
  .listo-home-upcoming__status{display:none}
  .listo-home-attention{padding:15px 14px 16px}
  .listo-home-attention__list>a{grid-template-columns:8px minmax(0,1fr) auto;gap:10px;padding:13px 0}
  .listo-home-attention__list b{font-size:10px}
  .listo-home-donut-wrap{gap:16px}.listo-home-donut{width:128px;height:128px;flex-basis:128px}.listo-home-donut:after{inset:22px}.listo-home-donut span{font-size:21px}
  .listo-home-chart-block{overflow:hidden}.listo-home-chart{min-width:0}
  .listo-home-quick-grid{grid-template-columns:1fr}.listo-home-quick-grid a,.listo-home-quick-grid a:nth-child(2){border-right:0;border-bottom:1px solid var(--home-line);margin-right:0}.listo-home-quick-grid a:last-child{border-bottom:0}
}

/* ========================================================================
   NEXT889 — Host header control scale + typography consistency
   ------------------------------------------------------------------------
   Match the compact Guest-mode account controls on desktop while preserving
   the Host workspace header structure. Presentation only; no behavior,
   routes, account logic, or navigation markup changed.
   ======================================================================== */
@media (min-width: 901px) {
  body[data-listo-mode="host"] .listo-header--host .listo-header__account-group {
    gap: 10px;
  }

  body[data-listo-mode="host"] .listo-header--host .listo-mode-toggle {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
    padding: 6px 12px;
    gap: 5px;
  }

  body[data-listo-mode="host"] .listo-header--host .listo-account-trigger {
    gap: 6px;
    padding: 5px 11px 5px 5px;
  }

  body[data-listo-mode="host"] .listo-header--host .listo-account-avatar {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  body[data-listo-mode="host"] .listo-header--host .listo-account-name {
    font-size: 13px;
    line-height: 1.2;
  }

  body[data-listo-mode="host"] .listo-header--host .listo-account-caret {
    width: 14px;
    height: 14px;
  }
}


/* ========================================================================== 
   NEXT891 — Staycation Bookings desktop operational workspace.
   Presentation-only layer built on the NEXT890 functional baseline.
   Existing booking data, actions, AJAX hooks, URLs and mobile layout remain
   unchanged. Desktop becomes a spacious operational list rather than a
   collection of dashboard cards.
   ========================================================================== */
@media (min-width: 1001px){
  body.listo-host-staycation-bookings-app .listo-bookings-page-shell{
    padding-bottom:40px!important;
  }

  /* Keep the attention module contained; everything below it opens up. */
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused{
    max-width:none!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary,
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-all-clear{
    min-height:68px!important;
    padding:13px 16px!important;
    border-radius:12px!important;
    box-shadow:none!important;
  }

  /* Replace the five mini-cards with an open KPI rail. */
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:0!important;
    margin:0 0 24px!important;
    padding:0!important;
    border-top:1px solid #E3EAF0!important;
    border-bottom:1px solid #E3EAF0!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item{
    min-height:78px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:12px 20px!important;
    border:0!important;
    border-right:1px solid #E3EAF0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item:first-child{padding-left:2px!important}
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item:last-child{border-right:0!important}
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item span{
    font-size:12px!important;font-weight:700!important;color:#74828C!important;letter-spacing:0!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item strong{
    margin:5px 0 2px!important;font-size:28px!important;line-height:1!important;letter-spacing:-.03em!important;color:#172631!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item small{
    font-size:12px!important;color:#93A0A8!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item--attention,
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item--pending{
    border-color:#E3EAF0!important;background:transparent!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item--attention strong{color:#B87800!important}
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item--pending strong{color:#1677C8!important}

  /* Filters become a light workspace toolbar, not another card. */
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-controls{
    margin:0 0 18px!important;
    padding:0 0 10px!important;
    border:0!important;
    border-bottom:1px solid #E3EAF0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-bookings-filters{
    padding:0!important;gap:18px!important;background:transparent!important;border:0!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-bookings-filter-group{
    gap:2px!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-bookings-filter{
    min-height:38px!important;padding:0 4px!important;margin-right:14px!important;border:0!important;border-radius:0!important;
    background:transparent!important;color:#687781!important;font-size:13px!important;font-weight:700!important;box-shadow:none!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-bookings-filter:hover{color:#1677C8!important;background:transparent!important}
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-bookings-filter.is-active{
    position:relative!important;color:#1677C8!important;background:transparent!important;border-color:transparent!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-bookings-filter.is-active:after{
    content:"";position:absolute;left:0;right:0;bottom:-11px;height:2px;background:#2196F3;border-radius:2px;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-bookings-filter__count{
    margin-left:5px!important;padding:2px 6px!important;font-size:10px!important;background:#EDF4F8!important;color:#557180!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-bookings-filter.is-active .listo-bookings-filter__count{
    background:#EAF5FF!important;color:#1677C8!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-bookings-filter-select{
    margin-left:auto!important;padding-left:18px!important;border-left:1px solid #E3EAF0!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-bookings-filter-select span{
    font-size:11px!important;letter-spacing:.04em!important;color:#7D8A93!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-bookings-filter-select select{
    min-height:36px!important;max-width:260px!important;padding:0 32px 0 10px!important;border:1px solid #DCE4E9!important;
    border-radius:9px!important;background:#fff!important;color:#2B3A44!important;font-size:13px!important;font-weight:600!important;
  }

  /* Reservation requests stay contained because they represent immediate work. */
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-request-section{
    margin:0 0 24px!important;padding:18px 0 20px!important;border:0!important;border-top:1px solid #E3EAF0!important;border-bottom:1px solid #E3EAF0!important;
    border-radius:0!important;background:transparent!important;box-shadow:none!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-request-section h2{font-size:18px!important;line-height:24px!important}
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-request-section > p{font-size:13px!important;margin:4px 0 14px!important;color:#75848E!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid{grid-template-columns:1fr!important;gap:0!important;margin:0!important;padding:0!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card{
    grid-template-columns:76px minmax(0,1fr)!important;gap:16px!important;padding:14px 0!important;border:0!important;border-top:1px solid #EDF1F4!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card:first-child{border-top:0!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__photo{width:76px!important;height:64px!important;border-radius:9px!important}

  /* Main booking stream: open rows with a compact column header. */
  body.listo-host-staycation-bookings-app .listo-host-bookings-table-head{
    display:grid!important;
    grid-template-columns:minmax(150px,1.4fr) minmax(130px,1.1fr) minmax(150px,1.3fr) minmax(145px,1.2fr) minmax(90px,.8fr)!important;
    gap:18px!important;
    align-items:center!important;
    min-height:38px!important;
    padding:0 14px!important;
    border-top:1px solid #E3EAF0!important;
    border-bottom:1px solid #E3EAF0!important;
    box-sizing:border-box!important;
    color:#7B8992!important;
    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:.05em!important;
    text-transform:uppercase!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid,
  body.listo-host-staycation-bookings-app .listo-host-bookings-pending-grid{
    display:flex!important;flex-direction:column!important;gap:0!important;padding:0!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card,
  body.listo-host-staycation-bookings-app .listo-host-bookings-pending-grid .listo-trip-card{
    display:grid!important;
    grid-template-columns:76px minmax(0,1fr)!important;
    gap:16px!important;
    min-height:88px!important;
    padding:14px 14px!important;
    border:0!important;
    border-bottom:1px solid #EDF1F4!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card:hover,
  body.listo-host-staycation-bookings-app .listo-host-bookings-pending-grid .listo-trip-card:hover{
    border-color:#EDF1F4!important;background:#FBFDFF!important;box-shadow:none!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card__photo,
  body.listo-host-staycation-bookings-app .listo-host-bookings-pending-grid .listo-trip-card__photo{
    width:76px!important;height:60px!important;border-radius:8px!important;background:#F2F6F8!important;align-self:center!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body,
  body.listo-host-staycation-bookings-app .listo-host-bookings-pending-grid .listo-host-bookings-card__body{
    display:block!important;padding:0!important;min-width:0!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-booking-card__kicker,
  body.listo-host-staycation-bookings-app .listo-host-bookings-pending-grid .listo-host-booking-card__kicker{
    display:none!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > a,
  body.listo-host-staycation-bookings-app .listo-host-bookings-pending-grid .listo-host-bookings-card__body > a{
    display:grid!important;
    grid-template-columns:minmax(150px,1.4fr) minmax(130px,1.1fr) minmax(150px,1.3fr) minmax(145px,1.2fr) minmax(90px,.8fr)!important;
    gap:18px!important;align-items:center!important;min-height:60px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card__title,
  body.listo-host-staycation-bookings-app .listo-host-bookings-pending-grid .listo-trip-card__title{
    font-size:14px!important;line-height:1.3!important;font-weight:750!important;color:#172631!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > a > .listo-caption:nth-of-type(1),
  body.listo-host-staycation-bookings-app .listo-host-bookings-pending-grid .listo-host-bookings-card__body > a > .listo-caption:nth-of-type(1){
    grid-column:2!important;grid-row:1!important;margin:0!important;font-size:13px!important;color:#52636E!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > a > .listo-caption:nth-of-type(2),
  body.listo-host-staycation-bookings-app .listo-host-bookings-pending-grid .listo-host-bookings-card__body > a > .listo-caption:nth-of-type(2){
    grid-column:3!important;grid-row:1!important;margin:0!important;font-size:12px!important;color:#697A84!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > a > div:last-child,
  body.listo-host-staycation-bookings-app .listo-host-bookings-pending-grid .listo-host-bookings-card__body > a > div:last-child{
    grid-column:4!important;grid-row:1!important;margin:0!important;display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > a > .listo-trip-card__title,
  body.listo-host-staycation-bookings-app .listo-host-bookings-pending-grid .listo-host-bookings-card__body > a > .listo-trip-card__title{
    grid-column:1!important;grid-row:1!important;margin:0!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-status-badge,
  body.listo-host-staycation-bookings-app .listo-host-bookings-pending-grid .listo-status-badge{
    padding:5px 8px!important;border-radius:7px!important;font-size:11px!important;font-weight:750!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > a::after,
  body.listo-host-staycation-bookings-app .listo-host-bookings-pending-grid .listo-host-bookings-card__body > a::after{
    content:"View →";grid-column:5!important;grid-row:1!important;justify-self:end!important;white-space:nowrap!important;
    color:#1478C9!important;font-size:12px!important;font-weight:800!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > div:not(.listo-host-booking-card__kicker):not(.listo-host-refund-action):not(.listo-v745-host-payment-actions):not(.listo-field-error):not(.listo-report-problem-form),
  body.listo-host-staycation-bookings-app .listo-host-bookings-pending-grid .listo-host-bookings-card__body > div:not(.listo-host-booking-card__kicker):not(.listo-host-refund-action):not(.listo-v745-host-payment-actions):not(.listo-field-error):not(.listo-report-problem-form){
    box-sizing:border-box;
  }

  /* Existing secondary actions stay below the row data; nothing is removed. */
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > .listo-host-refund-action,
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > .listo-v745-host-payment-actions,
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > .listo-caption,
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > div[style*="display:flex"]{
    grid-column:2!important;
    margin-left:0!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-refund-action,
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-v745-host-payment-actions{
    margin-top:10px!important;border-radius:10px!important;
  }

  /* Pending section inherits the same open row language but keeps its own heading. */
  body.listo-host-staycation-bookings-app .listo-host-bookings-pending-section{
    margin:0 0 24px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-section-heading{
    display:flex!important;align-items:end!important;justify-content:space-between!important;margin:0!important;padding:0 0 10px!important;border-bottom:1px solid #E3EAF0!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-section-heading h2{font-size:18px!important;line-height:24px!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-section-heading p{font-size:13px!important;margin:4px 0 0!important;color:#75848E!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-section-heading .listo-trip-section__count{font-size:11px!important;background:#EDF4F8!important;color:#527081!important}
}

@media (max-width:1000px){
  .listo-host-bookings-table-head{display:none!important}
}


/* ================================================================
 * NEXT892 — Staycation Bookings desktop refinement
 * Presentation-only refinement on top of NEXT891.
 * ================================================================ */
@media (min-width:1001px){
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-section{
    scroll-margin-top:88px!important;margin:0 0 30px!important;padding:18px 0 22px!important;
    border-top:1px solid #E3EAF0!important;border-bottom:1px solid #E3EAF0!important;
    border-left:0!important;border-right:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-section > h2{margin:0!important;font-size:20px!important;line-height:26px!important;color:#172631!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-section > p{margin:4px 0 12px!important;font-size:14px!important;line-height:20px!important;color:#75848E!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid{display:flex!important;flex-direction:column!important;gap:0!important;margin:0!important;padding:0!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card{
    display:grid!important;grid-template-columns:112px minmax(0,1fr)!important;column-gap:20px!important;align-items:start!important;
    width:100%!important;min-width:0!important;padding:18px 0!important;margin:0!important;
    border:0!important;border-top:1px solid #EDF1F4!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card:first-child{border-top:0!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__photo{
    position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;grid-column:1!important;grid-row:1!important;
    width:112px!important;min-width:112px!important;height:82px!important;margin:0!important;padding:0!important;border-radius:10px!important;overflow:hidden!important;align-self:start!important;transform:none!important;z-index:0!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__photo img{display:block!important;position:static!important;width:100%!important;height:100%!important;margin:0!important;object-fit:cover!important;transform:none!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-bookings-card__body{
    grid-column:2!important;grid-row:1!important;position:relative!important;min-width:0!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;overflow:visible!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-booking-card__kicker{margin:0 0 6px!important;font-size:11px!important;line-height:14px!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__title{display:block!important;position:static!important;min-width:0!important;max-width:none!important;margin:0 0 4px!important;font-size:20px!important;line-height:26px!important;font-weight:750!important;color:#4C5A64!important;overflow-wrap:break-word!important;word-break:normal!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-caption{display:block!important;position:static!important;min-width:0!important;max-width:none!important;margin:0 0 3px!important;font-size:14px!important;line-height:20px!important;color:#8797A1!important;overflow-wrap:break-word!important;word-break:normal!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-booking-request-timer{position:static!important;display:flex!important;align-items:center!important;gap:18px!important;width:100%!important;min-height:44px!important;margin:12px 0!important;padding:0 14px!important;box-sizing:border-box!important;border:1px solid #F0D79A!important;border-radius:10px!important;background:#FFF9EA!important;color:#8B6B2B!important;overflow:visible!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-booking-request-timer__label{font-size:12px!important;font-weight:700!important;white-space:nowrap!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-booking-request-timer strong{font-size:13px!important;line-height:18px!important;color:#8B6B2B!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-booking-request-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:12px!important;width:100%!important;margin:0!important;padding:0!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-booking-request-actions .listo-btn{width:100%!important;min-height:48px!important;margin:0!important;border-radius:10px!important}

  body.listo-host-staycation-bookings-app .listo-host-bookings-controls{margin:0 0 20px!important;padding:0 0 12px!important;border-bottom:1px solid #E3EAF0!important;border-radius:0!important;background:transparent!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filters{display:flex!important;align-items:flex-end!important;gap:14px!important;padding:0!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter-select{display:flex!important;flex-direction:column!important;gap:5px!important;margin:0!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter-select span{font-size:12px!important;font-weight:700!important;color:#74828C!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter-select select{min-height:38px!important;min-width:180px!important;padding:0 34px 0 11px!important;border:1px solid #DCE4E9!important;border-radius:9px!important;background:#fff!important;color:#2B3A44!important;font-size:13px!important;font-weight:650!important;box-shadow:none!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter-select--view select{min-width:170px!important}

  body.listo-host-staycation-bookings-app .listo-host-bookings-all-section{scroll-margin-top:88px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-all-section .listo-host-bookings-section-heading{display:flex!important;align-items:end!important;justify-content:space-between!important;margin:0!important;padding:0 0 10px!important;border-bottom:1px solid #E3EAF0!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-all-section .listo-host-bookings-section-heading h2{margin:0!important;font-size:20px!important;line-height:26px!important;color:#172631!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-all-section .listo-host-bookings-section-heading p{margin:4px 0 0!important;font-size:14px!important;line-height:20px!important;color:#75848E!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid{display:flex!important;flex-direction:column!important;gap:0!important;padding:0!important;margin:0!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card{display:grid!important;grid-template-columns:76px minmax(0,1fr)!important;gap:16px!important;min-height:88px!important;padding:14px 0!important;margin:0!important;border:0!important;border-bottom:1px solid #EDF1F4!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card__photo{position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;width:76px!important;min-width:76px!important;height:60px!important;margin:0!important;transform:none!important;border-radius:8px!important;overflow:hidden!important;align-self:start!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card__photo img{position:static!important;display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;transform:none!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body{min-width:0!important;width:100%!important;margin:0!important;padding:0!important;overflow:visible!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > a{min-width:0!important;width:100%!important;box-sizing:border-box!important}
  body.listo-host-staycation-bookings-app .listo-host-booking-card__kicker{display:none!important}
}


/* ================================================================
 * NEXT893 — Staycation Bookings open request workspace
 * Removes the redundant View/Listing toolbar and all outer/card
 * containment from Reservation Requests. Existing booking markup,
 * actions, lifecycle state, and responsive behavior remain intact.
 * ================================================================ */
body.listo-host-staycation-bookings-app .listo-bookings-results-panel{
  display:contents!important;
}
body.listo-host-staycation-bookings-app .listo-host-bookings-controls{
  display:none!important;
}
body.listo-host-staycation-bookings-app .listo-host-bookings-request-section{
  margin:0 0 30px!important;
  padding:18px 0 22px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
}
body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card{
  width:100%!important;
  margin:0!important;
  border:0!important;
  border-top:1px solid #EDF1F4!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card:first-child{
  border-top:0!important;
}
body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card:hover{
  background:transparent!important;
  box-shadow:none!important;
}
@media (max-width:1000px){
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-section{
    margin:0 0 20px!important;
    padding:14px 0 18px!important;
    border:0!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card{
    border:0!important;
    border-top:1px solid #EDF1F4!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card:first-child{
    border-top:0!important;
  }
}


/* ============================================================================
   NEXT894 — Global semantic color standard
   --------------------------------------------------------------------------
   RED    = requires attention / action
   ORANGE = pending / waiting
   BLUE   = confirmed / active (Listo brand)
   GREEN  = positive financial result
   PINK   = negative financial result
   GRAY   = neutral / informational / terminal

   Parking retains its orange business identity; pending uses the amber
   semantic token and should be paired with contextual labels when both appear.
   ============================================================================ */
.listo-semantic--attention {
  color: var(--listo-semantic-attention-dark) !important;
  background: var(--listo-semantic-attention-tint) !important;
  border-color: #F4B4B4 !important;
}
.listo-semantic--pending {
  color: var(--listo-semantic-pending-dark) !important;
  background: var(--listo-semantic-pending-tint) !important;
  border-color: #F6D38A !important;
}
.listo-semantic--confirmed {
  color: var(--listo-semantic-confirmed-dark) !important;
  background: var(--listo-semantic-confirmed-tint) !important;
  border-color: #C7E1FA !important;
}
.listo-semantic--positive {
  color: var(--listo-semantic-positive-dark) !important;
  background: var(--listo-semantic-positive-tint) !important;
  border-color: #BFE8CD !important;
}
.listo-semantic--negative {
  color: var(--listo-semantic-negative-dark) !important;
  background: var(--listo-semantic-negative-tint) !important;
  border-color: #F3C3D9 !important;
}
.listo-semantic--neutral {
  color: var(--listo-semantic-neutral-dark) !important;
  background: var(--listo-semantic-neutral-tint) !important;
  border-color: #D8E0E8 !important;
}

/* Core booking status vocabulary. */
.listo-status-badge--pending,
.listo-status-badge--pending_host_approval,
.listo-status-badge--awaiting_confirmation,
.listo-status-badge--unpaid,
.listo-dashboard-v2__status--pending_host_approval,
.listo-dashboard-v2__status--pending_approval {
  color: var(--listo-semantic-pending-dark) !important;
  background: var(--listo-semantic-pending-tint) !important;
}
.listo-status-badge--approved,
.listo-status-badge--confirmed,
.listo-status-badge--paid,
.listo-parking-rental-card__status--confirmed {
  color: var(--listo-semantic-confirmed-dark) !important;
  background: var(--listo-semantic-confirmed-tint) !important;
}
.listo-status-badge--declined,
.listo-status-badge--declined_by_host,
.listo-status-badge--cancelled,
.listo-status-badge--draft {
  color: var(--listo-semantic-neutral-dark) !important;
  background: var(--listo-semantic-neutral-tint) !important;
}

/* Attention is reserved for actionable workflow states. */
.listo-host-bookings-attention-summary,
.listo-bookings-summary__item--attention {
  color: var(--listo-semantic-attention-dark) !important;
  background: var(--listo-semantic-attention-tint) !important;
  border-color: #F4B4B4 !important;
}
.listo-host-bookings-attention-summary strong,
.listo-bookings-summary__item--attention strong {
  color: var(--listo-semantic-attention-dark) !important;
}

/* Host booking pending indicators now consistently mean "waiting". */
.listo-host-bookings-summary__item--pending strong,
.listo-host-booking-card__kicker--pending {
  color: var(--listo-semantic-pending-dark) !important;
}
.listo-bookings-calendar-booking.is-pending,
.listo-bookings-calendar-week-track .listo-bookings-calendar-booking.is-pending {
  border-left-color: var(--listo-semantic-pending) !important;
  background: var(--listo-semantic-pending-tint) !important;
}

/* Financial direction utilities — use these for monetary values only. */
.listo-financial--positive,
.listo-amount--positive,
.listo-money--positive {
  color: var(--listo-semantic-positive-dark) !important;
}
.listo-financial--negative,
.listo-amount--negative,
.listo-money--negative {
  color: var(--listo-semantic-negative-dark) !important;
}
.listo-financial-badge--positive,
.listo-amount-badge--positive {
  color: var(--listo-semantic-positive-dark) !important;
  background: var(--listo-semantic-positive-tint) !important;
}
.listo-financial-badge--negative,
.listo-amount-badge--negative {
  color: var(--listo-semantic-negative-dark) !important;
  background: var(--listo-semantic-negative-tint) !important;
}

/* Host dashboard payment-submitted state is a confirmed workflow state. */
.listo-dashboard-v2__status--host_payment_submitted {
  color: var(--listo-semantic-confirmed-dark) !important;
  background: var(--listo-semantic-confirmed-tint) !important;
}

/* ======================================================================
   NEXT895 — Global semantic messaging refinement
   Green = positive/successful message or prompt.
   Red = error/failure message or prompt.
   Attention is red; pending remains amber.
   ====================================================================== */
:root {
  --listo-semantic-success: var(--listo-semantic-positive);
  --listo-semantic-success-tint: var(--listo-semantic-positive-tint);
  --listo-semantic-success-dark: var(--listo-semantic-positive-dark);
  --listo-semantic-error: var(--listo-semantic-attention);
  --listo-semantic-error-tint: var(--listo-semantic-attention-tint);
  --listo-semantic-error-dark: var(--listo-semantic-attention-dark);
}

/* Positive message/prompt surfaces. These aliases make the semantic rule
   reusable across existing and future modules without changing workflows. */
.listo-field-success,
.listo-success-message,
.listo-alert--success,
.listo-message--success,
.listo-prompt--success,
#listo-checkout-success-message,
#listo-support-contact-success,
.listo-parking-success {
  color: var(--listo-semantic-success-dark);
  background: var(--listo-semantic-success-tint);
  border-color: #BBE7CC;
}

.listo-field-success,
.listo-success-message,
.listo-alert--success,
.listo-message--success,
.listo-prompt--success {
  padding: 10px 12px;
  border: 1px solid #BBE7CC;
  border-radius: var(--radius-sm);
}

/* Error message/prompt surfaces. Field-level errors already use the same
   red token; this extends the same meaning to message-level components. */
.listo-error-message,
.listo-alert--error,
.listo-message--error,
.listo-prompt--error,
.listo-review-edit-error,
.listo-field-error,
.listo-decline-notice,
.listo-parking-alert {
  color: var(--listo-semantic-error-dark);
  border-color: #F3C6C6;
}

.listo-error-message,
.listo-alert--error,
.listo-message--error,
.listo-prompt--error {
  padding: 10px 12px;
  background: var(--listo-semantic-error-tint);
  border: 1px solid #F3C6C6;
  border-radius: var(--radius-sm);
}

/* Host Bookings: attention is an action-required state, not a pending state. */
body.listo-host-staycation-bookings-app .listo-host-bookings-attention-summary {
  border-color: #F3C6C6;
  background: var(--listo-semantic-error-tint);
  color: var(--listo-semantic-error-dark);
}

body.listo-host-staycation-bookings-app .listo-host-bookings-attention-summary__count {
  background: var(--listo-semantic-attention);
  color: #fff;
}

body.listo-host-staycation-bookings-app .listo-host-bookings-summary__item--attention strong {
  color: var(--listo-semantic-attention);
}

/* Explicit semantic utility classes for new UI work. */
.listo-semantic-success {
  color: var(--listo-semantic-success-dark) !important;
  background-color: var(--listo-semantic-success-tint) !important;
  border-color: #BBE7CC !important;
}

.listo-semantic-error,
.listo-semantic-attention {
  color: var(--listo-semantic-error-dark) !important;
  background-color: var(--listo-semantic-error-tint) !important;
  border-color: #F3C6C6 !important;
}

/* ============================================================================
   NEXT896 — Host Bookings semantic attention correction
   --------------------------------------------------------------------------
   Action-required states are RED. Pending/waiting states remain AMBER.
   This final override intentionally wins over older Booking workspace layers
   that still carried the legacy amber attention treatment.
   Presentation-only; no workflow/data behavior changes.
   ============================================================================ */
body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary,
body.listo-host-staycation-bookings-app .listo-host-bookings-attention-summary {
  border-color: #F4B4B4 !important;
  background: #FDECEC !important;
  color: #B71C1C !important;
}
body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary__count,
body.listo-host-staycation-bookings-app .listo-host-bookings-attention-summary__count {
  background: #E53935 !important;
  color: #FFFFFF !important;
}
body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary strong,
body.listo-host-staycation-bookings-app .listo-host-bookings-attention-summary strong,
body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary small,
body.listo-host-staycation-bookings-app .listo-host-bookings-attention-summary small {
  color: #B71C1C !important;
}

body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item--attention,
body.listo-host-staycation-bookings-app .listo-host-bookings-summary__item--attention {
  border-color: #F4B4B4 !important;
  background: #FDECEC !important;
}
body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item--attention strong,
body.listo-host-staycation-bookings-app .listo-host-bookings-summary__item--attention strong {
  color: #E53935 !important;
}

/* Expired response windows are no longer pending; they are an attention/error
   state because the response window has elapsed. */
body.listo-host-staycation-bookings-app .listo-host-booking-request-timer.is-expired {
  border-color: #F4B4B4 !important;
  background: #FDECEC !important;
  color: #B71C1C !important;
}
body.listo-host-staycation-bookings-app .listo-host-booking-request-timer.is-expired .listo-host-booking-request-timer__label,
body.listo-host-staycation-bookings-app .listo-host-booking-request-timer.is-expired strong {
  color: #B71C1C !important;
}

/* ============================================================================
   NEXT897 — Host Bookings enclosed overview rail
   --------------------------------------------------------------------------
   The booking overview is a distinct secondary container beneath the red
   Needs Action module. Keep its five metrics open internally, while enclosing
   the group with a subtle rounded boundary so the workspace reads as two
   deliberate modules rather than an open strip.
   Presentation-only; no workflow/data behavior changes.
   ============================================================================ */
@media (min-width: 1001px){
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary{
    border:1px solid #E1E8ED !important;
    border-radius:14px !important;
    overflow:hidden !important;
    background:#FFFFFF !important;
    box-shadow:none !important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item{
    border-top:0 !important;
    border-bottom:0 !important;
    background:transparent !important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item:first-child{
    padding-left:20px !important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item:last-child{
    padding-right:20px !important;
  }
}

/* ========================================================================== 
   NEXT898 — Canonical Host desktop header-to-title spacing.
   Establish one vertical entry point for every top-level Host workspace so
   the page title begins at the same distance below the global Host header.
   Presentation-only; mobile keeps its existing touch-first spacing.
   ========================================================================== */
@media (min-width: 901px) {
  :root { --listo-host-desktop-title-top: 56px; }

  body[data-listo-mode="host"] .listo-main > .listo-container,
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell {
    padding-top: var(--listo-host-desktop-title-top) !important;
  }

  /* Some Host workspaces use specialized page shells rather than the shared
     .listo-section wrapper. Keep their first title/header on the same
     baseline without changing their internal content spacing. */
  body[data-listo-mode="host"] .listo-main > .listo-host-account-page,
  body[data-listo-mode="host"] .listo-main > .listo-host-app-page,
  body[data-listo-mode="host"] .listo-main > .listo-inbox-page,
  body[data-listo-mode="host"] .listo-main > .listo-host-home,
  body[data-listo-mode="host"] .listo-main > .listo-dashboard-v2 {
    padding-top: var(--listo-host-desktop-title-top) !important;
  }

  /* The canonical title/header block starts at the top of the page canvas;
     do not add a second page-specific offset above it. */
  body[data-listo-mode="host"] .listo-main > .listo-container > .listo-page-title-row:first-child,
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell > .listo-page-title-row:first-child,
  body[data-listo-mode="host"] .listo-main > .listo-host-app-page > .listo-host-page-header:first-child,
  body[data-listo-mode="host"] .listo-main > .listo-host-account-page > .listo-page-title-row:first-child,
  body[data-listo-mode="host"] .listo-main > .listo-host-home > .listo-dashboard-v2__header:first-child,
  body[data-listo-mode="host"] .listo-main > .listo-dashboard-v2 > .listo-dashboard-v2__header:first-child {
    margin-top: 0 !important;
  }
}


/* NEXT900 — Host Booking metric semantic zero-state correction.
 * Semantic colors are data-driven: a zero/empty metric is always neutral,
 * regardless of its metric category. Active attention/pending/confirmed data
 * retains its semantic color. Presentation-only.
 */
.listo-host-bookings-summary__item--empty strong,
.listo-host-bookings-summary__item--pending:not(.listo-host-bookings-summary__item--has-value) strong,
.listo-host-bookings-summary__item--confirmed:not(.listo-host-bookings-summary__item--has-value) strong,
.listo-host-bookings-summary__item--attention:not(.listo-host-bookings-summary__item--has-value) strong {
  color: var(--ink) !important;
}
.listo-host-bookings-summary__item--attention.listo-host-bookings-summary__item--has-value strong {
  color: var(--listo-semantic-attention) !important;
}
.listo-host-bookings-summary__item--pending.listo-host-bookings-summary__item--has-value strong {
  color: var(--listo-semantic-pending) !important;
}
.listo-host-bookings-summary__item--confirmed.listo-host-bookings-summary__item--has-value strong {
  color: var(--listo-semantic-confirmed) !important;
}

/* NEXT901 — authoritative data-driven metric zero-state override.
 * The rendered numeric value is the source of truth: zero is always neutral,
 * regardless of whether the metric is pending or confirmed. This selector is
 * intentionally based on the explicit data attribute and comes after legacy
 * Booking rules so cached/older workspace selectors cannot recolor a zero.
 */
body.listo-host-staycation-bookings-app .listo-host-bookings-summary__item[data-listo-metric-value="0"] strong {
  color: var(--ink) !important;
}
body.listo-host-staycation-bookings-app .listo-host-bookings-summary__item[data-listo-metric-value]:not([data-listo-metric-value="0"]).listo-host-bookings-summary__item--pending strong {
  color: var(--listo-semantic-pending) !important;
}
body.listo-host-staycation-bookings-app .listo-host-bookings-summary__item[data-listo-metric-value]:not([data-listo-metric-value="0"]).listo-host-bookings-summary__item--confirmed strong {
  color: var(--listo-semantic-confirmed) !important;
}
body.listo-host-staycation-bookings-app .listo-host-bookings-summary__item[data-listo-metric-value]:not([data-listo-metric-value="0"]).listo-host-bookings-summary__item--attention strong {
  color: var(--listo-semantic-attention) !important;
}

/* ========================================================================== 
   NEXT902 — Staycation Calendar & Pricing desktop workspace refinement.
   Presentation-only: preserve existing PHP, AJAX, IDs, data attributes,
   calendar/rules/settings behavior, and mobile interaction model.
   ========================================================================== */
@media (min-width: 901px){
  .listo-host-staycation-calendar-app .listo-host-calendar-page__header{
    /* NEXT898 supplies the canonical 56px page-entry spacing via the
       shared Host shell. Do not add a second top offset here. */
    margin-top:0!important;
    margin-bottom:28px!important;
  }

  /* Listing context: one open workspace bar instead of two competing cards. */
  .listo-host-staycation-calendar-app .listo-cp-listing-bar{
    display:grid!important;
    grid-template-columns:minmax(300px,.8fr) minmax(520px,1.7fr)!important;
    gap:0!important;
    margin-bottom:28px!important;
    border:0!important;
    border-top:1px solid #E2E8ED!important;
    border-bottom:1px solid #E2E8ED!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-listing-selector{
    padding:18px 28px 18px 0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    justify-content:center!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-listing-selector__heading{
    display:flex!important;
    align-items:baseline!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin-bottom:7px!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-listing-selector label{
    margin:0!important;
    font-size:11px!important;
    letter-spacing:.09em!important;
    text-transform:uppercase!important;
    color:#687A86!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-listing-selector__heading span{
    font-size:12px!important;
    color:#87939A!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-listing-selector select{
    height:44px!important;
    border-color:#D7E0E5!important;
    border-radius:9px!important;
    font-size:14px!important;
    box-shadow:none!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-listing-summary{
    min-width:0!important;
    padding:14px 0 14px 28px!important;
    border:0!important;
    border-left:1px solid #E2E8ED!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-listing-summary img{
    width:54px!important;
    height:54px!important;
    border-radius:9px!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-listing-summary strong{
    font-size:15px!important;
    color:#172631!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-listing-summary span{
    font-size:12px!important;
    color:#71808A!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-listing-summary b{
    font-size:15px!important;
    color:#172631!important;
  }

  /* Quiet section switcher: typography + rule, not another card. */
  .listo-host-staycation-calendar-app .listo-cp-tabs{
    border:0!important;
    border-bottom:1px solid #DCE3E7!important;
    border-radius:0!important;
    background:transparent!important;
    padding:0!important;
    gap:24px!important;
    margin:0 0 24px!important;
    box-shadow:none!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-tabs a{
    position:relative!important;
    padding:0 0 11px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#667680!important;
    font-size:14px!important;
    font-weight:700!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-tabs a.is-active{
    background:transparent!important;
    color:#2196F3!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:-1px!important;
    height:2px!important;
    background:#2196F3!important;
    border-radius:2px 2px 0 0!important;
  }

  /* Calendar workspace: open canvas with a purposeful editor boundary. */
  .listo-host-staycation-calendar-app .listo-cp-calendar-layout{
    grid-template-columns:minmax(0,2.6fr) minmax(300px,.85fr)!important;
    gap:32px!important;
    margin-bottom:40px!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-calendar-card{
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-calendar-heading{
    margin-bottom:18px!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-calendar-heading h2{
    font-size:20px!important;
    line-height:1.25!important;
    font-weight:750!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-calendar-heading p{
    font-size:13px!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-calendar-nav{gap:6px!important}
  .listo-host-staycation-calendar-app .listo-cp-calendar-nav a{
    width:36px!important;
    height:36px!important;
    border-color:#D7E0E5!important;
    border-radius:8px!important;
    background:#fff!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-calendar-nav a.today{
    padding:0 12px!important;
    color:#2196F3!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-weekdays,
  .listo-host-staycation-calendar-app .listo-cp-grid{gap:6px!important}
  .listo-host-staycation-calendar-app .listo-cp-weekdays span{
    padding:6px 0!important;
    text-align:left!important;
    font-size:11px!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
    color:#87939A!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-day-spacer{
    min-height:86px!important;
    display:block!important;
    visibility:hidden!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-day{
    min-height:86px!important;
    padding:10px!important;
    border:1px solid #E0E6E9!important;
    border-radius:8px!important;
    background:#fff!important;
    transition:none!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-day:hover{
    border-color:#B8C9D3!important;
    background:#FBFCFD!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-day span{
    font-size:14px!important;
    line-height:1!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-day small{
    margin-top:11px!important;
    font-size:11px!important;
    font-weight:650!important;
    color:#6E7C84!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-day.is-available{background:#fff!important}
  .listo-host-staycation-calendar-app .listo-cp-day.is-booked{background:#F3F5F6!important;border-color:#E0E4E6!important;color:#6D767B!important}
  .listo-host-staycation-calendar-app .listo-cp-day.is-special{background:#FAF6FC!important;border-color:#E7D9ED!important}
  .listo-host-staycation-calendar-app .listo-cp-day.is-blocked{background:#FFF5F5!important;border-color:#F0D0D2!important;color:#A13F45!important}
  .listo-host-staycation-calendar-app .listo-cp-day.is-selected{background:#2196F3!important;border-color:#2196F3!important;color:#fff!important}
  .listo-host-staycation-calendar-app .listo-cp-day.is-selected small{color:#EAF5FF!important}
  .listo-host-staycation-calendar-app .listo-cp-day.is-today:not(.is-selected){box-shadow:inset 0 0 0 2px #2196F3!important}
  .listo-host-staycation-calendar-app .listo-cp-day.is-outside{background:#FAFBFB!important;border-color:#EEF1F2!important;color:#B4BBBD!important}
  .listo-host-staycation-calendar-app .listo-cp-legend{
    margin-top:13px!important;
    gap:18px!important;
    font-size:12px!important;
    color:#71808A!important;
  }

  /* Selected-date editor is the one intentionally contained control surface. */
  .listo-host-staycation-calendar-app .listo-cp-date-card{
    top:88px!important;
    padding:22px!important;
    border:1px solid #DDE5E9!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 8px 24px rgba(28,45,58,.045)!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-date-card__top{margin-bottom:4px!important}
  .listo-host-staycation-calendar-app .listo-cp-date-card h2{
    margin:7px 0 22px!important;
    font-size:20px!important;
    line-height:1.2!important;
    color:#172631!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-status{
    padding:5px 9px!important;
    border-radius:999px!important;
    font-size:11px!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-input{height:46px!important;margin-bottom:17px!important;border-radius:8px!important}
  .listo-host-staycation-calendar-app .listo-cp-date-card select{height:46px!important;border-radius:8px!important}
  .listo-host-staycation-calendar-app .listo-cp-date-card .listo-btn{margin-top:18px!important}
  .listo-host-staycation-calendar-app .listo-cp-info{margin-top:8px!important;border-radius:8px!important;background:#F4F8FA!important;color:#5D707B!important}

  /* Rules: open management list, not a stack of mini-cards. */
  .listo-host-staycation-calendar-app .listo-cp-rules,
  .listo-host-staycation-calendar-app .listo-cp-settings{
    margin-top:0!important;
    margin-bottom:40px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-section-heading{
    padding-bottom:16px!important;
    margin-bottom:0!important;
    border-bottom:1px solid #DCE3E7!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-section-heading h2,
  .listo-host-staycation-calendar-app .listo-cp-settings h2{
    font-size:20px!important;
    line-height:1.25!important;
    font-weight:750!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-section-heading p{font-size:13px!important}
  .listo-host-staycation-calendar-app .listo-cp-rule{
    display:grid!important;
    grid-template-columns:minmax(260px,1.7fr) minmax(190px,.8fr) auto!important;
    gap:24px!important;
    padding:17px 0!important;
    margin:0!important;
    border:0!important;
    border-bottom:1px solid #E5EAEC!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-rule strong{font-size:14px!important;color:#172631!important}
  .listo-host-staycation-calendar-app .listo-cp-rule span{font-size:12px!important}
  .listo-host-staycation-calendar-app .listo-cp-rule b{font-size:14px!important;color:#172631!important}
  .listo-host-staycation-calendar-app .listo-cp-rule-actions{justify-content:flex-end!important}
  .listo-host-staycation-calendar-app .listo-cp-rule-actions button{
    border:0!important;
    border-radius:7px!important;
    padding:7px 10px!important;
    background:transparent!important;
    font-size:12px!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-rule-actions button:hover{background:#F3F7F9!important}
  .listo-host-staycation-calendar-app .listo-cp-rule-actions .listo-cp-delete-rule{color:#B03B43!important}
  .listo-host-staycation-calendar-app .listo-cp-rule-empty{border:1px dashed #CBD5D9!important;border-radius:10px!important;background:#fff!important}

  /* Settings: simple open key/value rows. */
  .listo-host-staycation-calendar-app .listo-cp-settings-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:0!important;
    border-top:1px solid #DCE3E7!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-settings-grid>div{
    min-height:0!important;
    padding:18px 22px 18px 0!important;
    border:0!important;
    border-right:1px solid #E1E7E9!important;
    border-radius:0!important;
    background:transparent!important;
  }
  .listo-host-staycation-calendar-app .listo-cp-settings-grid>div+div{padding-left:22px!important}
  .listo-host-staycation-calendar-app .listo-cp-settings-grid>div:last-child{border-right:0!important}
  .listo-host-staycation-calendar-app .listo-cp-settings-grid strong{font-size:13px!important;color:#667680!important}
  .listo-host-staycation-calendar-app .listo-cp-settings-grid span{font-size:14px!important;color:#172631!important}
}

/* NEXT904 — Staycation Calendar & Pricing: active tab uses Listo brand fill.
 * The active tab itself is the state indicator; no orange state and no underline.
 * Presentation-only; tab routing and view logic remain unchanged.
 */
.listo-host-staycation-calendar-app .listo-cp-tabs a.is-active,
.listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:hover,
.listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:focus-visible{
  background:#2196F3!important;
  color:#fff!important;
  border-color:#2196F3!important;
  border-radius:9px!important;
  padding:10px 14px!important;
  box-shadow:none!important;
}
.listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:after{
  display:none!important;
}
.listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active){
  background:transparent!important;
  color:#566975!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active):hover,
.listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active):focus-visible{
  background:#F3F8FC!important;
  color:#2196F3!important;
}
@media(max-width:800px){
  .listo-host-staycation-calendar-app .listo-cp-tabs a.is-active,
  .listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:hover,
  .listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:focus-visible{
    padding:9px 12px!important;
  }
}

/* NEXT905 — Staycation Calendar & Pricing tabs: stable rectangular tab geometry.
 * Active/inactive tabs use identical dimensions so clicking a tab never shifts
 * neighboring titles. Active state is Listo blue with white text; no rounded
 * corners and no underline. Presentation-only; routing/view logic unchanged.
 */
.listo-host-staycation-calendar-app .listo-cp-tabs{
  align-items:stretch!important;
}
.listo-host-staycation-calendar-app .listo-cp-tabs a,
.listo-host-staycation-calendar-app .listo-cp-tabs a.is-active,
.listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:hover,
.listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:focus-visible,
.listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active):hover,
.listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active):focus-visible{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  min-height:44px!important;
  height:44px!important;
  padding:10px 14px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  line-height:1.2!important;
}
.listo-host-staycation-calendar-app .listo-cp-tabs a.is-active,
.listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:hover,
.listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:focus-visible{
  background:#2196F3!important;
  color:#fff!important;
}
.listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:after{
  display:none!important;
}
.listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active),
.listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active):hover,
.listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active):focus-visible{
  background:transparent!important;
  color:#566975!important;
}
.listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active):hover,
.listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active):focus-visible{
  color:#2196F3!important;
}
@media(max-width:800px){
  .listo-host-staycation-calendar-app .listo-cp-tabs a,
  .listo-host-staycation-calendar-app .listo-cp-tabs a.is-active,
  .listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:hover,
  .listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:focus-visible,
  .listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active):hover,
  .listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active):focus-visible{
    min-height:40px!important;
    height:40px!important;
    padding:9px 12px!important;
  }
}

/* NEXT906 — Calendar date-state refinement */
.listo-host-staycation-calendar-app .listo-cp-calendar-nav{gap:8px!important;align-items:center!important}
.listo-host-staycation-calendar-app .listo-cp-calendar-nav a.today{min-width:62px!important;padding:0 14px!important;flex:0 0 auto!important;white-space:nowrap!important;text-align:center!important}
.listo-host-staycation-calendar-app .listo-cp-day.is-available{background:#ECF8F1!important;border-color:#CFEBDD!important}
.listo-host-staycation-calendar-app .listo-cp-day.is-available small{color:#4E7D68!important}
.listo-host-staycation-calendar-app .listo-cp-day.is-booked{background:#F1F3F4!important;border-color:#DDE2E5!important;color:#687278!important}
.listo-host-staycation-calendar-app .listo-cp-day.is-special{background:#F8F0FB!important;border-color:#E7D5ED!important;color:#6D4779!important}
.listo-host-staycation-calendar-app .listo-cp-day.is-special small{color:#7E4D8D!important}
.listo-host-staycation-calendar-app .listo-cp-day.is-blocked{background:#FFF0F1!important;border-color:#F0C9CD!important;color:#A4474F!important}
.listo-host-staycation-calendar-app .listo-cp-day.is-past{background:#F3F4F5!important;border-color:#E4E7E9!important;color:#A8B0B4!important;cursor:default!important;box-shadow:none!important}
.listo-host-staycation-calendar-app .listo-cp-day.is-past small{color:#A8B0B4!important}
.listo-host-staycation-calendar-app .listo-cp-day.is-past:hover{background:#F3F4F5!important;border-color:#E4E7E9!important}
.listo-host-staycation-calendar-app .listo-cp-day.is-selected{background:#2196F3!important;border-color:#2196F3!important;color:#fff!important}
.listo-host-staycation-calendar-app .listo-cp-day.is-selected small{color:#EAF5FF!important}
.listo-host-staycation-calendar-app .listo-cp-legend i.available{background:#79C99B!important}
.listo-host-staycation-calendar-app .listo-cp-legend i.booked{background:#8A9499!important}
.listo-host-staycation-calendar-app .listo-cp-legend i.special{background:#A85FC5!important}
.listo-host-staycation-calendar-app .listo-cp-legend i.blocked{background:#D85F68!important}

/* NEXT907 — Calendar state visibility refinement */
.listo-host-staycation-calendar-app .listo-cp-calendar-nav a.today{
  min-width:74px!important;
  padding:0 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:nowrap!important;
}

/* Available dates: deliberately visible light green for quick inventory scanning. */
.listo-host-staycation-calendar-app .listo-cp-day.is-available{
  background:#DDF4E8!important;
  border-color:#B7E3CC!important;
  color:#173D2A!important;
}
.listo-host-staycation-calendar-app .listo-cp-day.is-available small{
  color:#2E7651!important;
}

/* Condition states use a stronger, solid semantic color with white content. */
.listo-host-staycation-calendar-app .listo-cp-day.is-booked{
  background:#6F7B82!important;
  border-color:#6F7B82!important;
  color:#fff!important;
}
.listo-host-staycation-calendar-app .listo-cp-day.is-booked small{
  color:#fff!important;
}
.listo-host-staycation-calendar-app .listo-cp-day.is-special{
  background:#9B4BC1!important;
  border-color:#9B4BC1!important;
  color:#fff!important;
}
.listo-host-staycation-calendar-app .listo-cp-day.is-special small{
  color:#fff!important;
}
.listo-host-staycation-calendar-app .listo-cp-day.is-blocked{
  background:#D9535D!important;
  border-color:#D9535D!important;
  color:#fff!important;
}
.listo-host-staycation-calendar-app .listo-cp-day.is-blocked small{
  color:#fff!important;
}

/* Selection remains the strongest blue interaction state. */
.listo-host-staycation-calendar-app .listo-cp-day.is-selected,
.listo-host-staycation-calendar-app .listo-cp-day.is-selected:hover{
  background:#2196F3!important;
  border-color:#2196F3!important;
  color:#fff!important;
}
.listo-host-staycation-calendar-app .listo-cp-day.is-selected small{
  color:#fff!important;
}

/* Past dates remain neutral/inactive regardless of their historical state. */
.listo-host-staycation-calendar-app .listo-cp-day.is-past,
.listo-host-staycation-calendar-app .listo-cp-day.is-past:hover{
  background:#F3F4F5!important;
  border-color:#E4E7E9!important;
  color:#A8B0B4!important;
  cursor:default!important;
  box-shadow:none!important;
}
.listo-host-staycation-calendar-app .listo-cp-day.is-past small{
  color:#A8B0B4!important;
}

/* NEXT910 — Preserve the desktop Calendar workspace grid after the active-view
 * class is applied. The generic workspace visibility rule intentionally uses
 * display:block for Rules/Settings, but Calendar must retain its two-column
 * desktop workspace. No calendar/pricing logic is changed.
 */
@media (min-width: 901px) {
  .listo-calendar-pricing-page .listo-cp-calendar-layout.is-active-workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 2.6fr) minmax(300px, .85fr) !important;
    gap: 32px !important;
    align-items: start !important;
  }
}

/* ========================================================================== 
   NEXT911 — Staycation Listings desktop management workspace
   Presentation-only refinement from the approved NEXT910 Host baseline.
   Existing listing queries, filters, actions, visibility AJAX and URLs remain
   unchanged. Mobile rules continue to use the existing card presentation.
   ========================================================================== */
@media (min-width: 1051px) {
  .listo-my-listings-page {
    max-width: 1200px;
  }

  .listo-my-listings-page__header {
    margin-bottom: 30px;
    padding-bottom: 2px;
  }

  .listo-my-listings-page__heading-copy h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  .listo-my-listings-page__heading-copy p {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
  }

  .listo-my-listings-page__add {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    background: #2196F3;
    color: #fff;
    box-shadow: none;
  }

  .listo-my-listings-toolbar {
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: 24px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 0;
  }

  .listo-my-listings-search input {
    height: 42px;
    border-radius: 9px;
    background: #fff;
    box-shadow: none;
  }

  .listo-my-listings-search input:focus {
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33,150,243,.10);
  }

  .listo-my-listings-filters {
    justify-content: flex-end;
    gap: 5px;
  }

  .listo-my-listings-filter {
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    border-color: transparent;
    background: transparent;
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 600;
  }

  .listo-my-listings-filter:hover {
    border-color: transparent;
    background: var(--surface-alt);
    color: var(--ink);
  }

  .listo-my-listings-filter.is-active {
    border-color: #2196F3;
    background: #2196F3;
    color: #fff;
  }

  .listo-my-listings-summary {
    margin: 0 0 4px;
    min-height: 24px;
    gap: 6px;
    color: var(--ink-muted);
    font-size: 13px;
  }

  .listo-my-listings-summary strong {
    color: var(--ink);
    font-size: 18px;
    line-height: 1;
  }

  .listo-my-listings-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .listo-my-listing-card {
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr);
    min-height: 156px;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: background-color .15s ease;
  }

  .listo-my-listing-card:first-child {
    border-top: 1px solid var(--border);
  }

  .listo-my-listing-card:hover {
    transform: none;
    border-color: var(--border);
    box-shadow: none;
    background: #FAFCFE;
  }

  .listo-my-listing-card__media {
    width: 160px;
    height: 104px;
    align-self: center;
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 10px;
    background: var(--surface-alt);
  }

  .listo-my-listing-card__media img,
  .listo-my-listing-card__media-placeholder {
    width: 160px;
    height: 104px;
    border-radius: 10px;
  }

  .listo-my-listing-card__media-placeholder svg {
    width: 34px;
    height: 34px;
  }

  .listo-my-listing-card__status {
    left: 8px;
    bottom: 8px;
    box-shadow: none;
    font-size: 12px;
  }

  .listo-my-listing-card__menu-wrap {
    top: 4px;
    right: -4px;
  }

  .listo-my-listing-card__menu-toggle {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }

  .listo-my-listing-card__menu-toggle svg {
    width: 17px;
    height: 17px;
  }

  .listo-my-listing-card__menu {
    top: 38px;
    right: 0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }

  .listo-my-listing-card__body {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    column-gap: 28px;
    align-items: center;
    padding: 25px 8px 25px 8px;
  }

  .listo-my-listing-card__title {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 6px !important;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    font-size: 17px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
  }

  .listo-my-listing-card__price {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
  }

  .listo-my-listing-card__price span {
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 500;
  }

  .listo-my-listing-card__actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }

  .listo-my-listing-card__manage,
  .listo-my-listing-card__calendar {
    width: auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
  }

  .listo-my-listing-card__manage {
    gap: 7px;
    border: 1px solid #2196F3;
    background: #2196F3;
    color: #fff;
  }

  .listo-my-listing-card__manage:hover {
    background: #1976D2;
  }

  .listo-my-listing-card__manage svg {
    width: 15px;
    height: 15px;
  }

  .listo-my-listing-card__calendar {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink);
  }

  .listo-my-listing-card__calendar:hover {
    border-color: #B8DDF8;
    background: #F5FAFE;
    color: #1565C0;
  }

  .listo-my-listings-no-results {
    margin-top: 0;
    padding: 48px 20px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }

  .listo-my-listings-empty {
    padding: 64px 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: none;
  }

  .listo-my-listings-cohosted {
    margin-top: 48px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
  }

  .listo-my-listings-section-heading {
    margin-bottom: 8px;
  }

  .listo-my-listings-section-heading h2 {
    font-size: 19px;
  }

  .listo-my-listings-section-heading p {
    font-size: 13px;
  }

  .listo-my-listing-card--cohosted .listo-my-listing-card__media {
    width: 160px;
    height: 104px;
    aspect-ratio: auto;
  }

  .listo-my-listing-card__cohost-badge {
    left: 8px;
    bottom: 8px;
    border-radius: 7px;
    padding: 5px 8px;
    font-size: 12px;
  }

  .listo-my-listing-card__owner {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin: 0;
  }
}


/* ========================================================================
   NEXT914 — Host Inbox (Staycation) desktop workspace
   Presentation/context refinement from NEXT913 Host Mode baseline.
   Shared messaging, AJAX, offer, booking and profile workflows remain intact.
   ======================================================================== */
@media (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox-page {
    width: 100% !important;
    max-width: 1200px !important;
  }

  body[data-listo-mode="host"] .listo-inbox-page__description {
    max-width: 760px;
    margin: 0 0 22px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* The Host Inbox is deliberately a three-zone operational workspace:
     find the conversation, communicate, then act/contextualize. */
  body[data-listo-mode="host"] .listo-inbox--host {
    display: grid !important;
    grid-template-columns: 300px minmax(0, 1fr) 320px !important;
    width: 100% !important;
    height: min(760px, calc(100dvh - 245px)) !important;
    min-height: 540px !important;
    margin: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    background: var(--surface) !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list {
    min-width: 0;
    background: #FBFCFE;
    border-right: 1px solid var(--border);
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread {
    min-width: 0;
    background: var(--surface);
  }

  /* Staycation/Parking is determined by the Host workspace, not by an
     additional navigation layer inside Inbox. */
  body[data-listo-mode="host"] .listo-inbox__vertical-switcher,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__vertical,
  body[data-listo-mode="host"] .listo-inbox--host #listo-inbox-thread-vertical {
    display: none !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list-head {
    min-height: 58px;
    padding: 14px 16px 10px;
    border-bottom: 0;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__eyebrow {
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list-head strong {
    display: block;
    margin-top: 2px;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.25;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__unread-count {
    color: var(--ink-muted) !important;
    background: transparent !important;
    font-size: 12px;
    font-weight: 600;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host {
    position: static;
    padding: 8px 12px 12px;
    border-bottom: 1px solid var(--border);
    background: transparent;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search-wrap {
    min-height: 38px;
    padding: 0 11px;
    border-radius: 9px;
    background: var(--surface);
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search {
    min-height: 36px;
    font-size: 13px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host {
    gap: 3px;
    margin-top: 8px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host .listo-inbox__filter {
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host .listo-inbox__filter.is-active {
    color: #fff !important;
    background: #2196F3 !important;
    border-color: #2196F3 !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item {
    padding: 11px 13px;
    gap: 9px;
    border-left-width: 3px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item.is-active {
    background: #EAF5FF !important;
    border-left-color: #2196F3 !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__new {
    background: #2196F3 !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header {
    min-height: 68px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-name {
    font-size: 15px;
    font-weight: 700;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-subrow {
    margin-top: 3px;
  }

  /* Desktop does not need the mobile "details" toggle because the context
     panel is already present as the third workspace zone. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-info-btn {
    display: none !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0;
    padding: 18px 16px;
    overflow-y: auto;
    box-sizing: border-box;
    background: #FBFCFE;
    border-left: 1px solid var(--border);
    border-top: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__mobile-header {
    display: none;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__panel {
    padding: 0 0 17px;
    margin: 0 0 17px;
    border-bottom: 1px solid var(--border);
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__panel:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__label {
    margin: 0 0 9px;
    color: var(--ink-muted);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__title {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__facts li {
    padding: 8px 0;
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__actions {
    margin-top: 13px;
  }

  body[data-listo-mode="host"] .listo-inbox--host #listo-sidebar-offer-btn {
    color: #1769AA;
    border-color: #9DCCF6;
    background: #F7FBFF;
  }

  body[data-listo-mode="host"] .listo-inbox--host #listo-sidebar-preapprove-btn {
    background: #2196F3;
    border-color: #2196F3;
    color: #fff;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__guest-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 10px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__guest-row .listo-single-host__avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__guest-row + .listo-inbox-sidebar__facts {
    margin-top: 1px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar .listo-caption {
    font-size: 12px;
    line-height: 1.5;
  }
}

@media (max-width: 1100px) and (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 280px minmax(0, 1fr) 285px !important;
  }
}

/* ========================================================================
   NEXT915 — Host Inbox desktop refinement
   Keep the NEXT914 three-zone architecture and all existing messaging /
   sidebar workflows. This pass refines hierarchy, density and desktop
   workspace proportions only.
   ======================================================================== */
@media (min-width: 801px) {
  /* Match the established Host title rhythm. The page header itself carries
     the canonical 56px shell entry spacing; no Inbox-specific top offset. */
  body[data-listo-mode="host"] .listo-inbox-page {
    width: 100% !important;
    max-width: 1500px !important;
    box-sizing: border-box !important;
  }

  body[data-listo-mode="host"] .listo-inbox-page__header {
    min-height: 59px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body[data-listo-mode="host"] .listo-inbox-page__header .listo-inbox__heading {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    font-size: 26px !important;
    line-height: 30px !important;
  }

  body[data-listo-mode="host"] .listo-inbox-page__description {
    margin: 5px 0 0 !important;
    padding: 0 !important;
    max-width: 760px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    min-height: 20px !important;
  }

  /* The Inbox is the workspace itself — not a card containing another
     workspace. Keep only the functional column separators. */
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 310px minmax(0, 1fr) 310px !important;
    height: min(760px, calc(100dvh - 245px)) !important;
    min-height: 540px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: var(--surface) !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list {
    border-left: 0 !important;
    border-right: 1px solid var(--border) !important;
    background: var(--surface) !important;
  }

  /* Remove the redundant second Inbox title and give the conversation
     collection a compact, useful heading. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list-head {
    min-height: 48px !important;
    padding: 10px 14px 8px !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list-head strong {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 22px !important;
    font-weight: 700 !important;
  }

  /* Search is the input itself. No extra wrapper/card around it. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host {
    padding: 0 12px 10px !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search-wrap {
    min-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    background: var(--surface-alt) !important;
    box-shadow: none !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search {
    min-height: 36px !important;
    font-size: 13px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host {
    gap: 2px !important;
    margin-top: 7px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host .listo-inbox__filter {
    min-height: 28px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  /* Compact scanning density: the conversation list should expose more
     threads at first glance without dropping below the established readable
     12–15px Host typography scale. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item {
    min-height: 76px !important;
    padding: 9px 12px !important;
    gap: 9px !important;
    border-left-width: 3px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__photo {
    width: 40px !important;
    height: 40px !important;
    margin-top: 1px !important;
    font-size: 14px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__title {
    font-size: 14px !important;
    line-height: 18px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__time {
    font-size: 12px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag {
    margin: 2px 0 3px !important;
    padding: 1px 6px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    border-radius: 7px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__preview {
    font-size: 13px !important;
    line-height: 17px !important;
  }

  /* The conversation is the dominant desktop zone. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread {
    min-width: 0 !important;
    background: var(--surface) !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header {
    min-height: 64px !important;
    padding: 10px 18px !important;
    box-shadow: none !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__messages {
    padding: 16px 24px 8px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble {
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 9px 13px !important;
  }

  /* Keep the contextual action rail visually quiet and persistent. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar {
    border-left: 1px solid var(--border) !important;
    background: var(--surface) !important;
    padding: 16px 14px !important;
  }
}

@media (min-width: 1281px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 310px minmax(0, 1fr) 310px !important;
  }
}

@media (max-width: 1100px) and (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 285px minmax(0, 1fr) 275px !important;
  }
}

/* ========================================================================
   NEXT916 — Host Inbox desktop density refinement
   Presentation-only refinement from NEXT915. Preserve all messaging,
   reservation, offer, charge, guest-profile, AJAX and responsive behavior.
   ======================================================================== */
@media (min-width: 801px) {
  /* Canonical Host page-title geometry: no divider or decorative rule between
     the page title and its one-line description. */
  body[data-listo-mode="host"] .listo-inbox-page__header {
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    min-height: 59px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
  }
  body[data-listo-mode="host"] .listo-inbox-page__header::before,
  body[data-listo-mode="host"] .listo-inbox-page__header::after,
  body[data-listo-mode="host"] .listo-inbox-page__header .listo-inbox__heading::before,
  body[data-listo-mode="host"] .listo-inbox-page__header .listo-inbox__heading::after {
    display: none !important;
    content: none !important;
  }

  /* Narrower side rails; the conversation remains the dominant workspace. */
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 280px minmax(0, 1fr) 280px !important;
  }

  /* The search input is the only visible search container. The toolbar itself
     stays visually open, without a colored wrapper behind the input. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host {
    padding: 0 12px 10px !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search {
    width: 100% !important;
    min-height: 40px !important;
    padding: 9px 12px 9px 39px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 13px !important;
  }

  /* Dense conversation scanning: keep guest, listing and context, remove the
     redundant latest-message preview on desktop. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item {
    min-height: 68px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__photo {
    width: 38px !important;
    height: 38px !important;
    margin-top: 1px !important;
    font-size: 14px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__title {
    font-size: 14px !important;
    line-height: 18px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__time {
    font-size: 12px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag {
    margin: 1px 0 2px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__context {
    min-height: 17px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__preview {
    display: none !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-context-badge {
    min-height: 17px !important;
    padding: 2px 6px !important;
    font-size: 9px !important;
  }

  /* More horizontal room for actual message content. Short messages remain
     naturally sized; longer messages can use substantially more of the chat
     canvas before wrapping. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble {
    max-width: 74% !important;
  }

  /* Keep the context rail readable at its reduced width. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
}

@media (min-width: 801px) and (max-width: 1280px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 255px minmax(0, 1fr) 255px !important;
  }
}

/* ========================================================================
   NEXT917 — Host Inbox clarity + guest identity + Special Offer CTA
   Presentation and workflow-surface refinement. Messaging storage and
   checkout validation remain unchanged.
   ======================================================================== */
@media (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 250px minmax(0, 1fr) 220px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list-head {
    min-height: 48px;
    padding: 12px 12px 8px;
    justify-content: flex-start;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__unread-count {
    margin-left: 0;
    font-size: 11px;
    min-height: 28px;
    padding: 5px 10px;
  }

  /* Search field is the only search container; remove any parent fill/chrome. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host {
    padding: 7px 10px 8px;
    background: transparent;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search-wrap {
    background: transparent;
    border: 1px solid var(--border);
    box-shadow: none;
    min-height: 34px;
    padding: 0 9px;
    border-radius: 9px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search {
    font-size: 12px;
    min-height: 32px;
  }

  /* Four compact equal-width tabs so Reservations never escapes the list pane. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    margin-top: 6px;
    padding: 0;
    overflow: hidden;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host .listo-inbox__filter {
    min-width: 0;
    min-height: 27px;
    padding: 4px 2px;
    border-radius: 999px;
    font-size: 9.5px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Conversation rows are scan-first: guest + listing + type, no message preview. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item {
    min-height: 68px;
    padding: 8px 10px;
    gap: 8px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__photo {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 12px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__photo img,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-avatar img,
  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__title {
    font-size: 13px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__time {
    font-size: 10px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag {
    margin: 1px 0 2px;
    font-size: 10px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__stay {
    font-size: 9.5px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__preview {
    display: none !important;
  }

  /* Keep the chat pane dominant. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble {
    max-width: 72%;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar {
    padding: 10px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar .listo-single-host__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
}

@media (max-width: 1100px) and (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 240px minmax(0, 1fr) 210px;
  }
}

/* Guest-facing Special Offer CTA. The existing checkout URL carries the
   validated offer_id; this only changes the action's presentation/visibility. */
.listo-offer-card__cta {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 800px) {
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    overflow: hidden;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host .listo-inbox__filter {
    min-width: 0;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 9.5px;
  }
}

/* ========================================================================
   NEXT917 — Host Inbox clarity + guest identity + Special Offer CTA
   ======================================================================== */
@media (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host { grid-template-columns: 250px minmax(0, 1fr) 220px; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list-head { min-height: 48px; padding: 12px 12px 8px; justify-content: flex-start; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__unread-count { margin-left: 0; font-size: 11px; min-height: 28px; padding: 5px 10px; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host { padding: 7px 10px 8px; background: transparent; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search-wrap { background: transparent; border: 1px solid var(--border); box-shadow: none; min-height: 34px; padding: 0 9px; border-radius: 9px; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search { font-size: 12px; min-height: 32px; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: 6px; padding: 0; overflow: hidden; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host .listo-inbox__filter { min-width: 0; min-height: 27px; padding: 4px 2px; border-radius: 999px; font-size: 9.5px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item { min-height: 68px; padding: 8px 10px; gap: 8px; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__photo { width: 34px; height: 34px; min-width: 34px; font-size: 12px; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__photo img,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-avatar img,
  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__title { font-size: 13px; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__time { font-size: 10px; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag { margin: 1px 0 2px; font-size: 10px; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__stay { font-size: 9.5px; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__preview { display: none !important; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble { max-width: 72%; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar { padding: 10px; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar .listo-single-host__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
}
@media (max-width: 1100px) and (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host { grid-template-columns: 240px minmax(0, 1fr) 210px; }
}
.listo-offer-card__cta { display: inline-flex; width: 100%; justify-content: center; align-items: center; min-height: 42px; margin-top: 12px; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; }
@media (max-width: 800px) {
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; overflow: hidden; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host .listo-inbox__filter { min-width: 0; padding-left: 2px; padding-right: 2px; font-size: 9.5px; }
}

/* ========================================================================
   NEXT918 — Host Inbox final list-header/status refinement
   UI-only except for status presentation. Existing messaging workflows,
   filters/search engine, AJAX, offers and booking actions remain intact.
   ======================================================================== */
@media (min-width: 801px) {
  /* The Inbox intentionally starts with the current full conversation set;
     no secondary filter tabs are shown on the Host desktop workspace. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host {
    display: none !important;
  }

  /* 0 unread is the sole list-header content and is visually centered. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list-head {
    min-height: 54px;
    height: 54px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center !important;
    border-bottom: 0 !important;
    background: #fff;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__unread-count {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid #D7EAFB;
    border-radius: 999px;
    background: #fff;
    color: #536579;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
  }

  /* Search sits directly on the list surface; the toolbar does not become
     another colored container around it. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host {
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--border);
    background: #fff !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search-wrap {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #D8E1EA;
    border-radius: 10px;
    background: #fff !important;
    box-shadow: none !important;
  }

  /* The thread list remains scan-first and does not waste a row on the
     latest-message preview. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__preview {
    display: none !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__context {
    margin-top: 2px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item {
    min-height: 70px;
    padding: 9px 12px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-context-badge {
    min-height: 20px;
    padding: 3px 7px;
    font-size: 9.5px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-context-badge--booked_reservation,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-context-badge--booked-reservation {
    color: #155E9C;
    background: #EAF5FF;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-context-badge--inquiry {
    color: #8A5B00;
    background: #FFF5D6;
  }

  /* Narrower support rails; the center conversation gets the majority of
     available desktop width. */
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 260px minmax(0, 1fr) 250px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble {
    max-width: 74% !important;
  }

  /* Prevent the empty-state active-thread header/avatar from being forced
     visible by the legacy desktop !important rule. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-active[style*="display:none"] {
    display: none !important;
  }
}

@media (max-width: 1100px) and (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 250px minmax(0, 1fr) 220px !important;
  }
}

/* ========================================================================
   NEXT920 — Compact Host Inbox conversation navigation
   Desktop presentation only. The left rail intentionally shows only the
   guest identity and conversation status; detailed listing/reservation
   context remains in the selected conversation and right-side context rail.
   ======================================================================== */
@media (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 250px minmax(0, 1fr) 250px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item {
    min-height: 62px;
    height: 62px;
    padding: 8px 10px;
    gap: 9px;
    align-items: center;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__photo {
    width: 38px;
    height: 38px;
    min-width: 38px;
    font-size: 13px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__top-row {
    margin: 0;
    min-height: 18px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__title {
    font-size: 14px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The latest-activity timestamp is intentionally omitted from the compact
     navigation surface; the selected conversation contains the full context. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__time,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__stay,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__vertical,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__preview {
    display: none !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__context {
    margin: 0;
    min-height: 18px;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-context-badge {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__new {
    right: 7px;
  }
}

@media (max-width: 1100px) and (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 230px minmax(0, 1fr) 220px !important;
  }
}


/* ========================================================================
   NEXT921A — Host Inbox message width + Guest Profile identity
   Desktop presentation only. Keep the selected conversation as the primary
   workspace and give Host-authored messages more usable horizontal space.
   Guest Profile follows the same first-name + last-initial identity rule
   already used by the Host Inbox conversation navigation.
   ======================================================================== */
@media (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble-row--mine .listo-msg-bubble-wrap {
    max-width: 82% !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble-row--mine .listo-msg-bubble {
    max-width: 100% !important;
  }
}

/* NEXT921B — Inbox safety notice and moderation UI. User-authored URLs/contact
   details are blocked server-side; this styling only presents the guest notice. */
.listo-inbox-notice--guest-safety {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  max-width: 640px;
  margin: 0 auto 12px;
  padding: 10px 14px 11px;
  border: 1px solid #D9E9F8;
  border-radius: 10px;
  background: #F7FBFF;
  color: var(--ink-muted);
  font-size: 11.5px;
  line-height: 1.45;
  text-align: center;
}
.listo-inbox-notice--guest-safety strong {
  color: var(--ink);
  font-size: 12px;
}
.listo-inbox-notice--guest-safety a {
  color: #2196F3;
  font-weight: 700;
  text-decoration: none;
}
.listo-inbox-notice--guest-safety a:hover { text-decoration: underline; }

/* ============================================================================
/* NEXT922F — Parking Bookings canonical title alignment + all-clear notice.
 * Keep the Host page-entry geometry identical to Staycation while allowing
 * the Parking title block to be right-aligned. Reuse the same all-clear
 * notification language and visual treatment used by Staycation Bookings.
 */
body[data-listo-mode="host"] .listo-host-parking-bookings > .listo-host-page-header {
  text-align: right !important;
}
body[data-listo-mode="host"] .listo-host-parking-bookings > .listo-host-page-header h1,
body[data-listo-mode="host"] .listo-host-parking-bookings > .listo-host-page-header p {
  text-align: right !important;
}
.listo-host-parking-bookings .listo-host-bookings-all-clear {
  min-height: 68px !important;
  padding: 13px 16px !important;
  border: 1px solid #DCE8E2 !important;
  border-radius: 12px !important;
  background: #F4FAF7 !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
}
.listo-host-parking-bookings .listo-host-bookings-all-clear__icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 12px !important;
  background: #E5F4EC !important;
  color: #258A5B !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  font-weight: 850 !important;
}
.listo-host-parking-bookings .listo-host-bookings-all-clear > span:nth-child(2) { min-width: 0 !important; }
.listo-host-parking-bookings .listo-host-bookings-all-clear strong {
  display: block !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  color: #182631 !important;
}
.listo-host-parking-bookings .listo-host-bookings-all-clear small {
  display: block !important;
  margin-top: 3px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: #587267 !important;
}

 * NEXT922A — Parking Bookings desktop workspace
 * Presentation-layer overhaul only. Existing queries, booking states, AJAX,
 * actions, URLs and payment/accounting behavior remain unchanged.
 * ============================================================================ */
.listo-host-parking-bookings .listo-host-parking-bookings-intro{margin:0 0 22px!important;padding:0!important}
.listo-host-parking-bookings .listo-host-bookings-attention-summary{min-height:64px!important;margin:0!important;border:1px solid #F3C6C6!important;border-radius:12px!important;background:#FFF5F5!important;box-shadow:none!important}
.listo-host-parking-bookings .listo-host-bookings-attention-summary__count{background:#D92D20!important;color:#fff!important}

.listo-host-parking-bookings-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid #E1E8ED;border-radius:14px;background:#fff;margin:0 0 28px;overflow:hidden}
.listo-host-parking-booking-metric{min-width:0;padding:17px 20px 16px;border-left:1px solid #E8EDF1}
.listo-host-parking-booking-metric:first-child{border-left:0}
.listo-host-parking-booking-metric span{display:block;font-size:13px;line-height:18px;font-weight:700;color:#687781}
.listo-host-parking-booking-metric strong{display:block;margin-top:4px;font-size:30px;line-height:34px;font-weight:750;color:#1E2C36}
.listo-host-parking-booking-metric--attention strong{color:#D92D20}
.listo-host-parking-booking-metric--pending strong{color:#B7791F}
.listo-host-parking-booking-metric--confirmed strong{color:#2196F3}
.listo-host-parking-booking-metric--neutral strong{color:#303D47}

.listo-host-parking-bookings .listo-host-parking-bookings-controls-v2{margin:0 0 20px!important;padding:0 0 14px!important;border-bottom:1px solid #E3EAF0!important;background:transparent!important;border-radius:0!important}
.listo-host-parking-bookings-filterbar{display:flex;align-items:flex-end;gap:12px;width:100%;margin:0}
.listo-host-parking-bookings-filterbar__search{flex:1 1 auto;min-width:260px}
.listo-host-parking-bookings-filterbar label>span,.listo-host-parking-bookings-filterbar__search>label{display:block}
.listo-host-parking-bookings-filterbar__search>label,.listo-host-parking-bookings-filterbar__field>span{display:block;margin:0 0 5px;font-size:12px;line-height:16px;font-weight:700;color:#74828C}
.listo-host-parking-bookings-searchbox{position:relative}
.listo-host-parking-bookings-searchbox svg{position:absolute;left:11px;top:50%;width:17px;height:17px;transform:translateY(-50%);stroke:#7B8993;fill:none;stroke-width:1.8;pointer-events:none}
.listo-host-parking-bookings-searchbox input,.listo-host-parking-bookings-filterbar__field select{width:100%;min-height:40px;box-sizing:border-box;border:1px solid #DCE4E9;border-radius:9px;background:#fff;color:#2B3A44;font-size:13px;font-weight:600;box-shadow:none}
.listo-host-parking-bookings-searchbox input{padding:0 12px 0 36px}
.listo-host-parking-bookings-searchbox input:focus,.listo-host-parking-bookings-filterbar__field select:focus{outline:0;border-color:#AFCFE8;box-shadow:0 0 0 3px rgba(33,150,243,.08)}
.listo-host-parking-bookings-filterbar__field{display:flex;flex-direction:column;flex:0 0 150px}
.listo-host-parking-bookings-filterbar__field--wide{flex-basis:190px}
.listo-host-parking-bookings-filterbar__field select{padding:0 32px 0 11px}
.listo-host-parking-bookings-filterbar__apply{min-height:40px;padding:0 16px;border:1px solid #2196F3;border-radius:9px;background:#2196F3;color:#fff;font-size:13px;font-weight:750;cursor:pointer}
.listo-host-parking-bookings-filterbar__apply:hover{background:#1688E6}
.listo-host-parking-bookings-filterbar__clear{align-self:center;margin:0 2px;color:#687781;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.listo-host-parking-bookings-filterbar__clear:hover{color:#2196F3}

.listo-host-parking-bookings-stream{margin:0}
.listo-host-parking-bookings-stream__heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0;padding:0 0 10px;border-bottom:0}
.listo-host-parking-bookings-stream__heading h2{margin:0;font-size:20px;line-height:26px;font-weight:750;color:#172631}
.listo-host-parking-bookings-stream__heading p{margin:3px 0 0;font-size:13px;line-height:18px;color:#75848E}
.listo-host-parking-bookings-stream__identity{display:inline-flex;align-items:center;gap:7px;padding-bottom:2px;font-size:12px;font-weight:750;color:#C65B00;white-space:nowrap}
.listo-host-parking-bookings-stream__identity>span{width:7px;height:7px;border-radius:50%;background:#F36C21}
.listo-host-parking-bookings .listo-bookings-results-panel{margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
.listo-host-parking-bookings .listo-parking-rental-list{display:flex!important;flex-direction:column!important;gap:0!important;margin:0!important}
.listo-host-parking-bookings .listo-parking-rental-card{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;gap:0 22px!important;margin:0!important;padding:0!important;border:0!important;border-bottom:1px solid #EDF1F4!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.listo-host-parking-bookings .listo-parking-rental-card:hover{background:#FBFCFD!important;box-shadow:none!important}
.listo-host-parking-bookings .listo-parking-rental-card__body{display:grid!important;grid-template-columns:150px minmax(0,1fr) 140px!important;align-items:center!important;gap:20px!important;min-width:0!important;padding:16px 0!important;text-decoration:none!important;color:inherit!important}
.listo-host-parking-bookings .listo-parking-rental-card__primary{display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-width:0!important}
.listo-host-parking-bookings .listo-parking-rental-card__status{order:0!important;display:inline-flex!important;align-items:center!important;min-height:24px!important;padding:3px 8px!important;margin:0 0 7px!important;border-radius:999px!important;font-size:11px!important;line-height:16px!important;font-weight:750!important;white-space:nowrap!important}
.listo-host-parking-bookings .listo-parking-rental-card__date{display:block!important;font-size:14px!important;line-height:20px!important;font-weight:750!important;color:#263640!important}
.listo-host-parking-bookings .listo-parking-rental-card__time{display:block!important;margin-top:2px!important;font-size:12px!important;line-height:17px!important;color:#74828C!important}
.listo-host-parking-bookings .listo-parking-rental-card__main{min-width:0!important}
.listo-host-parking-bookings .listo-parking-rental-card__main h3{margin:0 0 4px!important;font-size:15px!important;line-height:20px!important;font-weight:750!important;color:#263640!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.listo-host-parking-bookings .listo-parking-rental-card__main p{margin:0 0 6px!important;font-size:13px!important;line-height:18px!important;color:#687781!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.listo-host-parking-bookings .listo-parking-rental-card__meta{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;flex-wrap:wrap!important}
.listo-host-parking-bookings .listo-parking-rental-card__meta span{font-size:12px!important;line-height:17px!important;color:#5F6E78!important}
.listo-host-parking-bookings .listo-parking-rental-card__meta span+span{padding-left:8px!important;border-left:1px solid #DCE4E9!important}
.listo-host-parking-bookings .listo-parking-rental-card__meta small{font-size:12px!important;line-height:17px!important;color:#87959E!important}
.listo-host-parking-bookings .listo-parking-rental-card__amount{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:12px!important;min-width:0!important}
.listo-host-parking-bookings .listo-parking-rental-card__amount strong{font-size:16px!important;line-height:22px!important;font-weight:750!important;color:#168A45!important;white-space:nowrap!important}
.listo-host-parking-bookings .listo-parking-rental-card__amount>span{font-size:24px!important;line-height:24px!important;color:#8A969E!important}
.listo-host-parking-bookings .listo-parking-rental-card__actions{grid-column:1 / -1!important;display:flex!important;align-items:center!important;gap:10px!important;margin:0!important;padding:11px 0 13px 170px!important;border-top:1px dashed #E6EBEF!important}
.listo-host-parking-bookings .listo-parking-rental-card__actions .listo-caption{margin-right:auto!important;font-size:12px!important;line-height:18px!important;color:#7A858E!important}
.listo-host-parking-bookings .listo-parking-rental-card__actions .listo-btn{min-height:38px!important;padding:0 14px!important;border-radius:8px!important}
.listo-host-parking-bookings .listo-parking-rental-card__status--pending_approval,.listo-host-parking-bookings .listo-parking-rental-card__status--host_payment_submitted{color:#B54708!important;background:#FFF4E5!important}
.listo-host-parking-bookings .listo-parking-rental-card__status--pending_payment,.listo-host-parking-bookings .listo-parking-rental-card__status--host_payment_pending{color:#9A6700!important;background:#FFF8E8!important}
.listo-host-parking-bookings .listo-parking-rental-card__status--upcoming,.listo-host-parking-bookings .listo-parking-rental-card__status--active,.listo-host-parking-bookings .listo-parking-rental-card__status--confirmed{color:#1769AA!important;background:#EEF7FF!important}
.listo-host-parking-bookings .listo-parking-rental-card__status--completed,.listo-host-parking-bookings .listo-parking-rental-card__status--cancelled{color:#687781!important;background:#F3F5F7!important}
.listo-host-parking-bookings .listo-parking-bookings-pagination{margin-top:18px!important}

@media (max-width:1000px){
  .listo-host-parking-bookings-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .listo-host-parking-booking-metric:nth-child(3){border-left:0;border-top:1px solid #E8EDF1}
  .listo-host-parking-booking-metric:nth-child(n+4){border-top:1px solid #E8EDF1}
  .listo-host-parking-bookings-filterbar{display:grid;grid-template-columns:1fr 1fr;align-items:end}
  .listo-host-parking-bookings-filterbar__search{grid-column:1 / -1;min-width:0}
  .listo-host-parking-bookings-filterbar__field,.listo-host-parking-bookings-filterbar__field--wide{flex-basis:auto}
  .listo-host-parking-bookings-filterbar__apply{width:100%}
  .listo-host-parking-bookings .listo-parking-rental-card__body{grid-template-columns:110px minmax(0,1fr) 110px;gap:14px}
  .listo-host-parking-bookings .listo-parking-rental-card__actions{padding-left:124px}
}

/* ========================================================================
   NEXT922B — Parking-specific Bookings operations workspace
   Presentation-only. Existing rental queries, statuses, actions, AJAX and
   detail URLs remain unchanged. Parking is intentionally not a clone of
   Staycation Bookings: the primary unit is time + vehicle + space + status.
   ======================================================================== */
.listo-host-parking-operations{display:grid;grid-template-columns:minmax(250px,1fr) minmax(520px,1.8fr);align-items:stretch;margin:0 0 28px;border-top:1px solid #e4eaee;border-bottom:1px solid #e4eaee;background:#fff}
.listo-host-parking-operations__intro{display:flex;flex-direction:column;justify-content:center;padding:18px 22px 18px 0;border-right:1px solid #e4eaee}
.listo-host-parking-operations__eyebrow{margin-bottom:5px;color:#ff6a00;font-size:11px;font-weight:850;letter-spacing:.08em}
.listo-host-parking-operations__intro strong{font-size:20px;line-height:1.2;color:#24323c}
.listo-host-parking-operations__intro>span:last-child{margin-top:5px;color:#71808b;font-size:12px;line-height:1.45}
.listo-host-parking-operations__metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.listo-host-parking-operations__metrics>div{display:flex;flex-direction:column;justify-content:center;min-height:88px;padding:16px 18px;border-right:1px solid #e4eaee}
.listo-host-parking-operations__metrics>div:last-child{border-right:0}
.listo-host-parking-operations__metrics strong{font-size:28px;line-height:1;font-weight:750;color:#24323c}
.listo-host-parking-operations__metrics span{margin-top:7px;color:#77858e;font-size:12px;font-weight:650}
.listo-host-parking-operations__metrics .is-neutral strong{color:#24323c}
.listo-host-parking-operations__metrics .is-attention strong{color:#d33b3b}
.listo-host-parking-operations__metrics .is-confirmed strong{color:#2196F3}
.listo-host-parking-bookings-stream__heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 12px;border-bottom:0!important}
.listo-host-parking-bookings-stream__heading h2{margin:0;font-size:20px;line-height:1.2;font-weight:700;color:#24323c}
.listo-host-parking-bookings-stream__heading p{margin:4px 0 0;color:#71808b;font-size:13px}
.listo-host-parking-bookings-stream__identity{display:inline-flex;align-items:center;gap:7px;color:#65747e;font-size:12px;font-weight:750}
.listo-host-parking-bookings-stream__identity span{width:8px;height:8px;border-radius:50%;background:#ff6a00}
.listo-host-parking-rental-list{border-top:1px solid #dfe6eb}
.listo-parking-rental-card--app{border:0!important;border-bottom:1px solid #e5eaee!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.listo-parking-rental-card--app:hover{background:#fbfcfd!important}
.listo-parking-rental-card__body{display:grid;grid-template-columns:190px minmax(160px,1fr) minmax(170px,1fr) 110px;align-items:center;gap:22px;padding:16px 4px;color:inherit;text-decoration:none}
.listo-parking-rental-card__timeblock,.listo-parking-rental-card__booking,.listo-parking-rental-card__space{min-width:0;display:flex;flex-direction:column;gap:4px}
.listo-parking-rental-card__timeblock strong{font-size:15px;line-height:1.2;color:#26343e}
.listo-parking-rental-card__timeblock>span:last-child{font-size:12px;color:#77858e}
.listo-parking-rental-card__status{align-self:flex-start!important;width:max-content!important;margin:0 0 2px!important;padding:3px 7px!important;border-radius:999px!important;font-size:10px!important;font-weight:750!important}
.listo-parking-rental-card__booking strong,.listo-parking-rental-card__space strong{font-size:13px;line-height:1.25;color:#2b3a44}
.listo-parking-rental-card__booking span,.listo-parking-rental-card__space span{font-size:12px;line-height:1.35;color:#71808b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listo-parking-rental-card__booking strong{color:#ff6a00;letter-spacing:.015em}
.listo-parking-rental-card__amount{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:4px!important}
.listo-parking-rental-card__amount strong{font-size:15px!important;color:#26343e}
.listo-parking-rental-card__amount span{font-size:19px;color:#a2adb4}
.listo-host-parking-bookings .listo-parking-rental-card--app[data-booking-action="1"]{border-color:#e5eaee!important;box-shadow:none!important;background:#fffdf9!important}
.listo-host-parking-bookings .listo-parking-rental-card--app[data-booking-action="1"] .listo-parking-rental-card__status{font-weight:850!important}
@media(max-width:1050px){
 .listo-host-parking-operations{grid-template-columns:1fr}
 .listo-host-parking-operations__intro{padding:16px 0;border-right:0;border-bottom:1px solid #e4eaee}
 .listo-parking-rental-card__body{grid-template-columns:170px minmax(150px,1fr) minmax(150px,1fr) 95px;gap:14px}
}
@media(max-width:760px){
 .listo-host-parking-operations{display:block;margin-bottom:20px}
 .listo-host-parking-operations__intro{padding:14px 0}
 .listo-host-parking-operations__metrics{grid-template-columns:repeat(2,1fr)}
 .listo-host-parking-operations__metrics>div{min-height:72px;padding:13px 14px}
 .listo-host-parking-operations__metrics>div:nth-child(2){border-right:0}
 .listo-host-parking-operations__metrics>div:nth-child(-n+2){border-bottom:1px solid #e4eaee}
 .listo-host-parking-operations__metrics strong{font-size:24px}
 .listo-host-parking-bookings-stream__heading{align-items:flex-start;flex-direction:column;gap:8px}
 .listo-parking-rental-card__body{grid-template-columns:1fr auto;gap:9px 14px;padding:14px 0}
 .listo-parking-rental-card__timeblock{grid-column:1/-1}
 .listo-parking-rental-card__booking,.listo-parking-rental-card__space{grid-column:1}
 .listo-parking-rental-card__amount{grid-column:2;grid-row:2/4}
 .listo-parking-rental-card__booking span,.listo-parking-rental-card__space span{white-space:normal}
}


/* ========================================================================
   NEXT922D — Parking navigation and shared page-entry correction
   Presentation-only. Parking navigation remains neutral by default and uses
   the Parking orange identity only for the active item. Parking Bookings
   returns to the canonical Host title/subtitle treatment used by Staycation.
   ======================================================================== */
@media (min-width: 801px){
  body[data-listo-mode="host"] .listo-host-sidebar__item--parking{
    color:#526171;
  }
  body[data-listo-mode="host"] .listo-host-sidebar__item--parking .listo-host-sidebar__icon{
    color:#7A8997;
  }
  body[data-listo-mode="host"] .listo-host-sidebar__item--parking:hover{
    background:#F6F9FB;
    color:#253443;
  }
  body[data-listo-mode="host"] .listo-host-sidebar__item--parking.is-active{
    background:#FFF0E3;
    color:#E85D00;
    font-weight:700;
  }
  body[data-listo-mode="host"] .listo-host-sidebar__item--parking.is-active .listo-host-sidebar__icon{
    color:#FF6A00;
  }
}

/* NEXT922E — Parking Bookings uses the canonical Host Bookings title geometry.
 * Parking identity is expressed by the active Parking navigation and workspace,
 * not by a separate title treatment. Presentation-only.
 */
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header{
  margin:0 0 20px!important;
  padding:0!important;
  min-height:59px!important;
  box-sizing:border-box!important;
}
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header h1{
  margin:0!important;
  font-size:26px!important;
  line-height:30px!important;
  min-height:30px!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
  color:#172631!important;
}
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header .listo-host-bookings-description{
  margin:5px 0 0!important;
  padding:0!important;
  font-size:14px!important;
  line-height:20px!important;
  min-height:20px!important;
  color:#70818D!important;
}

@media (max-width:700px){
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header{
    min-height:55px!important;
    margin:0 0 16px!important;
    padding:0 2px!important;
  }
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header h1{
    font-size:22px!important;
    line-height:27px!important;
    min-height:27px!important;
  }
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header .listo-host-bookings-description{
    margin-top:4px!important;
    font-size:13px!important;
    line-height:18px!important;
    min-height:18px!important;
  }
}


/* NEXT922G — Parking Bookings refinements.
 * 1) Keep the canonical Host header geometry, but right-align the Parking title
 *    and its one-line description as a deliberate page-level distinction.
 * 2) Enclose the Parking Operations summary as one complete workspace container.
 * 3) Remove the Parking booking filter/search bar from the visual workspace;
 *    existing query parameters remain supported for deep links/backward compatibility.
 */
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header{
  text-align:right!important;
}
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header h1,
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header .listo-host-bookings-description{
  text-align:right!important;
}

.listo-host-parking-bookings .listo-host-parking-operations{
  display:grid!important;
  grid-template-columns:minmax(250px,1fr) minmax(520px,1.8fr)!important;
  align-items:stretch!important;
  margin:0 0 28px!important;
  border:1px solid #E1E8ED!important;
  border-radius:14px!important;
  background:#fff!important;
  overflow:hidden!important;
}
.listo-host-parking-bookings .listo-host-parking-operations__intro{
  padding:20px 22px!important;
  border-right:1px solid #E4EAEE!important;
}
.listo-host-parking-bookings .listo-host-parking-operations__metrics>div{
  min-height:96px!important;
  padding:18px 20px!important;
}
.listo-host-parking-bookings .listo-host-parking-bookings-controls-v2{
  display:none!important;
}

@media(max-width:900px){
  .listo-host-parking-bookings .listo-host-parking-operations{
    grid-template-columns:1fr!important;
  }
  .listo-host-parking-bookings .listo-host-parking-operations__intro{
    border-right:0!important;
    border-bottom:1px solid #E4EAEE!important;
  }
}
@media(max-width:700px){
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header{
    text-align:right!important;
  }
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header h1,
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header .listo-host-bookings-description{
    text-align:right!important;
  }
  .listo-host-parking-bookings .listo-host-parking-operations{
    margin-bottom:20px!important;
    border-radius:12px!important;
  }
}

/* ========================================================================
   NEXT922H — Parking Bookings density + semantic zero-state correction.
   Presentation-only. Existing booking/payment/AJAX/accounting behavior is
   unchanged.
   ======================================================================== */
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header .listo-host-bookings-description{
  max-width:none!important;
  width:100%!important;
  text-align:right!important;
}
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header h1{
  text-align:right!important;
}
.listo-host-parking-bookings .listo-host-parking-operations__metrics .is-neutral strong{
  color:#24323c!important;
}
.listo-host-parking-bookings .listo-host-parking-operations__metrics .is-attention strong{
  color:#d33b3b!important;
}
.listo-host-parking-bookings .listo-host-parking-bookings-stream__heading{
  margin-bottom:8px!important;
}
.listo-host-parking-bookings .listo-parking-rental-list{
  border-top:1px solid #dfe6eb!important;
}
.listo-host-parking-bookings .listo-parking-rental-card__body{
  grid-template-columns:155px minmax(190px,1.15fr) minmax(210px,1fr) 88px!important;
  gap:14px!important;
  padding:10px 4px!important;
  min-height:0!important;
}
.listo-host-parking-bookings .listo-parking-rental-card__timeblock,
.listo-host-parking-bookings .listo-parking-rental-card__booking,
.listo-host-parking-bookings .listo-parking-rental-card__space{
  gap:2px!important;
}
.listo-host-parking-bookings .listo-parking-rental-card__status{
  margin-bottom:1px!important;
  min-height:18px!important;
  padding:2px 7px!important;
  font-size:9px!important;
  line-height:14px!important;
}
.listo-host-parking-bookings .listo-parking-rental-card__timeblock strong{
  font-size:14px!important;
  line-height:1.15!important;
}
.listo-host-parking-bookings .listo-parking-rental-card__timeblock>span:last-child,
.listo-host-parking-bookings .listo-parking-rental-card__booking span,
.listo-host-parking-bookings .listo-parking-rental-card__space span{
  font-size:11px!important;
  line-height:1.3!important;
}
.listo-host-parking-bookings .listo-parking-rental-card__booking strong,
.listo-host-parking-bookings .listo-parking-rental-card__space strong{
  font-size:12px!important;
  line-height:1.2!important;
}
.listo-host-parking-bookings .listo-parking-rental-card__amount strong{
  font-size:14px!important;
}
.listo-host-parking-bookings .listo-parking-rental-card__amount span{
  font-size:17px!important;
}
.listo-host-parking-bookings .listo-parking-rental-card__actions{
  padding:7px 4px 9px!important;
}

@media(max-width:1050px){
  .listo-host-parking-bookings .listo-parking-rental-card__body{
    grid-template-columns:145px minmax(170px,1fr) minmax(170px,1fr) 82px!important;
    gap:11px!important;
  }
}

@media(max-width:760px){
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header .listo-host-bookings-description{
    width:100%!important;
    max-width:none!important;
  }
  .listo-host-parking-bookings .listo-parking-rental-card__body{
    grid-template-columns:1fr auto!important;
    gap:7px 12px!important;
    padding:11px 0!important;
  }
  .listo-host-parking-bookings .listo-parking-rental-card__timeblock{
    grid-column:1/-1;
  }
  .listo-host-parking-bookings .listo-parking-rental-card__booking,
  .listo-host-parking-bookings .listo-parking-rental-card__space{
    grid-column:1;
  }
  .listo-host-parking-bookings .listo-parking-rental-card__amount{
    grid-column:2;
    grid-row:2/4;
  }
}


/* ============================================================================
   NEXT923 — Staycation Bookings desktop polish
   --------------------------------------------------------------------------
   Presentation-only refinement built on the approved NEXT891–NEXT901
   Staycation Bookings workspace and the NEXT922I Host desktop direction.
   Existing PHP markup, booking/payment/accounting/refund actions, AJAX hooks,
   IDs, data attributes, URLs, and mobile rules are intentionally preserved.
   ============================================================================ */
@media (min-width: 1001px){
  body.listo-host-staycation-bookings-app .listo-host-bookings-header{
    margin-bottom:26px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-header h1{
    font-size:28px!important;
    line-height:34px!important;
    font-weight:720!important;
    letter-spacing:-.025em!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-header .listo-host-bookings-description{
    margin-top:5px!important;
    font-size:14px!important;
    line-height:20px!important;
  }

  /* Action state: prominent, but lighter than a full dashboard card. */
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-intro{
    margin-bottom:16px!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary,
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-all-clear{
    min-height:68px!important;
    padding:13px 16px!important;
    border-radius:12px!important;
    box-shadow:none!important;
    grid-template-columns:38px minmax(0,1fr) auto!important;
    gap:12px!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary__count,
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-all-clear__icon{
    width:38px!important;height:38px!important;min-width:38px!important;border-radius:10px!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary strong,
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-all-clear strong{
    font-size:14px!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-attention-summary small,
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-all-clear small{
    font-size:12px!important;
  }

  /* Booking Overview is one rail, not five independent cards. */
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:0!important;
    margin-bottom:24px!important;
    border:1px solid #E1E8ED!important;
    border-radius:12px!important;
    overflow:hidden!important;
    box-shadow:none!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item{
    min-height:82px!important;
    padding:14px 18px!important;
    border:0!important;
    border-right:1px solid #E7EDF1!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item:last-child{
    border-right:0!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item span{
    font-size:11px!important;
    line-height:15px!important;
    font-weight:700!important;
    color:#6F7F89!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item strong{
    margin:5px 0 2px!important;
    font-size:28px!important;
    line-height:30px!important;
    font-weight:720!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item small{
    font-size:11px!important;
    line-height:15px!important;
    color:#94A0A8!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item--attention{
    background:#FFFBFB!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item--pending{
    background:#FCFDFF!important;
  }

  /* Reservation requests are work rows, not reservation cards. */
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-request-section{
    margin-bottom:30px!important;
    padding:18px 0 8px!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-request-section h2{
    font-size:19px!important;
    line-height:25px!important;
    font-weight:700!important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-request-section > p{
    font-size:13px!important;
    line-height:19px!important;
    margin:4px 0 12px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card{
    min-height:92px!important;
    padding:15px 0!important;
    grid-template-columns:84px minmax(0,1fr)!important;
    gap:18px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__photo{
    width:84px!important;height:68px!important;border-radius:9px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-bookings-card__body{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(260px,.7fr)!important;
    column-gap:24px!important;
    align-items:center!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-booking-card__kicker,
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__title,
  body.listo-host-staycation-bookings-request-grid .listo-host-bookings-card__body > .listo-caption{
    grid-column:1!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-booking-card__kicker{
    margin:0 0 3px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__title{
    font-size:15px!important;
    line-height:20px!important;
    color:#172631!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-caption{
    font-size:12px!important;
    line-height:17px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-booking-request-timer{
    grid-column:2!important;
    grid-row:1 / span 3!important;
    align-self:center!important;
    margin:0 0 8px!important;
    min-height:40px!important;
    border-radius:9px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-booking-request-actions{
    grid-column:2!important;
    grid-row:4!important;
    display:flex!important;
    justify-content:flex-end!important;
    gap:8px!important;
    width:auto!important;
    margin:0!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-booking-request-actions .listo-btn{
    width:auto!important;
    min-width:96px!important;
    min-height:36px!important;
    border-radius:8px!important;
  }

  /* Complete booking stream: use the full desktop canvas as a ledger. */
  body.listo-host-staycation-bookings-app .listo-host-bookings-all-section{
    margin-top:2px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-all-section .listo-host-bookings-section-heading{
    padding-bottom:12px!important;
    border-bottom:0!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-all-section .listo-host-bookings-section-heading h2{
    font-size:19px!important;
    line-height:25px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-all-section .listo-host-bookings-section-heading p{
    font-size:13px!important;
    line-height:19px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-table-head{
    min-height:36px!important;
    padding:0 14px!important;
    gap:18px!important;
    border-top:1px solid #E3EAF0!important;
    border-bottom:1px solid #E3EAF0!important;
    font-size:10px!important;
    letter-spacing:.06em!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card{
    min-height:84px!important;
    padding:12px 14px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-staycation-bookings-app .listo-trip-card__photo{display:block!important}
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card__photo{
    width:76px!important;height:58px!important;border-radius:8px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > a{
    min-height:58px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > a::after{
    content:"View booking →"!important;
    font-size:11px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > a > .listo-trip-card__title{
    font-size:14px!important;
    line-height:19px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > a > .listo-caption:nth-of-type(1){
    font-size:12px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-bookings-card__body > a > .listo-caption:nth-of-type(2){
    font-size:12px!important;
  }
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-status-badge{
    font-size:10px!important;
    padding:4px 7px!important;
  }
}

/* Keep the refinement desktop-only. Existing mobile rules remain authoritative. */

/* ============================================================================
   NEXT924 — Staycation Calendar & Pricing desktop final polish
   ---------------------------------------------------------------------------
   Presentation-only refinement based on the approved NEXT910 Host baseline
   and the later NEXT922I/NEXT923 Host desktop language.

   IMPORTANT: no calendar/pricing PHP, AJAX, URL, date-selection, rule,
   availability, or responsive/mobile behavior is changed here.
   ============================================================================ */
@media (min-width: 901px) {
  .listo-host-staycation-calendar-app .listo-host-calendar-page__header {
    margin-bottom: 30px !important;
  }

  .listo-host-staycation-calendar-app .listo-host-app-page__header h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    font-weight: 760 !important;
  }

  .listo-host-staycation-calendar-app .listo-host-app-page__header p {
    margin-top: 7px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  /* Listing context remains an open workspace boundary, not a card stack. */
  .listo-host-staycation-calendar-app .listo-cp-listing-bar {
    grid-template-columns: minmax(320px, .78fr) minmax(560px, 1.72fr) !important;
    margin-bottom: 26px !important;
    border-top-color: #DCE4E8 !important;
    border-bottom-color: #DCE4E8 !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-listing-selector {
    padding: 17px 28px 17px 0 !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-listing-selector__heading span {
    color: #8A969D !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-listing-selector select {
    height: 46px !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-listing-summary {
    padding: 13px 0 13px 28px !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-listing-summary img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 8px !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-listing-status--published {
    background: #EAF5FF !important;
    color: #176FAF !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-listing-status--unpublished {
    background: #F1F3F4 !important;
    color: #68747B !important;
  }

  /* Section tabs follow the approved Host section-navigation treatment:
     active = Listo blue fill/white text; no rounded pills or underline. */
  .listo-host-staycation-calendar-app .listo-cp-tabs {
    gap: 0 !important;
    margin-bottom: 26px !important;
    border-bottom: 1px solid #DCE3E7 !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-tabs a,
  .listo-host-staycation-calendar-app .listo-cp-tabs a.is-active,
  .listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:hover,
  .listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:focus-visible,
  .listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active),
  .listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active):hover,
  .listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active):focus-visible {
    min-height: 42px !important;
    height: 42px !important;
    padding: 9px 16px !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-tabs a.is-active,
  .listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:hover,
  .listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:focus-visible {
    background: #2196F3 !important;
    color: #FFFFFF !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-tabs a.is-active:after {
    display: none !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active),
  .listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active):hover,
  .listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active):focus-visible {
    background: transparent !important;
    color: #566975 !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active):hover,
  .listo-host-staycation-calendar-app .listo-cp-tabs a:not(.is-active):focus-visible {
    color: #2196F3 !important;
  }

  /* Keep the calendar as the dominant desktop workspace. */
  .listo-host-staycation-calendar-app .listo-cp-calendar-layout,
  .listo-calendar-pricing-page .listo-cp-calendar-layout.is-active-workspace {
    grid-template-columns: minmax(0, 2.6fr) minmax(320px, .85fr) !important;
    gap: 32px !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-calendar-heading {
    margin-bottom: 16px !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-calendar-heading h2 {
    font-size: 20px !important;
    font-weight: 750 !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-calendar-heading p {
    font-size: 13px !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-calendar-nav a {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-calendar-nav a.today {
    min-width: 74px !important;
    height: 36px !important;
    padding: 0 12px !important;
    color: #2196F3 !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-weekdays,
  .listo-host-staycation-calendar-app .listo-cp-grid {
    gap: 6px !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-weekdays span {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: #87939A !important;
    text-align: left !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-day,
  .listo-host-staycation-calendar-app .listo-cp-day-spacer {
    min-height: 84px !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-day {
    padding: 10px !important;
    border-radius: 8px !important;
    transition: none !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-day span {
    font-size: 14px !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-day small {
    margin-top: 10px !important;
    font-size: 11px !important;
  }

  /* Keep state colors semantic and scan-friendly. */
  .listo-host-staycation-calendar-app .listo-cp-day.is-available {
    background: #DDF4E8 !important;
    border-color: #B7E3CC !important;
    color: #173D2A !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-day.is-available small {
    color: #2E7651 !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-day.is-booked {
    background: #6F7B82 !important;
    border-color: #6F7B82 !important;
    color: #FFFFFF !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-day.is-booked small,
  .listo-host-staycation-calendar-app .listo-cp-day.is-special small,
  .listo-host-staycation-calendar-app .listo-cp-day.is-blocked small {
    color: #FFFFFF !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-day.is-special {
    background: #9B4BC1 !important;
    border-color: #9B4BC1 !important;
    color: #FFFFFF !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-day.is-blocked {
    background: #D9535D !important;
    border-color: #D9535D !important;
    color: #FFFFFF !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-day.is-selected,
  .listo-host-staycation-calendar-app .listo-cp-day.is-selected:hover {
    background: #2196F3 !important;
    border-color: #2196F3 !important;
    color: #FFFFFF !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-day.is-selected small {
    color: #FFFFFF !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-day.is-past,
  .listo-host-staycation-calendar-app .listo-cp-day.is-past:hover {
    background: #F3F4F5 !important;
    border-color: #E4E7E9 !important;
    color: #A8B0B4 !important;
    box-shadow: none !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-day.is-past small {
    color: #A8B0B4 !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-day.is-today:not(.is-selected) {
    box-shadow: inset 0 0 0 2px #2196F3 !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-legend {
    margin-top: 13px !important;
    gap: 18px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #71808A !important;
  }

  /* Selected Date is the deliberate editing surface; keep it visually distinct
     from the open calendar canvas without turning it into a dashboard card. */
  .listo-host-staycation-calendar-app .listo-cp-date-card {
    top: 88px !important;
    padding: 22px !important;
    border: 1px solid #DDE5E9 !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    box-shadow: 0 8px 24px rgba(28,45,58,.045) !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-date-card h2 {
    margin: 7px 0 22px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-date-card .listo-btn {
    min-height: 44px !important;
  }

  /* Rules remain an open management list rather than card stacks. */
  .listo-host-staycation-calendar-app .listo-cp-section-heading {
    padding-bottom: 16px !important;
    margin-bottom: 0 !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-section-heading h2,
  .listo-host-staycation-calendar-app .listo-cp-settings h2 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 750 !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-rule {
    grid-template-columns: minmax(280px, 1.7fr) minmax(200px, .8fr) auto !important;
    gap: 24px !important;
    padding: 17px 0 !important;
    border-bottom: 1px solid #E5EAEC !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-rule strong,
  .listo-host-staycation-calendar-app .listo-cp-rule b {
    font-size: 14px !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-rule span {
    font-size: 12px !important;
  }

  /* Settings stay deliberately quiet and key/value oriented. */
  .listo-host-staycation-calendar-app .listo-cp-settings-grid > div {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}


/* ========================================================================
   NEXT925 — Parking Calendar & Pricing Host desktop refinement
   Align the Parking Calendar page with the approved Host title contract and
   shared semantic calendar language while preserving the Parking workflow.
   Presentation-only: no booking, pricing, availability, AJAX, URL, or
   responsive workflow logic is changed here.
   ======================================================================== */
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header {
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:24px !important;
  margin:0 0 24px !important;
  padding:0 2px !important;
}
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header h1 {
  margin:0 !important;
  font-size:26px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  letter-spacing:-.02em !important;
  color:#172631 !important;
}
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header p {
  margin:6px 0 0 !important;
  font-size:14px !important;
  line-height:1.45 !important;
  color:#70818D !important;
  max-width:760px !important;
}

/* Listing context is context, not a dashboard card. */
.listo-host-parking-calendar-v546 .listo-parking-calendar-context {
  display:grid;
  grid-template-columns:minmax(250px,280px) minmax(0,1fr);
  align-items:center;
  gap:22px;
  margin:0 0 24px;
  padding:14px 2px 16px;
  border:0;
  border-bottom:1px solid #e6ebee;
  border-radius:0;
  background:transparent;
}
.listo-host-parking-calendar-v546 .listo-parking-calendar-context>div:last-child {
  text-align:right;
}
.listo-host-parking-calendar-v546 .listo-parking-calendar-context>div:last-child>span {
  color:#84919a;
  font-size:10px;
  letter-spacing:.1em;
}
.listo-host-parking-calendar-v546 .listo-parking-calendar-context>div:last-child>strong {
  font-size:16px;
  color:#172631;
}
.listo-host-parking-calendar-v546 .listo-parking-calendar-context>div:last-child>small {
  font-size:12px;
  color:#70818d;
}
.listo-host-parking-calendar-v546 .listo-parking-space-picker--app {
  flex:initial;
  width:100%;
}

/* Functional tabs follow the shared Host Calendar & Pricing language.
   Parking orange remains reserved for Parking identity/navigation, not tab
   state semantics. */
.listo-host-parking-calendar-v546.listo-calendar-pricing-page .listo-parking-cp-tabs {
  margin:0 0 30px;
}
.listo-host-parking-calendar-v546.listo-calendar-pricing-page .listo-parking-cp-tabs a.is-active,
.listo-host-parking-calendar-v546.listo-calendar-pricing-page .listo-parking-cp-tabs a.is-active:hover {
  background:#2196F3 !important;
  border-color:#2196F3 !important;
  color:#fff !important;
}
.listo-host-parking-calendar-v546.listo-calendar-pricing-page .listo-parking-cp-tabs a:not(.is-active):hover {
  color:#2196F3;
  border-color:#d7e9fa;
}

/* Desktop calendar state semantics: shared Host meaning, Parking-specific
   data remains untouched. */
@media (min-width:901px) {
  .listo-host-parking-calendar-v546 .listo-parking-calendar-layout-v616 {
    grid-template-columns:minmax(0,1.72fr) minmax(330px,.78fr);
    gap:24px;
    margin-bottom:36px;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-main-card,
  .listo-host-parking-calendar-v546 .listo-parking-selected-day-v616 {
    border:1px solid #e4e9ec;
    border-radius:14px;
    background:#fff;
    box-shadow:none;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-main-card {
    padding:22px;
  }
  .listo-host-parking-calendar-v546 .listo-parking-selected-day-v616 {
    padding:22px;
    top:88px;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-head--v616 {
    margin-bottom:20px;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-head--v616 h2 {
    font-size:20px;
    color:#172631;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-head--v616 p {
    font-size:13px;
    color:#70818d;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-nav--v616 a:hover {
    border-color:#2196F3;
    color:#2196F3;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616 {
    min-height:78px;
    border-radius:8px;
    background:#fff;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-available {
    background:#e8f6ef;
    border-color:#c5e6d4;
    color:#245f46;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-available small {
    color:#3b7b5c;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-booked {
    background:#e9edef;
    border-color:#d2d9dc;
    color:#48545a;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-booked small {
    color:#667278;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-blocked {
    background:#fde7e8;
    border-color:#efbfc2;
    color:#9f2f35;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-blocked small {
    color:#a83d43;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-closed {
    background:#f5f6f7;
    border-color:#e3e7e9;
    color:#7b858a;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-closed small {
    color:#7b858a;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-today:not(.is-selected) {
    box-shadow:inset 0 0 0 2px #2196F3;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-today:not(.is-selected)>span {
    color:#2196F3;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-selected,
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-selected:hover {
    background:#2196F3;
    border-color:#2196F3;
    color:#fff;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend {
    margin-bottom:16px;
    color:#58666e;
    font-size:12px;
    font-weight:600;
  }
}

@media (max-width:900px) {
  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header {
    align-items:flex-start !important;
    margin-bottom:16px !important;
  }
  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header h1 {
    font-size:22px !important;
  }
  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header p {
    font-size:13px !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-context {
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    padding:12px 0 14px;
  }
}

/* ========================================================================
   NEXT929 — Parking Calendar & Pricing desktop alignment correction.
   Match the approved Parking Bookings title geometry and restore a clear
   two-column listing context: selector left, managing context right.
   Presentation-only; no parking calendar/pricing workflow is changed.
   ======================================================================== */
@media (min-width: 901px) {
  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header {
    display: block !important;
    width: 100% !important;
    margin: 0 0 30px !important;
    padding: 0 !important;
    text-align: right !important;
  }

  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header h1,
  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header p {
    width: 100% !important;
    max-width: none !important;
    text-align: right !important;
  }

  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
    font-weight: 760 !important;
    letter-spacing: -0.02em !important;
    color: #172631 !important;
  }

  body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header p {
    margin: 7px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #70818D !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-context {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr) !important;
    align-items: center !important;
    gap: 32px !important;
    width: 100% !important;
    margin: 0 0 24px !important;
    padding: 14px 0 16px !important;
    border: 0 !important;
    border-top: 1px solid #E6EBEE !important;
    border-bottom: 1px solid #E6EBEE !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-space-picker--app {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-space-picker--app label {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-space-picker--app label > span {
    display: block !important;
    color: #7B8992 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-space-picker--app select {
    width: 100% !important;
    height: 46px !important;
    padding: 0 38px 0 16px !important;
    border: 1px solid #DCE5EB !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    color: #26333C !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-context > div:last-child {
    min-width: 0 !important;
    text-align: right !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-context > div:last-child > span {
    display: block !important;
    margin-bottom: 3px !important;
    color: #84919A !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-context > div:last-child > strong {
    display: block !important;
    color: #172631 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-context > div:last-child > small {
    display: block !important;
    margin-top: 4px !important;
    color: #70818D !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }
}

/* ========================================================================
   NEXT933 — Parking Calendar controls, legend sizing, and past-date behavior
   ------------------------------------------------------------------------
   Match the approved Staycation desktop control scale and keep past dates
   visually inactive and non-clickable. Presentation/interaction guard only.
   ======================================================================== */
@media (min-width:901px) {
  .listo-host-parking-calendar-v546 .listo-parking-calendar-nav--v616 a.today {
    min-width:74px !important;
    width:auto !important;
    height:36px !important;
    padding:0 12px !important;
    font-size:15px !important;
    line-height:1 !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend {
    margin-top:13px !important;
    gap:18px !important;
    font-size:12px !important;
    font-weight:600 !important;
    color:#71808A !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend span {
    gap:6px !important;
    font-size:12px !important;
    font-weight:600 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend i {
    width:14px !important;
    height:14px !important;
    flex:0 0 14px !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-past,
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-past:hover {
    cursor:default !important;
    pointer-events:none !important;
    background:#F3F4F5 !important;
    border-color:#E4E7E9 !important;
    color:#A8B0B4 !important;
    box-shadow:none !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-past small,
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-past .listo-parking-month-day__rates span {
    color:#A8B0B4 !important;
  }
}

/* ========================================================================
   NEXT930 — Parking Calendar visual parity with Staycation Calendar
   ------------------------------------------------------------------------
   Match the approved Staycation Calendar desktop calendar geometry, state
   presentation and legend treatment while preserving Parking-specific
   hourly/daily rates and workflow states. Presentation-only.
   ======================================================================== */
@media (min-width:901px) {
  .listo-host-parking-calendar-v546 .listo-parking-calendar-head--v616 {
    margin-bottom:16px !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-head--v616 h2 {
    font-size:20px !important;
    font-weight:750 !important;
    line-height:1.2 !important;
    color:#172631 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-head--v616 p {
    font-size:13px !important;
    line-height:1.45 !important;
    color:#70818D !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-nav--v616 a {
    width:36px !important;
    height:36px !important;
    border-radius:8px !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-nav--v616 a.today {
    min-width:74px !important;
    height:36px !important;
    padding:0 12px !important;
    color:#2196F3 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-grid--v616 {
    gap:6px !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-grid--v616 .listo-parking-month-dow {
    border:0 !important;
    padding:0 !important;
    min-height:20px !important;
    color:#87939A !important;
    font-size:11px !important;
    font-weight:700 !important;
    letter-spacing:.04em !important;
    text-align:left !important;
    text-transform:uppercase !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day-spacer {
    min-height:84px !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616 {
    min-height:84px !important;
    padding:10px !important;
    border-radius:8px !important;
    transition:none !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616 > span {
    font-size:14px !important;
    line-height:1.2 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616 small {
    margin-top:10px !important;
    font-size:11px !important;
    line-height:1.2 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-available {
    background:#DDF4E8 !important;
    border-color:#B7E3CC !important;
    color:#173D2A !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-available small,
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-available .listo-parking-month-day__rates span {
    color:#2E7651 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-booked {
    background:#6F7B82 !important;
    border-color:#6F7B82 !important;
    color:#FFFFFF !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-booked small {
    color:#FFFFFF !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-blocked {
    background:#D9535D !important;
    border-color:#D9535D !important;
    color:#FFFFFF !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-blocked small {
    color:#FFFFFF !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-closed {
    background:#F3F4F5 !important;
    border-color:#E4E7E9 !important;
    color:#A8B0B4 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-closed small {
    color:#7F898E !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-today:not(.is-selected) {
    box-shadow:inset 0 0 0 2px #2196F3 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-today:not(.is-selected) > span {
    color:#2196F3 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-selected,
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-selected:hover {
    background:#2196F3 !important;
    border-color:#2196F3 !important;
    color:#FFFFFF !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-selected small,
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-selected .listo-parking-month-day__rates span {
    color:#FFFFFF !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend {
    margin:13px 0 0 !important;
    gap:18px !important;
    font-size:12px !important;
    font-weight:600 !important;
    color:#71808A !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend span {
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    color:#71808A !important;
    font-size:12px !important;
    font-weight:600 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend i {
    width:20px !important;
    height:20px !important;
    border-radius:50% !important;
    box-sizing:border-box !important;
    border:1px solid transparent !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend i.is-available {
    background:#DDF4E8 !important;
    border-color:#7CC69F !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend i.is-booked {
    background:#6F7B82 !important;
    border-color:#566168 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend i.is-blocked {
    background:#D9535D !important;
    border-color:#B83C45 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend i.is-closed {
    background:#F3F4F5 !important;
    border-color:#C7CED2 !important;
  }
}

/* NEXT934 — Remove Calendar visual container and restore full-width calendar geometry */
@media (min-width: 901px) {
    .listo-calendar-pricing-page .listo-cp-calendar-card {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
    }
    .listo-calendar-pricing-page .listo-cp-calendar-heading {
        margin-bottom: 22px;
    }
    .listo-calendar-pricing-page .listo-cp-calendar-heading h2 {
        font-size: 28px;
        line-height: 1.2;
    }
    .listo-calendar-pricing-page .listo-cp-calendar-heading p {
        font-size: 16px;
    }
    .listo-calendar-pricing-page .listo-cp-calendar-nav a {
        width: 54px;
        height: 54px;
        border-radius: 11px;
        font-size: 24px;
    }
    .listo-calendar-pricing-page .listo-cp-calendar-nav a.today {
        width: auto;
        padding: 0 18px;
        font-size: 16px;
    }
    .listo-calendar-pricing-page .listo-cp-weekdays,
    .listo-calendar-pricing-page .listo-cp-grid {
        gap: 8px;
    }
    .listo-calendar-pricing-page .listo-cp-weekdays {
        margin-bottom: 7px;
    }
    .listo-calendar-pricing-page .listo-cp-weekdays span {
        font-size: 14px;
        padding: 7px 0;
    }
    .listo-calendar-pricing-page .listo-cp-day {
        min-height: 128px;
        border-radius: 10px;
        padding: 15px 16px;
        font-size: 20px;
    }
    .listo-calendar-pricing-page .listo-cp-day span {
        font-size: 20px;
        line-height: 1.2;
    }
    .listo-calendar-pricing-page .listo-cp-day small {
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.25;
    }
    .listo-calendar-pricing-page .listo-cp-legend {
        margin-top: 20px;
        padding-top: 0;
        gap: 24px;
        font-size: 14px;
    }
}

/* ========================================================================
   NEXT935 — Parking Calendar canvas parity with Staycation
   ------------------------------------------------------------------------
   Remove the desktop calendar's visual card/container. The calendar now
   occupies the page canvas directly; the Selected Day editor remains the
   intentional contained editing surface. Presentation-only.
   ======================================================================== */
@media (min-width:901px) {
  .listo-host-parking-calendar-v546 .listo-parking-calendar-main-card {
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-layout-v616 {
    grid-template-columns:minmax(0,1.72fr) minmax(330px,.78fr) !important;
    gap:32px !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-head--v616 {
    margin-bottom:22px !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-head--v616 h2 {
    font-size:28px !important;
    line-height:1.2 !important;
    font-weight:750 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-head--v616 p {
    font-size:16px !important;
    line-height:1.45 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-nav--v616 a {
    width:54px !important;
    height:54px !important;
    border-radius:11px !important;
    font-size:24px !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-calendar-nav--v616 a.today {
    min-width:0 !important;
    width:auto !important;
    padding:0 18px !important;
    font-size:16px !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-grid--v616 {
    gap:8px !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-grid--v616 .listo-parking-month-dow {
    min-height:28px !important;
    padding:7px 0 !important;
    font-size:14px !important;
    font-weight:700 !important;
    text-align:left !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day-spacer {
    min-height:128px !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616 {
    min-height:128px !important;
    padding:15px 16px !important;
    border-radius:10px !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616 > span {
    font-size:20px !important;
    line-height:1.2 !important;
  }

  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616 small {
    margin-top:14px !important;
    font-size:15px !important;
    line-height:1.25 !important;
  }
}

/* ========================================================================
   NEXT936 — Parking Calendar exact Staycation visual parity
   ------------------------------------------------------------------------
   The Parking calendar uses the same desktop canvas geometry, sizing,
   typography, spacing, navigation controls, date-cell treatment, and
   legend treatment as the approved Staycation Calendar & Pricing page.
   Parking-specific hourly/daily data and functional states remain intact.
   ======================================================================== */
@media (min-width:901px) {
  /* Same desktop workspace proportions as Staycation. */
  .listo-host-parking-calendar-v546 .listo-parking-calendar-layout-v616 {
    grid-template-columns:minmax(0,2.6fr) minmax(320px,.85fr) !important;
    gap:32px !important;
    margin-bottom:36px !important;
  }

  /* Calendar is an open canvas: no enclosing card treatment. */
  .listo-host-parking-calendar-v546 .listo-parking-calendar-main-card {
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  /* Exact Staycation heading geometry. */
  .listo-host-parking-calendar-v546 .listo-parking-calendar-head--v616 {
    margin-bottom:16px !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-head--v616 h2 {
    margin:0 0 4px !important;
    font-size:20px !important;
    line-height:1.2 !important;
    font-weight:750 !important;
    color:#172631 !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-head--v616 p {
    margin:0 !important;
    font-size:13px !important;
    line-height:1.45 !important;
    color:#70818D !important;
  }

  /* Exact Staycation navigation sizing. */
  .listo-host-parking-calendar-v546 .listo-parking-calendar-nav--v616 {
    display:flex !important;
    gap:7px !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-nav--v616 a {
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    padding:0 !important;
    border-radius:8px !important;
    border:1px solid #D9DFE0 !important;
    color:#1D2426 !important;
    background:#fff !important;
    font-size:18px !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-nav--v616 a.today {
    width:auto !important;
    min-width:74px !important;
    height:36px !important;
    padding:0 12px !important;
    color:#2196F3 !important;
    font-size:14px !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-nav--v616 a:hover {
    border-color:#2196F3 !important;
    color:#2196F3 !important;
  }

  /* Exact Staycation weekday/grid geometry. */
  .listo-host-parking-calendar-v546 .listo-parking-month-grid--v616 {
    gap:6px !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-grid--v616 .listo-parking-month-dow {
    border:0 !important;
    padding:0 !important;
    min-height:20px !important;
    color:#87939A !important;
    font-size:11px !important;
    font-weight:700 !important;
    letter-spacing:.04em !important;
    text-align:left !important;
    text-transform:uppercase !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day-spacer {
    min-height:84px !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616 {
    min-height:84px !important;
    padding:10px !important;
    border-radius:8px !important;
    transition:none !important;
    box-sizing:border-box !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616 > span {
    font-size:14px !important;
    line-height:1.2 !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616 small {
    margin-top:10px !important;
    font-size:11px !important;
    line-height:1.2 !important;
  }

  /* Match Staycation semantic state treatment exactly where the states exist. */
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-available {
    background:#DDF4E8 !important;
    border-color:#B7E3CC !important;
    color:#173D2A !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-available small,
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-available .listo-parking-month-day__rates span {
    color:#2E7651 !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-booked {
    background:#6F7B82 !important;
    border-color:#6F7B82 !important;
    color:#FFFFFF !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-booked small,
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-booked .listo-parking-month-day__rates span {
    color:#FFFFFF !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-blocked {
    background:#D9535D !important;
    border-color:#D9535D !important;
    color:#FFFFFF !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-blocked small,
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-blocked .listo-parking-month-day__rates span {
    color:#FFFFFF !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-closed {
    background:#F3F4F5 !important;
    border-color:#E4E7E9 !important;
    color:#A8B0B4 !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-closed small,
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-closed .listo-parking-month-day__rates span {
    color:#A8B0B4 !important;
  }

  /* Selected/today treatment exactly follows Staycation: blue, never orange. */
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-selected,
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-selected:hover {
    background:#2196F3 !important;
    border-color:#2196F3 !important;
    color:#FFFFFF !important;
    box-shadow:none !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-selected *,
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-selected .listo-parking-month-day__rates span {
    color:#FFFFFF !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-today:not(.is-selected) {
    box-shadow:inset 0 0 0 2px #2196F3 !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-today:not(.is-selected) > span {
    color:#2196F3 !important;
  }

  /* Past dates retain Staycation's muted, non-interactive appearance. */
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-past,
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-past:hover {
    background:#F3F4F5 !important;
    border-color:#E4E7E9 !important;
    color:#A8B0B4 !important;
    box-shadow:none !important;
    cursor:default !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-past small,
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-past .listo-parking-month-day__rates span {
    color:#A8B0B4 !important;
  }

  /* Exact Staycation legend geometry and typography. */
  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend {
    margin-top:13px !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    gap:18px !important;
    font-size:12px !important;
    font-weight:600 !important;
    color:#71808A !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend span {
    gap:7px !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend i {
    width:14px !important;
    height:14px !important;
    border-radius:50% !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend i.is-available { background:#79C99B !important; }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend i.is-booked { background:#8A9499 !important; }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend i.is-blocked { background:#D85F68 !important; }
  .listo-host-parking-calendar-v546 .listo-parking-calendar-legend i.is-closed { background:#DDE3E6 !important; }
}

/* ========================================================================
   NEXT938 — Remove residual calendar grid frame
   ------------------------------------------------------------------------
   The Parking calendar is an open canvas like Staycation. Keep the
   individual date-cell borders, but remove the grid's own top/left frame
   so no enclosing lines remain around the calendar.
   ======================================================================== */
@media (min-width:901px) {
  .listo-host-parking-calendar-v546 .listo-parking-month-grid--v616 {
    border: 0 !important;
  }
}

/* ========================================================================
   NEXT939 — Parking Calendar & Pricing shared tab architecture.
   Uses the same three Host workspace tabs as Staycation while preserving
   Parking-specific hourly/daily pricing and Listing-owned access schedule.
   ======================================================================== */
.listo-host-parking-calendar-v546 .listo-parking-cp-view--rules,
.listo-host-parking-calendar-v546 .listo-parking-cp-view--settings{
  width:100%;
  box-sizing:border-box;
}
.listo-host-parking-calendar-v546 .listo-parking-rules-block{
  padding:0 0 28px;
  margin:0 0 28px;
  border-bottom:1px solid #e6ebee;
}
.listo-host-parking-calendar-v546 .listo-parking-rules-block:last-child{
  margin-bottom:0;
  border-bottom:0;
}
.listo-host-parking-calendar-v546 .listo-parking-subsection-heading{
  margin:0 0 18px;
}
.listo-host-parking-calendar-v546 .listo-parking-subsection-heading h3{
  margin:0;
  font-size:18px;
  line-height:1.25;
  font-weight:750;
  color:#172631;
}
.listo-host-parking-calendar-v546 .listo-parking-subsection-heading p{
  margin:6px 0 0;
  font-size:14px;
  line-height:1.5;
  color:#70818d;
}
.listo-host-parking-calendar-v546 .listo-parking-rules-block .listo-parking-cp-price-grid{
  max-width:760px;
}
.listo-host-parking-calendar-v546 .listo-parking-rules-block .listo-parking-manage-panel-v535__footer{
  margin-top:18px;
  max-width:760px;
  display:flex;
  justify-content:flex-start;
}
.listo-host-parking-calendar-v546 .listo-parking-rules-block--blocked .listo-parking-block-form--v535{
  max-width:760px;
}
.listo-host-parking-calendar-v546 .listo-parking-settings-summary{
  max-width:900px;
}
.listo-host-parking-calendar-v546 .listo-parking-settings-card{
  padding:0 0 24px;
  border-bottom:1px solid #e6ebee;
}
.listo-host-parking-calendar-v546 .listo-parking-settings-card > div:first-child{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:18px;
}
.listo-host-parking-calendar-v546 .listo-parking-settings-card > div:first-child strong{
  font-size:16px;
  line-height:1.35;
  color:#172631;
}
.listo-host-parking-calendar-v546 .listo-parking-settings-card > div:first-child span{
  font-size:14px;
  line-height:1.5;
  color:#70818d;
}
.listo-host-parking-calendar-v546 .listo-parking-access-summary{
  max-width:760px;
  border:1px solid #e2e7ea;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.listo-host-parking-calendar-v546 .listo-parking-access-summary > strong{
  display:block;
  padding:14px 16px;
  font-size:14px;
  color:#172631;
  background:#f7f9fa;
  border-bottom:1px solid #e2e7ea;
}
.listo-host-parking-calendar-v546 .listo-parking-access-summary > div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:11px 16px;
  border-bottom:1px solid #edf0f2;
  font-size:14px;
}
.listo-host-parking-calendar-v546 .listo-parking-access-summary > div:last-child{
  border-bottom:0;
}
.listo-host-parking-calendar-v546 .listo-parking-access-summary span{
  color:#64747e;
}
.listo-host-parking-calendar-v546 .listo-parking-access-summary b{
  color:#172631;
  font-weight:700;
}
.listo-host-parking-calendar-v546 .listo-parking-settings-note{
  max-width:760px;
  margin:14px 0 0;
  font-size:13px;
  line-height:1.5;
  color:#7a8992;
}
@media (max-width:900px){
  .listo-host-parking-calendar-v546 .listo-parking-access-summary > div{
    gap:12px;
  }
  .listo-host-parking-calendar-v546 .listo-parking-rules-block{
    padding-bottom:22px;
    margin-bottom:22px;
  }
}

/* ========================================================================
   NEXT940 — Parking Calendar & Pricing parity across all three tabs.
   Keep the Staycation workspace architecture and presentation while
   retaining Parking-specific hourly/daily rates and listing-owned access.
   ======================================================================== */
@media (min-width:901px){
  .listo-host-parking-calendar-v546.listo-calendar-pricing-page .listo-parking-cp-tabs a.is-active,
  .listo-host-parking-calendar-v546.listo-calendar-pricing-page .listo-parking-cp-tabs a.is-active:hover{
    color:#fff !important;
    background:#2196F3 !important;
    border-color:#2196F3 !important;
  }
  .listo-host-parking-calendar-v546.listo-calendar-pricing-page .listo-parking-cp-tabs a:not(.is-active){
    color:#555d60 !important;
    background:transparent !important;
    border-color:transparent !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-cp-view--rules,
  .listo-host-parking-calendar-v546 .listo-parking-cp-view--settings{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-rules-heading{
    margin-bottom:22px !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-rule-list{
    width:100%;
  }
  .listo-host-parking-calendar-v546 .listo-parking-rule-row{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(210px,.65fr) auto;
    gap:22px;
    align-items:center;
    padding:18px 0;
    border-top:1px solid #e1e6e8;
    background:transparent;
  }
  .listo-host-parking-calendar-v546 .listo-parking-rule-row:first-child{
    border-top:1px solid #dfe4e6;
  }
  .listo-host-parking-calendar-v546 .listo-parking-rule-row strong{
    display:block;
    margin-bottom:5px;
    font-size:15px;
    line-height:1.3;
    color:#172631;
  }
  .listo-host-parking-calendar-v546 .listo-parking-rule-row span{
    display:block;
    color:#6b7881;
    font-size:13px;
    line-height:1.45;
  }
  .listo-host-parking-calendar-v546 .listo-parking-rule-row > div:nth-child(2) b{
    display:block;
    margin-bottom:5px;
    font-size:16px;
    color:#172631;
  }
  .listo-host-parking-calendar-v546 .listo-parking-rule-row > form{
    justify-self:end;
  }
  .listo-host-parking-calendar-v546 .listo-parking-rule-row--section{
    margin-top:14px;
  }
  .listo-host-parking-calendar-v546 .listo-parking-rule-row--existing{
    grid-template-columns:1fr;
    padding-bottom:12px;
  }
  .listo-host-parking-calendar-v546 .listo-parking-block-row{
    grid-template-columns:minmax(0,1fr) auto;
    padding:14px 0;
  }
  .listo-host-parking-calendar-v546 .listo-parking-delete-action{
    color:#c84b4f !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-inline-rate-form,
  .listo-host-parking-calendar-v546 .listo-parking-inline-block-form{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr)) auto;
    gap:14px;
    align-items:end;
    padding:18px 0 22px;
    border-bottom:1px solid #e1e6e8;
  }
  .listo-host-parking-calendar-v546 .listo-parking-inline-rate-form[hidden],
  .listo-host-parking-calendar-v546 .listo-parking-inline-block-form[hidden]{display:none !important;}
  .listo-host-parking-calendar-v546 .listo-parking-inline-rate-form label,
  .listo-host-parking-calendar-v546 .listo-parking-inline-block-form label{
    display:block;
  }
  .listo-host-parking-calendar-v546 .listo-parking-inline-rate-form label > span,
  .listo-host-parking-calendar-v546 .listo-parking-inline-block-form label > span{
    display:block;
    margin-bottom:7px;
    font-size:13px;
    font-weight:700;
    color:#5c6467;
  }
  .listo-host-parking-calendar-v546 .listo-parking-inline-rate-form label > div{
    display:flex;
    height:48px;
    border:1px solid #d7dcde;
    border-radius:10px;
    overflow:hidden;
    background:#fff;
  }
  .listo-host-parking-calendar-v546 .listo-parking-inline-rate-form label > div b{
    width:44px;
    display:grid;
    place-items:center;
    background:#f6f8f8;
    color:#202729;
  }
  .listo-host-parking-calendar-v546 .listo-parking-inline-rate-form input,
  .listo-host-parking-calendar-v546 .listo-parking-inline-block-form input{
    width:100%;
    height:48px;
    border:1px solid #d7dcde;
    border-radius:10px;
    background:#fff;
    padding:0 12px;
    font:inherit;
    box-sizing:border-box;
  }
  .listo-host-parking-calendar-v546 .listo-parking-inline-rate-form label > div input{border:0;border-radius:0;outline:0;}
  .listo-host-parking-calendar-v546 .listo-parking-inline-block-form{grid-template-columns:repeat(3,minmax(0,1fr));}
  .listo-host-parking-calendar-v546 .listo-parking-inline-block-form__reason{grid-column:1 / 3;}
  .listo-host-parking-calendar-v546 .listo-parking-inline-block-form > .listo-btn{grid-column:3;grid-row:2;justify-self:start;}
  .listo-host-parking-calendar-v546 .listo-parking-settings-list{width:100%;}
  .listo-host-parking-calendar-v546 .listo-parking-settings-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:18px 0;
    border-top:1px solid #e1e6e8;
  }
  .listo-host-parking-calendar-v546 .listo-parking-settings-row strong{display:block;margin-bottom:5px;font-size:15px;color:#172631;}
  .listo-host-parking-calendar-v546 .listo-parking-settings-row span{display:block;font-size:13px;color:#6b7881;}
  .listo-host-parking-calendar-v546 .listo-parking-settings-row > b{font-size:15px;color:#172631;white-space:nowrap;}
  .listo-host-parking-calendar-v546 .listo-parking-settings-detail{
    margin:0 0 8px;
    border-top:1px solid #edf0f2;
    border-bottom:1px solid #edf0f2;
  }
  .listo-host-parking-calendar-v546 .listo-parking-settings-detail > div{
    display:flex;justify-content:space-between;gap:20px;padding:10px 0;font-size:13px;
  }
  .listo-host-parking-calendar-v546 .listo-parking-settings-detail span{color:#6b7881;}
  .listo-host-parking-calendar-v546 .listo-parking-settings-detail b{color:#172631;}
  .listo-host-parking-calendar-v546 .listo-parking-settings-note{margin:14px 0 0 !important;max-width:760px;font-size:13px;line-height:1.5;color:#7a8992;}

  /* Selected Day uses the same contained editing-surface language as Staycation. */
  .listo-host-parking-calendar-v546 .listo-parking-date-editor{
    padding:22px !important;
    border:1px solid #dfe5e8 !important;
    border-radius:18px !important;
    background:#fff !important;
    box-shadow:none !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-date-editor h2{
    margin:8px 0 26px !important;
    font-size:22px !important;
    line-height:1.2 !important;
    color:#172631 !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-date-editor .listo-cp-status{
    font-size:12px !important;
    padding:7px 12px !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-date-editor__rates{
    display:grid;
    gap:20px;
  }
  .listo-host-parking-calendar-v546 .listo-parking-date-editor__rates > div span{
    display:block;
    margin-bottom:9px;
    font-size:14px;
    font-weight:700;
    color:#5c6467;
  }
  .listo-host-parking-calendar-v546 .listo-parking-date-editor__rates > div strong{
    display:flex;
    align-items:center;
    min-height:48px;
    padding:0 14px;
    border:1px solid #d7dcde;
    border-radius:10px;
    background:#f6f8f8;
    color:#8a9499;
    font-size:16px;
  }
  .listo-host-parking-calendar-v546 .listo-parking-date-editor__notice{margin-top:18px;}
  .listo-host-parking-calendar-v546 .listo-parking-date-editor .listo-cp-block-btn{margin-top:8px;color:#d85f68;cursor:default;}
  .listo-host-parking-calendar-v546 .listo-parking-date-editor .listo-cp-block-btn:disabled{opacity:.62;}
  .listo-host-parking-calendar-v546 .listo-parking-date-editor__bookings{margin-top:18px;padding-top:16px;border-top:1px solid #e7ecee;}
  .listo-host-parking-calendar-v546 .listo-parking-date-editor__bookings > strong{display:block;margin-bottom:8px;font-size:13px;color:#172631;}
  .listo-host-parking-calendar-v546 .listo-parking-date-editor__bookings a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #edf0f2;text-decoration:none;color:#172631;font-size:12px;}
}


/* NEXT941 — Parking Rate & Availability Rules now follows the approved
   Staycation rule-management interaction model. Parking-specific rate fields
   remain Hourly + Daily; access hours remain Listing Form source-of-truth. */
.listo-host-parking-calendar-v546 .listo-parking-rate-rule-list .listo-cp-rule{
  grid-template-columns:minmax(0,1.5fr) minmax(190px,.75fr) auto;
  border:0;
  border-bottom:1px solid #E2E8ED;
  border-radius:0;
  margin:0;
  padding:18px 0;
  background:transparent;
  box-shadow:none;
}
.listo-host-parking-calendar-v546 .listo-parking-rate-rule-list .listo-cp-rule:first-child{
  border-top:1px solid #E2E8ED;
}
.listo-host-parking-calendar-v546 .listo-parking-rate-rule-list .listo-cp-rule strong{
  font-size:15px;
  color:#172631;
}
.listo-host-parking-calendar-v546 .listo-parking-rate-rule-list .listo-cp-rule span{
  color:#687781;
  font-size:13px;
}
.listo-host-parking-calendar-v546 .listo-parking-rate-rule-list .listo-cp-rule b{
  color:#172631;
  font-size:15px;
}
.listo-host-parking-calendar-v546 .listo-parking-rate-rule-list .listo-cp-rule-actions{
  justify-content:flex-end;
  align-items:center;
}
.listo-host-parking-calendar-v546 .listo-parking-rate-rule-list .listo-cp-rule-actions form{margin:0;}
.listo-host-parking-calendar-v546 .listo-parking-rate-rule-list .listo-cp-rule-actions button{
  border:0;
  background:transparent;
  border-radius:8px;
  padding:8px 10px;
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.listo-host-parking-calendar-v546 .listo-parking-rate-rule-list .listo-cp-rule-actions .listo-parking-edit-rule{color:#172631;}
.listo-host-parking-calendar-v546 .listo-parking-rate-rule-list .listo-cp-rule-actions .listo-cp-delete-rule{color:#B03B43;}
.listo-host-parking-calendar-v546 .listo-parking-rate-rule-list .listo-cp-rule-actions button:hover{background:#F3F7F9;}
.listo-host-parking-calendar-v546 .listo-parking-base-rate-note{
  margin-top:18px;
  padding:14px 0 0;
  border-top:1px solid #E2E8ED;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.listo-host-parking-calendar-v546 .listo-parking-base-rate-note strong{font-size:14px;color:#172631;}
.listo-host-parking-calendar-v546 .listo-parking-base-rate-note span{font-size:13px;color:#687781;}
.listo-host-parking-calendar-v546 #listo-parking-rule-modal .listo-cp-modal__dialog{width:min(520px,100%);}
.listo-host-parking-calendar-v546 #listo-parking-rule-modal .listo-cp-modal__dialog label{font-size:13px;}
.listo-host-parking-calendar-v546 #listo-parking-rule-modal .listo-cp-field-help{
  display:block;
  margin-top:6px;
  color:#71808A;
  font-size:12px;
  font-weight:500;
}
.listo-host-parking-calendar-v546 .listo-parking-rule-rate-grid{gap:12px;}

@media (min-width:901px){
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-special{
    background:#A45BC8 !important;
    border-color:#A45BC8 !important;
    color:#fff !important;
  }
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-special small,
  .listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-special .listo-parking-month-day__rates span{
    color:#fff !important;
  }
}
@media (max-width:900px){
  .listo-host-parking-calendar-v546 .listo-parking-rate-rule-list .listo-cp-rule{grid-template-columns:1fr;gap:10px;}
  .listo-host-parking-calendar-v546 .listo-parking-rate-rule-list .listo-cp-rule-actions{justify-content:flex-start;}
}

/* NEXT945 — Selected Parking date pricing is an operational editor. */
.listo-host-parking-calendar-v546 .listo-parking-date-editor__rate-form{display:grid;gap:18px;}
.listo-host-parking-calendar-v546 .listo-parking-date-editor__rate-form label{display:block;margin:0;}
.listo-host-parking-calendar-v546 .listo-parking-date-editor__rate-form label>span{display:block;margin-bottom:9px;font-size:14px;font-weight:700;color:#5c6467;}
.listo-host-parking-calendar-v546 .listo-parking-date-editor__rate-form label>div{display:flex;align-items:center;min-height:48px;padding:0 14px;border:1px solid #d7dcde;border-radius:10px;background:#f6f8f8;}
.listo-host-parking-calendar-v546 .listo-parking-date-editor__rate-form label>div b{font-size:16px;color:#172631;margin-right:10px;}
.listo-host-parking-calendar-v546 .listo-parking-date-editor__rate-form label>div input{width:100%;min-width:0;border:0!important;outline:0!important;background:transparent!important;padding:0!important;font-size:16px;font-weight:700;color:#172631;box-shadow:none!important;}
.listo-host-parking-calendar-v546 .listo-parking-date-editor__rate-form label>div input::placeholder{color:#a3adb2;opacity:1;}
.listo-host-parking-calendar-v546 .listo-parking-date-editor__rate-form label>div em{font-style:normal;font-size:15px;font-weight:700;color:#7d898f;white-space:nowrap;margin-left:8px;}
.listo-host-parking-calendar-v546 .listo-parking-date-editor__rate-form .listo-btn{width:100%;min-height:48px;}
.listo-host-parking-calendar-v546 .listo-parking-date-editor__clear-rate{border:0;background:transparent;color:#7a8992;font-size:13px;font-weight:700;cursor:pointer;padding:2px 0;}
.listo-host-parking-calendar-v546 .listo-parking-date-editor__clear-rate:hover{text-decoration:underline;}


/* NEXT948 — Color-coded Parking dates: every text node inside a filled date box is white. */
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-booked,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-blocked,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-special,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-selected,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-booked > span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-blocked > span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-special > span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-selected > span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-booked small,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-blocked small,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-special small,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-selected small,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-booked .listo-parking-month-day__rates span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-blocked .listo-parking-month-day__rates span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-special .listo-parking-month-day__rates span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-selected .listo-parking-month-day__rates span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-booked:hover > span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-blocked:hover > span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-special:hover > span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-booked.is-today:not(.is-selected) > span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-blocked.is-today:not(.is-selected) > span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-special.is-today:not(.is-selected) > span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-booked.is-past > span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-blocked.is-past > span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-special.is-past > span,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-booked.is-past small,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-blocked.is-past small,
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-special.is-past small {
  color:#fff !important;
}
/* Past booked/blocked/special dates keep their fill so the white text stays legible. */
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-booked.is-past { background:#6F7B82 !important; border-color:#6F7B82 !important; opacity:.72; }
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-blocked.is-past { background:#D9535D !important; border-color:#D9535D !important; opacity:.72; }
.listo-host-parking-calendar-v546 .listo-parking-month-day--v616.is-special.is-past { background:#A45BC8 !important; border-color:#A45BC8 !important; opacity:.72; }

/* In-place save toast (no page jump) */
.listo-parking-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(12px);z-index:99999;max-width:min(92vw,420px);padding:12px 18px;border-radius:12px;background:#172631;color:#fff;font-size:14px;font-weight:600;line-height:1.35;box-shadow:0 10px 30px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.listo-parking-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
.listo-parking-date-editor.is-saving{opacity:.65;pointer-events:none;transition:opacity .12s ease}
@media (max-width:700px){.listo-parking-toast{bottom:86px}}


/* ========================================================================
   NEXT949 — Parking page-title alignment
   Restore the shared Host page-entry convention: page title and one-line
   description are left-aligned on Parking Bookings and Calendar & Pricing.
   Presentation-only; no workflow, data, or responsive structure changes.
   ======================================================================== */
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header,
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header {
  text-align: left !important;
}

body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header h1,
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header .listo-host-bookings-description,
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header h1,
body[data-listo-mode="host"] .listo-main .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header p {
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
}


/* ========================================================================
   NEXT951 — Parking Listings desktop management workspace refinement
   Presentation-only layer. Preserve listing queries, filters, AJAX visibility,
   URLs and Parking workflow behavior. Desktop follows the established Host
   open-workspace/list pattern; mobile retains its existing touch layout.
   ======================================================================== */
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-listings {
  max-width: 1400px !important;
}

body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-listings > .listo-host-parking-listings-title-row {
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:24px !important;
  min-height:0 !important;
  margin:0 0 34px !important;
  padding:0 !important;
}
body[data-listo-mode="host"] .listo-host-parking-listings-title-row .listo-page-title__icon {
  display:none !important;
}
.listo-host-parking-listings-title-copy{min-width:0}
.listo-host-parking-listings-title-copy h1{
  margin:0 !important;
  color:#142b3d !important;
  font-size:28px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  letter-spacing:-.025em !important;
}
.listo-host-parking-listings-title-copy p{
  margin:8px 0 0 !important;
  color:#6b8298 !important;
  font-size:15px !important;
  line-height:1.45 !important;
}
.listo-page-title-row--parking-action .listo-host-parking-listings-add{
  margin-top:1px !important;
  min-height:42px !important;
  padding:10px 17px !important;
  border-radius:11px !important;
  background:#ff6a00 !important;
  border-color:#ff6a00 !important;
  box-shadow:none !important;
  font-size:13px !important;
}

/* The utility row is deliberately open: no nested admin-style card. */
body[data-listo-mode="host"] .listo-host-parking-listings-controls{
  display:grid !important;
  grid-template-columns:minmax(280px,1.8fr) minmax(150px,.75fr) minmax(180px,.9fr) minmax(165px,.8fr) auto !important;
  align-items:end !important;
  gap:14px !important;
  margin:0 !important;
  padding:0 0 18px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}
.listo-host-parking-listings-search input,
.listo-host-parking-listings-filter select,
.listo-host-parking-listings-sort select{
  height:42px !important;
  border:1px solid #dfe6eb !important;
  border-radius:10px !important;
  background:#fff !important;
  box-shadow:none !important;
  color:#24313b !important;
  font-size:13px !important;
}
.listo-host-parking-listings-search input:focus,
.listo-host-parking-listings-filter select:focus,
.listo-host-parking-listings-sort select:focus{
  border-color:#2196f3 !important;
  box-shadow:0 0 0 3px rgba(33,150,243,.10) !important;
  outline:none !important;
}
.listo-host-parking-listings-filter > span,
.listo-host-parking-listings-sort > span{
  margin-bottom:6px !important;
  color:#73879a !important;
  font-size:11px !important;
  font-weight:700 !important;
}
.listo-host-parking-listings-controls .listo-btn{
  min-height:42px !important;
  padding:10px 16px !important;
  border-radius:10px !important;
  font-size:13px !important;
}

/* Collection summary follows the utility row, with no extra divider. */
.listo-host-parking-listings-summary{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  margin:0 0 12px;
  padding:0;
  color:#6b8298;
  font-size:14px;
}
.listo-host-parking-listings-summary strong{
  color:#182f42;
  font-size:18px;
  font-weight:700;
}
.listo-host-parking-listings-summary a{
  color:#d85d00;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
}

/* Open listing ledger rather than a grid of large rounded cards. */
.listo-host-parking-listings-list{
  display:block !important;
  border-top:1px solid #e4ebf0;
}
.listo-host-parking-inventory-card{
  display:grid !important;
  grid-template-columns:168px minmax(0,1fr) auto !important;
  gap:22px !important;
  align-items:center !important;
  padding:18px 0 !important;
  border:0 !important;
  border-bottom:1px solid #e4ebf0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transition:none !important;
}
.listo-host-parking-inventory-card:hover{
  transform:none !important;
  border-color:#e4ebf0 !important;
  box-shadow:none !important;
}
.listo-host-parking-inventory-card__media{
  width:168px !important;
  aspect-ratio:4/3 !important;
  border-radius:10px !important;
}
.listo-host-parking-inventory-card__body h2{
  margin:5px 0 4px !important;
  color:#172e40 !important;
  font-size:18px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
}
.listo-host-parking-inventory-card__location{
  font-size:13px !important;
  color:#6d8090 !important;
}
.listo-host-parking-inventory-card__type{
  margin-top:7px !important;
  color:#435867 !important;
  font-size:13px !important;
  font-weight:600 !important;
}
.listo-host-parking-inventory-card__vehicles{margin-top:9px !important}
.listo-host-parking-inventory-card__vehicles span{
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#718492 !important;
  font-size:12px !important;
  font-weight:500 !important;
}
.listo-host-parking-inventory-card__vehicles span + span::before{content:' · ';margin:0 4px;color:#a2adb5}
.listo-host-parking-inventory-card__pricing{
  gap:14px !important;
  margin-top:12px !important;
}
.listo-host-parking-inventory-card__pricing strong{
  color:#218b55 !important;
  font-size:15px !important;
  font-weight:750 !important;
}
.listo-host-parking-inventory-card__pricing small{
  color:#7a8993 !important;
  font-size:11px !important;
}
.listo-host-parking-inventory-card__hours{
  margin-top:7px !important;
  font-size:12px !important;
}
.listo-host-parking-inventory-card__activity{
  margin-top:8px !important;
  color:#718492 !important;
  font-size:12px !important;
  font-weight:500 !important;
}
.listo-host-parking-inventory-card__actions{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  min-width:215px;
}
.listo-host-parking-inventory-card__actions .listo-btn{
  width:auto !important;
  min-height:40px !important;
  padding:9px 14px !important;
  border-radius:10px !important;
  font-size:12px !important;
}
.listo-host-parking-inventory-card__actions .listo-btn--primary{
  background:#2196f3 !important;
  border-color:#2196f3 !important;
}
.listo-host-parking-inventory-card__more summary{
  min-height:40px !important;
  padding:0 12px !important;
  border:1px solid #dfe6eb !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#445663 !important;
  font-size:12px !important;
}
.listo-host-parking-inventory-card__more summary:hover{
  border-color:#cbd6de !important;
  background:#f8fafb !important;
}
.listo-host-parking-inventory-card .listo-host-parking-listing-status{
  padding:4px 8px !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:700 !important;
}
.listo-host-parking-inventory-card .listo-host-parking-listing-status.is-published{
  background:#eef6fc !important;
  color:#1c73b8 !important;
}
.listo-host-parking-inventory-card .listo-host-parking-listing-status.is-pending{
  background:#fff3e6 !important;
  color:#a85b00 !important;
}
.listo-host-parking-inventory-card .listo-host-parking-listing-status.is-draft,
.listo-host-parking-inventory-card .listo-host-parking-listing-status.is-unpublished{
  background:#f2f4f6 !important;
  color:#687781 !important;
}

/* Keep mobile as its own interaction system; these rules only bridge the new
   desktop row treatment into the already-established mobile card layout. */
@media (max-width:900px){
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-listings{
    max-width:100% !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-listings-controls{
    grid-template-columns:1fr 1fr !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-listings-controls > .listo-host-parking-listings-search{
    grid-column:1 / -1 !important;
  }
  .listo-host-parking-inventory-card{
    display:grid !important;
    grid-template-columns:118px minmax(0,1fr) !important;
    gap:14px !important;
    padding:14px 0 !important;
  }
  .listo-host-parking-inventory-card__media{width:118px !important}
  .listo-host-parking-inventory-card__actions{
    grid-column:1 / -1 !important;
    justify-content:flex-start !important;
    min-width:0 !important;
    padding-top:11px !important;
    border-top:1px solid #edf1f4 !important;
  }
}
@media (max-width:700px){
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-listings > .listo-host-parking-listings-title-row{
    margin-bottom:22px !important;
  }
  .listo-host-parking-listings-title-copy h1{font-size:24px !important}
  .listo-host-parking-listings-title-copy p{font-size:14px !important}
  .listo-page-title-row--parking-action .listo-host-parking-listings-add{min-height:40px !important;padding:9px 12px !important;font-size:12px !important}
}
@media (max-width:480px){
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-listings > .listo-host-parking-listings-title-row{
    align-items:flex-start !important;
    gap:12px !important;
  }
  .listo-host-parking-listings-title-copy p{max-width:230px !important}
  .listo-host-parking-listings-controls{grid-template-columns:1fr !important}
  body[data-listo-mode="host"] .listo-host-parking-listings-controls > *{grid-column:1 !important}
}

/* NEXT952 — Parking Listings desktop filter treatment aligned with Listings (Staycation).
 * Replace the boxed multi-select filter form with the shared open search + status-tab utility.
 * No listing/business logic is changed here. */
body[data-listo-mode="host"] .listo-host-parking-listings .listo-host-parking-listings-controls{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:28px !important;
  width:100% !important;
  margin:0 0 24px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}
body[data-listo-mode="host"] .listo-host-parking-listings-search-form{
  flex:0 1 486px !important;
  min-width:0 !important;
  margin:0 !important;
}
body[data-listo-mode="host"] .listo-host-parking-listings-search{
  position:relative !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
}
body[data-listo-mode="host"] .listo-host-parking-listings-search svg{
  position:absolute !important;
  left:20px !important;
  top:50% !important;
  width:20px !important;
  height:20px !important;
  transform:translateY(-50%) !important;
  color:#71808a !important;
  pointer-events:none !important;
}
body[data-listo-mode="host"] .listo-host-parking-listings-search input{
  display:block !important;
  width:100% !important;
  height:56px !important;
  box-sizing:border-box !important;
  padding:0 18px 0 57px !important;
  border:1px solid #dfe5ea !important;
  border-radius:13px !important;
  background:#fff !important;
  color:#24313b !important;
  font-size:16px !important;
  line-height:1 !important;
  box-shadow:none !important;
}
body[data-listo-mode="host"] .listo-host-parking-listings-search input::placeholder{
  color:#7b8b98 !important;
  opacity:1 !important;
}
body[data-listo-mode="host"] .listo-host-parking-listings-search input:focus{
  border-color:#2196f3 !important;
  box-shadow:0 0 0 3px rgba(33,150,243,.10) !important;
  outline:none !important;
}
body[data-listo-mode="host"] .listo-host-parking-listings-filters{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  min-width:0 !important;
  flex:0 0 auto !important;
  margin:0 !important;
}
body[data-listo-mode="host"] .listo-host-parking-listings-filter-tab{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:52px !important;
  padding:0 18px !important;
  border:0 !important;
  border-radius:26px !important;
  background:transparent !important;
  color:#4f5d67 !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  transition:background .15s ease,color .15s ease !important;
}
body[data-listo-mode="host"] .listo-host-parking-listings-filter-tab:hover{
  background:#f2f5f7 !important;
  color:#24313b !important;
}
body[data-listo-mode="host"] .listo-host-parking-listings-filter-tab.is-active{
  background:#2196f3 !important;
  color:#fff !important;
}
body[data-listo-mode="host"] .listo-host-parking-listings-filter-tab.is-active:hover{
  background:#2196f3 !important;
  color:#fff !important;
}
@media (max-width:1100px){
  body[data-listo-mode="host"] .listo-host-parking-listings .listo-host-parking-listings-controls{
    gap:18px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-listings-search-form{
    flex-basis:420px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-listings-filter-tab{
    padding:0 13px !important;
    font-size:14px !important;
  }
}
@media (max-width:760px){
  body[data-listo-mode="host"] .listo-host-parking-listings .listo-host-parking-listings-controls{
    display:block !important;
    margin-bottom:18px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-listings-search-form{
    width:100% !important;
    margin-bottom:12px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-listings-filters{
    width:100% !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    padding-bottom:2px !important;
    scrollbar-width:none !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-listings-filters::-webkit-scrollbar{display:none !important}
  body[data-listo-mode="host"] .listo-host-parking-listings-filter-tab{
    flex:0 0 auto !important;
    min-height:44px !important;
    padding:0 15px !important;
    font-size:14px !important;
  }
}

/* ========================================================================
   NEXT953 — Parking Listings controls matched to Staycation Listings
   Match the approved Staycation Listings desktop geometry for the page title,
   description, search field, and status tabs. Parking keeps its orange
   identity for the active status tab. Presentation-only.
   ======================================================================== */
@media (min-width: 1051px) {
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-listings > .listo-host-parking-listings-title-row {
    margin-bottom: 30px !important;
  }

  body[data-listo-mode="host"] .listo-host-parking-listings-title-copy h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
  }

  body[data-listo-mode="host"] .listo-host-parking-listings-title-copy p {
    margin-top: 6px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  body[data-listo-mode="host"] .listo-host-parking-listings-search-form {
    flex: 0 1 360px !important;
  }

  body[data-listo-mode="host"] .listo-host-parking-listings-search input {
    height: 42px !important;
    padding-left: 42px !important;
    padding-right: 14px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
  }

  body[data-listo-mode="host"] .listo-host-parking-listings-search svg {
    left: 14px !important;
    width: 18px !important;
    height: 18px !important;
  }

  body[data-listo-mode="host"] .listo-host-parking-listings-filters {
    gap: 5px !important;
  }

  body[data-listo-mode="host"] .listo-host-parking-listings-filter-tab {
    min-height: 34px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  body[data-listo-mode="host"] .listo-host-parking-listings-filter-tab:hover {
    background: #f5f7f8 !important;
    color: #172631 !important;
  }

  body[data-listo-mode="host"] .listo-host-parking-listings-filter-tab.is-active,
  body[data-listo-mode="host"] .listo-host-parking-listings-filter-tab.is-active:hover {
    background: #ff6a00 !important;
    color: #fff !important;
  }
}

/* ========================================================================
   NEXT954 — Canonical Host page-header geometry
   Standardize desktop page-title/description typography and the distance from
   the global Host header across Staycation and Parking workspaces.

   Canonical desktop contract:
   - 56px global Host header -> page header entry (NEXT898)
   - Page title: 26px / 30px line-height / 700 weight
   - One-line description: 14px / 20px line-height
   - Title -> description: 5px
   - Header block minimum height: 59px
   - Header bottom spacing: 20px

   Presentation-only. No booking, payment, accounting, pricing, availability,
   messaging, case, AJAX, URL, or responsive/mobile workflow behavior changes.
   ======================================================================== */
@media (min-width: 901px) {
  /* Shared title contract used by Staycation Bookings, Calendar & Pricing,
     Listings, Inbox, Parking Bookings and Parking Calendar & Pricing. */
  body[data-listo-mode="host"] .listo-host-page-header,
  body[data-listo-mode="host"] .listo-host-app-page__header,
  body[data-listo-mode="host"] .listo-inbox-page__header,
  body[data-listo-mode="host"] .listo-dashboard-v2__header {
    min-height:59px !important;
    margin:0 0 20px !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

  body[data-listo-mode="host"] .listo-host-page-header h1,
  body[data-listo-mode="host"] .listo-host-app-page__header h1,
  body[data-listo-mode="host"] .listo-inbox-page__header h1,
  body[data-listo-mode="host"] .listo-inbox__heading,
  body[data-listo-mode="host"] .listo-dashboard-v2__header h1 {
    margin:0 !important;
    padding:0 !important;
    font-size:26px !important;
    line-height:30px !important;
    min-height:30px !important;
    font-weight:700 !important;
    letter-spacing:-.02em !important;
    color:#172631 !important;
  }

  body[data-listo-mode="host"] .listo-host-page-description,
  body[data-listo-mode="host"] .listo-host-app-page__header p,
  body[data-listo-mode="host"] .listo-inbox-page__description,
  body[data-listo-mode="host"] .listo-dashboard-v2__header p {
    margin:5px 0 0 !important;
    padding:0 !important;
    font-size:14px !important;
    line-height:20px !important;
    min-height:20px !important;
    color:#70818D !important;
  }

  /* Staycation Calendar had a later desktop override of 28px/7px.
     Bring it back to the Host-wide contract. */
  body[data-listo-mode="host"] .listo-host-staycation-calendar-app .listo-host-calendar-page__header {
    margin:0 0 20px !important;
    padding:0 !important;
  }
  body[data-listo-mode="host"] .listo-host-staycation-calendar-app .listo-host-app-page__header h1 {
    font-size:26px !important;
    line-height:30px !important;
    font-weight:700 !important;
  }
  body[data-listo-mode="host"] .listo-host-staycation-calendar-app .listo-host-app-page__header p {
    margin:5px 0 0 !important;
    font-size:14px !important;
    line-height:20px !important;
  }

  /* Parking Calendar had a later desktop override of 28px/7px. */
  body[data-listo-mode="host"] .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header {
    min-height:59px !important;
    margin:0 0 20px !important;
    padding:0 !important;
    display:block !important;
    text-align:left !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header h1 {
    font-size:26px !important;
    line-height:30px !important;
    min-height:30px !important;
    font-weight:700 !important;
    margin:0 !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v546 > .listo-host-parking-calendar-page__header p {
    margin:5px 0 0 !important;
    font-size:14px !important;
    line-height:20px !important;
    min-height:20px !important;
    text-align:left !important;
  }

  /* Parking Listings uses its own title-row markup. Keep the Add Parking
     action aligned independently while making the title copy identical to
     the shared Host header contract. */
  body[data-listo-mode="host"] .listo-host-parking-listings > .listo-host-parking-listings-title-row {
    min-height:59px !important;
    margin:0 0 20px !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-listings-title-copy h1 {
    margin:0 !important;
    padding:0 !important;
    font-size:26px !important;
    line-height:30px !important;
    min-height:30px !important;
    font-weight:700 !important;
    letter-spacing:-.02em !important;
    color:#172631 !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-listings-title-copy p {
    margin:5px 0 0 !important;
    padding:0 !important;
    font-size:14px !important;
    line-height:20px !important;
    min-height:20px !important;
    color:#70818D !important;
  }
}

/* NEXT955 — Parking Inbox Special Offer presentation. Functional states remain
   shared with Staycation; orange is used only as Parking business identity. */
.listo-inbox-sidebar__panel--parking .listo-inbox-sidebar__label {
  color: #C2410C;
}
.listo-inbox-sidebar__panel--parking .listo-inbox-sidebar__inquiry-total {
  color: var(--ink);
}
.lpr-special-offer-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-left: 3px solid #F97316;
  background: #FFF7ED;
  color: var(--ink);
  border-radius: 8px;
  font-size: 13px;
}
.lpr-special-offer-notice strong {
  display: block;
  font-size: 13px;
  white-space: nowrap;
}
.lpr-special-offer-notice span {
  color: var(--ink-muted);
}
.listo-inbox-sidebar__panel--parking .listo-btn--primary {
  background: #F97316;
  border-color: #F97316;
  color: #fff;
}

.listo-offer-card--parking { border-left: 3px solid #F97316; }
.listo-offer-card--parking .listo-offer-card__cta {
  background: #F97316;
  border-color: #F97316;
  color: #fff;
}

/* NEXT956 — Parking Inbox Special Offer right-rail clarity. */
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__panel--parking .listo-inbox-sidebar__parking-offer-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__panel--parking .listo-inbox-sidebar__parking-offer-note .listo-inbox-sidebar__label {
  margin-bottom: 6px;
}

/* NEXT956 — Parking Inbox: make the Special Offer section explicit in the right rail. */
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__panel--parking .listo-inbox-sidebar__parking-offer-heading {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__panel--parking .listo-inbox-sidebar__parking-offer-heading .listo-inbox-sidebar__label {
  margin-bottom: 5px;
}
body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__panel--parking .listo-inbox-sidebar__parking-offer-heading + .listo-inbox-sidebar__actions {
  margin-top: 10px;
}

/* NEXT971 — Standard Host desktop page-title treatment for External Calendars.
 * Keep the same title size, description size, and title-to-description rhythm
 * as Payment Details and the approved Host page hierarchy.
 */
.listo-external-cal-page .listo-external-cal-hero > .listo-page-title-row {
  margin: 0 !important;
  gap: 0 !important;
}
.listo-external-cal-page .listo-external-cal-hero > .listo-page-title-row > h1 {
  margin: 0 !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
.listo-external-cal-page .listo-external-cal-page-description {
  max-width: 760px;
  margin: 8px 0 24px !important;
  color: var(--ink-muted);
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* NEXT970 — External Calendars Staycation desktop workspace overhaul.
 * Presentation layer only. Existing data attributes, form selectors, AJAX
 * actions, export controls and per-listing editor behavior remain intact.
 */
.listo-external-cal-page {
  max-width: 1280px;
  padding-top: 56px;
  padding-bottom: 72px;
}

.listo-external-cal-hero {
  display: block;
  margin-bottom: 24px;
}

.listo-external-cal-hero > .listo-page-title-row {
  margin: 0;
}

.listo-external-cal-hero > .listo-page-title-row h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.listo-external-cal-page-description {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.5;
}

.listo-external-cal-notice {
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 28px;
  padding: 12px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

.listo-external-cal-notice-icon {
  color: var(--listo-blue, #2196F3);
  margin-top: 1px;
}

.listo-external-cal-notice-icon svg { width: 18px; height: 18px; }

.listo-external-cal-notice-copy strong {
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 700;
}

.listo-external-cal-notice-copy p {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.5;
}

.listo-external-cal-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.listo-external-cal-summary-copy {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.listo-external-cal-summary-copy strong {
  font-size: 18px;
  line-height: 1.3;
}

.listo-external-cal-summary-copy span {
  color: var(--ink-muted);
  font-size: 13px;
}

.listo-external-cal-summary-stats {
  gap: 8px;
}

.listo-external-cal-stat {
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
}

.listo-external-cal-stat + .listo-external-cal-stat::before {
  content: '·';
  margin-right: 8px;
  color: var(--border-strong, #c9ced1);
}

.listo-external-cal-stat--connected,
.listo-external-cal-stat--neutral,
.listo-external-cal-stat--attention { color: var(--ink-muted); background: transparent; }
.listo-external-cal-stat--connected i { background: #22A06B; }
.listo-external-cal-stat--neutral i { background: #98A2B3; }
.listo-external-cal-stat--attention { color: var(--error, #c62828); }
.listo-external-cal-stat--attention i { background: var(--error, #c62828); }

.listo-external-cal-toolbar {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.listo-external-cal-search-input,
.listo-external-cal-filter-select {
  height: 44px;
  border-radius: 10px;
}

.listo-external-cal-search-input:focus,
.listo-external-cal-filter-select:focus {
  border-color: var(--listo-blue, #2196F3);
  box-shadow: 0 0 0 3px rgba(33,150,243,.10);
}

.listo-external-cal-table {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.listo-external-cal-table-head,
.listo-external-cal-item-row {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 230px) 150px;
  gap: 24px;
}

.listo-external-cal-table-head {
  min-height: 34px;
  padding: 0 14px 8px;
  background: transparent;
  border-bottom: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 11px;
  letter-spacing: .05em;
}

.listo-external-cal-table-head span:first-child { padding-left: 52px; }

.listo-external-cal-item {
  border-bottom: 1px solid var(--border);
}

.listo-external-cal-item-row {
  min-height: 92px;
  padding: 14px;
  transition: background .15s ease;
}

.listo-external-cal-item-row:hover,
.listo-external-cal-item.is-expanded .listo-external-cal-item-row {
  background: var(--surface-alt);
}

.listo-external-cal-item-listing { gap: 14px; }

.listo-external-cal-item-thumb {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--surface-alt);
  color: var(--ink-muted);
}

.listo-external-cal-item-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.listo-external-cal-item-title-wrap strong {
  font-size: 15px;
  line-height: 1.35;
}

.listo-external-cal-item-title-wrap span {
  margin-top: 4px;
  font-size: 13px;
}

.listo-external-cal-visibility-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: 1px;
}

.listo-external-cal-visibility-badge--published { color: #16735A; background: #EEF9F4; }
.listo-external-cal-visibility-badge--unpublished,
.listo-external-cal-visibility-badge--not-published { color: #667085; background: #F2F4F7; }

.listo-external-cal-item-count { display: none; }

.listo-external-cal-item-status {
  min-width: 0;
}

.listo-external-cal-status-badge {
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
}

.listo-external-cal-status-badge--connected { color: #16735A; background: transparent; }
.listo-external-cal-status-badge--not-connected { color: var(--ink-muted); background: transparent; }
.listo-external-cal-status-badge--attention { color: var(--error, #c62828); background: transparent; }
.listo-external-cal-status-badge--connected i { background: #22A06B; }
.listo-external-cal-status-badge--not-connected i { background: #98A2B3; }
.listo-external-cal-status-badge--attention i { background: var(--error, #c62828); }

.listo-external-cal-item-status-detail {
  display: block;
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.listo-external-cal-item-action {
  display: flex;
  justify-content: flex-end;
}

.listo-external-cal-manage {
  min-width: 0;
  padding: 9px 13px;
  border-radius: 9px;
  border-color: var(--border-strong, #c9ced1);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.listo-external-cal-manage:hover {
  border-color: var(--listo-blue, #2196F3);
  color: var(--listo-blue, #2196F3);
  background: transparent;
}

.listo-external-cal-item.is-expanded .listo-external-cal-manage {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}

.listo-external-cal-editor {
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}

.listo-external-cal-editor-inner {
  max-width: 980px;
  padding: 24px 14px 28px 80px;
}

.listo-external-cal-editor-heading {
  margin-bottom: 20px;
}

.listo-external-cal-editor-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.listo-external-cal-editor-heading h3 {
  margin: 0 0 5px;
  font-size: 18px;
  line-height: 1.3;
}

.listo-external-cal-editor-heading p {
  max-width: 760px;
  font-size: 14px;
  line-height: 1.5;
}

.listo-external-cal-section-label {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.listo-external-cal-row {
  padding: 8px;
  background: var(--surface);
  border-radius: 9px;
}

.listo-external-cal-remove {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 8px;
}

.listo-external-cal-export {
  margin-top: 28px !important;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  background: transparent;
  border-radius: 0;
}

.listo-external-cal-export-head {
  gap: 10px;
}

.listo-external-cal-export-icon {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: rgba(33,150,243,.08);
  color: var(--listo-blue, #2196F3);
}

.listo-external-cal-export-head h4 {
  margin: 0 0 3px;
  font-size: 15px;
}

.listo-external-cal-export-url-row {
  gap: 8px;
  margin-top: 12px;
}

.listo-external-cal-export-url-row .listo-external-cal-export-url {
  min-width: 0;
}

.listo-external-cal-export-note {
  max-width: 720px;
}

.listo-external-cal-editor .listo-external-cal-regenerate {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
}

.listo-external-cal-editor .listo-external-cal-regenerate:hover {
  color: var(--error, #c62828);
  background: transparent;
}

@media (max-width: 900px) {
  .listo-external-cal-editor-inner { padding: 20px 16px 24px; }
  .listo-external-cal-table-head { display: none; }
  .listo-external-cal-item-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .listo-external-cal-item-status { grid-column: 1; grid-row: 2; padding-left: 66px; margin-top: -8px; }
  .listo-external-cal-item-action { grid-column: 2; grid-row: 1 / span 2; }
}

/* NEXT972 — Canonical Host desktop page-title correction for account/management
 * pages that use the shared .listo-page-title-row markup.
 * Match the approved Bookings contract exactly:
 * 26px title / 30px line-height, 14px description / 20px line-height,
 * 5px title-to-description gap, and the global 56px header-to-title entry
 * spacing supplied by the Host shell. Presentation only.
 */
@media (min-width: 901px) {
  body[data-listo-mode="host"] .listo-payment-details-page > .listo-page-title-row,
  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-hero > .listo-page-title-row {
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-listo-mode="host"] .listo-payment-details-page > .listo-page-title-row > h1,
  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-hero > .listo-page-title-row > h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 26px !important;
    line-height: 30px !important;
    min-height: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #172631 !important;
  }

  body[data-listo-mode="host"] .listo-payment-details-page > .listo-page-intro,
  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-page-description {
    margin: 5px 0 20px !important;
    padding: 0 !important;
    max-width: 760px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    min-height: 20px !important;
    color: #70818D !important;
  }

  /* NEXT970 added 56px directly to External Calendars. The Host shell already
     supplies the canonical 56px entry spacing, so remove the duplicate here. */
  body[data-listo-mode="host"] .listo-external-cal-page {
    padding-top: 0 !important;
  }
}

/* NEXT973 — Final Host title/description rhythm correction.
 * The canonical Bookings pattern is the source of truth: 56px shell entry,
 * 26px/30px title, then a 5px gap to the 14px/20px description.
 * Increase selector specificity so older Host-wide intro rules cannot
 * reintroduce the larger 18px top margin on these two pages.
 * Presentation only; no workflow or responsive behavior changes.
 */
@media (min-width: 901px) {
  body[data-listo-mode="host"] .listo-main .listo-payment-details-page > .listo-page-title-row,
  body[data-listo-mode="host"] .listo-main .listo-external-cal-page .listo-external-cal-hero > .listo-page-title-row {
    margin-bottom: 0 !important;
  }

  body[data-listo-mode="host"] .listo-main .listo-payment-details-page > .listo-page-intro,
  body[data-listo-mode="host"] .listo-main .listo-external-cal-page .listo-external-cal-page-description {
    margin-top: 5px !important;
    margin-bottom: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }
}


/* NEXT974 — External Calendars now uses the exact canonical Host page-entry
 * markup used by Bookings and Payment Details. Remove the legacy hero wrapper
 * from the layout contract so older External Calendars rules cannot introduce
 * extra title/description spacing. Presentation only.
 */
@media (min-width: 901px) {
  body[data-listo-mode="host"] .listo-main > .listo-external-cal-page {
    padding-top: var(--listo-host-desktop-title-top) !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-external-cal-page > .listo-page-title-row {
    min-height: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-external-cal-page > .listo-page-title-row > h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 26px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-external-cal-page > .listo-page-intro.listo-external-cal-page-description {
    display: block !important;
    margin: 5px 0 20px !important;
    padding: 0 !important;
    max-width: 760px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    min-height: 20px !important;
  }
}

/* ==========================================================================\n   NEXT975 — Co-hosts Staycation desktop workspace\n   Presentation-only refinement. Existing co-host AJAX, invitation,\n   permission, split and remittance behavior remains unchanged.\n   ========================================================================== */
@media (min-width: 1021px) {
  .listo-cohost-page {
    max-width: 1200px !important;
  }

  .listo-cohost-page-header {
    position: relative;
    margin: 0 0 10px;
  }

  .listo-cohost-page .listo-cohost-page__title-row {
    margin: 0 !important;
    min-height: 30px;
    display: flex;
    align-items: flex-start;
  }

  .listo-cohost-page .listo-cohost-page__title-row h1 {
    margin: 0 !important;
    font-size: 26px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
  }

  .listo-cohost-page-description {
    margin: 5px 0 0 !important;
    color: var(--ink-muted) !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .listo-cohost-page__actions {
    position: absolute;
    right: 0;
    top: 0;
  }

  .listo-cohost-page__actions .listo-btn {
    min-height: 40px;
  }

  .listo-cohost-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 7px;
    margin: 0 0 20px;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 20px;
  }

  .listo-cohost-summary strong {
    color: var(--ink);
    font-weight: 700;
  }

  .listo-cohost-summary > span {
    color: var(--border-strong, #c9ced1);
  }

  .listo-cohost-summary__attention {
    color: #9a6300 !important;
  }

  /* One primary workspace rather than a dashboard-style two-column shell. */
  .listo-cohost-layout {
    display: block !important;
  }

  .listo-cohost-main {
    width: 100%;
  }

  .listo-cohost-page .listo-cohost-management-section {
    margin-bottom: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .listo-cohost-section-head {
    margin-bottom: 14px !important;
  }

  .listo-cohost-section-head h2 {
    margin: 0 0 4px !important;
    font-size: 18px !important;
    line-height: 24px !important;
  }

  .listo-cohost-section-head p {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .listo-cohost-management-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 12px;
    margin-bottom: 12px !important;
  }

  .listo-cohost-management-table {
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: var(--surface) !important;
    gap: 0 !important;
  }

  .listo-cohost-listing {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--surface) !important;
  }

  .listo-cohost-listing + .listo-cohost-listing {
    border-top: 1px solid var(--border) !important;
  }

  .listo-cohost-management-row {
    min-height: 82px !important;
    padding: 13px 18px !important;
  }

  .listo-cohost-listing:hover .listo-cohost-management-row {
    background: var(--surface-alt) !important;
  }

  .listo-cohost-listing-thumb {
    width: 72px !important;
    height: 58px !important;
    flex-basis: 72px !important;
    border-radius: 10px !important;
  }

  .listo-cohost-listing-copy strong {
    font-size: 15px !important;
  }

  .listo-cohost-meta-line {
    margin-top: 5px !important;
    font-size: 12px !important;
  }

  .listo-cohost-management-action .listo-btn {
    min-width: 118px !important;
  }

  .listo-cohost-sidebar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }

  .listo-cohost-sidebar .listo-cohost-page-section {
    margin-bottom: 0 !important;
    padding: 20px !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: var(--surface) !important;
    box-shadow: none !important;
  }

  .listo-cohost-sidebar .listo-cohost-sidebar-section:first-child:last-child {
    grid-column: 1 / -1;
  }

  .listo-cohost-money-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .listo-cohost-money-stat {
    min-height: 76px !important;
    padding: 11px 12px !important;
    border-radius: 10px !important;
  }

  .listo-cohost-money-stat span {
    font-size: 12px !important;
  }

  .listo-cohost-money-stat strong {
    font-size: 18px !important;
  }
}

@media (min-width: 1021px) and (max-width: 1120px) {
  .listo-cohost-page__actions {
    position: static;
    margin-top: 12px;
  }
}

/* NEXT977 — Co-hosts uses the exact same structural page header as Bookings.
 * Do not create a Co-host-specific title/intro geometry. The shared
 * .listo-host-page-header contract owns title size, 5px title-to-description
 * spacing, and the 20px header-to-content spacing. */
@media (min-width: 701px) {
  body[data-listo-mode="host"] .listo-cohost-page > .listo-cohost-page-header {
    margin: 0 0 20px !important;
    padding: 0 !important;
    min-height: 59px !important;
    box-sizing: border-box !important;
  }
  body[data-listo-mode="host"] .listo-cohost-page > .listo-cohost-page-header > h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 26px !important;
    line-height: 30px !important;
    min-height: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    color: #172631 !important;
  }
  body[data-listo-mode="host"] .listo-cohost-page > .listo-cohost-page-header > p {
    margin: 5px 0 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    min-height: 20px !important;
    color: #70818D !important;
    max-width: 760px !important;
  }
  body[data-listo-mode="host"] .listo-cohost-page > .listo-cohost-page__actions {
    position: static !important;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 0 22px !important;
  }
}


/* NEXT978 — Co-host page header aligned to the approved Listings desktop
 * pattern: title/description grouped on the left, primary page action on
 * the same header row at right. No change to co-host behavior. */
@media (min-width: 1021px) {
  body[data-listo-mode="host"] .listo-main > .listo-container > .listo-cohost-page-title-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 32px !important;
    margin: 0 0 20px !important;
    min-height: 60px !important;
  }
  body[data-listo-mode="host"] .listo-cohost-page-title-row .listo-cohost-page-title-copy {
    min-width: 0;
    flex: 1 1 auto;
  }
  body[data-listo-mode="host"] .listo-cohost-page-title-row > .listo-cohost-page-title-copy > h1 {
    margin: 0 !important;
    font-size: 26px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
  }
  body[data-listo-mode="host"] .listo-cohost-page-title-row .listo-page-intro {
    margin: 5px 0 0 !important;
    padding: 0 !important;
    max-width: 760px !important;
    min-height: 20px !important;
    color: #70818D !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }
  body[data-listo-mode="host"] .listo-cohost-page-title-row > .listo-cohost-page__actions {
    position: static !important;
    width: auto !important;
    flex: 0 0 auto;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }
  body[data-listo-mode="host"] .listo-cohost-page-title-row > .listo-cohost-page__actions .listo-btn {
    min-height: 60px !important;
    height: 60px !important;
    padding: 0 24px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    gap: 9px !important;
    box-sizing: border-box !important;
  }
  body[data-listo-mode="host"] .listo-cohost-page-title-row > .listo-cohost-page__actions .listo-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
}
@media (min-width: 701px) and (max-width: 1020px) {
  body[data-listo-mode="host"] .listo-cohost-page-title-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
  }
  body[data-listo-mode="host"] .listo-cohost-page-title-row .listo-page-intro { margin: 5px 0 0 !important; }
  body[data-listo-mode="host"] .listo-cohost-page-title-row > .listo-cohost-page__actions {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
  }
}


/* NEXT979 — Co-host page-level action matches the established Listings desktop
 * action footprint. Keep the action compact and prevent legacy Co-host rules
 * from enlarging the button box. */
@media (min-width: 1021px) {
  body[data-listo-mode="host"] .listo-main > .listo-container > .listo-cohost-page-title-row > .listo-cohost-page__actions > .listo-btn {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 0 24px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }
}

/* NEXT980 — Co-host page-level Invite action uses the exact desktop
 * footprint established by the Staycation Listings page action. */
@media (min-width: 1021px) {
  body[data-listo-mode="host"] .listo-main > .listo-container > .listo-cohost-page-title-row > .listo-cohost-page__actions > .listo-btn {
    box-sizing: border-box !important;
    width: 197px !important;
    min-width: 197px !important;
    max-width: 197px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    gap: 9px !important;
  }
  body[data-listo-mode="host"] .listo-main > .listo-container > .listo-cohost-page-title-row > .listo-cohost-page__actions > .listo-btn svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }
}


/* NEXT981 — Co-host page-level Invite action now uses the same compact footprint as the
 * Listings "+ Add parking space" action (42px tall, 10px 17px padding, 11px radius, 13px / 800 text).
 * Replaces the oversized fixed 197x60 box from NEXT979/NEXT980. Blue brand color is unchanged. */
@media (min-width: 1021px) {
  body[data-listo-mode="host"] .listo-main > .listo-container > .listo-cohost-page-title-row > .listo-cohost-page__actions > .listo-btn {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 42px !important;
    max-height: none !important;
    margin-top: 1px !important;
    padding: 10px 17px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    gap: 7px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }
  body[data-listo-mode="host"] .listo-main > .listo-container > .listo-cohost-page-title-row > .listo-cohost-page__actions > .listo-btn svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
  }
}

/* ==========================================================================\n   NEXT982 — Cases (Host Account) desktop workspace\n   Presentation-only refinement. Existing case queries, filters, details,\n   URLs, AJAX/workflow hooks and Staycation/Parking data remain untouched.\n   ========================================================================== */
@media (min-width: 761px) {
  body[data-listo-mode="host"] .listo-cases-page .listo-page-title-row.listo-cases-page-title,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-page-title-row.listo-cases-page-title {
    min-height:0!important;
    margin:56px 0 0!important;
    padding:0!important;
    gap:0!important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-page-title-row.listo-cases-page-title > h1,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-page-title-row.listo-cases-page-title > h1 {
    margin:0!important;
    font-size:26px!important;
    line-height:30px!important;
    font-weight:700!important;
    letter-spacing:-.02em!important;
    color:#172631!important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-page-description.listo-cases-page-description,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-page-description.listo-cases-page-description {
    margin:5px 0 20px!important;
    padding:0!important;
    color:#647B8C!important;
    font-size:14px!important;
    line-height:20px!important;
    font-weight:400!important;
  }

  body[data-listo-mode="host"] .listo-cases-page .listo-cases-help,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-help {
    margin:0 0 22px!important;
    padding:0 0 14px!important;
    border:0!important;
    border-bottom:1px solid #E6ECF1!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-help summary,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-help summary {
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
    padding:0!important;
    color:#425A69!important;
    font-size:13px!important;
    font-weight:700!important;
  }

  body[data-listo-mode="host"] .listo-cases-page .listo-cases-summary,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-summary {
    display:flex!important;
    align-items:center!important;
    gap:0!important;
    margin:0 0 20px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    overflow:visible!important;
    box-shadow:none!important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-summary__item,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-summary__item {
    min-height:0!important;
    padding:0 14px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-summary__item:first-child,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-summary__item:first-child { padding-left:0!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-summary__item + .listo-cases-summary__item,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-summary__item + .listo-cases-summary__item { border-left:1px solid #D9E2E8!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-summary__item span,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-summary__item span {
    display:inline!important;
    color:#667985!important;
    font-size:13px!important;
    font-weight:500!important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-summary__item strong,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-summary__item strong {
    display:inline!important;
    margin-right:5px!important;
    color:#172631!important;
    font-size:16px!important;
    font-weight:800!important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-summary__item--active strong,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-summary__item--active strong { color:#D45858!important; }

  body[data-listo-mode="host"] .listo-cases-page .listo-cases-toolbar,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-toolbar {
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:18px!important;
    margin:0 0 18px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-search,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-search {
    order:1!important;
    flex:0 1 360px!important;
    width:360px!important;
    height:46px!important;
    border:1px solid #D8E2E8!important;
    border-radius:10px!important;
    background:#fff!important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-filter-pills,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-filter-pills {
    order:2!important;
    align-items:center!important;
    gap:22px!important;
    flex-wrap:nowrap!important;
    margin-left:auto!important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-service-filters,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-service-filters { order:3!important; margin-left:4px!important; padding-left:20px!important; border-left:1px solid #DDE5EA!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-filter-pill,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-filter-pill {
    min-height:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#5D707D!important;
    font-size:14px!important;
    font-weight:700!important;
    white-space:nowrap!important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-filter-pill:hover,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-filter-pill:hover { color:#172631!important; border:0!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-filter-pill.is-active,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-filter-pill.is-active {
    padding:10px 16px!important;
    border-radius:999px!important;
    background:#2196F3!important;
    color:#fff!important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-filter-pill--parking.is-active,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-filter-pill--parking.is-active { background:#FF6A00!important; color:#fff!important; }

  body[data-listo-mode="host"] .listo-cases-page .listo-cases-list,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-list {
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-card,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-card {
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-top:1px solid #E1E8ED!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-card:last-child,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-card:last-child { border-bottom:1px solid #E1E8ED!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-card__summary,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-card__summary {
    min-height:108px!important;
    padding:18px 4px!important;
    align-items:center!important;
    background:transparent!important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-card__topline,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-card__topline { margin-bottom:7px!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-service-badge,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-service-badge {
    color:#1976D2!important;
    background:transparent!important;
    padding:0!important;
    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:.06em!important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-service-badge--parking,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-service-badge--parking { color:#D95B00!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-status.is-open,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-status.is-open { background:#FFF4E8!important; color:#B45309!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-status.is-resolved,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-status.is-resolved { background:#EEF5F9!important; color:#4D6573!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-complaint-card__title,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-complaint-card__title { font-size:16px!important; line-height:22px!important; font-weight:750!important; color:#172631!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-card__dates,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-card__dates { margin-top:3px!important; font-size:13px!important; color:#607582!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-card__reason,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-card__reason { margin-top:7px!important; font-size:13px!important; color:#526773!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-card__reason span,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-card__reason span { display:inline!important; margin:0 7px 0 0!important; color:#8796A0!important; font-size:11px!important; font-weight:700!important; text-transform:none!important; letter-spacing:0!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-card__meta-grid,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-card__meta-grid { margin-top:8px!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-card__meta-grid span,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-card__meta-grid span { display:inline!important; margin:0 7px 0 0!important; text-transform:none!important; letter-spacing:0!important; font-size:11px!important; color:#8796A0!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-card__meta-grid strong,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-card__meta-grid strong { font-size:12px!important; color:#526773!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-card__reference,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-card__reference { color:#8796A0!important; font-size:12px!important; font-weight:700!important; margin-left:auto!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-card__chevron,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-card__chevron { color:#7B8C97!important; font-size:23px!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-card__details,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-card__details { border-top:1px solid #E5EBEF!important; padding:18px 4px 20px!important; background:#FBFCFD!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-card__actions a,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-case-card__actions a { font-size:13px!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-no-results,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-no-results { margin-top:0!important; border:0!important; border-top:1px solid #E1E8ED!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-empty,
  body:has(.listo-host-account-floating-shell) .listo-cases-page .listo-cases-empty { max-width:none!important; margin:20px 0 0!important; border:1px solid #E1E8ED!important; border-radius:12px!important; box-shadow:none!important; }
}

/* ========================================================================
   NEXT983 — Home (Staycation) mobile marketplace refinement
   ------------------------------------------------------------------------
   Presentation-only mobile layer. The homepage template, listing-card
   component, search system, marketplace navigation, wishlist behavior and
   row-navigation JavaScript remain unchanged.

   Intent:
   - establish a deliberate 16px mobile content canvas
   - make each horizontal row read as one primary card + a clear next-card peek
   - restore the project's content-hierarchy typography on small screens
   - keep the signup/referral notice compact enough to support discovery
   - keep the price-transparency notice quiet and above the fixed bottom nav
   - do not alter desktop/tablet Home presentation
   ======================================================================== */
@media (max-width: 900px) {
  .listo-homepage-content {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
  }

  .listo-home-row-header {
    min-height: 32px;
    margin-top: 28px;
    margin-bottom: 14px;
    gap: 12px;
  }

  .listo-home-row-header:first-child {
    margin-top: 0;
  }

  .listo-home-row-title {
    font-size: 20px;
    line-height: 1.22;
    letter-spacing: -.012em;
    gap: 8px;
  }

  .listo-home-row-title__arrow {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }

  .listo-home-row-title__arrow svg {
    width: 15px;
    height: 15px;
  }

  .listo-home-row {
    gap: 14px;
    padding: 0;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .listo-home-row__item {
    width: 38vw;
    max-width: none;
    flex: 0 0 38vw;
    scroll-snap-align: start;
    min-width: 0;
  }

  .listo-home-row__item .listo-card__title {
    font-size: 15px;
    line-height: 1.3;
  }

  .listo-home-row__item .listo-card__price {
    font-size: 14px;
    line-height: 1.35;
  }

  .listo-home-row__item .listo-card__deposit-note {
    font-size: 11px;
    line-height: 1.35;
  }

  /* The shared card component remains untouched; only its Home-row save
     control gets a slightly larger touch target on narrow screens. */
  .listo-home-row__item .listo-card__save {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    padding: 3px;
    box-sizing: border-box;
  }

  .listo-home-row__item .listo-card__save-icon {
    width: 28px;
    height: 28px;
  }

  .listo-home-row__see-all {
    padding: 18px;
    gap: 10px;
  }

  /* Compact contextual promotion: useful, but clearly subordinate to the
     listing content that follows it. */
  .listo-signup-bonus-inline-ad,
  .listo-referral-inline-ad {
    min-height: 82px;
    margin-bottom: 16px;
    padding: 12px 13px 12px 14px;
    gap: 11px;
    border-radius: 18px;
  }

  .listo-signup-bonus-inline-ad__icon,
  .listo-referral-inline-ad__icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 34px;
  }

  .listo-signup-bonus-inline-ad__copy,
  .listo-referral-inline-ad__copy {
    gap: 3px;
  }

  .listo-signup-bonus-inline-ad__headline,
  .listo-referral-inline-ad__headline {
    font-size: 16px;
    line-height: 1.2;
  }

  .listo-signup-bonus-inline-ad__subtext,
  .listo-referral-inline-ad__subtext {
    font-size: 12px;
    line-height: 1.3;
  }

  .listo-signup-bonus-inline-ad__arrow,
  .listo-referral-inline-ad__arrow {
    font-size: 26px;
  }

  /* Keep the transparency message readable without making it feel like a
     second navigation bar above the fixed mobile dock. */
  body > #listo-price-transparency-notice {
    left: 50% !important;
    bottom: 80px !important;
    width: max-content;
    max-width: calc(100vw - 32px);
    min-height: 46px;
    box-sizing: border-box;
    padding: 0 14px 0 10px;
    gap: 8px;
    border-radius: 14px;
  }

  body > #listo-price-transparency-notice .listo-price-transparency-notice__icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 9px;
  }

  body > #listo-price-transparency-notice .listo-price-transparency-notice__icon svg {
    width: 17px;
    height: 17px;
  }

  body > #listo-price-transparency-notice .listo-price-transparency-notice__text {
    font-size: 12px;
    line-height: 1.25;
    white-space: normal;
  }
}

@media (max-width: 380px) {
  .listo-homepage-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  .listo-home-row__item {
    width: 38vw;
    flex-basis: 38vw;
  }

  .listo-home-row-title {
    font-size: 19px;
  }

  .listo-signup-bonus-inline-ad,
  .listo-referral-inline-ad {
    min-height: 78px;
    gap: 9px;
    padding-left: 12px;
    padding-right: 11px;
  }

  .listo-signup-bonus-inline-ad__icon,
  .listo-referral-inline-ad__icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 31px;
  }

  .listo-signup-bonus-inline-ad__headline,
  .listo-referral-inline-ad__headline {
    font-size: 15px;
  }

  .listo-signup-bonus-inline-ad__subtext,
  .listo-referral-inline-ad__subtext {
    font-size: 11.5px;
  }
}

/* NEXT989 — Staycation Bookings operational workspace refinement.
 * Scoped to the Host Staycation Bookings page; preserves existing booking hooks. */
.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused {
  margin-top: 14px;
}
.listo-host-staycation-bookings-app .listo-host-bookings-intro {
  margin: 0 0 20px;
  align-items: flex-start;
}
.listo-host-staycation-bookings-app .listo-host-bookings-intro__summary {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}
.listo-host-staycation-bookings-app .listo-host-bookings-attention-summary,
.listo-host-staycation-bookings-app .listo-host-bookings-all-clear {
  min-width: min(360px, 100%);
  box-sizing: border-box;
  border-radius: 14px;
  box-shadow: none;
}
.listo-host-staycation-bookings-app .listo-host-bookings-attention-summary {
  background: #fffaf0;
  border-color: #ead9aa;
}
.listo-host-staycation-bookings-app .listo-host-bookings-all-clear {
  background: #eef8ff;
  border-color: #cfe8ff;
  color: var(--ink);
}
.listo-host-staycation-bookings-app .listo-host-bookings-all-clear__icon {
  background: #dff1ff;
  color: #1477c9;
}

.listo-host-staycation-bookings-app .listo-host-bookings-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 26px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.listo-host-staycation-bookings-app .listo-host-bookings-summary__item {
  position: relative;
  min-width: 0;
  appearance: none;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding: 15px 18px 14px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background .15s ease;
}
.listo-host-staycation-bookings-app .listo-host-bookings-summary__item:last-child { border-right: 0; }
.listo-host-staycation-bookings-app .listo-host-bookings-summary__item:hover { background: var(--surface-alt); }
.listo-host-staycation-bookings-app .listo-host-bookings-summary__item:focus-visible {
  outline: 2px solid #2196F3;
  outline-offset: -2px;
}
.listo-host-staycation-bookings-app .listo-host-bookings-summary__item span,
.listo-host-staycation-bookings-app .listo-host-bookings-summary__item small {
  display: block;
}
.listo-host-staycation-bookings-app .listo-host-bookings-summary__item span {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}
.listo-host-staycation-bookings-app .listo-host-bookings-summary__item strong {
  display: block;
  margin: 4px 0 1px;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.02em;
}
.listo-host-staycation-bookings-app .listo-host-bookings-summary__item small {
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.35;
}
.listo-host-staycation-bookings-app .listo-host-bookings-summary__item--attention.listo-host-bookings-summary__item--has-value span,
.listo-host-staycation-bookings-app .listo-host-bookings-summary__item--attention.listo-host-bookings-summary__item--has-value strong { color: #9a6810; }
.listo-host-staycation-bookings-app .listo-host-bookings-summary__item--empty strong { color: var(--ink-muted); }

.listo-host-staycation-bookings-app .listo-host-bookings-controls {
  margin: 0 0 26px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border);
}
.listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filters {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter-group {
  gap: 18px;
}
.listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter {
  position: relative;
  padding: 7px 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 750;
}
.listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter:hover {
  background: transparent;
  color: var(--ink);
}
.listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter.is-active {
  background: transparent;
  color: var(--ink);
}
.listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13px;
  height: 2px;
  border-radius: 2px;
  background: #2196F3;
}
.listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter-select {
  margin-left: auto;
  gap: 8px;
}
.listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter-select span {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 700;
}
.listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter-select select {
  min-width: 190px;
  padding: 8px 30px 8px 10px;
  border-radius: 9px;
  font-size: 12px;
}

.listo-host-staycation-bookings-app .listo-host-bookings-request-section,
.listo-host-staycation-bookings-app .listo-host-bookings-all-section {
  margin-top: 0;
}
.listo-host-staycation-bookings-app .listo-host-bookings-request-section {
  margin-bottom: 30px;
}
.listo-host-staycation-bookings-app .listo-host-bookings-request-section > h2,
.listo-host-staycation-bookings-app .listo-host-bookings-section-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.listo-host-staycation-bookings-app .listo-host-bookings-request-section > .listo-caption,
.listo-host-staycation-bookings-app .listo-host-bookings-section-heading .listo-caption {
  margin: 5px 0 14px;
  font-size: 12px;
}
.listo-host-staycation-bookings-app .listo-host-bookings-request-grid,
.listo-host-staycation-bookings-app .listo-host-bookings-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card {
  border-color: #ead9aa;
  background: #fffdf8;
}
.listo-host-staycation-bookings-app .listo-host-bookings-table-head { display: none; }
.listo-host-staycation-bookings-app .listo-host-bookings-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card,
.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card {
  position: relative;
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card:hover,
.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card:hover {
  border-color: rgba(33,150,243,.28);
  box-shadow: 0 5px 16px rgba(15,23,42,.045);
}
.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card__photo,
.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__photo {
  width: 148px;
  min-width: 148px;
  height: 116px;
  border-radius: 10px;
}
.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card__photo:empty::after,
.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__photo:empty::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--surface-alt);
}
.listo-host-staycation-bookings-app .listo-host-bookings-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 18px;
  align-content: start;
  min-width: 0;
}
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > * { min-width: 0; }
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > a,
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > .listo-host-booking-card__kicker,
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > .listo-host-booking-request-timer,
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > .listo-booking-request-actions,
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > .listo-field-error {
  grid-column: 1;
}
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > .listo-host-booking-card__kicker { grid-row: 1; }
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > a { grid-row: 2; }
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > .listo-host-booking-request-timer { grid-row: 3; }
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > .listo-booking-request-actions { grid-row: 4; }
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > .listo-field-error { grid-row: 5; }
.listo-host-staycation-bookings-app .listo-host-booking-card__kicker {
  margin-bottom: 4px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.listo-host-staycation-bookings-app .listo-host-booking-card__kicker--request,
.listo-host-staycation-bookings-app .listo-host-booking-card__kicker--pending { color: #9a6810; }
.listo-host-staycation-bookings-app .listo-host-booking-card__kicker--upcoming { color: #1477c9; }
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > a { text-decoration: none !important; color: inherit; }
.listo-host-staycation-bookings-app .listo-host-bookings-card__body .listo-trip-card__title {
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.28;
}
.listo-host-staycation-bookings-app .listo-host-bookings-card__body .listo-caption {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
}
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > a > div:last-child { margin-top: 9px !important; }
.listo-host-staycation-bookings-app .listo-host-bookings-card__body .listo-status-badge {
  margin: 2px 5px 2px 0;
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1.25;
}
.listo-host-staycation-bookings-app .listo-host-booking-card__primary-action {
  grid-column: 2;
  grid-row: 1 / span 5;
  align-self: center;
  width: 118px;
}
.listo-host-staycation-bookings-app .listo-host-booking-open-btn {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  font-size: 12px;
  white-space: nowrap;
  text-align: center;
}
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > .listo-v745-host-payment-actions,
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > .listo-host-refund-action,
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > div[style*="display:flex"] {
  grid-column: 1 / -1;
}
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > .listo-v745-host-payment-actions,
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > .listo-host-refund-action { margin-top: 12px !important; }
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > .listo-field-error { margin-top: 5px; }
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > div[style*="display:flex"] { margin-top: 12px !important; }
.listo-host-staycation-bookings-app .listo-host-bookings-card__body > div[style*="display:flex"] .listo-btn { padding: 7px 10px; font-size: 12px; }
.listo-host-staycation-bookings-app .listo-booking-request-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.listo-host-staycation-bookings-app .listo-booking-request-actions .listo-btn {
  min-width: 88px;
  padding: 8px 13px;
  font-size: 12px;
}
.listo-host-staycation-bookings-app .listo-host-booking-request-timer {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 11px;
}
.listo-host-staycation-bookings-app .listo-host-booking-request-timer strong { color: #9a6810; font-size: 12px; }

.listo-host-staycation-bookings-app .listo-booking-detail-drawer {
  width: min(460px, 100%);
  padding: 30px 28px 34px;
  box-shadow: -18px 0 44px rgba(15,23,42,.12);
}
.listo-host-staycation-bookings-app .listo-booking-detail-drawer h2 {
  font-size: 24px;
  letter-spacing: -.02em;
}
.listo-host-staycation-bookings-app .listo-booking-detail-drawer__listing {
  margin-top: 4px;
  font-size: 12px;
}
.listo-host-staycation-bookings-app .listo-booking-detail-drawer__section { margin-top: 22px; padding-top: 18px; }
.listo-host-staycation-bookings-app .listo-booking-detail-drawer__actions { gap: 8px; }

@media (max-width: 900px) {
  .listo-host-staycation-bookings-app .listo-host-bookings-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .listo-host-staycation-bookings-app .listo-host-bookings-summary__item:nth-child(2) { border-right: 0; }
  .listo-host-staycation-bookings-app .listo-host-bookings-summary__item:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filters { align-items: flex-start; }
}

@media (max-width: 720px) {
  .listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused { margin-top: 8px; }
  .listo-host-staycation-bookings-app .listo-host-bookings-intro { margin-bottom: 14px; }
  .listo-host-staycation-bookings-app .listo-host-bookings-intro__summary { margin-top: 0; }
  .listo-host-staycation-bookings-app .listo-host-bookings-attention-summary,
  .listo-host-staycation-bookings-app .listo-host-bookings-all-clear { min-width: 0; width: 100%; }
  .listo-host-staycation-bookings-app .listo-host-bookings-summary {
    display: flex;
    gap: 0;
    margin: 0 -1px 18px;
    overflow-x: auto;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .listo-host-staycation-bookings-app .listo-host-bookings-summary::-webkit-scrollbar { display: none; }
  .listo-host-staycation-bookings-app .listo-host-bookings-summary__item {
    flex: 0 0 142px;
    padding: 13px 14px 12px;
    border-right: 1px solid var(--border) !important;
    border-bottom: 0 !important;
  }
  .listo-host-staycation-bookings-app .listo-host-bookings-summary__item strong { font-size: 21px; }
  .listo-host-staycation-bookings-app .listo-host-bookings-summary__item small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .listo-host-staycation-bookings-app .listo-host-bookings-controls {
    margin-bottom: 20px;
    padding-bottom: 10px;
  }
  .listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filters {
    display: block;
  }
  .listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    width: 100%;
    overflow-x: auto;
    padding: 0 1px 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter-group::-webkit-scrollbar { display: none; }
  .listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter { flex: 0 0 auto; white-space: nowrap; }
  .listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter.is-active::after { bottom: -3px; }
  .listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter-select {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    margin: 12px 0 0;
  }
  .listo-host-staycation-bookings-app .listo-host-bookings-controls .listo-bookings-filter-select select { width: 100%; min-width: 0; }
  .listo-host-staycation-bookings-app .listo-host-bookings-section-heading { align-items: flex-start; margin-bottom: 12px; }
  .listo-host-staycation-bookings-app .listo-host-bookings-request-section > h2,
  .listo-host-staycation-bookings-app .listo-host-bookings-section-heading h2 { font-size: 18px; }
  .listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card,
  .listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 11px;
    padding: 9px;
    border-radius: 13px;
  }
  .listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card__photo,
  .listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__photo {
    width: 78px;
    min-width: 78px;
    height: 82px;
    border-radius: 8px;
  }
  .listo-host-staycation-bookings-app .listo-host-bookings-card__body {
    display: block;
  }
  .listo-host-staycation-bookings-app .listo-host-bookings-card__body > a { display: block; }
  .listo-host-staycation-bookings-app .listo-host-booking-card__primary-action {
    width: auto;
    margin-top: 10px;
  }
  .listo-host-staycation-bookings-app .listo-host-booking-open-btn { width: auto; min-height: 40px; padding: 9px 13px; }
  .listo-host-staycation-bookings-app .listo-host-bookings-card__body .listo-trip-card__title { font-size: 15px; }
  .listo-host-staycation-bookings-app .listo-host-bookings-card__body .listo-caption { font-size: 11px; }
  .listo-host-staycation-bookings-app .listo-host-booking-request-timer { display: flex; flex-wrap: wrap; gap: 3px 7px; }
  .listo-host-staycation-bookings-app .listo-booking-request-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .listo-host-staycation-bookings-app .listo-booking-request-actions .listo-btn { width: 100%; min-width: 0; min-height: 40px; }
  .listo-host-staycation-bookings-app .listo-host-bookings-card__body > div[style*="display:flex"] { display: grid !important; grid-template-columns: 1fr; }
  .listo-host-staycation-bookings-app .listo-host-bookings-card__body > div[style*="display:flex"] .listo-btn { width: 100%; }
  .listo-host-staycation-bookings-app .listo-host-refund-action,
  .listo-host-staycation-bookings-app .listo-v745-host-payment-actions { padding: 11px !important; border-radius: 11px !important; }
  .listo-host-staycation-bookings-app .listo-booking-detail-drawer {
    width: 100%;
    height: min(92dvh, 760px);
    top: auto;
    bottom: 0;
    border-radius: 18px 18px 0 0;
    padding: 22px 18px calc(28px + env(safe-area-inset-bottom));
    transform: translateY(100%);
  }
  .listo-host-staycation-bookings-app .listo-booking-detail-overlay.is-open .listo-booking-detail-drawer { transform: translateY(0); }
  .listo-host-staycation-bookings-app .listo-booking-detail-drawer h2 { font-size: 21px; }
  .listo-host-staycation-bookings-app .listo-booking-detail-row { flex-direction: row; gap: 16px; }
  .listo-host-staycation-bookings-app .listo-booking-detail-row strong { max-width: 60%; text-align: right; }
  .listo-host-staycation-bookings-app .listo-booking-detail-drawer__actions { grid-template-columns: 1fr 1fr; }
  .listo-host-staycation-bookings-app .listo-booking-detail-drawer__actions .listo-btn:last-child { grid-column: 1 / -1; }
  .listo-host-staycation-bookings-app { padding-bottom: 88px; }
}

@media (max-width: 390px) {
  .listo-host-staycation-bookings-app .listo-host-bookings-summary__item { flex-basis: 132px; padding-left: 12px; padding-right: 12px; }
  .listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card,
  .listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card { grid-template-columns: 68px minmax(0,1fr); gap: 9px; }
  .listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-trip-card__photo,
  .listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__photo { width: 68px; min-width: 68px; height: 72px; }
  .listo-host-staycation-bookings-app .listo-host-booking-open-btn { width: 100%; }
}

/* ============================================================================
   NEXT991 — Staycation Bookings reservation-row refinement
   ---------------------------------------------------------------------------
   Presentation-only refinement. The reservation list is an operational table,
   not an expanded card. Existing booking hooks/actions remain intact.
   ============================================================================ */
@media (min-width: 901px) {
  body.listo-host-staycation-bookings-app .listo-host-bookings-all-section .listo-host-bookings-section-heading {
    margin-bottom: 10px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-all-section .listo-host-bookings-section-heading h2 {
    font-size: 19px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-all-section .listo-host-bookings-section-heading p {
    margin-top: 4px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-table-head {
    display: grid !important;
    grid-template-columns: 84px minmax(220px, 1.65fr) minmax(145px, 1.05fr) minmax(150px, 1.1fr) minmax(175px, 1.15fr) 128px !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-top: 1px solid #E3EAF0 !important;
    border-bottom: 1px solid #E3EAF0 !important;
    color: #7A8790 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-booking-row {
    display: grid !important;
    grid-template-columns: 84px minmax(220px, 1.65fr) minmax(145px, 1.05fr) minmax(150px, 1.1fr) minmax(175px, 1.15fr) 128px !important;
    grid-template-areas: "photo listing stay guest status actions" !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 92px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #E8EDF1 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-booking-row:hover {
    background: #FAFCFE !important;
    border-color: #E8EDF1 !important;
    box-shadow: none !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__photo {
    grid-area: photo !important;
    width: 84px !important;
    min-width: 84px !important;
    height: 64px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__listing,
  body.listo-host-staycation-bookings-app .listo-host-booking-row__stay,
  body.listo-host-staycation-bookings-app .listo-host-booking-row__guest,
  body.listo-host-staycation-bookings-app .listo-host-booking-row__status,
  body.listo-host-staycation-bookings-app .listo-host-booking-row__actions {
    min-width: 0 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__listing { grid-area: listing !important; }
  body.listo-host-staycation-bookings-app .listo-host-booking-row__stay { grid-area: stay !important; }
  body.listo-host-staycation-bookings-app .listo-host-booking-row__guest { grid-area: guest !important; }
  body.listo-host-staycation-bookings-app .listo-host-booking-row__status { grid-area: status !important; }
  body.listo-host-staycation-bookings-app .listo-host-booking-row__actions { grid-area: actions !important; }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__listing-link {
    display: block !important;
    color: inherit !important;
    text-decoration: none !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__listing .listo-trip-card__title {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 750 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__stay span,
  body.listo-host-staycation-bookings-app .listo-host-booking-row__guest strong {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 650 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__stay small,
  body.listo-host-staycation-bookings-app .listo-host-booking-row__guest span {
    display: block !important;
    margin-top: 4px !important;
    color: var(--ink-muted) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__guest strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__guest span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__status-line {
    min-height: 25px !important;
    display: flex !important;
    align-items: center !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__status .listo-status-badge {
    margin: 0 !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__payment {
    margin-top: 6px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__payment strong {
    display: block !important;
    color: var(--ink) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__payment small {
    display: block !important;
    margin-top: 2px !important;
    color: var(--ink-muted) !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__actions > .listo-host-booking-open-btn {
    width: 100% !important;
    min-height: 34px !important;
    padding: 8px 9px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__secondary-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 3px 6px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__secondary-actions .listo-btn {
    min-height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #647480 !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    font-weight: 650 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__secondary-actions .listo-btn:hover,
  body.listo-host-staycation-bookings-app .listo-host-booking-row__secondary-actions .listo-btn:focus-visible {
    color: #2196F3 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__secondary-actions .listo-host-cancel-open-btn,
  body.listo-host-staycation-bookings-app .listo-host-booking-row__secondary-actions .listo-host-cancel-withdraw-btn {
    color: var(--error) !important;
  }

  /* Payment confirmation is an exceptional operational action. Keep it compact
     beneath the row rather than turning every booking into a payment card. */
  body.listo-host-staycation-bookings-app .listo-host-booking-row__payment-action {
    grid-column: 2 / -1 !important;
    margin: 0 !important;
    padding: 9px 0 2px !important;
    border: 0 !important;
    border-top: 1px solid #E8EDF1 !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__payment-action .listo-caption {
    margin-right: auto !important;
    font-size: 11px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__payment-action .listo-btn {
    min-height: 32px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
  }

  /* Refund/cancellation exception stays prominent, but is no longer styled as
     part of the normal reservation row. */
  body.listo-host-staycation-bookings-app .listo-host-booking-row .listo-host-refund-action {
    grid-column: 2 / -1 !important;
    margin: 0 !important;
  }

  /* The old card-level action area is no longer rendered in the main row. */
  body.listo-host-staycation-bookings-app .listo-host-booking-row .listo-host-booking-card__primary-action,
  body.listo-host-staycation-bookings-app .listo-host-booking-row .listo-host-bookings-card__body {
    display: contents !important;
  }
}

@media (max-width: 900px) {
  body.listo-host-staycation-bookings-app .listo-host-bookings-table-head {
    display: none !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-areas:
      "photo listing"
      "photo stay"
      "photo guest"
      "photo status"
      "actions actions" !important;
    gap: 0 12px !important;
    padding: 14px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #E8EDF1 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__photo {
    grid-area: photo !important;
    width: 72px !important;
    min-width: 72px !important;
    height: 72px !important;
    border-radius: 9px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__listing { grid-area: listing !important; }
  body.listo-host-staycation-bookings-app .listo-host-booking-row__stay { grid-area: stay !important; margin-top: 4px !important; }
  body.listo-host-staycation-bookings-app .listo-host-booking-row__guest { grid-area: guest !important; margin-top: 4px !important; }
  body.listo-host-staycation-bookings-app .listo-host-booking-row__status { grid-area: status !important; margin-top: 7px !important; }
  body.listo-host-staycation-bookings-app .listo-host-booking-row__actions { grid-area: actions !important; margin-top: 12px !important; }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__listing .listo-trip-card__title {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__stay span,
  body.listo-host-staycation-bookings-app .listo-host-booking-row__guest strong {
    font-size: 11.5px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__payment {
    margin-top: 5px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__actions > .listo-host-booking-open-btn {
    width: 100% !important;
    min-height: 38px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__secondary-actions {
    justify-content: flex-start !important;
    margin-top: 5px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__payment-action {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 10px 0 0 !important;
    margin-top: 10px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__payment-action .listo-caption {
    margin-right: 0 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__payment-action .listo-btn {
    width: 100% !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row .listo-host-refund-action {
    grid-column: 1 / -1 !important;
    margin-top: 10px !important;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  body.listo-host-staycation-bookings-app .listo-host-bookings-table-head,
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-booking-row {
    grid-template-columns: 64px minmax(150px, 1.45fr) minmax(105px, 1fr) minmax(105px, 1fr) minmax(120px, 1fr) 100px !important;
    gap: 12px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__photo {
    width: 64px !important;
    min-width: 64px !important;
    height: 58px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__listing .listo-trip-card__title {
    font-size: 13px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__stay span,
  body.listo-host-staycation-bookings-app .listo-host-booking-row__guest strong {
    font-size: 11px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__payment strong {
    font-size: 10.5px !important;
  }
}


/*
 * NEXT992 — Staycation Bookings table polish
 * Fixes literal tab-text leakage and tightens the desktop reservation row.
 * Presentation-only; existing booking hooks/actions remain unchanged.
 */
@media (min-width: 1101px) {
  body.listo-host-staycation-bookings-app .listo-host-bookings-table-head,
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-booking-row {
    grid-template-columns: 84px minmax(210px, 1.55fr) minmax(150px, 1.05fr) minmax(150px, 1.05fr) minmax(185px, 1.2fr) 176px !important;
    gap: 16px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-booking-row {
    min-height: 88px !important;
    padding: 11px 14px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__actions {
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__actions > .listo-host-booking-open-btn {
    width: auto !important;
    min-width: 122px !important;
    min-height: 34px !important;
    padding: 7px 11px !important;
    font-size: 11px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__secondary-actions {
    justify-content: flex-end !important;
    gap: 2px 9px !important;
    width: 100% !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__secondary-actions .listo-btn {
    font-size: 10px !important;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  body.listo-host-staycation-bookings-app .listo-host-bookings-table-head,
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-booking-row {
    grid-template-columns: 64px minmax(145px, 1.35fr) minmax(105px, 1fr) minmax(110px, 1fr) minmax(135px, 1.05fr) 150px !important;
    gap: 12px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__actions > .listo-host-booking-open-btn {
    width: auto !important;
    min-width: 112px !important;
  }
}


/*
 * NEXT993 — Staycation Bookings row hierarchy refinement
 * Keep fully confirmed rows focused on booking status; payment detail belongs
 * in Booking Details. Rebalance desktop columns so Actions never dominates.
 */
@media (min-width: 1101px) {
  body.listo-host-staycation-bookings-app .listo-host-bookings-table-head,
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-booking-row {
    grid-template-columns: 72px minmax(180px, 1.4fr) minmax(140px, 1fr) minmax(135px, 1fr) minmax(145px, .95fr) 132px !important;
    gap: 14px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-booking-row {
    min-height: 82px !important;
    padding: 10px 12px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__photo {
    width: 72px !important;
    min-width: 72px !important;
    height: 58px !important;
    border-radius: 9px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__listing .listo-trip-card__title {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__stay span,
  body.listo-host-staycation-bookings-app .listo-host-booking-row__guest strong {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__status-line {
    min-height: 28px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__actions {
    min-width: 0 !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__actions > .listo-host-booking-open-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 132px !important;
    min-height: 34px !important;
    padding: 7px 8px !important;
    font-size: 10.5px !important;
    align-self: flex-end !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__secondary-actions {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    gap: 2px 7px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__secondary-actions .listo-btn {
    font-size: 9.5px !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  body.listo-host-staycation-bookings-app .listo-host-bookings-table-head,
  body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-booking-row {
    grid-template-columns: 60px minmax(140px, 1.3fr) minmax(100px, 1fr) minmax(105px, 1fr) minmax(120px, 1fr) 116px !important;
    gap: 10px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__listing .listo-trip-card__title {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-booking-row__actions > .listo-host-booking-open-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 116px !important;
    font-size: 10px !important;
  }
}


/* NEXT994 — Staycation Bookings action simplification.
 * Reservation rows expose only the primary navigation action. Secondary
 * actions belong in Booking Details. Listing titles are intentionally quieter
 * so the operational columns have more room.
 */
@media (min-width: 901px) {
  body.listo-host-staycation-bookings-app .listo-host-booking-row__actions {
    align-items: flex-end !important;
    justify-content: center !important;
  }
  body.listo-host-staycation-bookings-app .listo-host-booking-row__actions > .listo-host-booking-open-btn {
    width: auto !important;
    min-width: 122px !important;
    max-width: 132px !important;
  }
  body.listo-host-staycation-bookings-app .listo-host-booking-row__listing .listo-trip-card__title {
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 680 !important;
  }
  body.listo-host-staycation-bookings-app .listo-host-booking-row__secondary-actions {
    display: none !important;
  }
}
@media (max-width: 900px) {
  body.listo-host-staycation-bookings-app .listo-host-booking-row__secondary-actions {
    display: none !important;
  }
  body.listo-host-staycation-bookings-app .listo-host-booking-row__listing .listo-trip-card__title {
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 680 !important;
  }
}

/* NEXT996 — Staycation booking detail workspace refinement. */
.listo-host-staycation-bookings-app .listo-booking-detail-drawer__badges #listo-booking-detail-payment { display:none; }
.listo-host-staycation-bookings-app .listo-booking-detail-payment-block + .listo-booking-detail-payment-block { margin-top:18px; }
.listo-host-staycation-bookings-app .listo-booking-detail-timeline { display:grid; gap:12px; }
.listo-host-staycation-bookings-app .listo-booking-detail-timeline__item { position:relative; padding-left:15px; border-left:2px solid var(--border); }
.listo-host-staycation-bookings-app .listo-booking-detail-timeline__item::before { content:""; position:absolute; left:-5px; top:3px; width:7px; height:7px; border-radius:50%; background:var(--brand); }
.listo-host-staycation-bookings-app .listo-booking-detail-timeline__item strong { display:block; font-size:13px; }
.listo-host-staycation-bookings-app .listo-booking-detail-timeline__item small { display:block; margin-top:3px; color:var(--ink-muted); font-size:12px; }
.listo-host-staycation-bookings-app .listo-booking-detail-drawer__actions [data-drawer-action="complaint"][disabled] { opacity:.52; cursor:not-allowed; }


/* NEXT997 — Staycation Bookings: center the sole row action beneath the Actions header. */
body.listo-host-staycation-bookings-app .listo-host-bookings-main-grid .listo-host-booking-row {
  grid-template-columns: 84px minmax(190px, 1.45fr) minmax(145px, 1.05fr) minmax(150px, 1.05fr) minmax(140px, 0.95fr) 150px !important;
}
body.listo-host-staycation-bookings-app .listo-host-booking-row__listing .listo-trip-card__title {
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}
body.listo-host-staycation-bookings-app .listo-host-booking-row__actions {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
body.listo-host-staycation-bookings-app .listo-host-booking-row__actions > .listo-host-booking-open-btn {
  width: auto !important;
  min-width: 136px !important;
  max-width: 150px !important;
}


/* NEXT1000 — Staycation Calendar & Pricing production UI pass.
 * Presentation-only refinements scoped to this workspace. Existing selectors,
 * AJAX actions, data attributes, pricing rules and navigation remain intact.
 */
.listo-calendar-pricing-page {
    max-width: 1200px;
    color: #14232F;
}

.listo-calendar-pricing-page .listo-host-app-page__header {
    margin-bottom: 24px !important;
}

.listo-calendar-pricing-page .listo-host-app-page__header h1 {
    color: #14232F !important;
}

.listo-calendar-pricing-page .listo-host-app-page__header p {
    color: #70818D !important;
}

/* Listing context reads as one operational surface rather than two unrelated cards. */
.listo-calendar-pricing-page .listo-cp-listing-bar {
    display: grid;
    grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
    gap: 0;
    margin-bottom: 26px;
    padding: 4px;
    background: #fff;
    border: 1px solid #E2E8EC;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20,35,47,.03);
}

.listo-calendar-pricing-page .listo-cp-listing-selector,
.listo-calendar-pricing-page .listo-cp-listing-summary {
    min-width: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}

.listo-calendar-pricing-page .listo-cp-listing-selector {
    padding: 16px 18px;
    border-right: 1px solid #E7ECEF;
}

.listo-calendar-pricing-page .listo-cp-listing-selector__heading {
    margin-bottom: 8px;
}

.listo-calendar-pricing-page .listo-cp-listing-selector__heading label {
    margin-bottom: 2px;
    color: #33434E;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
}

.listo-calendar-pricing-page .listo-cp-listing-selector__heading span {
    display: block;
    color: #83909A;
    font-size: 11px;
}

.listo-calendar-pricing-page .listo-cp-listing-selector select {
    height: 46px;
    border-color: #D8E0E5;
    border-radius: 9px;
    color: #172833;
    font-size: 14px;
    font-weight: 650;
    outline: none;
}

.listo-calendar-pricing-page .listo-cp-listing-selector select:focus {
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33,150,243,.12);
}

.listo-calendar-pricing-page .listo-cp-listing-summary {
    padding: 12px 16px;
    gap: 14px;
}

.listo-calendar-pricing-page .listo-cp-listing-summary img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
}

.listo-calendar-pricing-page .listo-cp-listing-summary__name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.listo-calendar-pricing-page .listo-cp-listing-summary__name-row strong {
    color: #172833;
    font-size: 14px;
}

.listo-calendar-pricing-page .listo-cp-listing-status {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.listo-calendar-pricing-page .listo-cp-listing-status--published {
    background: #E8F7F1;
    color: #17745E;
}

.listo-calendar-pricing-page .listo-cp-listing-status--unpublished {
    background: #F1F3F5;
    color: #66737C;
}

.listo-calendar-pricing-page .listo-cp-listing-summary__limits {
    display: grid;
    grid-template-columns: repeat(2, minmax(90px,1fr));
    gap: 18px;
    min-width: 210px;
}

.listo-calendar-pricing-page .listo-cp-listing-summary__limits > div {
    padding-left: 16px;
    border-left: 1px solid #E7ECEF;
}

.listo-calendar-pricing-page .listo-cp-listing-summary__limits span,
.listo-calendar-pricing-page .listo-cp-listing-status-note {
    color: #7A8993;
    font-size: 10px;
    line-height: 1.35;
}

.listo-calendar-pricing-page .listo-cp-listing-summary__limits b {
    margin-top: 3px;
    color: #263844;
    font-size: 14px;
}

/* Section navigation is deliberately a line navigation, not a row of pills. */
.listo-calendar-pricing-page .listo-cp-tabs {
    gap: 0;
    margin: 0 0 22px;
    padding-left: 0;
    border-bottom: 1px solid #E1E7EA;
}

.listo-calendar-pricing-page .listo-cp-tabs a {
    position: relative;
    padding: 11px 16px 12px;
    color: #667680;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 2px solid transparent;
}

.listo-calendar-pricing-page .listo-cp-tabs a:first-child {
    padding-left: 2px;
}

.listo-calendar-pricing-page .listo-cp-tabs a.is-active {
    color: #2196F3;
    border-color: #2196F3;
}

.listo-calendar-pricing-page .listo-cp-tabs a:focus-visible {
    outline: 2px solid #2196F3;
    outline-offset: -2px;
    border-radius: 4px;
}

/* Calendar is the primary workspace. */
.listo-calendar-pricing-page .listo-cp-calendar-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .72fr);
    gap: 20px;
    margin-bottom: 34px;
}

.listo-calendar-pricing-page .listo-cp-calendar-card,
.listo-calendar-pricing-page .listo-cp-date-card {
    border: 1px solid #DEE6EA;
    border-radius: 14px;
    box-shadow: 0 2px 7px rgba(20,35,47,.035);
}

.listo-calendar-pricing-page .listo-cp-calendar-card {
    padding: 20px;
}

.listo-calendar-pricing-page .listo-cp-calendar-heading {
    margin-bottom: 16px;
}

.listo-calendar-pricing-page .listo-cp-calendar-heading h2 {
    color: #172833;
    font-size: 21px;
    letter-spacing: -.015em;
}

.listo-calendar-pricing-page .listo-cp-calendar-heading p {
    color: #81909A;
    font-size: 12px;
}

.listo-calendar-pricing-page .listo-cp-calendar-nav {
    gap: 6px;
}

.listo-calendar-pricing-page .listo-cp-calendar-nav a {
    width: 36px;
    height: 36px;
    border-color: #D9E1E5;
    border-radius: 9px;
    color: #30414B;
    background: #fff;
}

.listo-calendar-pricing-page .listo-cp-calendar-nav a.today {
    width: auto;
    padding: 0 11px;
    color: #2196F3;
    font-size: 12px;
    font-weight: 800;
}

.listo-calendar-pricing-page .listo-cp-calendar-nav a:hover {
    border-color: #AFCFE7;
    background: #F7FBFE;
}

.listo-calendar-pricing-page .listo-cp-weekdays,
.listo-calendar-pricing-page .listo-cp-grid {
    gap: 5px;
}

.listo-calendar-pricing-page .listo-cp-weekdays span {
    padding: 6px 0;
    color: #81909A;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .02em;
}

.listo-calendar-pricing-page .listo-cp-day {
    min-height: 76px;
    padding: 9px 9px 8px;
    border: 1px solid #E0E7EA;
    border-radius: 9px;
    color: #243640;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.listo-calendar-pricing-page .listo-cp-day:hover:not(:disabled) {
    border-color: #AFCFE7;
    box-shadow: 0 2px 7px rgba(33,150,243,.08);
}

.listo-calendar-pricing-page .listo-cp-day span {
    font-size: 13px;
    font-weight: 800;
}

.listo-calendar-pricing-page .listo-cp-day small {
    margin-top: 8px;
    color: #456372;
    font-size: 10px;
    font-weight: 650;
}

.listo-calendar-pricing-page .listo-cp-day.is-available {
    background: #F2FAF7;
    border-color: #D8ECE5;
    color: #21433B;
}

.listo-calendar-pricing-page .listo-cp-day.is-available small {
    color: #2E7565;
}

.listo-calendar-pricing-page .listo-cp-day.is-booked {
    background: #F0F3F5;
    border-color: #D9E0E4;
    color: #56636B;
}

.listo-calendar-pricing-page .listo-cp-day.is-special {
    background: #F8F3FA;
    border-color: #E7DCEF;
    color: #5B4168;
}

.listo-calendar-pricing-page .listo-cp-day.is-special small {
    color: #79558A;
}

.listo-calendar-pricing-page .listo-cp-day.is-blocked {
    background: #FFF4F4;
    border-color: #F0D5D7;
    color: #773B40;
}

.listo-calendar-pricing-page .listo-cp-day.is-today:not(.is-selected) {
    box-shadow: inset 0 0 0 2px #2196F3;
}

.listo-calendar-pricing-page .listo-cp-day.is-selected {
    background: #2196F3;
    border-color: #2196F3;
    color: #fff;
    box-shadow: 0 2px 7px rgba(33,150,243,.18);
}

.listo-calendar-pricing-page .listo-cp-day.is-selected small {
    color: #EAF6FF;
}

.listo-calendar-pricing-page .listo-cp-day:disabled {
    cursor: default;
}

.listo-calendar-pricing-page .listo-cp-legend {
    margin-top: 17px;
    gap: 12px 20px;
    color: #697983;
    font-size: 11px;
    font-weight: 600;
}

.listo-calendar-pricing-page .listo-cp-legend i {
    width: 10px;
    height: 10px;
    border: 1px solid rgba(20,35,47,.10);
}

.listo-calendar-pricing-page .listo-cp-legend i.available { background: #CDE9DE; }
.listo-calendar-pricing-page .listo-cp-legend i.booked { background: #C9D0D5; }
.listo-calendar-pricing-page .listo-cp-legend i.special { background: #E0CFE8; }
.listo-calendar-pricing-page .listo-cp-legend i.blocked { background: #EFC4C8; }

/* Date inspector: operational panel, not a second generic card. */
.listo-calendar-pricing-page .listo-cp-date-card {
    top: 88px;
    padding: 20px;
}

.listo-calendar-pricing-page .listo-cp-date-card__eyebrow {
    margin-bottom: 10px;
    color: #81909A;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.listo-calendar-pricing-page .listo-cp-date-card__top {
    justify-content: flex-start;
    margin-bottom: 5px;
}

.listo-calendar-pricing-page .listo-cp-status {
    min-height: 23px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .01em;
}

.listo-calendar-pricing-page .listo-cp-status.available { background: #E8F7F1; color: #17745E; }
.listo-calendar-pricing-page .listo-cp-status.booked { background: #EEF1F3; color: #5C6971; }
.listo-calendar-pricing-page .listo-cp-status.special { background: #F2EAF5; color: #70487E; }
.listo-calendar-pricing-page .listo-cp-status.blocked { background: #FFF0F1; color: #A13F45; }

.listo-calendar-pricing-page .listo-cp-date-card h2 {
    margin: 5px 0 20px;
    color: #172833;
    font-size: 22px;
    letter-spacing: -.02em;
}

.listo-calendar-pricing-page .listo-cp-date-card label {
    margin-bottom: 7px;
    color: #53646E;
    font-size: 11px;
    font-weight: 800;
}

.listo-calendar-pricing-page .listo-cp-input,
.listo-calendar-pricing-page .listo-cp-date-card select {
    height: 46px;
    margin-bottom: 15px;
    border-color: #D8E0E5;
    border-radius: 9px;
}

.listo-calendar-pricing-page .listo-cp-input:focus-within,
.listo-calendar-pricing-page .listo-cp-date-card select:focus {
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33,150,243,.10);
}

.listo-calendar-pricing-page .listo-cp-input span {
    width: 40px;
    background: #F6F8F9;
    color: #53646E;
}

.listo-calendar-pricing-page .listo-cp-input input {
    color: #172833;
    font-size: 15px;
}

.listo-calendar-pricing-page .listo-cp-date-card .listo-btn {
    min-height: 46px;
    margin-top: 4px;
    border-radius: 9px;
    background: #2196F3;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.listo-calendar-pricing-page .listo-cp-date-card .listo-btn:hover {
    background: #1687E5;
}

.listo-calendar-pricing-page .listo-cp-block-btn {
    min-height: 42px;
    margin-top: 3px;
    padding: 9px 0;
    color: #A13F45;
    font-size: 12px;
    font-weight: 750;
}

.listo-calendar-pricing-page .listo-cp-block-btn:not(:disabled):hover {
    text-decoration: underline;
}

.listo-calendar-pricing-page .listo-cp-info {
    margin-top: 8px;
    padding: 11px 12px;
    border: 1px solid #E2EBF0;
    border-radius: 9px;
    background: #F7FAFC;
    color: #60727D;
    font-size: 11px;
    line-height: 1.5;
}

/* Rules and Settings stay deliberately quieter than the calendar. */
.listo-calendar-pricing-page .listo-cp-rules,
.listo-calendar-pricing-page .listo-cp-settings {
    margin-top: 0;
    padding: 20px;
    border: 1px solid #E2E8EC;
    border-radius: 14px;
    box-shadow: none;
}

.listo-calendar-pricing-page .listo-cp-section-heading {
    margin-bottom: 15px;
}

.listo-calendar-pricing-page .listo-cp-section-heading h2,
.listo-calendar-pricing-page .listo-cp-settings h2 {
    color: #172833;
    font-size: 19px;
}

.listo-calendar-pricing-page .listo-cp-section-heading p,
.listo-calendar-pricing-page .listo-cp-settings-heading p {
    margin: 0;
    color: #7A8993;
    font-size: 12px;
}

.listo-calendar-pricing-page .listo-cp-rule-heading-actions {
    gap: 8px;
}

.listo-calendar-pricing-page .listo-cp-rule-heading-actions .listo-btn {
    min-height: 40px;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
}

.listo-calendar-pricing-page .listo-cp-btn-secondary {
    border-color: #D7E0E5;
    color: #42606F;
    background: #fff;
}

.listo-calendar-pricing-page .listo-cp-btn-secondary:hover {
    border-color: #B9CAD4;
    background: #F7FAFC;
}

.listo-calendar-pricing-page .listo-cp-rule {
    grid-template-columns: minmax(0,1.55fr) minmax(170px,.7fr) auto;
    gap: 18px;
    padding: 14px 16px;
    border-color: #E1E7EA;
    border-radius: 10px;
    box-shadow: none;
}

.listo-calendar-pricing-page .listo-cp-rule strong {
    color: #253A46;
    font-size: 13px;
}

.listo-calendar-pricing-page .listo-cp-rule span,
.listo-calendar-pricing-page .listo-cp-rule b {
    font-size: 12px;
}

.listo-calendar-pricing-page .listo-cp-rule-actions button {
    min-height: 38px;
    border-radius: 8px;
    padding: 7px 11px;
    font-size: 12px;
}

.listo-calendar-pricing-page .listo-cp-rule-actions .listo-edit-action {
    color: #246B9A;
}

.listo-calendar-pricing-page .listo-cp-settings-heading {
    margin-bottom: 15px;
}

.listo-calendar-pricing-page .listo-cp-settings-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 0;
    border-top: 1px solid #E7ECEF;
}

.listo-calendar-pricing-page .listo-cp-settings-grid > div {
    min-height: 0;
    padding: 15px 18px 6px 0;
    background: transparent;
    border-radius: 0;
}

.listo-calendar-pricing-page .listo-cp-settings-grid > div + div {
    padding-left: 18px;
    border-left: 1px solid #E7ECEF;
}

.listo-calendar-pricing-page .listo-cp-settings-grid strong {
    margin-bottom: 5px;
    color: #51636E;
    font-size: 11px;
}

.listo-calendar-pricing-page .listo-cp-settings-grid span {
    color: #253A46;
    font-size: 13px;
}

/* Modal polish without changing any modal behavior or field IDs. */
.listo-calendar-pricing-page .listo-cp-modal__dialog {
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 24px 70px rgba(15,22,24,.18);
}

.listo-calendar-pricing-page .listo-cp-modal__dialog h2 {
    color: #172833;
    font-size: 21px;
}

.listo-calendar-pricing-page .listo-cp-modal__dialog label {
    color: #53646E;
    font-size: 11px;
}

.listo-calendar-pricing-page .listo-cp-modal__dialog input,
.listo-calendar-pricing-page .listo-cp-modal__dialog select {
    border-color: #D8E0E5;
    border-radius: 9px;
}

.listo-calendar-pricing-page .listo-cp-modal__dialog input:focus,
.listo-calendar-pricing-page .listo-cp-modal__dialog select:focus {
    outline: none;
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33,150,243,.10);
}

@media (max-width: 1024px) {
    .listo-calendar-pricing-page .listo-cp-listing-bar {
        grid-template-columns: minmax(260px,.65fr) minmax(0,1.35fr);
    }
    .listo-calendar-pricing-page .listo-cp-listing-summary__limits {
        min-width: 185px;
        gap: 10px;
    }
    .listo-calendar-pricing-page .listo-cp-listing-summary__limits > div + div {
        padding-left: 10px;
    }
    .listo-calendar-pricing-page .listo-cp-calendar-layout {
        grid-template-columns: minmax(0,1.55fr) minmax(285px,.72fr);
        gap: 16px;
    }
}

@media (max-width: 900px) {
    .listo-calendar-pricing-page .listo-cp-listing-bar {
        grid-template-columns: 1fr;
        padding: 4px;
    }
    .listo-calendar-pricing-page .listo-cp-listing-selector {
        border-right: 0;
        border-bottom: 1px solid #E7ECEF;
    }
    .listo-calendar-pricing-page .listo-cp-calendar-layout {
        grid-template-columns: 1fr;
    }
    .listo-calendar-pricing-page .listo-cp-date-card {
        position: static;
    }
}

@media (max-width: 700px) {
    .listo-calendar-pricing-page {
        /* The shared .listo-main canvas already supplies the Host Mode gutter.
         * Do not introduce a second horizontal gutter here. */
        padding-left: 0;
        padding-right: 0;
    }
    .listo-calendar-pricing-page .listo-host-app-page__header {
        margin-bottom: 18px !important;
    }
    .listo-calendar-pricing-page .listo-cp-listing-bar {
        margin-bottom: 20px;
    }
    .listo-calendar-pricing-page .listo-cp-listing-selector {
        padding: 14px;
    }
    .listo-calendar-pricing-page .listo-cp-listing-summary {
        padding: 12px 13px;
    }
    .listo-calendar-pricing-page .listo-cp-listing-summary__limits {
        min-width: 0;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 0;
    }
    .listo-calendar-pricing-page .listo-cp-listing-summary__limits > div {
        padding-left: 12px;
    }
    .listo-calendar-pricing-page .listo-cp-tabs {
        margin-bottom: 18px;
    }
    .listo-calendar-pricing-page .listo-cp-tabs a,
    .listo-calendar-pricing-page .listo-cp-tabs a:first-child {
        flex: 1 1 0;
        min-width: 0;
        min-height: 42px;
        padding: 10px 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 11px;
        line-height: 1.2;
    }
    .listo-calendar-pricing-page .listo-cp-calendar-card {
        padding: 12px;
        border-radius: 12px;
    }
    .listo-calendar-pricing-page .listo-cp-calendar-heading {
        margin-bottom: 11px;
    }
    .listo-calendar-pricing-page .listo-cp-calendar-heading h2 {
        font-size: 19px;
    }
    .listo-calendar-pricing-page .listo-cp-calendar-heading p {
        display: none;
    }
    .listo-calendar-pricing-page .listo-cp-calendar-nav a {
        width: 34px;
        height: 34px;
    }
    .listo-calendar-pricing-page .listo-cp-calendar-nav a.today {
        padding: 0 9px;
        font-size: 10px;
    }
    .listo-calendar-pricing-page .listo-cp-weekdays,
    .listo-calendar-pricing-page .listo-cp-grid {
        gap: 3px;
    }
    .listo-calendar-pricing-page .listo-cp-weekdays span {
        font-size: 9px;
        padding: 5px 0;
    }
    .listo-calendar-pricing-page .listo-cp-day {
        min-height: 62px;
        padding: 7px 3px;
        border-radius: 7px;
    }
    .listo-calendar-pricing-page .listo-cp-day span {
        font-size: 11px;
    }
    .listo-calendar-pricing-page .listo-cp-day small {
        margin-top: 6px;
        font-size: 8px;
    }
    .listo-calendar-pricing-page .listo-cp-legend {
        margin-top: 12px;
        gap: 8px 12px;
        font-size: 9px;
    }
    .listo-calendar-pricing-page .listo-cp-date-card {
        padding: 16px;
        border-radius: 12px;
    }
    .listo-calendar-pricing-page .listo-cp-date-card h2 {
        font-size: 20px;
        margin-bottom: 17px;
    }
    .listo-calendar-pricing-page .listo-cp-input,
    .listo-calendar-pricing-page .listo-cp-date-card select,
    .listo-calendar-pricing-page .listo-cp-date-card .listo-btn {
        min-height: 46px;
        height: 46px;
    }
    .listo-calendar-pricing-page .listo-cp-rules,
    .listo-calendar-pricing-page .listo-cp-settings {
        padding: 16px;
        border-radius: 12px;
    }
    .listo-calendar-pricing-page .listo-cp-section-heading {
        gap: 12px;
        margin-bottom: 14px;
    }
    .listo-calendar-pricing-page .listo-cp-rule-heading-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }
    .listo-calendar-pricing-page .listo-cp-rule-heading-actions .listo-btn {
        width: 100%;
    }
    .listo-calendar-pricing-page .listo-cp-rule {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 13px;
    }
    .listo-calendar-pricing-page .listo-cp-rule-actions {
        width: 100%;
    }
    .listo-calendar-pricing-page .listo-cp-rule-actions button {
        flex: 1 1 0;
    }
    .listo-calendar-pricing-page .listo-cp-settings-grid {
        grid-template-columns: 1fr;
        border-top: 0;
    }
    .listo-calendar-pricing-page .listo-cp-settings-grid > div,
    .listo-calendar-pricing-page .listo-cp-settings-grid > div + div {
        padding: 12px 0;
        border-left: 0;
        border-top: 1px solid #E7ECEF;
    }
    .listo-calendar-pricing-page .listo-cp-settings-grid > div:first-child {
        border-top: 0;
    }
}

@media (max-width: 390px) {
    .listo-calendar-pricing-page {
        /* Keep the same shared Host canvas width at narrow breakpoints. */
        padding-left: 0;
        padding-right: 0;
    }
    .listo-calendar-pricing-page .listo-cp-listing-summary img {
        width: 50px;
        height: 50px;
    }
    .listo-calendar-pricing-page .listo-cp-listing-summary__name-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
    .listo-calendar-pricing-page .listo-cp-calendar-card {
        padding: 9px;
    }
    .listo-calendar-pricing-page .listo-cp-day {
        min-height: 57px;
        padding: 6px 2px;
    }
    .listo-calendar-pricing-page .listo-cp-day span {
        font-size: 10px;
    }
    .listo-calendar-pricing-page .listo-cp-day small {
        font-size: 7px;
        margin-top: 5px;
    }
    .listo-calendar-pricing-page .listo-cp-legend {
        gap: 7px 9px;
        font-size: 8px;
    }
    .listo-calendar-pricing-page .listo-cp-tabs a,
    .listo-calendar-pricing-page .listo-cp-tabs a:first-child {
        font-size: 10px;
    }
}

/* NEXT1001 — Calendar & Pricing mobile composition refinement
 * Focused correction based on mobile review of NEXT1000.
 * No JavaScript, PHP, AJAX, data, pricing, booking, or navigation logic changes.
 */
@media (max-width: 700px) {
    /* Keep the floating Host dock from covering the Date Inspector actions.
       The page receives enough scrollable tail space for the final controls to
       clear the fixed dock and device safe area. The shared .listo-main canvas
       remains the sole source of horizontal page gutters. */
    .listo-calendar-pricing-page {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: calc(156px + env(safe-area-inset-bottom, 0px));
    }

    /* Compact the listing context so the calendar reaches the viewport sooner. */
    .listo-calendar-pricing-page .listo-cp-listing-bar {
        gap: 10px;
        margin-bottom: 18px;
    }

    .listo-calendar-pricing-page .listo-cp-listing-selector {
        padding: 13px 14px;
    }

    .listo-calendar-pricing-page .listo-cp-listing-selector__heading span {
        font-size: 12px;
        line-height: 1.35;
    }

    .listo-calendar-pricing-page .listo-cp-listing-summary {
        padding: 11px 12px;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 8px 10px;
        align-items: center;
    }

    .listo-calendar-pricing-page .listo-cp-listing-summary img {
        width: 46px;
        height: 46px;
        border-radius: 9px;
    }

    .listo-calendar-pricing-page .listo-cp-listing-summary > div:first-of-type {
        min-width: 0;
    }

    .listo-calendar-pricing-page .listo-cp-listing-summary strong {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        word-break: break-word;
        font-size: 14px;
        line-height: 1.28;
        margin-bottom: 2px;
    }

    .listo-calendar-pricing-page .listo-cp-listing-summary .listo-cp-listing-status {
        display: inline-block;
        width: auto;
        font-size: 10px;
        line-height: 1.2;
        padding: 4px 7px;
        margin-top: 2px;
    }

    .listo-calendar-pricing-page .listo-cp-listing-summary .listo-cp-listing-status-note {
        display: none;
    }

    .listo-calendar-pricing-page .listo-cp-listing-summary > div:nth-of-type(2),
    .listo-calendar-pricing-page .listo-cp-listing-summary > div:nth-of-type(3) {
        padding-top: 7px;
    }

    .listo-calendar-pricing-page .listo-cp-listing-summary > div:nth-of-type(2) span,
    .listo-calendar-pricing-page .listo-cp-listing-summary > div:nth-of-type(3) span {
        font-size: 10px;
        line-height: 1.25;
    }

    .listo-calendar-pricing-page .listo-cp-listing-summary > div:nth-of-type(2) b,
    .listo-calendar-pricing-page .listo-cp-listing-summary > div:nth-of-type(3) b {
        font-size: 14px;
        line-height: 1.2;
    }

    /* Mobile workspace navigation uses the shorter Rules label visually while
       retaining the full accessible text in the DOM. */
    .listo-calendar-pricing-page .listo-cp-tabs a[data-cp-view="rules"] {
        font-size: 0;
        white-space: nowrap;
    }

    .listo-calendar-pricing-page .listo-cp-tabs a[data-cp-view="rules"]::after {
        content: "Rules";
        font-size: 12px;
        line-height: 1.2;
    }

    .listo-calendar-pricing-page .listo-cp-tabs {
        margin-bottom: 18px;
    }

    /* Keep the calendar readable without allowing the surrounding page to
       create horizontal overflow at 360–430px. */
    .listo-calendar-pricing-page .listo-cp-calendar-card {
        overflow: hidden;
    }

    /* The inspector is part of the normal document flow on mobile. Its final
       controls can therefore scroll completely above the fixed Host dock. */
    .listo-calendar-pricing-page .listo-cp-date-card {
        margin-bottom: 0;
        scroll-margin-bottom: 156px;
    }
}

@media (max-width: 420px) {
    .listo-calendar-pricing-page {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
    }

    .listo-calendar-pricing-page .listo-cp-listing-summary {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 10px 11px;
        gap: 7px 9px;
    }

    .listo-calendar-pricing-page .listo-cp-listing-summary img {
        width: 42px;
        height: 42px;
    }

    .listo-calendar-pricing-page .listo-cp-listing-summary strong {
        font-size: 13px;
    }

    .listo-calendar-pricing-page .listo-cp-tabs a,
    .listo-calendar-pricing-page .listo-cp-tabs a.is-active {
        min-height: 42px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .listo-calendar-pricing-page .listo-cp-tabs a[data-cp-view="rules"]::after {
        font-size: 11px;
    }
}

/* NEXT1003 — Staycation Calendar & Pricing: mobile tabs + fixed-dock clearance.
 * Mobile uses the concise Rules label from the dedicated mobile span only.
 * The fixed Host dock must never cover Calendar & Pricing actions or modals.
 * Presentation-only; existing routing, AJAX, field IDs and business logic remain unchanged.
 */
@media (max-width: 800px) {
  .listo-host-staycation-calendar-app .listo-cp-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    gap: 0 !important;
    padding: 0 !important;
    margin-bottom: 18px !important;
    align-items: stretch !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-tabs > a {
    flex: 1 1 33.333% !important;
    width: 33.333% !important;
    min-width: 0 !important;
    max-width: 33.333% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-align: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    line-height: 1.15 !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-tabs > a .listo-cp-tab-label {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-tabs > a .listo-cp-tab-label--full {
    display: none !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-tabs > a .listo-cp-tab-label--mobile {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  /* NEXT1003: the mobile span already contains “Rules”; do not add a second
     Rules label through the legacy pseudo-element. */
  .listo-host-staycation-calendar-app .listo-cp-tabs > a[data-cp-view="rules"]::after {
    content: none !important;
    display: none !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-tabs > a[data-cp-view="rules"] .listo-cp-tab-label--mobile {
    font-size: 12px !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-tabs > a.is-active,
  .listo-host-staycation-calendar-app .listo-cp-tabs > a.is-active:hover,
  .listo-host-staycation-calendar-app .listo-cp-tabs > a.is-active:focus-visible {
    background: #2196F3 !important;
    color: #FFFFFF !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-tabs > a:not(.is-active),
  .listo-host-staycation-calendar-app .listo-cp-tabs > a:not(.is-active):hover,
  .listo-host-staycation-calendar-app .listo-cp-tabs > a:not(.is-active):focus-visible {
    background: transparent !important;
    color: #566975 !important;
  }
}

@media (max-width: 380px) {
  .listo-host-staycation-calendar-app .listo-cp-tabs > a {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-tabs > a .listo-cp-tab-label--mobile {
    font-size: 11px !important;
  }
}



/* NEXT1003 — fixed Host dock must not obscure Calendar & Pricing modals. */
@media (max-width: 800px) {
  .listo-host-staycation-calendar-app .listo-cp-modal {
    z-index: 10030 !important;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .listo-host-staycation-calendar-app .listo-cp-modal__dialog {
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: 24px !important;
    overscroll-behavior: contain;
  }

  /* Keep the final inspector actions clear of the fixed Host dock when the
     inspector is reached through normal page scrolling. */
  .listo-host-staycation-calendar-app .listo-cp-date-card {
    padding-bottom: 72px !important;
    scroll-margin-bottom: 156px !important;
  }
}


/* NEXT1004 — Calendar & Pricing shared Host canvas width.
 * Home/Bookings use the global .listo-main gutter. Calendar & Pricing must not
 * add a second mobile gutter. Presentation-only.
 */
@media (max-width: 700px) {
  .listo-calendar-pricing-page {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}


/* ==========================================================================
   NEXT1005 — Staycation Listings UI/UX overhaul
   Presentation-only refinement from NEXT1004.
   Preserve listing queries, status values, search/filter behavior, actions,
   AJAX, permissions, routes, co-host logic and Host navigation.
   ========================================================================== */

body.listo-host-staycation-listings-app .listo-my-listings-page{
  width:100%!important;
  max-width:1200px!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
  padding-bottom:132px!important;
}

body.listo-host-staycation-listings-app .listo-my-listings-page__header{
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:24px!important;
  margin:0 0 24px!important;
  min-height:59px!important;
}

body.listo-host-staycation-listings-app .listo-my-listings-page__heading-copy h1{
  font-size:26px!important;
  line-height:30px!important;
  letter-spacing:-.02em!important;
  color:#172631!important;
}

body.listo-host-staycation-listings-app .listo-my-listings-page__heading-copy p{
  margin-top:5px!important;
  font-size:14px!important;
  line-height:20px!important;
  color:#70818D!important;
  max-width:760px!important;
}

body.listo-host-staycation-listings-app .listo-my-listings-page__add{
  min-height:40px!important;
  height:40px!important;
  padding:0 15px!important;
  border-radius:10px!important;
  background:#2196F3!important;
  color:#fff!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:700!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-page__add:hover{
  background:#1976D2!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-page__add:focus-visible{
  outline:3px solid rgba(33,150,243,.18)!important;
  outline-offset:2px!important;
}

body.listo-host-staycation-listings-app .listo-my-listings-toolbar{
  grid-template-columns:minmax(260px,360px) minmax(0,1fr)!important;
  gap:24px!important;
  align-items:center!important;
  margin:0 0 14px!important;
}

body.listo-host-staycation-listings-app .listo-my-listings-search input{
  height:44px!important;
  border-radius:10px!important;
  background:#fff!important;
  box-shadow:none!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-search input:focus{
  border-color:#2196F3!important;
  box-shadow:0 0 0 3px rgba(33,150,243,.10)!important;
}

body.listo-host-staycation-listings-app .listo-my-listings-filters{
  justify-content:flex-end!important;
  gap:4px!important;
  flex-wrap:wrap!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-filter{
  min-height:34px!important;
  padding:6px 11px!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#667780!important;
  font-size:13px!important;
  font-weight:600!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-filter:hover{
  border-color:transparent!important;
  background:#F5F8FA!important;
  color:#172631!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-filter.is-active{
  border-color:#2196F3!important;
  background:#2196F3!important;
  color:#fff!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-filter:focus-visible{
  outline:2px solid rgba(33,150,243,.25)!important;
  outline-offset:1px!important;
}

body.listo-host-staycation-listings-app .listo-my-listings-summary{
  margin:0 0 10px!important;
  min-height:22px!important;
  gap:5px!important;
  color:#70818D!important;
  font-size:13px!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-summary strong{
  color:#172631!important;
  font-size:14px!important;
  font-weight:700!important;
}

body.listo-host-staycation-listings-app .listo-my-listings-grid{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;
  gap:20px!important;
  align-items:stretch!important;
}

body.listo-host-staycation-listings-app .listo-my-listing-card{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  border:1px solid #E4E9ED!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 1px 2px rgba(16,24,40,.03)!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card:hover{
  transform:translateY(-1px)!important;
  border-color:#D5DEE5!important;
  box-shadow:0 7px 20px rgba(16,24,40,.06)!important;
}

body.listo-host-staycation-listings-app .listo-my-listing-card__media{
  aspect-ratio:16/10!important;
  border-radius:13px 13px 0 0!important;
  background:#F3F6F8!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__media img{
  display:block!important;
  object-fit:cover!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__status{
  left:10px!important;
  bottom:10px!important;
  box-shadow:0 1px 3px rgba(16,24,40,.10)!important;
  font-size:11px!important;
  line-height:1.2!important;
  font-weight:700!important;
}

body.listo-host-staycation-listings-app .listo-my-listing-card__menu-wrap{
  top:9px!important;
  right:9px!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__menu-toggle{
  width:34px!important;
  height:34px!important;
  border:1px solid rgba(255,255,255,.80)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 2px 7px rgba(16,24,40,.10)!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__menu-toggle:hover{
  background:#fff!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__menu-toggle:focus-visible{
  outline:2px solid #2196F3!important;
  outline-offset:2px!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__menu{
  top:40px!important;
  width:190px!important;
  padding:5px!important;
  border-radius:10px!important;
  box-shadow:0 10px 26px rgba(16,24,40,.14)!important;
  z-index:20!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__menu a,
body.listo-host-staycation-listings-app .listo-my-listing-card__menu button{
  min-height:38px!important;
  padding:9px 10px!important;
  border-radius:7px!important;
  font-size:13px!important;
}

body.listo-host-staycation-listings-app .listo-my-listing-card__body{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  padding:14px 15px 15px!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__title{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  margin:0 0 7px!important;
  min-height:42px!important;
  max-height:42px!important;
  font-size:15px!important;
  line-height:21px!important;
  font-weight:700!important;
  letter-spacing:-.005em!important;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow-wrap:anywhere!important;
  color:#172631!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__price{
  margin:0 0 14px!important;
  min-height:20px!important;
  font-size:15px!important;
  line-height:20px!important;
  font-weight:700!important;
  color:#172631!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__price span{
  color:#70818D!important;
  font-size:12.5px!important;
  font-weight:500!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__actions{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  margin-top:auto!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__manage{
  width:100%!important;
  min-height:40px!important;
  height:40px!important;
  justify-content:center!important;
  padding:8px 11px!important;
  border:1px solid #2196F3!important;
  border-radius:9px!important;
  background:#2196F3!important;
  color:#fff!important;
  font-size:12.5px!important;
  font-weight:700!important;
  box-shadow:none!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__manage:hover{
  background:#1976D2!important;
  color:#fff!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__manage:focus-visible{
  outline:2px solid rgba(33,150,243,.25)!important;
  outline-offset:2px!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__calendar{
  width:100%!important;
  min-height:32px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:6px 10px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:#52656F!important;
  font-size:12px!important;
  line-height:18px!important;
  font-weight:600!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__calendar:hover{
  background:#F5F8FA!important;
  color:#172631!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__calendar:focus-visible{
  outline:2px solid rgba(33,150,243,.25)!important;
  outline-offset:1px!important;
}

body.listo-host-staycation-listings-app .listo-my-listings-no-results{
  margin-top:10px!important;
  padding:36px 20px!important;
  border:1px dashed #D8E0E5!important;
  border-radius:12px!important;
  background:#FBFCFD!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-empty{
  padding:56px 24px!important;
  border:1px solid #E4E9ED!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:none!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-empty__icon{
  width:56px!important;
  height:56px!important;
  margin-bottom:16px!important;
  border-radius:14px!important;
  background:#EAF5FF!important;
  color:#1769AA!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-empty h2{
  font-size:20px!important;
  color:#172631!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-empty p{
  font-size:13px!important;
}

body.listo-host-staycation-listings-app .listo-my-listings-cohosted{
  margin-top:40px!important;
  padding-top:26px!important;
  border-top:1px solid #E4E9ED!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-section-heading{
  margin-bottom:15px!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-section-heading h2{
  font-size:19px!important;
  color:#172631!important;
}
body.listo-host-staycation-listings-app .listo-my-listings-section-heading p{
  font-size:13px!important;
  color:#70818D!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card--cohosted .listo-my-listing-card__manage{
  background:transparent!important;
  border-color:#D7E0E6!important;
  color:#52656F!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card--cohosted .listo-my-listing-card__manage:hover{
  background:#F5F8FA!important;
  color:#172631!important;
}

@media (max-width:1199px) and (min-width:901px){
  body.listo-host-staycation-listings-app .listo-my-listings-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media (max-width:900px) and (min-width:701px){
  body.listo-host-staycation-listings-app .listo-my-listings-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-toolbar{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-filters{
    justify-content:flex-start!important;
  }
}

@media (max-width:700px){
  body.listo-host-staycation-listings-app .listo-my-listings-page{
    max-width:1200px!important;
    padding-bottom:144px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-page__header{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:12px!important;
    margin-bottom:17px!important;
    min-height:55px!important;
    padding:0 2px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-page__heading-copy h1{
    font-size:22px!important;
    line-height:27px!important;
    min-height:27px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-page__heading-copy p{
    margin-top:4px!important;
    font-size:13px!important;
    line-height:18px!important;
    min-height:18px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-page__add{
    min-height:38px!important;
    height:38px!important;
    padding:0 11px!important;
    border-radius:9px!important;
    font-size:12px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-page__add svg{
    width:15px!important;
    height:15px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-toolbar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
    margin-bottom:10px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-search input{
    height:46px!important;
    border-radius:10px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-filters{
    width:100%!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:4px!important;
    padding:1px 1px 5px!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-filters::-webkit-scrollbar{
    display:none!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-filter{
    flex:0 0 auto!important;
    min-height:34px!important;
    padding:6px 10px!important;
    border-radius:9px!important;
    font-size:11.5px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-summary{
    margin-bottom:9px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-grid{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listing-card{
    border-radius:13px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listing-card__media{
    aspect-ratio:16/9!important;
    border-radius:12px 12px 0 0!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listing-card__body{
    padding:14px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listing-card__title{
    font-size:15px!important;
    line-height:20px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listing-card__price{
    margin-bottom:12px!important;
    font-size:15px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listing-card__manage{
    min-height:44px!important;
    height:44px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listing-card__calendar{
    min-height:38px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listing-card__menu-toggle{
    width:36px!important;
    height:36px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listing-card__menu{
    top:42px!important;
    width:194px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-empty{
    padding:48px 20px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-cohosted{
    margin-top:34px!important;
    padding-top:24px!important;
  }
}

@media (max-width:420px){
  body.listo-host-staycation-listings-app .listo-my-listings-page__header{
    gap:9px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-page__heading-copy h1{
    font-size:21px!important;
    line-height:26px!important;
    min-height:26px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-page__heading-copy p{
    font-size:12.5px!important;
    line-height:18px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-page__add{
    min-height:38px!important;
    height:38px!important;
    padding:0 10px!important;
  }
}

@media (max-width:380px){
  body.listo-host-staycation-listings-app .listo-my-listings-page__header{
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  body.listo-host-staycation-listings-app .listo-my-listings-page__add{
    width:max-content!important;
    justify-self:start!important;
  }
}

/* NEXT1005 rate-source clarification — Listings cards show the stored base/default rate only. */
body.listo-host-staycation-listings-app .listo-my-listing-card__price{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:2px!important;
  min-height:38px!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__price .listo-my-listing-card__price-label{
  display:block!important;
  color:#70818D!important;
  font-size:11px!important;
  line-height:15px!important;
  font-weight:600!important;
  letter-spacing:.02em!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__price strong{
  display:block!important;
  color:#172631!important;
  font-size:15px!important;
  line-height:20px!important;
  font-weight:700!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__price strong span{
  color:#70818D!important;
  font-size:12.5px!important;
  line-height:18px!important;
  font-weight:500!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__price .listo-my-listing-card__price-unset{
  display:block!important;
  color:#70818D!important;
  font-size:13px!important;
  line-height:20px!important;
  font-weight:600!important;
}

/* ==========================================================================\n   NEXT1006 — Staycation Listings desktop portfolio grid correction\n   Presentation-only correction to the NEXT1005 Listings desktop composition.\n   The existing NEXT1005 stylesheet contains an older horizontal-row rule for\n   this component. Explicitly restore the intended property-card grid at\n   desktop widths without changing listing data, actions, routes, or JS.\n   ========================================================================== */
@media (min-width: 901px) {
  body.listo-host-staycation-listings-app .listo-my-listings-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
  }

  body.listo-host-staycation-listings-app .listo-my-listing-card {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 1px solid #E4E9ED !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.03) !important;
  }

  body.listo-host-staycation-listings-app .listo-my-listing-card__media {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    flex: 0 0 auto !important;
    border-radius: 13px 13px 0 0 !important;
  }

  body.listo-host-staycation-listings-app .listo-my-listing-card__body {
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 14px 15px 15px !important;
  }

  body.listo-host-staycation-listings-app .listo-my-listing-card__actions {
    width: 100% !important;
    margin-top: auto !important;
  }
}

@media (min-width: 1201px) {
  body.listo-host-staycation-listings-app .listo-my-listings-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  body.listo-host-staycation-listings-app .listo-my-listings-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* NEXT1007 — final Staycation Listings desktop card correction.
   Keep each title inside its card and let the portfolio grid size itself to
   the number of visible listings instead of leaving an unused fourth track. */
body.listo-host-staycation-listings-app .listo-my-listings-grid{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__body{
  min-width:0!important;
  width:100%!important;
  box-sizing:border-box!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__title{
  display:-webkit-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  min-height:42px!important;
  max-height:42px!important;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow-wrap:anywhere!important;
}

/* ========================================================================
   NEXT1008 — Staycation Listings desktop thumbnail correction
   The listing media frame is intentionally full-width. Keep the actual
   WordPress thumbnail stretched to the complete card width while preserving
   the existing image crop and card/action behavior.
   ======================================================================== */
body.listo-host-staycation-listings-app .listo-my-listing-card__media {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__media img,
body.listo-host-staycation-listings-app .listo-my-listing-card__media-placeholder {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__media img {
  object-fit: cover !important;
  object-position: center center !important;
}

@media (max-width: 700px) {
  body.listo-host-staycation-listings-app .listo-my-listing-card__media {
    aspect-ratio: 16 / 9 !important;
  }
}

/* ========================================================================
   NEXT1009 — Staycation Listings overflow menu visibility
   Keep the existing three-dot menu markup and actions, but ensure the menu
   can paint above the card body when opened. The visibility action must not
   be hidden behind the content section of the same card.
   ======================================================================== */
body.listo-host-staycation-listings-app .listo-my-listing-card__media{
  position:relative!important;
  z-index:2!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__body{
  position:relative!important;
  z-index:1!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__menu{
  z-index:100!important;
  max-height:none!important;
  overflow:visible!important;
}


/* ========================================================================
   NEXT1010 — Staycation Listings menu clipping fix
   The media frame intentionally clips the photograph. The action menu is
   a sibling of that frame so its full height can render above the card body.
   ======================================================================== */
body.listo-host-staycation-listings-app .listo-my-listing-card {
  position: relative !important;
  overflow: visible !important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__media {
  position: relative !important;
  z-index: 1 !important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__menu-wrap {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  z-index: 50 !important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__menu {
  position: absolute !important;
  top: 40px !important;
  right: 0 !important;
  z-index: 100 !important;
  display: block !important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__menu[hidden] {
  display: none !important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__body {
  position: relative !important;
  z-index: 1 !important;
}
@media (max-width: 700px) {
  body.listo-host-staycation-listings-app .listo-my-listing-card__menu-wrap {
    top: 8px !important;
    right: 8px !important;
  }
}

/* ========================================================================
   NEXT1011 — Staycation Host Inbox conversation workspace
   Presentation-only refinement. Messaging, AJAX, polling, attachments,
   reactions, replies, permissions and booking logic remain unchanged.
   ======================================================================== */
@media (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox-page__header {
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
  }
  body[data-listo-mode="host"] .listo-inbox-page__header::before,
  body[data-listo-mode="host"] .listo-inbox-page__header::after,
  body[data-listo-mode="host"] .listo-inbox-page__header .listo-inbox__heading::before,
  body[data-listo-mode="host"] .listo-inbox-page__header .listo-inbox__heading::after {
    display: none !important;
  }
  body[data-listo-mode="host"] .listo-inbox-page .listo-inbox__heading {
    font-size: 26px !important;
    line-height: 32px !important;
    font-weight: 750 !important;
    color: #17202A !important;
  }
  body[data-listo-mode="host"] .listo-inbox-page .listo-inbox-page__description {
    margin-top: 5px !important;
    color: #667482 !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 265px minmax(0, 1fr) 250px !important;
    min-height: 520px;
    border: 1px solid #E2E8EE;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list {
    min-width: 0;
    border-right: 1px solid #E2E8EE;
    background: #fff;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list-head {
    min-height: 54px;
    height: 54px;
    padding: 10px 12px;
    justify-content: flex-start !important;
    border-bottom: 0 !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__unread-count {
    margin: 0 !important;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid #D7EAFB;
    border-radius: 999px;
    background: #fff;
    color: #536579;
    font-size: 12px;
    font-weight: 600;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host {
    padding: 8px 12px 10px;
    border-bottom: 1px solid #E2E8EE;
    background: #fff !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search-wrap {
    min-height: 38px;
    border: 1px solid #D8E1EA;
    border-radius: 10px;
    background: #fff !important;
    box-shadow: none !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__filters--host { display: none !important; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item {
    min-height: 72px;
    padding: 9px 12px;
    gap: 9px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__body { min-width: 0; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__title {
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__stay {
    font-size: 11px;
    line-height: 15px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__preview { display: none !important; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__context { margin-top: 2px; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-context-badge {
    min-height: 20px;
    padding: 3px 7px;
    font-size: 9.5px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item.is-unread .listo-inbox-thread-item__title { font-weight: 800; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble { max-width: 74% !important; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-name { font-weight: 750; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
    color: #667482;
    font-size: 11px;
    line-height: 15px;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-status {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-status--booked { color:#155E9C; background:#EAF5FF; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-status--inquiry { color:#8A5B00; background:#FFF5D6; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-chat-id { color:#7A8794; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar {
    border-left: 1px solid #E2E8EE;
    background: #fff;
  }
}
@media (max-width: 1100px) and (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host { grid-template-columns: 250px minmax(0, 1fr) 220px !important; }
}
@media (max-width: 800px) {
  body[data-listo-mode="host"] .listo-inbox-page__header {
    border: 0 !important;
    box-shadow: none !important;
  }
  body[data-listo-mode="host"] .listo-inbox-page__header::before,
  body[data-listo-mode="host"] .listo-inbox-page__header::after,
  body[data-listo-mode="host"] .listo-inbox-page__header .listo-inbox__heading::before,
  body[data-listo-mode="host"] .listo-inbox-page__header .listo-inbox__heading::after { display:none !important; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host { padding-left: 0; padding-right: 0; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search-wrap { width:100%; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__preview { display:none !important; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-meta { max-width: calc(100% - 20px); }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-chat-id { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble { max-width:82%; }
}

/* ========================================================================
   NEXT1011-R2 — Staycation Host Inbox correction pass
   Fixes the page-header flow, duplicate status treatment, and right-rail
   stay-date presentation observed in the NEXT1011 browser review.
   Presentation-only; messaging/AJAX/polling/business logic unchanged.
   ======================================================================== */
@media (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox-page {
    display: block !important;
    width: 100% !important;
    max-width: 1500px !important;
  }

  body[data-listo-mode="host"] .listo-inbox-page__header {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 74px !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body[data-listo-mode="host"] .listo-inbox-page__header .listo-inbox__heading {
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 30px !important;
    line-height: 30px !important;
  }

  body[data-listo-mode="host"] .listo-inbox-page__header .listo-inbox-page__description {
    display: block !important;
    position: relative !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 20px !important;
    line-height: 20px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    grid-template-columns: 280px minmax(0, 1fr) 270px !important;
  }

  /* The meta row is the single source of truth for Inquiry / Booked
     reservation. The old subrow badge is deliberately hidden. */
  body[data-listo-mode="host"] .listo-inbox--host #listo-inbox-thread-kind {
    display: none !important;
  }

  /* Keep the conversation header compact but give its context a deliberate
     three-level hierarchy: guest -> listing/stay -> status/chat ID. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-copy {
    min-width: 0 !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-name {
    margin-bottom: 2px !important;
    font-size: 15px !important;
    line-height: 20px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-meta {
    margin-top: 0 !important;
    gap: 6px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-subrow {
    margin-top: 3px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-subrow .listo-caption {
    font-size: 12px !important;
    line-height: 17px !important;
    color: #536579 !important;
  }

  /* Quiet context rail: useful booking information without turning Inbox
     into a second Bookings page. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar {
    background: #FBFCFE !important;
    padding: 18px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__facts li.listo-inbox-sidebar__stay {
    display: block !important;
    padding: 9px 0 11px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__facts li.listo-inbox-sidebar__stay span {
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__facts li.listo-inbox-sidebar__stay strong {
    display: block !important;
    text-align: left !important;
    font-size: 13px !important;
    line-height: 19px !important;
    font-weight: 600 !important;
    color: #172631 !important;
  }
}

@media (max-width: 1100px) and (min-width: 801px) {
  body[data-listo-mode="host"] .listo-inbox--host {
    grid-template-columns: 250px minmax(0, 1fr) 240px !important;
  }
}

@media (max-width: 800px) {
  body[data-listo-mode="host"] .listo-inbox-page__header {
    display: block !important;
    position: relative !important;
    height: auto !important;
    min-height: 55px !important;
    margin: 0 0 16px !important;
    padding: 0 2px !important;
    overflow: visible !important;
  }

  body[data-listo-mode="host"] .listo-inbox-page__header .listo-inbox__heading {
    display: block !important;
    height: auto !important;
    min-height: 27px !important;
    line-height: 27px !important;
  }

  body[data-listo-mode="host"] .listo-inbox-page__header .listo-inbox-page__description {
    display: block !important;
    height: auto !important;
    min-height: 18px !important;
    margin: 4px 0 0 !important;
    line-height: 18px !important;
    white-space: normal !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host {
    margin-top: 0 !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host #listo-inbox-thread-kind {
    display: none !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__facts li.listo-inbox-sidebar__stay {
    display: block !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-sidebar__facts li.listo-inbox-sidebar__stay strong {
    display: block !important;
    text-align: left !important;
  }
}

/* ========================================================================
   NEXT1011-R3 — Staycation Host Inbox mobile workspace refinement
   Based on mobile browser review. Presentation-only: no messaging, AJAX,
   polling, attachment, reaction, reply, booking, or permission logic.
   ======================================================================== */
@media (max-width: 800px) {
  /* Keep the mobile Inbox as one deliberate full-width workspace. */
  body[data-listo-mode="host"] .listo-inbox-page {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body[data-listo-mode="host"] .listo-inbox-page__header {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 14px !important;
    padding: 0 2px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    height: calc(100dvh - 184px) !important;
    min-height: 500px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    border-right: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    padding-bottom: 92px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list-head {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 12px 6px !important;
    border-bottom: 0 !important;
  }

  /* Zero unread is useful as data but visually unnecessary on a small phone. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__unread-count {
    display: none !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 12px 10px !important;
    border-bottom: 1px solid #E2E8EE !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search-wrap {
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    padding: 0 13px !important;
    border-radius: 12px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search {
    min-width: 0 !important;
    min-height: 46px !important;
    font-size: 15px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    min-height: 88px !important;
    padding: 12px 14px !important;
    gap: 11px !important;
    overflow: hidden !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__body {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__top-row {
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__title {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 19px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__time {
    flex: 0 0 auto !important;
    font-size: 11px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 3px 0 3px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #536579 !important;
    font-size: 12px !important;
    line-height: 17px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag svg {
    flex: 0 0 13px !important;
    width: 13px !important;
    height: 13px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__stay {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    color: #6A7785 !important;
    font-size: 12px !important;
    line-height: 17px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__vertical {
    display: none !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__context {
    display: block !important;
    min-width: 0 !important;
    margin-top: 3px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-context-badge {
    display: inline !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #172631 !important;
    font-size: 12px !important;
    line-height: 17px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__preview {
    display: none !important;
  }

  /* Focused conversation: full-width mobile messaging workspace. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header {
    display: grid !important;
    grid-template-columns: 32px 38px minmax(0, 1fr) 34px !important;
    align-items: start !important;
    column-gap: 8px !important;
    width: 100% !important;
    min-height: 92px !important;
    box-sizing: border-box !important;
    padding: 10px 10px 9px !important;
    overflow: hidden !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-back-btn {
    display: flex !important;
    width: 32px !important;
    height: 38px !important;
    margin: 0 !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-avatar {
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    font-size: 14px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-copy {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-name {
    order: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 2px !important;
    font-size: 15px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-subrow {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 2px !important;
    overflow: hidden !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-subrow .listo-caption {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: #536579 !important;
    font-size: 12px !important;
    line-height: 17px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-meta {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    gap: 2px !important;
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 16px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-stay {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #6A7785 !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-status {
    justify-self: start !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #155E9C !important;
    font-size: 11.5px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-chat-id {
    display: none !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-info-btn {
    display: flex !important;
    width: 34px !important;
    height: 38px !important;
    margin: 0 !important;
    align-self: start !important;
  }

  /* The message area owns the remaining height; composer stays immediately
     above the Host dock and never becomes part of the scrolling messages. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__messages {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 12px 10px 10px !important;
    overflow-x: hidden !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble-wrap,
  body[data-listo-mode="host"] .listo-inbox--host .listo-msg-bubble {
    max-width: 84% !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer {
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    padding: 8px 10px 10px !important;
    background: #fff !important;
    border-top: 1px solid #E2E8EE !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer textarea {
    min-width: 0 !important;
    min-height: 42px !important;
    max-height: 96px !important;
    padding: 10px 13px !important;
    font-size: 15px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer-icon-btn {
    width: 40px !important;
    height: 42px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__composer-send {
    width: 42px !important;
    height: 42px !important;
  }

  /* Keep the floating Host navigation available while chatting, as in the
     reviewed mobile flow. Reserve its footprint so it never covers content. */
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-floating-dock {
    display: flex !important;
  }

  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-floating-dock__backdrop,
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-floating-dock__more-panel {
    display: none;
  }

  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-inbox-page {
    padding-bottom: 116px !important;
  }

  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-inbox--host .listo-inbox__thread {
    margin-bottom: 88px !important;
  }

  /* Mobile details drawer: make it a true side sheet, above the page header
     and Host dock, with the backdrop covering the entire application. */
  body[data-listo-mode="host"] .listo-inbox-mobile-info-backdrop {
    z-index: 10035 !important;
    background: rgba(15, 23, 32, .38) !important;
  }

  body[data-listo-mode="host"] .listo-inbox-sidebar {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(88vw, 380px) !important;
    max-width: 100% !important;
    max-height: none !important;
    border: 0 !important;
    border-left: 1px solid #E2E8EE !important;
    border-radius: 20px 0 0 20px !important;
    z-index: 10040 !important;
    transform: translateX(100%) !important;
    box-shadow: -12px 0 34px rgba(0,0,0,.16) !important;
    overflow-y: auto !important;
  }

  body[data-listo-mode="host"] .listo-inbox-sidebar.is-open {
    transform: translateX(0) !important;
  }

  body[data-listo-mode="host"] .listo-inbox-sidebar__mobile-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    min-height: 58px !important;
    padding: 10px 14px !important;
    border-radius: 20px 0 0 0 !important;
  }

  body[data-listo-mode="host"] .listo-inbox-sidebar #listo-inbox-sidebar-content {
    padding: 16px 14px 30px !important;
  }
}

@media (max-width: 380px) {
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header {
    grid-template-columns: 28px 34px minmax(0, 1fr) 32px !important;
    column-gap: 6px !important;
    min-height: 90px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-avatar {
    width: 34px !important;
    height: 34px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-name {
    font-size: 14px !important;
  }
}

/* ========================================================================
   NEXT1011-R4 — Staycation Host Inbox mobile state isolation
   Correct the final mobile browser-review defects without changing the
   messaging engine. The list and conversation are mutually exclusive;
   the mobile details drawer is a viewport-level layer; the Host dock keeps
   its five equal destinations while the drawer is open.
   ======================================================================== */
@media (max-width: 800px) {
  /* Explicit mobile state contract: list OR conversation, never both. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list {
    display: block !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host.listo-inbox--thread-open .listo-inbox__list {
    display: none !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread {
    display: none !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host.listo-inbox--thread-open .listo-inbox__thread {
    display: flex !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
  }

  /* Keep the conversation header readable at phone widths. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-copy {
    min-width: 0 !important;
    width: 100% !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-name,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-subrow .listo-caption,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-stay {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__thread-header-status {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Mobile listing rows: keep the listing and stay lines inside the body. */
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag svg {
    flex: 0 0 13px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag {
    text-overflow: ellipsis !important;
  }

  /* The details drawer is portalled to <body> by Inbox JS on mobile, so this
     layer is guaranteed to sit above the page header and content. Keep the
     Host dock above the sheet so its navigation remains usable. */
  body[data-listo-mode="host"] .listo-inbox-mobile-info-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10040 !important;
    display: none;
    background: rgba(15, 23, 32, .42) !important;
  }
  body[data-listo-mode="host"] .listo-inbox-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(88vw, 380px) !important;
    height: 100dvh !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid #E2E8EE !important;
    border-radius: 18px 0 0 18px !important;
    background: #fff !important;
    z-index: 10050 !important;
    transform: translateX(100%) !important;
    transition: transform .2s ease !important;
    overflow-y: auto !important;
    box-shadow: -12px 0 34px rgba(0,0,0,.16) !important;
  }
  body[data-listo-mode="host"] .listo-inbox-sidebar.is-open {
    display: block !important;
    transform: translateX(0) !important;
  }
  body[data-listo-mode="host"] .listo-inbox-sidebar__mobile-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    min-height: 58px !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    border-radius: 18px 0 0 0 !important;
    background: #fff !important;
  }

  /* Dock geometry is independent of the drawer. */
  body[data-listo-mode="host"] .listo-host-floating-dock {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-columns: auto !important;
    box-sizing: border-box !important;
    z-index: 10060 !important;
  }
  body[data-listo-mode="host"] .listo-host-floating-dock > a,
  body[data-listo-mode="host"] .listo-host-floating-dock > button {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }
  body[data-listo-mode="host"] .listo-host-floating-dock__active-bg {
    width: calc((100% - 14px) / 6) !important;
  }
  body[data-listo-mode="host"] .listo-host-floating-dock .listo-dashboard-v2__dock-icon {
    flex: 0 0 20px !important;
  }
  body[data-listo-mode="host"] .listo-host-floating-dock > a > span:last-child:not(.listo-account-notification-badge):not(.listo-dashboard-v2__dock-icon),
  body[data-listo-mode="host"] .listo-host-floating-dock > button > span:last-child:not(.listo-account-notification-badge):not(.listo-dashboard-v2__dock-icon) {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 380px) {
  body[data-listo-mode="host"] .listo-host-floating-dock > a,
  body[data-listo-mode="host"] .listo-host-floating-dock > button {
    font-size: 8.5px !important;
  }
  body[data-listo-mode="host"] .listo-host-floating-dock .listo-dashboard-v2__dock-icon {
    width: 19px !important;
    height: 19px !important;
    flex-basis: 19px !important;
  }
}

/* ========================================================================
   NEXT1011-R5 — Hide the mobile Host dock while the Inbox chat or details
   tray is active. The dock competes with the message composer and details
   drawer at phone widths; removing it in these focused states restores the
   full conversation/drawer viewport without changing messaging behavior.
   ======================================================================== */
@media (max-width: 800px) {
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-floating-dock,
  body[data-listo-mode="host"].listo-inbox-info-open .listo-host-floating-dock {
    display: none !important;
  }

  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-inbox-page {
    padding-bottom: 24px !important;
  }

  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-inbox--host .listo-inbox__thread {
    margin-bottom: 0 !important;
  }
}

/* ========================================================================
   NEXT1011-R6 — Adaptive mobile composer / visual viewport
   Keep the existing Inbox composer tied to the actual visible viewport when
   Android/iOS raises the virtual keyboard. No fixed keyboard height is used.
   ======================================================================== */
@media (max-width: 800px) {
  body[data-listo-mode="host"] .listo-inbox--host.listo-inbox--thread-open.listo-inbox--keyboard-visible .listo-inbox__composer {
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 -1px 0 rgba(0,0,0,.04) !important;
  }
}


/* ========================================================================
   NEXT1011-R7 — Mobile keyboard-safe Inbox composer
   The Inbox workspace, not the composer, follows the visual viewport.
   Keeping the composer in the existing flex column prevents the Android
   visual/layout viewport mismatch that previously produced a gap above the
   keyboard and allowed the send control to overflow the chat pane.
   ======================================================================== */
@media (max-width: 800px) {
  body[data-listo-mode="host"] .listo-inbox--host.listo-inbox--thread-open {
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host.listo-inbox--thread-open .listo-inbox__thread,
  body[data-listo-mode="host"] .listo-inbox--host.listo-inbox--thread-open .listo-inbox__thread-active {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host.listo-inbox--thread-open .listo-inbox__thread-active {
    display: flex !important;
    flex-direction: column !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host.listo-inbox--thread-open .listo-inbox__messages {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host.listo-inbox--thread-open .listo-inbox__composer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
    margin: 0 !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host.listo-inbox--thread-open .listo-inbox__composer textarea {
    min-width: 0 !important;
    width: auto !important;
    flex: 1 1 auto !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host.listo-inbox--thread-open .listo-inbox__composer-icon-btn,
  body[data-listo-mode="host"] .listo-inbox--host.listo-inbox--thread-open .listo-inbox__composer-send {
    flex: 0 0 auto !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host.listo-inbox--thread-open.listo-inbox--keyboard-visible {
    height: var(--listo-inbox-vv-height, auto) !important;
  }
}

/* ========================================================================== 
   NEXT1013 — Mobile Host More tray positioning correction.
   The mobile tray is viewport-width constrained, so it must not inherit the
   desktop translateX(-50%) centering transform after the shell opens.
   ========================================================================== */
@media (max-width:800px){
  body[data-listo-mode="host"] .listo-dashboard-v2 .listo-host-floating-dock__more-panel{
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-width:none!important;
    transform:translateY(10px)!important;
  }
  body[data-listo-mode="host"] .listo-dashboard-v2.is-more-open .listo-host-floating-dock__more-panel{
    transform:translateY(0)!important;
  }
}


/* ==========================================================================
   NEXT1014 — Shared mobile Host More tray positioning
   All Host pages that render the floating dock use the same viewport-level
   More sheet. Do not scope the mobile centering fix to the Home dashboard.
   ========================================================================== */
@media (max-width:800px){
  body[data-listo-mode="host"] .listo-host-floating-dock__more-panel,
  body.is-more-open .listo-host-floating-dock__more-panel,
  body.is-more-open .listo-dashboard-v2__more-panel{
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-width:none!important;
    box-sizing:border-box!important;
    transform:translateY(10px)!important;
  }
  body[data-listo-mode="host"].is-more-open .listo-host-floating-dock__more-panel,
  body.is-more-open .listo-host-floating-dock__more-panel,
  body.is-more-open .listo-dashboard-v2__more-panel{
    transform:translateY(0)!important;
  }
}

/* NEXT1017 — Dock-triggered mobile Host workspace picker.
   The selector is hidden until a common dock destination is tapped. Home is
   never a workspace selection itself; it remains the consolidated Host Home. */
.listo-host-workspace-switcher{display:none!important}
@media(max-width:800px){
  .listo-host-workspace-switcher{
    position:fixed!important;
    z-index:10022!important;
    left:12px!important;
    right:12px!important;
    bottom:78px!important;
    width:auto!important;
    max-width:none!important;
    height:44px!important;
    padding:4px!important;
    box-sizing:border-box!important;
    align-items:center!important;
    gap:8px!important;
    border:1px solid rgba(214,223,230,.96)!important;
    border-radius:15px!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 10px 28px rgba(20,35,48,.14),0 2px 7px rgba(20,35,48,.06)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    opacity:0!important;
    transform:translateY(8px)!important;
    pointer-events:none!important;
    transition:opacity .16s ease,transform .16s ease!important;
  }
  .listo-host-workspace-switcher[hidden]{display:none!important}
  .listo-host-workspace-switcher.is-visible{
    display:flex!important;
    opacity:1!important;
    transform:translateY(0)!important;
    pointer-events:auto!important;
  }
  .listo-host-workspace-switcher__label{
    flex:0 0 auto!important;
    padding:0 5px 0 7px!important;
    color:#7A8790!important;
    font-size:9px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
  }
  .listo-host-workspace-switcher__toggle{
    flex:1 1 auto!important;
    min-width:0!important;
    height:34px!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:3px!important;
  }
  .listo-host-workspace-switcher a{
    min-width:0!important;
    min-height:34px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    color:#687781!important;
    text-decoration:none!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:780!important;
  }
  .listo-host-workspace-switcher a.is-active{color:#146EB8!important;background:#EAF5FF!important}
  .listo-host-workspace-switcher a.is-active.listo-host-workspace-switcher__parking{color:#B95E00!important;background:#FFF3E6!important}
  .listo-host-floating-dock[data-workspace-pick-open="1"]{box-shadow:0 7px 22px rgba(20,35,48,.12),0 2px 6px rgba(20,35,48,.05)!important}
}
@media(max-width:380px){
  .listo-host-workspace-switcher{bottom:76px!important;height:42px!important}
  .listo-host-workspace-switcher__label{font-size:8px!important}
  .listo-host-workspace-switcher a{font-size:10px!important}
}

/* NEXT1018 — Six-item mobile Host dock.
   Primary mobile destinations are Home, Bookings, Calendar, Listings, Inbox,
   and More. The workspace picker remains contextual and is not shown for Home. */
@media (max-width:800px){
  body[data-listo-mode="host"] .listo-host-floating-dock,
  body[data-listo-mode="host"] .listo-dashboard-v2__dock{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
  body[data-listo-mode="host"] .listo-host-floating-dock__active-bg,
  body[data-listo-mode="host"] .listo-dashboard-v2__dock .listo-host-floating-dock__active-bg{
    width:calc((100% - 14px)/6)!important;
  }
  body[data-listo-mode="host"] .listo-host-floating-dock > a,
  body[data-listo-mode="host"] .listo-host-floating-dock > button{
    padding-left:2px!important;
    padding-right:2px!important;
    gap:2px!important;
  }
  body[data-listo-mode="host"] .listo-host-floating-dock .listo-dashboard-v2__dock-icon{
    width:18px!important;
    height:18px!important;
    flex-basis:18px!important;
  }
}
@media (max-width:380px){
  body[data-listo-mode="host"] .listo-host-floating-dock > a,
  body[data-listo-mode="host"] .listo-host-floating-dock > button{
    font-size:8px!important;
  }
  body[data-listo-mode="host"] .listo-host-floating-dock .listo-dashboard-v2__dock-icon{
    width:17px!important;
    height:17px!important;
    flex-basis:17px!important;
  }
}
/* Correct active-slot mapping for the six-item order. */
@media (max-width:800px){
  .listo-dashboard-v2__dock[data-dock-active="home"]{--dock-active-index:0!important;}
  .listo-dashboard-v2__dock[data-dock-active="bookings"]{--dock-active-index:1!important;}
  .listo-dashboard-v2__dock[data-dock-active="calendar"]{--dock-active-index:2!important;}
  .listo-dashboard-v2__dock[data-dock-active="listings"]{--dock-active-index:3!important;}
  .listo-dashboard-v2__dock[data-dock-active="inbox"]{--dock-active-index:4!important;}
  .listo-dashboard-v2__dock[data-dock-active="more"]{--dock-active-index:5!important;}
}

/* NEXT1020 — Canonical six-item active-state correction.
   The Host dock is now Home, Bookings, Calendar, Listings, Inbox, More.
   Keep the active background geometry and server-side mapping identical on
   every Host page, including Calendar and shared account docks. */
@media (max-width:800px){
  body[data-listo-mode="host"] .listo-host-floating-dock__active-bg,
  body[data-listo-mode="host"] .listo-dashboard-v2__dock .listo-host-floating-dock__active-bg{
    left:6px!important;
    width:calc((100% - 12px)/6)!important;
    transform:translate3d(calc(var(--dock-active-index,0) * 100%),0,0)!important;
  }
  .listo-host-floating-dock[data-dock-active="home"],
  .listo-dashboard-v2__dock[data-dock-active="home"]{--dock-active-index:0!important;}
  .listo-host-floating-dock[data-dock-active="bookings"],
  .listo-dashboard-v2__dock[data-dock-active="bookings"]{--dock-active-index:1!important;}
  .listo-host-floating-dock[data-dock-active="calendar"],
  .listo-dashboard-v2__dock[data-dock-active="calendar"]{--dock-active-index:2!important;}
  .listo-host-floating-dock[data-dock-active="listings"],
  .listo-dashboard-v2__dock[data-dock-active="listings"]{--dock-active-index:3!important;}
  .listo-host-floating-dock[data-dock-active="inbox"],
  .listo-dashboard-v2__dock[data-dock-active="inbox"]{--dock-active-index:4!important;}
  .listo-host-floating-dock[data-dock-active="more"],
  .listo-dashboard-v2__dock[data-dock-active="more"]{--dock-active-index:5!important;}
}

/* NEXT1019 — Contextual mobile workspace picker + six-item Host dock refinement.
   The picker is a compact two-option control anchored above the dock item the
   Host selected. It never occupies the full dock width and has no label. */
@media (max-width:800px){
  .listo-host-workspace-switcher{
    left:var(--workspace-picker-left,50%)!important;
    right:auto!important;
    width:min(156px,calc(100vw - 32px))!important;
    max-width:156px!important;
    height:42px!important;
    bottom:88px!important;
    padding:4px!important;
    transform:translate(-50%,8px)!important;
    border-radius:14px!important;
  }
  .listo-host-workspace-switcher.is-visible{
    transform:translate(-50%,0)!important;
  }
  .listo-host-workspace-switcher__toggle{
    width:100%!important;
    height:34px!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:3px!important;
  }
  .listo-host-workspace-switcher a{
    height:34px!important;
    min-height:34px!important;
    font-size:11px!important;
    font-weight:780!important;
  }
  .listo-host-workspace-switcher__label{display:none!important}

  body[data-listo-mode="host"] .listo-host-floating-dock,
  body[data-listo-mode="host"] .listo-dashboard-v2__dock{
    width:calc(100vw - 24px)!important;
    max-width:none!important;
  }

  /* The Inbox chat/details exemption remains authoritative. */
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-workspace-switcher,
  body[data-listo-mode="host"].listo-inbox-info-open .listo-host-workspace-switcher{
    display:none!important;
  }
}
@media (max-width:380px){
  .listo-host-workspace-switcher{width:min(148px,calc(100vw - 28px))!important;max-width:148px!important;bottom:86px!important}
  .listo-host-workspace-switcher a{font-size:10px!important}
  body[data-listo-mode="host"] .listo-host-floating-dock,
  body[data-listo-mode="host"] .listo-dashboard-v2__dock{width:calc(100vw - 18px)!important}
}


/* NEXT1021 — Top Host workspace switcher concept.
   Home is intentionally excluded because it is the consolidated Staycation +
   Parking business overview. Primary workspace pages expose a compact,
   always-available Staycation/Parking switcher directly beneath the header. */
.listo-host-workspace-switcher{
  display:none!important;
}
@media (max-width:800px){
  .listo-host-workspace-switcher{
    display:block!important;
    position:relative!important;
    z-index:20!important;
    width:min(100% - 32px,1200px)!important;
    margin:12px auto 0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  .listo-host-workspace-switcher__inner{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    width:min(100%,360px)!important;
    min-height:42px!important;
    margin:0 auto!important;
    padding:4px!important;
    border:1px solid #DCE5EA!important;
    border-radius:14px!important;
    background:#FFFFFF!important;
    box-shadow:0 4px 14px rgba(24,39,52,.06)!important;
    box-sizing:border-box!important;
  }
  .listo-host-workspace-switcher__eyebrow{
    flex:0 0 auto!important;
    padding:0 4px 0 8px!important;
    color:#82919A!important;
    font-size:8px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.10em!important;
    text-transform:uppercase!important;
  }
  .listo-host-workspace-switcher__toggle{
    flex:1 1 auto!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:3px!important;
    height:34px!important;
  }
  .listo-host-workspace-switcher a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    height:34px!important;
    border-radius:10px!important;
    color:#667781!important;
    text-decoration:none!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:780!important;
    transition:background .16s ease,color .16s ease!important;
  }
  .listo-host-workspace-switcher a.is-active{
    color:#146EB8!important;
    background:#EAF5FF!important;
  }
  .listo-host-workspace-switcher a.is-active.listo-host-workspace-switcher__parking{
    color:#B95E00!important;
    background:#FFF1E3!important;
  }
  /* The switcher is a page-level control now; it no longer participates in
     the floating dock's open/close state. */
  .listo-host-workspace-switcher + .listo-dashboard-v2__dock,
  .listo-host-workspace-switcher + .listo-host-account-floating-shell{
    margin-top:0!important;
  }
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-workspace-switcher,
  body[data-listo-mode="host"].listo-inbox-info-open .listo-host-workspace-switcher{
    display:block!important;
  }
}
@media (min-width:801px){
  .listo-host-workspace-switcher{display:none!important}
}
@media (max-width:380px){
  .listo-host-workspace-switcher{width:calc(100% - 24px)!important;margin-top:10px!important}
  .listo-host-workspace-switcher__inner{width:min(100%,340px)!important}
  .listo-host-workspace-switcher__eyebrow{font-size:7.5px!important;padding-left:6px!important}
  .listo-host-workspace-switcher a{font-size:10px!important}
}

/* NEXT1022 final mobile visibility guard — the workspace switcher is a
   mobile navigation element on all Host pages except consolidated Home. */
@media (max-width:900px){
  body[data-listo-mode="host"]:not(:has(.listo-host-home--analytics)) .listo-host-context-nav{display:block!important;}
  body[data-listo-mode="host"]:has(.listo-host-home--analytics) .listo-host-context-nav{display:none!important;}
}


/* ========================================================================
   NEXT1025 — Unified Host Mode page-title treatment
   The page title confirms the current workspace without becoming the visual
   feature of the page. Presentation only: existing routing, content,
   actions, data, and interaction hooks remain unchanged.
   ======================================================================== */
body[data-listo-mode="host"] .listo-host-page-title-standard {
  box-sizing: border-box !important;
}

/* Shared title row: text is the orientation element; decorative title icons
   are suppressed in Host Mode so every workspace uses the same treatment. */
body[data-listo-mode="host"] .listo-host-page-title-standard.listo-page-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  min-height: 30px !important;
}
body[data-listo-mode="host"] .listo-host-page-title-standard.listo-page-title-row > .listo-page-title__icon {
  display: none !important;
}
body[data-listo-mode="host"] .listo-host-page-title-standard.listo-page-title-row > h1,
body[data-listo-mode="host"] .listo-host-page-title-standard.listo-page-title-row .listo-inbox__heading {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 26px !important;
  line-height: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: #172631 !important;
}

/* Shared header-based title structure used by Bookings, Listings, Inbox and
   Calendar & Pricing. Actions remain on the same row where already present. */
body[data-listo-mode="host"] .listo-host-page-title-standard.listo-host-page-header,
body[data-listo-mode="host"] .listo-host-page-title-standard.listo-host-app-page__header {
  margin: 0 0 20px !important;
  padding: 0 !important;
  min-height: 30px !important;
  box-sizing: border-box !important;
}
body[data-listo-mode="host"] .listo-host-page-title-standard.listo-host-page-header h1,
body[data-listo-mode="host"] .listo-host-page-title-standard.listo-host-app-page__header h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 26px !important;
  line-height: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: #172631 !important;
}
body[data-listo-mode="host"] .listo-host-page-title-standard.listo-host-page-header p,
body[data-listo-mode="host"] .listo-host-page-title-standard.listo-host-app-page__header p {
  margin: 5px 0 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  color: #70818D !important;
}

/* Header actions are intentionally not restyled here; this rule only keeps
   them aligned with the compact title baseline. */
body[data-listo-mode="host"] .listo-host-page-title-standard.listo-host-page-header,
body[data-listo-mode="host"] .listo-host-page-title-standard.listo-host-app-page__header {
  align-items: flex-start !important;
}

/* Page-title rows with a description immediately below retain the same
   title-to-description rhythm. */
body[data-listo-mode="host"] .listo-host-page-title-standard + .listo-page-description,
body[data-listo-mode="host"] .listo-host-page-title-standard + .listo-page-intro {
  margin-top: -15px !important;
}

@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-host-page-title-standard.listo-page-title-row {
    min-height: 27px !important;
    margin-bottom: 14px !important;
  }
  body[data-listo-mode="host"] .listo-host-page-title-standard.listo-page-title-row > h1,
  body[data-listo-mode="host"] .listo-host-page-title-standard.listo-page-title-row .listo-inbox__heading,
  body[data-listo-mode="host"] .listo-host-page-title-standard.listo-host-page-header h1,
  body[data-listo-mode="host"] .listo-host-page-title-standard.listo-host-app-page__header h1 {
    font-size: 22px !important;
    line-height: 27px !important;
    letter-spacing: -.015em !important;
  }
  body[data-listo-mode="host"] .listo-host-page-title-standard.listo-host-page-header,
  body[data-listo-mode="host"] .listo-host-page-title-standard.listo-host-app-page__header {
    min-height: 27px !important;
    margin-bottom: 14px !important;
    padding: 0 2px !important;
  }
  body[data-listo-mode="host"] .listo-host-page-title-standard.listo-host-page-header p,
  body[data-listo-mode="host"] .listo-host-page-title-standard.listo-host-app-page__header p {
    margin-top: 4px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }
}

/* ========================================================================== 
   NEXT1026 — Host Mode page-title spacing & sizing refinement
   Exact shared geometry requested for all Host workspaces. Presentation only;
   no routing, data, actions, or interaction behavior is changed.
   ========================================================================== */
body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row {
  margin: 26px 0 6px !important;
  padding: 0 !important;
  min-height: 29px !important;
  gap: 0 !important;
}
body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row > h1,
body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row .listo-inbox__heading {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
}

/* Host page-title rows never use decorative icons. */
body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row > .listo-page-title__icon {
  display: none !important;
}

/* Header-based titles (Bookings, Listings, Inbox and related workspaces).
   The title and description share the same compact title hierarchy. */
body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-page-header,
body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-app-page__header {
  margin: 26px 0 22px !important;
  padding: 0 !important;
  min-height: 0 !important;
}
body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-page-header h1,
body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-app-page__header h1 {
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
}
body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-page-header p,
body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-app-page__header p {
  margin: 0 0 22px !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--ink-muted) !important;
}

/* Standalone descriptions immediately following a title row. */
body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row + .listo-page-title-subtitle,
body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row + .listo-page-intro,
body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row + .listo-caption,
body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row + .listo-host-page-description {
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--ink-muted) !important;
}

/* No-description title rows reserve only the requested compact workspace gap. */
body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row:not(:has(+ .listo-page-title-subtitle)):not(:has(+ .listo-page-intro)):not(:has(+ .listo-caption)):not(:has(+ .listo-host-page-description)) {
  margin-bottom: 22px !important;
}

@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row {
    margin: 18px 0 5px !important;
    min-height: 25px !important;
  }
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row > h1,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row .listo-inbox__heading {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
  }

  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-page-header,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-app-page__header {
    margin: 18px 0 16px !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-page-header h1,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-app-page__header h1 {
    margin: 0 0 5px !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
  }
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-page-header p,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-app-page__header p {
    margin: 0 0 16px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
  }

  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row + .listo-page-title-subtitle,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row + .listo-page-intro,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row + .listo-caption,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row + .listo-host-page-description {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row:not(:has(+ .listo-page-title-subtitle)):not(:has(+ .listo-page-intro)):not(:has(+ .listo-caption)):not(:has(+ .listo-host-page-description)) {
    margin-bottom: 20px !important;
  }
}

/* ========================================================================
   NEXT1027 — Host mobile workspace controls use the same tactile marketplace
   pill language as the public mobile homepage.
   ------------------------------------------------------------------------
   Presentation only. The existing Staycation/Parking routes, context state,
   and cross-document View Transition behavior remain unchanged.
   ======================================================================== */
@media (max-width: 900px) {
  body[data-listo-mode="host"] .listo-host-context-nav {
    padding: 10px 0 9px !important;
    background: #fff !important;
    border: 0 !important;
  }

  body[data-listo-mode="host"] .listo-host-context-nav__inner {
    width: calc(100% - 24px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  body[data-listo-mode="host"] .listo-host-context-nav__switcher {
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 1px 1px 5px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Remove the old sliding active surface. Each workspace is now an
     independent marketplace-style pill. */
  body[data-listo-mode="host"] .listo-host-context-nav__switcher::before {
    display: none !important;
    content: none !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill,
  body[data-listo-mode="host"] .listo-host-context-pill.is-active,
  body[data-listo-mode="host"] .listo-host-context-pill.is-active:hover {
    position: relative !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 33px !important;
    height: 33px !important;
    padding: 0 10px !important;
    border: 1px solid #e1e4e7 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: #fff !important;
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow:
      0 2px 4px rgba(26,26,26,.10),
      0 1px 1px rgba(26,26,26,.04) !important;
    transform: translateY(0) scale(1) !important;
    transition:
      transform .11s ease,
      box-shadow .11s ease,
      background-color .11s ease,
      border-color .11s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill:hover {
    background: #fff !important;
    color: var(--ink) !important;
    transform: translateY(0) scale(1) !important;
    box-shadow:
      0 2px 4px rgba(26,26,26,.10),
      0 1px 1px rgba(26,26,26,.04) !important;
  }

  /* Selected workspace stays visually pressed, matching the homepage's
     selected marketplace category. */
  /* NEXT1098 — Selected Host system pills use their system color as the
     active surface. Keep the dimensional icon artwork untouched and keep
     the label in its semantic system color; the pill itself carries the
     strongest color signal. */
  body[data-listo-mode="host"] .listo-host-context-pill.is-active {
    background: #2196F3 !important;
    border-color: #2196F3 !important;
    color: #0B5EA8 !important;
    transform: translateY(1px) scale(.985) !important;
    box-shadow:
      inset 0 2px 5px rgba(13,73,126,.16),
      inset 0 0 0 1px rgba(255,255,255,.16),
      0 2px 5px rgba(33,150,243,.20) !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill--parking.is-active {
    background: #FFB300 !important;
    border-color: #FFB300 !important;
    color: #7A4A00 !important;
    box-shadow:
      inset 0 2px 5px rgba(122,74,0,.16),
      inset 0 0 0 1px rgba(255,255,255,.20),
      0 2px 5px rgba(255,179,0,.22) !important;
  }

  /* Keep the icon artwork in its original full-color state. */
  body[data-listo-mode="host"] .listo-host-context-pill.is-active .listo-host-context-pill__icon,
  body[data-listo-mode="host"] .listo-host-context-pill.is-active .listo-host-context-pill__icon img {
    filter: none !important;
    opacity: 1 !important;
  }

  /* Physical press feedback keeps the same system-colored surface so the
     pill does not flash back to a neutral gray during navigation. */
  body[data-listo-mode="host"] .listo-host-context-pill:active,
  body[data-listo-mode="host"] .listo-host-context-pill.is-active:active {
    transform: translateY(1px) scale(.965) !important;
  }
  body[data-listo-mode="host"] .listo-host-context-pill--staycation:active,
  body[data-listo-mode="host"] .listo-host-context-pill--staycation.is-active:active {
    background: #2196F3 !important;
    border-color: #2196F3 !important;
    color: #0B5EA8 !important;
  }
  body[data-listo-mode="host"] .listo-host-context-pill--parking:active,
  body[data-listo-mode="host"] .listo-host-context-pill--parking.is-active:active {
    background: #FFB300 !important;
    border-color: #FFB300 !important;
    color: #7A4A00 !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill__icon {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill__icon img {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    object-fit: contain !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill__copy {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    line-height: 1 !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill__copy strong {
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {
  body[data-listo-mode="host"] .listo-host-context-nav__switcher {
    gap: 6px !important;
  }
  body[data-listo-mode="host"] .listo-host-context-pill {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

/* ========================================================================
   NEXT1030 — Host advertising slot sized to the marketplace promo card
   ------------------------------------------------------------------------
   Match the visual footprint of the marketplace promotional banner: a
   compact 570px × 213px card on mobile/standard content widths. The
   artwork is cropped into this fixed card ratio so advertisers can use
   richer creative without changing the page geometry.
   ======================================================================== */
/* NEXT1034 — Host advertising slot is mobile-only. Keep the shared
   component out of the desktop layout entirely; the Host workspace shell
   should retain its normal desktop geometry. */
.listo-host-ad {
  display: none !important;
}

.listo-host-ad__link {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(26,26,26,.08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  text-decoration: none;
}

.listo-host-ad__image {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .listo-host-ad {
    display: block !important;
    width: min(570px, calc(100% - 48px));
    aspect-ratio: 570 / 213;
    height: auto !important;
    max-height: none;
    margin: 16px auto 18px !important;
    box-sizing: border-box;
  }
}

@media (max-width: 380px) {
  .listo-host-ad {
    width: calc(100% - 32px);
    aspect-ratio: 570 / 213;
    max-height: none;
    margin-top: 12px !important;
  }
}

/* ========================================================================
   NEXT1034 — Host ad slot is mobile-only
   ------------------------------------------------------------------------
   The advertising component remains shared in the Host header, but is
   intentionally rendered only at mobile widths. Desktop Host pages retain
   their existing header → workspace navigation geometry with no ad space.
   ======================================================================== */

/* ========================================================================
   NEXT1031 — Center Host workspace pills + tighten title entry spacing
   ------------------------------------------------------------------------
   Mobile presentation only. The Staycation/Parking workspace selector is
   centered beneath the Host ad, and the first page title begins 20px after
   the selector rather than inheriting the older large section offset.
   Routing, workspace state, navigation, content and actions are unchanged.
   ======================================================================== */
@media (max-width: 900px) {
  body[data-listo-mode="host"] .listo-host-context-nav__inner {
    justify-content: center !important;
  }

  body[data-listo-mode="host"] .listo-host-context-nav__switcher {
    justify-content: center !important;
  }

  /* The first Host workspace content should start from the context-nav
     boundary. The title itself supplies the requested 20px breathing room. */
  body[data-listo-mode="host"] .listo-main > .listo-container.listo-section,
  body[data-listo-mode="host"] .listo-main > .listo-host-app-page,
  body[data-listo-mode="host"] .listo-main > .listo-host-account-page,
  body[data-listo-mode="host"] .listo-main > .listo-inbox-page,
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell {
    padding-top: 0 !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-container.listo-section > .listo-host-page-title-standard:first-child,
  body[data-listo-mode="host"] .listo-main > .listo-host-app-page > .listo-host-page-title-standard:first-child,
  body[data-listo-mode="host"] .listo-main > .listo-host-account-page > .listo-host-page-title-standard:first-child,
  body[data-listo-mode="host"] .listo-main > .listo-inbox-page > .listo-host-page-title-standard:first-child,
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell > .listo-page-title-row:first-child {
    margin-top: 20px !important;
  }

  /* Some Host pages use the shared title row rather than the header variant. */
  body[data-listo-mode="host"] .listo-main > .listo-container.listo-section > .listo-page-title-row:first-child {
    margin-top: 20px !important;
  }
}

/* ========================================================================
   NEXT1032 — Minimal Host pill-to-title spacing
   ------------------------------------------------------------------------
   Keep the centered Staycation/Parking switcher visually close to the first
   page title on mobile Host workspace pages. This removes inherited section
   spacing from the workspace shell without changing the ad/header spacing,
   navigation, routes, or page content.
   ======================================================================== */
@media (max-width: 900px) {
  body[data-listo-mode="host"] .listo-host-context-nav {
    margin-bottom: 0 !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-host-app-page,
  body[data-listo-mode="host"] .listo-main > .listo-container.listo-section,
  body[data-listo-mode="host"] .listo-main > .listo-host-account-page,
  body[data-listo-mode="host"] .listo-main > .listo-inbox-page,
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell {
    padding-top: 0 !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-host-app-page > .listo-host-page-header:first-child,
  body[data-listo-mode="host"] .listo-main > .listo-host-app-page > .listo-host-app-page__header:first-child,
  body[data-listo-mode="host"] .listo-main > .listo-container.listo-section > .listo-host-page-header:first-child,
  body[data-listo-mode="host"] .listo-main > .listo-container.listo-section > .listo-host-app-page__header:first-child,
  body[data-listo-mode="host"] .listo-main > .listo-container.listo-section > .listo-page-title-row:first-child,
  body[data-listo-mode="host"] .listo-main > .listo-host-account-page > .listo-page-title-row:first-child,
  body[data-listo-mode="host"] .listo-main > .listo-inbox-page > .listo-inbox-page__header:first-child,
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell > .listo-page-title-row:first-child {
    margin-top: var(--listo-host-pill-title-gap, 16px) !important;
  }
}

/* ========================================================================
   NEXT1033 — Host mobile shell vertical-entry reset
   ------------------------------------------------------------------------
   The pill-to-title gap was not coming from the title margin alone. Older
   Host shell rules can contribute top spacing through the main canvas and
   page-shell containers. Establish one explicit mobile entry geometry for
   workspace pages so the first title follows the centered workspace pills
   by only 8px.

   Host Home is excluded because it intentionally has no workspace pills.
   Listing creation/edit forms remain focused workflows and are excluded.
   Presentation-only; no routing, data, actions, or interaction behavior is
   changed.
   ======================================================================== */
@media (max-width: 900px) {
  body[data-listo-mode="host"]:not(:has(.listo-host-home--analytics)) .listo-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body[data-listo-mode="host"]:not(:has(.listo-host-home--analytics)) .listo-host-context-nav {
    margin-bottom: 0 !important;
  }

  body[data-listo-mode="host"]:not(:has(.listo-host-home--analytics)) .listo-main > .listo-container.listo-section,
  body[data-listo-mode="host"]:not(:has(.listo-host-home--analytics)) .listo-main > .listo-host-app-page,
  body[data-listo-mode="host"]:not(:has(.listo-host-home--analytics)) .listo-main > .listo-host-account-page,
  body[data-listo-mode="host"]:not(:has(.listo-host-home--analytics)) .listo-main > .listo-inbox-page,
  body[data-listo-mode="host"]:not(:has(.listo-host-home--analytics)) .listo-main > .listo-host-parking-page-shell {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body[data-listo-mode="host"]:not(:has(.listo-host-home--analytics)) .listo-main > .listo-container.listo-section > .listo-host-page-header:first-child,
  body[data-listo-mode="host"]:not(:has(.listo-host-home--analytics)) .listo-main > .listo-host-app-page > .listo-host-page-header:first-child,
  body[data-listo-mode="host"]:not(:has(.listo-host-home--analytics)) .listo-main > .listo-host-app-page > .listo-host-app-page__header:first-child,
  body[data-listo-mode="host"]:not(:has(.listo-host-home--analytics)) .listo-main > .listo-host-account-page > .listo-page-title-row:first-child,
  body[data-listo-mode="host"]:not(:has(.listo-host-home--analytics)) .listo-main > .listo-inbox-page > .listo-inbox-page__header:first-child,
  body[data-listo-mode="host"]:not(:has(.listo-host-home--analytics)) .listo-main > .listo-host-parking-page-shell > .listo-page-title-row:first-child {
    margin-top: var(--listo-host-pill-title-gap, 16px) !important;
  }

  /* Staycation Bookings uses .listo-host-page-header inside the shared
     .listo-section shell. Keep its existing title/description typography,
     but remove every inherited top offset before the 8px entry gap. */
  body.listo-host-staycation-bookings-app .listo-bookings-page-shell {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.listo-host-staycation-bookings-app .listo-bookings-page-shell > .listo-host-page-header:first-child {
    margin-top: var(--listo-host-pill-title-gap, 16px) !important;
  }
}

/* ========================================================================
   NEXT1036 - Host mobile pill-to-title gap: remove the phantom spacer
   ------------------------------------------------------------------------
   Root cause of the persistent large gap (NEXT1031-1035 only adjusted
   margins on other elements): the legacy .listo-host-workspace-switcher
   (NEXT1021 top switcher) is rendered by header.php between the pills and
   <main>. It is invisible (opacity:0, pointer-events:none, translated away)
   but was still position:relative; display:block; height:42px;
   margin-top:12px, so it held ~54px of blank layout space.

   Fix: take it out of the layout on mobile Host pages (the visible
   Staycation/Parking pills are .listo-host-context-nav). The Inbox chat
   states that intentionally show it are excluded. Then the whole
   pill-to-title distance is one value: --listo-host-pill-title-gap.
   This is measured from the bottom of the pill switcher to the top of the
   page title block. Presentation-only; desktop is unchanged.
   ======================================================================== */
:root { --listo-host-pill-title-gap: 16px; } /* NEXT1037: 16px token = about 20px measured from the pill edge to the title block */
@media (max-width: 900px) {
  body[data-listo-mode="host"]:not(.listo-host-inbox-chat-open):not(.listo-inbox-info-open) .listo-host-workspace-switcher {
    display: none !important;
  }

  body[data-listo-mode="host"]:not(:has(.listo-host-home--analytics)) .listo-host-context-nav {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ========================================================================
   NEXT1038 - Host Home (mobile): 20px between what sits above and the greeting
   ------------------------------------------------------------------------
   Host Home has no Staycation/Parking pills. On mobile the greeting used to
   start 18px under the Host ad banner (the banner's bottom margin), and
   flush against the header (0px) when no ad is enabled. Now the greeting
   starts exactly one gap below whatever sits directly above it: the ad if
   one is shown, otherwise the header. The gap is one token, matching the
   20px used between the pills and the page title on the other Host pages.
   The ad's bottom margin is zeroed on Home only so the two never add up.
   Mobile only; desktop Home keeps its existing spacing.
   ======================================================================== */
:root { --listo-host-home-greeting-gap: 20px; }
@media (max-width: 900px) {
  body[data-listo-mode="host"]:has(.listo-host-home--analytics) .listo-host-ad {
    margin-bottom: 0 !important;
  }

  /* Needs .listo-container.listo-section to out-rank the NEXT1031/1032 "padding-top: 0" shell rules. */
  body[data-listo-mode="host"] .listo-main > .listo-container.listo-section.listo-host-home--analytics {
    margin-top: 0 !important;
    padding-top: var(--listo-host-home-greeting-gap, 20px) !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-host-home--analytics > .listo-dashboard-v2__header:first-child {
    margin-top: 0 !important;
  }
}

/* NEXT1040 — Host mobile dock icons use the same dimensional image-asset format
   as the Staycation/Parking context icons. The dock icon itself is 10% larger
   than NEXT1039 while retaining the existing five-slot geometry. */
@media(max-width:800px){
  .listo-host-floating-dock .listo-dashboard-v2__dock-icon,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon{width:22px!important;height:22px!important;}
  .listo-host-floating-dock .listo-dashboard-v2__dock-icon img,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon img{width:22px!important;height:22px!important;max-width:22px!important;max-height:22px!important;}
}

/* NEXT1041 — Mobile Host floating dock: full-width equal slots, larger icons,
   and distinct Bookings/Calendar visual identities. */
@media(max-width:800px){
  .listo-host-floating-dock,
  .listo-dashboard-v2__dock{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    padding:4px!important;
  }
  .listo-host-floating-dock>a,
  .listo-host-floating-dock>button,
  .listo-dashboard-v2__dock>a,
  .listo-dashboard-v2__dock>button{
    width:100%!important;
    min-width:0!important;
    min-height:52px!important;
    padding:4px 2px!important;
    gap:2px!important;
    box-sizing:border-box!important;
  }
  .listo-host-floating-dock .listo-dashboard-v2__dock-icon,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon{
    width:26px!important;
    height:26px!important;
  }
  .listo-host-floating-dock .listo-dashboard-v2__dock-icon img,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon img{
    width:26px!important;
    height:26px!important;
    max-width:26px!important;
    max-height:26px!important;
  }
  .listo-host-floating-dock__active-bg{
    top:4px!important;
    bottom:4px!important;
    left:4px!important;
    width:calc((100% - 8px)/5)!important;
    border-radius:14px!important;
  }
}

/* NEXT1042 — Mobile Host floating dock proportional spacing refinement.
   The five primary destinations now use the full tray as five equal visual
   zones. Icon and label scale together so the dock reads as a deliberate
   navigation bar rather than five small controls floating inside it. */
@media(max-width:800px){
  .listo-host-floating-dock,
  .listo-dashboard-v2__dock{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-auto-columns:auto!important;
    width:auto!important;
    padding:5px!important;
    column-gap:0!important;
    align-items:stretch!important;
  }

  .listo-host-floating-dock>a,
  .listo-host-floating-dock>button,
  .listo-dashboard-v2__dock>a,
  .listo-dashboard-v2__dock>button{
    width:100%!important;
    min-width:0!important;
    min-height:62px!important;
    height:62px!important;
    padding:4px 2px 5px!important;
    gap:3px!important;
    box-sizing:border-box!important;
    justify-self:stretch!important;
    font-size:11px!important;
    line-height:1.05!important;
  }

  .listo-host-floating-dock .listo-dashboard-v2__dock-icon,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon{
    width:32px!important;
    height:32px!important;
    flex:0 0 32px!important;
    display:grid!important;
    place-items:center!important;
  }

  .listo-host-floating-dock .listo-dashboard-v2__dock-icon img,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon img{
    width:32px!important;
    height:32px!important;
    max-width:32px!important;
    max-height:32px!important;
  }

  .listo-host-floating-dock__active-bg{
    top:5px!important;
    bottom:5px!important;
    left:5px!important;
    width:calc((100% - 10px)/5)!important;
    border-radius:15px!important;
  }
}

@media(max-width:380px){
  .listo-host-floating-dock,
  .listo-dashboard-v2__dock{padding:4px!important}
  .listo-host-floating-dock>a,
  .listo-host-floating-dock>button,
  .listo-dashboard-v2__dock>a,
  .listo-dashboard-v2__dock>button{
    min-height:60px!important;
    height:60px!important;
    font-size:10.5px!important;
  }
  .listo-host-floating-dock .listo-dashboard-v2__dock-icon,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon,
  .listo-host-floating-dock .listo-dashboard-v2__dock-icon img,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon img{
    width:30px!important;
    height:30px!important;
    max-width:30px!important;
    max-height:30px!important;
  }
  .listo-host-floating-dock__active-bg{
    top:4px!important;
    bottom:4px!important;
    left:4px!important;
    width:calc((100% - 8px)/5)!important;
  }
}

/* ========================================================================
   NEXT1044 — Mobile Host Inbox conversation takeover (clean NEXT1042 base)
   ------------------------------------------------------------------------
   NEXT1043's separate bottom-sheet/backdrop layer conflicted with the
   established mobile Inbox state machine and dock geometry. This revision
   keeps NEXT1042's dock untouched and uses the existing thread-open state as
   the single source of truth. On phones the active conversation becomes a
   viewport-level Messenger-style surface; the Special Offer/details panel
   remains the existing right-side tray above it.
   ======================================================================== */
@media (max-width:800px){
  body[data-listo-mode="host"].listo-host-inbox-chat-open{
    overflow:hidden!important;
  }

  /* The conversation owns the app viewport while open. It still enters from
     the bottom, but there is no second sheet/backdrop DOM competing with the
     existing Inbox layout. */
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-inbox--host .listo-inbox__thread{
    position:fixed!important;
    inset:0!important;
    z-index:10035!important;
    display:flex!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:var(--listo-inbox-vv-height,100dvh)!important;
    max-height:var(--listo-inbox-vv-height,100dvh)!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    grid-column:auto!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    overflow:hidden!important;
    animation:listo-next1044-chat-in .22s cubic-bezier(.22,.75,.25,1) both;
  }

  @keyframes listo-next1044-chat-in{
    from{transform:translateY(100%)}
    to{transform:translateY(0)}
  }

  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-inbox--host .listo-inbox__thread-active{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    background:#fff!important;
    overflow:hidden!important;
  }

  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-inbox--host .listo-inbox__thread-header{
    position:relative!important;
    flex:0 0 auto!important;
    width:100%!important;
    margin:0!important;
    background:#fff!important;
    z-index:2!important;
  }

  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-inbox--host .listo-inbox__messages{
    flex:1 1 0!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    background:#fff!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
  }

  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-inbox--host .listo-inbox__composer{
    position:relative!important;
    inset:auto!important;
    flex:0 0 auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
    background:#fff!important;
    z-index:3!important;
    padding-bottom:max(8px,env(safe-area-inset-bottom))!important;
  }

  /* Focus mode: navigation is hidden only while a conversation is actually
     open. NEXT1042's normal five-slot dock rules remain completely intact. */
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-floating-dock,
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-floating-dock__backdrop,
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-floating-dock__more-panel{
    display:none!important;
  }

  /* Existing Special Offer/details side tray stays above the conversation. */
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-inbox-mobile-info-backdrop{
    z-index:10045!important;
  }
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-inbox-sidebar{
    z-index:10050!important;
  }
}

/* ========================================================================
   NEXT1045 — Mobile Host Inbox chat portal: true top layer
   ------------------------------------------------------------------------
   The active Host conversation is temporarily portalled to <body> while
   open on phones. This removes it from the Inbox/main stacking context, so
   the Messenger-style chat surface can sit above the Staycation/Parking
   context pills, page title, ad, and Host header without changing the
   normal page layout when the conversation is closed.
   ======================================================================== */
@media (max-width:800px){
  body[data-listo-mode="host"] > #listo-inbox-thread.listo-inbox-mobile-chat-portal{
    position:fixed!important;
    inset:0!important;
    z-index:2147483000!important;
    display:flex!important;
    width:100vw!important;
    max-width:none!important;
    min-width:0!important;
    height:var(--listo-inbox-vv-height,100dvh)!important;
    max-height:var(--listo-inbox-vv-height,100dvh)!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    overflow:hidden!important;
    transform:none!important;
    animation:listo-next1045-chat-in .22s cubic-bezier(.22,.75,.25,1) both;
  }

  body[data-listo-mode="host"] > #listo-inbox-thread.listo-inbox-mobile-chat-portal .listo-inbox__thread-active{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    background:#fff!important;
    overflow:hidden!important;
  }

  body[data-listo-mode="host"] > #listo-inbox-thread.listo-inbox-mobile-chat-portal .listo-inbox__thread-header{
    position:relative!important;
    top:auto!important;
    flex:0 0 auto!important;
    width:100%!important;
    margin:0!important;
    background:#fff!important;
    z-index:2!important;
  }

  body[data-listo-mode="host"] > #listo-inbox-thread.listo-inbox-mobile-chat-portal .listo-inbox__messages{
    flex:1 1 0!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    background:#fff!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
  }

  body[data-listo-mode="host"] > #listo-inbox-thread.listo-inbox-mobile-chat-portal .listo-inbox__composer{
    position:relative!important;
    inset:auto!important;
    flex:0 0 auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
    background:#fff!important;
    z-index:3!important;
    padding-bottom:max(8px,env(safe-area-inset-bottom))!important;
  }

  body[data-listo-mode="host"] > #listo-inbox-thread.listo-inbox-mobile-chat-portal .listo-inbox__composer textarea{
    min-width:0!important;
    width:auto!important;
    flex:1 1 auto!important;
  }

  body[data-listo-mode="host"] > #listo-inbox-thread.listo-inbox-mobile-chat-portal .listo-inbox__composer-icon-btn,
  body[data-listo-mode="host"] > #listo-inbox-thread.listo-inbox-mobile-chat-portal .listo-inbox__composer-send{
    flex:0 0 auto!important;
  }

  body[data-listo-mode="host"] > #listo-inbox-thread.listo-inbox-mobile-chat-portal.listo-inbox-mobile-chat-portal .listo-inbox__thread-empty{
    display:none!important;
  }

  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-context-nav,
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-page-title-standard,
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-inbox-page__header{
    /* The portalled conversation itself is above these surfaces. No layout
       changes are made to them; they are simply covered by the chat layer. */
  }
}

@keyframes listo-next1045-chat-in{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}

/* ========================================================================
   NEXT1046 — Mobile Host Inbox details / Special Offer tray top layer
   ------------------------------------------------------------------------
   NEXT1045 correctly portals the conversation to the document body so it
   can sit above the page chrome. That also means the existing Guest &
   booking / Special Offer tray must explicitly outrank the portalled chat.
   Keep the tray's existing geometry and behavior; only its stacking order
   is changed so the header arrow can reliably reveal it above the chat.
   ======================================================================== */
@media (max-width:800px){
  body[data-listo-mode="host"].listo-host-inbox-chat-open #listo-inbox-mobile-info-backdrop,
  body[data-listo-mode="host"] #listo-inbox-mobile-info-backdrop{
    z-index:2147483005!important;
  }

  body[data-listo-mode="host"].listo-host-inbox-chat-open #listo-inbox-sidebar,
  body[data-listo-mode="host"] #listo-inbox-sidebar{
    z-index:2147483010!important;
  }

  /* Ensure the open state is never hidden by an inline display reset while
     the chat is active. The existing JS remains responsible for opening and
     closing the tray. */
  body[data-listo-mode="host"].listo-host-inbox-chat-open #listo-inbox-sidebar.is-open{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

  body[data-listo-mode="host"].listo-host-inbox-chat-open #listo-inbox-mobile-info-backdrop{
    visibility:visible!important;
  }
}

/* NEXT1047 — compact mobile Host Inbox conversation rows.
   Keep only the guest name, booking status, and profile photo in the
   conversation list. Listing/date metadata remains available inside the
   opened conversation and booking context. */
@media (max-width: 800px) {
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item {
    min-height: 62px !important;
    padding: 9px 12px !important;
    gap: 10px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__photo {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__time,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__stay,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__vertical,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__preview {
    display: none !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__body {
    min-width: 0 !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__top-row {
    display: block !important;
    line-height: 18px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__title {
    display: block !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__context {
    display: block !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    line-height: 17px !important;
  }
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-context-badge {
    display: inline !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #172631 !important;
    font-size: 12px !important;
    line-height: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }
}

/* NEXT1048 — Mobile Host floating dock alignment refinement.
   Keep the five equal slots, but make each icon/label pair a fixed visual unit
   so every destination shares the same vertical center and baseline. */
@media(max-width:800px){
  .listo-host-floating-dock,
  .listo-dashboard-v2__dock{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    padding:5px!important;
  }

  .listo-host-floating-dock>a,
  .listo-host-floating-dock>button,
  .listo-dashboard-v2__dock>a,
  .listo-dashboard-v2__dock>button{
    min-width:0!important;
    min-height:58px!important;
    height:58px!important;
    padding:3px 2px!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-rows:32px 13px!important;
    align-content:center!important;
    justify-items:center!important;
    align-items:center!important;
    gap:2px!important;
    line-height:13px!important;
    font-size:10px!important;
    font-weight:750!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }

  .listo-host-floating-dock .listo-dashboard-v2__dock-icon,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon{
    width:30px!important;
    height:32px!important;
    min-width:30px!important;
    min-height:32px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    padding:0!important;
    line-height:0!important;
  }

  .listo-host-floating-dock .listo-dashboard-v2__dock-icon img,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon img{
    width:30px!important;
    height:30px!important;
    max-width:30px!important;
    max-height:30px!important;
    display:block!important;
    object-fit:contain!important;
    margin:0!important;
  }

  .listo-host-floating-dock>a>span:last-child:not(.listo-account-notification-badge):not(.listo-dashboard-v2__dock-icon),
  .listo-host-floating-dock>button>span:last-child:not(.listo-account-notification-badge):not(.listo-dashboard-v2__dock-icon),
  .listo-dashboard-v2__dock>a>span:last-child:not(.listo-account-notification-badge):not(.listo-dashboard-v2__dock-icon),
  .listo-dashboard-v2__dock>button>span:last-child:not(.listo-account-notification-badge):not(.listo-dashboard-v2__dock-icon){
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:13px!important;
    margin:0!important;
    padding:0!important;
    line-height:13px!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }

  .listo-host-floating-dock__active-bg{
    top:5px!important;
    bottom:5px!important;
    left:5px!important;
    width:calc((100% - 10px)/5)!important;
    border-radius:13px!important;
  }
}

@media(max-width:380px){
  .listo-host-floating-dock>a,
  .listo-host-floating-dock>button,
  .listo-dashboard-v2__dock>a,
  .listo-dashboard-v2__dock>button{
    min-height:56px!important;
    height:56px!important;
    grid-template-rows:30px 12px!important;
    line-height:12px!important;
    font-size:9px!important;
  }
  .listo-host-floating-dock .listo-dashboard-v2__dock-icon,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon{
    width:28px!important;
    height:30px!important;
    min-width:28px!important;
    min-height:30px!important;
  }
  .listo-host-floating-dock .listo-dashboard-v2__dock-icon img,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon img{
    width:28px!important;
    height:28px!important;
    max-width:28px!important;
    max-height:28px!important;
  }
  .listo-host-floating-dock>a>span:last-child:not(.listo-account-notification-badge):not(.listo-dashboard-v2__dock-icon),
  .listo-host-floating-dock>button>span:last-child:not(.listo-account-notification-badge):not(.listo-dashboard-v2__dock-icon),
  .listo-dashboard-v2__dock>a>span:last-child:not(.listo-account-notification-badge):not(.listo-dashboard-v2__dock-icon),
  .listo-dashboard-v2__dock>button>span:last-child:not(.listo-account-notification-badge):not(.listo-dashboard-v2__dock-icon){
    height:12px!important;
    line-height:12px!important;
  }
}

/* NEXT1049 — Mobile Host dock fills the entire tray with true equal-width
   navigation cells.  The icon/label group stays centered inside each cell,
   while the five cells themselves span the full inner tray width. */
@media(max-width:800px){
  .listo-host-floating-dock,
  .listo-dashboard-v2__dock{
    padding:4px!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;
    column-gap:0!important;
    row-gap:0!important;
    align-items:stretch!important;
  }

  .listo-host-floating-dock>a,
  .listo-host-floating-dock>button,
  .listo-dashboard-v2__dock>a,
  .listo-dashboard-v2__dock>button{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    justify-self:stretch!important;
    align-self:stretch!important;
    min-height:56px!important;
    box-sizing:border-box!important;
    gap:2px!important;
  }

  .listo-host-floating-dock .listo-dashboard-v2__dock-icon,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon{
    width:32px!important;
    height:32px!important;
    flex:0 0 32px!important;
  }

  .listo-host-floating-dock .listo-dashboard-v2__dock-icon img,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon img{
    width:32px!important;
    height:32px!important;
    max-width:32px!important;
    max-height:32px!important;
  }

  .listo-host-floating-dock>a,
  .listo-host-floating-dock>button,
  .listo-dashboard-v2__dock>a,
  .listo-dashboard-v2__dock>button{
    font-size:11px!important;
    line-height:13px!important;
    font-weight:750!important;
    white-space:nowrap!important;
  }

  .listo-host-floating-dock__active-bg,
  .listo-dashboard-v2__dock .listo-host-floating-dock__active-bg{
    top:4px!important;
    bottom:4px!important;
    left:4px!important;
    width:calc((100% - 8px)/5)!important;
    border-radius:14px!important;
  }
}

@media(max-width:380px){
  .listo-host-floating-dock,
  .listo-dashboard-v2__dock{padding:3px!important}
  .listo-host-floating-dock>a,
  .listo-host-floating-dock>button,
  .listo-dashboard-v2__dock>a,
  .listo-dashboard-v2__dock>button{min-height:54px!important;font-size:10px!important;line-height:12px!important}
  .listo-host-floating-dock .listo-dashboard-v2__dock-icon,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon{width:30px!important;height:30px!important;flex-basis:30px!important}
  .listo-host-floating-dock .listo-dashboard-v2__dock-icon img,
  .listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon img{width:30px!important;height:30px!important;max-width:30px!important;max-height:30px!important}
  .listo-host-floating-dock__active-bg,
  .listo-dashboard-v2__dock .listo-host-floating-dock__active-bg{top:3px!important;bottom:3px!important;left:3px!important;width:calc((100% - 6px)/5)!important}
}

/* NEXT1050 — Mobile Inbox surface cleanup.
   Keep the search field itself, but remove the extra container surrounding it.
   Remove divider lines from compact Host conversation rows. */
@media (max-width: 800px) {
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 8px 0 12px !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search-wrap {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item {
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item.is-active {
    border: 0 !important;
    border-left: 0 !important;
  }
}

/* NEXT1051 — Final mobile Inbox surface cleanup.
   The search input is the only visible search surface; its wrapper is
   structural only. Compact conversation rows have no visible borders. */
@media (max-width: 800px) {
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search-wrap {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item:hover,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item:active,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item.is-active {
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
}

/* NEXT1052 — Canonical mobile Host dock: five menu controls must occupy the
   entire inner tray on every Host page. Explicit grid-column placement keeps
   the navigation cells full-width even when the dock contains the absolute
   active background element or page-specific dock rules. */
@media (max-width:800px){
  body[data-listo-mode="host"] .listo-host-floating-dock,
  body[data-listo-mode="host"] .listo-dashboard-v2__dock{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;
    grid-auto-flow:initial!important;
    grid-auto-columns:auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    padding:4px!important;
    column-gap:0!important;
    row-gap:0!important;
    justify-content:stretch!important;
    justify-items:stretch!important;
    align-items:stretch!important;
  }

  body[data-listo-mode="host"] .listo-host-floating-dock > a:nth-child(2),
  body[data-listo-mode="host"] .listo-dashboard-v2__dock > a:nth-child(2){grid-column:1!important;}
  body[data-listo-mode="host"] .listo-host-floating-dock > a:nth-child(3),
  body[data-listo-mode="host"] .listo-dashboard-v2__dock > a:nth-child(3){grid-column:2!important;}
  body[data-listo-mode="host"] .listo-host-floating-dock > a:nth-child(4),
  body[data-listo-mode="host"] .listo-dashboard-v2__dock > a:nth-child(4){grid-column:3!important;}
  body[data-listo-mode="host"] .listo-host-floating-dock > a:nth-child(5),
  body[data-listo-mode="host"] .listo-dashboard-v2__dock > a:nth-child(5){grid-column:4!important;}
  body[data-listo-mode="host"] .listo-host-floating-dock > button:nth-child(6),
  body[data-listo-mode="host"] .listo-dashboard-v2__dock > button:nth-child(6){grid-column:5!important;}

  body[data-listo-mode="host"] .listo-host-floating-dock > a,
  body[data-listo-mode="host"] .listo-host-floating-dock > button,
  body[data-listo-mode="host"] .listo-dashboard-v2__dock > a,
  body[data-listo-mode="host"] .listo-dashboard-v2__dock > button{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    justify-self:stretch!important;
    align-self:stretch!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  body[data-listo-mode="host"] .listo-host-floating-dock__active-bg,
  body[data-listo-mode="host"] .listo-dashboard-v2__dock .listo-host-floating-dock__active-bg{
    grid-column:auto!important;
    width:calc((100% - 8px)/5)!important;
    left:4px!important;
    right:auto!important;
  }
}

@media (max-width:380px){
  body[data-listo-mode="host"] .listo-host-floating-dock,
  body[data-listo-mode="host"] .listo-dashboard-v2__dock{padding:3px!important;}
  body[data-listo-mode="host"] .listo-host-floating-dock__active-bg,
  body[data-listo-mode="host"] .listo-dashboard-v2__dock .listo-host-floating-dock__active-bg{
    width:calc((100% - 6px)/5)!important;
    left:3px!important;
  }
}


/* NEXT1053 — Mobile Host Inbox conversation pills + read/unread hierarchy.
   The list surface is transparent; each conversation becomes a subtle white
   pill/card. The mobile subline shows the latest message when available and
   falls back to the booking/inquiry status. Unread rows are intentionally
   stronger; once opened/read, typography returns to normal weight. */
@media (max-width:800px){
  body[data-listo-mode="host"] .listo-inbox--host{
    border-top:0!important;
    background:transparent!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list{
    background:transparent!important;
    border-right:0!important;
    box-shadow:none!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    padding:8px 0 12px!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search-wrap{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    padding:0!important;
    margin:0!important;
    width:100%!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search{
    width:100%!important;
    box-sizing:border-box!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item:hover,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item:active,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item.is-active{
    width:calc(100% - 16px)!important;
    margin:0 8px 10px!important;
    padding:12px 14px!important;
    min-height:68px!important;
    box-sizing:border-box!important;
    border:0!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 1px 5px rgba(23,38,49,.08)!important;
    transform:none!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item.is-active{
    background:#fff!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__photo{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    flex:0 0 42px!important;
    margin-top:0!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__body{
    min-width:0!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__top-row{
    display:block!important;
    line-height:19px!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__title{
    display:block!important;
    font-size:15px!important;
    line-height:19px!important;
    font-weight:500!important;
    color:var(--ink)!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__time,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__listing-tag,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__stay,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__vertical,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__preview,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__context,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-context-badge{
    display:none!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__mobile-subline{
    display:block!important;
    margin-top:1px!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:13px!important;
    line-height:18px!important;
    font-weight:400!important;
    color:var(--ink-muted)!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item.is-unread .listo-inbox-thread-item__title,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item.is-unread .listo-inbox-thread-item__mobile-subline{
    font-weight:700!important;
    color:var(--ink)!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item__new{
    display:none!important;
  }
}

/* ========================================================================
   NEXT1054 — Mobile Host Inbox surface simplification + selected thread tint
   ------------------------------------------------------------------------
   Mobile-only presentation refinement. Removes the descriptive line and the
   large Inbox/list surface so the search field and conversation pills sit
   directly on the page. Selected conversations use the Listo brand tint.
   ======================================================================== */
@media (max-width:800px){
  body[data-listo-mode="host"] .listo-inbox-page__description{
    display:none!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list{
    border:0!important;
    border-top:0!important;
    border-right:0!important;
    border-bottom:0!important;
    border-left:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list{
    padding:0!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__list-head{
    display:none!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host{
    padding:0 0 12px!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host .listo-inbox__search-wrap{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    padding:0!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item.is-active,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item.is-active:hover,
  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox-thread-item.is-active:active{
    background:var(--listo-green-tint)!important;
    box-shadow:0 1px 5px rgba(33,150,243,.10)!important;
  }
}

/* ========================================================================
   NEXT1055 — Mobile Host Inbox title/search spacing cleanup
   ------------------------------------------------------------------------
   The Inbox description is intentionally hidden on mobile. Remove any
   residual title/header separator and create the requested 15px visual gap
   between the page title and the Search conversations control.
   ======================================================================== */
@media (max-width:800px){
  body[data-listo-mode="host"] .listo-inbox-page__header,
  body[data-listo-mode="host"] .listo-inbox-page__header::before,
  body[data-listo-mode="host"] .listo-inbox-page__header::after,
  body[data-listo-mode="host"] .listo-inbox-page__header .listo-inbox__heading,
  body[data-listo-mode="host"] .listo-inbox-page__header .listo-inbox__heading::before,
  body[data-listo-mode="host"] .listo-inbox-page__header .listo-inbox__heading::after{
    border:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
    background-image:none!important;
  }

  body[data-listo-mode="host"] .listo-inbox-page__header{
    margin-bottom:15px!important;
    padding-bottom:0!important;
  }

  body[data-listo-mode="host"] .listo-inbox--host .listo-inbox__toolbar--host{
    margin-top:0!important;
  }
}


/* ========================================================================
   NEXT1056 - Mobile Host Inbox: no description, no title line, 15px gap
   ------------------------------------------------------------------------
   Root cause of NEXT1054/1055 not taking effect: the NEXT1011-R2 rule
   ".listo-inbox-page__header .listo-inbox-page__description { display:block
   !important }" has higher specificity than the NEXT1054 hide rule, so the
   description kept rendering, and the header kept its 55px min-height, which
   let the search box overlap the wrapped description text.
   Fix: the description is no longer output for the Host Inbox (template),
   and this block hard-resets the header so it is only as tall as the title.
   Spacing between the "Inbox" title and the search box is exactly 15px.
   ======================================================================== */
@media (max-width:800px){
  body[data-listo-mode="host"].listo-host-inbox-app .listo-main > .listo-inbox-page > .listo-inbox-page__header .listo-inbox-page__description,
  body[data-listo-mode="host"].listo-host-inbox-app .listo-inbox-page__header .listo-inbox-page__description{
    display:none!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  body[data-listo-mode="host"].listo-host-inbox-app .listo-inbox-page .listo-inbox-page__header{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    margin-bottom:0!important;
    padding-bottom:0!important;
    border:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
    background:none!important;
    overflow:visible!important;
  }
  body[data-listo-mode="host"].listo-host-inbox-app .listo-inbox-page .listo-inbox-page__header::before,
  body[data-listo-mode="host"].listo-host-inbox-app .listo-inbox-page .listo-inbox-page__header::after,
  body[data-listo-mode="host"].listo-host-inbox-app .listo-inbox-page .listo-inbox-page__header .listo-inbox__heading::before,
  body[data-listo-mode="host"].listo-host-inbox-app .listo-inbox-page .listo-inbox-page__header .listo-inbox__heading::after{
    display:none!important;
    content:none!important;
    border:0!important;
    background:none!important;
  }
  body[data-listo-mode="host"].listo-host-inbox-app .listo-inbox-page .listo-inbox-page__header .listo-inbox__heading{
    margin:0!important;
    padding-bottom:0!important;
    border:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
    background-image:none!important;
  }

  /* Title bottom edge to search box top edge = 15px, from one place only. */
  body[data-listo-mode="host"].listo-host-inbox-app .listo-inbox-page .listo-inbox--host{
    margin-top:0!important;
    padding-top:0!important;
  }
  body[data-listo-mode="host"].listo-host-inbox-app .listo-inbox-page .listo-inbox--host .listo-inbox__list{
    padding-top:0!important;
    margin-top:0!important;
  }
  body[data-listo-mode="host"].listo-host-inbox-app .listo-inbox-page .listo-inbox--host .listo-inbox__toolbar--host{
    margin-top:0!important;
    padding-top:15px!important;
  }
}

/* ========================================================================
   NEXT1057 - Mobile Host Inbox list: scroll-independent, no container frame
   ------------------------------------------------------------------------
   With the page scrolled to the top, the Inbox list showed a framed panel
   (border + tinted surface) around the search box and a thin line under the
   title. The panel was a fixed-height workspace box whose height was also
   rewritten by JS on every scroll, and older desktop rules kept re-adding the
   frame. On mobile the list is now plain page content: no frame, no fixed
   height, identical at every scroll position. #listo-inbox / #listo-inbox-list
   IDs are used so these rules win over the earlier class-only overrides.
   Title -> search gap stays exactly 15px.
   ======================================================================== */
@media (max-width:800px){
  body[data-listo-mode="host"] #listo-inbox.listo-inbox--host{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-top:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  body[data-listo-mode="host"] #listo-inbox.listo-inbox--host > #listo-inbox-list.listo-inbox__list{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  body[data-listo-mode="host"] #listo-inbox-list .listo-inbox__toolbar--host{
    position:static!important;
    margin:0!important;
    padding:15px 0 12px!important;
    border:0!important;
    border-bottom:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body[data-listo-mode="host"] #listo-inbox-list .listo-inbox__toolbar--host .listo-inbox__search-wrap{
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    min-height:0!important;
    height:auto!important;
  }
  /* The search input is the only visible search surface. */
  body[data-listo-mode="host"] #listo-inbox-list .listo-inbox__toolbar--host .listo-inbox__search{
    width:100%!important;
    box-sizing:border-box!important;
    min-height:46px!important;
    border:1px solid var(--border)!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  /* Room above the fixed dock so the last row is never covered. */
  body[data-listo-mode="host"] #listo-inbox-list{
    padding-bottom:0!important;
  }
}

/* ========================================================================
   NEXT1058 - Mobile Host Inbox: status always visible under the guest name
   ------------------------------------------------------------------------
   1) Conversation rows: the line under the name is the status (Inquiry or
      Booked reservation), for server-rendered and live-refreshed rows alike.
   2) Opened chat: on mobile the conversation is moved to <body> (portal), so
      the header rules scoped to ".listo-inbox--host" no longer matched the
      status line. Portal-scoped rules restore name -> status directly below.
   ======================================================================== */
@media (max-width:800px){
  body[data-listo-mode="host"] #listo-inbox-list .listo-inbox-thread-item__mobile-subline.listo-inbox-thread-item__status{
    display:block!important;
    margin-top:1px!important;
    font-size:13px!important;
    line-height:18px!important;
    font-weight:600!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    color:#8A5B00!important;
  }
  body[data-listo-mode="host"] #listo-inbox-list .listo-inbox-thread-item__status--booked{color:#155E9C!important}

  body[data-listo-mode="host"] > #listo-inbox-thread.listo-inbox-mobile-chat-portal .listo-inbox__thread-header-copy{
    display:block!important;
    min-width:0!important;
  }
  body[data-listo-mode="host"] > #listo-inbox-thread.listo-inbox-mobile-chat-portal .listo-inbox__thread-header-meta{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:1px!important;
    margin:1px 0 0!important;
    line-height:16px!important;
    overflow:hidden!important;
  }
  body[data-listo-mode="host"] > #listo-inbox-thread.listo-inbox-mobile-chat-portal #listo-inbox-thread-status{
    display:block!important;
    order:-1!important;
    justify-self:start!important;
    padding:0!important;
    background:transparent!important;
    border-radius:0!important;
    font-size:12px!important;
    line-height:16px!important;
    font-weight:700!important;
    white-space:nowrap!important;
    color:#8A5B00!important;
  }
  body[data-listo-mode="host"] > #listo-inbox-thread.listo-inbox-mobile-chat-portal #listo-inbox-thread-status.listo-inbox__thread-header-status--booked{color:#155E9C!important}
  body[data-listo-mode="host"] > #listo-inbox-thread.listo-inbox-mobile-chat-portal #listo-inbox-thread-stay{
    display:block!important;
    font-size:11.5px!important;
    color:#6A7785!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body[data-listo-mode="host"] > #listo-inbox-thread.listo-inbox-mobile-chat-portal #listo-inbox-thread-stay:empty{display:none!important}
  body[data-listo-mode="host"] > #listo-inbox-thread.listo-inbox-mobile-chat-portal #listo-inbox-thread-chat-id{display:none!important}
}

/* ========================================================================
   NEXT1059 - Host dock: active highlight follows the real five-slot order
   ------------------------------------------------------------------------
   Root cause: the NEXT1018/NEXT1020 rules still mapped the dock as SIX items
   (Home, Bookings, Calendar, Listings, Inbox, More), so data-dock-active
   ="inbox" forced --dock-active-index:4 with !important. The dock has been
   five items since Listings moved under More (Home, Bookings, Calendar,
   Inbox, More), so slot 4 is More: tapping Inbox highlighted More.
   The mapping below matches the current order and out-ranks the old rules.
   Listings pages live under More, so they keep the More slot.
   ======================================================================== */
body[data-listo-mode="host"] .listo-host-floating-dock[data-dock-active="home"],
body[data-listo-mode="host"] .listo-dashboard-v2__dock[data-dock-active="home"]{--dock-active-index:0!important}
body[data-listo-mode="host"] .listo-host-floating-dock[data-dock-active="bookings"],
body[data-listo-mode="host"] .listo-dashboard-v2__dock[data-dock-active="bookings"]{--dock-active-index:1!important}
body[data-listo-mode="host"] .listo-host-floating-dock[data-dock-active="calendar"],
body[data-listo-mode="host"] .listo-dashboard-v2__dock[data-dock-active="calendar"]{--dock-active-index:2!important}
body[data-listo-mode="host"] .listo-host-floating-dock[data-dock-active="inbox"],
body[data-listo-mode="host"] .listo-dashboard-v2__dock[data-dock-active="inbox"]{--dock-active-index:3!important}
body[data-listo-mode="host"] .listo-host-floating-dock[data-dock-active="more"],
body[data-listo-mode="host"] .listo-dashboard-v2__dock[data-dock-active="more"],
body[data-listo-mode="host"] .listo-host-floating-dock[data-dock-active="listings"],
body[data-listo-mode="host"] .listo-dashboard-v2__dock[data-dock-active="listings"]{--dock-active-index:4!important}
@media (max-width:800px){
  body[data-listo-mode="host"] .listo-host-floating-dock[data-dock-active="home"],
  body[data-listo-mode="host"] .listo-dashboard-v2__dock[data-dock-active="home"]{--dock-active-index:0!important}
  body[data-listo-mode="host"] .listo-host-floating-dock[data-dock-active="bookings"],
  body[data-listo-mode="host"] .listo-dashboard-v2__dock[data-dock-active="bookings"]{--dock-active-index:1!important}
  body[data-listo-mode="host"] .listo-host-floating-dock[data-dock-active="calendar"],
  body[data-listo-mode="host"] .listo-dashboard-v2__dock[data-dock-active="calendar"]{--dock-active-index:2!important}
  body[data-listo-mode="host"] .listo-host-floating-dock[data-dock-active="inbox"],
  body[data-listo-mode="host"] .listo-dashboard-v2__dock[data-dock-active="inbox"]{--dock-active-index:3!important}
  body[data-listo-mode="host"] .listo-host-floating-dock[data-dock-active="more"],
  body[data-listo-mode="host"] .listo-dashboard-v2__dock[data-dock-active="more"],
  body[data-listo-mode="host"] .listo-host-floating-dock[data-dock-active="listings"],
  body[data-listo-mode="host"] .listo-dashboard-v2__dock[data-dock-active="listings"]{--dock-active-index:4!important}
}

/* ========================================================================
   NEXT1060 - Host dock: highlight moves to More while the More menu is open
   ------------------------------------------------------------------------
   The dock script moves the highlight by setting --dock-active-index inline,
   but the server-state mapping above uses !important, which beats inline
   styles, so the highlight never left the current page. While the More menu
   is open (body.is-more-open) the highlight is forced to the More slot; when
   the menu closes, it returns to the current page automatically.
   ======================================================================== */
body.is-more-open[data-listo-mode="host"] .listo-host-floating-dock,
body.is-more-open[data-listo-mode="host"] .listo-dashboard-v2__dock,
body.is-more-open[data-listo-mode="host"] .listo-host-floating-dock[data-dock-active],
body.is-more-open[data-listo-mode="host"] .listo-dashboard-v2__dock[data-dock-active]{
  --dock-active-index:4!important;
}
@media (max-width:800px){
  body.is-more-open[data-listo-mode="host"] .listo-host-floating-dock[data-dock-active],
  body.is-more-open[data-listo-mode="host"] .listo-dashboard-v2__dock[data-dock-active]{
    --dock-active-index:4!important;
  }
}


/* ========================================================================
   NEXT1061 — Parking Bookings 2.0 operational workspace
   Built on NEXT1060. Presentation/workspace refinement only: existing
   rental queries, statuses, permissions, AJAX actions and detail URLs stay.
   ======================================================================== */
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header{
  margin:24px 0 20px!important;
  padding:0!important;
  min-height:0!important;
  text-align:left!important;
}
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header h1{
  margin:0 0 6px!important;
  font-size:24px!important;
  line-height:29px!important;
  min-height:0!important;
  font-weight:600!important;
  letter-spacing:normal!important;
  color:#172631!important;
  text-align:left!important;
}
body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header .listo-host-bookings-description{
  margin:0!important;
  padding:0!important;
  width:auto!important;
  max-width:none!important;
  min-height:0!important;
  font-size:14px!important;
  line-height:21px!important;
  font-weight:400!important;
  color:#70818D!important;
  text-align:left!important;
}

.listo-host-parking-bookings .listo-parking-needs-action{
  margin:0 0 20px;
  padding:16px 18px;
  border:1px solid #e1e8ed;
  border-radius:14px;
  background:#fff;
}
.listo-host-parking-bookings .listo-parking-needs-action__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.listo-host-parking-bookings .listo-parking-needs-action__header h2{
  margin:0;
  font-size:16px;
  line-height:20px;
  font-weight:700;
  color:#24323c;
}
.listo-host-parking-bookings .listo-parking-needs-action__header p{
  margin:3px 0 0;
  color:#71808b;
  font-size:12px;
  line-height:17px;
}
.listo-host-parking-bookings .listo-parking-needs-action__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background:#fff1e6;
  color:#e35c00;
  font-size:11px;
  font-weight:800;
}
.listo-host-parking-bookings .listo-parking-needs-action__list{border-top:1px solid #edf1f4}
.listo-host-parking-bookings .listo-parking-needs-action__item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:11px 0;
  border-bottom:1px solid #edf1f4;
}
.listo-host-parking-bookings .listo-parking-needs-action__item:last-child{border-bottom:0}
.listo-host-parking-bookings .listo-parking-needs-action__main{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  gap:3px;
  color:inherit;
  text-decoration:none;
}
.listo-host-parking-bookings .listo-parking-needs-action__main strong{
  font-size:12px;
  line-height:16px;
  font-weight:700;
  color:#263640;
}
.listo-host-parking-bookings .listo-parking-needs-action__main > span:last-child{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  line-height:15px;
  color:#71808b;
}
.listo-host-parking-bookings .listo-parking-needs-action__status{
  display:inline-flex;
  align-items:center;
  min-height:19px;
  padding:2px 7px;
  border-radius:999px;
  font-size:9px;
  line-height:14px;
  font-weight:800;
}
.listo-host-parking-bookings .listo-parking-needs-action__status.listo-parking-rental-card__status--pending_approval{color:#a65d00;background:#fff1dc}
.listo-host-parking-bookings .listo-parking-needs-action__status.listo-parking-rental-card__status--host_payment_submitted{color:#a65d00;background:#fff1dc}
.listo-host-parking-bookings .listo-parking-needs-action__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}
.listo-host-parking-bookings .listo-parking-needs-action__actions .listo-btn{
  min-height:32px;
  padding:7px 11px;
  border-radius:9px;
  font-size:10px;
}
.listo-host-parking-bookings .listo-parking-needs-action__actions .listo-caption{
  color:#7a8790;
  font-size:10px;
  white-space:nowrap;
}
.listo-host-parking-bookings .listo-parking-needs-action__more{
  display:inline-block;
  margin-top:10px;
  color:#2196F3;
  font-size:11px;
  font-weight:700;
  text-decoration:none;
}
.listo-host-parking-bookings .listo-parking-needs-action__empty{
  display:flex;
  align-items:center;
  gap:8px;
  padding-top:12px;
  border-top:1px solid #edf1f4;
  color:#71808b;
  font-size:11px;
}
.listo-host-parking-bookings .listo-parking-needs-action__empty strong{color:#263640;font-size:12px}

.listo-host-parking-bookings .listo-host-parking-bookings-stream{margin:0}
.listo-host-parking-bookings .listo-host-parking-bookings-toolbar{margin:0 0 14px}
.listo-host-parking-bookings .listo-parking-booking-tabs{
  display:flex;
  align-items:center;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:none;
  margin:0 0 10px;
  padding:3px;
  border:1px solid #e1e8ed;
  border-radius:12px;
  background:#f7f9fa;
}
.listo-host-parking-bookings .listo-parking-booking-tabs::-webkit-scrollbar{display:none}
.listo-host-parking-bookings .listo-parking-booking-tabs a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex:0 0 auto;
  min-height:34px;
  padding:7px 11px;
  border-radius:9px;
  color:#5e6b74;
  font-size:11px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}
.listo-host-parking-bookings .listo-parking-booking-tabs a:hover{background:#fff;color:#25313a}
.listo-host-parking-bookings .listo-parking-booking-tabs a.is-active{background:#2196F3;color:#fff;box-shadow:0 2px 7px rgba(33,150,243,.18)}
.listo-host-parking-bookings .listo-parking-booking-tabs a span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#e8edf1;
  color:#5d6972;
  font-size:9px;
}
.listo-host-parking-bookings .listo-parking-booking-tabs a.is-active span{background:rgba(255,255,255,.22);color:#fff}
.listo-host-parking-bookings .listo-parking-booking-filter-drawer{
  margin:0 0 10px;
}
.listo-host-parking-bookings .listo-parking-booking-filter-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:32px;
  padding:6px 10px;
  border:1px solid #dfe6eb;
  border-radius:9px;
  background:#fff;
  color:#52616b;
  font-size:10px;
  font-weight:800;
  line-height:18px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.listo-host-parking-bookings .listo-parking-booking-filter-trigger::-webkit-details-marker{display:none}
.listo-host-parking-bookings .listo-parking-booking-filter-trigger:hover{border-color:#cbd7de;color:#263640}
.listo-host-parking-bookings .listo-parking-booking-filter-trigger__count{
  display:inline-flex;
  align-items:center;
  min-height:17px;
  padding:0 6px;
  border-radius:999px;
  background:#eaf4ff;
  color:#1976d2;
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.listo-host-parking-bookings .listo-parking-booking-filter-trigger__chevron{
  font-size:13px;
  line-height:12px;
  transform:translateY(-1px);
}
.listo-host-parking-bookings .listo-parking-booking-filter-drawer[open] .listo-parking-booking-filter-trigger__chevron{transform:rotate(180deg) translateY(1px)}
.listo-host-parking-bookings .listo-parking-booking-filter-drawer[open] .listo-parking-booking-filter-trigger{border-color:#c9dce9;background:#f8fbfd;color:#253943}
.listo-host-parking-bookings .listo-parking-booking-filters{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(160px,220px) minmax(140px,180px) minmax(120px,150px) auto auto;
  align-items:end;
  gap:8px;
  padding:10px;
  border:1px solid #e1e8ed;
  border-radius:12px;
  background:#fff;
}
.listo-host-parking-bookings .listo-parking-booking-filter-drawer[open] .listo-parking-booking-filters{margin-top:7px}
.listo-host-parking-bookings .listo-parking-booking-filters label{min-width:0}
.listo-host-parking-bookings .listo-parking-booking-filters label>span{
  display:block;
  margin:0 0 4px;
  color:#7a8790;
  font-size:9px;
  line-height:12px;
  font-weight:800;
}
.listo-host-parking-bookings .listo-parking-booking-filters input,
.listo-host-parking-bookings .listo-parking-booking-filters select{
  width:100%;
  height:36px;
  box-sizing:border-box;
  padding:7px 10px;
  border:1px solid #dfe6eb;
  border-radius:9px;
  background:#fff;
  color:#2b3a44;
  font-size:11px;
}
.listo-host-parking-bookings .listo-parking-booking-filters__search{padding-top:16px}
.listo-host-parking-bookings .listo-parking-booking-filters .listo-btn{
  min-height:36px;
  padding:8px 13px;
  border-radius:9px;
  font-size:10px;
  white-space:nowrap;
}
.listo-host-parking-bookings .listo-parking-booking-filters__clear{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 4px;
  color:#66757f;
  font-size:10px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.listo-host-parking-bookings .listo-host-parking-bookings-stream__heading{margin:18px 0 9px}
.listo-host-parking-bookings .listo-host-parking-bookings-stream__heading h2{font-size:17px;line-height:21px;font-weight:700}
.listo-host-parking-bookings .listo-host-parking-bookings-stream__heading p{font-size:11px;line-height:16px;margin-top:3px}

.listo-host-parking-bookings .listo-parking-rental-card__view{
  display:inline-flex!important;
  align-items:center;
  gap:4px;
  color:#2196F3!important;
  font-size:10px!important;
  font-weight:700;
  white-space:nowrap;
}
.listo-host-parking-bookings .listo-parking-rental-card__view b{font-size:12px;font-weight:700}
.listo-host-parking-bookings .listo-parking-rental-card__actions--payment .listo-caption{flex:1;min-width:0}

@media(max-width:1050px){
  .listo-host-parking-bookings .listo-parking-booking-filters{grid-template-columns:minmax(200px,1fr) 1fr 1fr 1fr auto}
  .listo-host-parking-bookings .listo-parking-booking-filters__clear{grid-column:auto}
  .listo-host-parking-bookings .listo-parking-rental-card__body{grid-template-columns:145px minmax(150px,1fr) minmax(150px,1fr) 95px!important;gap:11px!important}
}
@media(max-width:760px){
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header{
    margin:16px 0 16px!important;
    padding:0!important;
    text-align:left!important;
  }
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header h1{
    font-size:20px!important;
    line-height:25px!important;
    font-weight:600!important;
    text-align:left!important;
  }
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell.listo-host-parking-bookings > .listo-host-bookings-header .listo-host-bookings-description{
    font-size:13px!important;
    line-height:18px!important;
    text-align:left!important;
  }
  .listo-host-parking-bookings .listo-parking-needs-action{padding:13px 12px;margin-bottom:16px;border-radius:12px}
  .listo-host-parking-bookings .listo-parking-needs-action__header{margin-bottom:9px}
  .listo-host-parking-bookings .listo-parking-needs-action__item{grid-template-columns:1fr;gap:9px;padding:10px 0}
  .listo-host-parking-bookings .listo-parking-needs-action__actions{justify-content:flex-start}
  .listo-host-parking-bookings .listo-parking-needs-action__main > span:last-child{white-space:normal}
  .listo-host-parking-bookings .listo-parking-booking-tabs{margin-bottom:8px;padding:3px}
  .listo-host-parking-bookings .listo-parking-booking-tabs a{min-height:36px;padding:8px 11px}
  .listo-host-parking-bookings .listo-parking-booking-filters{
    grid-template-columns:1fr 1fr;
    gap:7px;
    padding:8px;
  }
  .listo-host-parking-bookings .listo-parking-booking-filters__search{grid-column:1/-1;padding-top:0}
  .listo-host-parking-bookings .listo-parking-booking-filters .listo-btn{width:100%}
  .listo-host-parking-bookings .listo-parking-booking-filters__clear{width:100%}
  .listo-host-parking-bookings .listo-host-parking-bookings-stream__heading{margin:14px 0 8px}
  .listo-host-parking-bookings .listo-parking-rental-card__body{grid-template-columns:1fr auto!important;gap:7px 12px!important;padding:12px 0!important}
  .listo-host-parking-bookings .listo-parking-rental-card__timeblock{grid-column:1/-1}
  .listo-host-parking-bookings .listo-parking-rental-card__booking,
  .listo-host-parking-bookings .listo-parking-rental-card__space{grid-column:1}
  .listo-host-parking-bookings .listo-parking-rental-card__amount{grid-column:2;grid-row:2/4;align-self:end!important}
  .listo-host-parking-bookings .listo-parking-rental-card__view{font-size:9px!important}
  .listo-host-parking-bookings .listo-parking-rental-card__actions{padding:8px 0!important;flex-wrap:wrap}
  .listo-host-parking-bookings .listo-parking-rental-card__actions .listo-btn{flex:1;min-width:0}
}
@media(max-width:390px){
  .listo-host-parking-bookings .listo-parking-booking-filters{grid-template-columns:1fr}
  .listo-host-parking-bookings .listo-parking-booking-filters .listo-btn,
  .listo-host-parking-bookings .listo-parking-booking-filters__clear{grid-column:1}
}

/* ========================================================================
   NEXT1063 — Parking Bookings mobile status stack fix
   ------------------------------------------------------------------------
   The Parking booking status badge inherits an older absolute-position rule.
   On the current mobile booking layout it must participate in normal flow so
   it cannot overlap the reservation date/time beneath it.
   ======================================================================== */
@media (max-width:760px){
  .listo-host-parking-bookings .listo-parking-rental-card__timeblock{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:4px!important;
    min-width:0!important;
  }
  .listo-host-parking-bookings .listo-parking-rental-card__status{
    position:static!important;
    align-self:flex-start!important;
    display:inline-flex!important;
    width:max-content!important;
    margin:0 0 2px!important;
    min-height:18px!important;
    padding:2px 7px!important;
    line-height:14px!important;
    flex:none!important;
  }
  .listo-host-parking-bookings .listo-parking-rental-card__timeblock strong{
    display:block!important;
    margin:0!important;
    line-height:20px!important;
  }
  .listo-host-parking-bookings .listo-parking-rental-card__timeblock>span:last-child{
    display:block!important;
    margin:0!important;
    line-height:17px!important;
  }
}


/* ========================================================================
   NEXT1064 — Parking Calendar & Pricing workspace refinement
   UI-only refinement of the existing NEXT1063 Parking calendar workspace.
   Preserve the existing calendar, date editor, rules, settings, AJAX,
   pricing engine, booking protections and Parking Listing source-of-truth.
   No hour-by-hour availability grid or new operating-hours system.
   ======================================================================== */
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 {
  --listo-cp-border:#e4eaee;
  --listo-cp-muted:#70818d;
  --listo-cp-ink:#172631;
  --listo-cp-blue:#2196F3;
  max-width:1400px !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 > .listo-host-parking-calendar-page__header {
  margin:0 0 18px !important;
  min-height:0 !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 > .listo-host-parking-calendar-page__header h1 {
  font-size:24px !important;
  line-height:29px !important;
  font-weight:600 !important;
  letter-spacing:normal !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 > .listo-host-parking-calendar-page__header p {
  margin:4px 0 0 !important;
  font-size:14px !important;
  line-height:21px !important;
  color:var(--listo-cp-muted) !important;
}

/* Keep listing context compact and clearly subordinate to the calendar. */
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-context {
  display:grid !important;
  grid-template-columns:minmax(250px,360px) minmax(0,1fr) !important;
  align-items:center !important;
  gap:20px !important;
  margin:0 0 14px !important;
  padding:13px 15px !important;
  border:1px solid var(--listo-cp-border) !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:none !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-space-picker--app label > span {
  display:block !important;
  margin:0 0 5px !important;
  color:#607481 !important;
  font-size:11px !important;
  line-height:15px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.045em !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-space-picker--app select {
  width:100% !important;
  min-height:40px !important;
  border:1px solid #dbe4e9 !important;
  border-radius:9px !important;
  background:#fff !important;
  color:var(--listo-cp-ink) !important;
  font-size:14px !important;
  font-weight:600 !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-context > div:last-child {
  min-width:0 !important;
  padding-left:20px !important;
  border-left:1px solid #edf1f3 !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-context > div:last-child > span {
  display:block !important;
  margin-bottom:3px !important;
  color:#80919c !important;
  font-size:10px !important;
  line-height:14px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-context > div:last-child > strong {
  display:block !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:var(--listo-cp-ink) !important;
  font-size:15px !important;
  line-height:20px !important;
  font-weight:650 !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-context > div:last-child > small {
  display:block !important;
  margin-top:2px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:var(--listo-cp-muted) !important;
  font-size:12px !important;
  line-height:17px !important;
}

/* Existing three workspace sections: make the navigation restrained, not pill-heavy. */
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-cp-tabs {
  display:flex !important;
  gap:0 !important;
  margin:0 0 16px !important;
  padding:0 !important;
  border-bottom:1px solid var(--listo-cp-border) !important;
  overflow-x:auto !important;
  scrollbar-width:none !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-cp-tabs::-webkit-scrollbar { display:none !important; }
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-cp-tabs a {
  flex:0 0 auto !important;
  min-height:42px !important;
  padding:11px 14px 10px !important;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#687b87 !important;
  box-shadow:none !important;
  font-size:13px !important;
  font-weight:600 !important;
  white-space:nowrap !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-cp-tabs a:hover {
  background:#f7fafc !important;
  color:var(--listo-cp-ink) !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-cp-tabs a.is-active {
  border-bottom-color:var(--listo-cp-blue) !important;
  background:transparent !important;
  color:var(--listo-cp-blue) !important;
  box-shadow:none !important;
}

/* Calendar is the primary workspace; editor is a compact inspector. */
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-layout-v616 {
  align-items:start !important;
  gap:16px !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-main-card,
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-selected-day-v616 {
  border:1px solid var(--listo-cp-border) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  background:#fff !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-main-card {
  min-width:0 !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-head--v616 {
  min-height:58px !important;
  padding:15px 16px !important;
  border-bottom:1px solid #edf1f3 !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-head--v616 h2 {
  margin:0 !important;
  color:var(--listo-cp-ink) !important;
  font-size:17px !important;
  line-height:22px !important;
  font-weight:650 !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-head--v616 p {
  margin:2px 0 0 !important;
  color:var(--listo-cp-muted) !important;
  font-size:12px !important;
  line-height:17px !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-nav--v616 a {
  box-shadow:none !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-month-grid--v616 {
  padding:10px !important;
  gap:5px !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-legend {
  padding:10px 15px 13px !important;
  border-top:1px solid #edf1f3 !important;
}

/* Selected-date editor: visually explain what can and cannot be changed. */
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-selected-day-v616 {
  position:sticky !important;
  top:18px !important;
  padding:16px !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-selected-day-v616 h2 {
  margin:8px 0 14px !important;
  color:var(--listo-cp-ink) !important;
  font-size:18px !important;
  line-height:23px !important;
  font-weight:650 !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-date-editor__rate-form {
  gap:10px !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-date-editor__notice {
  margin-top:10px !important;
  padding:9px 10px !important;
  border-radius:8px !important;
  background:#f7fafc !important;
  color:#637783 !important;
  font-size:12px !important;
  line-height:17px !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-date-editor__bookings {
  margin-top:14px !important;
  padding-top:13px !important;
  border-top:1px solid #edf1f3 !important;
}

/* Rules and Settings are existing functional areas, presented as operational tools. */
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-cp-section-heading {
  margin:0 0 14px !important;
  padding:0 !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-cp-section-heading h2 {
  margin:0 !important;
  color:var(--listo-cp-ink) !important;
  font-size:18px !important;
  line-height:24px !important;
  font-weight:650 !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-cp-section-heading p {
  margin:3px 0 0 !important;
  color:var(--listo-cp-muted) !important;
  font-size:13px !important;
  line-height:19px !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-cp-rule {
  border:1px solid var(--listo-cp-border) !important;
  border-radius:11px !important;
  box-shadow:none !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-base-rate-note {
  margin-top:12px !important;
  border-radius:10px !important;
  box-shadow:none !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-settings-list {
  border:1px solid var(--listo-cp-border) !important;
  border-radius:11px !important;
  overflow:hidden !important;
  background:#fff !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-settings-row {
  min-height:64px !important;
  padding:13px 15px !important;
  border-bottom:1px solid #edf1f3 !important;
}
body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-settings-row:last-child { border-bottom:0 !important; }

@media (max-width:900px) {
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-context {
    grid-template-columns:1fr !important;
    gap:11px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-context > div:last-child {
    padding:10px 0 0 !important;
    border-left:0 !important;
    border-top:1px solid #edf1f3 !important;
  }
}

@media (max-width:700px) {
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 {
    padding-left:14px !important;
    padding-right:14px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 > .listo-host-parking-calendar-page__header {
    margin-bottom:14px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 > .listo-host-parking-calendar-page__header h1 {
    font-size:20px !important;
    line-height:25px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 > .listo-host-parking-calendar-page__header p {
    margin-top:3px !important;
    font-size:13px !important;
    line-height:19px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-context {
    margin-bottom:10px !important;
    padding:11px !important;
    border-radius:10px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-cp-tabs {
    margin-bottom:12px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-cp-tabs a {
    min-height:39px !important;
    padding:10px 12px 9px !important;
    font-size:12px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-layout-v616 {
    display:block !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-main-card {
    overflow:hidden !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-calendar-head--v616 {
    padding:12px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-month-grid--v616 {
    padding:7px !important;
    gap:3px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-selected-day-v616 {
    position:static !important;
    margin-top:12px !important;
    padding:13px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-selected-day-v616 h2 {
    margin-bottom:12px !important;
    font-size:17px !important;
    line-height:22px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-date-editor__rate-form input {
    min-width:0 !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-cp-rule-heading-actions {
    width:100% !important;
    margin-top:10px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-cp-rule-heading-actions .listo-btn {
    min-height:40px !important;
  }
}

/* ========================================================================
   NEXT1065 — Calendar & Pricing mobile modal/dock and Parking Settings fix
   ------------------------------------------------------------------------
   Keep the existing rule modals and Host Dock behavior intact. On mobile,
   the floating Host Dock must not cover the modal's primary action. The
   shared listo-cp-modal-open state is already used by both Staycation and
   Parking Calendar & Pricing rule forms.
   ======================================================================== */
@media (max-width:700px){
  /* Rule/bulk-rule forms need the full bottom edge of the viewport. */
  body.listo-cp-modal-open .listo-host-floating-dock,
  body.listo-cp-modal-open .listo-dashboard-v2__dock,
  body.listo-cp-modal-open .listo-host-account-floating-shell .listo-host-floating-dock{
    display:none !important;
  }

  /* Parking Settings: keep label, description, and value on distinct rows. */
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-settings-row{
    display:block !important;
    padding:14px 15px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-settings-row > div{
    display:block !important;
    min-width:0 !important;
    width:100% !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-settings-row > div > strong{
    display:block !important;
    margin:0 0 4px !important;
    line-height:20px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-settings-row > div > span{
    display:block !important;
    margin:0 !important;
    line-height:18px !important;
  }
  body[data-listo-mode="host"] .listo-host-parking-calendar-v1064 .listo-parking-settings-row > b{
    display:block !important;
    margin-top:7px !important;
    white-space:normal !important;
    line-height:20px !important;
  }
}


/* ========================================================================
   NEXT1066 — Host Parking Inbox communication workspace
   ------------------------------------------------------------------------
   Restores the canonical Host Inbox identity/description and keeps the
   mobile presentation compact while preserving the existing messaging
   state machine, mobile chat portal, context drawer, and Host Dock rules.
   ======================================================================== */

/* Page identity */
body[data-listo-mode="host"] .listo-inbox-page__header .listo-inbox__heading{
  font-size:24px!important;
  font-weight:600!important;
  line-height:1.2!important;
  letter-spacing:normal!important;
  margin:0 0 6px!important;
  padding:0!important;
}
body[data-listo-mode="host"] .listo-inbox-page__header .listo-inbox-page__description{
  display:block!important;
  font-size:14px!important;
  line-height:1.5!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}
body[data-listo-mode="host"] .listo-inbox-page__header{
  margin-top:24px!important;
  margin-bottom:20px!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}

/* Parking Inbox context panel additions remain restrained and secondary. */
body[data-listo-mode="host"] .listo-inbox-sidebar__parking-context{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #e5e7eb;
}
body[data-listo-mode="host"] .listo-inbox-sidebar__parking-context > div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:0 0 7px;
}
body[data-listo-mode="host"] .listo-inbox-sidebar__parking-context span{
  color:#6b7280;
  font-size:12px;
}
body[data-listo-mode="host"] .listo-inbox-sidebar__parking-context strong{
  color:#111827;
  font-size:12px;
  font-weight:700;
  text-align:right;
  overflow-wrap:anywhere;
}
body[data-listo-mode="host"] .listo-inbox-sidebar__parking-context .listo-btn{
  margin-top:10px;
}

/* Mobile: title -> description -> search, with a compact 15px handoff. */
@media (max-width:800px){
  body[data-listo-mode="host"].listo-host-inbox-app .listo-inbox-page__header{
    margin-top:16px!important;
    margin-bottom:0!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
  }
  body[data-listo-mode="host"].listo-host-inbox-app .listo-inbox-page__header .listo-inbox__heading{
    font-size:20px!important;
    font-weight:600!important;
    line-height:25px!important;
    margin:0 0 4px!important;
  }
  body[data-listo-mode="host"].listo-host-inbox-app .listo-inbox-page__header .listo-inbox-page__description{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    font-size:13px!important;
    line-height:18px!important;
    overflow:visible!important;
  }
  body[data-listo-mode="host"].listo-host-inbox-app .listo-inbox-page .listo-inbox--host{
    margin-top:15px!important;
    padding-top:0!important;
  }
  body[data-listo-mode="host"].listo-host-inbox-app .listo-inbox-page .listo-inbox--host .listo-inbox__list{
    margin-top:0!important;
    padding-top:0!important;
  }
  body[data-listo-mode="host"].listo-host-inbox-app .listo-inbox-page .listo-inbox--host .listo-inbox__toolbar--host{
    padding-top:0!important;
    margin-top:0!important;
  }
}

/* No horizontal overflow in the operational workspace. */
body[data-listo-mode="host"] .listo-inbox-page,
body[data-listo-mode="host"] .listo-inbox--host{
  max-width:100%;
  box-sizing:border-box;
}


/* NEXT1070 — External Calendars 2.0 refinement.
 * UI-only refinement on top of NEXT1069. Existing calendar selectors and
 * workflows remain intact; this block corrects hierarchy, responsive layout,
 * and mobile dock interaction without changing the underlying sync system.
 */
.listo-external-cal-page { max-width:1280px; padding-top:24px; }
.listo-external-cal-page .listo-page-title-row { margin-bottom:4px; }
.listo-external-cal-page .listo-page-title-row h1 { margin:0; font-size:24px; line-height:29px; font-weight:600; letter-spacing:normal; }
.listo-external-cal-page-description { margin:0 0 20px; font-size:14px; line-height:21px; color:var(--ink-muted); }
.listo-external-cal-notice { display:flex; align-items:flex-start; gap:10px; margin:0 0 16px; padding:11px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface-alt); }
.listo-external-cal-notice-icon { width:18px; height:18px; flex:0 0 18px; margin-top:1px; color:var(--ink-muted); }
.listo-external-cal-notice-icon svg { width:18px; height:18px; }
.listo-external-cal-notice-copy strong { display:inline; font-size:13px; line-height:19px; font-weight:650; }
.listo-external-cal-notice-copy p { display:inline; margin:0 0 0 4px; color:var(--ink-muted); font-size:13px; line-height:19px; }
.listo-external-cal-summary { margin:0 0 14px; padding:13px 16px; border:1px solid var(--border); border-radius:10px; box-shadow:none; }
.listo-external-cal-summary-copy { gap:6px; }
.listo-external-cal-summary-copy strong { font-size:15px; line-height:20px; font-weight:650; }
.listo-external-cal-summary-copy span { font-size:12px; }
.listo-external-cal-summary-stats { gap:8px; }
.listo-external-cal-stat { padding:4px 7px; border-radius:7px; font-size:11px; font-weight:600; }
.listo-external-cal-stat i { width:6px; height:6px; }
.listo-external-cal-toolbar { gap:10px; margin-bottom:10px; }
.listo-external-cal-search { max-width:none; }
.listo-external-cal-filter { flex:0 0 180px; }
.listo-external-cal-search-input, .listo-external-cal-filter-select { height:44px; border-radius:10px; }
.listo-external-cal-search-input:focus, .listo-external-cal-filter-select:focus { border-color:#2196F3; box-shadow:0 0 0 3px rgba(33,150,243,.10); }
.listo-external-cal-table { border-radius:12px; box-shadow:0 2px 8px rgba(26,26,26,.035); }
.listo-external-cal-table-head, .listo-external-cal-item-row { grid-template-columns:minmax(300px,1fr) minmax(120px,150px) minmax(180px,240px) 150px; }
.listo-external-cal-table-head { min-height:42px; padding:0 18px; }
.listo-external-cal-item-row { min-height:74px; padding:9px 18px; gap:14px; }
.listo-external-cal-item-title-wrap strong { font-size:14px; }
.listo-external-cal-item-title-wrap span { font-size:11px; }
.listo-external-cal-item-status-detail { display:block; margin-top:4px; color:var(--ink-muted); font-size:11px; line-height:16px; }
.listo-external-cal-item-sync { min-width:0; }
.listo-external-cal-item-sync .listo-external-cal-item-status-detail { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.listo-external-cal-item-action { display:flex; justify-content:flex-end; }
.listo-external-cal-manage { min-height:40px; }
.listo-external-cal-editor-inner { padding:22px 24px 24px; }
.listo-external-cal-editor-heading { margin-bottom:16px; }
.listo-external-cal-editor-heading h3 { font-size:16px; }
.listo-external-cal-editor-heading p { font-size:13px; }
.listo-external-cal-section-label { margin-bottom:8px; font-size:12px; font-weight:650; color:var(--ink); }
.listo-external-cal-add { min-height:40px; }
.listo-external-cal-save-row { margin-top:14px; }
.listo-external-cal-export { margin-top:20px; padding:16px; border:1px solid var(--border); border-radius:10px; background:#F8FAFC; }
.listo-external-cal-export-head { gap:10px; }
.listo-external-cal-export-icon { width:32px; height:32px; flex:0 0 32px; border-radius:8px; }
.listo-external-cal-export-url-row { gap:8px; }
.listo-external-cal-export-url { min-height:42px; }
.listo-external-cal-copy { min-height:42px; white-space:nowrap; }
.listo-external-cal-regenerate { margin-top:8px; }

@media (max-width:900px) {
  .listo-external-cal-page { padding-top:18px; padding-bottom:96px; }
  .listo-external-cal-page .listo-page-title-row h1 { font-size:20px; line-height:25px; }
  .listo-external-cal-page-description { margin-bottom:16px; font-size:13px; line-height:19px; }
  .listo-external-cal-notice { padding:10px 12px; }
  .listo-external-cal-summary { padding:12px 14px; }
  .listo-external-cal-summary-copy { display:block; }
  .listo-external-cal-summary-copy strong { display:block; }
  .listo-external-cal-summary-copy span { display:block; margin-top:2px; }
  .listo-external-cal-summary-stats { margin-top:9px; }
  .listo-external-cal-toolbar { flex-direction:column; }
  .listo-external-cal-search, .listo-external-cal-filter { width:100%; max-width:none; flex-basis:auto; }
  .listo-external-cal-table-head { display:none; }
  .listo-external-cal-item-row { grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding:13px 14px; }
  .listo-external-cal-item-status { grid-column:1; grid-row:2; padding-left:50px; margin-top:-2px; }
  .listo-external-cal-item-sync { grid-column:1; grid-row:3; padding-left:50px; }
  .listo-external-cal-item-action { grid-column:2; grid-row:1 / span 3; align-self:center; }
  .listo-external-cal-item-sync .listo-external-cal-item-status-detail { white-space:normal; }
  .listo-external-cal-editor-inner { padding:18px 14px 20px; }
  .listo-external-cal-editor-heading h3 { font-size:16px; }
  .listo-external-cal-row { gap:8px; }
  .listo-external-cal-row .listo-external-cal-input { min-height:44px; }
  .listo-external-cal-remove { width:44px; min-width:44px; min-height:44px; }
  .listo-external-cal-add, .listo-external-cal-save { min-height:44px; }
  .listo-external-cal-save-row { align-items:stretch; }
  .listo-external-cal-save-row .listo-external-cal-save { width:100%; }
  .listo-external-cal-status { line-height:1.45; }
  .listo-external-cal-export { padding:14px; }
  .listo-external-cal-export-url-row { flex-direction:column; align-items:stretch; }
  .listo-external-cal-copy { width:100%; }
  body.listo-external-cal-editor-active .listo-host-account-floating-shell .listo-host-floating-dock { display:none !important; }
  body.listo-external-cal-editor-active { padding-bottom:0 !important; }
}

@media (max-width:600px) {
  .listo-external-cal-notice-copy p { display:block; margin:2px 0 0; }
  .listo-external-cal-item-action .listo-external-cal-manage { min-width:104px; max-width:120px; padding-left:10px; padding-right:10px; }
  .listo-external-cal-item-title-wrap strong { font-size:13px; }
}

/* NEXT1073 — External Calendars mobile Host page-title rhythm.
 * Match the compact title/one-line description treatment used by the other
 * current Host pages. Keep the title and description visually grouped with
 * no extra vertical gap between them; preserve the normal spacing below the
 * description before the page workspace begins.
 */
@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-main > .listo-external-cal-page > .listo-page-title-row {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-external-cal-page > .listo-page-title-row > h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 25px !important;
    font-weight: 600 !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-external-cal-page > .listo-page-intro.listo-external-cal-page-description {
    margin: 0 0 16px !important;
    padding: 0 !important;
    max-width: 760px !important;
    font-size: 13px !important;
    line-height: 19px !important;
  }
}


/* NEXT1074 — External Calendars mobile listing wording/layout fix.
 * Keep the listing metadata readable as complete phrases. The mobile action
 * column must not squeeze the calendar-count and sync labels into narrow
 * single-character columns.
 */
@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-external-cal-page > .listo-external-cal-table .listo-external-cal-item-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    align-items: start !important;
  }

  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-item-listing {
    min-width: 0 !important;
    width: 100% !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-item-title-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-item-name-line {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px 7px !important;
    min-width: 0 !important;
  }

  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-item-name-line strong {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 19px !important;
  }

  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-visibility-badge {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    white-space: nowrap !important;
  }

  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-item-title-wrap > span {
    display: block !important;
    margin: 3px 0 0 !important;
    color: var(--ink-muted) !important;
    font-size: 12px !important;
    line-height: 17px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-item-status {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding-left: 56px !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-item-sync {
    grid-column: 1 !important;
    grid-row: 3 !important;
    padding-left: 56px !important;
    min-width: 0 !important;
  }

  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-item-status-detail {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: 12px !important;
    line-height: 17px !important;
  }

  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-status-badge {
    white-space: nowrap !important;
  }

  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-item-action {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    align-self: center !important;
    min-width: 0 !important;
  }

  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-item-action .listo-external-cal-manage {
    min-width: 0 !important;
    width: 104px !important;
    max-width: 104px !important;
    min-height: 44px !important;
    padding: 9px 9px !important;
    white-space: nowrap !important;
    font-size: 13px !important;
  }
}

@media (max-width: 390px) {
  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-item-action .listo-external-cal-manage {
    width: 98px !important;
    max-width: 98px !important;
    font-size: 12.5px !important;
  }
}

/* Keep the title and one-line description visually adjacent on mobile. */
@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-external-cal-page .listo-page-title-row {
    margin-bottom: 0 !important;
  }
  body[data-listo-mode="host"] .listo-external-cal-page .listo-page-intro.listo-external-cal-page-description {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
}


/* NEXT1075 — External Calendars mobile: title/description gap, pill-to-title
 * gap, and Connect calendar button fit.
 *
 * 1) Title ↔ description: the shared Host mobile rule
 *    `body:has(.listo-host-account-floating-shell) .listo-page-title-row`
 *    forces min-height:55px on every title row. External Calendars has a
 *    single 25px h1 in that row, and the row is a centered flex container, so
 *    the extra 30px was split above and below the h1. NEXT1073 removed the
 *    margins but not that forced height, which is why ~15px remained between
 *    the title and the description. The row now sizes to its h1.
 * 2) Pill ↔ title: exactly 20px, measured from the bottom edge of the
 *    Staycation pill to the top of the title block. The active pill is drawn
 *    with translateY(1px) scale(.985), so the margin is 15.7px to land on a
 *    visual 20px.
 * 3) Connect / Manage calendar button: the button had a fixed 98–104px width
 *    and a no-wrap label that is wider than that, so the text ran past the
 *    border. The button keeps its compact 92–104px footprint and the label
 *    now wraps onto two lines inside it, so the listing name keeps its room.
 * Mobile only. Desktop layout, markup, and all calendar behavior unchanged.
 */
@media (max-width: 800px) {
  body[data-listo-mode="host"] .listo-main > .listo-container.listo-section.listo-external-cal-page > .listo-page-title-row:first-child {
    min-height: 0 !important;
    height: auto !important;
    margin: 15.7px 0 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: flex-start !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-container.listo-section.listo-external-cal-page > .listo-page-title-row:first-child > h1 {
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-container.listo-section.listo-external-cal-page > .listo-page-intro.listo-external-cal-page-description {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-item-action {
    display: flex !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }

  /* Compact fixed-range button; the label wraps onto two lines
     ("Connect / calendar", "Manage / calendars") instead of overflowing. */
  body[data-listo-mode="host"] .listo-external-cal-page .listo-external-cal-item-action .listo-external-cal-manage {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 92px !important;
    max-width: 104px !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 6px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    text-wrap: balance;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    overflow: visible !important;
  }
}


/* ==========================================================================
   NEXT1076 — Co-hosts (Host Mode Account) 2.0
   Presentation/interaction refinement only. NEXT1075 remains the sole code
   baseline; existing co-host storage, AJAX actions, permissions, invitation
   validation and remittance workflows are intentionally preserved.
   ========================================================================== */
@media (min-width: 701px) {
  body[data-listo-mode="host"] .listo-main > .listo-container.listo-cohost-page > .listo-cohost-page-title-row { min-height:0!important; height:auto!important; margin:0 0 20px!important; padding:0!important; align-items:flex-start!important; gap:24px!important; }
  body[data-listo-mode="host"] .listo-cohost-page-title-row .listo-cohost-page-title-copy > h1 { margin:0 0 6px!important; padding:0!important; font-size:24px!important; line-height:29px!important; font-weight:600!important; letter-spacing:0!important; color:#172631!important; }
  body[data-listo-mode="host"] .listo-cohost-page-title-row .listo-cohost-page-title-copy .listo-page-intro { margin:0!important; padding:0!important; max-width:760px!important; font-size:14px!important; line-height:21px!important; font-weight:400!important; color:#70818D!important; }
  body[data-listo-mode="host"] .listo-cohost-page-title-row > .listo-cohost-page__actions { position:static!important; width:auto!important; flex:0 0 auto!important; margin:0!important; padding:0!important; }
  body[data-listo-mode="host"] .listo-cohost-page-title-row > .listo-cohost-page__actions .listo-btn { min-height:42px!important; height:42px!important; padding:10px 17px!important; border-radius:11px!important; font-size:13px!important; line-height:1.1!important; font-weight:700!important; gap:7px!important; white-space:nowrap!important; box-shadow:none!important; }
  body[data-listo-mode="host"] .listo-cohost-page-title-row > .listo-cohost-page__actions .listo-btn svg { width:14px!important; height:14px!important; }
}
body[data-listo-mode="host"] .listo-cohost-summary { display:flex!important; align-items:baseline!important; flex-wrap:wrap!important; gap:0 7px!important; margin:0 0 20px!important; padding:0!important; border:0!important; background:transparent!important; color:#70818D!important; font-size:13px!important; line-height:20px!important; }
body[data-listo-mode="host"] .listo-cohost-summary strong { color:#172631!important; font-weight:700!important; }
body[data-listo-mode="host"] .listo-cohost-summary__attention { color:#9A6300!important; }
@media (min-width:1021px) {
  body[data-listo-mode="host"] .listo-cohost-layout { display:grid!important; grid-template-columns:minmax(0,1fr) minmax(300px,360px)!important; gap:24px!important; align-items:start!important; }
  body[data-listo-mode="host"] .listo-cohost-main { min-width:0!important; }
  body[data-listo-mode="host"] .listo-cohost-sidebar { display:flex!important; flex-direction:column!important; gap:16px!important; min-width:0!important; }
  body[data-listo-mode="host"] .listo-cohost-sidebar .listo-cohost-page-section { margin:0!important; padding:18px!important; border:1px solid #E2E9EF!important; border-radius:14px!important; background:#fff!important; box-shadow:none!important; }
}
@media (min-width:701px) and (max-width:1020px) {
  body[data-listo-mode="host"] .listo-cohost-layout { display:block!important; }
  body[data-listo-mode="host"] .listo-cohost-sidebar { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; margin-top:20px!important; }
  body[data-listo-mode="host"] .listo-cohost-sidebar .listo-cohost-page-section { margin:0!important; padding:18px!important; border:1px solid #E2E9EF!important; border-radius:14px!important; background:#fff!important; box-shadow:none!important; }
}
body[data-listo-mode="host"] .listo-cohost-management-section { min-width:0!important; }
body[data-listo-mode="host"] .listo-cohost-section-head { margin-bottom:14px!important; }
body[data-listo-mode="host"] .listo-cohost-section-head h2 { margin:0 0 4px!important; font-size:18px!important; line-height:24px!important; font-weight:600!important; color:#172631!important; }
body[data-listo-mode="host"] .listo-cohost-section-head p { margin:0!important; font-size:13px!important; line-height:19px!important; color:#70818D!important; }
body[data-listo-mode="host"] .listo-cohost-management-toolbar { display:grid!important; grid-template-columns:minmax(0,1fr) 190px!important; gap:10px!important; margin-bottom:12px!important; }
body[data-listo-mode="host"] .listo-cohost-management-table { overflow:hidden!important; border:1px solid #E2E9EF!important; border-radius:14px!important; background:#fff!important; }
body[data-listo-mode="host"] .listo-cohost-listing { border:0!important; border-radius:0!important; box-shadow:none!important; background:#fff!important; }
body[data-listo-mode="host"] .listo-cohost-listing + .listo-cohost-listing { border-top:1px solid #E7EDF2!important; }
body[data-listo-mode="host"] .listo-cohost-management-row { min-height:78px!important; padding:12px 16px!important; border:0!important; border-radius:0!important; }
body[data-listo-mode="host"] .listo-cohost-listing-thumb { width:68px!important; height:54px!important; flex-basis:68px!important; border-radius:9px!important; }
body[data-listo-mode="host"] .listo-cohost-listing-copy strong { font-size:15px!important; line-height:20px!important; }
body[data-listo-mode="host"] .listo-cohost-meta-line { margin-top:4px!important; font-size:12px!important; line-height:18px!important; }
body[data-listo-mode="host"] .listo-cohost-management-action .listo-btn { min-width:104px!important; min-height:40px!important; padding:9px 13px!important; border-radius:10px!important; font-size:13px!important; }
body[data-listo-mode="host"] .listo-cohost-details { border-top:1px solid #E7EDF2!important; background:#FAFCFD!important; }
body[data-listo-mode="host"] .listo-cohost-person-card, body[data-listo-mode="host"] .listo-cohost-invite-card { border-radius:11px!important; border-color:#E2E9EF!important; box-shadow:none!important; }
body[data-listo-mode="host"] .listo-cohost-person-main > strong, body[data-listo-mode="host"] .listo-cohost-invite-copy > strong { font-size:14px!important; line-height:19px!important; }
body[data-listo-mode="host"] .listo-cohost-person-main > span, body[data-listo-mode="host"] .listo-cohost-invite-copy > span { font-size:12px!important; line-height:17px!important; color:#70818D!important; }
body[data-listo-mode="host"] .listo-cohost-person-badges { gap:5px!important; }
body[data-listo-mode="host"] .listo-cohost-permission-pill, body[data-listo-mode="host"] .listo-cohost-detail-chip, body[data-listo-mode="host"] .listo-cohost-status-pill { font-size:11px!important; }
body[data-listo-mode="host"] .listo-cohost-empty-state__action { margin-top:14px!important; }
body[data-listo-mode="host"] .listo-cohost-money-grid { gap:7px!important; }
body[data-listo-mode="host"] .listo-cohost-money-stat { min-height:72px!important; padding:10px 11px!important; border-radius:10px!important; }
body[data-listo-mode="host"] .listo-cohost-money-stat span { font-size:11px!important; line-height:15px!important; }
body[data-listo-mode="host"] .listo-cohost-money-stat strong { font-size:17px!important; line-height:22px!important; }
body[data-listo-mode="host"] .listo-cohost-payment-person + .listo-cohost-payment-person { border-top:1px solid #E7EDF2!important; }
@media (max-width:700px) {
  body[data-listo-mode="host"] .listo-main > .listo-container.listo-cohost-page > .listo-cohost-page-title-row { display:block!important; min-height:0!important; height:auto!important; margin:15px 0 18px!important; padding:0!important; }
  body[data-listo-mode="host"] .listo-cohost-page-title-row .listo-cohost-page-title-copy > h1 { margin:0 0 4px!important; font-size:20px!important; line-height:25px!important; font-weight:600!important; }
  body[data-listo-mode="host"] .listo-cohost-page-title-row .listo-cohost-page-title-copy .listo-page-intro { margin:0!important; font-size:13px!important; line-height:19px!important; }
  body[data-listo-mode="host"] .listo-cohost-page-title-row > .listo-cohost-page__actions { display:flex!important; width:100%!important; margin-top:14px!important; }
  body[data-listo-mode="host"] .listo-cohost-page-title-row > .listo-cohost-page__actions .listo-btn { width:100%!important; min-height:44px!important; height:44px!important; justify-content:center!important; border-radius:10px!important; font-size:13px!important; }
  body[data-listo-mode="host"] .listo-cohost-summary { margin:0 0 18px!important; font-size:12px!important; line-height:18px!important; }
  body[data-listo-mode="host"] .listo-cohost-layout { display:block!important; }
  body[data-listo-mode="host"] .listo-cohost-management-section { margin-bottom:20px!important; }
  body[data-listo-mode="host"] .listo-cohost-section-head { margin-bottom:11px!important; }
  body[data-listo-mode="host"] .listo-cohost-section-head h2 { font-size:17px!important; line-height:23px!important; }
  body[data-listo-mode="host"] .listo-cohost-section-head p { font-size:13px!important; line-height:19px!important; }
  body[data-listo-mode="host"] .listo-cohost-management-toolbar { grid-template-columns:1fr!important; gap:8px!important; }
  body[data-listo-mode="host"] .listo-cohost-management-table { border-radius:12px!important; }
  body[data-listo-mode="host"] .listo-cohost-management-row { min-height:0!important; padding:11px 12px!important; gap:10px!important; }
  body[data-listo-mode="host"] .listo-cohost-management-listing { min-width:0!important; }
  body[data-listo-mode="host"] .listo-cohost-listing-thumb { width:58px!important; height:50px!important; flex-basis:58px!important; border-radius:8px!important; }
  body[data-listo-mode="host"] .listo-cohost-listing-copy { min-width:0!important; }
  body[data-listo-mode="host"] .listo-cohost-listing-copy strong { display:block!important; max-width:100%!important; font-size:14px!important; line-height:18px!important; overflow-wrap:anywhere!important; }
  body[data-listo-mode="host"] .listo-cohost-meta-line { font-size:11px!important; line-height:16px!important; flex-wrap:wrap!important; }
  body[data-listo-mode="host"] .listo-cohost-management-action .listo-btn { min-width:88px!important; min-height:40px!important; padding:8px 10px!important; font-size:12px!important; }
  body[data-listo-mode="host"] .listo-cohost-details { padding:12px!important; }
  body[data-listo-mode="host"] .listo-cohost-people-grid { grid-template-columns:1fr!important; }
  body[data-listo-mode="host"] .listo-cohost-edit-form__grid, body[data-listo-mode="host"] .listo-cohost-invite-form__grid { grid-template-columns:1fr!important; }
  body[data-listo-mode="host"] .listo-cohost-edit-actions { flex-direction:column!important; }
  body[data-listo-mode="host"] .listo-cohost-edit-actions .listo-btn, body[data-listo-mode="host"] .listo-cohost-invite-send { width:100%!important; min-height:44px!important; }
  body[data-listo-mode="host"] .listo-cohost-sidebar { display:flex!important; flex-direction:column!important; gap:14px!important; margin-top:0!important; }
  body[data-listo-mode="host"] .listo-cohost-sidebar .listo-cohost-page-section { width:100%!important; margin:0!important; padding:15px!important; border:1px solid #E2E9EF!important; border-radius:12px!important; background:#fff!important; box-shadow:none!important; }
  body[data-listo-mode="host"] .listo-cohost-money-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  body[data-listo-mode="host"] .listo-cohost-money-stat { min-height:68px!important; }
  body:has(.listo-cohost-invite-form[style*="display: block"]) .listo-host-account-floating-dock, body:has(.listo-cohost-edit-form:not([hidden])) .listo-host-account-floating-dock { display:none!important; }
  body[data-listo-mode="host"] .listo-cohost-invite-form, body[data-listo-mode="host"] .listo-cohost-edit-form { scroll-margin-bottom:24px!important; }
  body[data-listo-mode="host"] .listo-cohost-invite-actions .listo-btn, body[data-listo-mode="host"] .listo-cohost-action-toggle, body[data-listo-mode="host"] .listo-cohost-invite-toggle, body[data-listo-mode="host"] .listo-cohost-remove, body[data-listo-mode="host"] .listo-cohost-accept, body[data-listo-mode="host"] .listo-cohost-decline, body[data-listo-mode="host"] .listo-remittance-mark-sent, body[data-listo-mode="host"] .listo-remittance-confirm, body[data-listo-mode="host"] .listo-remittance-dispute { min-height:44px!important; }
}
@media (max-width:420px) {
  body[data-listo-mode="host"] .listo-cohost-management-row { align-items:flex-start!important; }
  body[data-listo-mode="host"] .listo-cohost-management-action .listo-btn { min-width:82px!important; padding-left:8px!important; padding-right:8px!important; }
  body[data-listo-mode="host"] .listo-cohost-listing-thumb { width:52px!important; height:46px!important; flex-basis:52px!important; }
}

/* ========================================================================
   NEXT1079 — Edit Profile (Host) standard Host account architecture
   Presentation-only refinement of the existing Host Profile implementation.
   The route, dual-mode context resolution, data model, AJAX contracts,
   photo ownership, and save/edit workflow remain unchanged.
   ======================================================================== */
.listo-host-profile-page {
  max-width: 1200px !important;
}

.listo-host-profile-page > .listo-page-title-row {
  margin: 24px 0 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  min-height: 0 !important;
}

.listo-host-profile-page > .listo-page-title-row > h1 {
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 29px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}

.listo-host-profile-page > .listo-page-intro.listo-host-profile-page-description {
  margin: 0 0 20px !important;
  max-width: 760px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

.listo-host-profile-layout {
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .9fr);
  gap: 24px;
  align-items: start;
}

/* The editor is the primary workspace; the preview is supporting context. */
.listo-host-profile-editor {
  min-width: 0;
}

.listo-host-profile-card {
  border-radius: 14px;
  padding: 22px;
  box-shadow: none;
}

.listo-host-profile-card__header {
  margin-bottom: 20px;
}

.listo-host-profile-card__header h2 {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 650;
}

.listo-host-profile-card__header p {
  font-size: 13px;
}

/* Keep the photo section functional rather than turning it into a nested
   profile card. */
.listo-host-profile-photo-block {
  margin-bottom: 22px;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.listo-profile-photo--large {
  width: 88px;
  height: 88px;
  min-width: 88px;
}

.listo-profile-photo--large #listo-profile-photo-fallback {
  font-size: 31px;
}

.listo-host-profile-photo-block__copy p {
  margin-bottom: 10px;
}

.listo-host-profile-photo-block__actions .listo-btn {
  min-height: 44px;
}

.listo-host-profile-fields {
  gap: 0;
}

.listo-host-profile-fields > .listo-field,
.listo-host-profile-fields__section {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.listo-host-profile-fields > .listo-field:first-child {
  padding-top: 0;
}

.listo-host-profile-fields__section {
  margin: 0;
}

.listo-host-profile-fields__section-heading {
  margin-bottom: 14px;
}

.listo-host-profile-fields__section-heading h3 {
  font-size: 14px;
}

.listo-host-profile-fields__section-heading p {
  font-size: 12px;
}

.listo-host-profile-fields .listo-field-grid {
  gap: 16px;
}

.listo-field-help {
  font-size: 12px;
}

.listo-field--bio textarea {
  min-height: 140px;
}

.listo-host-profile-save-row {
  margin-top: 20px;
  padding-top: 0;
}

.listo-host-profile-save-row .listo-btn {
  min-height: 44px;
}

.listo-host-profile-preview {
  position: sticky;
  top: 24px;
}

.listo-host-profile-preview .listo-host-profile-card__header {
  margin-bottom: 16px;
}

.listo-host-profile-preview-card {
  padding: 18px;
  border-radius: 12px;
}

@media (max-width: 900px) {
  .listo-host-profile-layout {
    grid-template-columns: 1fr;
  }

  .listo-host-profile-preview {
    position: static;
  }
}

@media (max-width: 700px) {
  .listo-host-profile-page {
    padding-bottom: 88px;
  }

  .listo-host-profile-page > .listo-page-title-row {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
  }

  .listo-host-profile-page > .listo-page-title-row > h1 {
    font-size: 20px !important;
    line-height: 25px !important;
    font-weight: 600 !important;
  }

  .listo-host-profile-page > .listo-page-intro.listo-host-profile-page-description {
    margin: 0 0 18px !important;
    font-size: 13px;
    line-height: 1.45;
  }

  .listo-host-profile-layout {
    display: block;
  }

  .listo-host-profile-card {
    padding: 16px;
    border-radius: 14px;
  }

  .listo-host-profile-card__header {
    margin-bottom: 16px;
  }

  .listo-host-profile-photo-block {
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 0;
  }

  .listo-profile-photo--large {
    width: 80px;
    height: 80px;
    min-width: 80px;
  }

  .listo-profile-photo--large #listo-profile-photo-fallback {
    font-size: 29px;
  }

  .listo-host-profile-fields > .listo-field,
  .listo-host-profile-fields__section {
    padding: 20px 0;
  }

  .listo-host-profile-fields > .listo-field:first-child {
    padding-top: 20px;
  }

  .listo-host-profile-fields .listo-field-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .listo-host-profile-save-row {
    margin-top: 18px;
  }

  .listo-host-profile-save-row .listo-btn {
    width: 100%;
    min-height: 44px;
  }

  .listo-host-profile-preview {
    margin-top: 24px;
  }

  .listo-host-profile-preview-card {
    padding: 16px;
  }
}


/* NEXT1081 — Host Edit Profile mobile: remove the gap between the page title
 * and its one-line description.
 * Cause: the shared Host rule
 * `body:has(.listo-host-account-floating-shell) .listo-page-title-row`
 * forces min-height:55px (!important) and out-ranks the page's own
 * `min-height:0`. The title row is a centered flex container holding a single
 * 25px h1, so the extra 30px was split above and below the h1, leaving ~29px
 * between the title and the description. The row now sizes to its h1.
 * Mobile/tablet only (same range as the shared rule). No markup changes.
 */
@media (max-width: 900px) {
  body[data-listo-mode="host"] .listo-main > .listo-container.listo-host-profile-page > .listo-page-title-row:first-child {
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: flex-start !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-container.listo-host-profile-page > .listo-page-title-row:first-child > h1 {
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-container.listo-host-profile-page > .listo-page-intro.listo-host-profile-page-description {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* NEXT1084 — Host Cases 2.0 final refinement.
 * Staycation-only operational workspace. Existing case data, statuses,
 * booking relationships, and expandable interaction remain unchanged.
 */
body[data-listo-mode="host"] .listo-cases-page .listo-page-title-row.listo-host-page-title-standard {
  margin-bottom: 8px !important;
}
body[data-listo-mode="host"] .listo-cases-page .listo-page-title-row.listo-host-page-title-standard > h1 {
  font-size: 24px !important;
  line-height: 29px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}
body[data-listo-mode="host"] .listo-cases-page .listo-page-description {
  margin: 0 0 20px !important;
  font-size: 14px !important;
  line-height: 21px !important;
  color: #70818D !important;
}
body[data-listo-mode="host"] .listo-cases-page .listo-cases-help {
  margin: 0 0 18px !important;
  max-width: none !important;
}
body[data-listo-mode="host"] .listo-cases-page .listo-cases-summary {
  max-width: none !important;
  margin: 0 0 18px !important;
}
body[data-listo-mode="host"] .listo-cases-page .listo-cases-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px !important;
}
body[data-listo-mode="host"] .listo-cases-page .listo-cases-search {
  flex: 0 1 280px;
}
body[data-listo-mode="host"] .listo-cases-page .listo-cases-list {
  max-width: none !important;
}
body[data-listo-mode="host"] .listo-cases-page .listo-case-card {
  border-radius: 14px !important;
}
body[data-listo-mode="host"] .listo-cases-page .listo-case-card__summary {
  padding: 18px 20px !important;
}
body[data-listo-mode="host"] .listo-cases-page .listo-case-card__topline {
  margin-bottom: 8px !important;
}
body[data-listo-mode="host"] .listo-cases-page .listo-case-service-badge {
  color: #1976D2 !important;
  background: #EEF6FF !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
}
body[data-listo-mode="host"] .listo-cases-page .listo-case-card__reference {
  margin-left: auto !important;
}
@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-cases-page .listo-page-title-row.listo-host-page-title-standard {
    margin-bottom: 0 !important;
    min-height: 25px !important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-page-title-row.listo-host-page-title-standard > h1 {
    font-size: 20px !important;
    line-height: 25px !important;
    font-weight: 600 !important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-page-description {
    margin: 0 0 14px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-help {
    margin: 0 0 14px !important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-summary {
    margin: 0 0 14px !important;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-cases-search {
    width: 100%;
    flex: 0 0 auto;
  }
  body[data-listo-mode="host"] .listo-cases-page .listo-case-card__summary {
    padding: 15px !important;
  }
}



/* NEXT1085 — Host Cases mobile: remove the gap between the page title and its
 * one-line description ("Review Staycation issues ...").
 * Cause: the shared Host title-row rules only treat .listo-page-intro,
 * .listo-page-title-subtitle, .listo-caption and .listo-host-page-description
 * as "a description below the title". Cases uses .listo-page-description, so
 * the row was handled as a title with no description and kept its full
 * 20-22px bottom margin (plus a 5px description top margin at tablet width).
 * Both are cleared here; the spacing below the description is unchanged.
 * Follow-up: the no-description rule (4x :not(:has())) has specificity 8 and out-ranked
 * the first version of this block, so its selectors are now stronger (9+).
 * Mobile/tablet only (same range as the shared Host title rules).
 * No markup, backend, or case-workflow changes.
 */
@media (max-width: 900px) {
  body[data-listo-mode="host"] .listo-main > .listo-container.listo-cases-page > .listo-page-title-row.listo-host-page-title-standard.listo-cases-page-title.listo-cases-page-title:first-child {
    margin-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: flex-start !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-container.listo-cases-page > .listo-page-title-row.listo-host-page-title-standard.listo-cases-page-title.listo-cases-page-title:first-child > h1 {
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-container.listo-cases-page > .listo-page-description.listo-cases-page-description.listo-cases-page-description {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ==========================================================================
   NEXT1086 — Host Support 2.0
   Host-only presentation refinement. The shared Support backend, AJAX
   actions, polling, message handling, idle timeout, validation and Guest
   Support markup are unchanged.
   ========================================================================== */

body[data-listo-mode="host"] .listo-support-page {
  width: 100%;
  max-width: 1200px;
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

body[data-listo-mode="host"] .listo-support-page .listo-page-title-row {
  margin-bottom: 0 !important;
}

body[data-listo-mode="host"] .listo-support-page .listo-support-page__description {
  max-width: 760px;
  margin: 18px 0 26px !important;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

body[data-listo-mode="host"] .listo-support-host-topics {
  margin: 0 0 24px;
}

body[data-listo-mode="host"] .listo-support-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

body[data-listo-mode="host"] .listo-support-section-heading h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink);
}

body[data-listo-mode="host"] .listo-support-section-heading p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

body[data-listo-mode="host"] .listo-support-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body[data-listo-mode="host"] .listo-support-topic {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

body[data-listo-mode="host"] .listo-support-topic h3 {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}

body[data-listo-mode="host"] .listo-support-topic__links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

body[data-listo-mode="host"] .listo-support-topic .listo-support-host-link {
  min-height: 64px;
  padding: 10px 11px;
  border-radius: 11px;
  box-shadow: none;
  transform: none;
}

body[data-listo-mode="host"] .listo-support-topic .listo-support-host-link:hover {
  transform: none;
  box-shadow: 0 4px 12px rgba(26,39,57,.05);
}

body[data-listo-mode="host"] .listo-support-topic .listo-support-host-link__copy strong {
  font-size: 12px;
}

body[data-listo-mode="host"] .listo-support-topic .listo-support-host-link__copy small {
  font-size: 10.5px;
}

body[data-listo-mode="host"] .listo-support-case-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
  padding: 15px 16px;
  border: 1px solid #D7EAFB;
  border-radius: 12px;
  background: #F8FCFF;
}

body[data-listo-mode="host"] .listo-support-case-note strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  line-height: 1.35;
}

body[data-listo-mode="host"] .listo-support-case-note p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}

body[data-listo-mode="host"] .listo-support-case-note .listo-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

body[data-listo-mode="host"] .listo-support-help {
  max-width: 100%;
  margin-bottom: 18px;
}

body[data-listo-mode="host"] .listo-support-offline-card,
body[data-listo-mode="host"] .listo-support-entry-card,
body[data-listo-mode="host"] .listo-support-chat {
  max-width: none;
}

body[data-listo-mode="host"] .listo-support-entry-card {
  text-align: left;
}

body[data-listo-mode="host"] .listo-support-entry-card__top {
  justify-content: flex-start;
}

body[data-listo-mode="host"] .listo-support-entry-card__icon {
  margin-left: 0;
}

body[data-listo-mode="host"] .listo-support-entry-card__copy p {
  margin-left: 0;
}

body[data-listo-mode="host"] .listo-support-entry-card__action {
  align-items: flex-start;
}

body[data-listo-mode="host"] .listo-support-entry-card__action .listo-btn {
  min-width: 190px;
}

@media (max-width: 900px) and (min-width: 701px) {
  body[data-listo-mode="host"] .listo-support-topic-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  body[data-listo-mode="host"] .listo-support-page {
    padding-top: var(--section-pad);
    padding-bottom: calc(var(--section-pad) + 78px);
  }

  body[data-listo-mode="host"] .listo-support-page .listo-page-title-row {
    margin-bottom: 0 !important;
  }

  body[data-listo-mode="host"] .listo-support-page .listo-support-page__description {
    margin: 4px 0 18px !important;
    font-size: 13px;
    line-height: 1.45;
  }

  body[data-listo-mode="host"] .listo-support-host-topics {
    margin-bottom: 18px;
  }

  body[data-listo-mode="host"] .listo-support-section-heading {
    margin-bottom: 9px;
  }

  body[data-listo-mode="host"] .listo-support-section-heading h2 {
    font-size: 16px;
  }

  body[data-listo-mode="host"] .listo-support-section-heading p {
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-listo-mode="host"] .listo-support-topic-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-listo-mode="host"] .listo-support-topic {
    padding: 13px;
    border-radius: 12px;
  }

  body[data-listo-mode="host"] .listo-support-topic h3 {
    margin-bottom: 8px;
    font-size: 13px;
  }

  body[data-listo-mode="host"] .listo-support-topic__links {
    gap: 7px;
  }

  body[data-listo-mode="host"] .listo-support-topic .listo-support-host-link {
    min-height: 58px;
    padding: 9px 10px;
    border-radius: 10px;
  }

  body[data-listo-mode="host"] .listo-support-topic .listo-support-host-link__icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  body[data-listo-mode="host"] .listo-support-topic .listo-support-host-link__copy strong {
    font-size: 11.5px;
  }

  body[data-listo-mode="host"] .listo-support-topic .listo-support-host-link__copy small {
    font-size: 10px;
  }

  body[data-listo-mode="host"] .listo-support-case-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
    padding: 13px;
    margin-bottom: 14px;
  }

  body[data-listo-mode="host"] .listo-support-case-note .listo-btn {
    width: 100%;
    justify-content: center;
  }

  body[data-listo-mode="host"] .listo-support-entry-card {
    text-align: center;
  }

  body[data-listo-mode="host"] .listo-support-entry-card__top {
    justify-content: center;
  }

  body[data-listo-mode="host"] .listo-support-entry-card__icon {
    margin-left: auto;
  }

  body[data-listo-mode="host"] .listo-support-entry-card__copy p {
    margin-left: auto;
  }

  body[data-listo-mode="host"] .listo-support-entry-card__action {
    align-items: center;
  }

  body[data-listo-mode="host"] .listo-support-entry-card__action .listo-btn {
    width: 100%;
  }
}


/* ==========================================================================
   NEXT1087 — Host FAQ 2.0
   Host-only knowledge-base refinement. The shared FAQ search/accordion
   architecture remains unchanged; these rules align the Host FAQ with the
   current Host page-title system and restrained operational UI.
   ========================================================================== */

body[data-listo-mode="host"] .listo-faq-page {
  width: min(1240px, calc(100% - 48px)) !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 0 !important;
  padding-bottom: 128px !important;
}

body[data-listo-mode="host"] .listo-faq-page .listo-page-title-row.listo-host-page-title-standard {
  margin: 26px 0 0 !important;
  min-height: 29px !important;
  padding: 0 !important;
  gap: 0 !important;
}

body[data-listo-mode="host"] .listo-faq-page .listo-page-title-row.listo-host-page-title-standard > h1 {
  font-size: 24px !important;
  line-height: 29px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  color: #172631 !important;
}

body[data-listo-mode="host"] .listo-faq-page .listo-page-description.listo-faq-page-description {
  max-width: 760px;
  margin: 4px 0 20px !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 21px !important;
  font-weight: 400 !important;
  color: #70818D !important;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-search-hero {
  max-width: 860px;
  margin: 0 0 28px !important;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-search {
  min-height: 52px;
  border-radius: 10px;
  box-shadow: none;
  border-color: #DCE4EA;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-search input {
  font-size: 14px;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-search-hero__meta {
  min-height: 18px;
  margin-top: 7px;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-discovery {
  max-width: none;
  margin: 0 0 32px;
  gap: 30px;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-section-heading {
  margin-bottom: 10px;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-section-heading h2 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-popular__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-popular__card {
  min-height: 76px;
  padding: 14px;
  border-radius: 10px;
  box-shadow: none;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-popular__card:hover,
body[data-listo-mode="host"] .listo-faq-page .listo-faq-popular__card:focus-visible {
  transform: none;
  box-shadow: none;
  border-color: #BFD2E2;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-popular__card span:first-child {
  font-size: 13px;
  line-height: 1.4;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-topics__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-topic {
  min-height: 76px;
  padding: 13px 15px;
  border-radius: 10px;
  box-shadow: none;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-topic:hover,
body[data-listo-mode="host"] .listo-faq-page .listo-faq-topic:focus-visible {
  transform: none;
  box-shadow: none;
  border-color: #BFD2E2;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-topic__icon {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-radius: 10px;
  color: #2196F3 !important;
  background: #EAF5FF !important;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-topic__body strong {
  font-size: 14px;
  font-weight: 600;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-topic__body small {
  font-size: 12px;
  line-height: 1.4;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-category {
  margin-top: 28px;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-category:first-of-type {
  margin-top: 0;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-category__title {
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-item {
  border-radius: 10px;
  padding-left: 18px;
  padding-right: 18px;
  margin-bottom: 8px;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-item summary {
  min-height: 50px;
  padding: 14px 0;
  font-size: 14px;
  line-height: 20px;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-item__answer {
  padding-bottom: 16px;
  font-size: 14px;
  line-height: 1.55;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-results-head {
  max-width: none;
  margin: 0 0 14px;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-results-head h2 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

body[data-listo-mode="host"] .listo-faq-page .listo-faq-support-cta {
  max-width: none;
  margin-top: 34px;
  border-radius: 12px;
  box-shadow: none;
}

@media (max-width: 980px) {
  body[data-listo-mode="host"] .listo-faq-page .listo-faq-popular__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body[data-listo-mode="host"] .listo-faq-page {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    padding-bottom: 144px !important;
  }

  body[data-listo-mode="host"] .listo-faq-page .listo-page-title-row.listo-host-page-title-standard {
    margin: 16px 0 0 !important;
    min-height: 25px !important;
  }

  body[data-listo-mode="host"] .listo-faq-page .listo-page-title-row.listo-host-page-title-standard > h1 {
    font-size: 20px !important;
    line-height: 25px !important;
    font-weight: 600 !important;
  }

  body[data-listo-mode="host"] .listo-faq-page .listo-page-description.listo-faq-page-description {
    margin: 0 0 16px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  body[data-listo-mode="host"] .listo-faq-page .listo-faq-search-hero {
    margin-bottom: 24px !important;
  }

  body[data-listo-mode="host"] .listo-faq-page .listo-faq-search {
    min-height: 50px;
    border-radius: 10px;
  }

  body[data-listo-mode="host"] .listo-faq-page .listo-faq-discovery {
    gap: 24px;
    margin-bottom: 26px;
  }

  body[data-listo-mode="host"] .listo-faq-page .listo-faq-popular__grid,
  body[data-listo-mode="host"] .listo-faq-page .listo-faq-topics__grid {
    grid-template-columns: 1fr;
  }

  body[data-listo-mode="host"] .listo-faq-page .listo-faq-popular__card {
    min-height: 62px;
  }

  body[data-listo-mode="host"] .listo-faq-page .listo-faq-topic {
    min-height: 68px;
    padding: 12px 13px;
  }

  body[data-listo-mode="host"] .listo-faq-page .listo-faq-topic__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  body[data-listo-mode="host"] .listo-faq-page .listo-faq-category {
    margin-top: 24px;
    scroll-margin-top: 72px;
  }

  body[data-listo-mode="host"] .listo-faq-page .listo-faq-item {
    padding-left: 14px;
    padding-right: 14px;
  }

  body[data-listo-mode="host"] .listo-faq-page .listo-faq-item summary {
    min-height: 52px;
    padding: 14px 0;
  }

  body[data-listo-mode="host"] .listo-faq-page .listo-faq-support-cta {
    margin-top: 28px;
    padding: 18px;
  }

  body[data-listo-mode="host"] .listo-faq-page .listo-faq-back-to-top {
    bottom: 88px;
    right: 14px;
  }
}

@media (max-width: 480px) {
  body[data-listo-mode="host"] .listo-faq-page .listo-faq-popular__card {
    min-height: 60px;
  }

  body[data-listo-mode="host"] .listo-faq-page .listo-faq-topic__body small {
    font-size: 11.5px;
  }
}


/* NEXT1088 — Host FAQ mobile: remove the gap between the page title ("FAQ")
 * and its one-line description.
 * Cause: the shared Host rule for "title rows with no description below"
 * (four :not(:has(+ ...)) selectors, margin-bottom: 22px !important) does not
 * recognise .listo-page-description, so it out-ranked the FAQ title-row margin.
 * Selectors here are stronger than that shared rule; title size/weight, the
 * space above the title, the space below the description, and desktop are
 * unchanged. Mobile/tablet only. No markup, JS, or FAQ content changes.
 */
@media (max-width: 900px) {
  body[data-listo-mode="host"] .listo-main > .listo-container.listo-faq-page > .listo-page-title-row.listo-host-page-title-standard.listo-page-title-row:first-child {
    margin-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: flex-start !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-container.listo-faq-page > .listo-page-title-row.listo-host-page-title-standard.listo-page-title-row:first-child > h1 {
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-container.listo-faq-page > .listo-page-description.listo-faq-page-description.listo-faq-page-description {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* NEXT1090 — Host More menu: match the floating dock's dimensional 3D icon language. */
.listo-dashboard-v2__more-icon{
  background:transparent!important;
  border-radius:0!important;
  overflow:visible!important;
  width:40px!important;
  height:40px!important;
  display:grid!important;
  place-items:center!important;
  color:inherit!important;
}
.listo-dashboard-v2__more-icon .listo-host-more-icon-img{
  width:40px!important;
  height:40px!important;
  display:block!important;
  object-fit:contain!important;
}
.listo-host-floating-dock__more-panel .listo-dashboard-v2__more-icon .listo-host-more-icon-img{
  width:40px!important;
  height:40px!important;
}

/* ==========================================================================
   NEXT1101 — Mobile navigation reload canvas safeguard.
   Keep the document canvas explicitly white during native page navigation so
   the browser never exposes a transparent/black intermediate frame while the
   new stylesheet and page content are loading.
   ========================================================================== */
html,
html body{
  background:#FFFFFF!important;
}
@media(max-width:800px){
  html,
  body{
    background:#FFFFFF!important;
  }
}

/* ========================================================================== 
   NEXT1094 — Host floating dock icon state contrast.
   Inactive dock icons are intentionally muted so the current destination is
   the primary visual signal. The same illustrated SVG artwork returns to its
   full color when its destination is active. No navigation geometry or
   interaction behavior is changed.
   ========================================================================== */
.listo-host-floating-dock .listo-dashboard-v2__dock-icon img,
.listo-dashboard-v2__dock .listo-dashboard-v2__dock-icon img{
  filter:grayscale(1) saturate(.12) opacity(.68)!important;
  transition:filter .18s ease,opacity .18s ease,transform .18s ease!important;
}
.listo-host-floating-dock a.is-active .listo-dashboard-v2__dock-icon img,
.listo-host-floating-dock button.is-active .listo-dashboard-v2__dock-icon img,
.listo-dashboard-v2__dock a.is-active .listo-dashboard-v2__dock-icon img,
.listo-dashboard-v2__dock button.is-active .listo-dashboard-v2__dock-icon img{
  filter:none!important;
  opacity:1!important;
}

/* ========================================================================== 
   NEXT1095 — Host More navigation state.
   More-menu icons use the same muted-by-default / full-color-when-active
   behavior as the floating dock. The More dock item remains active whenever
   the current page belongs to the More section, even after the tray closes.
   ========================================================================== */
.listo-host-floating-dock__more-panel .listo-dashboard-v2__more-icon .listo-host-more-icon-img{
  filter:grayscale(1) saturate(.12) opacity(.68)!important;
  transition:filter .18s ease,opacity .18s ease,transform .18s ease!important;
}
.listo-host-floating-dock__more-panel .listo-dashboard-v2__more-item.is-current .listo-host-more-icon-img{
  filter:none!important;
  opacity:1!important;
  transform:translateY(-1px) scale(1.04)!important;
}
.listo-host-floating-dock__more-panel .listo-dashboard-v2__more-item.is-current{
  border-color:#CFE5F6!important;
  background:#F8FBFE!important;
}

/* ========================================================================
   NEXT1099 — Host system pills: synchronized selected state
   ------------------------------------------------------------------------
   Selected Staycation/Parking pills use their system color as the surface,
   with white icon + label. The active class is applied immediately on
   pointerdown by host-context-switcher.js and is then confirmed server-side
   after navigation.
   ======================================================================== */
@media (max-width: 900px) {
  body[data-listo-mode="host"] .listo-host-context-pill.is-active,
  body[data-listo-mode="host"] .listo-host-context-pill.is-active:hover,
  body[data-listo-mode="host"] .listo-host-context-pill--staycation.is-active:active,
  body[data-listo-mode="host"] .listo-host-context-pill--staycation.is-active:hover:active {
    background: #2196F3 !important;
    border-color: #2196F3 !important;
    color: #fff !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill--parking.is-active,
  body[data-listo-mode="host"] .listo-host-context-pill--parking.is-active:hover,
  body[data-listo-mode="host"] .listo-host-context-pill--parking.is-active:active,
  body[data-listo-mode="host"] .listo-host-context-pill--parking.is-active:hover:active {
    background: #FFB300 !important;
    border-color: #FFB300 !important;
    color: #fff !important;
  }

  /* Keep the original full-color SVG artwork on the selected pill.
     Only the pill surface and label change to the system active color. */
  body[data-listo-mode="host"] .listo-host-context-pill.is-active .listo-host-context-pill__icon img {
    filter: none !important;
    opacity: 1 !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill.is-active .listo-host-context-pill__copy strong {
    color: #fff !important;
  }
}

/* NEXT1103 — Host workspace pills: match the muted neutral tone used by
   inactive floating-dock icons instead of the very light surface gray. */
@media (max-width: 900px) {
  body[data-listo-mode="host"] .listo-host-context-pill:not(.is-active),
  body[data-listo-mode="host"] .listo-host-context-pill:not(.is-active):hover,
  body[data-listo-mode="host"] .listo-host-context-pill:not(.is-active):active {
    background: #A3ABB2 !important;
    border-color: #A3ABB2 !important;
    color: #25313B !important;
  }

  /* Keep the selected system surface controlled by the shared switcher thumb. */
  body[data-listo-mode="host"] .listo-host-context-pill.is-active {
    background: transparent !important;
    border-color: transparent !important;
  }
}

/* ========================================================================
   NEXT1104 — Host mobile workspace pills: unified muted inactive state
   ------------------------------------------------------------------------
   Inactive Staycation/Parking pills should visually match the muted state of
   the floating Host dock. Remove the white-pill appearance and mute every
   element inside the inactive pill, including the illustrated icon.
   Active pills retain their system-colored surfaces and original full-color
   icon artwork.
   ======================================================================== */
@media (max-width: 900px) {
  body[data-listo-mode="host"] .listo-host-context-pill:not(.is-active),
  body[data-listo-mode="host"] .listo-host-context-pill:not(.is-active):hover,
  body[data-listo-mode="host"] .listo-host-context-pill:not(.is-active):focus-visible {
    background: #E5E9EC !important;
    border-color: #D7DDE1 !important;
    color: #8E979E !important;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.72),
      0 1px 2px rgba(30,42,52,.08) !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill:not(.is-active) .listo-host-context-pill__copy,
  body[data-listo-mode="host"] .listo-host-context-pill:not(.is-active) .listo-host-context-pill__copy strong {
    color: #8E979E !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill:not(.is-active) .listo-host-context-pill__icon img {
    filter: grayscale(1) !important;
    opacity: .72 !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill.is-active .listo-host-context-pill__icon img {
    filter: none !important;
    opacity: 1 !important;
  }
}

/* ========================================================================
   NEXT1105 — Host mobile system-pill final state correction
   ------------------------------------------------------------------------
   The active pill must own its colored surface directly. Do not use the
   legacy sliding thumb or transparent active surface. Inactive pills use a
   light neutral gray and all of their contents are muted to the same tone.
   Active icons retain their original full-color artwork.
   ======================================================================== */
@media (max-width: 900px) {
  body[data-listo-mode="host"] .listo-host-context-nav__switcher::before {
    display: none !important;
    content: none !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill:not(.is-active),
  body[data-listo-mode="host"] .listo-host-context-pill:not(.is-active):hover,
  body[data-listo-mode="host"] .listo-host-context-pill:not(.is-active):active {
    background: #E8ECEF !important;
    border-color: #DDE2E6 !important;
    color: #9AA2A9 !important;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.8), 0 1px 2px rgba(30,42,52,.06) !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill:not(.is-active) .listo-host-context-pill__copy,
  body[data-listo-mode="host"] .listo-host-context-pill:not(.is-active) .listo-host-context-pill__copy strong {
    color: #9AA2A9 !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill:not(.is-active) .listo-host-context-pill__icon img {
    filter: grayscale(1) saturate(0) !important;
    opacity: .62 !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill--staycation.is-active,
  body[data-listo-mode="host"] .listo-host-context-pill--staycation.is-active:hover,
  body[data-listo-mode="host"] .listo-host-context-pill--staycation.is-active:active {
    background: #2196F3 !important;
    border-color: #2196F3 !important;
    color: #fff !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.13), inset 0 -1px 2px rgba(255,255,255,.18), 0 2px 6px rgba(33,150,243,.20) !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill--parking.is-active,
  body[data-listo-mode="host"] .listo-host-context-pill--parking.is-active:hover,
  body[data-listo-mode="host"] .listo-host-context-pill--parking.is-active:active {
    background: #FFB300 !important;
    border-color: #FFB300 !important;
    color: #fff !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.13), inset 0 -1px 2px rgba(255,255,255,.18), 0 2px 6px rgba(255,179,0,.20) !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill.is-active .listo-host-context-pill__icon img {
    filter: none !important;
    opacity: 1 !important;
  }

  body[data-listo-mode="host"] .listo-host-context-pill.is-active .listo-host-context-pill__copy,
  body[data-listo-mode="host"] .listo-host-context-pill.is-active .listo-host-context-pill__copy strong {
    color: #fff !important;
  }
}

/* NEXT1106 — Mobile Booking Overview: remove the thin rail lines above and below the metric panels. */
@media (max-width: 720px) {
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
}

/* NEXT1107 — Mobile Booking Overview: keep each metric panel fully enclosed
 * while removing the shared horizontal rail lines. Each metric is its own
 * rounded panel; the summary rail itself has no border. */
@media (max-width: 720px) {
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary {
    gap: 8px !important;
    margin: 0 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item {
    flex: 0 0 142px !important;
    min-width: 0 !important;
    border: 1px solid #E2E8ED !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(28,45,58,.025) !important;
  }
  body.listo-host-staycation-bookings-app .listo-bookings-workspace--host-focused .listo-host-bookings-summary__item:last-child {
    border-right: 1px solid #E2E8ED !important;
  }
}


/* NEXT1108 — Airbnb import completion notice */
.listo-airbnb-import-notice{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid #dbeafe;background:#f5faff;border-radius:12px;color:#3f4a56;font-size:13px}.listo-airbnb-import-notice strong{color:#1f2937;white-space:nowrap}.listo-airbnb-import-notice span{color:#667085}@media(max-width:720px){.listo-airbnb-import-notice{display:block}.listo-airbnb-import-notice strong{display:block;margin-bottom:3px}}

/* NEXT1109.7 — make the Staycation photo capacity explicit in the form. */
.listo-photo-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  margin-left: 7px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}


/* ========================================================================
   NEXT1111 — New Listing (Host) 2.0
   Presentation-only refinement of the existing Staycation listing editor.
   Existing field IDs, data attributes, AJAX contracts and form order remain
   unchanged. Edit Listing keeps its existing title/header treatment.
   ======================================================================== */
body:has(.listo-new-listing-page) .listo-new-listing-page{max-width:900px!important;padding-top:18px!important;padding-bottom:0!important}
body:has(.listo-new-listing-page) .listo-new-listing-page__header{display:block!important;margin:0 0 18px!important}
body:has(.listo-new-listing-page) .listo-new-listing-page__heading-copy{display:block!important}
.listo-new-listing-page__back{display:inline-flex;align-items:center;gap:7px;margin:0 0 11px;color:#71808c;font-size:13px;font-weight:600;line-height:1.2;text-decoration:none}.listo-new-listing-page__back:hover,.listo-new-listing-page__back:focus-visible{color:#172631}.listo-new-listing-page__back span{font-size:17px;line-height:1}
body:has(.listo-new-listing-page) .listo-new-listing-page h1{margin:0;font-size:24px;line-height:29px;font-weight:600;letter-spacing:normal;color:#172631}body:has(.listo-new-listing-page) .listo-new-listing-page .listo-host-page-description{margin:6px 0 0;max-width:760px;font-size:14px;line-height:21px;color:#70818d}
body:has(.listo-new-listing-page) .listo-listing-form{max-width:900px!important;padding-top:0!important}body:has(.listo-new-listing-page) .listo-listing-form .listo-form-section{margin:0;padding:24px 0;border:0;border-bottom:1px solid #e4e9ee;border-radius:0;background:transparent;box-shadow:none!important}body:has(.listo-new-listing-page) .listo-listing-form .listo-form-section:first-of-type{padding-top:8px}
body:has(.listo-new-listing-page) .listo-listing-form .listo-form-section h2{margin:0 0 6px;font-size:18px!important;line-height:25px!important;font-weight:600;color:#172631!important}body:has(.listo-new-listing-page) .listo-listing-form .listo-form-section__description{margin:0 0 16px;color:#70818d;font-size:13px;line-height:1.5}body:has(.listo-new-listing-page) .listo-listing-form .listo-field{margin-bottom:16px}body:has(.listo-new-listing-page) .listo-listing-form .listo-field:last-child{margin-bottom:0}body:has(.listo-new-listing-page) .listo-listing-form input,body:has(.listo-new-listing-page) .listo-listing-form select,body:has(.listo-new-listing-page) .listo-listing-form textarea{border-radius:10px!important}body:has(.listo-new-listing-page) .listo-listing-form input,body:has(.listo-new-listing-page) .listo-listing-form select{min-height:46px!important}
body:has(.listo-new-listing-page) .listo-listing-form .listo-form-section--photos,body:has(.listo-new-listing-page) .listo-listing-form .listo-form-section--parking,body:has(.listo-new-listing-page) .listo-listing-form .listo-form-section--addons{margin:18px 0;padding:20px;border:1px solid #e1e8ee;border-radius:14px;background:#fff;box-shadow:0 3px 14px rgba(24,39,75,.035)!important}body:has(.listo-new-listing-page) .listo-listing-form .listo-form-section--photos .listo-photo-grid{margin-top:14px}body:has(.listo-new-listing-page) .listo-listing-form > .listo-field-error[data-error-for="listing-form"]{margin-top:18px}
body:has(.listo-new-listing-page) .listo-listing-form > div[style*="display:flex"]{margin-top:22px!important;padding-top:20px;border-top:1px solid #e4e9ee;position:sticky;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);z-index:5}body:has(.listo-new-listing-page) .listo-listing-form > div[style*="display:flex"] .listo-btn{min-height:44px}
@media(max-width:800px){body:has(.listo-new-listing-page) .listo-new-listing-page{width:calc(100% - 24px)!important;padding-top:12px!important}body:has(.listo-new-listing-page) .listo-new-listing-page h1{font-size:20px;line-height:25px}body:has(.listo-new-listing-page) .listo-new-listing-page .listo-host-page-description{font-size:13px;line-height:1.45;margin-top:5px}body:has(.listo-new-listing-page) .listo-listing-form{width:calc(100% - 24px)!important;padding-bottom:34px!important}body:has(.listo-new-listing-page) .listo-listing-form .listo-form-section{padding:20px 0}body:has(.listo-new-listing-page) .listo-listing-form .listo-form-section--photos,body:has(.listo-new-listing-page) .listo-listing-form .listo-form-section--parking,body:has(.listo-new-listing-page) .listo-listing-form .listo-form-section--addons{padding:16px;margin:16px 0;border-radius:13px}body:has(.listo-new-listing-page) .listo-listing-form .listo-form-section h2{font-size:17px!important;line-height:24px!important}body:has(.listo-new-listing-page) .listo-listing-form .listo-form-section__description{font-size:12.5px;margin-bottom:14px}body:has(.listo-new-listing-page) .listo-listing-form .listo-field-grid{grid-template-columns:1fr!important}body:has(.listo-new-listing-page) .listo-listing-form > div[style*="display:flex"]{position:static;display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;padding-bottom:8px}body:has(.listo-new-listing-page) .listo-listing-form > div[style*="display:flex"] .listo-btn{width:100%}}
@media(max-width:420px){body:has(.listo-new-listing-page) .listo-listing-form > div[style*="display:flex"]{grid-template-columns:1fr}}


/* ========================================================================
   NEXT1117 — Listing form photo gallery: image-first layout (New + Edit)
   Use the actual New Listing form class rather than :has() so this
   refinement cannot be defeated by selector context or browser caching.
   The gallery uses five substantial desktop columns and keeps all controls
   in a dedicated row below each image.
   ======================================================================== */
.listo-listing-form #listo-photo-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start;
}

.listo-listing-form #listo-photo-grid .listo-photo-thumb {
  display: grid !important;
  grid-template-rows: auto auto !important;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
}

.listo-listing-form #listo-photo-grid .listo-photo-thumb__image-wrap {
  grid-row: 1;
  aspect-ratio: 4 / 3 !important;
  width: 100%;
}

.listo-listing-form #listo-photo-grid .listo-photo-thumb__controls {
  grid-row: 2;
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
  align-items: center;
  gap: 7px;
  padding: 8px;
  background: #fff;
  border-top: 1px solid var(--border);
}

.listo-listing-form #listo-photo-grid .listo-photo-directory-btn {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  min-height: 30px !important;
  padding: 5px 9px !important;
  border-radius: 7px;
  font-size: 11px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.listo-listing-form #listo-photo-grid .listo-photo-category {
  position: static !important;
  inset: auto !important;
  display: block !important;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.listo-listing-form #listo-photo-grid .listo-photo-remove {
  z-index: 3;
  top: 8px !important;
  right: 8px !important;
  width: 28px !important;
  height: 28px !important;
}

.listo-listing-form #listo-photo-grid .listo-photo-thumb__directory-badge {
  z-index: 2;
  left: 8px !important;
  top: 8px !important;
  bottom: auto !important;
  padding: 4px 7px !important;
  border-radius: 6px;
  font-size: 9px !important;
}

@media (max-width: 1200px) and (min-width: 901px) {
  .listo-listing-form #listo-photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) and (min-width: 601px) {
  .listo-listing-form #listo-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 600px) {
  .listo-listing-form #listo-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .listo-listing-form #listo-photo-grid .listo-photo-thumb__controls {
    grid-template-columns: 1fr !important;
    gap: 6px;
    padding: 7px;
  }

  .listo-listing-form #listo-photo-grid .listo-photo-directory-btn,
  .listo-listing-form #listo-photo-grid .listo-photo-category {
    width: 100% !important;
  }
}

/* Edit Listing sits beside the host sidebar, so size tiles by available
   width instead of viewport width: ~260px minimum keeps previews legible. */
.listo-listing-form:not(.listo-new-listing-form) #listo-photo-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}

@media (max-width: 600px) {
  .listo-listing-form:not(.listo-new-listing-form) #listo-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ========================================================================
   NEXT1111 — Staycation Listings draft deletion
   Draft-only destructive action. Existing publish/unpublish actions and
   listing lifecycle remain unchanged.
   ======================================================================== */
body.listo-host-staycation-listings-app .listo-my-listing-card__menu .listo-listing-delete-draft{
  margin-top:4px!important;
  padding-top:11px!important;
  border-top:1px solid var(--border)!important;
  border-radius:0 0 8px 8px!important;
  color:#B42318!important;
  font-weight:600!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__menu .listo-listing-delete-draft:hover{
  background:#FFF1F0!important;
  color:#B42318!important;
}
body.listo-host-staycation-listings-app .listo-my-listing-card__menu .listo-listing-delete-draft[disabled]{
  opacity:.6!important;
  cursor:progress!important;
}

/* ========================================================================
   NEXT1118 — Host desktop page-title geometry normalization
   ------------------------------------------------------------------------
   Desktop-only presentation contract for Host Mode. Every Host workspace
   title/header now uses the same vertical entry position, title size/weight,
   and title-to-description rhythm regardless of its underlying page shell.
   Mobile is intentionally untouched.
   ======================================================================== */
@media (min-width: 901px) {
  :root {
    --listo-host-desktop-title-top: 56px;
    --listo-host-desktop-title-size: 24px;
    --listo-host-desktop-title-line: 29px;
    --listo-host-desktop-title-weight: 600;
  }

  /* Keep every primary Host page canvas anchored to the same title baseline. */
  body[data-listo-mode="host"] .listo-main > .listo-container,
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell,
  body[data-listo-mode="host"] .listo-main > .listo-host-account-page,
  body[data-listo-mode="host"] .listo-main > .listo-host-app-page,
  body[data-listo-mode="host"] .listo-main > .listo-inbox-page,
  body[data-listo-mode="host"] .listo-main > .listo-host-home,
  body[data-listo-mode="host"] .listo-main > .listo-dashboard-v2 {
    padding-top: var(--listo-host-desktop-title-top) !important;
  }

  /* Canonical title row: one size, one weight, one line-height, one top
     position. Decorative title icons remain governed by the existing Host
     title treatment and are not reintroduced here. */
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-page-header,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-app-page__header,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-inbox-page__header {
    margin-top: 0 !important;
  }

  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row > h1,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row .listo-inbox__heading,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-page-header h1,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-app-page__header h1,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-inbox-page__header h1 {
    margin-top: 0 !important;
    font-size: var(--listo-host-desktop-title-size) !important;
    line-height: var(--listo-host-desktop-title-line) !important;
    font-weight: var(--listo-host-desktop-title-weight) !important;
    letter-spacing: normal !important;
  }

  /* Header-style pages keep the description directly under the same title
     baseline. */
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-page-header p,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-app-page__header p,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-inbox-page__header p,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row + .listo-host-page-description,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row + .listo-page-description,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row + .listo-page-intro,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row + .listo-page-title-subtitle,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-page-title-row + .listo-caption {
    margin-top: 0 !important;
  }

  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-page-header p,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-host-app-page__header p,
  body[data-listo-mode="host"] .listo-main .listo-host-page-title-standard.listo-inbox-page__header p {
    margin-bottom: 22px !important;
  }

  /* Parking Listings has a title row with an action button; normalize its
     title copy without disturbing the button itself. */
  body[data-listo-mode="host"] .listo-main .listo-page-title-row.listo-host-page-title-standard.listo-page-title-row--parking > .listo-host-parking-listings-title-copy h1 {
    margin-top: 0 !important;
    font-size: var(--listo-host-desktop-title-size) !important;
    line-height: var(--listo-host-desktop-title-line) !important;
    font-weight: var(--listo-host-desktop-title-weight) !important;
    letter-spacing: normal !important;
  }
}

/* NEXT1141 — Host Home 2.0 Monthly Business */
.listo-host-monthly-business{padding:20px;margin-bottom:18px;border:1px solid var(--dash-line,#E3E8ED);border-radius:20px;background:#fff;box-shadow:0 7px 25px rgba(24,39,75,.045)}
.listo-host-monthly-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:12px}.listo-host-monthly-head>div:first-child span,.listo-host-monthly-card .listo-home-section-head span{font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:#82909B}.listo-host-monthly-head h2{margin:3px 0 3px;font-size:20px;color:var(--dash-ink,#1F2937)}.listo-host-monthly-head p{margin:0;color:#74808A;font-size:12px}.listo-host-monthly-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.listo-host-monthly-controls form{margin:0}.listo-host-monthly-controls .listo-select{min-width:145px;height:38px}.listo-host-report-button{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 13px;border-radius:9px;background:#2196F3;color:#fff!important;text-decoration:none;font-size:11px;font-weight:800}.listo-host-report-button--secondary{background:#fff;color:#1F2937!important;border:1px solid #DCE3E8}.listo-host-monthly-selected{display:flex;align-items:baseline;gap:8px;margin:4px 0 14px}.listo-host-monthly-selected strong{font-size:14px;color:#1F2937}.listo-host-monthly-selected span{font-size:10.5px;color:#87939D}.listo-host-monthly-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid #E1E6EA;border-radius:13px;margin-bottom:16px}.listo-host-monthly-metric{padding:16px;background:#fff;min-width:0}.listo-host-monthly-metric+ .listo-host-monthly-metric{border-left:1px solid #E9EDF0}.listo-host-monthly-metric span,.listo-host-monthly-metric strong,.listo-host-monthly-metric small,.listo-host-monthly-metric em{display:block}.listo-host-monthly-metric span{font-size:10.5px;color:#71808B}.listo-host-monthly-metric strong{margin-top:5px;font-size:23px;line-height:1.1;color:#1F2937}.listo-host-monthly-metric small{margin-top:5px;font-size:9.8px;color:#89949C;line-height:1.35}.listo-host-monthly-metric em{margin-top:8px;font-size:10px;font-style:normal;font-weight:800;color:#1677C8}.listo-host-monthly-chart-card,.listo-host-monthly-card{border:1px solid #E1E6EA;border-radius:14px;background:#fff;padding:16px;margin-bottom:14px}.listo-host-monthly-chart-card .listo-home-section-head,.listo-host-monthly-card .listo-home-section-head{margin-bottom:12px}.listo-host-monthly-chart-card h3,.listo-host-monthly-card h3{margin:3px 0 0;font-size:15px;color:#1F2937}.listo-host-chart-toggle{display:flex;border:1px solid #DDE5EB;border-radius:999px;padding:2px;background:#F7F9FA}.listo-host-chart-toggle a,.listo-host-chart-toggle button{padding:6px 10px;border-radius:999px;border:0;background:transparent;color:#6E7C86;text-decoration:none;font-size:10px;font-weight:800;cursor:pointer;font-family:inherit}.listo-host-chart-toggle a.is-active,.listo-host-chart-toggle button.is-active{background:#2196F3;color:#fff}.listo-host-simple-chart{height:225px;display:flex;align-items:flex-end;gap:18px;padding:12px 14px 0}.listo-host-simple-chart__item{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.listo-host-simple-chart__value{height:24px;font-size:9px;color:#6E7C86;white-space:nowrap}.listo-host-simple-chart__track{height:175px;width:min(48px,65%);display:flex;align-items:flex-end;border-radius:8px 8px 3px 3px;background:#F4F7F9;overflow:hidden}.listo-host-simple-chart__track span{display:block;width:100%;border-radius:8px 8px 2px 2px;background:#2196F3;min-height:2px}.listo-host-simple-chart__item small{margin-top:7px;font-size:10px;color:#82909B}.listo-host-monthly-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.listo-host-monthly-split-grid .listo-host-monthly-card{margin-bottom:14px}.listo-host-breakdown-row{display:grid;grid-template-columns:minmax(0,1fr) auto 42px;align-items:center;gap:10px;padding:12px 0;border-top:1px solid #EEF1F3}.listo-host-breakdown-row span{font-size:12px;color:#46545E}.listo-host-breakdown-row strong{font-size:13px;color:#1F2937}.listo-host-breakdown-row small{text-align:right;font-size:10px;color:#82909B}.listo-host-breakdown-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:#2196F3}.listo-host-breakdown-dot--parking{background:#FFB300}.listo-host-report-copy{font-size:11.5px;color:#74808A;line-height:1.5;margin:0 0 13px}.listo-host-report-links{display:flex;gap:8px;flex-wrap:wrap}.listo-host-report-links a{display:inline-flex;padding:9px 11px;border-radius:9px;background:#F2F7FC;color:#1677C8;text-decoration:none;font-size:10.5px;font-weight:800}.listo-host-listing-table{overflow-x:auto}.listo-host-listing-table__head,.listo-host-listing-table__row{display:grid;grid-template-columns:minmax(190px,2fr) 1fr 100px 80px 120px;gap:10px;align-items:center;min-width:650px}.listo-host-listing-table__head{padding:8px 10px;border-radius:8px;background:#F5F8FA;color:#7B8891;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}.listo-host-listing-table__row{padding:11px 10px;border-bottom:1px solid #EEF1F3;font-size:10.5px;color:#5E6B74}.listo-host-listing-table__row strong{font-size:11px;color:#1F2937;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.listo-host-listing-table__row b{text-align:right;color:#1F2937}.listo-host-monthly-business+.listo-home-section--discovery{margin-top:0}.listo-host-monthly-business .listo-home-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
@media(max-width:800px){.listo-host-monthly-business{padding:14px;border-radius:15px}.listo-host-monthly-head{display:block}.listo-host-monthly-controls{margin-top:12px}.listo-host-monthly-controls form{flex:1}.listo-host-monthly-controls .listo-select{width:100%;min-width:0}.listo-host-report-button{flex:1}.listo-host-monthly-selected{display:block}.listo-host-monthly-selected span{display:block;margin-top:3px}.listo-host-monthly-metrics{grid-template-columns:1fr 1fr}.listo-host-monthly-metric{padding:13px}.listo-host-monthly-metric:nth-child(3){border-left:0;border-top:1px solid #E9EDF0}.listo-host-monthly-metric:nth-child(4){border-top:1px solid #E9EDF0}.listo-host-monthly-metric strong{font-size:19px}.listo-host-monthly-split-grid{grid-template-columns:1fr;gap:0}.listo-host-monthly-chart-card,.listo-host-monthly-card{padding:13px}.listo-host-monthly-chart-card .listo-home-section-head{display:block}.listo-host-chart-toggle{margin-top:10px;width:max-content}.listo-host-simple-chart{gap:8px;height:200px;padding:8px 4px 0}.listo-host-simple-chart__track{height:150px;width:min(34px,72%)}.listo-host-simple-chart__value{font-size:8px}.listo-host-monthly-business .listo-home-section-head{display:block}.listo-host-listing-table__head,.listo-host-listing-table__row{grid-template-columns:minmax(150px,1.8fr) 85px 75px 60px 105px;min-width:555px}}


/* ==========================================================================
   NEXT1142 — Home 2.0 reporting refinements
   ========================================================================== */
.listo-host-month-nav{
  display:flex;
  align-items:center;
  gap:6px;
}
.listo-host-month-nav a,
.listo-host-month-nav>span{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:0 9px;
  border:1px solid #DCE3E8;
  border-radius:9px;
  background:#fff;
  color:#43515B;
  text-decoration:none;
  font-size:10.5px;
  font-weight:800;
  white-space:nowrap;
}
.listo-host-month-nav a:hover{
  border-color:#B8C8D4;
  background:#F7FAFC;
}
.listo-host-month-nav .is-disabled{
  color:#AAB4BB;
  background:#F7F9FA;
}
.listo-host-listing-service-label{
  margin:14px 0 7px;
  font-size:10px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#687782;
}
.listo-host-listing-table--staycation .listo-host-listing-table__head,
.listo-host-listing-table--staycation .listo-host-listing-table__row{
  grid-template-columns:minmax(190px,2fr) 100px 80px 120px;
  min-width:560px;
}
.listo-host-listing-table--parking .listo-host-listing-table__head,
.listo-host-listing-table--parking .listo-host-listing-table__row{
  grid-template-columns:minmax(190px,2fr) 100px minmax(120px,1fr) 120px;
  min-width:590px;
}
.listo-host-listing-more{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:12px;
  font-size:10.5px;
  color:#82909B;
}
.listo-host-listing-more a{
  color:#1677C8;
  font-weight:800;
  text-decoration:none;
}
@media(max-width:800px){
  .listo-host-month-nav{
    width:100%;
    justify-content:space-between;
  }
  .listo-host-month-nav form{
    flex:1;
  }
  .listo-host-month-nav .listo-select{
    width:100%;
    min-width:0;
  }
  .listo-host-month-nav a,
  .listo-host-month-nav>span{
    padding:0 7px;
  }
  .listo-host-month-nav a span,
  .listo-host-month-nav>span span{
    display:none;
  }
  .listo-host-listing-table--staycation .listo-host-listing-table__head,
  .listo-host-listing-table--staycation .listo-host-listing-table__row{
    grid-template-columns:minmax(150px,1.8fr) 78px 60px 105px;
    min-width:500px;
  }
  .listo-host-listing-table--parking .listo-host-listing-table__head,
  .listo-host-listing-table--parking .listo-host-listing-table__row{
    grid-template-columns:minmax(150px,1.7fr) 78px 105px 105px;
    min-width:540px;
  }
}

/* ==========================================================================\n   NEXT1143 — Home 2.0 Dashboard design alignment\n   Visual-only refinement of the existing Dashboard 2.0 experience.\n   Functional analytics, reporting, authorization, and booking/payment logic\n   remain in the NEXT1142 implementation.\n   ========================================================================== */
body[data-listo-mode="host"] .listo-main > .listo-host-home--analytics{
  box-sizing:border-box;
  width:100%;
  max-width:none!important;
  padding-top:0;
}

/* Home uses the same Host title geometry, while retaining the greeting as\n   the Dashboard-specific identity cue. */
body[data-listo-mode="host"] .listo-host-home--analytics .listo-dashboard-v2__header{
  min-height:59px!important;
  margin:0 0 24px!important;
  padding:0!important;
  align-items:flex-start!important;
}
body[data-listo-mode="host"] .listo-host-home--analytics .listo-dashboard-v2__header h1{
  margin:0!important;
  font-size:26px!important;
  line-height:30px!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
  color:#172631!important;
}
body[data-listo-mode="host"] .listo-host-home--analytics .listo-dashboard-v2__header p{
  margin:5px 0 0!important;
  font-size:14px!important;
  line-height:20px!important;
  color:#70818D!important;
  max-width:760px!important;
}
body[data-listo-mode="host"] .listo-host-home--analytics .listo-dashboard-v2__header-date{
  min-width:auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:right!important;
}

/* Remove the large Home-only shell around the analytics workspace. The
   analytics components remain grouped, but the page itself is no longer a
   card inside a card. */
body[data-listo-mode="host"] .listo-host-monthly-business{
  margin:0 0 30px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.listo-host-monthly-head{
  min-height:42px;
  margin:0 0 18px!important;
  padding:0!important;
  align-items:flex-start!important;
}
.listo-host-monthly-head>div:first-child span,
.listo-host-monthly-card .listo-home-section-head span{
  font-size:11px!important;
  line-height:15px!important;
  letter-spacing:.055em!important;
  font-weight:700!important;
  color:#71808B!important;
}
.listo-host-monthly-head h2{
  margin:2px 0 0!important;
  font-size:20px!important;
  line-height:26px!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
  color:#172631!important;
}
.listo-host-monthly-head p{
  margin:3px 0 0!important;
  font-size:13px!important;
  line-height:19px!important;
  color:#70818D!important;
}
.listo-host-monthly-controls{
  gap:8px!important;
  align-items:center!important;
}
.listo-host-month-nav a,
.listo-host-month-nav>span{
  min-height:40px!important;
  border-radius:10px!important;
  font-size:12px!important;
  font-weight:600!important;
  color:#43515B!important;
}
.listo-host-monthly-controls .listo-select{
  min-width:150px!important;
  height:40px!important;
  border-radius:10px!important;
  font-size:12px!important;
}
.listo-host-monthly-selected{
  margin:0 0 14px!important;
}
.listo-host-monthly-selected strong{
  font-size:13px!important;
  font-weight:600!important;
  color:#43515B!important;
}
.listo-host-monthly-selected span{
  font-size:12px!important;
  color:#87939D!important;
}

/* KPI group: one information surface, not four oversized dashboard tiles. */
.listo-host-monthly-metrics{
  border:1px solid #E1E6EA!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:none!important;
  margin-bottom:20px!important;
}
.listo-host-monthly-metric{
  min-height:112px;
  padding:18px 20px!important;
}
.listo-host-monthly-metric span{
  font-size:12px!important;
  line-height:16px!important;
  color:#667680!important;
}
.listo-host-monthly-metric strong{
  margin-top:6px!important;
  font-size:26px!important;
  line-height:31px!important;
  font-weight:600!important;
  letter-spacing:-.025em!important;
  color:#172631!important;
}
.listo-host-monthly-metric small{
  margin-top:5px!important;
  font-size:11px!important;
  line-height:15px!important;
  color:#82909B!important;
}
.listo-host-monthly-metric em{
  margin-top:7px!important;
  font-size:11px!important;
  line-height:15px!important;
  font-weight:600!important;
  color:#1677C8!important;
}

/* Analytics surfaces inherit the same restrained Host card language. */
.listo-host-monthly-chart-card,
.listo-host-monthly-card{
  border:1px solid #E1E6EA!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:none!important;
  padding:20px!important;
  margin-bottom:16px!important;
}
.listo-host-monthly-chart-card .listo-home-section-head,
.listo-host-monthly-card .listo-home-section-head{
  margin-bottom:14px!important;
}
.listo-host-monthly-chart-card h3,
.listo-host-monthly-card h3{
  margin:2px 0 0!important;
  font-size:18px!important;
  line-height:24px!important;
  font-weight:600!important;
  color:#172631!important;
}
.listo-host-monthly-chart-card .listo-home-section-head>div:first-child,
.listo-host-monthly-card .listo-home-section-head>div:first-child{
  min-width:0;
}
.listo-host-monthly-chart-card .listo-home-section-head>small,
.listo-host-monthly-card .listo-home-section-head>small{
  font-size:11px!important;
  color:#87939D!important;
}

/* Keep the chart quiet and data-first. */
.listo-host-simple-chart{
  height:236px!important;
  gap:20px!important;
  padding:14px 8px 0!important;
}
.listo-host-simple-chart__value{
  height:25px!important;
  font-size:10px!important;
  color:#667680!important;
}
.listo-host-simple-chart__track{
  height:178px!important;
  width:min(46px,68%)!important;
  border-radius:7px 7px 3px 3px!important;
  background:#F5F7F8!important;
}
.listo-host-simple-chart__track span{
  border-radius:7px 7px 2px 2px!important;
  background:#2196F3!important;
}
.listo-host-simple-chart__item small{
  margin-top:8px!important;
  font-size:11px!important;
  color:#7C8992!important;
}
.listo-host-chart-toggle{
  border-radius:9px!important;
  padding:2px!important;
  background:#F7F9FA!important;
  border:1px solid #DDE5EB!important;
}
.listo-host-chart-toggle a{
  padding:7px 11px!important;
  border-radius:7px!important;
  font-size:11px!important;
  font-weight:600!important;
}
.listo-host-chart-toggle a.is-active{
  background:#2196F3!important;
  color:#fff!important;
}

/* Revenue breakdown and reporting are sibling workspaces, not nested cards. */
.listo-host-monthly-split-grid{
  gap:16px!important;
}
.listo-host-breakdown-row{
  padding:13px 0!important;
}
.listo-host-breakdown-row span{
  font-size:13px!important;
}
.listo-host-breakdown-row strong{
  font-size:14px!important;
  font-weight:600!important;
}
.listo-host-breakdown-row small{
  font-size:11px!important;
}
.listo-host-breakdown-dot--deposit{
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:8px;
  border-radius:50%;
  background:#7C5CFC;
  vertical-align:middle;
}
.listo-host-breakdown-note{
  margin:0 0 8px;
  color:#70818D;
  font-size:12px;
  line-height:18px;
}
.listo-host-report-copy{
  margin:0 0 16px!important;
  font-size:13px!important;
  line-height:19px!important;
  color:#70818D!important;
}
.listo-host-report-links{
  gap:8px!important;
}
.listo-host-report-button{
  min-height:40px!important;
  height:40px!important;
  padding:0 14px!important;
  border-radius:9px!important;
  font-size:12px!important;
  font-weight:600!important;
  background:#2196F3!important;
  color:#fff!important;
}
.listo-host-report-button--secondary{
  background:#fff!important;
  color:#43515B!important;
  border:1px solid #CBD6DE!important;
}

/* Listing performance follows Host table conventions rather than a bespoke
   analytics-table aesthetic. */
.listo-host-listing-service-label{
  margin:18px 0 8px!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.055em!important;
  color:#71808B!important;
}
.listo-host-listing-table__head{
  border-radius:8px!important;
  background:#F7F9FA!important;
  padding:9px 12px!important;
  font-size:10px!important;
  font-weight:600!important;
  letter-spacing:.035em!important;
  color:#71808B!important;
}
.listo-host-listing-table__row{
  padding:12px!important;
  border-bottom:1px solid #EEF1F3!important;
  font-size:12px!important;
  color:#5E6B74!important;
}
.listo-host-listing-table__row strong{
  font-size:12px!important;
  font-weight:600!important;
  color:#172631!important;
}
.listo-host-listing-table__row b{
  font-size:12px!important;
  font-weight:600!important;
  color:#172631!important;
}
.listo-host-listing-more{
  padding-top:14px!important;
  font-size:12px!important;
}
.listo-host-listing-more a{
  color:#1677C8!important;
  font-weight:600!important;
}

@media(max-width:800px){
  body[data-listo-mode="host"] .listo-main > .listo-host-home--analytics{
    max-width:none!important;
    padding:20px 2px 110px!important;
  }
  body[data-listo-mode="host"] .listo-host-home--analytics .listo-dashboard-v2__header{
    min-height:0!important;
    margin:0 0 20px!important;
    padding:0!important;
  }
  body[data-listo-mode="host"] .listo-host-home--analytics .listo-dashboard-v2__header h1{
    font-size:22px!important;
    line-height:26px!important;
  }
  body[data-listo-mode="host"] .listo-host-home--analytics .listo-dashboard-v2__header p{
    font-size:13px!important;
    line-height:18px!important;
    margin-top:5px!important;
  }
  .listo-host-monthly-head{
    margin-bottom:16px!important;
  }
  .listo-host-monthly-head h2{
    font-size:18px!important;
    line-height:24px!important;
  }
  .listo-host-monthly-head p{
    font-size:12px!important;
    line-height:18px!important;
  }
  .listo-host-monthly-controls{
    margin-top:12px!important;
  }
  .listo-host-monthly-controls .listo-select{
    height:40px!important;
    border-radius:9px!important;
  }
  .listo-host-monthly-selected{
    margin-bottom:12px!important;
  }
  .listo-host-monthly-metrics{
    margin-bottom:16px!important;
  }
  .listo-host-monthly-metric{
    min-height:108px!important;
    padding:15px 14px!important;
  }
  .listo-host-monthly-metric strong{
    font-size:21px!important;
    line-height:26px!important;
  }
  .listo-host-monthly-chart-card,
  .listo-host-monthly-card{
    padding:15px!important;
    border-radius:12px!important;
  }
  .listo-host-monthly-chart-card h3,
  .listo-host-monthly-card h3{
    font-size:16px!important;
    line-height:22px!important;
  }
  .listo-host-simple-chart{
    height:208px!important;
    gap:8px!important;
    padding:8px 2px 0!important;
  }
  .listo-host-simple-chart__track{
    height:150px!important;
    width:min(34px,72%)!important;
  }
  .listo-host-simple-chart__value{
    font-size:8px!important;
  }
  .listo-host-simple-chart__item small{
    font-size:10px!important;
  }
  .listo-host-chart-toggle{
    margin-top:10px!important;
    width:max-content!important;
  }
  .listo-host-chart-toggle a{
    padding:7px 10px!important;
  }
  .listo-host-monthly-split-grid{
    grid-template-columns:1fr!important;
    gap:0!important;
  }
  .listo-host-report-links{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }
  .listo-host-report-button{
    width:100%!important;
  }

  /* Mobile listing performance becomes a readable two-column data list
     instead of forcing the Host into horizontal scrolling. */
  .listo-host-listing-table{
    overflow:visible!important;
  }
  .listo-host-listing-table__head{
    display:none!important;
  }
  .listo-host-listing-table--staycation .listo-host-listing-table__row,
  .listo-host-listing-table--parking .listo-host-listing-table__row{
    min-width:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px 14px!important;
    padding:13px 0!important;
  }
  .listo-host-listing-table__row strong{
    grid-column:1 / -1;
    white-space:normal!important;
    line-height:17px!important;
  }
  .listo-host-listing-table__row span,
  .listo-host-listing-table__row b{
    text-align:left!important;
    font-size:11px!important;
  }
  .listo-host-listing-table--staycation .listo-host-listing-table__row span:nth-child(2)::before{
    content:"Reservations";
  }
  .listo-host-listing-table--staycation .listo-host-listing-table__row span:nth-child(3)::before{
    content:"Nights";
  }
  .listo-host-listing-table--staycation .listo-host-listing-table__row b::before{
    content:"Revenue";
  }
  .listo-host-listing-table--parking .listo-host-listing-table__row span:nth-child(2)::before{
    content:"Reservations";
  }
  .listo-host-listing-table--parking .listo-host-listing-table__row span:nth-child(3)::before{
    content:"Duration";
  }
  .listo-host-listing-table--parking .listo-host-listing-table__row b::before{
    content:"Revenue";
  }
  .listo-host-listing-table__row span::before,
  .listo-host-listing-table__row b::before{
    display:block;
    margin-bottom:2px;
    font-size:9px;
    line-height:12px;
    font-weight:600;
    letter-spacing:.03em;
    color:#87939D;
    text-transform:uppercase;
  }
}

/* ==========================================================================
   NEXT1144 — Listing Analytics frontend + canonical Host page canvas
   Frontend only: discovery metrics remain explicitly unconnected until a
   production tracking source exists.
   ========================================================================== */
body[data-listo-mode="host"] .listo-main > .listo-dashboard-v2.listo-host-home {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.listo-host-listing-analytics { margin-top: 18px; }
.listo-host-listing-analytics__head { align-items: flex-start; }
.listo-host-listing-analytics__head > div:first-child p { margin: 5px 0 0; color: var(--dash-muted, #70808b); font-size: 12px; line-height: 1.5; }
.listo-host-listing-analytics__period { min-width: 135px; padding: 10px 12px; border: 1px solid var(--dash-line, #e4e8eb); border-radius: 12px; background: #fff; text-align: right; }
.listo-host-listing-analytics__period span,.listo-host-listing-analytics__period strong { display:block; }
.listo-host-listing-analytics__period span { font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#87939d; }
.listo-host-listing-analytics__period strong { margin-top:3px; font-size:12px; color:var(--dash-ink,#172631); }
.listo-host-analytics-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px; }
.listo-host-analytics-kpi { min-width:0; padding:16px; border:1px solid var(--dash-line,#e4e8eb); border-radius:14px; background:#fff; }
.listo-host-analytics-kpi div { min-width:0; }
.listo-host-analytics-kpi span,.listo-host-analytics-kpi b,.listo-host-analytics-kpi em { display:block; }
.listo-host-analytics-kpi span { font-size:11px; font-weight:700; color:var(--dash-muted,#70808b); }
.listo-host-analytics-kpi b { margin-top:8px; font-size:19px; line-height:1.1; color:#172631; }
.listo-host-analytics-kpi em { margin-top:9px; font-size:10px; font-style:normal; color:#98a3aa; }
.listo-host-analytics-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr); gap:14px; margin-top:14px; }
.listo-host-analytics-panel { min-width:0; padding:18px; border:1px solid var(--dash-line,#e4e8eb); border-radius:18px; background:#fff; box-shadow:0 7px 25px rgba(24,39,75,.035); }
.listo-host-analytics-panel .listo-home-section-head { margin-bottom:14px; }
.listo-host-analytics-panel .listo-home-section-head h3 { margin:3px 0 0; }
.listo-host-analytics-chart { position:relative; height:250px; overflow:hidden; border:1px solid #edf0f2; border-radius:13px; background:linear-gradient(180deg,#fbfdfe 0%,#fff 100%); padding:18px 14px 8px; }
.listo-host-analytics-chart__plot { height:100%; display:flex; align-items:stretch; gap:3px; border-bottom:1px solid #edf1f3; overflow:hidden; }
.listo-host-analytics-chart__day { flex:1 1 0; min-width:5px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; }
.listo-host-analytics-chart__bars { width:100%; max-width:18px; height:calc(100% - 18px); display:flex; align-items:flex-end; justify-content:center; gap:2px; }
.listo-host-analytics-chart__bars i,.listo-host-analytics-chart__bars b { display:block; width:45%; min-height:2px; border-radius:3px 3px 0 0; }
.listo-host-analytics-chart__bars i { background:#2196F3; }
.listo-host-analytics-chart__bars b { background:#cfd8de; }
.listo-host-analytics-chart__day > span { font-size:8px; color:#8b969e; line-height:1; }
.listo-host-analytics-chart__legend { display:flex; gap:18px; margin-top:10px; font-size:10px; color:#74818a; }
.listo-host-analytics-chart__legend span { display:flex; align-items:center; gap:6px; }
.listo-host-analytics-chart__legend i { display:block; width:7px; height:7px; border-radius:50%; background:#2196F3; }
.listo-host-analytics-chart__legend span+span i { background:#cfd8de; }
.listo-host-analytics-chart-placeholder__grid { position:absolute; inset:24px 20px 34px; display:flex; flex-direction:column; justify-content:space-between; }
.listo-host-analytics-chart-placeholder__grid i { display:block; height:1px; background:#edf1f3; }
.listo-host-analytics-chart-placeholder__lines { position:absolute; inset:40px 28px 55px; opacity:.32; }
.listo-host-analytics-chart-placeholder__lines span { position:absolute; left:0; right:0; height:2px; border-radius:99px; background:#b9d9ef; transform:rotate(-3deg); top:44%; }
.listo-host-analytics-chart-placeholder__lines span+span { top:62%; background:#d9e1e5; transform:rotate(4deg); }
.listo-host-analytics-chart-placeholder__message { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; text-align:center; background:rgba(255,255,255,.78); }
.listo-host-analytics-chart-placeholder__message strong { font-size:15px; color:#172631; }
.listo-host-analytics-chart-placeholder__message span { max-width:360px; margin-top:5px; font-size:11px; line-height:1.5; color:#7a8790; }
.listo-host-analytics-funnel__steps { display:flex; flex-direction:column; gap:0; }
.listo-host-analytics-funnel__steps > div { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:55px; border-bottom:1px solid #edf0f2; }
.listo-host-analytics-funnel__steps > div:last-child { border-bottom:0; }
.listo-host-analytics-funnel__steps span { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#f1f7fb; color:#1677c8; font-size:10px; font-weight:800; }
.listo-host-analytics-funnel__steps strong { font-size:12px; color:#263640; }
.listo-host-analytics-funnel__steps b { font-size:10px; font-weight:700; color:#98a3aa; white-space:nowrap; }
.listo-host-analytics-listings { margin-top:14px; }
.listo-host-analytics-table { overflow:hidden; border:1px solid #edf0f2; border-radius:12px; }
.listo-host-analytics-table__head,.listo-host-analytics-table__row { display:grid; grid-template-columns:minmax(200px,1.6fr) repeat(6,minmax(105px,1fr)); align-items:center; gap:12px; padding:12px 14px; }
.listo-host-analytics-table__head { background:#f8fafb; border-bottom:1px solid #edf0f2; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#82909a; }
.listo-host-analytics-table__row { min-height:49px; border-bottom:1px solid #edf0f2; font-size:11px; color:#67757e; }
.listo-host-analytics-table__row:last-child { border-bottom:0; }
.listo-host-analytics-table__category { padding:8px 14px; background:#f8fafb; border-top:1px solid #edf0f2; border-bottom:1px solid #edf0f2; font-size:9px; font-weight:800; letter-spacing:.07em; color:#71808a; }
.listo-host-analytics-table__category:first-child { border-top:0; }
.listo-host-analytics-table__row strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#263640; font-size:12px; }
.listo-host-analytics-table__row span { color:#111827; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
.listo-host-analytics-table__empty { padding:24px 16px; text-align:center; color:#7b8790; font-size:11px; }
.listo-host-analytics-note { display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:10px 12px; border-radius:10px; background:#f6f9fb; }
.listo-host-analytics-note > span { display:grid; place-items:center; flex:0 0 18px; width:18px; height:18px; border-radius:50%; background:#e6f2fa; color:#1677c8; font-size:10px; font-weight:800; }
.listo-host-analytics-note p { margin:0; font-size:10.5px; line-height:1.5; color:#71808a; }

@media (max-width:900px) {
  .listo-host-analytics-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .listo-host-analytics-grid { grid-template-columns:1fr; }
  .listo-host-analytics-table__head,.listo-host-analytics-table__row { grid-template-columns:minmax(180px,1.45fr) repeat(6,minmax(100px,1fr)); }
}
@media (max-width:700px) {
  body[data-listo-mode="host"] .listo-main > .listo-dashboard-v2.listo-host-home { width:calc(100% - 24px) !important; max-width:none !important; }
  .listo-host-listing-analytics__head { display:block; }
  .listo-host-listing-analytics__period { width:max-content; min-width:0; margin-top:12px; text-align:left; }
  .listo-host-analytics-kpis { grid-template-columns:1fr 1fr; gap:8px; }
  .listo-host-analytics-kpi { padding:13px; }
  .listo-host-analytics-kpi b { font-size:16px; }
  .listo-host-analytics-panel { padding:14px; border-radius:14px; }
  .listo-host-analytics-chart { height:210px; }
  .listo-host-analytics-table { overflow-x:auto; }
  .listo-host-analytics-table__head,.listo-host-analytics-table__row { min-width:950px; }
}
@media (max-width:380px) {
  .listo-host-analytics-kpis { grid-template-columns:1fr; }
}
CSS

/* NEXT1147 — Host live traffic */
.listo-host-live-traffic{margin:18px 0;padding:20px;border:1px solid var(--dash-line,#e4e8eb);border-radius:18px;background:#fff;box-shadow:0 7px 25px rgba(24,39,75,.035)}
.listo-host-live-traffic__head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.listo-host-live-traffic__head span:first-child,.listo-listing-live-traffic__main>span{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#2196f3}
.listo-host-live-traffic__head h2{margin:3px 0 0;font-size:20px;line-height:1.2;color:#172631}
.listo-host-live-traffic__head p{margin:5px 0 0;font-size:12px;color:#70808b}
.listo-host-live-traffic__live{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 12px;border:1px solid #e7ecef;border-radius:999px;background:#f8fafb}
.listo-host-live-traffic__live i,.listo-listing-live-traffic i{width:8px;height:8px;border-radius:50%;background:#aeb8bd;display:inline-block}
.listo-host-live-traffic__live.is-live i,.listo-listing-live-traffic i.is-live{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.listo-host-live-traffic__live strong{font-size:18px;color:#172631}.listo-host-live-traffic__live span{font-size:11px;color:#70808b}
.listo-host-live-traffic__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.listo-host-live-traffic__grid>div{padding:14px;border:1px solid #edf0f2;border-radius:14px;background:#fbfcfd}.listo-host-live-traffic__grid span,.listo-host-live-traffic__grid small{display:block}.listo-host-live-traffic__grid span{font-size:11px;font-weight:700;color:#70808b}.listo-host-live-traffic__grid strong{display:block;margin-top:7px;font-size:22px;line-height:1.1;color:#172631}.listo-host-live-traffic__grid small{margin-top:5px;font-size:10px;color:#98a3aa}
.listo-listing-live-traffic{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:14px 0 20px;padding:15px 18px;border:1px solid #dfe8ed;border-radius:16px;background:#f8fbfd}.listo-listing-live-traffic--parking{margin:0 0 18px}.listo-listing-live-traffic__main strong{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:14px;color:#172631}.listo-listing-live-traffic__main strong b{font-size:18px}.listo-listing-live-traffic__stats{display:flex;gap:16px;flex-wrap:wrap}.listo-listing-live-traffic__stats span{font-size:11px;color:#70808b}.listo-listing-live-traffic__stats b{font-size:14px;color:#172631;margin-right:3px}
@media(max-width:767px){.listo-host-live-traffic{padding:16px;border-radius:15px}.listo-host-live-traffic__head{align-items:flex-start;display:block}.listo-host-live-traffic__live{width:max-content;margin-top:10px}.listo-host-live-traffic__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.listo-listing-live-traffic{display:block;padding:14px}.listo-listing-live-traffic__stats{margin-top:12px}.listo-listing-live-traffic--parking{margin:0 0 14px}}

/* NEXT1153 — Host live traffic per-listing table */
.listo-host-live-traffic__listings{margin-top:16px;border:1px solid #edf0f2;border-radius:14px;overflow:hidden;background:#fff}
.listo-host-live-traffic__listings-head,.listo-host-live-traffic__listing-row{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:18px;align-items:center}
.listo-host-live-traffic__listings-head{padding:10px 14px;background:#f8fafb;border-bottom:1px solid #edf0f2}
.listo-host-live-traffic__listings-head span{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#7b8992}
.listo-host-live-traffic__category{padding:9px 14px;background:#f8fafb;border-top:1px solid #edf0f2;border-bottom:1px solid #edf0f2;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#70808b}
.listo-host-live-traffic__listing-row{padding:12px 14px;border-bottom:1px solid #f0f2f4}
.listo-host-live-traffic__listing-row:last-child{border-bottom:0}
.listo-host-live-traffic__listing-name{min-width:0}
.listo-host-live-traffic__listing-name strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#172631}
.listo-host-live-traffic__listing-name small{display:block;margin-top:3px;font-size:10px;color:#8a969d}
.listo-host-live-traffic__listing-traffic{display:flex;align-items:center;justify-content:flex-end;gap:7px;white-space:nowrap}
.listo-host-live-traffic__listing-traffic i{width:7px;height:7px;border-radius:50%;background:#b4bdc2;display:inline-block}
.listo-host-live-traffic__listing-traffic.is-live i{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.listo-host-live-traffic__listing-traffic strong{font-size:16px;color:#172631}
.listo-host-live-traffic__listing-traffic span{font-size:11px;color:#70808b}
.listo-host-live-traffic__listings-empty{padding:16px 14px;font-size:11px;color:#8a969d}
@media(max-width:767px){.listo-host-live-traffic__listings-head,.listo-host-live-traffic__listing-row{grid-template-columns:minmax(0,1fr) 135px;gap:10px}.listo-host-live-traffic__listing-row{padding:11px 12px}.listo-host-live-traffic__listing-name strong{font-size:12px}.listo-host-live-traffic__listing-traffic strong{font-size:15px}.listo-host-live-traffic__listing-traffic span{font-size:10px}}

/* NEXT1157 — Listing Analytics period selector */
.listo-host-listing-analytics__period select { margin-top:3px; min-width:150px; border:0; background:transparent; color:var(--dash-ink,#172631); font:700 12px/1.3 inherit; padding:0 18px 0 0; outline:none; cursor:pointer; }
.listo-host-listing-analytics__period select:focus { outline:2px solid rgba(33,150,243,.18); outline-offset:2px; border-radius:4px; }
@media (max-width: 640px) {
  .listo-host-listing-analytics__period select { min-width:145px; }
}


/* ==========================================================================
   NEXT1158 — Booking Details UI 2.0
   Presentation layer only. Booking/payment lifecycle and existing handlers
   remain unchanged.
   ========================================================================== */
.listo-booking-detail-page {
  max-width: 1280px;
}
.listo-booking-detail__back {
  margin: 0 0 10px;
}
.listo-booking-detail__back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted,#70818D);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  text-decoration: none;
}
.listo-booking-detail__back a:hover {
  color: var(--listo-blue,#2196F3);
}
.listo-booking-detail-page .listo-booking-detail__header {
  margin: 0 0 20px !important;
  padding: 0 !important;
}
.listo-booking-detail-page .listo-booking-detail__header h1 {
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 29px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.listo-booking-detail-page .listo-booking-detail__header .listo-host-page-description {
  margin: 6px 0 0 !important;
  font-size: 14px !important;
  line-height: 20px !important;
}
.listo-booking-detail__overview {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:28px;
  padding:22px 0 24px;
  border-top:1px solid var(--border,#e4e7ec);
  border-bottom:1px solid var(--border,#e4e7ec);
}
.listo-booking-detail__overview-main { min-width:0; }
.listo-booking-detail__eyebrow {
  margin-bottom:5px;
  color:var(--listo-blue,#2196F3);
  font-size:10px;
  line-height:14px;
  font-weight:800;
  letter-spacing:.08em;
}
.listo-booking-detail__eyebrow--parking { color:#FFB300; }
.listo-booking-detail__overview h2 {
  margin:0;
  font-size:21px;
  line-height:28px;
  font-weight:600;
  color:var(--ink,#172631);
}
.listo-booking-detail__overview p {
  margin:4px 0 0;
  color:var(--ink-muted,#70818D);
  font-size:13px;
  line-height:19px;
}
.listo-booking-detail__status-stack {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  flex:0 0 auto;
}
.listo-booking-detail__status {
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 11px;
  border:1px solid var(--border,#e4e7ec);
  border-radius:999px;
  background:#fff;
  color:var(--ink,#172631);
  font-size:12px;
  line-height:16px;
  font-weight:700;
  white-space:nowrap;
}
.listo-booking-detail__status--confirmed {
  border-color:#b9e6ca;
  background:#eefaf3;
  color:#167648;
}
.listo-booking-detail__status--finalized {
  border-color:#b9e6ca;
  background:#eefaf3;
  color:#167648;
}
.listo-booking-detail__status--approved {
  border-color:#d6e8f7;
  background:#f2f8fd;
  color:#1769aa;
}
.listo-booking-detail__status--pending-approval {
  border-color:#f2d28b;
  background:#fff8e7;
  color:#946b00;
}
.listo-booking-detail__status--rejected {
  border-color:#f1c1bd;
  background:#fff1f0;
  color:#b42318;
}
.listo-booking-detail__status--expired {
  border-color:#f1c1bd;
  background:#fff7f6;
  color:#8f2f28;
}
.listo-booking-detail__status--pending {
  border-color:#f2d28b;
  background:#fff8e7;
  color:#946b00;
}
.listo-booking-detail__status--declined {
  border-color:#f1c1bd;
  background:#fff1f0;
  color:#b42318;
}
.listo-booking-detail__status--upcoming,
.listo-booking-detail__status--active {
  border-color:#f2d28b;
  background:#fff8e7;
  color:#946b00;
}
.listo-booking-detail__status--completed {
  background:#f3f5f6;
  color:#52606b;
}
.listo-booking-detail__status--cancelled {
  border-color:#f1c1bd;
  background:#fff1f0;
  color:#b42318;
}
.listo-booking-detail__status-note {
  color:var(--ink-muted,#70818D);
  font-size:12px;
  line-height:17px;
  text-align:right;
}
.listo-booking-detail__status-note--danger { color:#b42318; font-weight:600; }

.listo-booking-detail__layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,340px);
  gap:28px;
  margin-top:24px;
}
.listo-booking-detail__main,
.listo-booking-detail__side { min-width:0; }
.listo-booking-detail__section {
  margin:0 0 24px;
  padding:0 0 24px;
  border-bottom:1px solid var(--border,#e4e7ec);
}
.listo-booking-detail__side .listo-booking-detail__section {
  border:1px solid var(--border,#e4e7ec);
  border-radius:12px;
  padding:18px;
}
.listo-booking-detail__section-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.listo-booking-detail__section-heading h2 {
  margin:0;
  font-size:17px;
  line-height:23px;
  font-weight:600;
  color:var(--ink,#172631);
}
.listo-booking-detail__section-heading p {
  margin:0;
  color:var(--ink-muted,#70818D);
  font-size:12px;
  line-height:17px;
  text-align:right;
}
.listo-booking-detail__data-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 28px;
}
.listo-booking-detail__data-grid > div {
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:11px 0;
  border-top:1px solid #eef1f3;
}
.listo-booking-detail__data-grid > div:nth-child(-n+2) { border-top:0; padding-top:0; }
.listo-booking-detail__data-grid span,
.listo-booking-detail__money-list span,
.listo-booking-detail__money-group span {
  color:var(--ink-muted,#70818D);
  font-size:13px;
  line-height:19px;
}
.listo-booking-detail__data-grid strong {
  color:var(--ink,#172631);
  font-size:13px;
  line-height:19px;
  font-weight:600;
  text-align:right;
}
.listo-booking-detail__payment-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.listo-booking-detail__payment-block {
  padding:16px;
  border:1px solid var(--border,#e4e7ec);
  border-radius:10px;
  background:#fff;
}
.listo-booking-detail__payment-label {
  font-size:14px;
  line-height:20px;
  font-weight:600;
  color:var(--ink,#172631);
}
.listo-booking-detail__payment-description {
  margin-top:2px;
  color:var(--ink-muted,#70818D);
  font-size:12px;
  line-height:17px;
}
.listo-booking-detail__payment-block > strong {
  display:block;
  margin-top:13px;
  color:var(--ink,#172631);
  font-size:18px;
  line-height:24px;
  font-weight:600;
}
.listo-booking-detail__state {
  display:inline-flex;
  margin-top:10px;
  padding:5px 8px;
  border-radius:7px;
  background:#f3f5f6;
  color:#52606b;
  font-size:12px;
  line-height:16px;
  font-weight:700;
}
.listo-booking-detail__state--confirmed { background:#eefaf3; color:#167648; }
.listo-booking-detail__state--submitted { background:#fff8e7; color:#946b00; }
.listo-booking-detail__state--pending { background:#fff8e7; color:#946b00; }
.listo-booking-detail__payment-block small {
  display:block;
  margin-top:7px;
  color:var(--ink-muted,#70818D);
  font-size:12px;
  line-height:17px;
}
.listo-booking-detail__money-groups {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.listo-booking-detail__money-group h3 {
  margin:0 0 8px;
  font-size:13px;
  line-height:18px;
  font-weight:700;
  color:var(--ink,#172631);
}
.listo-booking-detail__money-group > div,
.listo-booking-detail__money-list > div {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:9px 0;
  border-top:1px solid #eef1f3;
}
.listo-booking-detail__money-group > div:first-of-type { border-top:0; }
.listo-booking-detail__money-group strong,
.listo-booking-detail__money-list strong {
  color:var(--ink,#172631);
  font-size:13px;
  line-height:19px;
  font-weight:600;
  text-align:right;
}
.listo-booking-detail__money-group .is-total {
  margin-top:3px;
  padding-top:11px;
  border-top:1px solid var(--border,#e4e7ec);
}
.listo-booking-detail__money-group .is-total span,
.listo-booking-detail__money-group .is-total strong { font-weight:700; }
.listo-booking-detail__note {
  margin:13px 0 0;
  color:var(--ink-muted,#70818D);
  font-size:12px;
  line-height:18px;
}
.listo-booking-detail__note--warning { color:#946b00; }
.listo-booking-detail__note--danger { color:#b42318; }
.listo-booking-detail__next-action {
  padding:13px 14px;
  border-left:3px solid #f0b429;
  background:#fffaf0;
  border-radius:7px;
}
.listo-booking-detail__next-action--success {
  border-left-color:#2aa568;
  background:#f1fbf5;
}
.listo-booking-detail__next-action strong {
  display:block;
  font-size:13px;
  line-height:19px;
  font-weight:700;
}
.listo-booking-detail__next-action span {
  display:block;
  margin-top:4px;
  color:var(--ink-muted,#70818D);
  font-size:12px;
  line-height:18px;
}
.listo-booking-detail__actions {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:16px;
}
.listo-booking-detail__actions .listo-btn { width:100%; box-sizing:border-box; justify-content:center; }
.listo-booking-detail__danger-action { color:var(--error,#b42318) !important; }
.listo-booking-detail__inline-form {
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border,#e4e7ec);
}
.listo-booking-detail__inline-form .listo-btn { margin-top:8px; }

@media (max-width: 900px) {
  .listo-booking-detail-page { max-width:none; }
  .listo-booking-detail__layout { grid-template-columns:1fr; gap:0; }
  .listo-booking-detail__side { order:2; }
}
@media (max-width: 640px) {
  .listo-booking-detail-page .listo-booking-detail__header h1 {
    font-size:20px !important;
    line-height:25px !important;
  }
  .listo-booking-detail-page .listo-booking-detail__header .listo-host-page-description {
    margin-top:5px !important;
  }
  .listo-booking-detail__overview {
    flex-direction:column;
    gap:12px;
    padding:18px 0 20px;
  }
  .listo-booking-detail__overview h2 { font-size:18px; line-height:24px; }
  .listo-booking-detail__status-stack { align-items:flex-start; }
  .listo-booking-detail__status-note { text-align:left; }
  .listo-booking-detail__data-grid,
  .listo-booking-detail__payment-grid,
  .listo-booking-detail__money-groups { grid-template-columns:1fr; }
  .listo-booking-detail__data-grid > div:nth-child(2) { border-top:1px solid #eef1f3; padding-top:11px; }
  .listo-booking-detail__data-grid > div {
    justify-content:space-between;
    gap:14px;
  }
  .listo-booking-detail__data-grid strong { max-width:58%; }
  .listo-booking-detail__section { margin-bottom:20px; padding-bottom:20px; }
  .listo-booking-detail__section-heading { align-items:flex-start; flex-direction:column; gap:4px; }
  .listo-booking-detail__section-heading p { text-align:left; }
  .listo-booking-detail__side .listo-booking-detail__section { padding:16px; }
}

/* ============================================================================
 * NEXT1165 — Host Staycation Reservation Request layout fix
 * --------------------------------------------------------------------------
 * Fixes desktop image/text collision in Reservation Requests by giving the
 * listing photo its own fixed grid track and separating request information
 * from the response controls. Presentation-only; booking state/actions remain
 * unchanged.
 * ============================================================================ */
@media (min-width: 1001px) {
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card {
    display: grid !important;
    grid-template-columns: 156px minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: center !important;
    min-height: 136px !important;
    box-sizing: border-box !important;
    padding: 16px 20px !important;
    overflow: visible !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__photo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 150px !important;
    min-width: 150px !important;
    height: 104px !important;
    margin: 0 !important;
    align-self: center !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 0 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__photo img {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
    transform: none !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-bookings-card__body {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr) !important;
    grid-template-rows: auto auto auto auto !important;
    column-gap: 28px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-booking-card__kicker,
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__title,
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-bookings-card__body > .listo-caption {
    grid-column: 1 !important;
    min-width: 0 !important;
    position: static !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-booking-card__kicker {
    grid-row: 1 !important;
    margin: 0 0 3px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__title {
    grid-row: 2 !important;
    margin: 0 0 4px !important;
    font-size: 17px !important;
    line-height: 22px !important;
    font-weight: 750 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-bookings-card__body > .listo-caption {
    grid-row: 3 !important;
    margin: 0 0 3px !important;
    font-size: 12px !important;
    line-height: 18px !important;
    overflow-wrap: break-word !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-booking-request-timer {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-booking-request-actions {
    grid-column: 2 !important;
    grid-row: 4 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-booking-request-actions .listo-btn {
    width: auto !important;
    min-width: 112px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }
}

/* ============================================================================
 * NEXT1166 — Host Reservation Request final desktop polish
 * --------------------------------------------------------------------------
 * Keeps the request card visually separated into listing, request details,
 * and Host decision areas. Presentation-only; existing state/actions remain.
 * ============================================================================ */
@media (min-width: 1001px) {
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card {
    grid-template-columns: 156px minmax(0, 1fr) !important;
    gap: 24px !important;
    min-height: 132px !important;
    padding: 14px 18px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__photo {
    width: 150px !important;
    min-width: 150px !important;
    height: 104px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    contain: layout paint !important;
    isolation: isolate !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-bookings-card__body {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px) !important;
    column-gap: 24px !important;
    align-content: center !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-booking-card__kicker {
    font-size: 11px !important;
    line-height: 16px !important;
    letter-spacing: .04em !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-trip-card__title {
    font-size: 16px !important;
    line-height: 21px !important;
    font-weight: 700 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-bookings-card__body > .listo-caption {
    font-size: 13px !important;
    line-height: 19px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-booking-request-timer {
    align-self: center !important;
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-booking-request-actions {
    justify-content: stretch !important;
    gap: 10px !important;
    margin-top: 8px !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-booking-request-actions .listo-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 42px !important;
  }
}


/* ============================================================================
 * NEXT1167 — Host Reservation Request text-row collision fix
 * --------------------------------------------------------------------------
 * The request card has two caption rows (stay dates + reference/guest). The
 * previous selector placed both captions on the same grid row, causing their
 * text to overlap. Give each row an explicit grid position. Presentation-only.
 * ============================================================================ */
@media (min-width: 1001px) {
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-booking-request-date {
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-booking-request-meta {
    grid-column: 1 !important;
    grid-row: 4 !important;
    min-width: 0 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-booking-request-timer {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-booking-request-actions {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-field-error {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    min-width: 0 !important;
  }
}

/* ============================================================================
 * NEXT1168 — Host Reservation Request caption specificity fix
 * --------------------------------------------------------------------------
 * NEXT1167 positioned the date and reference rows with selectors that were
 * LESS specific than the NEXT1165/1166 rule
 * ".listo-host-bookings-card__body > .listo-caption { grid-row: 3 !important }".
 * Both !important, so the more specific rule won and both rows still landed on
 * grid row 3 (overlapping text). These selectors match that specificity and
 * come later in the cascade, so each caption keeps its own row. Presentation-only.
 * ============================================================================ */
@media (min-width: 1001px) {
  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-bookings-card__body > .listo-caption.listo-host-booking-request-date {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  body.listo-host-staycation-bookings-app .listo-host-bookings-request-grid .listo-host-bookings-card__body > .listo-caption.listo-host-booking-request-meta {
    grid-column: 1 !important;
    grid-row: 4 !important;
    margin: 0 !important;
  }
}

/* NEXT1169 - the Needs Action / All caught up banners use display:flex, which
 * overrides the [hidden] attribute, so JS could not hide them after an
 * Approve/Reject. Make [hidden] win. */
.listo-action-hero[hidden],
.listo-host-bookings-attention-summary[hidden],
.listo-host-bookings-all-clear[hidden] { display: none !important; }

/* NEXT1175 — compact but information-rich conversion funnel */
.listo-host-analytics-funnel__steps > div { position:relative; grid-template-columns:28px minmax(0,1fr) auto; grid-template-areas:"num label value" "num service service"; align-items:center; row-gap:2px; min-height:61px; padding:5px 0; }
.listo-host-analytics-funnel__steps > div > span { grid-area:num; }
.listo-host-analytics-funnel__steps > div > strong { grid-area:label; align-self:end; }
.listo-host-analytics-funnel__steps > div > b { grid-area:value; align-self:end; color:#111827; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.listo-host-analytics-funnel__steps > div > small { grid-area:service; color:#8A969E; font-size:9px; line-height:1.25; white-space:nowrap; }
.listo-host-analytics-funnel__metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:8px; border-top:1px solid #edf0f2; }
.listo-host-analytics-funnel__metrics > div { padding:10px 8px 2px 0; min-width:0; }
.listo-host-analytics-funnel__metrics > div:nth-child(odd) { border-right:1px solid #edf0f2; padding-right:12px; }
.listo-host-analytics-funnel__metrics > div:nth-child(even) { padding-left:12px; }
.listo-host-analytics-funnel__metrics > div:nth-child(n+3) { padding-top:9px; }
.listo-host-analytics-funnel__metrics span { display:block; color:#74818A; font-size:9.5px; line-height:1.3; }
.listo-host-analytics-funnel__metrics strong { display:block; margin-top:3px; color:#111827; font-size:13px; line-height:1.15; font-variant-numeric:tabular-nums; }
.listo-host-analytics-funnel__note { margin-top:10px; padding-top:9px; border-top:1px solid #edf0f2; color:#7A8790; font-size:9.5px; line-height:1.45; }
@media(max-width:800px){
  .listo-host-analytics-funnel__steps > div { min-height:58px; }
  .listo-host-analytics-funnel__metrics > div { padding-right:8px; }
  .listo-host-analytics-funnel__metrics > div:nth-child(even) { padding-left:8px; }
}

/* NEXT1176 — simplified Host conversion funnel: four stages + one finalized conversion rate. */
.listo-host-analytics-funnel__steps > div { grid-template-columns:28px minmax(0,1fr) auto; grid-template-areas:"num label value"; min-height:55px; padding:0; }
.listo-host-analytics-funnel__steps > div > span { grid-area:num; }
.listo-host-analytics-funnel__steps > div > strong { grid-area:label; align-self:center; }
.listo-host-analytics-funnel__steps > div > b { grid-area:value; align-self:center; color:#111827; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.listo-host-analytics-funnel__steps > div > small { display:none; }
.listo-host-analytics-funnel__conversion { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-top:8px; padding-top:13px; border-top:1px solid #edf0f2; }
.listo-host-analytics-funnel__conversion span { color:#74818A; font-size:10px; line-height:1.3; }
.listo-host-analytics-funnel__conversion strong { color:#111827; font-size:18px; line-height:1; font-weight:700; font-variant-numeric:tabular-nums; }
.listo-host-analytics-funnel__conversion--secondary strong { font-size:15px; color:#53636d; }
@media (max-width:767px) { .listo-host-analytics-funnel__conversion strong { font-size:17px; } }

/* NEXT1178 — restore the required Staycation / Parking distinction in the
 * Host conversion funnel. NEXT1176's simplified rule hid the service captions;
 * keep the four-stage funnel compact while making the service split visible. */
.listo-host-analytics-funnel__steps > div {
  grid-template-columns:28px minmax(0,1fr) auto;
  grid-template-areas:"num label value" "num service service";
  min-height:61px;
  padding:5px 0;
  row-gap:2px;
}
.listo-host-analytics-funnel__steps > div > span { grid-area:num; }
.listo-host-analytics-funnel__steps > div > strong { grid-area:label; align-self:end; }
.listo-host-analytics-funnel__steps > div > b { grid-area:value; align-self:end; color:#111827; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.listo-host-analytics-funnel__steps > div > small {
  grid-area:service;
  display:block;
  color:#8A969E;
  font-size:9px;
  line-height:1.25;
  white-space:nowrap;
}
@media (max-width:767px) {
  .listo-host-analytics-funnel__steps > div { min-height:59px; }
  .listo-host-analytics-funnel__steps > div > small { font-size:9px; }
}

/* NEXT1180 — Mobile Discovery Trend rolling 15-day viewport. */
.listo-host-analytics-chart__viewport { height:100%; overflow:hidden; }
@media (max-width:700px) {
  .listo-host-analytics-chart__viewport { margin:0; overflow:hidden; }
  .listo-host-analytics-chart__plot { width:100%; flex:none; transition:transform .45s ease; }
  .listo-host-analytics-chart__day { flex:1 1 0; min-width:0; }
  .listo-host-analytics-chart__day > span { font-size:9px; min-width:16px; text-align:center; }
}

/* NEXT1184 — the trend contains both pre-rendered metric views; the inactive
 * view must remain hidden even though .listo-host-simple-chart sets display:flex.
 */
.listo-host-simple-chart[hidden] { display: none !important; }

/* NEXT1186 — Action Required alert state.
 * When one or more operational items need the Host's attention, the entire
 * dashboard section uses a restrained red alert treatment. The existing
 * neutral state returns automatically when the live Action Required payload
 * becomes empty. */
.listo-home-attention:not(.listo-home-attention--clear) {
  background: #FFF5F5;
  border-color: #F3B4B4;
  box-shadow: inset 4px 0 0 #DC2626;
}
.listo-home-attention:not(.listo-home-attention--clear) .listo-home-section-head {
  border-color: #F3D1D1;
}
.listo-home-attention:not(.listo-home-attention--clear) .listo-home-section-head > div > span,
.listo-home-attention:not(.listo-home-attention--clear) .listo-home-section-head > div > h2,
.listo-home-attention:not(.listo-home-attention--clear) .listo-home-section-head > strong {
  color: #B91C1C;
}
.listo-home-attention:not(.listo-home-attention--clear) .listo-home-attention__list {
  border-top-color: #F3D1D1;
}
.listo-home-attention:not(.listo-home-attention--clear) .listo-home-attention__list > a {
  border-bottom-color: #F3D1D1;
}
.listo-home-attention:not(.listo-home-attention--clear) .listo-home-attention__list > a:hover {
  background: #FEECEC;
}
.listo-home-attention:not(.listo-home-attention--clear) .listo-home-attention__list b {
  color: #B91C1C;
}
.listo-home-attention:not(.listo-home-attention--clear) .listo-home-attention__dot {
  background: #DC2626;
  box-shadow: 0 0 0 4px #FDE2E2;
}

@media (max-width: 800px) {
  .listo-home-attention:not(.listo-home-attention--clear) {
    box-shadow: inset 3px 0 0 #DC2626;
  }
}

/* ========================================================================
   NEXT1201 — Host Home desktop canvas repair
   ------------------------------------------------------------------------
   Fixes a regression where the Host Home canvas can collapse to a narrow
   content column on desktop. Home must use the full Host workspace canvas
   beside the persistent sidebar, while preserving the canonical sidebar
   width, page padding, and the existing Home component hierarchy.
   Presentation-only; no data, routing, booking, payment, or analytics logic
   is changed.
   ======================================================================== */
@media (min-width: 901px) {
  body[data-listo-mode="host"] .listo-main {
    width: calc(100% - 236px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 236px !important;
    margin-right: 0 !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
  }

  body[data-listo-mode="host"] .listo-main > .listo-host-home--analytics {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  body[data-listo-mode="host"] .listo-main {
    width: calc(100% - 220px) !important;
    margin-left: 220px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}


/* ==========================================================================
   NEXT1205 — Guest My Wallet UI/UX 2.0
   Presentation layer + legacy cashback safety correction.
   ========================================================================== */

.listo-wallet-page {
  max-width: 1200px;
  padding-bottom: 48px;
}

.listo-wallet-page .listo-page-title-row {
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.listo-wallet-page .listo-wallet-page__title-copy {
  min-width: 0;
}

.listo-wallet-page .listo-wallet-page__title-copy h1 {
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 600;
  letter-spacing: normal;
}

.listo-wallet-page .listo-wallet-page__title-copy p {
  margin: 5px 0 0;
  color: #607080;
  font-size: 14px;
  line-height: 1.5;
}

.listo-wallet-page .listo-wallet-balance-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 28px 22px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  text-align: left;
  box-shadow: 0 3px 12px rgba(15, 23, 42, .04);
}

.listo-wallet-page .listo-wallet-balance-card__label {
  margin: 0 0 7px;
  color: #526170;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.listo-wallet-page .listo-wallet-balance-card__amount {
  margin: 0;
  color: #17202A;
  font-size: 34px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.listo-wallet-page .listo-wallet-balance-card__support {
  margin: 7px 0 0;
  color: #607080;
  font-size: 13px;
  line-height: 20px;
}

.listo-wallet-page .listo-wallet-how-link {
  margin: 13px 0 0;
  justify-content: flex-start;
  padding-left: 2px;
  font-size: 14px;
  font-weight: 600;
}

.listo-wallet-use-block {
  max-width: 900px;
  margin: 30px auto 0;
  padding: 17px 0;
  border-top: 1px solid #E9EEF3;
  border-bottom: 1px solid #E9EEF3;
}

.listo-wallet-use-block h2 {
  margin: 0 0 5px;
  color: #263238;
  font-size: 17px;
  line-height: 23px;
  font-weight: 600;
}

.listo-wallet-use-block p {
  margin: 0;
  color: #607080;
  font-size: 14px;
  line-height: 21px;
}

.listo-wallet-activity {
  max-width: 900px;
  margin: 30px auto 0;
}

.listo-wallet-section-heading {
  margin-bottom: 10px;
}

.listo-wallet-section-heading h2 {
  margin: 0;
  color: #263238;
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
}

.listo-wallet-page .listo-wallet-history {
  max-width: none;
  border-top: 1px solid #E9EEF3;
}

.listo-wallet-page .listo-wallet-history__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
  margin: 0;
  padding: 16px 2px;
  border: 0;
  border-bottom: 1px solid #E9EEF3;
  border-radius: 0;
  background: transparent;
}

.listo-wallet-page .listo-wallet-history__row:hover {
  border-color: #E9EEF3;
  background: #F8FCFF;
}

.listo-wallet-page .listo-wallet-history__body {
  min-width: 0;
}

.listo-wallet-page .listo-wallet-history__type {
  margin: 0;
  color: #263238;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.listo-wallet-page .listo-wallet-history__context,
.listo-wallet-page .listo-wallet-history__date {
  margin: 3px 0 0;
  color: #607080;
  font-size: 13px;
  line-height: 18px;
}

.listo-wallet-page .listo-wallet-history__date {
  margin-top: 2px;
  color: #7A8794;
  font-size: 12px;
}

.listo-wallet-page .listo-wallet-history__amount {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
}

.listo-wallet-page .listo-wallet-history__amount--credit {
  color: #16A34A;
}

.listo-wallet-page .listo-wallet-history__amount--debit {
  color: #DC2626;
}

.listo-wallet-empty-state {
  max-width: none;
  margin: 0;
  padding: 30px 20px;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  text-align: left;
}

.listo-wallet-empty-state h3 {
  margin: 0 0 5px;
  color: #263238;
  font-size: 16px;
  line-height: 22px;
}

.listo-wallet-empty-state p {
  max-width: 620px;
  margin: 0;
  color: #607080;
  font-size: 14px;
  line-height: 21px;
}

.listo-wallet-referral-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 13px;
  color: #1976D2;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
}

.listo-wallet-referral-link:hover {
  text-decoration: underline;
}

.listo-wallet-how-steps {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: wallet-step;
}

.listo-wallet-how-steps li {
  position: relative;
  display: grid;
  gap: 3px;
  padding-left: 36px;
  color: #607080;
  font-size: 14px;
  line-height: 21px;
  counter-increment: wallet-step;
}

.listo-wallet-how-steps li::before {
  content: counter(wallet-step);
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #EAF5FF;
  color: #1976D2;
  font-size: 12px;
  line-height: 24px;
  font-weight: 700;
}

.listo-wallet-how-steps strong {
  color: #263238;
  font-size: 14px;
  line-height: 20px;
}

.listo-wallet-how-steps span {
  display: block;
}

@media (max-width: 700px) {
  .listo-wallet-page {
    padding-top: 8px;
    padding-bottom: 88px;
  }

  .listo-wallet-page .listo-page-title-row {
    align-items: flex-start;
    margin-bottom: 18px;
  }

  .listo-wallet-page .listo-page-title-row .listo-page-title__icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
  }

  .listo-wallet-page .listo-page-title-row .listo-page-title__icon svg {
    width: 18px;
    height: 18px;
  }

  .listo-wallet-page .listo-wallet-page__title-copy h1 {
    font-size: 20px;
    line-height: 25px;
  }

  .listo-wallet-page .listo-wallet-page__title-copy p {
    margin-top: 3px;
    font-size: 13px;
    line-height: 19px;
  }

  .listo-wallet-page .listo-wallet-balance-card {
    max-width: none;
    padding: 19px 18px 18px;
    border-radius: 14px;
    box-shadow: none;
  }

  .listo-wallet-page .listo-wallet-balance-card__label {
    font-size: 13px;
    line-height: 18px;
  }

  .listo-wallet-page .listo-wallet-balance-card__amount {
    font-size: 30px;
    line-height: 36px;
  }

  .listo-wallet-page .listo-wallet-balance-card__support {
    margin-top: 5px;
    font-size: 12px;
    line-height: 18px;
  }

  .listo-wallet-page .listo-wallet-how-link {
    margin-top: 10px;
    font-size: 13px;
  }

  .listo-wallet-use-block {
    margin-top: 24px;
    padding: 15px 0;
  }

  .listo-wallet-use-block h2 {
    font-size: 16px;
    line-height: 22px;
  }

  .listo-wallet-use-block p {
    font-size: 13px;
    line-height: 20px;
  }

  .listo-wallet-activity {
    margin-top: 24px;
  }

  .listo-wallet-section-heading h2 {
    font-size: 18px;
    line-height: 24px;
  }

  .listo-wallet-page .listo-wallet-history__row {
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
  }

  .listo-wallet-page .listo-wallet-history__type {
    font-size: 13px;
    line-height: 19px;
  }

  .listo-wallet-page .listo-wallet-history__context {
    font-size: 12px;
    line-height: 18px;
  }

  .listo-wallet-page .listo-wallet-history__date {
    font-size: 11px;
    line-height: 17px;
  }

  .listo-wallet-page .listo-wallet-history__amount {
    font-size: 14px;
    line-height: 20px;
  }

  .listo-wallet-empty-state {
    padding: 24px 16px;
  }

  .listo-wallet-how-modal {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    border-radius: 18px 18px 0 0;
  }

  .listo-wallet-how-modal__panel {
    border-radius: 18px 18px 0 0;
    max-height: min(82dvh, 680px);
    overflow-y: auto;
  }

  .listo-wallet-how-modal__header {
    padding: 18px 18px 15px;
  }

  .listo-wallet-how-modal__section {
    padding: 18px;
  }
}

@media (max-width: 380px) {
  .listo-wallet-page .listo-wallet-balance-card__amount {
    font-size: 28px;
  }

  .listo-wallet-page .listo-wallet-history__row {
    gap: 8px;
  }

  .listo-wallet-page .listo-wallet-history__amount {
    font-size: 13px;
  }
}

/* ========================================================================
   NEXT1206 — Guest My Wallet: Credit & Activity
   Focused utility page; intentionally not a fintech dashboard.
   ======================================================================== */
.listo-wallet-page--credit-activity {
  max-width: 960px;
}
.listo-wallet-page--credit-activity .listo-page-title-row {
  margin-bottom: 22px;
}
.listo-wallet-page--credit-activity .listo-wallet-page__title-copy h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}
.listo-wallet-page--credit-activity .listo-wallet-page__title-copy p {
  margin: 7px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}
.listo-wallet-page--credit-activity .listo-wallet-balance-card {
  max-width: none;
  margin: 0 0 16px;
  padding: 26px 28px 24px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: none;
}
.listo-wallet-page--credit-activity .listo-wallet-balance-card__label {
  margin-bottom: 8px;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.listo-wallet-page--credit-activity .listo-wallet-balance-card__amount {
  margin: 0;
  color: var(--ink);
  font-size: 38px;
  line-height: 1.1;
  font-weight: 700;
}
.listo-wallet-page--credit-activity .listo-wallet-balance-card__support {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.5;
}
.listo-wallet-page--credit-activity .listo-wallet-use-block,
.listo-wallet-page--credit-activity .listo-wallet-source-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 28px;
  padding: 18px 20px;
  background: #F8FBFE;
  border: 1px solid #DDECF9;
  border-radius: 12px;
}
.listo-wallet-page--credit-activity .listo-wallet-use-block__copy,
.listo-wallet-page--credit-activity .listo-wallet-source-note > div {
  min-width: 0;
}
.listo-wallet-page--credit-activity .listo-wallet-use-block h2,
.listo-wallet-page--credit-activity .listo-wallet-source-note h2 {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}
.listo-wallet-page--credit-activity .listo-wallet-use-block p,
.listo-wallet-page--credit-activity .listo-wallet-source-note p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.55;
}
.listo-wallet-page--credit-activity .listo-wallet-activity {
  margin-top: 0;
}
.listo-wallet-page--credit-activity .listo-wallet-section-heading {
  margin: 0 0 10px;
}
.listo-wallet-page--credit-activity .listo-wallet-section-heading h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
}
.listo-wallet-page--credit-activity .listo-wallet-section-heading p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}
.listo-wallet-page--credit-activity .listo-wallet-history {
  border-top: 1px solid var(--border);
}
.listo-wallet-page--credit-activity .listo-wallet-history__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 17px 4px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.listo-wallet-page--credit-activity .listo-wallet-history__body {
  min-width: 0;
}
.listo-wallet-page--credit-activity .listo-wallet-history__type {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.listo-wallet-page--credit-activity .listo-wallet-history__context {
  margin: 3px 0 0;
  color: var(--ink-muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.listo-wallet-page--credit-activity .listo-wallet-history__date {
  margin: 3px 0 0;
  color: var(--ink-muted);
  font-size: 11.5px;
  line-height: 1.4;
}
.listo-wallet-page--credit-activity .listo-wallet-history__amount {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  white-space: nowrap;
}
.listo-wallet-page--credit-activity .listo-wallet-history__amount--credit { color: #16A34A; }
.listo-wallet-page--credit-activity .listo-wallet-history__amount--debit { color: #DC2626; }
.listo-wallet-page--credit-activity .listo-wallet-empty-state {
  padding: 34px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: left;
}
.listo-wallet-page--credit-activity .listo-wallet-empty-state h3 {
  margin: 0 0 5px;
  font-size: 15px;
}
.listo-wallet-page--credit-activity .listo-wallet-empty-state p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.5;
}
.listo-wallet-page--credit-activity .listo-wallet-source-note {
  margin-top: 28px;
  margin-bottom: 0;
  align-items: flex-start;
}
.listo-wallet-page--credit-activity .listo-wallet-referral-link {
  flex: 0 0 auto;
  color: var(--listo-blue, #2196F3);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.listo-wallet-page--credit-activity .listo-wallet-referral-link:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .listo-wallet-page--credit-activity .listo-page-title-row { margin-bottom: 18px; }
  .listo-wallet-page--credit-activity .listo-wallet-page__title-copy h1 { font-size: 20px; }
  .listo-wallet-page--credit-activity .listo-wallet-page__title-copy p { font-size: 13px; margin-top: 5px; }
  .listo-wallet-page--credit-activity .listo-wallet-balance-card { padding: 20px 18px; border-radius: 12px; }
  .listo-wallet-page--credit-activity .listo-wallet-balance-card__amount { font-size: 32px; }
  .listo-wallet-page--credit-activity .listo-wallet-use-block,
  .listo-wallet-page--credit-activity .listo-wallet-source-note {
    display: block;
    padding: 16px;
    margin-bottom: 24px;
  }
  .listo-wallet-page--credit-activity .listo-wallet-referral-link {
    display: inline-flex;
    margin-top: 11px;
  }
  .listo-wallet-page--credit-activity .listo-wallet-section-heading h2 { font-size: 17px; }
  .listo-wallet-page--credit-activity .listo-wallet-history__row {
    gap: 14px;
    padding: 15px 2px;
  }
  .listo-wallet-page--credit-activity .listo-wallet-history__type { font-size: 13px; }
  .listo-wallet-page--credit-activity .listo-wallet-history__context { font-size: 12px; }
  .listo-wallet-page--credit-activity .listo-wallet-history__date { font-size: 11px; }
  .listo-wallet-page--credit-activity .listo-wallet-history__amount { font-size: 13px; }
}

/* ========================================================================
   NEXT1207 — Guest Account Navigation 2.0
   Same navigation architecture as Host Mode: persistent desktop sidebar and
   floating mobile dock. Guest destinations remain Guest-specific.
   ======================================================================== */
.listo-guest-sidebar{display:none}
.listo-guest-floating-shell{display:none}

/* Listo mobile app embed: full mobile site inside the native WebView (site guest dock stays visible).
   Hide only global footer chrome that reads as “website”, not app. */
body.listo-app-shell.listo-logged-in .listo-footer {
  display: none !important;
}

/* App WebView: hide in-main copies; if two fixed navs exist, keep the last (portaled) one visible via JS. */
@media (max-width: 900px) {
  body.listo-app-shell .listo-main .listo-mobile-bottom-nav,
  body.listo-app-shell .listo-main .listo-mobile-bottom-nav-spacer {
    display: none !important;
  }

  body.listo-app-shell nav.listo-mobile-bottom-nav ~ nav.listo-mobile-bottom-nav {
    display: none !important;
  }
}

/* Native app WebView: safe-area env() is often 0 on Android — app injects --listo-app-safe-* */
body.listo-app-shell {
  --listo-app-safe-top: 0px;
  --listo-app-safe-bottom: 0px;
  --listo-vh: 1vh;
}

@media (max-width: 900px) {
  /* Native app adds status bar / home indicator padding around the WebView — avoid double insets here. */
  body.listo-app-shell .listo-marketplace-page,
  body.listo-app-shell .listo-marketplace-placeholder {
    min-height: calc(var(--listo-vh, 1vh) * 100 - 72px) !important;
  }
}

@media (min-width:901px){
  .listo-guest-sidebar{
    display:block;
    position:fixed;
    z-index:90;
    top:68px;
    left:0;
    bottom:0;
    width:236px;
    background:#fff;
    border-right:1px solid #E3EAF0;
  }
  .listo-guest-sidebar__scroll{height:100%;overflow-y:auto;padding:22px 12px 24px}
  .listo-guest-sidebar__eyebrow{padding:0 12px 10px;color:#8A98A6;font-size:10px;line-height:1;font-weight:800;letter-spacing:.12em}
  .listo-guest-sidebar__section{margin-top:22px}
  .listo-guest-sidebar__section:first-child{margin-top:0}
  .listo-guest-sidebar__section-title{padding:0 12px 8px;color:#8A98A6;font-size:9.5px;line-height:1;font-weight:800;letter-spacing:.09em}
  .listo-guest-sidebar__item{display:flex;align-items:center;gap:11px;min-height:40px;padding:8px 12px;border-radius:9px;color:#526171;text-decoration:none!important;font-size:13px;font-weight:600;line-height:1.2;transition:none!important}
  .listo-guest-sidebar__item:hover{background:#F6F9FB;color:#253443}
  .listo-guest-sidebar__item.is-active{background:#EAF5FF;color:#1976D2;font-weight:700}
  .listo-guest-sidebar__icon{width:19px;height:19px;flex:0 0 19px;display:inline-flex;align-items:center;justify-content:center;color:#7A8997}
  .listo-guest-sidebar__icon svg{width:18px;height:18px;display:block}
  .listo-guest-sidebar__item.is-active .listo-guest-sidebar__icon{color:#2196F3}
  .listo-guest-sidebar__footer-note{display:flex;align-items:center;gap:7px;margin:24px 10px 0;padding:11px 2px 0;border-top:1px solid #EDF1F4;color:#9AA6B2;font-size:10px}
  .listo-guest-sidebar__footer-note span{width:6px;height:6px;border-radius:50%;background:#2196F3;flex:0 0 6px}

  body[data-listo-mode="guest"] .listo-main{margin-left:236px!important;padding:0 32px 48px!important}
  body[data-listo-mode="guest"] .listo-main > .listo-container{width:min(100%,1500px)!important;max-width:1500px!important;margin-left:auto!important;margin-right:auto!important}
  body[data-listo-mode="guest"] .listo-guest-sidebar ~ * .listo-main{margin-left:236px!important}
}

.listo-guest-floating-dock{position:fixed;z-index:10020;left:50%;bottom:18px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;min-width:390px;max-width:560px;padding:7px;border:1px solid rgba(214,223,230,.95);border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 12px 34px rgba(20,35,48,.14),0 2px 8px rgba(20,35,48,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.listo-guest-floating-dock__active-bg{position:absolute;z-index:0;top:7px;bottom:7px;left:7px;width:calc((100% - 14px)/4);border-radius:13px;background:#EAF5FF;pointer-events:none}
.listo-guest-floating-dock[data-dock-active="bookings"] .listo-guest-floating-dock__active-bg{transform:translateX(100%)}
.listo-guest-floating-dock[data-dock-active="inbox"] .listo-guest-floating-dock__active-bg{transform:translateX(200%)}
.listo-guest-floating-dock[data-dock-active="more"] .listo-guest-floating-dock__active-bg{transform:translateX(300%)}
.listo-guest-floating-dock>a,.listo-guest-floating-dock>button{position:relative;min-height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;border-radius:12px;background:transparent;color:#687781;text-decoration:none!important;font:inherit;font-size:10px;font-weight:750;cursor:pointer}
.listo-guest-floating-dock>a,.listo-guest-floating-dock>button{z-index:1}
.listo-guest-floating-dock>a:hover,.listo-guest-floating-dock>button:hover{background:transparent}
.listo-guest-floating-dock>a.is-active,.listo-guest-floating-dock>button.is-active{background:#EAF5FF;color:#1976D2}
.listo-guest-floating-dock svg{width:19px;height:19px;display:block}
.listo-guest-floating__backdrop{position:fixed;inset:0;z-index:10010;background:rgba(20,31,39,.14);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility .16s ease}
.listo-guest-floating__more-panel{position:fixed;left:50%;bottom:92px;transform:translate(-50%,10px);z-index:10030;width:min(620px,calc(100vw - 32px));padding:16px;border:1px solid #DCE4EA;border-radius:18px;background:#fff;box-shadow:0 18px 45px rgba(20,35,48,.18),0 3px 12px rgba(20,35,48,.07);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s ease}
.listo-guest-floating-shell.is-more-open .listo-guest-floating__backdrop{opacity:1;visibility:visible;pointer-events:auto}
.listo-guest-floating-shell.is-more-open .listo-guest-floating__more-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.listo-guest-floating__more-head{display:flex;align-items:center;justify-content:space-between;padding:2px 3px 12px;border-bottom:1px solid #EDF1F4}
.listo-guest-floating__more-head span,.listo-guest-floating__more-head strong{display:block}
.listo-guest-floating__more-head span{font-size:8px;font-weight:850;letter-spacing:.11em;color:#87939C}
.listo-guest-floating__more-head strong{margin-top:3px;font-size:16px;color:#17232D}
.listo-guest-floating__more-head button{width:32px;height:32px;border:0;border-radius:10px;background:#F4F7F9;color:#5E6D78;font-size:22px;line-height:1;cursor:pointer}
.listo-guest-floating__more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:10px}
.listo-guest-floating__more-grid a{display:grid;grid-template-columns:34px minmax(0,1fr) 14px;align-items:center;gap:9px;min-height:58px;padding:9px;border:1px solid #E8EDF1;border-radius:12px;background:#fff;color:#17232D;text-decoration:none!important}
.listo-guest-floating__more-grid a:hover{border-color:#CFE5F6;background:#F8FBFE}
.listo-guest-floating__more-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#F1F6F9;color:#4D6573}
.listo-guest-floating__more-icon svg{width:18px;height:18px}
.listo-guest-floating__more-grid strong{font-size:10.5px;line-height:1.25}
.listo-guest-floating__more-grid b{font-size:18px;font-weight:500;color:#9AA6AE;text-align:right}

@media (max-width:900px){
  body[data-listo-mode="guest"] .listo-main{padding-bottom:120px!important}
  .listo-wallet-page--credit-activity{padding-bottom:28px!important}
  .listo-wallet-page--credit-activity .listo-page-title-row{margin-bottom:16px!important}
  .listo-wallet-page--credit-activity .listo-wallet-balance-card{margin-bottom:24px!important;padding:18px 16px!important;border-radius:12px!important}
  .listo-wallet-page--credit-activity .listo-wallet-balance-card__label{font-size:11px!important;margin-bottom:7px!important}
  .listo-wallet-page--credit-activity .listo-wallet-balance-card__amount{font-size:32px!important}
  .listo-wallet-page--credit-activity .listo-wallet-activity{margin-top:0!important}
  .listo-wallet-page--credit-activity .listo-wallet-section-heading{margin-bottom:10px!important}
  .listo-wallet-page--credit-activity .listo-wallet-history__row{align-items:flex-start!important;gap:12px!important;padding:14px 2px!important}
  .listo-wallet-page--credit-activity .listo-wallet-history__body{flex:1 1 auto!important;min-width:0!important}
  .listo-wallet-page--credit-activity .listo-wallet-history__amount{align-self:flex-start!important;padding-top:1px!important}
  .listo-wallet-page--credit-activity .listo-wallet-source-note{margin-top:24px!important;margin-bottom:0!important}
  .listo-guest-floating-dock__active-bg{top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/4);border-radius:13px}
  .listo-guest-sidebar{display:none!important}
  /* NEXT1213 — Match Guest mobile page gutters to the Host Account shell.
     Keep the global .listo-main mobile gutters instead of forcing the Guest
     workspace full-bleed. This gives Guest Account pages the same 32px
     canvas at 481–900px as Host Mode, while the global <=480px rule
     provides the canonical 24px narrow-phone gutter. */
  body[data-listo-mode="guest"] .listo-main{margin-left:0!important;padding-left:32px!important;padding-right:32px!important;padding-bottom:104px!important}
  body[data-listo-mode="guest"] .listo-main > .listo-container{width:100%!important;max-width:none!important}
  .listo-guest-floating-shell{display:block}
  .listo-guest-floating-dock{left:12px;right:12px;bottom:12px;transform:none;width:auto;min-width:0;max-width:none;padding:6px;border-radius:18px}
  .listo-guest-floating-dock>a,.listo-guest-floating-dock>button{min-height:48px;font-size:9px}
  .listo-guest-floating__more-panel{left:12px;right:12px;bottom:88px;transform:translateY(10px);width:auto;padding:13px;border-radius:18px}
  .listo-guest-floating-shell.is-more-open .listo-guest-floating__more-panel{transform:translateY(0)}
  .listo-guest-floating__more-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .listo-guest-floating__more-grid a{min-height:54px;padding:8px}
}
@media (max-width:480px){
  /* Match Host Mode's canonical narrow-phone .listo-main gutter. */
  body[data-listo-mode="guest"] .listo-main{padding-left:24px!important;padding-right:24px!important}
}
@media (max-width:380px){
  .listo-guest-floating__more-grid{grid-template-columns:1fr}
}


/* ==========================================================================
   NEXT1211 - Guest UI/UX 2: header aligned to the Host mode header
   --------------------------------------------------------------------------
   Applies only to the Guest account-menu pages (My Wallet, Favorites,
   Referrals, Refunds, Edit Profile, Support, FAQ, My Bookings, Inbox), which
   carry .listo-header--guest-account. The Guest Home page keeps its own
   header. Presentation only: no markup, routes, menus or behavior changed.
   Values mirror the Host header (NEXT882 / NEXT885 desktop header rules).
   ========================================================================== */
body[data-listo-mode="guest"] .listo-header--guest-account {
  background: #fff !important;
  border-bottom: 1px solid #E4E4E4 !important;
  box-shadow: none !important;
}

/* The marketplace header reserves 72px (84px once scrolled). Account pages use
   the Host header's content-driven height, so it never grows on scroll. */
body[data-listo-mode="guest"] .listo-header--guest-account .listo-header__inner,
body[data-listo-mode="guest"] .listo-header--guest-account.is-scrolled .listo-header__inner {
  min-height: 0 !important;
}

@media (min-width: 901px) {
  /* Full-width header with the logo at the left edge, like Host mode. */
  body[data-listo-mode="guest"] .listo-header--guest-account .listo-header__inner {
    max-width: none !important;
    width: 100% !important;
    padding: 14px 28px !important;
  }

  body[data-listo-mode="guest"] .listo-header--guest-account .listo-header__account-group {
    gap: 10px;
  }

  body[data-listo-mode="guest"] .listo-header--guest-account .listo-mode-toggle {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
    padding: 6px 12px;
    gap: 5px;
  }

  body[data-listo-mode="guest"] .listo-header--guest-account .listo-account-trigger {
    gap: 6px;
    padding: 5px 11px 5px 5px;
  }

  body[data-listo-mode="guest"] .listo-header--guest-account .listo-account-avatar {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  body[data-listo-mode="guest"] .listo-header--guest-account .listo-account-name {
    font-size: 13px;
    line-height: 1.2;
  }

  body[data-listo-mode="guest"] .listo-header--guest-account .listo-account-caret {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 900px) {
  /* Same compact vertical rhythm as the Host mobile header. */
  body[data-listo-mode="guest"] .listo-header--guest-account .listo-header__inner {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}


/* ==========================================================================
   NEXT1215 - Guest UI/UX 2 (mobile): 20px between the header and page title
   --------------------------------------------------------------------------
   NEXT1214 added "padding-top:20px" for the Wallet page, but an older
   ".listo-wallet-page{padding-top:8px}" rule later in the stylesheet won, so
   Wallet rendered 8px; other Guest pages rendered 32px (Bookings 2px, and 64px
   at tablet widths). The top padding of the page container is the single
   driver of this gap, so it is set once here for every Guest UI/UX 2 page
   (marked by .listo-header--guest-account). Desktop and the Guest Home page
   are not affected. Presentation only.
   ========================================================================== */
@media (max-width: 900px) {
  body:has(.listo-header--guest-account) .listo-main {
    padding-top: 0 !important;
  }

  body:has(.listo-header--guest-account) .listo-main > .listo-container {
    margin-top: 0 !important;
    padding-top: 20px !important;
  }
}


/* NEXT1216 — Guest Favorites UI/UX 2.0 */
.listo-favorites-page__description { margin: 4px 0 10px; }
.listo-favorites-page .listo-favorites-help { margin-bottom: 16px; }
.listo-favorites-page .listo-favorites-listing-group + .listo-favorites-unavailable { margin-top: 38px; }
.listo-favorites-unavailable { padding-top: 4px; }
.listo-favorites-unavailable__heading { margin-bottom: 14px; }
.listo-favorites-unavailable__heading h2 { margin: 0 0 5px; font-size: 18px; line-height: 1.3; }
.listo-favorites-unavailable__heading p { margin: 0; color: var(--muted, #64748B); font-size: 13px; line-height: 1.5; }
.listo-favorites-unavailable__list { display: grid; gap: 10px; }
.listo-favorites-unavailable-card { position: relative; display: flex; align-items: center; gap: 14px; min-height: 86px; padding: 10px 50px 10px 10px; border: 1px solid var(--border, #E2E8F0); border-radius: 12px; background: var(--surface, #fff); }
.listo-favorites-unavailable-card__media { width: 92px; height: 66px; flex: 0 0 92px; overflow: hidden; border-radius: 8px; background: var(--surface-alt, #F8FAFC); }
.listo-favorites-unavailable-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.25); opacity: .78; }
.listo-favorites-unavailable-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-size: 25px; }
.listo-favorites-unavailable-card__content { min-width: 0; }
.listo-favorites-unavailable-card__content h3 { margin: 0 0 4px; font-size: 14px; line-height: 1.35; color: var(--ink, #0F172A); }
.listo-favorites-unavailable-card__content p { margin: 0; font-size: 12px; color: #64748B; }
.listo-favorites-unavailable-card__remove { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface-alt, #F8FAFC); color: #64748B; font-size: 22px; line-height: 1; cursor: pointer; }
.listo-favorites-unavailable-card__remove:hover { background: #EAF5FF; color: #1976D2; }
.listo-favorites-unavailable-card__remove:focus-visible { outline: 2px solid #2196F3; outline-offset: 2px; }
.listo-favorites-unavailable-card__remove:disabled { opacity: .55; cursor: wait; }
@media (max-width: 767px) {
  .listo-favorites-page__description { margin-top: 4px; margin-bottom: 8px; }
  .listo-favorites-page .listo-favorites-help { margin-bottom: 12px; }
  .listo-favorites-page .listo-favorites-listing-group + .listo-favorites-unavailable { margin-top: 30px; }
  .listo-favorites-unavailable-card { min-height: 76px; gap: 10px; padding: 8px 46px 8px 8px; }
  .listo-favorites-unavailable-card__media { width: 78px; height: 58px; flex-basis: 78px; }
  .listo-favorites-unavailable-card__content h3 { font-size: 13px; }
  .listo-favorites-unavailable-card__content p { font-size: 11px; }
  .listo-favorites-unavailable-card__remove { right: 8px; width: 32px; height: 32px; }
}

/* ========================================================================
   NEXT1217 — Guest Favorites / My Wallet visual-system alignment
   Presentation-only. Favorites data, Wishlist behavior, listing URLs and
   availability rules remain unchanged.
   ======================================================================== */
.listo-favorites-page .listo-page-title-row {
  align-items: flex-start;
  margin-bottom: 20px;
}
.listo-favorites-page__title-copy h1 {
  margin: 0;
  color: #263238;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
}
.listo-favorites-page__title-copy p {
  margin: 5px 0 0;
  color: #607080;
  font-size: 13px;
  line-height: 1.45;
}
.listo-favorites-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  margin: 0 0 28px;
  padding: 9px 4px;
  border: 0;
  border-bottom: 1px solid #E9EEF3;
  border-radius: 0;
  background: transparent;
  color: #1976D2;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.listo-favorites-help:hover { background: #F8FCFF; color: #1565C0; }
.listo-favorites-help:focus-visible { outline: 3px solid rgba(33,150,243,.20); outline-offset: 2px; }
.listo-favorites-help:active { transform: none; }
.listo-favorites-help__icon { width: 22px; height: 22px; color: currentColor; }
.listo-favorites-help__icon .listo-favorites-info-icon { width: 20px; height: 20px; }
.listo-favorites-help__chevron { margin-left: auto; color: #94A3B8; font-size: 20px; line-height: 1; }
.listo-favorites-help:hover .listo-favorites-help__chevron { color: #1976D2; }

.listo-favorites-saved-section { margin: 0; }
.listo-favorites-section-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
}
.listo-favorites-section-heading h2 {
  margin: 0;
  color: #263238;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
}
.listo-favorites-section-heading span {
  color: #607080;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
}
.listo-favorites-page .listo-listing-grid {
  margin-top: 0;
}

/* Wallet uses restrained bordered rows rather than floating cards. Apply the
   same surface language to unavailable saved listings. */
.listo-favorites-page .listo-favorites-unavailable {
  margin-top: 30px;
  padding-top: 0;
  border-top: 1px solid #E9EEF3;
}
.listo-favorites-page .listo-favorites-unavailable__heading {
  padding-top: 24px;
  margin-bottom: 10px;
}
.listo-favorites-page .listo-favorites-unavailable__heading h2 {
  margin: 0 0 4px;
  color: #263238;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
}
.listo-favorites-page .listo-favorites-unavailable__heading p {
  margin: 0;
  color: #607080;
  font-size: 13px;
  line-height: 1.5;
}
.listo-favorites-page .listo-favorites-unavailable__list { gap: 0; border-top: 1px solid #E9EEF3; }
.listo-favorites-page .listo-favorites-unavailable-card {
  min-height: 86px;
  padding: 10px 50px 10px 2px;
  border: 0;
  border-bottom: 1px solid #E9EEF3;
  border-radius: 0;
  background: transparent;
}
.listo-favorites-page .listo-favorites-unavailable-card__media { border-radius: 8px; }
.listo-favorites-page .listo-favorites-unavailable-card__content h3 { font-weight: 600; }
.listo-favorites-page .listo-favorites-unavailable-card__remove { right: 2px; background: #F3F6F9; }

/* Empty state follows Wallet's restrained account-page surface treatment. */
.listo-favorites-page .listo-favorites-empty {
  padding: 34px 20px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  background: #fff;
  text-align: left;
}
.listo-favorites-page .listo-favorites-empty__icon {
  width: 40px;
  height: 40px;
  margin: 0 0 14px;
  border-radius: 10px;
  background: #F8FBFE;
  color: #2196F3;
}
.listo-favorites-page .listo-favorites-empty__icon svg { width: 20px; height: 20px; }
.listo-favorites-page .listo-favorites-empty h2 {
  margin: 0 0 5px;
  color: #263238;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
}
.listo-favorites-page .listo-favorites-empty p {
  margin: 0 0 16px;
  color: #607080;
  font-size: 13px;
  line-height: 1.5;
}
.listo-favorites-page .listo-favorites-empty .listo-btn { min-height: 42px; }

/* Align the Favorites help dialog with the Wallet dialog system. */
.listo-favorites-page ~ .listo-favorites-info-modal .listo-favorites-info-modal__card,
.listo-favorites-info-modal__card {
  max-width: 560px;
  padding: 0;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15,23,42,.22);
}
.listo-favorites-info-modal__card h3 {
  margin: 0;
  padding: 22px 52px 18px 24px;
  border-bottom: 1px solid #EEF2F6;
  color: #17202A;
  font-size: 20px;
  line-height: 1.25;
}
.listo-favorites-info-modal__content { padding: 20px 24px; color: #607080; font-size: 14px; line-height: 1.55; }
.listo-favorites-info-modal__close { top: 17px; right: 16px; background: #F3F6F9; color: #455A64; }
.listo-favorites-info-modal__close:hover,
.listo-favorites-info-modal__close:focus-visible { background: #EAF5FF; color: #1976D2; }

@media (max-width: 700px) {
  .listo-favorites-page .listo-page-title-row { margin-bottom: 18px; }
  .listo-favorites-page__title-copy h1 { font-size: 20px; }
  .listo-favorites-page__title-copy p { margin-top: 5px; font-size: 13px; }
  .listo-favorites-help { min-height: 40px; margin-bottom: 24px; padding: 8px 2px; }
  .listo-favorites-section-heading { margin-bottom: 10px; }
  .listo-favorites-section-heading h2 { font-size: 17px; }
  .listo-favorites-page .listo-listing-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 18px 12px; }
  .listo-favorites-page .listo-favorites-unavailable { margin-top: 28px; }
  .listo-favorites-page .listo-favorites-unavailable__heading { padding-top: 20px; }
  .listo-favorites-page .listo-favorites-unavailable-card { min-height: 76px; padding: 8px 44px 8px 0; }
  .listo-favorites-page .listo-favorites-empty { padding: 28px 16px; }
  .listo-favorites-info-modal { align-items: flex-end; padding: 0; }
  .listo-favorites-info-modal__card { width: 100%; max-width: none; border-radius: 18px 18px 0 0; }
  .listo-favorites-info-modal__card h3 { padding: 18px 50px 15px 18px; font-size: 18px; }
  .listo-favorites-info-modal__content { padding: 17px 18px 24px; font-size: 13px; }
}

/* ========================================================================
   NEXT1218 — Guest Account title consistency + Favorites simplification
   Presentation-only. Establish one title/description rhythm across the
   Guest Account workspace, matching My Wallet. Favorites keeps its own
   listing-specific content hierarchy.
   ======================================================================== */
body:has(.listo-header--guest-account) .listo-main > .listo-container > .listo-page-title-row {
  align-items: flex-start;
  margin-bottom: 22px !important;
}
body:has(.listo-header--guest-account) .listo-main > .listo-container > .listo-page-title-row h1 {
  margin: 0;
  font-size: 24px !important;
  line-height: 29px !important;
  font-weight: 600;
  letter-spacing: normal;
}
body:has(.listo-header--guest-account) .listo-main > .listo-container > .listo-page-title-row [class*="__title-copy"] p {
  margin: 5px 0 0 !important;
  color: #607080;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Favorites no longer needs a persistent help row above the saved listings. */
.listo-favorites-page .listo-favorites-help { display: none !important; }

/* Keep the empty-state CTA compact and consistent with Guest Account actions. */
.listo-favorites-page .listo-favorites-empty .listo-btn {
  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 9px 18px;
  border-radius: 11px;
  font-size: 14px;
  line-height: 20px;
}

@media (max-width: 700px) {
  body:has(.listo-header--guest-account) .listo-main > .listo-container > .listo-page-title-row {
    margin-bottom: 18px !important;
  }
  body:has(.listo-header--guest-account) .listo-main > .listo-container > .listo-page-title-row h1 {
    font-size: 20px !important;
    line-height: 25px !important;
  }
  body:has(.listo-header--guest-account) .listo-main > .listo-container > .listo-page-title-row [class*="__title-copy"] p {
    margin-top: 5px !important;
    font-size: 13px !important;
    line-height: 19px !important;
  }
  .listo-favorites-page .listo-favorites-empty .listo-btn {
    min-height: 40px;
    padding: 9px 16px;
    font-size: 14px;
  }
}

/* ========================================================================
   NEXT1219 — Guest Refunds UI/UX 2.0
   Presentation-only modernization based on the NEXT1218 Guest Account shell.
   Canonical refund records, calculations, AJAX behavior and authorization
   remain unchanged.
   ======================================================================== */
.listo-refunds-page {
  padding-bottom: 48px;
}

.listo-refunds-page .listo-refunds-page__title-row {
  align-items: flex-start;
  margin-bottom: 22px !important;
}
.listo-refunds-page__title-copy h1 {
  margin: 0;
  color: #263238;
  font-size: 24px;
  line-height: 29px;
  font-weight: 600;
  letter-spacing: normal;
}
.listo-refunds-page__title-copy p {
  margin: 5px 0 0;
  color: #607080;
  font-size: 14px;
  line-height: 1.5;
}

.listo-refunds-help-row {
  display: flex;
  align-items: center;
  margin: 0 0 28px;
  padding: 0 0 12px;
  border-bottom: 1px solid #E9EEF3;
}
.listo-refunds-help-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #1976D2;
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
}
.listo-refunds-help-link span {
  font-size: 18px;
  line-height: 1;
}
.listo-refunds-help-link:focus-visible {
  outline: 2px solid #2196F3;
  outline-offset: 4px;
  border-radius: 4px;
}

.listo-refunds-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}
.listo-refunds-section-heading h2 {
  margin: 0;
  color: #263238;
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
}
.listo-refunds-section-heading .listo-caption {
  margin: 4px 0 0;
  max-width: 820px;
  color: #607080;
  font-size: 13px;
  line-height: 1.5;
}

.listo-refunds-progress-section {
  margin: 0 0 30px;
}
.listo-refunds-progress-list {
  border-top: 1px solid #E9EEF3;
  border-bottom: 1px solid #E9EEF3;
  background: #fff;
}
.listo-refund-progress-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(190px, .6fr);
  align-items: center;
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid #E9EEF3;
}
.listo-refund-progress-item:first-child { border-top: 0; }
.listo-refund-progress-item__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.listo-refund-progress-item__main strong {
  overflow-wrap: anywhere;
  color: #263238;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.listo-refund-progress-item__main span {
  color: #607080;
  font-size: 12px;
  line-height: 18px;
}
.listo-refund-progress-item__amount {
  white-space: nowrap;
  color: #263238;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
}
.listo-refund-progress-item__status {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.listo-refund-progress-item__status strong {
  color: #263238;
  font-size: 12px;
  line-height: 17px;
  font-weight: 700;
}
.listo-refund-progress-item__status span {
  color: #607080;
  font-size: 11px;
  line-height: 16px;
}

.listo-refunds-settings {
  margin-top: 0;
}
.listo-refunds-payout-card {
  max-width: 900px;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid #E9EEF3;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.listo-refunds-payout-card--setup {
  padding-top: 16px;
}
.listo-refunds-payout-empty {
  margin-bottom: 14px;
}
.listo-refunds-payout-empty strong {
  display: block;
  color: #263238;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.listo-refunds-payout-empty p {
  margin: 4px 0 0;
  color: #607080;
  font-size: 13px;
  line-height: 20px;
}
.listo-refunds-payout-summary {
  display: grid;
  grid-template-columns: .8fr 1.1fr 1.2fr auto;
  align-items: center;
  gap: 18px;
  padding: 0 0 15px;
}
.listo-refunds-payout-summary > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.listo-refunds-payout-summary span {
  color: #607080;
  font-size: 11px;
  line-height: 16px;
}
.listo-refunds-payout-summary strong {
  overflow-wrap: anywhere;
  color: #263238;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.listo-refunds-payout-grid {
  display: grid;
  grid-template-columns: .8fr 1fr 1.2fr;
  gap: 14px;
  padding-top: 2px;
}
.listo-refunds-payout-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.listo-refunds-payout-actions .listo-caption { margin: 0; }
.listo-refunds-payout-actions .listo-btn {
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
}
.listo-refunds-payout-card .listo-field-error {
  margin-top: 10px;
}

.listo-refunds-history-section {
  margin-top: 30px;
}
.listo-refunds-toolbar--filters {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 12px;
}
.listo-refunds-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.listo-refunds-status-pill {
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid #DDE5EB;
  border-radius: 999px;
  background: #fff;
  color: #607080;
  font: inherit;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  cursor: pointer;
}
.listo-refunds-status-pill:hover { border-color: #B8C2CC; color: #263238; }
.listo-refunds-status-pill.is-active {
  border-color: #2196F3;
  background: #2196F3;
  color: #fff;
}

.listo-refunds-no-results {
  min-height: 74px;
  margin: 0 0 12px;
  padding: 18px;
  box-sizing: border-box;
  border: 1px dashed #DDE5EB;
  border-radius: 10px;
  background: #FCFDFD;
  text-align: center;
}
.listo-refunds-no-results strong {
  color: #607080;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
}

.listo-refunds-history-list {
  border-top: 1px solid #E9EEF3;
}
.listo-refund-activity-row {
  border-bottom: 1px solid #E9EEF3;
}
.listo-refund-activity-row[hidden] { display: none; }
.listo-refund-activity-row > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(180px, .55fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 78px;
  padding: 14px 0;
  box-sizing: border-box;
  list-style: none;
  cursor: pointer;
}
.listo-refund-activity-row > summary::-webkit-details-marker { display: none; }
.listo-refund-activity-row > summary:hover { background: #FCFDFD; }
.listo-refund-activity-row__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.listo-refund-activity-row__body strong {
  overflow-wrap: anywhere;
  color: #263238;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.listo-refund-activity-row__body span {
  color: #607080;
  font-size: 12px;
  line-height: 18px;
}
.listo-refund-activity-row__amount {
  white-space: nowrap;
  color: #263238;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
}
.listo-refund-activity-row__status {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.listo-refund-activity-row__status strong {
  color: #263238;
  font-size: 12px;
  line-height: 17px;
  font-weight: 700;
}
.listo-refund-activity-row__status span {
  color: #607080;
  font-size: 11px;
  line-height: 16px;
}
.listo-refund-activity-row__view {
  white-space: nowrap;
  color: #607080;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}
.listo-refund-activity-row__view span {
  display: inline-block;
  margin-left: 4px;
  transition: transform .15s ease;
}
.listo-refund-activity-row[open] .listo-refund-activity-row__view span { transform: rotate(180deg); }
.listo-refund-activity-row__details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 22px;
  padding: 16px 18px 18px;
  border-top: 1px dashed #DDE5EB;
  background: #FCFDFD;
}
.listo-refund-activity-row__details > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.listo-refund-activity-row__details span {
  color: #607080;
  font-size: 11px;
  line-height: 16px;
}
.listo-refund-activity-row__details strong {
  overflow-wrap: anywhere;
  color: #263238;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}

.listo-refunds-empty-state {
  padding: 24px 18px;
  border-top: 1px solid #E9EEF3;
  border-bottom: 1px solid #E9EEF3;
  text-align: center;
}
.listo-refunds-empty-state strong {
  display: block;
  color: #263238;
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
}
.listo-refunds-empty-state p {
  max-width: 520px;
  margin: 5px auto 0;
  color: #607080;
  font-size: 13px;
  line-height: 20px;
}

.listo-refunds-info-dialog {
  width: min(520px, calc(100% - 32px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: #263238;
  box-shadow: 0 24px 70px rgba(15,23,42,.20);
}
.listo-refunds-info-dialog::backdrop { background: rgba(15,23,42,.38); }
.listo-refunds-info-dialog__inner { position: relative; padding: 26px; }
.listo-refunds-info-dialog__inner h2 { margin: 0 36px 18px 0; font-size: 20px; line-height: 26px; }
.listo-refunds-info-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #F5F7F8;
  color: #263238;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.listo-refunds-info-list { display: grid; gap: 15px; }
.listo-refunds-info-list > div { display: flex; flex-direction: column; gap: 4px; }
.listo-refunds-info-list strong { font-size: 13px; line-height: 18px; }
.listo-refunds-info-list span { color: #607080; font-size: 13px; line-height: 20px; }

@media (max-width: 900px) {
  .listo-refund-progress-item { grid-template-columns: minmax(0, 1fr) auto; }
  .listo-refund-progress-item__status { grid-column: 1 / -1; }
  .listo-refunds-payout-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .listo-refunds-payout-summary + .listo-refunds-payout-actions { margin-top: 0; }
  .listo-refund-activity-row > summary { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .listo-refund-activity-row__body { grid-column: 1 / -1; }
  .listo-refund-activity-row__status { grid-column: 1; }
  .listo-refund-activity-row__view { grid-column: 2; justify-self: end; }
  .listo-refund-activity-row__details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .listo-refunds-page { padding-bottom: 120px; }
  .listo-refunds-page .listo-refunds-page__title-row { margin-bottom: 18px !important; }
  .listo-refunds-page__title-copy h1 { font-size: 20px; line-height: 25px; }
  .listo-refunds-page__title-copy p { margin-top: 5px; font-size: 13px; line-height: 19px; }
  .listo-refunds-help-row { margin-bottom: 22px; padding-bottom: 10px; }
  .listo-refunds-section-heading { margin-bottom: 10px; }
  .listo-refunds-section-heading h2 { font-size: 17px; line-height: 23px; }
  .listo-refunds-section-heading .listo-caption { margin-top: 3px; font-size: 12px; line-height: 18px; }
  .listo-refunds-progress-section { margin-bottom: 26px; }
  .listo-refund-progress-item { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 0; }
  .listo-refund-progress-item__main { grid-column: 1 / -1; }
  .listo-refund-progress-item__amount { grid-column: 1; font-size: 15px; }
  .listo-refund-progress-item__status { grid-column: 2; align-items: flex-end; text-align: right; }
  .listo-refunds-payout-card { max-width: none; padding-top: 14px; }
  .listo-refunds-payout-summary { grid-template-columns: 1fr; gap: 11px; padding-bottom: 13px; }
  .listo-refunds-payout-grid { grid-template-columns: 1fr; gap: 12px; }
  .listo-refunds-payout-actions { margin-top: 10px; }
  .listo-refunds-payout-actions .listo-btn { width: auto; min-width: 0; }
  .listo-refunds-history-section { margin-top: 26px; }
  .listo-refunds-toolbar--filters { margin: 0 0 10px; }
  .listo-refunds-status-pills { width: 100%; }
  .listo-refunds-status-pill { flex: 1 1 0; min-height: 38px; padding: 8px 10px; }
  .listo-refund-activity-row > summary { min-height: 0; padding: 14px 0; }
  .listo-refund-activity-row__amount { font-size: 15px; }
  .listo-refund-activity-row__status strong { font-size: 11px; }
  .listo-refund-activity-row__status span { font-size: 10px; }
  .listo-refund-activity-row__view { font-size: 11px; }
  .listo-refund-activity-row__details { grid-template-columns: 1fr; gap: 12px; padding: 14px 12px 16px; }
  .listo-refunds-info-dialog { width: 100%; max-width: none; margin: 0; margin-top: auto; border-radius: 18px 18px 0 0; }
  .listo-refunds-info-dialog__inner { padding: 22px 18px 26px; }
}

/* ========================================================================
   NEXT1221 — Guest Support UI/UX 2.0
   Guest-only presentation refinement. Support state machine, AJAX actions,
   polling, case lifecycle, and Host Support presentation remain unchanged.
   ======================================================================== */
.listo-support-page[data-role="guest"] .listo-support-page__title-row {
  margin-bottom: 0;
}

.listo-support-page[data-role="guest"] .listo-support-page__description {
  max-width: 760px;
  margin: 0 0 26px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

.listo-support-page[data-role="guest"] .listo-support-loading-row {
  margin: 0 0 18px;
}

/* Keep the Guest state surfaces calm and utility-like rather than dashboard-like. */
.listo-support-page[data-role="guest"] .listo-support-entry-card {
  max-width: 760px;
  padding: 24px;
  border-color: var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 3px 14px rgba(26,26,26,.04);
}
.listo-support-page[data-role="guest"] .listo-support-entry-card__top {
  justify-content: flex-start;
  margin-bottom: 16px;
}
.listo-support-page[data-role="guest"] .listo-support-entry-card__icon {
  width: 42px;
  height: 42px;
  margin: 0 0 12px;
  border-radius: 12px;
}
.listo-support-page[data-role="guest"] .listo-support-entry-card__icon svg {
  width: 22px;
  height: 22px;
}
.listo-support-page[data-role="guest"] .listo-support-entry-card__copy {
  text-align: left;
}
.listo-support-page[data-role="guest"] .listo-support-entry-card__copy h2 {
  font-size: 20px;
  margin-bottom: 6px;
}
.listo-support-page[data-role="guest"] .listo-support-entry-card__copy p {
  margin: 0;
  max-width: 620px;
  font-size: 13px;
  line-height: 1.55;
}
.listo-support-page[data-role="guest"] .listo-support-entry-card__action {
  align-items: flex-start;
  margin-top: 18px;
}
.listo-support-page[data-role="guest"] .listo-support-entry-card__action .listo-btn {
  min-width: 0;
}

.listo-support-page[data-role="guest"] .listo-support-offline-card {
  max-width: 760px;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 3px 14px rgba(26,26,26,.04);
}
.listo-support-page[data-role="guest"] .listo-support-state-head h2 {
  font-size: 20px;
  margin: 14px 0 6px;
}
.listo-support-page[data-role="guest"] .listo-support-state-head p {
  max-width: 620px;
  margin-bottom: 20px;
  font-size: 13px;
}
.listo-support-page[data-role="guest"] .listo-support-contact-context {
  background: var(--surface-alt);
}

.listo-support-success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #D6EEDC;
  border-radius: 14px;
  background: #F8FCF9;
}
.listo-support-success__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #EAF7EE;
  color: #15803D;
  font-size: 17px;
  font-weight: 800;
}
.listo-support-success__copy h3 {
  margin: 1px 0 4px;
  font-size: 14px;
  line-height: 1.3;
}
.listo-support-success__copy p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}
.listo-support-success__reference {
  margin-top: 5px !important;
  color: var(--ink) !important;
  font-weight: 700;
}

.listo-support-page[data-role="guest"] .listo-support-chat {
  max-width: 900px;
}
.listo-support-page[data-role="guest"] .listo-support-chat__header {
  min-height: 62px;
  box-sizing: border-box;
}
.listo-support-page[data-role="guest"] .listo-support-end-btn {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 10px;
  color: var(--ink-muted);
  background: var(--surface);
}
.listo-support-page[data-role="guest"] .listo-support-end-btn:hover {
  border-color: var(--border);
  color: var(--ink);
  background: var(--surface-alt);
}

.listo-support-page[data-role="guest"] .listo-support-closed-card {
  max-width: 520px;
  margin-top: 8px;
}

.listo-support-page[data-role="guest"] > .listo-support-help--guest {
  max-width: 760px;
  margin: 18px 0 0;
}

/* During active mobile chat, remove the normal Guest Account dock so it can
   never cover the composer, final message, or idle warning. */
@media (max-width:700px) {
  .listo-support-page[data-role="guest"] {
    padding-top: 20px !important;
  }
  .listo-support-page[data-role="guest"] .listo-support-page__title-row {
    margin-bottom: 0;
  }
  .listo-support-page[data-role="guest"] .listo-support-page__title-row > h1 {
    font-size: 20px !important;
    line-height: 25px !important;
    font-weight: 600 !important;
  }
  .listo-support-page[data-role="guest"] .listo-support-page__description {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 19px;
  }
  .listo-support-page[data-role="guest"] .listo-support-entry-card,
  .listo-support-page[data-role="guest"] .listo-support-offline-card {
    max-width: none;
    padding: 18px;
    border-radius: 14px;
  }
  .listo-support-page[data-role="guest"] .listo-support-entry-card__copy h2,
  .listo-support-page[data-role="guest"] .listo-support-state-head h2 {
    font-size: 18px;
  }
  .listo-support-page[data-role="guest"] .listo-support-entry-card__action .listo-btn {
    width: 100%;
  }
  .listo-support-page[data-role="guest"] .listo-support-contact-context__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .listo-support-page[data-role="guest"] .listo-support-message-field textarea {
    min-height: 132px;
  }
  .listo-support-page[data-role="guest"] .listo-support-success {
    padding: 13px 14px;
  }
  .listo-support-page[data-role="guest"] > .listo-support-help--guest {
    max-width: none;
    margin-top: 14px;
  }

  body:has(.listo-support-page[data-role="guest"].is-support-chat-active) .listo-guest-floating-shell {
    display: none !important;
  }

  .listo-support-page[data-role="guest"].is-support-chat-active {
    padding-bottom: 0 !important;
  }
}

/* ========================================================================
   NEXT1223 — Guest Support title/description zero-gap correction
   The Guest Support title and its one-line description must sit directly
   together. This is Guest-only and intentionally overrides older shared
   title-row spacing rules.
   ======================================================================== */
.listo-support-page[data-role="guest"] > .listo-support-page__title-row {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.listo-support-page[data-role="guest"] > .listo-support-page__title-row > h1 {
  margin: 0 !important;
  padding: 0 !important;
}
.listo-support-page[data-role="guest"] > .listo-support-page__description {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width:700px) {
  .listo-support-page[data-role="guest"] > .listo-support-page__title-row {
    margin: 0 !important;
  }
  .listo-support-page[data-role="guest"] > .listo-support-page__description {
    margin-top: 0 !important;
  }
}

/* ========================================================================
   NEXT1224 — Guest Support title/description gap: specificity fix
   NEXT1223 did not take effect because the NEXT1218 Guest Account rule
   `body:has(.listo-header--guest-account) .listo-main > .listo-container >
   .listo-page-title-row { margin-bottom:22px !important }` out-ranks it.
   This override matches that selector chain with higher specificity so the
   Guest Support title and one-line description sit directly together.
   Guest Support only; Host Support and other Guest pages are untouched.
   ======================================================================== */
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] > .listo-page-title-row.listo-support-page__title-row {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] > .listo-page-title-row.listo-support-page__title-row > h1 {
  margin: 0 !important;
  padding: 0 !important;
}
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] > .listo-page-intro.listo-support-page__description {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
@media (max-width:700px) {
  body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] > .listo-page-title-row.listo-support-page__title-row {
    margin: 0 !important;
  }
  body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] > .listo-page-intro.listo-support-page__description {
    margin-top: 0 !important;
  }
}


/* ========================================================================
   NEXT1225 — Guest FAQ 2.0
   Presentation-only Guest FAQ treatment. The Host FAQ and shared FAQ
   rendering remain unchanged. Search/navigation continue to use the
   existing client-side implementation and native <details> accordions.
   ======================================================================== */
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-faq-page {
  max-width: 1120px;
}

body:has(.listo-header--guest-account) .listo-faq-page__title-row {
  align-items: flex-start;
  gap: 0;
  margin-bottom: 22px !important;
}
body:has(.listo-header--guest-account) .listo-faq-page__title-copy {
  display: grid;
  gap: 5px;
}
body:has(.listo-header--guest-account) .listo-faq-page__title-copy h1 {
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 29px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  color: #172631;
}
body:has(.listo-header--guest-account) .listo-faq-page__title-copy p {
  margin: 0 !important;
  color: #607080;
  font-size: 14px !important;
  line-height: 21px !important;
}

body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-search-hero {
  max-width: 760px;
  margin: 0 0 28px;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-search {
  min-height: 52px;
  padding: 0 15px;
  border-radius: 11px;
  box-shadow: none;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-search input {
  font-size: 15px;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-search-hero__meta {
  min-height: 18px;
  margin-top: 7px;
}

body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-discovery {
  max-width: 100%;
  margin: 0 0 34px;
  gap: 30px;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-section-heading {
  margin-bottom: 9px;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-section-heading h2 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-popular__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-popular__card {
  min-height: 52px;
  padding: 12px 14px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 11px;
  box-shadow: none;
  transition: border-color .16s ease, background-color .16s ease;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-popular__card:hover,
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-popular__card:focus-visible {
  transform: none;
  box-shadow: none;
  border-color: #bfd2e2;
  background: #fbfdff;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-popular__card span:first-child {
  font-size: 14px;
  line-height: 1.35;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-popular__card span:last-child {
  color: #2196F3;
  flex: 0 0 auto;
}

body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-topics__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-topic {
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 11px;
  box-shadow: none;
  transition: border-color .16s ease, background-color .16s ease;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-topic:hover,
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-topic:focus-visible {
  transform: none;
  box-shadow: none;
  border-color: #bfd2e2;
  background: #fbfdff;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-topic__icon {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 10px;
  color: #2196F3;
  background: #EAF5FF;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-topic__icon svg {
  width: 18px;
  height: 18px;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-topic__body strong {
  font-size: 14px;
  font-weight: 600;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-topic__body small {
  font-size: 12px;
  line-height: 1.4;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-topic__arrow {
  color: #2196F3;
  font-size: 17px;
}

body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-category {
  margin-top: 28px;
  scroll-margin-top: 88px;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-category:first-of-type {
  margin-top: 0;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-category__title {
  margin-bottom: 9px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-item {
  margin-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 11px;
  box-shadow: none;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-item summary {
  min-height: 50px;
  padding: 14px 0;
  font-size: 15px;
  line-height: 21px;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-item__answer {
  padding-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
}

body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-item__action {
  margin-top: 12px;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-item__action a {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #1565C0;
  font-size: 13px;
  font-weight: 700;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-item__action a:hover {
  background: transparent;
  color: #1976D2;
}

body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-support-cta {
  max-width: 100%;
  margin-top: 34px;
  padding: 18px 20px;
  border-radius: 12px;
  box-shadow: none;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-support-cta__button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
}

body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-search-result-card {
  box-shadow: none;
  border-radius: 11px;
  padding: 15px 16px;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-search-result-card__question {
  font-size: 16px;
}
body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-search-result-card__answer {
  font-size: 14px;
  line-height: 1.58;
}

@media (max-width: 700px) {
  body:has(.listo-header--guest-account) .listo-faq-page__title-row {
    margin-bottom: 18px !important;
  }
  body:has(.listo-header--guest-account) .listo-faq-page__title-copy h1 {
    font-size: 20px !important;
    line-height: 25px !important;
  }
  body:has(.listo-header--guest-account) .listo-faq-page__title-copy p {
    margin-top: 0 !important;
    font-size: 13px !important;
    line-height: 19px !important;
  }
  body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-search-hero {
    margin-bottom: 24px;
  }
  body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-search {
    min-height: 50px;
    border-radius: 10px;
  }
  body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-discovery {
    gap: 24px;
    margin-bottom: 28px;
  }
  body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-popular__grid,
  body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-topics__grid {
    grid-template-columns: 1fr;
  }
  body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-popular__card {
    min-height: 54px;
  }
  body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-topic {
    min-height: 66px;
  }
  body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-category {
    margin-top: 24px;
    scroll-margin-top: 72px;
  }
  body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-category__title {
    font-size: 17px;
    line-height: 23px;
  }
  body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-item {
    padding-left: 14px;
    padding-right: 14px;
  }
  body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-item summary {
    min-height: 52px;
    gap: 12px;
    font-size: 15px;
  }
  body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-support-cta {
    margin-top: 28px;
    padding: 18px;
    flex-direction: column;
    align-items: stretch;
  }
  body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-support-cta__button {
    justify-content: center;
  }
  body:has(.listo-header--guest-account) .listo-faq-page .listo-faq-back-to-top {
    bottom: 88px;
    right: 14px;
  }
}


/* ========================================================================
   NEXT1226 — Guest Account page standard (all pages except Home, My
   Bookings and Inbox)
   One shared page geometry for: My Wallet, Favorites, Referral Center,
   Refunds, Edit Profile, Support and FAQ.
     - width:   1200px canvas (FAQ and Referral no longer differ)
     - header → title spacing: identical top padding on every page
     - title:   24px / 29px, weight 600 (20px / 25px on mobile)
     - title → one-liner: 0 gap (title row and copy have no margin/gap)
     - one-liner: 14px / 21px, #607080 (13px / 19px on mobile)
     - title block → content: 22px (18px on mobile)
   Presentation only. Host mode and page behaviour are unchanged.
   ======================================================================== */
body:has(.listo-header--guest-account) .listo-main > .listo-container:is(.listo-wallet-page, .listo-favorites-page, .listo-referral-center, .listo-refunds-page, .listo-guest-edit-profile, .listo-faq-page, .listo-support-page) {
  width: 100%;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  box-sizing: border-box;
}
@media (min-width: 901px) {
  body:has(.listo-header--guest-account) .listo-main > .listo-container:is(.listo-wallet-page, .listo-favorites-page, .listo-referral-center, .listo-refunds-page, .listo-guest-edit-profile, .listo-faq-page, .listo-support-page):not(.is-support-chat-active) {
    padding-top: var(--section-pad) !important;
  }
}

/* Title row: no icon, no gap, one fixed distance to the content below. */
body:has(.listo-header--guest-account) .listo-main > .listo-container:is(.listo-wallet-page, .listo-favorites-page, .listo-referral-center, .listo-refunds-page, .listo-guest-edit-profile, .listo-faq-page, .listo-support-page) .listo-page-title-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
  min-height: 0 !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
}
body:has(.listo-header--guest-account) .listo-main > .listo-container:is(.listo-wallet-page, .listo-favorites-page, .listo-referral-center, .listo-refunds-page, .listo-guest-edit-profile, .listo-faq-page, .listo-support-page) .listo-page-title-row .listo-page-title__icon {
  display: none !important;
}
body:has(.listo-header--guest-account) .listo-main > .listo-container:is(.listo-wallet-page, .listo-favorites-page, .listo-referral-center, .listo-refunds-page, .listo-guest-edit-profile, .listo-faq-page, .listo-support-page) .listo-page-title-row > div {
  display: block !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Title */
body:has(.listo-header--guest-account) .listo-main > .listo-container:is(.listo-wallet-page, .listo-favorites-page, .listo-referral-center, .listo-refunds-page, .listo-guest-edit-profile, .listo-faq-page, .listo-support-page) .listo-page-title-row h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 24px !important;
  line-height: 29px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  color: #172631;
}

/* One-liner directly under the title */
body:has(.listo-header--guest-account) .listo-main > .listo-container:is(.listo-wallet-page, .listo-favorites-page, .listo-referral-center, .listo-refunds-page, .listo-guest-edit-profile, .listo-faq-page, .listo-support-page) .listo-page-title-row p {
  max-width: 760px;
  margin: 0 !important;
  padding: 0 !important;
  color: #607080;
  font-size: 14px !important;
  line-height: 21px !important;
  font-weight: 400;
}

/* Referral hero wrapper must not add its own spacing around the title. */
body:has(.listo-header--guest-account) .listo-referral-center .listo-referral-hero {
  margin-bottom: 0 !important;
}

/* Host mode never shows the new Referral one-liner. */
body[data-listo-mode="host"] .listo-referral-center__title-copy p { display: none; }

@media (max-width: 700px) {
  body:has(.listo-header--guest-account) .listo-main > .listo-container:is(.listo-wallet-page, .listo-favorites-page, .listo-referral-center, .listo-refunds-page, .listo-guest-edit-profile, .listo-faq-page, .listo-support-page) .listo-page-title-row {
    margin-bottom: 18px !important;
  }
  body:has(.listo-header--guest-account) .listo-main > .listo-container:is(.listo-wallet-page, .listo-favorites-page, .listo-referral-center, .listo-refunds-page, .listo-guest-edit-profile, .listo-faq-page, .listo-support-page) .listo-page-title-row h1 {
    font-size: 20px !important;
    line-height: 25px !important;
  }
  body:has(.listo-header--guest-account) .listo-main > .listo-container:is(.listo-wallet-page, .listo-favorites-page, .listo-referral-center, .listo-refunds-page, .listo-guest-edit-profile, .listo-faq-page, .listo-support-page) .listo-page-title-row p {
    max-width: none;
    font-size: 13px !important;
    line-height: 19px !important;
  }
}


/* ========================================================================
   NEXT1227 — Guest Support title/description → content spacing
   Keep the Support title and one-line description visually together, then
   add a deliberate 18px separation before the primary Support state surface.
   Guest Support only; Host Support and other Guest Account pages unchanged.
   ======================================================================== */
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] > .listo-page-title-row.listo-support-page__title-row .listo-support-page__description {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  padding-top: 0 !important;
}

@media (max-width:700px) {
  body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] > .listo-page-title-row.listo-support-page__title-row .listo-support-page__description {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }
}

/* ========================================================================
   NEXT1228 — Guest Inbox 2.0
   Guest-only workspace presentation. Messaging behavior and Host Inbox
   presentation remain on their existing selectors/branches.
   ======================================================================== */
body:has(.listo-header--guest-account) .listo-main > .listo-inbox-page--guest {
  width: 100%;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-top: var(--section-pad) !important;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 70px);
  min-height: 0;
  box-sizing: border-box;
}
body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox-page__header {
  flex: 0 0 auto;
  margin: 0 0 20px !important;
  padding: 0 !important;
}
body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox-page__header h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 24px !important;
  line-height: 29px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  color: #172631;
}
body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox-page__description {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 760px;
  color: #607080;
  font-size: 14px !important;
  line-height: 21px !important;
}
body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0 !important;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
  border: 1px solid #E2E8ED;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(24,39,75,.04);
  background: #fff;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__list {
  background: #FBFCFE;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__list-head {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 12px 16px 6px;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__list-label {
  color: #6D7C88;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__vertical-switcher {
  display: flex;
  gap: 4px;
  padding: 14px 14px 8px;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__vertical-tab {
  flex: 1 1 0;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #687781;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__vertical-tab:hover { background: #F5F8FA; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__vertical-tab.is-active[data-inbox-vertical="staycation"] {
  background: #EAF5FF;
  border-color: #D4EAFE;
  color: #1976D2;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__vertical-tab.is-active[data-inbox-vertical="parking"] {
  background: #FFF7E0;
  border-color: #FFE3A0;
  color: #946600;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__vertical-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  box-sizing: border-box;
  background: #E53935;
  color: #fff;
  font-size: 9.5px;
  line-height: 1;
  font-weight: 800;
  vertical-align: middle;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__vertical-tab-badge[hidden] {
  display: none;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__toolbar {
  padding: 8px 14px 10px;
  border-bottom: 1px solid #EDF1F4;
  background: #fff;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid #DCE4EA;
  border-radius: 9px;
  background: #fff;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__search {
  width: 100%;
  min-height: 34px;
  padding: 7px 0;
  border: 0;
  box-shadow: none;
  outline: none;
  background: transparent;
  font-size: 12.5px;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__search-icon { width: 16px; height: 16px; color: #8996A0; flex: 0 0 16px; }
/* NEXT1229 — Guest Inbox search alignment: the icon participates in the flex row; it must not remain absolutely positioned over the placeholder text. */
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__search-icon { position: static; margin: 0; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__filters { display: flex; gap: 5px; margin-top: 7px; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__filter {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #73808A;
  font-size: 11px;
  font-weight: 700;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__filter.is-active { background: #EAF5FF; color: #1976D2; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-thread-item {
  padding: 12px 14px;
  gap: 10px;
  border-left-width: 3px;
  border-bottom-color: #EDF1F4;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-thread-item:hover { background: #F7FAFC; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-thread-item.is-active {
  background: #EAF5FF;
  border-left-color: #2196F3;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-thread-item__photo {
  width: 42px;
  height: 42px;
  background: #EAF5FF;
  color: #1976D2;
  font-size: 15px;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-thread-item__title { font-size: 13.5px; font-weight: 650; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-thread-item.is-unread .listo-inbox-thread-item__title { font-weight: 800; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-thread-item__time { font-size: 10.5px; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-thread-item__listing-tag {
  margin: 3px 0 4px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #63717D;
  font-size: 11px;
  font-weight: 600;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-thread-item__listing-tag svg { color: #8B98A2; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-thread-item__stay,
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-thread-item__context,
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-thread-item__mobile-subline,
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-chat-id { display: none !important; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-thread-item__preview {
  display: block;
  font-size: 12px;
  color: #71808B;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-thread-item__vertical {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-vertical-badge {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 8.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .03em;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-vertical-badge--staycation { background: #EAF5FF; color: #1976D2; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-vertical-badge--parking { background: #FFF7E0; color: #946600; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-thread-item__new {
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: #2196F3;
  font-size: 0;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__thread-header {
  min-height: 68px;
  padding: 12px 18px;
  box-shadow: none;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__thread-header-avatar {
  width: 40px;
  height: 40px;
  background: #EAF5FF;
  color: #1976D2;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__thread-header-name { font-size: 14.5px; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__thread-header-meta { display: none !important; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__thread-header-subrow { margin-top: 2px; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__thread-header-subrow .listo-caption { color: #687781; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-back-btn { color: #2196F3; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-back-btn:hover,
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox-back-btn:focus-visible { background: #EAF5FF; color: #1976D2; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__composer {
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #EDF1F4;
  background: #fff;
}
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__composer textarea:focus { border-color: #8EC8F8; box-shadow: 0 0 0 3px rgba(33,150,243,.10); }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__composer-icon-btn:hover { background: #F3F8FC; color: #1976D2; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__composer-send { background: #2196F3; box-shadow: 0 2px 6px rgba(33,150,243,.25); }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__composer-send:hover { background: #1976D2; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__thread-empty svg { width: 42px; height: 42px; opacity: .28; }
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__empty-list,
body:has(.listo-header--guest-account) .listo-inbox--guest .listo-inbox__filter-empty {
  padding: 28px 18px;
  text-align: center;
  color: #71808B;
}

@media (max-width: 900px) {
  body:has(.listo-header--guest-account) .listo-inbox-page--guest {
    width: 100% !important;
    max-width: none !important;
    padding-top: 20px !important;
    height: calc(100dvh - 60px);
  }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox-page__header {
    margin: 0 12px 18px !important;
  }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox-page__header h1 {
    font-size: 20px !important;
    line-height: 25px !important;
  }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox-page__description {
    font-size: 13px !important;
    line-height: 19px !important;
  }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest .listo-inbox__thread-header { min-height: 62px; padding: 9px 12px; }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest .listo-inbox__list { padding-bottom: 0; }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest .listo-inbox-thread-item { min-height: 76px; padding: 13px 14px; }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest .listo-inbox__messages { padding: 14px 12px 8px; }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest .listo-inbox__thread-header .listo-caption { max-width: calc(100vw - 120px); }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest .listo-inbox__composer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest:has(.listo-inbox--thread-open) .listo-inbox-page__header { display: none !important; }
}

@media (max-width: 480px) {
  body:has(.listo-header--guest-account) .listo-inbox-page--guest { padding-top: 20px !important; }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox-page__header { margin-left: 12px !important; margin-right: 12px !important; }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest .listo-inbox__vertical-switcher { padding-left: 12px; padding-right: 12px; }
}


/* ========================================================================
   NEXT1231 — Guest Inbox title separator removal
   The Guest Inbox uses the same title/description spacing as the Guest
   Account pages, but it does not use the legacy header divider line.
   Guest-only; Host Inbox title treatment is unchanged.
   ======================================================================== */
body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox-page__header,
body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox-page__header::before,
body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox-page__header::after {
  border-bottom: 0 !important;
  box-shadow: none !important;
}


/* ========================================================================
   NEXT1232 — Guest Support: no divider between title and description
   Guest Support only. Strips any border, shadow, gradient, underline or
   pseudo-element line from the title block (title row, title copy, h1 and
   the one-line description) so nothing can draw a rule between them.
   ======================================================================== */
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] .listo-support-page__title-row,
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] .listo-support-page__title-copy,
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] .listo-support-page__title-row h1,
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] .listo-support-page__title-row p.listo-support-page__description {
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  outline: 0 !important;
  text-decoration: none !important;
}
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] .listo-support-page__title-row::before,
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] .listo-support-page__title-row::after,
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] .listo-support-page__title-copy::before,
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] .listo-support-page__title-copy::after,
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] .listo-support-page__title-row h1::before,
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] .listo-support-page__title-row h1::after,
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] .listo-support-page__description::before,
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] .listo-support-page__description::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-support-page[data-role="guest"] .listo-support-page__title-row hr {
  display: none !important;
}


/* ========================================================================
   NEXT1233 — Guest Inbox title divider (root cause)
   The line sat on the <h1 class="listo-inbox__heading"> itself: the base
   rule `.listo-inbox__heading { border-bottom:1px solid var(--border) }`
   (the old in-panel Inbox heading) was never removed for Guest. NEXT1231
   only cleared the wrapper (.listo-inbox-page__header), not the h1.
   Guest Inbox only; Host Inbox and other pages unchanged.
   ======================================================================== */
body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox-page__header .listo-inbox__heading,
body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox-page__header h1 {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* ========================================================================
   NEXT1234 — Guest Bookings UI/UX 2.0
   Presentation-only layer over the existing canonical booking state.
   ======================================================================== */
.listo-guest-bookings-workspace {
  width: min(1200px, calc(100% - 48px)) !important;
  max-width: 1200px !important;
  padding-top: 20px !important;
  padding-bottom: 56px;
}
.listo-guest-bookings-page__title-row {
  align-items: flex-start;
  gap: 0;
  margin-bottom: 20px;
}
.listo-guest-bookings-page__title-copy {
  min-width: 0;
}
.listo-guest-bookings-page__title-copy h1 {
  margin: 0 !important;
  color: #172631;
  font-size: 24px !important;
  line-height: 29px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}
.listo-guest-bookings-page__title-copy p {
  margin: 5px 0 0 !important;
  color: #607080;
  font-size: 14px;
  line-height: 21px;
}
.listo-guest-bookings-workspace .listo-my-trips-sections {
  gap: 28px;
  margin-top: 0;
}
.listo-guest-bookings-workspace .listo-trip-section {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.listo-guest-bookings-workspace .listo-trip-section__header {
  padding: 0 0 9px;
  border-bottom: 1px solid #edf1f4;
  background: transparent;
}
.listo-guest-bookings-workspace .listo-trip-section__header h2 {
  margin: 0;
  color: #263238;
  font-size: 18px;
  line-height: 24px;
  font-weight: 650;
  letter-spacing: normal;
}
.listo-guest-bookings-workspace .listo-trip-section__count {
  min-width: 27px;
  height: 27px;
  padding: 0 8px;
  border: 1px solid #e2e8ed;
  border-radius: 999px;
  background: #f7f9fa;
  color: #607080;
  font-size: 12px;
  font-weight: 750;
}
.listo-guest-bookings-workspace .listo-trip-section--attention .listo-trip-section__header {
  border-bottom-color: rgba(33,150,243,.18);
}
.listo-guest-bookings-workspace .listo-trip-section--attention .listo-trip-section__header h2 {
  color: #175cd3;
}
.listo-guest-bookings-workspace .listo-trip-section--secondary .listo-trip-section__header h2 {
  color: #56636d;
}
.listo-guest-bookings-workspace .listo-trip-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px 0 0;
}
.listo-guest-bookings-workspace .listo-trip-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e2e8ed;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,.035);
}
.listo-guest-bookings-workspace .listo-trip-card:hover {
  border-color: #d5e0e8;
  box-shadow: 0 4px 12px rgba(15,23,42,.055);
}
.listo-guest-bookings-workspace .listo-trip-card--pending_payment {
  border-color: rgba(33,150,243,.22);
  background: #fbfdff;
}
.listo-guest-bookings-workspace .listo-trip-card--pending_host_approval {
  background: #fff;
}
.listo-guest-bookings-workspace .listo-trip-card--past,
.listo-guest-bookings-workspace .listo-trip-card--cancelled {
  box-shadow: none;
}
.listo-guest-bookings-workspace .listo-trip-card__photo {
  width: 132px;
  height: 112px;
  border-radius: 11px;
}
.listo-guest-bookings-workspace .listo-trip-card__title {
  color: #263238;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.32;
}
.listo-guest-bookings-workspace .listo-trip-card__dates {
  margin-top: 3px;
  color: #607080;
  font-size: 13px;
}
.listo-guest-bookings-workspace .listo-trip-card__price {
  color: #263238;
  font-size: 15px;
  font-weight: 750;
}
.listo-guest-bookings-workspace .listo-trip-card__payment-state {
  color: #1976d2;
  font-size: 12px;
  font-weight: 700;
}
.listo-guest-bookings-workspace .listo-trip-card__reference {
  color: #87939c;
  font-size: 11px;
}
.listo-guest-bookings-workspace .listo-trip-card__kicker {
  margin-bottom: 6px;
  color: #7a8790;
  font-size: 10px;
  letter-spacing: .07em;
}
.listo-guest-bookings-workspace .listo-trip-card__kicker--attention {
  color: #175cd3;
}
.listo-guest-bookings-workspace .listo-trip-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
}
.listo-guest-bookings-workspace .listo-trip-card__actions > .listo-btn {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}
.listo-guest-bookings-workspace .listo-trip-card__payment-window--countdown {
  border-color: rgba(33,150,243,.22);
  background: #eef7ff;
  color: #175cd3;
}
.listo-guest-bookings-workspace .listo-trip-card__payment-window--submitted {
  color: #607080;
}
.listo-guest-bookings-workspace .listo-my-trips-empty-cta {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #e2e8ed;
  border-radius: 14px;
  background: #fff;
}
.listo-guest-bookings-workspace .listo-my-trips-empty-cta .listo-btn {
  margin-left: auto;
}
/* Keep Parking on the product's amber context color. */
.listo-guest-bookings-context-pill--parking.is-active {
  background: #FFB300;
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,179,0,.22);
}
.listo-guest-bookings-context-pill--parking.is-active:hover {
  background: #FFB300;
  color: #fff;
}
.listo-guest-bookings-context-pill--parking:hover {
  background: #fff8e1;
  color: #a66a00;
}

@media (max-width: 980px) {
  .listo-guest-bookings-workspace .listo-trip-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .listo-guest-bookings-workspace {
    width: 100% !important;
    max-width: none !important;
    padding-top: 20px !important;
    padding-bottom: 124px !important;
  }
  .listo-guest-bookings-page__title-row {
    margin-bottom: 20px !important;
  }
  .listo-guest-bookings-page__title-copy h1 {
    font-size: 22px !important;
    line-height: 27px !important;
  }
  .listo-guest-bookings-page__title-copy p {
    margin-top: 5px !important;
    font-size: 13px;
    line-height: 19px;
  }
  .listo-guest-bookings-workspace .listo-my-trips-sections {
    gap: 24px;
  }
  .listo-guest-bookings-workspace .listo-trip-section__header {
    padding-bottom: 8px;
  }
  .listo-guest-bookings-workspace .listo-trip-section__header h2 {
    font-size: 17px;
    line-height: 22px;
  }
  .listo-guest-bookings-workspace .listo-trip-grid {
    padding-top: 10px;
    gap: 10px;
  }
  .listo-guest-bookings-workspace .listo-trip-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 11px;
    padding: 10px;
    border-radius: 14px;
  }
  .listo-guest-bookings-workspace .listo-trip-card__photo {
    width: 88px;
    height: 82px;
    border-radius: 10px;
  }
  .listo-guest-bookings-workspace .listo-trip-card__title {
    font-size: 14px;
  }
  .listo-guest-bookings-workspace .listo-trip-card__dates {
    font-size: 12px;
  }
  .listo-guest-bookings-workspace .listo-trip-card__price {
    font-size: 14px;
  }
  .listo-guest-bookings-workspace .listo-trip-card__actions {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-top: 10px;
    gap: 6px;
  }
  .listo-guest-bookings-workspace .listo-trip-card__actions > .listo-btn {
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
  }
  .listo-guest-bookings-workspace .listo-trip-card__actions > .listo-btn--primary {
    flex-basis: 100%;
  }
  .listo-guest-bookings-workspace .listo-trip-card__payment-window--countdown {
    grid-column: 1 / -1;
  }
  .listo-guest-bookings-workspace .listo-trip-card__reference {
    font-size: 10.5px;
  }
  .listo-guest-bookings-workspace .listo-my-trips-empty-cta {
    margin-top: 20px;
    padding: 16px;
  }
  .listo-guest-bookings-workspace .listo-my-trips-empty-cta .listo-btn {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
}
@media (max-width: 420px) {
  .listo-guest-bookings-workspace .listo-trip-card {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 9px;
    padding: 9px;
  }
  .listo-guest-bookings-workspace .listo-trip-card__photo {
    width: 76px;
    height: 74px;
  }
  .listo-guest-bookings-workspace .listo-trip-card__title {
    font-size: 13px;
  }
  .listo-guest-bookings-workspace .listo-trip-card__dates {
    font-size: 11px;
  }
  .listo-guest-bookings-workspace .listo-trip-card__price {
    font-size: 13px;
  }
  .listo-guest-bookings-workspace .listo-trip-card__actions > .listo-btn {
    padding: 7px 8px;
    font-size: 11px;
  }
}

/* ========================================================================
   NEXT1235 — Unified Guest Bookings tabs
   Staycation and Parking are service tabs inside one Guest Bookings workspace.
   ======================================================================== */
.listo-guest-bookings-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: auto;
  margin: 0 0 24px;
  padding: 3px;
  border: 1px solid #e1e7eb;
  border-radius: 12px;
  background: #f7f9fa;
}
.listo-guest-bookings-tab {
  appearance: none;
  border: 0;
  min-height: 38px;
  padding: 7px 15px;
  border-radius: 9px;
  background: transparent;
  color: #66737d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.listo-guest-bookings-tab:hover { color: #263238; }
.listo-guest-bookings-tab.is-active {
  background: #fff;
  color: #172631;
  box-shadow: 0 1px 4px rgba(15,23,42,.09);
}
.listo-guest-bookings-tab[data-bookings-tab="staycation"].is-active { color: #1976d2; }
.listo-guest-bookings-tab[data-bookings-tab="parking"].is-active { color: #a96800; }
.listo-guest-bookings-tab__update {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-left: -2px;
  border-radius: 999px;
  background: #E53935;
  box-shadow: 0 0 0 2px #f7f9fa;
}
.listo-guest-bookings-tab.is-active .listo-guest-bookings-tab__update {
  box-shadow: 0 0 0 2px #fff;
}
.listo-guest-bookings-tab__update[hidden] { display: none !important; }

.listo-guest-bookings-tab__count {
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  background: #eef2f4;
  color: #68757e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.listo-guest-bookings-tab.is-active[data-bookings-tab="staycation"] .listo-guest-bookings-tab__count {
  background: #eaf4ff;
  color: #1976d2;
}
.listo-guest-bookings-tab.is-active[data-bookings-tab="parking"] .listo-guest-bookings-tab__count {
  background: #fff4df;
  color: #a96800;
}
.listo-guest-bookings-tab-panel[hidden] { display: none !important; }
.listo-guest-bookings-tab-panel { min-width: 0; }
.listo-guest-bookings-workspace.is-tab-loading {
  pointer-events: none;
  opacity: .72;
  transition: opacity .12s ease;
}
.listo-guest-bookings-tab:disabled { cursor: wait; }

/* Bookings now follows the same Guest Account title rhythm as Wallet,
   Favorites, Refunds, Edit Profile, Support, and FAQ. */
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-guest-bookings-workspace .listo-page-title-row {
  align-items: flex-start !important;
  gap: 0 !important;
  min-height: 0 !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
}
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-guest-bookings-workspace .listo-page-title-row > div {
  display: block !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-guest-bookings-workspace .listo-page-title-row h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 24px !important;
  line-height: 29px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  color: #172631;
}
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-guest-bookings-workspace .listo-page-title-row p {
  max-width: 760px;
  margin: 0 !important;
  padding: 0 !important;
  color: #607080;
  font-size: 14px !important;
  line-height: 21px !important;
  font-weight: 400;
}

@media (max-width: 700px) {
  .listo-guest-bookings-tabs {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
  }
  .listo-guest-bookings-tab {
    flex: 1 1 0;
    min-height: 38px;
    padding: 7px 10px;
  }
  body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-guest-bookings-workspace .listo-page-title-row {
    margin-bottom: 18px !important;
  }
  body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-guest-bookings-workspace .listo-page-title-row h1 {
    font-size: 20px !important;
    line-height: 25px !important;
  }
  body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-guest-bookings-workspace .listo-page-title-row p {
    max-width: none;
    font-size: 13px !important;
    line-height: 19px !important;
  }
}

/* ========================================================================
   NEXT1237 — Guest Bookings title spacing + compact empty-state CTAs
   Match the established Guest Account geometry and button sizing.
   ======================================================================== */
body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-guest-bookings-workspace {
  padding-top: 56px !important;
}

.listo-guest-bookings-workspace .listo-my-trips-empty-cta .listo-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 9px 18px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 650 !important;
  box-sizing: border-box;
  white-space: nowrap;
}

@media (max-width: 700px) {
  body:has(.listo-header--guest-account) .listo-main > .listo-container.listo-guest-bookings-workspace {
    padding-top: 56px !important;
  }

  .listo-guest-bookings-workspace .listo-my-trips-empty-cta .listo-btn {
    width: auto !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 9px 16px !important;
    font-size: 14px !important;
  }
}

/* ========================================================================
   NEXT1238 — Unified Guest Account header-to-title spacing
   All Guest Account pages use a consistent 56px distance from the bottom
   of the site header to the page content/title. The Guest Home page is not
   part of the Guest Account template set and is intentionally excluded.
   This is presentation-only; page content, routing and behavior are unchanged.
   ======================================================================== */
body:has(.listo-header--guest-account) .listo-main > .listo-container {
  padding-top: 56px !important;
}

@media (max-width: 700px) {
  body:has(.listo-header--guest-account) .listo-main > .listo-container {
    padding-top: 56px !important;
  }
}

/* ========================================================================
   NEXT1239 — Guest Account mobile geometry normalization
   Applies to Guest Account pages only (Home excluded): Wallet, Favorites,
   Referral Center, Refunds, Edit Profile, Support, FAQ, Bookings and Inbox.
   Mobile uses one shared page canvas, 56px header-to-title spacing, and the
   same 20px / 25px page-title treatment. Existing page-specific content and
   chat/list behavior are preserved.
   ======================================================================== */
@media (max-width: 900px) {
  body:has(.listo-header--guest-account) .listo-main > .listo-container:is(
    .listo-wallet-page,
    .listo-favorites-page,
    .listo-referral-center,
    .listo-refunds-page,
    .listo-guest-edit-profile,
    .listo-faq-page,
    .listo-support-page,
    .listo-guest-bookings-workspace
  ) {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    padding-top: 56px !important;
  }

  body:has(.listo-header--guest-account) .listo-main > .listo-container:is(
    .listo-wallet-page,
    .listo-favorites-page,
    .listo-referral-center,
    .listo-refunds-page,
    .listo-guest-edit-profile,
    .listo-faq-page,
    .listo-support-page,
    .listo-guest-bookings-workspace
  ) .listo-page-title-row {
    align-items: flex-start !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  body:has(.listo-header--guest-account) .listo-main > .listo-container:is(
    .listo-wallet-page,
    .listo-favorites-page,
    .listo-referral-center,
    .listo-refunds-page,
    .listo-guest-edit-profile,
    .listo-faq-page,
    .listo-support-page,
    .listo-guest-bookings-workspace
  ) .listo-page-title-row h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 25px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
  }

  body:has(.listo-header--guest-account) .listo-main > .listo-container:is(
    .listo-wallet-page,
    .listo-favorites-page,
    .listo-referral-center,
    .listo-refunds-page,
    .listo-guest-edit-profile,
    .listo-faq-page,
    .listo-support-page,
    .listo-guest-bookings-workspace
  ) .listo-page-title-row > div {
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:has(.listo-header--guest-account) .listo-main > .listo-container:is(
    .listo-wallet-page,
    .listo-favorites-page,
    .listo-referral-center,
    .listo-refunds-page,
    .listo-guest-edit-profile,
    .listo-faq-page,
    .listo-support-page,
    .listo-guest-bookings-workspace
  ) .listo-page-title-row p {
    font-size: 13px !important;
    line-height: 19px !important;
  }

  /* Guest Inbox uses a dedicated page wrapper rather than .listo-container.
     Bring it onto the same canvas and header-to-title rhythm. */
  body:has(.listo-header--guest-account) .listo-main > .listo-inbox-page--guest {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    padding-top: 56px !important;
  }

  body:has(.listo-header--guest-account) .listo-main > .listo-inbox-page--guest .listo-inbox-page__header {
    margin: 0 0 18px !important;
  }

  body:has(.listo-header--guest-account) .listo-main > .listo-inbox-page--guest .listo-inbox-page__header h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 25px !important;
    font-weight: 600 !important;
  }

  body:has(.listo-header--guest-account) .listo-main > .listo-inbox-page--guest .listo-inbox-page__description {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 19px !important;
  }
}

/* ========================================================================
   NEXT1240 — Guest Account mobile Host-mode UI/UX parity
   ------------------------------------------------------------------------
   Aligns the mobile Guest Account shell with the established Host Account
   workspace language while keeping Guest-specific destinations and content.
   Guest Home is intentionally excluded.
   Presentation only: no routes, data, booking, payment, or interaction
   logic is changed.
   ======================================================================== */
@media (max-width: 900px) {
  /* Match the Host workspace canvas/gutter rhythm. The Guest Account
     title begins 20px below the site header on every Account page.
     Guest Home is excluded because it does not use the Guest Account
     header/shell. */
  body:has(.listo-header--guest-account) .listo-main {
    margin-left: 0 !important;
    padding-top: 20px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 104px !important;
  }

  body:has(.listo-header--guest-account) .listo-main > .listo-container:is(
    .listo-wallet-page,
    .listo-favorites-page,
    .listo-referral-center,
    .listo-refunds-page,
    .listo-guest-edit-profile,
    .listo-faq-page,
    .listo-support-page,
    .listo-guest-bookings-workspace
  ) {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 0 !important;
  }

  /* Guest Inbox uses a dedicated wrapper instead of .listo-container. */
  body:has(.listo-header--guest-account) .listo-main > .listo-inbox-page--guest {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 0 !important;
  }

  /* Host Account title treatment: 22px / 27px with a compact header block. */
  body:has(.listo-header--guest-account) .listo-main > .listo-container:is(
    .listo-wallet-page,
    .listo-favorites-page,
    .listo-referral-center,
    .listo-refunds-page,
    .listo-guest-edit-profile,
    .listo-faq-page,
    .listo-support-page,
    .listo-guest-bookings-workspace
  ) .listo-page-title-row {
    min-height: 55px !important;
    margin: 0 0 16px !important;
    padding: 0 2px !important;
    gap: 10px !important;
  }

  body:has(.listo-header--guest-account) .listo-main > .listo-container:is(
    .listo-wallet-page,
    .listo-favorites-page,
    .listo-referral-center,
    .listo-refunds-page,
    .listo-guest-edit-profile,
    .listo-faq-page,
    .listo-support-page,
    .listo-guest-bookings-workspace
  ) .listo-page-title-row h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: 27px !important;
    min-height: 27px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
  }

  body:has(.listo-header--guest-account) .listo-main > .listo-container:is(
    .listo-wallet-page,
    .listo-favorites-page,
    .listo-referral-center,
    .listo-refunds-page,
    .listo-guest-edit-profile,
    .listo-faq-page,
    .listo-support-page,
    .listo-guest-bookings-workspace
  ) .listo-page-title-row p {
    margin-top: 4px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  /* Inbox title block follows the same Host mobile type scale. */
  body:has(.listo-header--guest-account) .listo-main > .listo-inbox-page--guest .listo-inbox-page__header {
    min-height: 55px !important;
    margin: 0 0 16px !important;
    padding: 0 2px !important;
  }

  body:has(.listo-header--guest-account) .listo-main > .listo-inbox-page--guest .listo-inbox-page__header h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: 27px !important;
    min-height: 27px !important;
    font-weight: 600 !important;
  }

  body:has(.listo-header--guest-account) .listo-main > .listo-inbox-page--guest .listo-inbox-page__description {
    margin-top: 4px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  /* Guest bottom dock: same Host geometry, surface, active pill, and icon
     scale. Guest keeps four destinations because it has no Calendar item. */
  .listo-guest-floating-dock {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    padding: 6px !important;
    border: 1px solid rgba(214,223,230,.95) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 12px 34px rgba(20,35,48,.14), 0 2px 8px rgba(20,35,48,.06) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  .listo-guest-floating-dock__active-bg {
    top: 6px !important;
    bottom: 6px !important;
    left: 6px !important;
    width: calc((100% - 12px) / 4) !important;
    border-radius: 13px !important;
    background: #EAF5FF !important;
    transform: translateX(calc(var(--guest-dock-active-index, 0) * 100%)) !important;
    transition: transform .30s cubic-bezier(.22,.75,.25,1) !important;
  }

  .listo-guest-floating-dock[data-dock-active="home"] { --guest-dock-active-index: 0; }
  .listo-guest-floating-dock[data-dock-active="bookings"] { --guest-dock-active-index: 1; }
  .listo-guest-floating-dock[data-dock-active="inbox"] { --guest-dock-active-index: 2; }
  .listo-guest-floating-dock[data-dock-active="more"] { --guest-dock-active-index: 3; }

  .listo-guest-floating-dock > a,
  .listo-guest-floating-dock > button {
    position: relative !important;
    z-index: 3 !important;
    min-height: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #687781 !important;
    font-size: 9px !important;
    font-weight: 750 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .listo-guest-floating-dock > a:hover,
  .listo-guest-floating-dock > button:hover,
  .listo-guest-floating-dock > a.is-active,
  .listo-guest-floating-dock > button.is-active {
    background: transparent !important;
  }

  .listo-guest-floating-dock svg {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    stroke-width: 2 !important;
  }

  .listo-guest-floating-dock > a.is-active,
  .listo-guest-floating-dock > button.is-active {
    color: #145EA8 !important;
  }

  /* Host-style More sheet. */
  .listo-guest-floating__more-panel {
    left: 12px !important;
    right: 12px !important;
    bottom: 88px !important;
    transform: translateY(10px) !important;
    width: auto !important;
    padding: 13px !important;
    border: 1px solid #DCE4EA !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 18px 45px rgba(20,35,48,.18), 0 3px 12px rgba(20,35,48,.07) !important;
  }

  .listo-guest-floating-shell.is-more-open .listo-guest-floating__more-panel {
    transform: translateY(0) !important;
  }

  .listo-guest-floating__more-head {
    padding: 2px 3px 12px !important;
    border-bottom: 1px solid #EDF1F4 !important;
  }

  .listo-guest-floating__more-head span {
    font-size: 8px !important;
    font-weight: 850 !important;
    letter-spacing: .11em !important;
    color: #87939C !important;
  }

  .listo-guest-floating__more-head strong {
    margin-top: 3px !important;
    font-size: 16px !important;
    color: #17232D !important;
  }

  .listo-guest-floating__more-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 7px !important;
    padding-top: 10px !important;
  }

  .listo-guest-floating__more-grid a {
    min-height: 54px !important;
    padding: 8px !important;
    border: 1px solid #E8EDF1 !important;
    border-radius: 13px !important;
    background: #fff !important;
  }

  .listo-guest-floating__more-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: #F1F6F9 !important;
    color: #4D6573 !important;
  }

  /* NEXT1248 — Persist the last selected item inside the Guest More tray.
     The selected tray item remains highlighted across navigation/reloads until
     another More destination is selected. */
  .listo-guest-floating__more-grid a.is-selected {
    border-color: #BFDDF3 !important;
    background: #F8FBFE !important;
  }
  .listo-guest-floating__more-grid a.is-selected .listo-guest-floating__more-icon {
    background: #EAF5FF !important;
    color: #145EA8 !important;
  }
  .listo-guest-floating__more-grid a.is-selected strong {
    color: #145EA8 !important;
  }
  .listo-guest-floating__more-grid a.is-selected b {
    color: #2196F3 !important;
  }

  /* Host account surfaces: subtle border, radius, and restrained shadow. */
  body:has(.listo-header--guest-account) .listo-main > .listo-container:is(
    .listo-wallet-page,
    .listo-favorites-page,
    .listo-referral-center,
    .listo-refunds-page,
    .listo-guest-edit-profile,
    .listo-faq-page,
    .listo-support-page,
    .listo-guest-bookings-workspace
  ) .listo-card,
  body:has(.listo-header--guest-account) .listo-main > .listo-container:is(
    .listo-wallet-page,
    .listo-favorites-page,
    .listo-referral-center,
    .listo-refunds-page,
    .listo-guest-edit-profile,
    .listo-faq-page,
    .listo-support-page,
    .listo-guest-bookings-workspace
  ) .listo-panel {
    border-color: #E2E9EF !important;
    box-shadow: 0 3px 14px rgba(24,39,75,.035) !important;
  }
}

@media (max-width: 380px) {
  .listo-guest-floating__more-grid { grid-template-columns: 1fr !important; }
}

/* ========================================================================
   NEXT1241 — Guest Account mobile header-to-title spacing
   All Guest Account mobile pages receive exactly 20px of vertical space
   between the bottom of the site header and the page title/content start.
   Guest Home remains excluded by the Guest Account header scope above.
   ======================================================================== */

/* ========================================================================
   NEXT1242 — Guest Account mobile floating dock parity with Host Mode.
   Guest keeps four destinations (Home, Bookings, Inbox, More), but uses the
   same Host dock geometry, active-state behavior, uniform Listo-blue icons,
   static pressed pill, and More-tray interaction model.
   Guest Inbox remains exempt from the dock where its focused mobile
   conversation workspace intentionally uses the full viewport.
   ======================================================================== */
@media (max-width: 800px){
  .listo-guest-floating-dock{
    left:12px!important;
    right:12px!important;
    bottom:12px!important;
    transform:none!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    padding:6px!important;
    border:1px solid rgba(214,223,230,.95)!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 12px 34px rgba(20,35,48,.14),0 2px 8px rgba(20,35,48,.06)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    isolation:isolate!important;
    pointer-events:auto!important;
  }
  .listo-guest-floating-dock__active-bg{
    z-index:0!important;
    top:6px!important;
    bottom:6px!important;
    left:6px!important;
    width:calc((100% - 12px)/4)!important;
    border-radius:13px!important;
    background:#EAF5FF!important;
    box-shadow:inset 0 2px 4px rgba(20,38,52,.16),inset 0 -1px 2px rgba(255,255,255,.34),0 1px 2px rgba(20,38,52,.06)!important;
    transform:translate3d(calc(var(--guest-dock-active-index,0) * 100%),0,0)!important;
    transition:none!important;
    animation:none!important;
    pointer-events:none!important;
  }
  .listo-guest-floating-dock>a,
  .listo-guest-floating-dock>button{
    position:relative!important;
    z-index:3!important;
    min-height:48px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border:0!important;
    border-radius:12px!important;
    background:transparent!important;
    color:#687781!important;
    text-decoration:none!important;
    font:inherit!important;
    font-size:9px!important;
    font-weight:750!important;
    cursor:pointer!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
    transition:none!important;
    animation:none!important;
  }
  .listo-guest-floating-dock>a:hover,
  .listo-guest-floating-dock>button:hover,
  .listo-guest-floating-dock>a.is-active,
  .listo-guest-floating-dock>button.is-active{
    background:transparent!important;
  }
  .listo-guest-floating-dock svg{
    width:20px!important;
    height:20px!important;
    display:block!important;
    stroke-width:1.8!important;
    color:#2196F3!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }
  .listo-guest-floating-dock>a.is-active,
  .listo-guest-floating-dock>button.is-active{
    color:#145EA8!important;
  }
  .listo-guest-floating__backdrop{
    z-index:10010!important;
  }
  .listo-guest-floating__more-panel{
    left:12px!important;
    right:12px!important;
    bottom:88px!important;
    transform:translateY(10px)!important;
    width:auto!important;
    padding:13px!important;
    border:1px solid #DCE4EA!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 18px 45px rgba(20,35,48,.18),0 3px 12px rgba(20,35,48,.07)!important;
    z-index:10030!important;
  }
  .listo-guest-floating-shell.is-more-open .listo-guest-floating__more-panel{
    transform:translateY(0)!important;
  }
  .listo-guest-floating__more-head{
    padding:2px 3px 12px!important;
    border-bottom:1px solid #EDF1F4!important;
  }
  .listo-guest-floating__more-head span{
    font-size:8px!important;
    font-weight:850!important;
    letter-spacing:.11em!important;
    color:#87939C!important;
  }
  .listo-guest-floating__more-head strong{
    margin-top:3px!important;
    font-size:16px!important;
    color:#17232D!important;
  }
  .listo-guest-floating__more-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    padding-top:10px!important;
  }
  .listo-guest-floating__more-grid a{
    min-height:54px!important;
    padding:8px!important;
    border:1px solid #E8EDF1!important;
    border-radius:13px!important;
    background:#fff!important;
  }
  .listo-guest-floating__more-icon{
    width:34px!important;
    height:34px!important;
    border-radius:10px!important;
    background:#F1F6F9!important;
    color:#4D6573!important;
  }
  .listo-guest-floating__more-icon svg{width:18px!important;height:18px!important;color:inherit!important}
}

@media (max-width:380px){
  .listo-guest-floating__more-grid{grid-template-columns:1fr!important}
}


/* ========================================================================
   NEXT1245 — Guest dock: reliable More sheet + Inbox dock clearance
   ======================================================================== */
@media (max-width: 900px) {
  /* The open More sheet and backdrop must win over any page-level rule. */
  body .listo-guest-floating-shell.is-more-open .listo-guest-floating__more-panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    z-index: 10030 !important;
  }
  body .listo-guest-floating-shell.is-more-open .listo-guest-floating__backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body .listo-guest-floating-shell { display: block !important; }
  body .listo-guest-floating-dock { z-index: 10020 !important; pointer-events: auto !important; }

  /* Guest Inbox: keep the conversation list clear of the floating dock. */
  body:has(.listo-header--guest-account) .listo-inbox-page--guest {
    height: calc(100dvh - 60px - 84px);
  }
  /* Open conversation: the composer needs the bottom edge, so the dock steps aside. */
  body:has(.listo-header--guest-account):has(.listo-inbox--thread-open) .listo-guest-floating-shell {
    display: none !important;
  }
}

/* ========================================================================
   NEXT1282 — Guest Inbox: remove stale dock clearance in focused chat
   ------------------------------------------------------------------------
   The Guest dock is hidden while a conversation is open so the composer can
   use the bottom edge. NEXT1245 reduced the entire Inbox page height by the
   dock clearance (84px) but did not restore that height when the dock was
   hidden. That reserved space could appear as an empty band above the mobile
   keyboard/composer. Focused chat now gets the full mobile workspace height.
   ======================================================================== */
@media (max-width:900px) {
  body:has(.listo-header--guest-account):has(.listo-inbox--thread-open) .listo-inbox-page--guest {
    height: calc(100dvh - 60px) !important;
  }
}

/* ========================================================================
   NEXT1250 — Restore Host SVG icon parity after More-tray persistence fix.
   Use the exact Host SVG image assets for the Guest dock and More tray.
   ======================================================================== */
@media (max-width:900px){
  .listo-guest-floating-dock__icon{
    width:22px!important;
    height:22px!important;
    display:grid!important;
    place-items:center!important;
    color:inherit!important;
    transition:transform .18s ease!important;
  }
  .listo-guest-floating-dock__icon img{
    width:22px!important;
    height:22px!important;
    max-width:22px!important;
    max-height:22px!important;
    display:block!important;
    object-fit:contain!important;
    filter:grayscale(1) saturate(.12) opacity(.68)!important;
    transition:filter .18s ease,opacity .18s ease,transform .18s ease!important;
  }
  .listo-guest-floating-dock > a.is-active .listo-guest-floating-dock__icon img,
  .listo-guest-floating-dock > button.is-active .listo-guest-floating-dock__icon img{
    filter:none!important;
    opacity:1!important;
    transform:translateY(-1px) scale(1.04)!important;
  }
  .listo-guest-floating-dock > a.is-active .listo-guest-floating-dock__icon,
  .listo-guest-floating-dock > button.is-active .listo-guest-floating-dock__icon{
    transform:translateY(-1px) scale(1.04)!important;
  }
  .listo-guest-floating__more-icon{
    width:40px!important;
    height:40px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:0!important;
    background:transparent!important;
    color:inherit!important;
    overflow:visible!important;
  }
  .listo-guest-floating__more-icon-img{
    width:40px!important;
    height:40px!important;
    max-width:40px!important;
    max-height:40px!important;
    display:block!important;
    object-fit:contain!important;
    border-radius:12px!important;
    filter:grayscale(1) saturate(.12) opacity(.68)!important;
    transition:filter .18s ease,opacity .18s ease,transform .18s ease!important;
  }
  .listo-guest-floating__more-grid a:hover .listo-guest-floating__more-icon-img{
    filter:none!important;
    opacity:1!important;
  }
}

/* ========================================================================
   NEXT1251 — Guest More tray: remove icon box containers
   Keep the Host SVG icons themselves, but remove all visible box/background
   treatment around each icon. The menu item card remains unchanged.
   ======================================================================== */
@media (max-width: 900px) {
  .listo-guest-floating__more-grid a .listo-guest-floating__more-icon,
  .listo-guest-floating__more-grid a.is-selected .listo-guest-floating__more-icon {
    width:40px!important;
    height:40px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:inherit!important;
  }
  .listo-guest-floating__more-grid a .listo-guest-floating__more-icon-img,
  .listo-guest-floating__more-grid a.is-selected .listo-guest-floating__more-icon-img {
    width:40px!important;
    height:40px!important;
    max-width:40px!important;
    max-height:40px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    object-fit:contain!important;
  }
}

/* ========================================================================
   NEXT1235 — Guest Home 2.0
   Authenticated homepage only. Public/non-logged-in homepage styles remain
   untouched. This is a calm account launchpad, not a dashboard.
   ======================================================================== */
.listo-guest-home {
  background: #fff;
  min-height: calc(100vh - 70px);
  padding: 34px 28px 96px;
}
.listo-guest-home__inner {
  width: min(1080px, 100%);
  margin: 0 auto;
}
.listo-guest-home__intro {
  padding: 10px 0 30px;
}
.listo-guest-home__intro h1 {
  margin: 0;
  color: #17232D;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -.018em;
  font-weight: 750;
}
.listo-guest-home__intro p {
  margin: 7px 0 0;
  color: #687781;
  font-size: 14px;
  line-height: 1.45;
}
.listo-guest-home__primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}
.listo-guest-home__primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #2196F3;
  border-radius: 9px;
  background: #2196F3;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 12px;
  line-height: 1;
  font-weight: 750;
}
.listo-guest-home__primary-action:hover { background: #1976D2; border-color: #1976D2; }
.listo-guest-home__primary-action--parking { background: #FFB300; border-color: #FFB300; color: #17232D !important; }
.listo-guest-home__primary-action--parking:hover { background: #F2A900; border-color: #F2A900; }
.listo-guest-home__section { margin-top: 28px; }
.listo-guest-home__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}
.listo-guest-home__section-head h2,
.listo-guest-home__discovery-heading h2 {
  margin: 0;
  color: #17232D;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: 750;
}
.listo-guest-home__section-head a {
  flex: 0 0 auto;
  color: #1677C8;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.listo-guest-home__eyebrow {
  display: block;
  color: #87939C;
  font-size: 8.5px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.listo-guest-home__attention {
  margin-top: 4px;
}
.listo-guest-home__attention-list {
  border-top: 1px solid #E8EDF1;
}
.listo-guest-home__attention-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #E8EDF1;
}
.listo-guest-home__attention-main { min-width: 0; }
.listo-guest-home__attention-main h3 {
  margin: 4px 0 2px;
  color: #17232D;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 750;
}
.listo-guest-home__attention-main strong {
  display: block;
  color: #253443;
  font-size: 12px;
  line-height: 1.35;
}
.listo-guest-home__attention-main p {
  margin: 4px 0 0;
  color: #71808B;
  font-size: 11px;
  line-height: 1.45;
}
.listo-guest-home__attention-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  min-width: 190px;
}
.listo-guest-home__attention-action small {
  order: 2;
  color: #87939C;
  font-size: 9px;
  text-align: right;
}
.listo-guest-home__countdown {
  order: 1;
  color: #17232D;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.listo-guest-home__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 35px;
  padding: 0 11px;
  border: 1px solid #D7E7F3;
  border-radius: 8px;
  background: #F5FAFE;
  color: #1677C8 !important;
  text-decoration: none !important;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}
.listo-guest-home__action:hover { border-color: #BFDDF3; background: #EAF5FF; }
.listo-guest-home__next-stay {
  display: grid;
  grid-template-columns: 170px minmax(0,1fr);
  min-height: 150px;
  overflow: hidden;
  border: 1px solid #E2E8ED;
  border-radius: 13px;
  background: #fff;
  color: inherit;
  text-decoration: none !important;
}
.listo-guest-home__next-image { background: #F3F6F8; min-height: 150px; }
.listo-guest-home__next-image img { width: 100%; height: 100%; min-height: 150px; display: block; object-fit: cover; }
.listo-guest-home__next-copy { padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.listo-guest-home__next-copy h3 { margin: 5px 0 4px; color: #17232D; font-size: 17px; line-height: 1.3; }
.listo-guest-home__next-copy p { margin: 0 0 9px; color: #687781; font-size: 12px; line-height: 1.4; }
.listo-guest-home__next-copy strong { color: #1976D2; font-size: 10.5px; }
.listo-guest-home__listing-row,
.listo-guest-home__parking-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 1px 1px 7px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.listo-guest-home__listing-item { flex: 0 0 245px; min-width: 0; scroll-snap-align: start; }
.listo-guest-home__listing-item--homes { display: contents; }
.listo-guest-home__listing-item--homes > div { flex: 0 0 245px; min-width: 0; scroll-snap-align: start; }
.listo-guest-home__listing-row--favorites .listo-guest-home__listing-item { flex-basis: 245px; }
.listo-guest-home__parking-item { flex: 0 0 245px; min-width: 0; scroll-snap-align: start; }
.listo-guest-home__parking-card .listo-parking-card { margin: 0; }
.listo-guest-home__wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 28px;
  padding: 15px 17px;
  border: 1px solid #DCEAF5;
  border-radius: 11px;
  background: #F8FBFE;
}
.listo-guest-home__wallet strong { display: block; margin-top: 4px; color: #17232D; font-size: 14px; }
.listo-guest-home__wallet p { margin: 3px 0 0; color: #71808B; font-size: 10.5px; line-height: 1.4; }
.listo-guest-home__discovery { margin-top: 40px; padding-top: 28px; border-top: 1px solid #EDF1F4; }
.listo-guest-home__discovery-heading { margin-bottom: 2px; }
.listo-guest-home__discovery-heading h2 { margin-top: 5px; }
.listo-guest-home__discovery-section { margin-top: 24px; }
.listo-guest-home .listo-card { box-shadow: none; }

@media (max-width: 900px) {
  .listo-guest-home { padding: 28px 22px 110px; }
  .listo-guest-home__inner { width: min(760px, 100%); }
}
@media (max-width: 600px) {
  .listo-guest-home { padding: 20px 16px 112px; }
  .listo-guest-home__intro { padding-top: 3px; padding-bottom: 25px; }
  .listo-guest-home__intro h1 { font-size: 21px; }
  .listo-guest-home__intro p { font-size: 13px; }
  .listo-guest-home__primary-actions { gap: 8px; margin-top: 15px; }
  .listo-guest-home__primary-action { min-height: 38px; padding: 0 14px; font-size: 11px; }
  .listo-guest-home__section { margin-top: 25px; }
  .listo-guest-home__section-head { margin-bottom: 10px; }
  .listo-guest-home__section-head h2, .listo-guest-home__discovery-heading h2 { font-size: 16px; }
  .listo-guest-home__section-head a { font-size: 10px; }
  .listo-guest-home__attention-item { grid-template-columns: 1fr; gap: 12px; padding: 14px 0; }
  .listo-guest-home__attention-action { align-items: flex-start; min-width: 0; }
  .listo-guest-home__attention-action small { text-align: left; }
  .listo-guest-home__next-stay { grid-template-columns: 104px minmax(0,1fr); min-height: 112px; border-radius: 11px; }
  .listo-guest-home__next-image, .listo-guest-home__next-image img { min-height: 112px; }
  .listo-guest-home__next-copy { padding: 13px 14px; }
  .listo-guest-home__next-copy h3 { font-size: 14px; }
  .listo-guest-home__next-copy p { font-size: 10.5px; }
  .listo-guest-home__listing-item,
  .listo-guest-home__listing-item--homes > div,
  .listo-guest-home__parking-item { flex-basis: 72vw; max-width: 290px; }
  .listo-guest-home__wallet { align-items: flex-start; flex-direction: column; padding: 14px; }
  .listo-guest-home__wallet .listo-guest-home__action { align-self: flex-start; }
  .listo-guest-home__discovery { margin-top: 34px; padding-top: 24px; }
}
@media (max-width: 360px) {
  .listo-guest-home { padding-left: 13px; padding-right: 13px; }
  .listo-guest-home__intro h1 { font-size: 19px; }
  .listo-guest-home__primary-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .listo-guest-home__primary-action { width: 100%; }
}

/* NEXT1236 — Guest Home Homes directory: six compact thumbnails in the initial desktop viewport. */
@media (min-width: 901px) {
  .listo-guest-home__listing-row--homes {
    gap: 12px;
    overflow-x: auto;
  }
  .listo-guest-home__listing-row--homes .listo-guest-home__listing-item--homes > div {
    flex: 0 0 calc((100% - 60px) / 6);
    min-width: 0;
  }
  .listo-guest-home__listing-row--homes .listo-card__image {
    margin-bottom: 7px;
  }
  .listo-guest-home__listing-row--homes .listo-card__save {
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
  }
  .listo-guest-home__listing-row--homes .listo-card__title {
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 1px;
  }
  .listo-guest-home__listing-row--homes .listo-card__price {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
  }
  .listo-guest-home__listing-row--homes .listo-card__rating-star {
    width: 10px;
    height: 10px;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .listo-guest-home__listing-row--homes .listo-guest-home__listing-item--homes > div {
    flex-basis: calc((100% - 48px) / 5);
  }
}

/* NEXT1235 — Home uses the Guest Account shell but has no conventional page-title row. */
@media (max-width: 900px) {
  body:has(.listo-header--guest-account) .listo-main > .listo-guest-home {
    margin-top: -20px !important;
  }
}

/* NEXT1238 — Logged-in Guest/Host account pages do not display the public site footer. */
body.listo-logged-in .listo-footer {
  display: none !important;
}

/* NEXT1239 — Guest Home 2.0 alignment refinement.
 * Match the established Guest Account page canvas, use the standard 56px
 * desktop / 20px mobile header-to-content spacing, and tighten the gap
 * between the primary actions and the Homes directory. */
@media (min-width: 901px) {
  body[data-listo-mode="guest"] .listo-guest-home {
    padding-top: 56px;
  }
  body[data-listo-mode="guest"] .listo-guest-home__inner {
    width: min(1200px, 100%);
  }
  body[data-listo-mode="guest"] .listo-guest-home__intro {
    padding-top: 0;
    padding-bottom: 12px;
  }
  body[data-listo-mode="guest"] .listo-guest-home__discovery {
    margin-top: 16px;
    padding-top: 20px;
  }
}

@media (max-width: 900px) {
  body[data-listo-mode="guest"] .listo-guest-home {
    padding-top: 20px;
  }
  body[data-listo-mode="guest"] .listo-guest-home__intro {
    padding-top: 0;
    padding-bottom: 10px;
  }
  body[data-listo-mode="guest"] .listo-guest-home__discovery {
    margin-top: 14px;
    padding-top: 18px;
  }
}

/* ========================================================================
   NEXT1252 — Guest Home 2.0: page width, header spacing, tighter hero gap
   - Same page canvas as the other Guest Account pages (the .listo-main
     gutter only; the extra Home-specific side padding is removed and the
     inner width follows the 1200px Guest canvas).
   - Greeting sits 56px (desktop) / 20px (mobile) below the header.
   - Less space between the Explore stays / Find parking buttons and the
     directory listing below.
   - Guest Home shows no site footer or footer divider line.
   ======================================================================== */
body[data-listo-mode="guest"] .listo-guest-home {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body[data-listo-mode="guest"] .listo-guest-home__inner {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body[data-listo-mode="guest"] .listo-guest-home__intro {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body[data-listo-mode="guest"] .listo-guest-home__discovery {
  margin-top: 24px !important;
  padding-top: 20px !important;
}
body[data-listo-mode="guest"] .listo-guest-home__discovery-section {
  margin-top: 16px !important;
}
@media (min-width: 901px) {
  body[data-listo-mode="guest"] .listo-guest-home {
    padding-top: 56px !important;
  }
}
@media (max-width: 900px) {
  /* .listo-main already supplies the 20px mobile header gap shared by all
     Guest Account pages, so Home adds none of its own. */
  body[data-listo-mode="guest"] .listo-guest-home {
    padding-top: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body:has(.listo-header--guest-account) .listo-main > #listo-marketplace-page-root > .listo-guest-home,
  body:has(.listo-header--guest-account) .listo-main > .listo-guest-home {
    margin-top: 0 !important;
  }
  body[data-listo-mode="guest"] .listo-guest-home__discovery {
    margin-top: 18px !important;
    padding-top: 16px !important;
  }
  body[data-listo-mode="guest"] .listo-guest-home__discovery-section {
    margin-top: 14px !important;
  }
}
body.listo-logged-in:has(#listo-marketplace-page-root .listo-guest-home) .listo-footer,
body.listo-logged-in:has(#listo-marketplace-page-root .listo-guest-home) .listo-footer > .listo-container,
body.listo-logged-in:has(#listo-marketplace-page-root .listo-guest-home) .listo-footer > .listo-container.listo-section {
  display: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
}

/* ========================================================================
   NEXT1253 — Guest/Staycation-aligned Parking marketplace directory
   ------------------------------------------------------------------------
   Keep Parking's own canonical data/card markup, but make the directory
   presentation follow the same compact, horizontally-scrollable marketplace
   row language used by Staycation: shared canvas width, restrained top
   spacing, six compact desktop cards in the first view, and swipeable rows
   on smaller screens. Filtered results retain their dedicated grid.
   ======================================================================== */

/* Shared Staycation marketplace canvas and vertical rhythm. */
.listo-parking-container.listo-parking-content {
  width: min(1200px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
  padding-top: 56px;
  padding-bottom: 64px;
}

/* City-directory rows behave like Staycation discovery rows rather than a
   dense parking-specific grid. */
.listo-parking-location-directory {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.listo-parking-location-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 16px;
}

.listo-parking-location-row__head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.listo-parking-location-row__head a {
  flex: 0 0 auto;
  color: #2196F3;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.listo-parking-location-row__head a:hover {
  color: #1976D2;
}

/* Six compact thumbnails fit in the first desktop view. */
.listo-parking-location-row__track {
  display: flex;
  gap: 16px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 4px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.listo-parking-location-row__track::-webkit-scrollbar { display: none; }

.listo-parking-location-row__track > .listo-parking-card {
  flex: 0 0 calc((100% - 80px) / 6);
  width: calc((100% - 80px) / 6);
  min-width: 0;
}

.listo-parking-card__media {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
}

.listo-parking-card__body {
  padding: 9px 2px 0;
}

.listo-parking-card__body h3 {
  font-size: 14px;
  line-height: 1.28;
  margin: 0 0 7px;
}

.listo-parking-card__pricing-grid {
  gap: 3px;
}

.listo-parking-card__pricing-grid > div {
  gap: 4px;
}

.listo-parking-card__pricing-grid span {
  font-size: 11px;
  line-height: 1.3;
}

.listo-parking-card__pricing-grid strong {
  font-size: 13px;
  line-height: 1.3;
}

@media (max-width: 1100px) {
  .listo-parking-location-row__track > .listo-parking-card {
    flex-basis: calc((100% - 48px) / 4);
    width: calc((100% - 48px) / 4);
  }
}

@media (max-width: 820px) {
  .listo-parking-container.listo-parking-content {
    width: min(calc(100% - 32px), 680px);
    padding-top: 20px;
    padding-bottom: 48px;
  }

  .listo-parking-location-directory { gap: 30px; }

  .listo-parking-location-row__head {
    margin-bottom: 13px;
  }

  .listo-parking-location-row__head h2 { font-size: 19px; }
  .listo-parking-location-row__head a { font-size: 12px; }

  .listo-parking-location-row__track {
    gap: 12px;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .listo-parking-location-row__track > .listo-parking-card {
    flex: 0 0 calc((100% - 12px) / 2);
    width: calc((100% - 12px) / 2);
    scroll-snap-align: start;
  }

  .listo-parking-card__media { border-radius: 14px; }
}

@media (max-width: 560px) {
  .listo-parking-container.listo-parking-content {
    width: calc(100% - 24px);
    padding-top: 20px;
  }

  .listo-parking-location-directory { gap: 28px; }
  .listo-parking-location-row__head h2 { font-size: 18px; }
  .listo-parking-location-row__track { gap: 10px; }
  .listo-parking-location-row__track > .listo-parking-card {
    flex-basis: calc((100% - 10px) / 2);
    width: calc((100% - 10px) / 2);
  }
}

/* ========================================================================
   NEXT1254 — Guest Parking uses the Guest Home UI/UX
   Logged-in guests see Parking inside the same Guest shell as Home (sidebar,
   floating dock on mobile, no marketplace pills, no site footer) with the
   same page canvas, header spacing (56px desktop / 20px mobile), section
   heading + link styling, and compact Homes-style card rows.
   Parking's own data, filters and card markup are unchanged.
   ======================================================================== */
body[data-listo-mode="guest"] .listo-parking-page {
  background: #fff;
  min-height: calc(100vh - 70px) !important;
}
body[data-listo-mode="guest"] .listo-parking-container.listo-parking-content {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 56px 0 96px !important;
}

/* Section rows: Guest Home heading + link treatment. */
body[data-listo-mode="guest"] .listo-parking-location-directory { gap: 28px; }
body[data-listo-mode="guest"] .listo-parking-location-row__head {
  align-items: baseline;
  margin: 0 0 12px;
}
body[data-listo-mode="guest"] .listo-parking-location-row__head h2 {
  color: #17232D;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: 750;
}
body[data-listo-mode="guest"] .listo-parking-location-row__head a {
  color: #1677C8;
  font-size: 11px;
  font-weight: 750;
}
body[data-listo-mode="guest"] .listo-parking-location-row__track {
  gap: 12px;
  padding: 1px 1px 7px;
}

/* Cards: same image shape and type scale as the Homes cards on Guest Home. */
body[data-listo-mode="guest"] .listo-parking-card__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  margin-bottom: 7px;
}
body[data-listo-mode="guest"] .listo-parking-card__body { padding: 0; }
body[data-listo-mode="guest"] .listo-parking-card__body h3 {
  margin: 0 0 3px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
}
body[data-listo-mode="guest"] .listo-parking-card__body h3 a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-listo-mode="guest"] .listo-parking-card__pricing-grid { gap: 2px; margin-top: 4px; }
body[data-listo-mode="guest"] .listo-parking-card__pricing-grid span { font-size: 12px; }
body[data-listo-mode="guest"] .listo-parking-card__pricing-grid strong { font-size: 12px; }

/* Filtered results header + grid follow the same canvas. */
body[data-listo-mode="guest"] .listo-parking-results-head { text-align: left; margin-bottom: 20px; }
body[data-listo-mode="guest"] .listo-parking-results-head h1 {
  color: #17232D;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -.018em;
  font-weight: 750;
}

@media (min-width: 901px) {
  body[data-listo-mode="guest"] .listo-parking-location-row__track > .listo-parking-card {
    flex: 0 0 calc((100% - 60px) / 6);
    width: calc((100% - 60px) / 6);
  }
}
@media (min-width: 901px) and (max-width: 1120px) {
  body[data-listo-mode="guest"] .listo-parking-location-row__track > .listo-parking-card {
    flex-basis: calc((100% - 48px) / 5);
    width: calc((100% - 48px) / 5);
  }
}

/* Mobile: .listo-main already supplies the shared 20px header gap. */
@media (max-width: 900px) {
  /* NEXT1260 — Parking directory mobile cards use the same compact
     thumbnail sizing as Home directories for both logged-in and public users. */
  .listo-parking-location-row__track > .listo-parking-card {
    flex: 0 0 38vw;
    width: 38vw;
    min-width: 0;
  }

  body[data-listo-mode="guest"] .listo-parking-container.listo-parking-content {
    width: 100% !important;
    padding: 0 12px 112px !important;
  }
  body[data-listo-mode="guest"] .listo-parking-location-directory { gap: 25px; }
  body[data-listo-mode="guest"] .listo-parking-location-row__head { margin-bottom: 10px; }
  body[data-listo-mode="guest"] .listo-parking-location-row__head h2 { font-size: 16px; }
  body[data-listo-mode="guest"] .listo-parking-location-row__head a { font-size: 10px; }
  body[data-listo-mode="guest"] .listo-parking-location-row__track { gap: 10px; }
  body[data-listo-mode="guest"] .listo-parking-location-row__track > .listo-parking-card {
    flex: 0 0 38vw;
    width: 38vw;
    max-width: none;
  }
}

/* No site footer or divider on Guest Parking. */
body.listo-logged-in:has(#listo-marketplace-page-root .listo-parking-page) .listo-footer,
body.listo-logged-in:has(#listo-marketplace-page-root .listo-parking-page) .listo-footer > .listo-container,
body.listo-logged-in:has(#listo-marketplace-page-root .listo-parking-page) .listo-footer > .listo-container.listo-section {
  display: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
}

/* ========================================================================
   NEXT1255 — Guest Parking "Go Back" button (returns to Guest Home)
   ======================================================================== */
.listo-parking-go-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  margin: 0 0 20px;
  padding: 0 16px 0 12px;
  border: 1px solid #DCE4EA;
  border-radius: 11px;
  background: #fff;
  color: #17232D !important;
  font-size: 14px;
  line-height: 20px;
  font-weight: 650;
  text-decoration: none !important;
  box-sizing: border-box;
  white-space: nowrap;
}
.listo-parking-go-back svg { width: 18px; height: 18px; flex: 0 0 18px; display: block; }
.listo-parking-go-back:hover { background: #F6F9FB; border-color: #CFE5F6; }
.listo-parking-go-back:focus-visible { outline: 3px solid rgba(33,150,243,.24); outline-offset: 2px; }
@media (max-width: 900px) {
  .listo-parking-go-back { margin-bottom: 16px; }
}

/* ========================================================================
   NEXT1256 — Mobile Account Workspace: Maximize Usable Page Width
   ------------------------------------------------------------------------
   Guest and Host account pages were inheriting multiple layers of mobile
   gutters (main canvas + page wrapper + page-specific width reductions),
   leaving excessive unused space on both sides of the viewport.

   Establish one canonical mobile account gutter: 12px. Child account
   workspaces use the full width of that canvas. This is presentation-only;
   no routes, data, business logic, navigation behavior, or desktop geometry
   is changed.
   ======================================================================== */
@media (max-width:900px) {
  /* One shared mobile canvas for both authenticated account modes. */
  body[data-listo-mode="guest"] .listo-main,
  body[data-listo-mode="host"] .listo-main {
    margin-left:0!important;
    margin-right:0!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  /* Guest Account pages: remove the additional 24px inner-width reduction. */
  body[data-listo-mode="guest"] .listo-main > .listo-container,
  body[data-listo-mode="guest"] .listo-main > .listo-inbox-page--guest {
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  body[data-listo-mode="guest"] .listo-main > .listo-guest-home,
  body[data-listo-mode="guest"] .listo-guest-home {
    padding-left:0!important;
    padding-right:0!important;
  }

  /* Host workspace pages: use the full mobile account canvas. */
  body[data-listo-mode="host"] .listo-main > .listo-container,
  body[data-listo-mode="host"] .listo-main > .listo-host-parking-page-shell,
  body[data-listo-mode="host"] .listo-main > .listo-host-account-page,
  body[data-listo-mode="host"] .listo-main > .listo-host-app-page,
  body[data-listo-mode="host"] .listo-main > .listo-inbox-page,
  body[data-listo-mode="host"] .listo-main > .listo-host-home,
  body[data-listo-mode="host"] .listo-main > .listo-dashboard-v2 {
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Remove the remaining 24px reduction used by the Host analytics Home. */
  body[data-listo-mode="host"] .listo-main > .listo-dashboard-v2.listo-host-home,
  body[data-listo-mode="host"] .listo-main > .listo-host-home--analytics {
    width:100%!important;
    max-width:none!important;
  }

  /* Host mobile workspace switcher should use the same account canvas. */
  body[data-listo-mode="host"] .listo-host-context-nav__inner {
    width:100%!important;
  }

  /* Guest Home's horizontally scrolling directories should terminate at the
     new 12px canvas rather than retaining an inner page gutter. */
  body[data-listo-mode="guest"] .listo-guest-home__inner {
    width:100%!important;
    max-width:none!important;
  }
}

@media (max-width:360px) {
  /* Keep the same canonical 12px gutter on very narrow phones. */
  body[data-listo-mode="guest"] .listo-main,
  body[data-listo-mode="host"] .listo-main {
    padding-left:12px!important;
    padding-right:12px!important;
  }
}

/* NEXT1257 — Compact six-up directory cards
 * Match the established Guest Home six-card directory treatment across the
 * logged-in Guest marketplace directory rows. Keep marketplace/card data and
 * behavior unchanged; this is presentation-only. */
@media (min-width: 901px) {
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes {
    gap: 12px;
  }
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes .listo-guest-home__listing-item--homes > div {
    flex: 0 0 calc((100% - 60px) / 6);
    width: calc((100% - 60px) / 6);
    min-width: 0;
  }
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes .listo-card__image {
    margin-bottom: 7px;
  }
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes .listo-card__save {
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
  }
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes .listo-card__title {
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 1px;
  }
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes .listo-card__price {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
  }

  /* Parking directory: same six-up compact treatment as Homes. */
  body[data-listo-mode="guest"] .listo-parking-location-row__track {
    gap: 12px;
  }
  body[data-listo-mode="guest"] .listo-parking-location-row__track > .listo-parking-card {
    flex: 0 0 calc((100% - 60px) / 6);
    width: calc((100% - 60px) / 6);
    min-width: 0;
  }
  body[data-listo-mode="guest"] .listo-parking-card__media {
    margin-bottom: 7px;
    border-radius: var(--radius);
  }
  body[data-listo-mode="guest"] .listo-parking-card__body h3 {
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 3px;
  }
  body[data-listo-mode="guest"] .listo-parking-card__pricing-grid span {
    font-size: 11px;
  }
  body[data-listo-mode="guest"] .listo-parking-card__pricing-grid strong {
    font-size: 12px;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes .listo-guest-home__listing-item--homes > div,
  body[data-listo-mode="guest"] .listo-parking-location-row__track > .listo-parking-card {
    flex-basis: calc((100% - 48px) / 5);
    width: calc((100% - 48px) / 5);
  }
}


/* NEXT1258 — Home directory standardization: 8 listings + 9th See all slot.
 * The logged-in Guest Home and public Home now use the same listing-card
 * dimensions and the same compact horizontal directory model. */
@media (min-width: 601px) {
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes {
    gap: 16px;
  }
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes .listo-guest-home__listing-item--homes > div {
    flex: 0 0 210px !important;
    width: 210px !important;
    min-width: 0;
  }
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes .listo-card__title {
    font-size: 14px;
    line-height: 1.3;
  }
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes .listo-card__price {
    font-size: 13px;
    line-height: 1.35;
  }
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes .listo-card__save {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 600px) {
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes {
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes .listo-guest-home__listing-item--homes > div {
    flex: 0 0 38vw !important;
    width: 38vw !important;
    max-width: none;
    min-width: 0;
    scroll-snap-align: start;
  }
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes .listo-card__title {
    font-size: 14px;
    line-height: 1.3;
  }
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes .listo-card__price {
    font-size: 13px;
    line-height: 1.35;
  }
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes .listo-card__save {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    padding: 3px;
    box-sizing: border-box;
  }
  body[data-listo-mode="guest"] .listo-guest-home__listing-row--homes .listo-card__save-icon {
    width: 28px;
    height: 28px;
  }
}


/* NEXT1259 — Public Home directory cards use the same mobile card width as the
 * authenticated Guest Home. Keep the two Home experiences visually consistent. */
@media (max-width: 900px) {
  .listo-homepage-content .listo-home-row__item {
    width: 38vw !important;
    flex: 0 0 38vw !important;
    max-width: none !important;
  }
}

/* ========================================================================
   NEXT1261 — Guest Home directory refinement
   ------------------------------------------------------------------------
   - Remove the divider beneath the primary Home actions.
   - Use "Explore homes" consistently for the primary Staycation action.
   - Guest Home directory row headings now come from the same server-side
     row-title logic used by the public Home.
   - Remove the "Explore homes" row-header link; See all remains the row's
     dedicated destination.
   - Hide horizontal scrollbars/underlines while preserving touch scrolling.
   ======================================================================== */
body[data-listo-mode="guest"] .listo-guest-home__discovery {
  border-top: 0 !important;
}
body[data-listo-mode="guest"] .listo-guest-home__listing-row,
body[data-listo-mode="guest"] .listo-guest-home__parking-row {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
body[data-listo-mode="guest"] .listo-guest-home__listing-row::-webkit-scrollbar,
body[data-listo-mode="guest"] .listo-guest-home__parking-row::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* NEXT1265 — Public Home row-title hard alignment
 * The previous alignment rule was not sufficient because the public Home
 * row header can inherit layout positioning from the older marketplace
 * header styles. Explicitly anchor the title/header to the same content
 * edge as the horizontal listing row.
 */
@media (max-width: 900px) {
  .listo-homepage-content .listo-home-row-header {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  .listo-homepage-content .listo-home-row-header > .listo-home-row-title {
    position: static !important;
    display: flex !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    align-self: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

/* NEXT1264 — Public Home mobile directory row-title alignment
 * Keep row headings flush with the listing-row content edge. The mobile
 * directory cards already use the full compact row width, so the heading
 * must share the same left alignment rather than inheriting any offset.
 */
@media (max-width: 900px) {
  .listo-homepage-content .listo-home-row-header {
    justify-content: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .listo-homepage-content .listo-home-row-title {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
}
/* NEXT1270 — Public Home mobile row-title/content-canvas alignment
 * The row header must use the same content canvas as the listing row.
 * Do not pull the title toward the viewport edge: the scrollable row has
 * a full-bleed wrapper but restores the page gutter with its own padding.
 * The header remains on the page's normal content edge so title and first
 * thumbnail align visually without touching the screen edge.
 */
@media (max-width: 600px) {
  .listo-homepage-content .listo-home-row-header {
    position: static !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .listo-homepage-content .listo-home-row-header > .listo-home-row-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
}

/* ========================================================================
   NEXT1271 — Public Home mobile row titles: no indentation
   ------------------------------------------------------------------------
   At <=480px the scrolling row wrapper is pulled out by -24px (the
   .listo-main gutter) and the row restores it with its own padding, so the
   first thumbnail sits on the same left edge as the search bar and header
   logo. The row header was left inside the Home content's inner padding,
   so titles such as "Cozy homes in Pasay" appeared indented ~24px from
   the thumbnails. The header now gets the identical offset, which puts the
   title, the first thumbnail and the logo on one left edge.
   Logged-in Guest Home and wider screens are unchanged.
   ======================================================================== */
@media (max-width: 480px) {
  body:not(.listo-logged-in) .listo-homepage-content .listo-home-row-header {
    width: auto !important;
    max-width: none !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body:not(.listo-logged-in) .listo-homepage-content .listo-home-row-header > .listo-home-row-title {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
}

/* ========================================================================
   NEXT1272 — Directory filter pills scroll left and right
   ------------------------------------------------------------------------
   The pill row is a horizontally scrolling flex container that was also
   centered with justify-content:center. When the pills are wider than the
   screen, a centered flex row overflows equally on both sides and the part
   that spills off the LEFT edge can never be scrolled into view, so the
   first pill ("Parking") stayed cut off and the row appeared stuck.
   The row is now start-aligned and uses auto margins on the first and last
   pill instead: it stays centered when everything fits, and when it does
   not fit it starts at the left edge and scrolls freely in both directions.
   ======================================================================== */
.listo-search-results-top-bar .listo-filter-chips {
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
.listo-search-results-top-bar .listo-filter-chips > .listo-filter-chip:first-child { margin-left: auto; }
.listo-search-results-top-bar .listo-filter-chips > .listo-filter-chip:last-child { margin-right: auto; }

/* ==========================================================================
   NEXT1275 — System-wide Notification Center
   Bell = what happened. Navigation badges remain separate attention state.
   ========================================================================== */
.listo-notification-center{position:relative;display:flex;align-items:center;flex-shrink:0}
.listo-notification-bell{
  position:relative;width:34px;height:34px;padding:0;margin:0;display:inline-flex;
  align-items:center;justify-content:center;background:transparent;border:0;
  color:var(--ink,#263238);cursor:pointer;border-radius:8px;
}
.listo-notification-bell:hover{background:var(--surface-alt,#f5f7f8)}
.listo-notification-bell:focus-visible{outline:2px solid #DC2626;outline-offset:2px}
.listo-notification-bell svg{width:20px;height:20px;display:block}
.listo-notification-bell__badge{
  position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:#DC2626;color:#fff;border:2px solid #fff;
  font-size:9px;font-weight:800;line-height:12px;display:flex;align-items:center;justify-content:center;
}
.listo-notification-bell__badge[hidden]{display:none!important}

.listo-notification-panel{
  position:absolute;top:calc(100% + 10px);right:0;width:370px;max-width:min(370px,calc(100vw - 32px));
  background:#fff;border:1px solid #e4e9ed;border-radius:12px;box-shadow:0 10px 30px rgba(26,38,48,.12);
  overflow:hidden;z-index:400;
}
.listo-notification-panel[hidden]{display:none!important}
.listo-notification-panel__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #edf1f3}
.listo-notification-panel__head strong{font-size:14px;color:#172631}
.listo-notification-panel__head button,.listo-notifications-mark-all{
  border:0;background:transparent;color:#B91C1C;font-size:12px;font-weight:700;cursor:pointer;padding:4px 0
}
.listo-notification-panel__head button:hover,.listo-notification-panel__all:hover,.listo-notifications-mark-all:hover{color:#991B1B}
.listo-notification-panel__body{max-height:440px;overflow:auto}
.listo-notification-panel__all{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid #edf1f3;color:#B91C1C;font-size:12px;font-weight:700;text-decoration:none}
.listo-notification-panel__empty,.listo-notification-panel__loading,.listo-notification-panel__error{padding:28px 18px;text-align:center;color:#687681;font-size:13px}
.listo-notification-panel__empty[hidden],.listo-notification-panel__loading[hidden],.listo-notification-panel__error[hidden]{display:none!important}
.listo-notification-panel__error{color:#8a3a3a}

.listo-notification-item{
  position:relative;width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) 8px;gap:11px;
  align-items:start;text-align:left;padding:13px 16px;border:0;border-bottom:1px solid #f0f3f5;
  background:#fff;color:#172631;text-decoration:none;cursor:pointer;
}
.listo-notification-item:hover{background:#f8fbfd}
.listo-notification-item:last-child{border-bottom:0}
.listo-notification-item.is-unread{background:#FFF5F5}
.listo-notification-item__icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#B91C1C;background:#FDE2E2;margin-top:1px}
.listo-notification-item__icon svg{width:16px;height:16px}
.listo-notification-item__content{min-width:0}
.listo-notification-item__content strong{display:block;font-size:13px;line-height:18px;font-weight:700;margin-bottom:2px;color:#172631}
.listo-notification-item.is-read .listo-notification-item__content strong{font-weight:600}
.listo-notification-item__content span{display:block;font-size:12px;line-height:17px;color:#586975;white-space:normal}
.listo-notification-item__content small{display:block;margin-top:5px;font-size:10px;line-height:14px;color:#7b8992}
.listo-notification-item__dot{width:6px;height:6px;border-radius:50%;background:#DC2626;margin-top:7px}
.listo-notification-item:focus-visible{outline:2px solid #DC2626;outline-offset:-2px}

.listo-notifications-main{min-height:50vh}
.listo-notifications-page{max-width:900px}
.listo-notifications-page__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.listo-notifications-page__head h1{margin:0;font-size:28px;line-height:34px;color:#172631}
.listo-notifications-page__head p{margin:5px 0 0;color:#687681;font-size:13px;line-height:20px}
.listo-notifications-list{border-top:1px solid #e9eef1}
.listo-notifications-page .listo-notification-item{grid-template-columns:38px minmax(0,1fr) 8px;padding:16px 4px;background:#fff;border-bottom:1px solid #edf1f3}
.listo-notifications-page .listo-notification-item.is-unread{background:#FFF5F5}
.listo-notifications-page .listo-notification-item__icon{width:34px;height:34px}
.listo-notifications-page .listo-notification-item__content strong{font-size:14px;line-height:20px}
.listo-notifications-page .listo-notification-item__content span{font-size:13px;line-height:19px}
.listo-notifications-page .listo-notification-item__content small{font-size:11px}
.listo-notifications-empty{padding:64px 20px;text-align:center;display:flex;flex-direction:column;gap:6px;color:#687681}
.listo-notifications-empty[hidden],.listo-notifications-error[hidden],.listo-notifications-loadmore[hidden]{display:none!important}
.listo-notifications-empty strong{font-size:16px;color:#263238}
.listo-notifications-empty span{font-size:13px}
.listo-notifications-error{padding:36px 20px;text-align:center;color:#687681}
.listo-notifications-error strong{display:block;margin-bottom:12px;color:#8a3a3a}
.listo-notifications-error button,.listo-notifications-loadmore button{border:1px solid #E7C5C5;background:#fff;color:#B91C1C;border-radius:8px;padding:8px 12px;font-weight:700;font-size:12px;cursor:pointer}
.listo-notifications-loadmore{text-align:center;padding:18px 0}
.listo-notifications-loading{text-align:center;padding:32px;color:#7b8992;font-size:13px}

/* ========================================================================
   NEXT1307 — Mobile Notification Center as an in-place overlay
   ------------------------------------------------------------------------
   The bell no longer navigates away from the current page on mobile. The
   existing header panel becomes a viewport-level notification container.
   The underlying page stays mounted and is restored immediately when the
   bell is tapped again or the overlay is dismissed.
   ======================================================================== */
@media (max-width:800px){
  .listo-notification-center.is-mobile-overlay .listo-notification-panel{
    display:flex !important;
    position:fixed !important;
    top:calc(var(--listo-notification-mobile-top,72px) + 8px) !important;
    right:12px !important;
    bottom:var(--listo-notification-mobile-bottom, 12px) !important;
    left:12px !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    flex-direction:column !important;
    background:#fff !important;
    border:1px solid #e4e9ed !important;
    border-radius:16px !important;
    box-shadow:0 16px 40px rgba(26,38,48,.18) !important;
    overflow:hidden !important;
    z-index:10050 !important;
  }
  .listo-notification-center.is-mobile-overlay .listo-notification-panel__head{
    flex:0 0 auto;
    min-height:54px;
    padding:14px 16px;
    background:#fff;
  }
  .listo-notification-center.is-mobile-overlay .listo-notification-panel__head strong{
    font-size:18px;
    line-height:24px;
  }
  .listo-notification-center.is-mobile-overlay .listo-notification-panel__head button{
    font-size:12px;
  }
  .listo-notification-center.is-mobile-overlay .listo-notification-panel__body{
    flex:1 1 auto;
    min-height:0;
    max-height:none !important;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .listo-notification-center.is-mobile-overlay .listo-notification-panel__all{
    flex:0 0 auto;
    padding:14px 16px;
    background:#fff;
  }
}

@media(max-width:800px){
  /* Mobile Notifications is opened from the site header. Keep the page title
     close to that header, matching the compact Guest/Host account rhythm. */
  .listo-notifications-main > .listo-notifications-page{
    padding-top:12px !important;
  }
  .listo-notification-center{margin-right:2px}
  .listo-notification-bell{width:32px;height:32px}
  .listo-notification-bell svg{width:19px;height:19px}
  .listo-notification-panel{display:none!important}
  .listo-notification-center.is-mobile-overlay .listo-notification-panel{display:flex!important}
  .listo-notifications-page{padding-top:0}
  .listo-notifications-page__head{align-items:flex-start;margin-bottom:18px}
  .listo-notifications-page__head h1{font-size:24px;line-height:30px}
  .listo-notifications-page__head p{font-size:12px}
  .listo-notifications-mark-all{white-space:nowrap;font-size:11px}
  .listo-notifications-page .listo-notification-item{padding:14px 0}
}
@media(max-width:480px){
  .listo-notifications-page__head{gap:10px}
  .listo-notifications-page__head p{max-width:220px}
}

.listo-global-toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);
  z-index:100000;max-width:min(92vw,420px);padding:11px 16px;border-radius:9px;
  background:#172631;color:#fff;font-size:13px;font-weight:650;line-height:18px;
  box-shadow:0 8px 24px rgba(23,38,49,.18);opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.listo-global-toast.is-visible{opacity:1;transform:translate(-50%,0)}
.listo-global-toast[data-tone="error"]{background:#9f2f2f}
@media(max-width:700px){.listo-global-toast{bottom:88px;max-width:calc(100vw - 32px)}}

.listo-notifications-filter{display:flex;align-items:center;margin-bottom:8px}.listo-notifications-filter button{border:0;background:transparent;color:#5f707c;font-size:12px;font-weight:700;padding:6px 2px;border-bottom:2px solid transparent;cursor:pointer}.listo-notifications-filter button.is-active{color:#B91C1C;border-bottom-color:#DC2626}

/* ========================================================================
   NEXT1277 — Cross-browser mobile Inbox keyboard-aware composer
   ------------------------------------------------------------------------
   The composer is moved to the Visual Viewport by inbox.js while the
   virtual keyboard is visible. This is intentionally not a fixed keyboard
   height and does not depend on the VirtualKeyboard API, so Android Chrome/
   Brave and iOS Safari/Chrome/Brave can use the same behavior.
   ======================================================================== */
@media (max-width: 800px) {
  .listo-inbox--keyboard-visible .listo-inbox__composer {
    /* JS supplies the exact viewport coordinates. Keep CSS neutral so Safari
       does not fight the Visual Viewport calculation. */
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .listo-inbox--keyboard-visible .listo-inbox__messages {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ========================================================================
   NEXT1277 — Cross-browser mobile Inbox keyboard-aware composer
   The composer is moved to the Visual Viewport by inbox.js while the
   virtual keyboard is visible. No fixed keyboard height or VirtualKeyboard
   API is required, keeping Android and iOS behavior on the same path.
   ======================================================================== */
@media (max-width: 800px) {
  .listo-inbox--keyboard-visible .listo-inbox__composer {
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .listo-inbox--keyboard-visible .listo-inbox__messages {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ========================================================================
   NEXT327 — Mobile Inbox composer flush-to-keyboard refinement
   When the virtual keyboard is visible, the composer is anchored by the
   Visual Viewport bottom coordinate in JS. Remove normal mobile bottom
   safe-area/padding from the composer itself so its rendered bottom edge
   can sit flush against the keyboard, Messenger-style. Normal keyboard-
   closed safe-area behavior is unchanged.
   ======================================================================== */
@media (max-width: 800px) {
  .listo-inbox--keyboard-visible .listo-inbox__composer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ========================================================================
   NEXT1280 — Mobile Guest Inbox uses the full page width
   ------------------------------------------------------------------------
   The Guest Account Inbox keeps a two-column desktop grid
   (minmax(270px,320px) + 1fr). That rule has higher specificity than the
   mobile single-column rule, so on phones the only visible pane (list or
   chat) was squeezed into the 320px first column and left an empty strip on
   the right. On phones the Inbox is single-pane, so it now spans the whole
   width. Desktop is unchanged.
   ======================================================================== */
@media (max-width: 800px) {
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest > .listo-inbox__list,
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest > .listo-inbox__thread {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

/* NEXT1285 — Guest Inbox keyboard-dismissed viewport anchoring.
 * When the keyboard is closed, JavaScript uses the layout viewport as the
 * Inbox bottom boundary. Keep the mobile thread in normal flex flow so the
 * composer remains the bottommost row without reserving stale keyboard space. */
@media (max-width: 800px) {
  .listo-inbox:not(.listo-inbox--keyboard-visible) .listo-inbox__thread-active,
  .listo-inbox:not(.listo-inbox--keyboard-visible) .listo-inbox__thread {
    min-height: 0;
  }
  .listo-inbox:not(.listo-inbox--keyboard-visible) .listo-inbox__composer {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    z-index: 1;
  }
}


/* ========================================================================
   NEXT1286 — Guest Inbox stable flow composer
   The Inbox workspace follows the visible viewport. The composer remains in
   the same flex column as the message list so browser keyboard/viewport
   implementations cannot move the composer independently of the keyboard.
   ======================================================================== */
@media (max-width: 800px) {
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest .listo-inbox__thread-active {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest .listo-inbox__messages {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest .listo-inbox__composer {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
  }
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest.listo-inbox--keyboard-visible .listo-inbox__composer {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ========================================================================
   NEXT1288 — Stable Guest composer portal identity
   The composer is resolved by its portal id/class after it is moved under
   <body>. Keep it outside Inbox overflow contexts at all times on mobile.
   ======================================================================== */
@media (max-width: 800px) {
  body > .listo-inbox__composer.listo-inbox-mobile-composer-portal {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    z-index: 2147483000 !important;
    transform: none !important;
  }
}

/* ========================================================================
   NEXT1287 — Guest Inbox viewport-level mobile composer
   The Guest composer is portalled directly under <body> while a conversation
   is open on mobile. This prevents ancestor overflow/transform contexts from
   clipping it when Android/iOS changes the visual viewport for the keyboard.
   JavaScript owns its exact bottom edge; the message list receives matching
   bottom padding so the latest message always remains visible above it.
   ======================================================================== */
@media (max-width: 800px) {
  body .listo-inbox__composer.listo-inbox-mobile-composer-portal {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
    align-items: flex-end !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border-top: 1px solid var(--border) !important;
    z-index: 2147483000 !important;
    transform: none !important;
    overflow: visible !important;
  }
  body .listo-inbox__composer.listo-inbox-mobile-composer-portal textarea {
    min-width: 0 !important;
    min-height: 40px !important;
    max-height: 120px !important;
  }
}

/* ========================================================================
   NEXT1291 — Guest mobile composer error cleanup
   ------------------------------------------------------------------------
   The Guest mobile composer is portalled under <body>. Keep its send-error
   message attached to that same top-level layer so it cannot create a
   separate flex row or divider inside the Inbox thread. The composer itself
   has no top rule on mobile; genuine send errors float immediately above it.
   ======================================================================== */
@media (max-width: 800px) {
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox__composer.listo-inbox-mobile-composer-portal {
    border-top: 0 !important;
    overflow: visible !important;
  }

  body:has(.listo-header--guest-account) .listo-inbox__composer.listo-inbox-mobile-composer-portal > .listo-field-error[data-error-for="inbox-send"] {
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    bottom: calc(100% + 6px) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2147483001 !important;
    pointer-events: none;
  }
}

/* ========================================================================
   NEXT1294 — Guest Inbox mobile chat-shell cleanup
   ------------------------------------------------------------------------
   1) The title/description disappears when a conversation opens. The Inbox
      height is re-measured by inbox.js after that layout change so the chat
      reaches the same visible bottom edge as the viewport-level composer.
   2) Prevent body/page scrolling while a mobile Guest conversation is open.
      Only .listo-inbox__messages should scroll, which keeps the conversation
      header and back arrow continuously visible.
   3) Remove the outer workspace border/shadow in focused chat so its bottom
      edge cannot read as a grey divider above unused space.
   ======================================================================== */
@media (max-width: 800px) {
  body:has(.listo-header--guest-account):has(.listo-inbox--thread-open) {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body:has(.listo-header--guest-account):has(.listo-inbox--thread-open) .listo-inbox-page--guest {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body:has(.listo-header--guest-account):has(.listo-inbox--thread-open) .listo-inbox-page--guest .listo-inbox--guest {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body:has(.listo-header--guest-account):has(.listo-inbox--thread-open) .listo-inbox-page--guest .listo-inbox--guest .listo-inbox__thread-active {
    position: relative !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body:has(.listo-header--guest-account):has(.listo-inbox--thread-open) .listo-inbox-page--guest .listo-inbox--guest .listo-inbox__thread-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    flex: 0 0 auto !important;
    background: #fff !important;
    border-bottom: 1px solid #EDF1F4 !important;
    box-shadow: 0 1px 4px rgba(24,39,75,.04) !important;
  }
}

/* ========================================================================
   NEXT1293 — Guest Inbox mobile sticky conversation header
   ------------------------------------------------------------------------
   Keep the opened Guest conversation header (including the back arrow) in
   view while the message stream scrolls independently. Desktop behavior is
   intentionally unchanged.
   ======================================================================== */
@media (max-width: 800px) {
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest .listo-inbox__thread-active > .listo-inbox__thread-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    flex: 0 0 auto !important;
    min-height: 62px !important;
    background: #fff !important;
    border-bottom: 1px solid #EDF1F4 !important;
    box-shadow: 0 1px 4px rgba(24,39,75,.04) !important;
  }

  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest .listo-inbox__thread-header .listo-inbox-back-btn {
    position: relative;
    z-index: 41;
    flex: 0 0 40px;
  }
}


/* ========================================================================
   NEXT1296 — Guest Inbox mobile: navigation replaces the persistent composer
   ------------------------------------------------------------------------
   The mobile Guest Inbox now treats the floating navigation dock as the
   persistent bottom control in both list and open-thread states. The
   viewport-level Write a message composer is no longer rendered as a
   persistent bottom surface on the Guest Inbox mobile shell. Desktop and
   Host Inbox composer behavior are unchanged. The dock sits above the
   portalled chat surface, while the message stream reserves bottom space
   so its last message is never hidden behind navigation.
   ======================================================================== */
@media (max-width: 800px) {
  /* The Guest Inbox should never show a persistent mobile composer. */
  body:has(.listo-header--guest-account) .listo-inbox-page--guest .listo-inbox--guest .listo-inbox__composer,
  body:has(.listo-header--guest-account) > .listo-inbox__composer.listo-inbox-mobile-composer-portal {
    display: none !important;
  }

  /* Keep the Guest floating navigation visible while an Inbox conversation is open. */
  body:has(.listo-header--guest-account):has(.listo-inbox--thread-open) .listo-guest-floating-shell {
    display: block !important;
    z-index: 10060 !important;
  }

  body:has(.listo-header--guest-account):has(.listo-inbox--thread-open) .listo-guest-floating-dock {
    z-index: 10061 !important;
  }

  /* The chat portal sits below the dock. Reserve enough scroll room for the
     floating nav so the final message can be brought fully above it. */
  body:has(.listo-header--guest-account) > #listo-inbox-thread.listo-inbox-mobile-guest-chat-portal .listo-inbox__messages {
    padding-bottom: 96px !important;
  }

  /* The dock is also the persistent bottom control in the Inbox list state.
     Remove the old page-level reserved composer spacing. */
  body:has(.listo-header--guest-account) .listo-inbox-page--guest {
    padding-bottom: 0 !important;
  }
}

/* ========================================================================
   NEXT1295 — Guest mobile conversation header must be a real viewport layer
   ------------------------------------------------------------------------
   The Guest conversation was previously left inside the page flow while the
   page itself was locked and the message list was made the scroll surface.
   Because the active thread also owns overflow:hidden, position:sticky on
   the conversation header was constrained by that shell and could disappear
   when the browser/page was scrolled. Port the opened Guest thread to body,
   exactly like the existing Host mobile chat portal. The portal starts below
   the fixed Guest account header, while ONLY .listo-inbox__messages scrolls.
   ======================================================================== */
@media (max-width: 800px) {
  body:has(.listo-header--guest-account) > #listo-inbox-thread.listo-inbox-mobile-guest-chat-portal {
    position: fixed !important;
    top: var(--listo-guest-chat-top, 68px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    height: var(--listo-guest-chat-height, calc(100dvh - 68px)) !important;
    max-height: var(--listo-guest-chat-height, calc(100dvh - 68px)) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
    z-index: 10040 !important;
  }

  body:has(.listo-header--guest-account) > #listo-inbox-thread.listo-inbox-mobile-guest-chat-portal .listo-inbox__thread-active {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  body:has(.listo-header--guest-account) > #listo-inbox-thread.listo-inbox-mobile-guest-chat-portal .listo-inbox__thread-header {
    position: relative !important;
    top: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 62px !important;
    margin: 0 !important;
    background: #fff !important;
    border-bottom: 1px solid #EDF1F4 !important;
    box-shadow: 0 1px 4px rgba(24,39,75,.04) !important;
    z-index: 2 !important;
  }

  body:has(.listo-header--guest-account) > #listo-inbox-thread.listo-inbox-mobile-guest-chat-portal .listo-inbox__thread-header .listo-inbox-back-btn {
    display: flex !important;
    position: relative !important;
    z-index: 3 !important;
    flex: 0 0 40px !important;
  }

  body:has(.listo-header--guest-account) > #listo-inbox-thread.listo-inbox-mobile-guest-chat-portal .listo-inbox__messages {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    background: #fff !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ========================================================================
   NEXT1297 — Mobile Inbox focus mode: hide floating navigation completely
   ------------------------------------------------------------------------
   The mobile Inbox uses the floating dock only in the conversation-list
   state. Once a conversation is open, the chat surface owns the viewport.
   For Host Inbox, this also covers the Guest & booking / Special Offer tray
   state because that tray is only actionable from an open conversation.
   ======================================================================== */
@media (max-width: 800px) {
  /* Guest: no floating navigation while a chat thread is open. */
  body:has(.listo-header--guest-account):has(#listo-inbox.listo-inbox--thread-open) .listo-guest-floating-shell,
  body:has(.listo-header--guest-account):has(#listo-inbox.listo-inbox--thread-open) .listo-guest-floating-dock {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Host: no floating navigation while a chat thread / Special Offer tray
     is active. The conversation/detail tray remains available above it. */
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-floating-dock,
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-floating-dock__backdrop,
  body[data-listo-mode="host"].listo-host-inbox-chat-open .listo-host-floating-dock__more-panel {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ========================================================================
   NEXT1298 — Guest Account Home desktop row navigation
   ------------------------------------------------------------------------
   Add explicit previous/next controls opposite each horizontal listing-row
   title. Mobile keeps native touch scrolling and does not show these arrows.
   ======================================================================== */
.listo-guest-home__row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex: 0 0 auto;
  min-width: 0;
}
.listo-guest-home__row-view-all {
  flex: 0 0 auto;
  color: #1677C8;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.listo-guest-home__row-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.listo-guest-home__row-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #D9E1E7;
  border-radius: 50%;
  background: #fff;
  color: #17232D;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.listo-guest-home__row-nav-button:hover:not(:disabled) {
  border-color: #B9C6D0;
  background: #F7F9FA;
}
.listo-guest-home__row-nav-button:disabled {
  opacity: .35;
  cursor: default;
}
.listo-guest-home__row-nav-button svg {
  width: 17px;
  height: 17px;
}
@media (max-width: 900px) {
  .listo-guest-home__row-actions { display: none; }
}


/* ========================================================================
   NEXT1310 — Payment page container centering + compact header spacing
   Keep the dedicated payment card centered in the viewport instead of inheriting
   any account/marketplace canvas offsets. Reduce the vertical distance from the
   site header to the payment container while preserving the existing payment
   card width and internal layout.
   ======================================================================== */
.listo-payment-page {
  padding-top: 32px !important;
  padding-bottom: 64px !important;
}

.listo-payment-page > .listo-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
}

.listo-payment-page .listo-checkout-card--payment {
  width: min(760px, calc(100% - 48px)) !important;
  max-width: 760px !important;
  margin: 0 auto 20px !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  .listo-payment-page {
    padding-top: 20px !important;
    padding-bottom: 40px !important;
  }

  .listo-payment-page .listo-checkout-card--payment {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin-bottom: 16px !important;
  }
}

/* ========================================================================
   NEXT1311 — Dedicated payment page shell exemption
   The Payment QR page uses the clean transaction header and does not render
   the Guest/Host account sidebar. On desktop, remove the account-shell
   left offset so the payment container is centered against the full viewport.
   Mobile layout remains unchanged.
   ======================================================================== */
@media (min-width: 901px) {
  body:has(.listo-payment-page) .listo-main {
    margin-left: 0 !important;
  }
}

/* NEXT1312 — Payment Submitted confirmation page shell exemption
   Like the Payment QR page, this transaction confirmation page is a focused
   flow and does not need the desktop Guest/Host account-sidebar canvas offset.
   Keep the existing mobile layout unchanged. */
@media (min-width: 901px) {
  body:has(.listo-payment-submitted-page) .listo-main {
    margin-left: 0 !important;
  }
}

/* ========================================================================
   NEXT1314 — Guest Checkout / Review Reservation desktop shell exemption
   The Review your reservation page is a focused transaction flow and does
   not render the Guest account sidebar. Remove the desktop account-shell
   left offset so the checkout content is centered against the full viewport,
   matching the dedicated payment and payment-submitted pages.
   Mobile layout remains unchanged.
   ======================================================================== */
@media (min-width: 901px) {
  body:has(.listo-checkout) .listo-main {
    margin-left: 0 !important;
  }
}

/* ========================================================================
   NEXT1320 — Guest Booking Detail desktop shell exemption
   Guest Booking Details is a focused transaction/detail flow and does not
   render the Guest account sidebar. Remove the desktop account-shell left
   offset so the booking detail canvas uses the full viewport, matching the
   Checkout, Payment QR, and Payment Submitted pages. Mobile remains unchanged.
   ======================================================================== */
@media (min-width: 901px) {
  body:has(.listo-booking-detail-page--guest) .listo-main {
    margin-left: 0 !important;
  }
}

/* Public Staycation/Parking listing pages should read as marketplace
   listings, not Guest/Host account workspaces. Hide the account sidebar
   column and drop its reserved left offset for logged-in visitors. */
@media (min-width: 901px) {
  body[data-listo-mode="guest"].single-listo_listing .listo-guest-sidebar,
  body[data-listo-mode="guest"].single-listo_parking .listo-guest-sidebar,
  body[data-listo-mode="host"].single-listo_listing .listo-host-sidebar,
  body[data-listo-mode="host"].single-listo_parking .listo-host-sidebar {
    display: none !important;
  }
  body[data-listo-mode="guest"].single-listo_listing .listo-main,
  body[data-listo-mode="guest"].single-listo_parking .listo-main,
  body[data-listo-mode="host"].single-listo_listing .listo-main,
  body[data-listo-mode="host"].single-listo_parking .listo-main {
    margin-left: 0 !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* ========================================================================
   NEXT1315 — Review Reservation title alignment
   The Review Reservation title should share the exact same left/right
   content edge as the 820px review-flow beneath it. Keep this desktop-only
   so mobile retains its existing checkout title geometry.
   ======================================================================== */
@media (min-width: 901px) {
  body:has(.listo-checkout:not(.listo-checkout--payment-only)) .listo-checkout:not(.listo-checkout--payment-only) > #listo-checkout-title {
    width: min(100%, 820px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ========================================================================
   NEXT1359 — Guest Notifications parity with Host Notifications
   The Notifications workspace uses the existing Account shell canvas. It
   must not introduce a second centered container or a nested main offset.
   ======================================================================== */
.listo-notifications-main{
  width:100%;
  min-height:50vh;
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.listo-notifications-page{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:56px 0 48px!important;
  box-sizing:border-box;
}
.listo-notifications-page__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin:0 0 34px!important;
}
.listo-notifications-page__title-copy{min-width:0}
.listo-notifications-page__head h1{
  margin:0!important;
  font-size:28px!important;
  line-height:34px!important;
  font-weight:700!important;
  letter-spacing:-.02em;
  color:#172631;
}
.listo-notifications-page__head p{
  margin:0!important;
  padding:0!important;
  color:#687681;
  font-size:14px!important;
  line-height:21px!important;
}
.listo-notifications-mark-all{
  flex:0 0 auto;
  border:0!important;
  background:transparent!important;
  color:#263238!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:20px;
  cursor:pointer;
  padding:3px 0!important;
}
.listo-notifications-mark-all:hover,
.listo-notifications-mark-all:focus-visible{color:#2196F3!important}
.listo-notifications-mark-all[hidden]{display:none!important}
.listo-notifications-filter{
  display:flex;
  align-items:flex-end;
  gap:28px;
  margin:0 0 6px!important;
  border-bottom:1px solid #e9eef1;
}
.listo-notifications-filter button{
  position:relative;
  border:0!important;
  background:transparent!important;
  color:#5f707c!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:20px;
  padding:0 0 12px!important;
  cursor:pointer;
}
.listo-notifications-filter button.is-active{
  color:#2196F3!important;
  border-bottom:2px solid #2196F3!important;
  margin-bottom:-1px;
}
.listo-notifications-filter button:focus-visible{
  outline:2px solid #2196F3;
  outline-offset:3px;
  border-radius:2px;
}
.listo-notifications-filter__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:17px;
  height:17px;
  margin-left:5px;
  padding:0 5px;
  border-radius:999px;
  background:#EAF5FF;
  color:#1565A8;
  font-size:10px;
  line-height:17px;
  vertical-align:1px;
}
.listo-notifications-filter__count[hidden]{display:none!important}
.listo-notifications-list{border-top:0!important}
.listo-notifications-page .listo-notification-item{
  grid-template-columns:38px minmax(0,1fr) 8px;
  gap:11px;
  width:100%;
  padding:18px 4px!important;
  background:#fff!important;
  border-bottom:1px solid #edf1f3;
  box-sizing:border-box;
}
.listo-notifications-page .listo-notification-item:hover{background:#f8fbfd!important}
.listo-notifications-page .listo-notification-item.is-unread{
  background:#F7FBFF!important;
}
.listo-notifications-page .listo-notification-item__icon{
  width:34px!important;
  height:34px!important;
  border-radius:10px!important;
  color:#5F7B8D!important;
  background:#F5F9FC!important;
  border:1px solid #DFEAF1;
}
.listo-notifications-page .listo-notification-item__content strong{
  font-size:14px!important;
  line-height:20px!important;
}
.listo-notifications-page .listo-notification-item__content span{
  font-size:13px!important;
  line-height:19px!important;
}
.listo-notifications-page .listo-notification-item__content small{
  font-size:11px!important;
  line-height:16px;
}
.listo-notifications-page .listo-notification-item__dot{
  width:6px;
  height:6px;
  background:#2196F3!important;
  margin-top:7px;
}
.listo-notifications-page .listo-notification-item:focus-visible{
  outline:2px solid #2196F3!important;
  outline-offset:-2px;
}
.listo-notifications-empty{padding:64px 20px!important}
.listo-notifications-error button,
.listo-notifications-loadmore button{
  border-color:#D7E8F6!important;
  color:#2196F3!important;
  background:#fff!important;
}
.listo-notifications-error button:hover,
.listo-notifications-loadmore button:hover{background:#F7FBFF!important}

@media(max-width:800px){
  .listo-notifications-main{padding:0!important}
  .listo-notifications-page{padding:20px 0 32px!important}
  .listo-notifications-page__head{
    align-items:flex-start;
    gap:14px;
    margin-bottom:24px!important;
  }
  .listo-notifications-page__head h1{
    font-size:24px!important;
    line-height:30px!important;
  }
  .listo-notifications-page__head p{
    font-size:13px!important;
    line-height:19px!important;
  }
  .listo-notifications-mark-all{font-size:11px!important}
  .listo-notifications-filter{gap:24px}
  .listo-notifications-filter button{font-size:13px!important;padding-bottom:10px!important}
  .listo-notifications-page .listo-notification-item{padding:14px 0!important}
}

/* ========================================================================
   NEXT1360 — Notification Center blue parity (Guest + Host)
   The bell is an awareness indicator, not an error state. Keep red reserved
   for genuinely destructive/urgent notification semantics.
   ======================================================================== */
.listo-notification-bell:focus-visible{
  outline:2px solid #2196F3!important;
  outline-offset:2px;
}
.listo-notification-bell__badge{
  background:#2196F3!important;
  color:#fff!important;
}
.listo-notification-panel__head button,
.listo-notifications-mark-all{
  color:#263238!important;
}
.listo-notification-panel__head button:hover,
.listo-notification-panel__head button:focus-visible,
.listo-notification-panel__all:hover,
.listo-notification-panel__all:focus-visible,
.listo-notifications-mark-all:hover,
.listo-notifications-mark-all:focus-visible{
  color:#2196F3!important;
}
.listo-notification-panel__all{
  color:#2196F3!important;
}
.listo-notification-item.is-unread{
  background:#F7FBFF!important;
}
.listo-notification-item__icon{
  color:#5F7B8D!important;
  background:#F5F9FC!important;
  border:1px solid #DFEAF1;
}
.listo-notification-item__dot{
  background:#2196F3!important;
}
.listo-notification-item:focus-visible{
  outline:2px solid #2196F3!important;
  outline-offset:-2px;
}


/* ========================================================================
   NEXT1364 — Host Home uses a dedicated root, not the generic .listo-container
   ------------------------------------------------------------------------
   The generic Host account canvas has accumulated historical width rules.
   Host Home is a separate business workspace and should never participate in
   those rules. The template root therefore carries only the Host Home classes.
   ======================================================================== */
@media (min-width: 901px) {
  body[data-listo-mode="host"] .listo-main--host-home > .listo-host-home-canvas {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ========================================================================
   NEXT1362 — Canonical Host Home desktop workspace canvas
   ------------------------------------------------------------------------
   Host Home is the one top-level Host page that acts as the consolidated
   business workspace. Its root must not inherit any centered content-column
   ceiling from older Dashboard 2.0 iterations. Keep the shared Host shell
   fluid; individual cards/components retain their own internal sizing.

   This is a source-level cleanup, not another specificity patch. The older
   Host Home max-width declarations have been removed from the definitions
   above, so refresh/load order no longer changes the geometry.
   ======================================================================== */
@media (min-width: 901px) {
  body[data-listo-mode="host"] .listo-main--host-home {
    width: calc(100% - 236px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 236px !important;
    margin-right: 0 !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
  }

  body[data-listo-mode="host"] .listo-main--host-home > .listo-host-home-canvas {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  body[data-listo-mode="host"] .listo-main--host-home {
    width: calc(100% - 220px) !important;
    margin-left: 220px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* NEXT1363 — Isolate confirmed-booking data from the Host Home canvas.
 * A finalized booking activates the financial/listing-performance datasets.
 * Those datasets contain tables whose intrinsic column widths were allowed to
 * participate in the desktop shell sizing. Empty accounts never rendered the
 * populated rows, which made the regression appear account-specific.
 * Keep the canonical shell fluid and force every data-bearing Home panel to
 * participate as a shrinkable block. Booking/payment calculations are untouched.
 */
@media (min-width: 901px) {
  body[data-listo-mode="host"] .listo-main--host-home > .listo-host-home--analytics,
  body[data-listo-mode="host"] .listo-main--host-home > .listo-host-home--analytics > *,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-monthly-business,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-monthly-card,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-listing-performance,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-monthly-split-grid,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-analytics-grid,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-analytics-panel,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-analytics-listings,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-analytics-table {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body[data-listo-mode="host"] .listo-main--host-home .listo-host-listing-table,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-analytics-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body[data-listo-mode="host"] .listo-main--host-home .listo-host-listing-table,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-analytics-table {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body[data-listo-mode="host"] .listo-main--host-home .listo-host-analytics-table__head,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-analytics-table__row {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1.6fr) repeat(6, minmax(0, 1fr)) !important;
  }
}


/* NEXT1365 — Keep confirmed-booking data from controlling Host Home geometry.
 * Booking-derived titles, references and large numeric fields are presentation
 * data: they must clip/wrap inside their assigned grid tracks, not contribute
 * unbounded min-content width to the dashboard shell. */
@media (min-width: 901px) {
  body[data-listo-mode="host"] .listo-main--host-home,
  body[data-listo-mode="host"] .listo-main--host-home > .listo-host-home-canvas,
  body[data-listo-mode="host"] .listo-main--host-home .listo-home-section,
  body[data-listo-mode="host"] .listo-main--host-home .listo-home-attention,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-monthly-business,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-monthly-chart-card,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-monthly-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body[data-listo-mode="host"] .listo-main--host-home .listo-home-section-head,
  body[data-listo-mode="host"] .listo-main--host-home .listo-home-section-head > div,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-monthly-head,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-monthly-head > div,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-monthly-controls {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body[data-listo-mode="host"] .listo-main--host-home .listo-home-upcoming > a {
    min-width: 0 !important;
    grid-template-columns: 70px minmax(0, 1fr) minmax(0, auto) 20px !important;
  }
  body[data-listo-mode="host"] .listo-main--host-home .listo-home-upcoming__main {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  body[data-listo-mode="host"] .listo-main--host-home .listo-home-upcoming__main strong,
  body[data-listo-mode="host"] .listo-main--host-home .listo-home-upcoming__main small {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body[data-listo-mode="host"] .listo-main--host-home .listo-home-upcoming__status {
    min-width: 0 !important;
    max-width: 112px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body[data-listo-mode="host"] .listo-main--host-home .listo-home-today-grid,
  body[data-listo-mode="host"] .listo-main--host-home .listo-home-today-card,
  body[data-listo-mode="host"] .listo-main--host-home .listo-home-today-card__body {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body[data-listo-mode="host"] .listo-main--host-home .listo-home-today-card h3,
  body[data-listo-mode="host"] .listo-main--host-home .listo-home-today-card p,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-monthly-metric strong,
  body[data-listo-mode="host"] .listo-main--host-home .listo-host-monthly-metric em {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* NEXT1371 — Host Home: 20px gap under the site header on mobile.
   A later Home padding shorthand had reset padding-top to 0. */
@media (max-width: 900px) {
  body[data-listo-mode="host"] .listo-main > .listo-host-home--analytics,
  body[data-listo-mode="host"] .listo-main > .listo-container.listo-section.listo-host-home--analytics {
    padding-top: 20px !important;
  }
  body[data-listo-mode="host"] .listo-host-home--analytics .listo-dashboard-v2__header:first-child {
    margin-top: 0 !important;
  }
}

/* NEXT1371 — Shared account-header scale on mobile.
   Host is the source. Guest account pages (Wallet, Trips, Inbox, etc.)
   use the same logo, switcher, bell, and avatar sizing. Guest Home is
   unchanged. */
@media (max-width: 900px) {
  body[data-listo-mode="host"] .listo-header--host .listo-header__inner,
  body[data-listo-mode="guest"] .listo-header--guest-account .listo-header__inner {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    row-gap: 0 !important;
    padding: 10px 12px !important;
  }
  body[data-listo-mode="host"] .listo-header--host .listo-logo,
  body[data-listo-mode="guest"] .listo-header--guest-account .listo-logo {
    min-width: 0;
  }
  body[data-listo-mode="host"] .listo-header--host .listo-logo img,
  body[data-listo-mode="guest"] .listo-header--guest-account .listo-logo img {
    height: 24px;
  }
  body[data-listo-mode="host"] .listo-header--host .listo-header__account-group,
  body[data-listo-mode="guest"] .listo-header--guest-account .listo-header__account-group {
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-width: 0;
  }
  body[data-listo-mode="host"] .listo-header--host .listo-mode-toggle,
  body[data-listo-mode="guest"] .listo-header--guest-account .listo-mode-toggle {
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    padding: 5px 8px !important;
    gap: 0 !important;
  }
  body[data-listo-mode="host"] .listo-header--host .listo-notification-bell,
  body[data-listo-mode="guest"] .listo-header--guest-account .listo-notification-bell {
    width: 32px !important;
    height: 32px !important;
  }
  body[data-listo-mode="host"] .listo-header--host .listo-notification-bell svg,
  body[data-listo-mode="guest"] .listo-header--guest-account .listo-notification-bell svg {
    width: 18px !important;
    height: 18px !important;
  }
  body[data-listo-mode="host"] .listo-header--host .listo-account-name,
  body[data-listo-mode="host"] .listo-header--host .listo-account-caret,
  body[data-listo-mode="guest"] .listo-header--guest-account .listo-account-name,
  body[data-listo-mode="guest"] .listo-header--guest-account .listo-account-caret {
    display: none !important;
  }
  body[data-listo-mode="host"] .listo-header--host .listo-account-trigger,
  body[data-listo-mode="guest"] .listo-header--guest-account .listo-account-trigger {
    padding: 3px !important;
    gap: 0 !important;
  }
  body[data-listo-mode="host"] .listo-header--host .listo-account-avatar,
  body[data-listo-mode="guest"] .listo-header--guest-account .listo-account-avatar {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
  }
}

/* NEXT1371 — Interactive Host Home chart tooltips (desktop hover, mobile tap). */
.listo-host-simple-chart__item,
.listo-host-analytics-chart__day {
  cursor: pointer;
}
.listo-host-simple-chart__item.is-chart-active .listo-host-simple-chart__track span {
  background: #0B6CB3 !important;
}
.listo-host-analytics-chart__day.is-chart-active .listo-host-analytics-chart__bars i,
.listo-host-analytics-chart__day.is-chart-active .listo-host-analytics-chart__bars b {
  outline: 2px solid rgba(33,150,243,.35);
  outline-offset: 1px;
}
.listo-host-chart-tip {
  position: fixed;
  z-index: 10200;
  min-width: 148px;
  max-width: min(240px, calc(100vw - 16px));
  padding: 10px 12px;
  border: 1px solid #DCE3E8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(23,38,49,.14);
  pointer-events: none;
  color: #172631;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}
.listo-host-chart-tip[hidden] {
  display: none !important;
}
.listo-host-chart-tip strong {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  text-align: center;
}
.listo-host-chart-tip__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  color: #5E6B74;
  font-size: 11px;
  text-align: center;
}
.listo-host-chart-tip__row + .listo-host-chart-tip__row {
  margin-top: 4px;
}
.listo-host-chart-tip__row b {
  margin-left: 0;
  color: #172631;
  font-variant-numeric: tabular-nums;
}
.listo-host-chart-tip__row i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2196F3;
  flex: 0 0 7px;
}
.listo-host-chart-tip__row i.is-views {
  background: #cfd8de;
}
.listo-host-simple-chart__value,
.listo-host-simple-chart__item small {
  text-align: center;
}

/* NEXT1371 — Center Host Home KPI tiles. Tables, breakdowns, and funnel
   stay left-aligned so rows remain scannable. */
.listo-host-monthly-metric,
.listo-host-analytics-kpi,
.listo-host-live-traffic__grid > div {
  text-align: center !important;
}
.listo-host-monthly-metric span,
.listo-host-monthly-metric strong,
.listo-host-monthly-metric small,
.listo-host-monthly-metric em,
.listo-host-analytics-kpi span,
.listo-host-analytics-kpi b,
.listo-host-analytics-kpi em,
.listo-host-live-traffic__grid span,
.listo-host-live-traffic__grid strong,
.listo-host-live-traffic__grid small {
  text-align: center !important;
}

/* NEXT1371 — Center per-listing metric columns.
   Listing names stay left. Conversion funnel stays left-aligned. */
.listo-host-analytics-table__head > span:not(:first-child),
.listo-host-analytics-table__row > span {
  text-align: center !important;
}
.listo-host-analytics-table__head > span:first-child,
.listo-host-analytics-table__row > strong {
  text-align: left !important;
}

/* NEXT1371 — Dock notification badges must stay pills, not label-sized bars.
   Bookings/Inbox append a badge as the last span; label last-child rules
   must not apply to it. */
.listo-host-floating-dock .listo-account-notification-badge,
.listo-dashboard-v2__dock .listo-account-notification-badge,
.listo-guest-floating-dock .listo-account-notification-badge {
  position: absolute !important;
  top: 4px !important;
  right: 6px !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 16px !important;
  max-width: 28px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  line-height: 1 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}
.listo-host-floating-dock .listo-account-notification-badge[hidden],
.listo-dashboard-v2__dock .listo-account-notification-badge[hidden],
.listo-guest-floating-dock .listo-account-notification-badge[hidden] {
  display: none !important;
}

/* Host Referral Center — Management page, desktop + mobile */
.listo-host-referral-page {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.listo-host-referral-page > .listo-page-title-row {
  margin: 0 !important;
  gap: 0 !important;
}
.listo-host-referral-page > .listo-page-title-row > h1 {
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}
.listo-host-referral-page > .listo-page-intro {
  max-width: 760px;
  margin: 6px 0 18px !important;
  color: var(--ink-muted, #667085);
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.listo-host-referral-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #e4e7ec;
  background: #f8fafc;
  margin: 0 0 18px;
}
.listo-host-referral-banner p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #475467;
}
.listo-host-referral-banner--active { background: #ecfdf3; border-color: #abefc6; }
.listo-host-referral-banner--paused_underfunded,
.listo-host-referral-banner--paused_manual { background: #fff6ed; border-color: #fdc6a1; }
.listo-host-referral-pill--warn {
  background: #ffead5 !important;
  color: #b54708 !important;
}
.listo-host-referral-pill--off {
  background: #f2f4f7 !important;
  color: #475467 !important;
}
.listo-host-referral-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.listo-host-referral-card {
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #fff;
  padding: 22px;
  box-sizing: border-box;
}
.listo-host-referral-card__header h2 {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.3;
}
.listo-host-referral-card__header .listo-caption {
  margin: 6px 0 0;
}
.listo-host-referral-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 12px;
}
.listo-host-referral-metrics div {
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
}
.listo-host-referral-metrics span {
  display: block;
  font-size: 12px;
  color: #667085;
  margin-bottom: 4px;
}
.listo-host-referral-metrics strong {
  font-size: 18px;
  color: #101828;
}
.listo-host-referral-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.listo-host-referral-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 14px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.listo-host-referral-toggle input { margin-top: 2px; }
.listo-host-referral-percent-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.listo-host-referral-percent-row input[type="range"] { flex: 1; }
.listo-host-referral-percent-row strong { min-width: 42px; }
.listo-host-referral-help {
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #fff;
  padding: 14px 18px;
  margin: 0 0 16px;
}
.listo-host-referral-help summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
}
.listo-host-referral-help ol {
  margin: 12px 0 4px 18px;
  padding: 0;
  color: #475467;
  font-size: 14px;
  line-height: 1.5;
}
.listo-host-referral-empty {
  margin: 8px 0 0;
  color: #667085;
}
.listo-host-referral-table__head,
.listo-host-referral-table__row {
  display: grid;
  grid-template-columns: 1.2fr 1.3fr 1fr 0.6fr 0.8fr 0.9fr;
  gap: 10px;
  align-items: center;
}
.listo-host-referral-table__head {
  font-size: 12px;
  color: #667085;
  padding: 0 4px 10px;
  border-bottom: 1px solid #eaecf0;
}
.listo-host-referral-table__row {
  padding: 12px 4px;
  border-bottom: 1px solid #f2f4f7;
  font-size: 14px;
}
.listo-host-referral-table__row strong { font-weight: 600; }
.listo-host-referral-row-status--spent { color: #067647; }
.listo-host-referral-row-status--reserve { color: #b54708; }
.listo-host-referral-row-status--return { color: #175cd3; }
.listo-host-referral-row-status--skip { color: #667085; }
.listo-host-referral-topup-dialog { width: min(100%, 560px); }
#listo-host-referral-topup-modal[hidden] { display: none !important; }
#listo-host-referral-topup-modal { z-index: 10080; }
.listo-host-referral-pay-listo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #f8fafc;
}
.listo-host-referral-pay-listo__qr {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  background: #fff;
}
.listo-host-referral-pay-listo__copy {
  text-align: center;
}
.listo-host-referral-pay-listo p { margin: 4px 0 0; font-size: 13px; color: #475467; }
.listo-host-referral-pay-listo .listo-payment-qr-gallery {
  width: 100%;
  margin: 0 0 8px;
}

@media (min-width: 901px) {
  body[data-listo-mode="host"] .listo-host-referral-page > .listo-page-title-row > h1 {
    font-size: 26px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
  }
  body[data-listo-mode="host"] .listo-host-referral-page > .listo-page-intro {
    margin: 5px 0 20px !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }
}

@media (max-width: 900px) {
  body.listo-modal-open { overflow: hidden; }
  body.listo-modal-open .listo-host-floating-dock,
  body.listo-modal-open .listo-dashboard-v2__dock {
    visibility: hidden;
    pointer-events: none;
  }
  #listo-host-referral-topup-modal {
    padding: 12px;
    align-items: center;
    justify-content: center;
  }
  #listo-host-referral-topup-modal .listo-host-referral-topup-dialog {
    width: 100%;
    max-height: 100%;
    overflow: auto;
    padding: 18px 16px 16px;
    border-radius: 18px;
    -webkit-overflow-scrolling: touch;
  }
  #listo-host-referral-topup-modal .listo-host-referral-topup-dialog h2 {
    margin-bottom: 6px;
    font-size: 20px;
  }
  #listo-host-referral-topup-modal .listo-earnings-modal__intro {
    margin-bottom: 12px;
    font-size: 12px;
  }
  #listo-host-referral-topup-modal .listo-host-referral-pay-listo {
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px;
  }
  #listo-host-referral-topup-modal .listo-host-referral-pay-listo__qr {
    width: 168px;
    max-width: 168px;
  }
  .listo-host-referral-page { padding-bottom: 120px; }
  .listo-host-referral-page > .listo-page-title-row > h1 {
    font-size: 20px !important;
    line-height: 25px !important;
  }
  .listo-host-referral-top { grid-template-columns: 1fr; }
  .listo-host-referral-metrics { grid-template-columns: 1fr; }
  .listo-host-referral-banner { flex-direction: column; gap: 8px; }
  .listo-host-referral-table__head { display: none; }
  .listo-host-referral-table__row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name amount"
      "listing status"
      "booking rate";
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
  }
  .listo-host-referral-table__row strong { grid-area: name; }
  .listo-host-referral-table__row span:nth-child(2) { grid-area: listing; color: #667085; }
  .listo-host-referral-table__row span:nth-child(3) { grid-area: booking; }
  .listo-host-referral-table__row span:nth-child(4) { grid-area: rate; text-align: right; }
  .listo-host-referral-table__row span:nth-child(5) { grid-area: amount; text-align: right; font-weight: 600; }
  .listo-host-referral-table__row span:nth-child(6) { grid-area: status; text-align: right; }
}

.listo-host-referral-row-status--paid { color: #067647; }
.listo-host-referral-row-status--pending { color: #b54708; }
.listo-host-referral-row-status--not_funded { color: #667085; }
.listo-host-referral-row-status--returned { color: #175cd3; }
.listo-affiliate-table .listo-host-referral-table__head,
.listo-affiliate-table .listo-host-referral-table__row {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 0.55fr 0.85fr 0.85fr;
}
@media (max-width: 900px) {
  .listo-affiliate-page { padding-bottom: 120px; }
  .listo-affiliate-table .listo-host-referral-table__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "listing listing"
      "host status"
      "rate amount";
    gap: 6px 12px;
    align-items: start;
  }
  .listo-affiliate-table .listo-host-referral-table__row > * {
    min-width: 0;
  }
  .listo-affiliate-table .listo-host-referral-table__row .listo-affiliate-table__listing {
    grid-area: listing;
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .listo-affiliate-table .listo-host-referral-table__row .listo-affiliate-table__host {
    grid-area: host;
    color: #667085;
    font-size: 13px;
    line-height: 1.35;
  }
  .listo-affiliate-table .listo-host-referral-table__row .listo-affiliate-table__rate {
    grid-area: rate;
    color: #667085;
    font-size: 13px;
    text-align: left;
  }
  .listo-affiliate-table .listo-host-referral-table__row .listo-affiliate-table__amount {
    grid-area: amount;
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
  }
  .listo-affiliate-table .listo-host-referral-table__row .listo-affiliate-table__status {
    grid-area: status;
    text-align: right;
    white-space: nowrap;
  }
}

/* Canonical save / edit button states.
   Save (or first-time setup) is brand fill + white text. After save, Edit settings
   is white fill + black text. Parking keeps its orange brand on Save only. */
.listo-btn.listo-btn--primary:not(.listo-btn--edit) {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
body[data-listo-host-context="parking"] .listo-btn.listo-btn--edit,
body[data-listo-host-context="parking"] .listo-btn.listo-btn--primary.listo-btn--edit,
.listo-guest-edit-profile .listo-guest-profile-action.listo-btn--edit,
.listo-guest-edit-profile .listo-guest-profile-action.listo-btn--edit:hover,
.listo-guest-edit-profile .listo-guest-profile-action.listo-btn--edit:focus-visible {
  background: #fff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border-color: #111827 !important;
}