/* ============================================================
   COUCH & CHAIR — MOBILE APP STYLES (FIX 17D)
   Activates at <=768px. Desktop unchanged.
   ============================================================ */

@media (max-width: 768px){

  :root{
    --m-bg: #F2F2F2;
    --m-white: #FFFFFF;
    --m-ink: #2D4A3E;
    --m-ink-soft: #4A5550;
    --m-muted: #6E7A72;
    --m-line: #E0DDD6;
    --m-terracotta: #C8553D;
    --m-terracotta-dark: #A8412C;
    --m-mustard: #C9962A;
    --m-overlay: #FAF7F1;
  }

  /* ===== Page foundation ===== */
  body{
    background: var(--m-bg);
    color: var(--m-ink);
    -webkit-font-smoothing: antialiased;
    margin: 0;
  }
  main, #appMain{
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .container{
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }

  /* Hide desktop chrome (header + footer); they're replaced by hero brand row + bottom nav */
  .site-header{ display: none; }
  .site-footer{ display: none; }

  /* ============================================================
     HOME (Space)
     ============================================================ */
  #view-home{ padding: 0; margin: 0; }

  /* ===== HERO ===== */
  #view-home .hero{
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 540px;
    max-height: 680px;
    margin: 0;
    overflow: hidden;
  }
  #view-home .hero-slider{
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  #view-home .hero-slide{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .6s ease;
  }
  #view-home .hero-slide.active{ opacity: 1; }
  #view-home .hero-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.10) 35%,
      rgba(0,0,0,0.55) 100%);
    pointer-events: none;
  }

  /* Brand row on hero — logo SVG (left) + bell icon (right) */
  #view-home .hero::before{
    content: "";
    position: absolute;
    top: calc(1rem + env(safe-area-inset-top, 0px));
    left: 1.25rem;
    z-index: 5;
    width: 150px;
    height: 38px;
    background-image: url("logo-wide.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    /* Make the SVG appear white on the dark hero. The original SVG is dark, so we
       use a CSS filter to invert it to a clean off-white. */
    filter: brightness(0) invert(1) opacity(0.95);
    pointer-events: none;
  }
  /* Real notification bell button. By default it's decorative (no click action);
     when there are unread messages it gains a .has-unread class and becomes clickable. */
  .hero-notif-btn{
    position: absolute;
    top: calc(1rem + env(safe-area-inset-top, 0px));
    right: 1.25rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;             /* decorative by default */
    padding: 0;
    color: var(--m-overlay);
  }
  .hero-notif-btn.has-unread{
    cursor: pointer;
  }
  .hero-notif-btn.has-unread:active{ transform: scale(0.92); }
  .hero-notif-btn svg{
    width: 18px;
    height: 18px;
    stroke: var(--m-overlay);
    fill: none;
  }
  /* Red dot indicator when there are unread messages */
  .hero-notif-dot{
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--m-terracotta);
    border: 2px solid var(--m-bg);
    color: var(--m-overlay);
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    box-sizing: content-box;
  }
  .hero-notif-dot.has-count{
    min-width: 16px;
    height: 16px;
    padding: 0 .25rem;
    top: 2px;
    right: 2px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 16px;
  }
  #view-home .hero-content{
    position: absolute;
    inset: 0;
    padding: 5rem 1.5rem 9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--m-overlay);
    z-index: 2;
  }
  #view-home .hero-eyebrow{
    display: inline-block;
    width: fit-content;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--m-overlay);
    padding: .4rem .85rem;
    border-radius: 999px;
    font-family: Manrope, sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 1rem;
  }
  #view-home .hero-title{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2.8rem;
    line-height: 1;
    font-weight: 400;
    color: var(--m-overlay);
    margin: 0 0 1rem;
    letter-spacing: -0.015em;
  }
  #view-home .hero-title em{
    font-style: italic;
    font-weight: 400;
    color: var(--m-mustard);
  }
  #view-home .hero-sub{
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(250, 247, 241, 0.9);
    margin: 0;
    max-width: 320px;
  }
  #view-home .hero-dots{
    position: absolute;
    bottom: 105px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .4rem;
    z-index: 3;
    /* Override desktop's 9rem bottom */
    right: auto;
  }
  #view-home .hero-dot{
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.45);
    border: none;
    padding: 0;
    transition: width .25s ease, background .25s ease;
  }
  #view-home .hero-dot.active{
    background: var(--m-overlay);
    width: 24px;
  }

  /* ===== SEARCH PILL (Home) — collapses inputs into one tap target =====
     Centered with a max-width so it stays elegant on wider mobile/tablet too. */
  #view-home .search-bar{
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 28px;
    width: calc(100% - 2rem);
    max-width: 480px;
    background: var(--m-white);
    border-radius: 999px;
    padding: 0;
    box-shadow: 0 18px 50px rgba(26,38,34,0.18);
    z-index: 4;
    border: none;
    min-height: 56px;
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  /* Hide everything inside the real search bar */
  #view-home .search-bar .search-field,
  #view-home .search-bar .search-divider,
  #view-home .search-bar #homeFilterBtn,
  #view-home .search-bar #searchBtn{
    display: none !important;
  }
  /* Show a single overlay button that triggers the search bottom-sheet */
  #view-home .search-bar::before{
    content: "Search city or state...";
    flex: 1;
    padding: 0 .5rem 0 3rem;
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-muted);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7A72' stroke-width='2'><path d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/><circle cx='12' cy='10' r='3'/></svg>");
    background-repeat: no-repeat;
    background-position: 1rem center;
    background-size: 18px;
    line-height: 56px;
    color: var(--m-muted);
  }
  #view-home .search-bar::after{
    content: "";
    width: 44px;
    height: 44px;
    margin: 6px;
    border-radius: 50%;
    background-color: var(--m-terracotta);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF7F1' stroke-width='2.5' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    flex-shrink: 0;
  }

  /* ===== CATEGORIES (horizontal scrollable pills) ===== */
  #view-home .categories{
    display: flex !important;
    flex-wrap: nowrap;
    gap: .55rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem 1.25rem 1rem;
    margin: 0;
    scrollbar-width: none;
  }
  #view-home .categories::-webkit-scrollbar{ display: none; }
  #view-home .cat-pill{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem 1.1rem;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 999px;
    color: var(--m-ink);
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #view-home .cat-pill svg{
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
  }
  #view-home .cat-pill.active{
    background: var(--m-ink);
    color: var(--m-overlay);
    border-color: var(--m-ink);
  }
  #view-home .cat-pill.active svg{ stroke: var(--m-overlay); }

  /* ===== FEATURED — section head + horizontal carousel of cards ===== */
  #view-home > section.container,
  #view-home section.container{
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  #view-home .section-head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 0 1rem;
    gap: 1rem;
  }
  .eyebrow{
    display: block;
    font-family: Manrope, sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--m-terracotta);
    text-transform: uppercase;
    margin-bottom: .25rem;
  }
  .section-title{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.1;
    margin: 0;
    color: var(--m-ink);
    letter-spacing: -0.01em;
  }
  .section-title em{
    font-style: italic;
    color: var(--m-terracotta);
  }
  .link-arrow{
    color: var(--m-terracotta);
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* The featured grid becomes a horizontal swipeable carousel */
  #view-home #featuredGrid{
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    gap: .9rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Extend right so the last card has room to scroll past padding */
    margin: 0 -1.25rem;
    padding: 0 1.25rem 1.5rem;
  }
  #view-home #featuredGrid::-webkit-scrollbar{ display: none; }
  /* When there's only one property, show it full-width (no carousel) */
  #view-home #featuredGrid:has(.property-card:only-child){
    margin: 0;
    padding: 0 1.25rem 1.5rem;
    overflow: visible;
    display: block !important;
  }
  #view-home #featuredGrid:has(.property-card:only-child) .property-card{
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  #view-home #featuredGrid:has(.property-card:only-child) .property-card .prop-img{
    aspect-ratio: 16 / 11;
  }
  #view-home #featuredGrid .property-card{
    flex: 0 0 70%;       /* 1.4 cards visible — next one peeks */
    max-width: 280px;
    scroll-snap-align: start;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
  }

  /* Extra category groups (rendered below Featured by JS) — same look */
  #view-home .cc-extra-group{
    padding: 0 1.25rem 0;
    margin: 1rem 0 0;
  }
  #view-home .cc-extra-group .section-head{
    margin: 0 0 .75rem;
  }
  #view-home .cc-extra-group .eyebrow{
    font-family: Manrope, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    color: var(--m-muted);
    text-transform: uppercase;
    letter-spacing: .12em;
  }
  #view-home .cc-extra-grid{
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    gap: .9rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -1.25rem;
    padding: 0 1.25rem 1.5rem;
  }
  #view-home .cc-extra-grid::-webkit-scrollbar{ display: none; }
  #view-home .cc-extra-grid .property-card{
    flex: 0 0 70%;
    max-width: 280px;
    scroll-snap-align: start;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  /* Single-card group → full width */
  #view-home .cc-extra-grid:has(.property-card:only-child){
    margin: 0;
    padding: 0 0 1.5rem;
    overflow: visible;
    display: block !important;
  }
  #view-home .cc-extra-grid:has(.property-card:only-child) .property-card{
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  #view-home .cc-extra-grid:has(.property-card:only-child) .property-card .prop-img{
    aspect-ratio: 16 / 11;
  }
  /* Reuse the same image / meta / price styles as #featuredGrid */
  #view-home .cc-extra-grid .property-card .prop-img,
  #view-home #featuredGrid .property-card .prop-img{
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
    background-color: var(--m-line);
    margin: 0 0 .5rem;
  }
  #view-home #featuredGrid .property-card .prop-img{
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
    background-color: var(--m-line);
    margin: 0 0 .65rem;
  }
  #view-home #featuredGrid .property-card .prop-img-badge{
    position: absolute;
    top: .6rem;
    left: .6rem;
    background: var(--m-white);
    color: var(--m-ink);
    padding: .25rem .55rem;
    border-radius: 999px;
    font-family: Manrope, sans-serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .08em;
    border: none;
    z-index: 2;
  }
  #view-home #featuredGrid .property-card .prop-fav{
    position: absolute;
    top: .55rem;
    right: .55rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--m-white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    border: none;
  }
  #view-home #featuredGrid .property-card .prop-fav svg{
    width: 15px;
    height: 15px;
    color: var(--m-ink);
  }
  #view-home #featuredGrid .property-card .prop-meta-row{
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: .15rem;
    margin: 0;
    padding: 0;
  }
  #view-home #featuredGrid .property-card .prop-meta-row > span:first-child{
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--m-ink);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }
  #view-home #featuredGrid .property-card .prop-rating{
    font-family: Manrope, sans-serif;
    font-size: .82rem;
    font-weight: 600;
    color: var(--m-ink);
  }
  #view-home #featuredGrid .property-card .prop-loc{
    font-family: Manrope, sans-serif;
    font-size: .8rem;
    color: var(--m-muted);
    margin: .05rem 0 .3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #view-home #featuredGrid .property-card .prop-price{
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--m-ink);
    margin: 0;
  }
  #view-home #featuredGrid .property-card .prop-price small{
    font-weight: 400;
    color: var(--m-muted);
    font-size: .8rem;
  }

  /* ============================================================
     FLOATING "BECOME A HOST" BUTTON
     Only visible on Home view, mobile only.
     ============================================================ */
  .fab-become-host{
    display: none;
  }
  /* Show only when view-home is active */
  #view-home.active ~ .fab-become-host,
  body:has(#view-home.active) .fab-become-host{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    position: fixed;
    right: 1rem;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    background: var(--m-terracotta);
    color: var(--m-overlay);
    padding: .85rem 1.25rem .85rem 1.1rem;
    border-radius: 999px;
    text-decoration: none;
    font-family: Manrope, sans-serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 8px 24px rgba(200,85,61,0.4);
    z-index: 850;
    border: none;
    cursor: pointer;
  }
  .fab-become-host svg{
    width: 18px;
    height: 18px;
    stroke: var(--m-overlay);
    fill: none;
  }
  .fab-become-host:active{ transform: scale(0.96); }

  /* ============================================================
     BOTTOM NAVIGATION
     ============================================================ */
  .mobile-bottom-nav{
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--m-bg);
    border-top: 1px solid var(--m-line);
    z-index: 900;
    padding: .5rem 0 calc(.4rem + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    align-items: stretch;
  }
  .mb-nav-item{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .4rem .15rem;
    color: var(--m-muted);
    text-decoration: none;
    font-family: Manrope, sans-serif;
    font-size: .68rem;
    font-weight: 600;
    position: relative;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .mb-nav-item svg{
    width: 22px;
    height: 22px;
    stroke-width: 2;
    stroke: currentColor;
    fill: none;
  }
  /* Profile tab avatar — fits in the same 22px slot as other icons */
  .mb-profile-avatar{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-color: transparent;
    color: inherit;
    overflow: hidden;
    font-family: Manrope, sans-serif;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
  }
  /* When showing initials (no photo), add a subtle background so they read */
  .mb-profile-avatar.has-initials{
    background-color: var(--m-ink);
    color: var(--m-overlay);
    border: 1.5px solid var(--m-ink);
  }
  .mb-profile-avatar.has-photo{
    border: 1.5px solid var(--m-line);
  }
  /* When using photo/initials we hide the inner SVG */
  .mb-profile-avatar.has-photo svg,
  .mb-profile-avatar.has-initials svg{
    display: none;
  }
  /* Active profile tab — ring around the avatar */
  .mb-nav-item.active .mb-profile-avatar.has-photo,
  .mb-nav-item.active .mb-profile-avatar.has-initials{
    box-shadow: 0 0 0 2px var(--m-ink);
  }
  .mb-nav-item.active{ color: var(--m-ink); }
  .mb-nav-item.active svg{ stroke-width: 2.3; }
  .mb-nav-item:active{ transform: scale(0.94); }
  .mb-nav-badge{
    position: absolute;
    top: .15rem;
    right: 25%;
    background: var(--m-terracotta);
    color: var(--m-white);
    font-size: .56rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    padding: 0 .35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--m-bg);
  }

  /* ============================================================
     AUTH GATE — shown when not logged in tries Saved/Messages/Profile
     ============================================================ */
  .auth-gate{
    position: fixed;
    inset: 0;
    background: var(--m-bg);
    z-index: 800;
    padding: 5rem 1.5rem calc(120px + env(safe-area-inset-bottom, 0px));
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .auth-gate.open{
    display: flex;
  }
  .auth-gate-inner{
    max-width: 320px;
    width: 100%;
  }
  /* Close X button — top-right of the gate */
  .auth-gate-close{
    position: absolute;
    top: calc(1rem + env(safe-area-inset-top, 0px));
    right: 1.25rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    color: var(--m-ink);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
  }
  .auth-gate-icon{
    font-size: 3rem;
    margin: 0 0 1.25rem;
  }
  .auth-gate-title{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.7rem;
    font-weight: 400;
    color: var(--m-ink);
    margin: 0 0 .65rem;
    letter-spacing: -0.01em;
  }
  .auth-gate-text{
    font-family: Manrope, sans-serif;
    font-size: .92rem;
    color: var(--m-muted);
    margin: 0 0 2rem;
    line-height: 1.5;
  }
  .auth-gate-btn-primary{
    display: block;
    width: 100%;
    padding: .9rem 1.25rem;
    background: var(--m-ink);
    color: var(--m-overlay);
    border: none;
    border-radius: 12px;
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .6rem;
    cursor: pointer;
  }
  .auth-gate-btn-secondary{
    display: block;
    width: 100%;
    padding: .9rem 1.25rem;
    background: var(--m-white);
    color: var(--m-ink);
    border: 1px solid var(--m-line);
    border-radius: 12px;
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
  }

  /* ============================================================
     SEARCH BOTTOM-SHEET (popup for the home search button)
     ============================================================ */
  .m-search-sheet{
    position: fixed;
    inset: 0;
    z-index: 950;
  }
  .m-search-sheet-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: ccFadeIn .2s ease;
  }
  .m-search-sheet-panel{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88vh;
    background: var(--m-bg);
    border-radius: 20px 20px 0 0;
    padding: .75rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
    animation: ccSheetUp .3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .m-search-sheet-handle{
    width: 42px;
    height: 4px;
    background: var(--m-line);
    border-radius: 2px;
    margin: 0 auto .75rem;
  }
  .m-search-sheet-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem .75rem;
  }
  .m-search-sheet-head h2{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--m-ink);
    margin: 0;
    letter-spacing: -0.01em;
  }
  .m-search-sheet-close{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    color: var(--m-ink);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .m-search-sheet-body{
    flex: 1;
    overflow-y: auto;
    padding: 0 1.25rem;
  }
  .m-ss-section{
    margin: 0 0 1.25rem;
  }
  .m-ss-label{
    display: block;
    font-family: Manrope, sans-serif;
    font-size: .75rem;
    font-weight: 700;
    color: var(--m-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 .5rem;
  }
  .m-ss-input-wrap{
    position: relative;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 12px;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 52px;
  }
  .m-ss-input-wrap svg{
    width: 18px;
    height: 18px;
    stroke: var(--m-muted);
    fill: none;
    flex-shrink: 0;
  }
  .m-ss-input-wrap input{
    flex: 1;
    border: none;
    background: transparent;
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    color: var(--m-ink);
    padding: 0;
    outline: none;
    min-width: 0;
    width: 100%;
    -webkit-appearance: none;
  }
  .m-ss-input-wrap input::placeholder{
    color: var(--m-muted);
  }
  .m-ss-chips{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .m-ss-chip{
    padding: .65rem 1rem;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 999px;
    color: var(--m-ink);
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-ss-chip.active{
    background: var(--m-ink);
    color: var(--m-overlay);
    border-color: var(--m-ink);
  }
  .m-ss-price-row{
    display: flex;
    align-items: center;
    gap: .75rem;
  }
  .m-ss-price-input{
    flex: 1;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 12px;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    min-height: 52px;
    font-family: Manrope, sans-serif;
    color: var(--m-muted);
  }
  .m-ss-price-input span{
    color: var(--m-muted);
    font-weight: 600;
  }
  .m-ss-price-input input{
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    color: var(--m-ink);
    padding: 0;
    outline: none;
    -webkit-appearance: none;
  }
  .m-ss-price-dash{
    color: var(--m-muted);
  }
  .m-search-sheet-foot{
    display: flex;
    gap: .65rem;
    padding: .75rem 1.25rem 0;
    border-top: 1px solid var(--m-line);
    margin-top: .5rem;
  }
  .m-ss-btn-clear{
    flex: 0 0 auto;
    padding: .85rem 1.25rem;
    background: transparent;
    border: none;
    color: var(--m-ink);
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
  }
  .m-ss-btn-search{
    flex: 1;
    padding: .95rem 1.25rem;
    background: var(--m-ink);
    color: var(--m-overlay);
    border: none;
    border-radius: 12px;
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
  }

  @keyframes ccFadeIn{ from{opacity:0} to{opacity:1} }
  @keyframes ccSheetUp{
    from{ transform: translateY(100%); }
    to{ transform: translateY(0); }
  }

  /* ============================================================
     SEARCH VIEW (mobile app — full redesign)
     Header with title + filter button, 1-col list of full-width cards,
     filters open as a bottom sheet identical in feel to the Home one.
     ============================================================ */
  #view-search{ padding: 0; margin: 0; }
  #view-search .container.search-wrap{
    padding: 0;
    max-width: 100%;
  }

  /* Top header: title + tap-to-open search pill */
  #view-search .m-search-header{
    display: block;
    background: var(--m-bg);
    padding: calc(1.25rem + env(safe-area-inset-top, 0px)) 1.25rem .5rem;
  }
  #view-search .m-search-title{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.9rem;
    font-weight: 400;
    color: var(--m-ink);
    margin: 0 0 .85rem;
    letter-spacing: -0.01em;
  }
  #view-search .m-search-input-wrap{
    position: relative;
    margin: 0;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 14px;
    padding: 0 1rem 0 2.5rem;
    display: flex;
    align-items: center;
    min-height: 50px;
  }
  #view-search .m-search-input-wrap svg{
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    stroke: var(--m-muted);
    fill: none;
    pointer-events: none;
  }
  #view-search .m-search-input-wrap input{
    flex: 1;
    border: none;
    background: transparent;
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-ink);
    padding: 0;
    outline: none;
    width: 100%;
    -webkit-appearance: none;
  }
  #view-search .m-search-input-wrap input::placeholder{
    color: var(--m-muted);
  }

  /* Results header row: count + Filters + Sort */
  #view-search .search-results-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1.25rem;
    margin: 0;
  }
  #view-search .search-results-head > h2{
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    font-weight: 600;
    color: var(--m-muted);
    margin: 0;
    flex: 1;
  }
  #view-search .search-results-head > h2 #resultsCount{
    color: var(--m-ink);
    font-weight: 700;
  }
  #view-search .search-controls{
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  #view-search .filter-toggle{
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .95rem;
    background: var(--m-ink);
    color: var(--m-overlay);
    border: 1px solid var(--m-ink);
    border-radius: 999px;
    font-family: Manrope, sans-serif;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
  }
  #view-search .filter-toggle svg{
    width: 14px;
    height: 14px;
    stroke: var(--m-overlay);
    fill: none;
  }
  #view-search .search-sort select{
    padding: .55rem .85rem;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 999px;
    font-family: Manrope, sans-serif;
    font-size: .8rem;
    color: var(--m-ink);
    font-weight: 600;
    -webkit-appearance: menulist;
    cursor: pointer;
  }

  /* Hide view-mode toggle and the desktop side filters panel */
  #view-search .search-view-toggle{ display: none !important; }
  #view-search .search-layout{ display: block; padding: 0; }
  #view-search .filters{ display: none; }

  /* When the panel is open, re-show it as a bottom sheet */
  #view-search .filters.open{
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    position: fixed !important;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 950;
    padding: 0;
    border: none;
    overflow: visible;
  }
  #view-search .filters.open > *{
    background: var(--m-white);
  }
  #view-search .filters.open .filters-head{
    border-radius: 20px 20px 0 0;
    padding: 1.25rem 1.25rem .75rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #view-search .filters.open .filters-head::before{
    content: '';
    position: absolute;
    top: .5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    background: var(--m-line);
    border-radius: 2px;
  }
  #view-search .filters.open .filters-head h3{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--m-ink);
    margin: .35rem 0 0;
  }
  #view-search .filters.open .filter-close{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--m-bg);
    border: 1px solid var(--m-line);
    color: var(--m-ink);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }
  /* Filter groups scroll */
  #view-search .filters.open .filter-group{
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--m-line);
    margin: 0;
    max-height: 50vh;
    overflow-y: auto;
  }
  #view-search .filters.open .filter-label{
    font-family: Manrope, sans-serif;
    font-size: .75rem;
    font-weight: 700;
    color: var(--m-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    display: block;
    margin-bottom: .65rem;
  }
  #view-search .filters.open .range-row{
    display: flex;
    align-items: center;
    gap: .65rem;
  }
  #view-search .filters.open .range-row input{
    flex: 1;
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid var(--m-line);
    border-radius: 12px;
    background: var(--m-bg);
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-ink);
    -webkit-appearance: none;
    outline: none;
  }
  #view-search .filters.open .range-row span{ color: var(--m-muted); }

  #view-search .filters.open .check-card{
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .85rem 1rem;
    background: var(--m-bg);
    border: 1px solid var(--m-line);
    border-radius: 12px;
    margin: 0 0 .5rem;
    cursor: pointer;
  }
  #view-search .filters.open .check-card input[type="checkbox"]{
    margin-top: .15rem;
    accent-color: var(--m-ink);
  }
  #view-search .filters.open .check-card strong{
    display: block;
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    font-weight: 700;
    color: var(--m-ink);
    margin-bottom: .15rem;
  }
  #view-search .filters.open .check-card p{
    font-family: Manrope, sans-serif;
    font-size: .78rem;
    color: var(--m-muted);
    margin: 0;
    line-height: 1.35;
  }
  #view-search .filters.open .check{
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 0;
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-ink);
    cursor: pointer;
  }
  #view-search .filters.open .check input[type="checkbox"]{
    accent-color: var(--m-ink);
  }
  #view-search .filters.open .amenity-checks{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 .75rem;
  }
  /* Apply/Clear row */
  #view-search .filters.open #clearFilters,
  #view-search .filters.open #applyFilters{
    padding: .9rem 1.25rem;
    border-radius: 12px;
    font-family: Manrope, sans-serif;
    font-size: .92rem;
    font-weight: 700;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #view-search .filters.open #clearFilters{
    background: var(--m-bg);
    border: 1px solid var(--m-line);
    color: var(--m-ink);
    flex: 0 0 auto;
    margin: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px)) 1.25rem;
  }
  #view-search .filters.open #applyFilters{
    background: var(--m-ink);
    border: none;
    color: var(--m-overlay);
    flex: 1;
    margin: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px)) .65rem;
  }

  /* Hide the map on the search results (we already have category/area filters) */
  #view-search .search-content{
    padding: 0 1.25rem;
  }
  #view-search .search-grid-map-wrap{
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  #view-search .search-map{ display: none; }
  #view-search .results-count-label{ display: none; }

  /* Results: 1-col full-width cards */
  #view-search .search-grid{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: .5rem 0 2rem;
  }
  #view-search .search-grid .property-card{
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
  }
  #view-search .search-grid .property-card .prop-img{
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: 18px;
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
    background-color: var(--m-line);
    margin: 0 0 .7rem;
  }
  #view-search .search-grid .property-card .prop-img-badge{
    position: absolute;
    top: .75rem;
    left: .75rem;
    background: var(--m-white);
    color: var(--m-ink);
    padding: .3rem .65rem;
    border-radius: 999px;
    font-family: Manrope, sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    z-index: 2;
  }
  #view-search .search-grid .property-card .prop-fav{
    position: absolute;
    top: .65rem;
    right: .65rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--m-white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border: none;
  }
  #view-search .search-grid .property-card .prop-fav svg{
    width: 17px;
    height: 17px;
    color: var(--m-ink);
  }
  #view-search .search-grid .property-card .prop-meta-row{
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: .2rem;
    margin: 0;
  }
  #view-search .search-grid .property-card .prop-meta-row > span:first-child{
    font-family: Manrope, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--m-ink);
    line-height: 1.2;
    white-space: normal;
  }
  #view-search .search-grid .property-card .prop-rating{
    font-family: Manrope, sans-serif;
    font-size: .82rem;
    font-weight: 600;
    color: var(--m-ink);
  }
  #view-search .search-grid .property-card .prop-loc{
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    color: var(--m-muted);
    margin: .15rem 0 .4rem;
  }
  #view-search .search-grid .property-card .prop-price{
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--m-ink);
    margin: 0;
  }
  #view-search .search-grid .property-card .prop-price small{
    font-weight: 400;
    color: var(--m-muted);
    font-size: .85rem;
  }

  /* ============================================================
     PROPERTY DETAIL VIEW (mobile app — Airbnb-style)
     - Full-bleed gallery
     - Floating back/share/heart on top
     - Title + meta below image
     - Description / amenities / map / rules / reviews stacked
     - HIDE the desktop booking-card aside
     - Sticky bottom bar with price + "Check availability" / "Reserve now"
     ============================================================ */

  #view-property{
    padding: 0 !important;
    background: var(--m-bg);
    /* Reserve room for sticky bar above bottom nav */
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #view-property .container{
    padding: 0 !important;
    max-width: 100%;
  }

  /* ============================================================
     PROPERTY DETAIL — top bar FLOATING over the image (no cream space above)
     ============================================================ */

  #view-property .container{
    padding: 0 !important;
    max-width: 100%;
    position: relative;
  }

  /* The top bar — sits OVER the image at the top, no cream space above.
     Buttons appear on top of the photo (like Airbnb), without any extra
     transparent margin pushing them down. */
  #view-property .m-prop-topbar{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;  /* only share + heart, right-aligned */
    background: transparent;
    padding: .65rem 1rem;
    gap: .65rem;
    pointer-events: none;
  }

  /* Hide the desktop "← Back to results" link on mobile — the Android back
     button (or our bottom nav) handles navigation. */
  #view-property > .container > .back-link{
    display: none !important;
  }
  /* But the actual buttons inside ARE clickable */
  #view-property .m-prop-topbar > *,
  #view-property .m-prop-topbar .back-link,
  #view-property .m-prop-topbar .icon-btn{
    pointer-events: auto;
  }

  #view-property .m-prop-topbar .back-link{
    position: static !important;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FFFFFF;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: #000;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
  }
  #view-property .m-prop-topbar .back-link::before{
    content: '';
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  #view-property .m-prop-topbar-actions{
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
  }
  #view-property .m-prop-topbar-actions .icon-btn{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FFFFFF;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    padding: 0;
    cursor: pointer;
  }
  #view-property .m-prop-topbar-actions .icon-btn svg{
    width: 15px;
    height: 15px;
    stroke: #000;
    fill: none;
    stroke-width: 2;
  }
  #view-property .m-prop-topbar-actions .icon-btn.active svg{
    fill: var(--m-terracotta) !important;
    stroke: var(--m-terracotta) !important;
  }

  /* Hide the original property-head actions on mobile */
  #view-property .property-head{
    display: block;
    padding: 0;
    margin: 0;
    background: transparent;
  }
  #view-property .property-head > div:first-child{
    padding: 1.25rem 1.25rem .5rem;
    background: var(--m-bg);
  }
  #view-property .property-head > .property-actions{
    display: none !important;
  }

  /* Gallery: full-width photo, starts AT the very top of the screen */
  #view-property .prop-gallery{
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--m-line);
  }

  /* Gallery: img/div inside fills the gallery */
  #view-property .prop-gallery img,
  #view-property .prop-gallery > div{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Title + meta block */
  #view-property .property-head h1,
  #view-property #propTitle{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.85rem;
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 .6rem;
    color: var(--m-ink);
    letter-spacing: -0.01em;
  }
  #view-property .property-meta{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    color: var(--m-muted);
  }
  #view-property .property-meta .rating-badge{
    color: var(--m-ink);
    font-weight: 700;
    background: transparent;
    padding: 0;
  }
  #view-property .property-meta .rating-badge::before{
    content: '★ ';
    color: var(--m-mustard);
  }
  #view-property .property-meta .dot{ color: var(--m-muted); }
  #view-property .property-meta #propType{
    margin-left: auto;
    color: var(--m-terracotta);
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  /* Body layout: stack everything, hide aside booking widget */
  #view-property .prop-layout{
    display: block;
    padding: 0 1.25rem;
  }
  #view-property .booking-card{
    display: none !important; /* Hidden until moved into the availability sheet */
  }

  /* Host row */
  #view-property .prop-host-row{
    display: block;
    padding: 1rem 0;
    border-top: 1px solid var(--m-line);
    border-bottom: 1px solid var(--m-line);
    margin: .5rem 0 0;
  }
  #view-property .prop-host-row > div:first-child{ display: none; }
  #view-property .host-mini{
    display: flex;
    align-items: center;
    gap: .85rem;
  }
  #view-property .host-avatar{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--m-ink);
    color: var(--m-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Manrope, sans-serif;
    font-weight: 700;
    flex-shrink: 0;
  }
  #view-property .host-mini > div:nth-child(2){
    flex: 1;
    min-width: 0;
  }
  #view-property .host-mini strong{
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--m-ink);
    display: block;
  }
  #view-property .host-mini .muted{
    font-size: .8rem;
    color: var(--m-muted);
  }
  #view-property .msg-host-btn{
    flex-shrink: 0;
    padding: .6rem 1rem;
    border-radius: 999px;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    font-family: Manrope, sans-serif;
    font-size: .8rem;
    font-weight: 600;
    color: var(--m-ink);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
  }
  #view-property .msg-host-btn svg{
    width: 14px;
    height: 14px;
    stroke: var(--m-ink);
  }

  /* Section headings */
  #view-property .prop-section{
    padding: 1.25rem 0;
  }
  #view-property .prop-section h3{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 400;
    margin: 0 0 .65rem;
    color: var(--m-ink);
    letter-spacing: -0.01em;
  }
  #view-property .prop-section p{
    font-family: Manrope, sans-serif;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--m-ink-soft);
  }
  #view-property .rule{
    border: none;
    border-top: 1px solid var(--m-line);
    margin: 0;
  }
  #view-property .amenity-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }

  /* Map block */
  #view-property #propMap{
    min-height: 220px;
    border-radius: 14px;
    overflow: hidden;
    margin-top: .65rem;
  }

  /* Rules list */
  #view-property .rules-list{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  #view-property .rules-list li{
    padding: .5rem 0;
    font-family: Manrope, sans-serif;
    font-size: .92rem;
    color: var(--m-ink-soft);
    border-bottom: 1px solid var(--m-line);
  }
  #view-property .rules-list li:last-child{ border-bottom: none; }

  /* Reviews */
  #view-property .reviews-grid{
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #view-property .reviews-grid > *{
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 14px;
    padding: 1rem;
  }

  /* Hide things we don't need on mobile property */
  #view-property .property-head > .property-actions{
    /* already absolute-positioned via rule above */
  }

  /* ============================================================
     STICKY BOTTOM BAR (Property)
     ============================================================ */
  .m-prop-bar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    background: var(--m-white);
    border-top: 1px solid var(--m-line);
    padding: .85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 880;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.06);
  }
  .m-prop-bar-info{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .m-prop-bar-price-row{
    display: flex;
    align-items: baseline;
    gap: .25rem;
  }
  .m-prop-bar-amount{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--m-ink);
    letter-spacing: -0.01em;
  }
  .m-prop-bar-unit{
    font-family: Manrope, sans-serif;
    font-size: .8rem;
    color: var(--m-muted);
  }
  .m-prop-bar-meta{
    font-family: Manrope, sans-serif;
    font-size: .75rem;
    color: var(--m-muted);
    margin-top: .05rem;
  }
  .m-prop-bar-btn{
    flex-shrink: 0;
    padding: .9rem 1.35rem;
    border: none;
    border-radius: 12px;
    background: var(--m-ink);
    color: var(--m-overlay);
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* When the user has a selection ready, the button turns terracotta */
  .m-prop-bar.state-reserve .m-prop-bar-btn{
    background: var(--m-terracotta);
  }
  .m-prop-bar-btn:active{ transform: scale(0.97); }

  /* ============================================================
     AVAILABILITY BOTTOM SHEET (calendar + time slots)
     ============================================================ */
  .m-avail-sheet{
    position: fixed;
    inset: 0;
    z-index: 950;
  }
  .m-avail-sheet-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: ccFadeIn .2s ease;
  }
  .m-avail-sheet-panel{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 92vh;
    background: var(--m-bg);
    border-radius: 20px 20px 0 0;
    padding: .75rem 0 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
    animation: ccSheetUp .3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .m-avail-sheet-handle{
    width: 42px;
    height: 4px;
    background: var(--m-line);
    border-radius: 2px;
    margin: 0 auto .75rem;
  }
  .m-avail-sheet-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem .5rem;
  }
  .m-avail-sheet-head h2{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--m-ink);
    margin: 0;
  }
  .m-avail-sheet-close{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    color: var(--m-ink);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }
  .m-avail-sheet-body{
    flex: 1;
    overflow-y: auto;
    padding: .5rem 1.25rem 1rem;
  }
  /* When the booking widget is moved in here, strip its border/padding */
  .m-avail-sheet-body .booking-card{
    display: block !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    position: static !important;
  }
  /* Hide the price row (already shown in the sticky bar) and the
     message-to-host textarea + the standalone Reserve button inside
     the sheet — Reserve flows through "Confirm selection" instead. */
  .m-avail-sheet-body .booking-card .booking-price{
    display: none !important;
  }
  .m-avail-sheet-body .booking-card #reserveBtn,
  .m-avail-sheet-body .booking-card #reserveBtn + p,
  .m-avail-sheet-body .booking-card .bk-message-label,
  .m-avail-sheet-body .booking-card #guestMessage{
    display: none !important;
  }
  /* Tabs: Hourly / Full Day */
  .m-avail-sheet-body .booking-tabs{
    display: flex;
    background: var(--m-line);
    border-radius: 999px;
    padding: .25rem;
    margin: 0 0 1rem;
    width: fit-content;
  }
  .m-avail-sheet-body .bk-tab{
    padding: .55rem 1.15rem;
    background: transparent;
    border: none;
    border-radius: 999px;
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    font-weight: 600;
    color: var(--m-muted);
    cursor: pointer;
  }
  .m-avail-sheet-body .bk-tab.active{
    background: var(--m-white);
    color: var(--m-ink);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
  /* Calendar */
  .m-avail-sheet-body .cal-wrap{
    background: var(--m-white);
    border-radius: 14px;
    padding: 1rem;
    margin: 0 0 1rem;
    border: 1px solid var(--m-line);
  }
  .m-avail-sheet-body .cal-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 .75rem;
  }
  .m-avail-sheet-body .cal-head strong{
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    color: var(--m-ink);
    font-weight: 700;
  }
  .m-avail-sheet-body .cal-nav{
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--m-ink);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .m-avail-sheet-body .cal-nav:active{ background: var(--m-bg); }
  /* Inherit the calendar grid styles from styles.css; just tighten spacing */
  .m-avail-sheet-body .cal-grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .25rem;
  }
  .m-avail-sheet-body .cal-dow{
    font-family: Manrope, sans-serif;
    font-size: .7rem;
    color: var(--m-muted);
    text-align: center;
    padding: .35rem 0;
    font-weight: 600;
  }
  .m-avail-sheet-body .cal-day{
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    color: var(--m-ink);
    cursor: pointer;
    transition: background .15s;
  }
  .m-avail-sheet-body .cal-day:hover{ background: var(--m-bg); }
  .m-avail-sheet-body .cal-day.selected,
  .m-avail-sheet-body .cal-day.active{
    background: var(--m-ink);
    color: var(--m-overlay);
    font-weight: 700;
  }
  .m-avail-sheet-body .cal-day.disabled,
  .m-avail-sheet-body .cal-day.muted{
    color: var(--m-muted);
    opacity: 0.4;
    cursor: not-allowed;
  }
  /* Time slots */
  .m-avail-sheet-body .bk-block{
    margin: 0 0 1rem;
  }
  .m-avail-sheet-body .bk-label{
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    font-weight: 600;
    color: var(--m-ink);
    display: block;
    margin: 0 0 .55rem;
  }
  .m-avail-sheet-body .time-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }
  .m-avail-sheet-body .time-grid > *{
    padding: .75rem .5rem;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 12px;
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    font-weight: 600;
    color: var(--m-ink);
    text-align: center;
    cursor: pointer;
  }
  .m-avail-sheet-body .time-grid > .selected,
  .m-avail-sheet-body .time-grid > .active{
    background: var(--m-ink);
    color: var(--m-overlay);
    border-color: var(--m-ink);
  }
  .m-avail-sheet-body .time-grid > .disabled,
  .m-avail-sheet-body .time-grid > :disabled{
    background: var(--m-bg);
    color: var(--m-muted);
    border-color: var(--m-line);
    opacity: 0.6;
    cursor: not-allowed;
    text-decoration: line-through;
  }
  /* Booking summary */
  .m-avail-sheet-body .bk-summary{
    border-top: 1px solid var(--m-line);
    padding-top: 1rem;
    margin-top: 0;
  }
  .m-avail-sheet-body .bk-row{
    display: flex;
    justify-content: space-between;
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-ink-soft);
    margin-bottom: .45rem;
  }
  .m-avail-sheet-body .bk-row.total{
    font-weight: 700;
    color: var(--m-ink);
    font-size: 1rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--m-line);
  }
  /* Footer with Confirm button */
  .m-avail-sheet-foot{
    border-top: 1px solid var(--m-line);
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: var(--m-bg);
  }
  .m-avail-sheet-confirm{
    width: 100%;
    padding: 1rem;
    background: var(--m-ink);
    color: var(--m-overlay);
    border: none;
    border-radius: 14px;
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
  }
  .m-avail-sheet-confirm:disabled{
    background: var(--m-muted);
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Hide the FAB Become Host while in property view */
  body:has(#view-property.active) .fab-become-host{ display: none; }
  /* Also hide if the user is already a host (#view-home shows the FAB
     only when the user is NOT a host) */
  body.is-host .fab-become-host{ display: none !important; }

  /* ============================================================
     HOST DASHBOARD — mobile layout (sidebar becomes card list)
     The desktop sidebar (dashboard-side) becomes a vertical card
     menu at the top, similar to the guest's Account view.
     ============================================================ */
  #view-host-dashboard{
    padding: 0 !important;
    background: var(--m-bg);
  }
  #view-host-dashboard .dashboard-shell{
    display: block !important;
    grid-template-columns: none !important;
    height: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    background: var(--m-bg);
  }
  #view-host-dashboard .dashboard-side{
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.25rem 0;
    background: var(--m-bg);
    border-right: none;
    overflow: visible;
  }
  #view-host-dashboard .dash-side-head{
    display: none;
  }
  #view-host-dashboard .dash-nav{
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 16px;
    overflow: hidden;
    margin: 0 0 1rem;
    padding: 0;
  }
  #view-host-dashboard .dash-nav-item{
    display: flex !important;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--m-white);
    border: none;
    border-bottom: 1px solid var(--m-line);
    border-radius: 0;
    color: var(--m-ink);
    text-decoration: none;
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    position: relative;
    cursor: pointer;
  }
  #view-host-dashboard .dash-nav-item:last-child{
    border-bottom: none;
  }
  #view-host-dashboard .dash-nav-item.active{
    background: var(--m-bg);
    color: var(--m-terracotta);
  }
  /* The text span — MUST be visible, take available space */
  #view-host-dashboard .dash-nav-item > span{
    flex: 1;
    min-width: 0;
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block !important;
  }
  /* The icon: smaller, in a circular cream bubble */
  #view-host-dashboard .dash-nav-item > svg{
    width: 40px;
    height: 40px;
    stroke: var(--m-ink);
    background: var(--m-bg);
    border-radius: 50%;
    padding: 10px;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  #view-host-dashboard .dash-nav-item.active > svg{
    stroke: var(--m-terracotta);
    background: rgba(200, 85, 61, 0.1);
  }
  /* Chevron > on the right */
  #view-host-dashboard .dash-nav-item::after{
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--m-muted);
    border-top: 2px solid var(--m-muted);
    transform: rotate(45deg);
    flex-shrink: 0;
  }
  /* Message unread badge in host nav: small red dot only — number is hidden */
  #view-host-dashboard .dash-nav-item .msg-badge{
    background: var(--m-terracotta);
    color: transparent;          /* hide the count number */
    font-size: 0;
    border-radius: 50%;
    padding: 0;
    width: 10px;
    height: 10px;
    min-width: 10px;
    line-height: 10px;
    flex-shrink: 0;
    border: 1.5px solid var(--m-white);
    box-sizing: content-box;
    /* Sit just to the LEFT of the chevron — push the row's gap a bit */
    margin-left: auto;
  }
  /* When there's a badge, push the chevron away from the dot a bit */
  #view-host-dashboard .dash-nav-item:has(.msg-badge:not([style*="display:none"]))::after{
    margin-left: .65rem;
  }
  /* When there's no badge (or it's hidden), let the chevron use auto-margin */
  #view-host-dashboard .dash-nav-item::after{
    margin-left: auto;
  }

  /* Floating "+ Create listing" button */
  #view-host-dashboard .host-cta-btn{
    position: fixed;
    right: 1rem;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    width: auto;
    padding: .85rem 1.25rem .85rem 1.1rem;
    border-radius: 999px;
    background: var(--m-terracotta);
    color: var(--m-overlay);
    border: none;
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(200,85,61,0.4);
    z-index: 850;
  }

  /* Main host content area */
  #view-host-dashboard .dashboard-main{
    padding: 0 1.25rem 2rem;
    background: var(--m-bg);
    min-height: 0;
    overflow: visible;
  }
  #view-host-dashboard .host-pane{
    padding: 0;
    margin: 0;
  }
  #view-host-dashboard .host-pane .dash-head h1{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.7rem;
    font-weight: 400;
    color: var(--m-ink);
    margin: 0 0 .25rem;
    letter-spacing: -0.01em;
  }
  #view-host-dashboard .host-pane .dash-head p{
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-muted);
    margin: 0 0 1rem;
  }
  /* KPIs */
  #view-host-dashboard .kpi-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    margin: 0 0 1.5rem !important;
  }
  #view-host-dashboard .kpi-card{
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: none;
  }
  #view-host-dashboard .kpi-label{
    font-family: Manrope, sans-serif;
    font-size: .68rem;
    color: var(--m-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: block;
    margin-bottom: .25rem;
  }
  #view-host-dashboard .kpi-value{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--m-ink);
    margin: 0;
    display: block;
  }
  #view-host-dashboard .kpi-trend{
    display: none;
  }

  /* Tables — turn rows into stacked cards (Earnings payout history, etc.) */
  #view-host-dashboard table{
    width: 100%;
    border-collapse: collapse;
  }
  #view-host-dashboard table thead{
    display: none;
  }
  #view-host-dashboard table tbody{
    display: flex;
    flex-direction: column;
    gap: .65rem;
  }
  #view-host-dashboard table tr{
    display: flex;
    flex-direction: column;
    gap: .35rem;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 12px;
    padding: .85rem 1rem;
    width: 100%;
    box-sizing: border-box;
  }
  #view-host-dashboard table td{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    padding: 0;
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    color: var(--m-ink);
    white-space: normal;
  }
  #view-host-dashboard table td::before{
    content: attr(data-label);
    color: var(--m-muted);
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: .65rem;
  }

  /* ============================================================
     LOGIN / REGISTER / REGISTER-HOST — mobile-friendly auth views
     ============================================================ */
  .view-auth{
    padding: 0 !important;
    background: var(--m-bg);
    min-height: 100vh;
  }
  .view-auth .auth-card{
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 0; /* full-width on mobile */
    padding: calc(2rem + env(safe-area-inset-top, 0px)) 1.5rem 2rem;
    margin: 0;
    box-shadow: none;
    max-width: 100%;
    min-height: 100vh;
  }
  .view-auth .auth-card h2{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.9rem;
    font-weight: 400;
    color: var(--m-ink);
    margin: .5rem 0 .35rem;
    letter-spacing: -0.01em;
  }
  .view-auth .auth-card .muted{
    font-family: Manrope, sans-serif;
    font-size: .92rem;
    color: var(--m-muted);
    margin: 0 0 1.5rem;
  }
  .view-auth .auth-card form label{
    display: block;
    margin-bottom: 1rem;
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    font-weight: 600;
    color: var(--m-ink);
  }
  .view-auth .auth-card form input{
    width: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--m-line);
    border-radius: 12px;
    background: var(--m-bg);
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    color: var(--m-ink);
    outline: none;
    margin-top: .35rem;
    -webkit-appearance: none;
    box-sizing: border-box;
  }
  .view-auth .auth-card .grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
  .view-auth .auth-card .grid-2 label{
    margin-bottom: 1rem;
  }
  .view-auth .auth-card .auth-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1.5rem;
    font-family: Manrope, sans-serif;
    font-size: .85rem;
  }
  .view-auth .auth-card .auth-row .link-text{
    color: var(--m-terracotta);
    font-weight: 600;
    text-decoration: none;
  }
  .view-auth .auth-card .btn-primary,
  .view-auth .auth-card .btn-primary.btn-block{
    width: 100%;
    padding: 1rem;
    background: var(--m-ink);
    color: var(--m-overlay);
    border: none;
    border-radius: 14px;
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 1rem;
  }
  .view-auth .auth-card .btn-outline.btn-block{
    width: 100%;
    padding: 1rem;
    background: var(--m-white);
    color: var(--m-ink);
    border: 1px solid var(--m-line);
    border-radius: 14px;
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
  }
  .view-auth .auth-card .divider-text{
    text-align: center;
    color: var(--m-muted);
    font-family: Manrope, sans-serif;
    font-size: .82rem;
    margin: 1.25rem 0;
    position: relative;
  }
  .view-auth .auth-card .divider-text::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--m-line);
    z-index: 0;
  }
  .view-auth .auth-card .divider-text span{
    background: var(--m-white);
    padding: 0 .75rem;
    position: relative;
    z-index: 1;
  }
  .view-auth .auth-card .auth-foot{
    text-align: center;
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-muted);
    margin-top: 1.5rem;
  }
  .view-auth .auth-card .auth-foot .link-text{
    color: var(--m-terracotta);
    font-weight: 600;
    text-decoration: none;
  }
  /* Role toggle (guest/host) in register */
  .view-auth .auth-card .role-toggle{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    margin: 0 0 1.5rem;
  }
  .view-auth .auth-card .role-opt{
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 14px;
    padding: 1rem;
    text-align: left;
    cursor: pointer;
    font-family: Manrope, sans-serif;
  }
  .view-auth .auth-card .role-opt.active{
    border-color: var(--m-ink);
    background: var(--m-bg);
  }
  .view-auth .auth-card .role-opt strong{
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: var(--m-ink);
    margin-bottom: .15rem;
  }
  .view-auth .auth-card .role-opt span{
    display: block;
    font-size: .78rem;
    color: var(--m-muted);
    line-height: 1.3;
  }
  .view-auth .auth-card .check{
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
    color: var(--m-ink);
  }

  /* ============================================================
     "Remember me" — iOS-style toggle switch
     The input stays a real <input type="checkbox"> so all the JS
     logic that reads .checked keeps working. We just restyle it.
     ============================================================ */
  .view-auth .auth-card .auth-row .check{
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .view-auth .auth-card .auth-row .check input[type="checkbox"]{
    /* Hide the native checkbox but keep it accessible/clickable */
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--m-line);
    border: none;
    margin: 0;
    cursor: pointer;
    transition: background .2s ease;
    flex-shrink: 0;
    outline: none;
  }
  /* The sliding knob */
  .view-auth .auth-card .auth-row .check input[type="checkbox"]::before{
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--m-white);
    transition: transform .22s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  }
  /* Checked state */
  .view-auth .auth-card .auth-row .check input[type="checkbox"]:checked{
    background: var(--m-ink);
  }
  .view-auth .auth-card .auth-row .check input[type="checkbox"]:checked::before{
    transform: translateX(18px);
  }
  /* Active press */
  .view-auth .auth-card .auth-row .check input[type="checkbox"]:active::before{
    width: 22px;
  }

  /* ============================================================
     FORGOT PASSWORD SHEET (bottom-sheet on mobile)
     ============================================================ */
  .forgot-pw-sheet{
    position: fixed;
    inset: 0;
    z-index: 950;
  }
  .forgot-pw-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: ccFadeIn .2s ease;
  }
  .forgot-pw-panel{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 90vh;
    background: var(--m-bg);
    border-radius: 20px 20px 0 0;
    padding: .75rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    animation: ccSheetUp .3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .forgot-pw-handle{
    width: 42px;
    height: 4px;
    background: var(--m-line);
    border-radius: 2px;
    margin: 0 auto .75rem;
  }
  .forgot-pw-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1rem;
  }
  .forgot-pw-head h2{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--m-ink);
    margin: 0;
    letter-spacing: -0.01em;
  }
  .forgot-pw-close{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    color: var(--m-ink);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }
  .forgot-pw-text{
    font-family: Manrope, sans-serif;
    font-size: .92rem;
    color: var(--m-muted);
    margin: 0 0 1.25rem;
    line-height: 1.5;
  }
  .forgot-pw-panel label{
    display: block;
    margin-bottom: 1rem;
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    font-weight: 600;
    color: var(--m-ink);
  }
  .forgot-pw-panel input{
    width: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--m-line);
    border-radius: 12px;
    background: var(--m-white);
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    color: var(--m-ink);
    outline: none;
    margin-top: .35rem;
    -webkit-appearance: none;
    box-sizing: border-box;
  }
  .forgot-pw-panel .btn-primary{
    width: 100%;
    padding: 1rem;
    background: var(--m-ink);
    color: var(--m-overlay);
    border: none;
    border-radius: 14px;
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin: 0 0 .65rem;
  }
  .forgot-pw-panel .btn-outline{
    width: 100%;
    padding: 1rem;
    background: var(--m-white);
    color: var(--m-ink);
    border: 1px solid var(--m-line);
    border-radius: 14px;
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
  }
  .forgot-pw-panel .form-msg{
    padding: .65rem 1rem;
    border-radius: 12px;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    margin: 0 0 1rem;
    line-height: 1.45;
  }

  /* ============================================================
     SAVED VIEW (guest-dashboard) — mobile layout
     ============================================================ */
  #view-guest-dashboard{
    padding: 0 !important;
    background: var(--m-bg);
  }
  #view-guest-dashboard .container{
    padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.25rem 0 !important;
    max-width: 100%;
  }
  #view-guest-dashboard .dash-head{
    margin: 0 0 1rem;
  }
  #view-guest-dashboard .dash-head h1,
  #view-guest-dashboard .dash-head h2{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.9rem;
    font-weight: 400;
    color: var(--m-ink);
    margin: .5rem 0 .35rem;
    letter-spacing: -0.01em;
  }
  #view-guest-dashboard .dash-head .muted{
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-muted);
    margin: 0;
  }

  /* KPI grid 2x2 */
  #view-guest-dashboard .kpi-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    margin: 0 0 1.5rem !important;
  }
  #view-guest-dashboard .kpi-card{
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: none;
  }
  #view-guest-dashboard .kpi-label{
    display: block;
    font-family: Manrope, sans-serif;
    font-size: .68rem;
    color: var(--m-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .25rem;
  }
  #view-guest-dashboard .kpi-value{
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--m-ink);
    margin: 0;
  }
  #view-guest-dashboard .kpi-trend{
    display: none;
  }

  /* Dashboard tabs (Upcoming/Past/Cancelled) */
  #view-guest-dashboard .dash-tabs{
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--m-line);
    margin: 0 -1.25rem 1rem;
    padding: 0 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #view-guest-dashboard .dash-tabs::-webkit-scrollbar{ display: none; }
  #view-guest-dashboard .dash-tab{
    background: transparent;
    border: none;
    padding: .8rem 1rem;
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-muted);
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    cursor: pointer;
  }
  #view-guest-dashboard .dash-tab.active{
    color: var(--m-ink);
    border-bottom-color: var(--m-terracotta);
  }

  /* Bookings list — cards with thumbnail */
  #view-guest-dashboard .bookings-list{
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.5rem;
  }
  /* FIX 18 V17r — VERTICAL booking-row layout on mobile.
     Old horizontal layout (thumb+info+side) was collapsing into 1-char columns
     when the available width got too tight. Vertical stack is always readable. */
  #view-guest-dashboard .booking-row,
  #view-host-dashboard .booking-row{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: .65rem;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
  }
  /* THUMB: full-width hero image, 4:3 aspect */
  #view-guest-dashboard .booking-thumb,
  #view-host-dashboard .booking-thumb{
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 0;
    background-size: cover !important;
    background-position: center !important;
    background-color: var(--m-line);
    grid-row: 1;
  }
  /* INFO: padded text block under the thumb */
  #view-guest-dashboard .booking-info,
  #view-host-dashboard .booking-info{
    grid-row: 2;
    padding: .85rem 1rem 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
  }
  #view-guest-dashboard .booking-info h3,
  #view-host-dashboard .booking-info h3{
    font-family: Manrope, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--m-ink);
    margin: 0;
    line-height: 1.25;
    /* Allow wrap so long titles don't get ellipsis */
    white-space: normal;
    overflow: visible;
  }
  #view-guest-dashboard .booking-info p,
  #view-host-dashboard .booking-info p{
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    color: var(--m-muted);
    margin: 0;
    line-height: 1.4;
  }
  #view-guest-dashboard .booking-info p.muted.small,
  #view-host-dashboard .booking-info p.muted.small{
    font-size: .78rem;
  }
  /* SIDE: status + amount + actions, full-width below info */
  #view-guest-dashboard .booking-side,
  #view-host-dashboard .booking-side{
    grid-row: 3;
    padding: .35rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .45rem;
  }
  /* Status + amount on the same line (status left, amount right) */
  #view-guest-dashboard .booking-side > .booking-status,
  #view-host-dashboard .booking-side > .booking-status{
    align-self: flex-start;
  }
  #view-guest-dashboard .booking-side > strong,
  #view-host-dashboard .booking-side > strong{
    font-family: Manrope, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--m-ink);
    margin-top: .15rem;
  }
  #view-guest-dashboard .booking-side > .muted.small,
  #view-host-dashboard .booking-side > .muted.small{
    font-size: .72rem;
    color: var(--m-muted);
    margin-top: -.35rem;
    margin-bottom: .15rem;
  }
  #view-guest-dashboard .booking-status,
  #view-host-dashboard .booking-status{
    font-family: Manrope, sans-serif;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: var(--m-bg);
    color: var(--m-muted);
    display: inline-block;
  }
  #view-guest-dashboard .booking-status.confirmed,
  #view-host-dashboard .booking-status.confirmed{
    background: rgba(63, 107, 95, 0.15);
    color: #3F6B5F;
  }
  #view-guest-dashboard .booking-status.pending,
  #view-host-dashboard .booking-status.pending{
    background: rgba(201, 150, 42, 0.15);
    color: var(--m-mustard);
  }
  #view-guest-dashboard .booking-status.cancelled,
  #view-host-dashboard .booking-status.cancelled{
    background: rgba(200, 85, 61, 0.15);
    color: var(--m-terracotta);
  }
  #view-guest-dashboard .booking-side .view-booking-details,
  #view-host-dashboard .booking-side .view-booking-details{
    width: 100%;
    padding: .65rem 1rem;
    background: var(--m-bg);
    border: 1px solid var(--m-line);
    border-radius: 999px;
    color: var(--m-ink);
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: .35rem;
  }

  /* FIX 18 V17r — Saved spaces (Wishlist): same Airbnb naked-card style as
     Search. No card box, image with rounded corners + text below. */
  #view-guest-dashboard #favoritesGrid,
  #view-guest-dashboard .prop-grid{
    display: flex !important;
    flex-direction: column;
    gap: 1.75rem;
    grid-template-columns: 1fr !important;
    padding-bottom: 1.5rem;
  }
  #view-guest-dashboard #favoritesGrid .property-card,
  #view-guest-dashboard .prop-grid .property-card{
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
  }
  #view-guest-dashboard #favoritesGrid .property-card .prop-img,
  #view-guest-dashboard .prop-grid .property-card .prop-img{
    position: relative;
    aspect-ratio: 5 / 4;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
    background-color: var(--m-line);
    margin: 0;
  }
  #view-guest-dashboard #favoritesGrid .property-card .prop-fav,
  #view-guest-dashboard .prop-grid .property-card .prop-fav{
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    z-index: 4;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  #view-guest-dashboard #favoritesGrid .property-card .prop-fav svg,
  #view-guest-dashboard .prop-grid .property-card .prop-fav svg{
    width: 16px;
    height: 16px;
    color: var(--m-terracotta);
    fill: var(--m-terracotta);
    stroke: var(--m-terracotta);
    stroke-width: 2.2;
  }
  #view-guest-dashboard #favoritesGrid .property-card .prop-share,
  #view-guest-dashboard .prop-grid .property-card .prop-share{
    position: absolute;
    top: 1rem;
    right: 3.25rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    z-index: 4;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  #view-guest-dashboard #favoritesGrid .property-card .prop-share svg,
  #view-guest-dashboard .prop-grid .property-card .prop-share svg{
    width: 14px;
    height: 14px;
    color: var(--m-ink);
    stroke: var(--m-ink);
    stroke-width: 2.2;
    fill: none;
  }
  #view-guest-dashboard #favoritesGrid .property-card > .prop-meta-row,
  #view-guest-dashboard .prop-grid .property-card > .prop-meta-row{
    padding: .85rem .15rem 0 0;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    gap: .65rem;
    width: 100%;
    box-sizing: border-box;
  }
  #view-guest-dashboard #favoritesGrid .property-card > .prop-meta-row > span:first-child,
  #view-guest-dashboard .prop-grid .property-card > .prop-meta-row > span:first-child{
    font-family: Manrope, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--m-ink);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }
  #view-guest-dashboard #favoritesGrid .property-card > .prop-meta-row > .prop-rating,
  #view-guest-dashboard .prop-grid .property-card > .prop-meta-row > .prop-rating{
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-ink);
    font-weight: 600;
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
  }
  #view-guest-dashboard #favoritesGrid .property-card > .prop-loc,
  #view-guest-dashboard .prop-grid .property-card > .prop-loc{
    font-size: .88rem;
    color: var(--m-muted);
    margin: .15rem 0 0;
    padding: 0;
  }
  #view-guest-dashboard #favoritesGrid .property-card > .prop-price,
  #view-guest-dashboard .prop-grid .property-card > .prop-price{
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--m-ink);
    margin: .35rem 0 0;
    padding: 0;
  }
  #view-guest-dashboard #favoritesGrid .property-card > .prop-price small,
  #view-guest-dashboard .prop-grid .property-card > .prop-price small{
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    font-weight: 400;
    color: var(--m-muted);
  }

  /* ============================================================
     MESSAGES VIEW — single column on mobile, WhatsApp-style
     Real classes from app.js render:
       .msg-list (the aside container)
         .msg-search
         .msg-thread-item[data-conv-id]
           .host-avatar
           .msg-thread-info
             .msg-thread-top (strong + time)
             p.muted.small (last message)
       .msg-thread (the open chat container)
         .msg-thread-head (host-avatar + name)
         .msg-thread-body (the bubbles)
         .msg-compose (input + send button)
     ============================================================ */
  #view-messages{
    padding: 0 !important;
    background: var(--m-bg);
  }
  #view-messages .container{
    padding: 0 !important;
    max-width: 100%;
  }
  #view-messages .msg-head{
    padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.25rem .5rem;
    background: var(--m-bg);
    border-bottom: 1px solid var(--m-line);
  }
  #view-messages .msg-head h1{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.9rem;
    font-weight: 400;
    color: var(--m-ink);
    margin: .5rem 0 .25rem;
    letter-spacing: -0.01em;
  }
  #view-messages .msg-head .muted{
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    color: var(--m-muted);
    margin: 0 0 .5rem;
  }

  /* Shell: single column on mobile */
  #view-messages .msg-shell{
    display: block !important;
    height: auto;
    min-height: 0;
    border: none;
    border-radius: 0;
    overflow: visible;
    grid-template-columns: none !important;
    background: transparent;
  }

  /* Conversation list — visible by default. When a thread is open, the
     thread becomes a fixed overlay on top so the list "appears hidden". */
  #view-messages .msg-list{
    display: block;
    width: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    overflow: visible;
    max-height: none;
  }

  /* Search bar at top of the list */
  #view-messages .msg-search{
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 14px;
    margin: .75rem 1.25rem 1rem;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 46px;
  }
  #view-messages .msg-search svg{
    width: 16px;
    height: 16px;
    color: var(--m-muted);
    stroke: var(--m-muted);
    fill: none;
    flex-shrink: 0;
  }
  #view-messages .msg-search input{
    flex: 1;
    border: none;
    background: transparent;
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-ink);
    padding: 0;
    outline: none;
    -webkit-appearance: none;
  }
  #view-messages .msg-search input::placeholder{
    color: var(--m-muted);
  }

  /* Conversation row */
  #view-messages .msg-thread-item{
    display: flex !important;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1.25rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--m-line);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  #view-messages .msg-thread-item:active{
    background: var(--m-white);
  }
  /* The host-avatar circle (rendered inline by the JS) */
  #view-messages .msg-thread-item .host-avatar{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--m-ink);
    color: var(--m-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
  #view-messages .msg-thread-info{
    flex: 1;
    min-width: 0;
  }
  #view-messages .msg-thread-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 0 .15rem;
  }
  #view-messages .msg-thread-top strong{
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--m-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
  }
  #view-messages .msg-thread-top .muted,
  #view-messages .msg-thread-top .small{
    font-family: Manrope, sans-serif;
    font-size: .72rem;
    color: var(--m-muted);
    flex-shrink: 0;
  }
  #view-messages .msg-thread-info p{
    font-family: Manrope, sans-serif;
    font-size: .82rem;
    color: var(--m-muted);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Empty state */
  #view-messages .msg-empty{
    padding: 3rem 1.25rem !important;
    text-align: center;
    color: var(--m-muted);
  }

  /* ===== Open thread — fullscreen overlay on mobile =====
     When a conversation is active, the .msg-thread fills the screen
     above the bottom nav. The list stays underneath but is hidden. */
  #view-messages .msg-thread{
    display: block;
    background: var(--m-bg);
    border: none;
    padding: 0;
    border-radius: 0;
  }
  /* If thread has the "Select a conversation" empty state, keep it as a
     simple inline message (no overlay). We detect "active conversation"
     by the presence of .msg-thread-head inside. */
  #view-messages .msg-thread:has(.msg-thread-head){
    position: fixed;
    inset: 0;
    z-index: 850;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* Thread header: avatar + name */
  #view-messages .msg-thread-head{
    padding: calc(.75rem + env(safe-area-inset-top, 0px)) 1.25rem .75rem 4rem;
    background: var(--m-bg);
    border-bottom: 1px solid var(--m-line);
    display: flex;
    align-items: center;
    gap: .85rem;
    position: relative;
  }
  /* Back arrow injected via :before pseudo so we don't have to change JS */
  #view-messages .msg-thread-head::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    margin-top: calc(env(safe-area-inset-top, 0px) / 2);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--m-white);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D4A3E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    border: 1px solid var(--m-line);
    cursor: pointer;
    z-index: 2;
  }
  /* And a clickable layer over the back arrow */
  #view-messages .msg-thread-head{
    cursor: default;
  }
  #view-messages .msg-thread-head .host-avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--m-ink);
    color: var(--m-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: .85rem;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
  #view-messages .msg-thread-head strong{
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--m-ink);
    display: block;
  }
  #view-messages .msg-thread-head p{
    font-family: Manrope, sans-serif;
    font-size: .78rem;
    color: var(--m-muted);
    margin: 0;
  }

  /* Body — bubbles */
  #view-messages .msg-thread-body,
  #view-messages #msgBody{
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    background: var(--m-bg);
  }
  /* Bubbles: JS uses .msg-bubble.sent (mine) / .msg-bubble.received (other) */
  #view-messages .msg-bubble{
    max-width: 75%;
    padding: .65rem .85rem;
    border-radius: 16px;
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    line-height: 1.4;
    margin-bottom: .35rem;
    word-break: break-word;
    display: block;
    clear: both;
  }
  #view-messages .msg-bubble p{
    margin: 0 0 .2rem;
  }
  #view-messages .msg-bubble .msg-time{
    display: block;
    font-size: .68rem;
    opacity: 0.7;
    margin-top: .15rem;
  }
  /* Mine — terracotta (so the user can tell at a glance which side is theirs) */
  #view-messages .msg-bubble.sent{
    background: var(--m-terracotta);
    color: var(--m-overlay);
    margin-left: auto;
    margin-right: 0;
    border-bottom-right-radius: 4px;
  }
  #view-messages .msg-bubble.sent .msg-time{
    color: rgba(250, 247, 241, 0.85);
  }
  /* Theirs — white card on the left */
  #view-messages .msg-bubble.received{
    background: var(--m-white);
    color: var(--m-ink);
    border: 1px solid var(--m-line);
    border-bottom-left-radius: 4px;
    margin-right: auto;
    margin-left: 0;
  }
  #view-messages .msg-bubble.received .msg-time{
    color: var(--m-muted);
  }

  /* Composer — class is .msg-compose (not .msg-composer) */
  #view-messages .msg-compose{
    display: flex !important;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom, 0px));
    background: var(--m-white);
    border-top: 1px solid var(--m-line);
  }
  #view-messages .msg-compose input,
  #view-messages .msg-compose textarea{
    flex: 1;
    border: 1px solid var(--m-line);
    background: var(--m-bg);
    border-radius: 999px;
    padding: .65rem 1rem;
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-ink);
    outline: none;
    resize: none;
    -webkit-appearance: none;
  }
  #view-messages .msg-compose button{
    padding: .65rem 1.25rem;
    border-radius: 999px;
    background: var(--m-terracotta);
    color: var(--m-overlay);
    border: none;
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* ============================================================
     ACCOUNT (Profile) VIEW — list of cards
     ============================================================ */
  #view-account{
    padding: 0 !important;
    background: var(--m-bg);
  }
  #view-account .container{
    padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.25rem 0 !important;
    max-width: 100%;
  }
  #view-account .dash-head{
    margin: 0 0 1.25rem;
  }
  #view-account .dash-head h1{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.9rem;
    font-weight: 400;
    color: var(--m-ink);
    margin: .5rem 0 .25rem;
    letter-spacing: -0.01em;
  }
  #view-account .dash-head .muted{
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-muted);
    margin: 0;
  }

  /* Account options as stacked card list */
  #view-account .account-grid{
    display: flex !important;
    flex-direction: column;
    gap: 0;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 16px;
    overflow: hidden;
    margin: 0 0 1.5rem;
  }
  #view-account .account-card{
    display: flex !important;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--m-white);
    border: none;
    border-bottom: 1px solid var(--m-line);
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
    color: var(--m-ink);
    position: relative;
  }
  #view-account .account-card:last-child{
    border-bottom: none;
  }
  #view-account .account-card:active{
    background: var(--m-bg);
  }
  #view-account .account-card .acct-icon{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--m-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--m-ink);
  }
  #view-account .account-card .acct-icon svg{
    width: 20px;
    height: 20px;
    stroke: var(--m-ink);
    fill: none;
  }
  #view-account .account-card h3{
    font-family: Manrope, sans-serif;
    font-size: .98rem;
    font-weight: 700;
    margin: 0;
    color: var(--m-ink);
  }
  #view-account .account-card p{
    display: none; /* hide descriptions for cleaner mobile list */
  }
  #view-account .account-card::after{
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--m-muted);
    border-top: 2px solid var(--m-muted);
    transform: rotate(45deg);
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Account detail panels (when one option is opened) */
  #view-account .account-detail{
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 16px;
    padding: 1.25rem;
    margin: 0 0 1.5rem;
  }

  /* Logout — separate visual block with terracotta accent */
  #view-account .account-logout-grid{
    margin-top: 1rem;
  }
  #view-account .account-card.account-logout h3{
    color: var(--m-terracotta);
  }
  #view-account .account-card.account-logout .acct-icon-danger{
    background: rgba(200, 85, 61, 0.1);
    color: var(--m-terracotta);
  }
  #view-account .account-card.account-logout .acct-icon-danger svg{
    stroke: var(--m-terracotta);
  }
  #view-account .account-card.account-logout::after{
    display: none;
  }
  #view-account .account-detail h2{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--m-ink);
    margin: 0 0 1rem;
  }
  #view-account .account-detail .grid-2{
    grid-template-columns: 1fr;
  }
  #view-account .account-detail label{
    display: block;
    margin-bottom: 1rem;
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    font-weight: 600;
    color: var(--m-ink);
  }
  #view-account .account-detail input,
  #view-account .account-detail textarea{
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid var(--m-line);
    border-radius: 12px;
    background: var(--m-bg);
    font-family: Manrope, sans-serif;
    font-size: .92rem;
    color: var(--m-ink);
    outline: none;
    margin-top: .35rem;
    -webkit-appearance: none;
    box-sizing: border-box;
  }
  #view-account .account-detail .btn-primary{
    width: 100%;
    padding: 1rem;
    background: var(--m-ink);
    color: var(--m-overlay);
    border: none;
    border-radius: 14px;
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: .5rem;
  }

  /* Stripe Connect card responsive — stack icon/text/button vertically */
  #view-account .stripe-card,
  #view-host-dashboard .stripe-card{
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: .85rem;
    padding: 1.25rem;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 14px;
    margin-bottom: 1rem;
  }
  #view-account .stripe-card .stripe-mark,
  #view-host-dashboard .stripe-card .stripe-mark{
    font-family: Manrope, sans-serif;
    font-weight: 700;
    color: #635BFF;
    background: rgba(99, 91, 255, 0.1);
    padding: .25rem .65rem;
    border-radius: 6px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  #view-account .stripe-card > div,
  #view-host-dashboard .stripe-card > div{
    width: 100%;
  }
  #view-account .stripe-card strong,
  #view-host-dashboard .stripe-card strong{
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    color: var(--m-ink);
    display: block;
    margin-bottom: .25rem;
  }
  #view-account .stripe-card .muted,
  #view-host-dashboard .stripe-card .muted{
    font-family: Manrope, sans-serif;
    font-size: .82rem;
    color: var(--m-muted);
    margin: 0;
    line-height: 1.4;
  }
  #view-account .stripe-card #stripeConnectBtn,
  #view-account .stripe-card .btn-outline,
  #view-host-dashboard .stripe-card #stripeConnectBtn,
  #view-host-dashboard .stripe-card .btn-outline{
    width: 100%;
    padding: .8rem 1rem;
    background: var(--m-white);
    border: 1px solid var(--m-ink);
    border-radius: 12px;
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    font-weight: 700;
    color: var(--m-ink);
    cursor: pointer;
    margin: 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }

  /* ============================================================
     BOOKING CONFIRMED — clean Airbnb-style success page
     ============================================================ */
  #view-reserved{
    padding: 0 !important;
    background: var(--m-bg);
  }
  #view-reserved .container.narrow{
    padding: 3rem 1.5rem !important;
    text-align: center;
    max-width: 100%;
  }
  #view-reserved .success-icon{
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid var(--m-success, #3F6B5F);
    color: var(--m-success, #3F6B5F);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin: 1rem auto 1.5rem;
    background: transparent;
  }
  #view-reserved h1{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2rem;
    font-weight: 400;
    color: var(--m-ink);
    margin: 0 0 .65rem;
    letter-spacing: -0.01em;
  }
  #view-reserved .muted{
    font-family: Manrope, sans-serif;
    font-size: .92rem;
    color: var(--m-muted);
    margin: 0 0 1.5rem;
    line-height: 1.5;
  }
  #view-reserved .receipt{
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 16px;
    padding: 1.25rem;
    text-align: left;
    margin: 0 0 1.5rem;
  }
  #view-reserved .receipt-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 0;
    border-bottom: 1px solid var(--m-line);
    font-family: Manrope, sans-serif;
    font-size: .92rem;
  }
  #view-reserved .receipt-row:last-child{
    border-bottom: none;
  }
  #view-reserved .receipt-row span{
    color: var(--m-muted);
  }
  #view-reserved .receipt-row strong{
    color: var(--m-ink);
    font-weight: 700;
    font-size: .95rem;
  }
  #view-reserved .action-row{
    display: flex;
    gap: .65rem;
    margin: 0;
  }
  #view-reserved .action-row button{
    flex: 1;
    padding: 1rem;
    border-radius: 14px;
    font-family: Manrope, sans-serif;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
  }
  #view-reserved .action-row .btn-outline{
    background: var(--m-white);
    border: 1px solid var(--m-line);
    color: var(--m-ink);
  }
  #view-reserved .action-row .btn-primary{
    background: var(--m-ink);
    color: var(--m-overlay);
    border: none;
  }

  /* ============================================================
     BECOME A HOST — landing page (mobile)
     ============================================================ */
  #view-register-host{
    padding: 0 !important;
    background: var(--m-bg);
  }
  #view-register-host .bh-landing{
    background: var(--m-bg);
  }
  /* HERO */
  #view-register-host .bh-hero{
    position: relative;
    width: 100%;
    min-height: 70vh;
    background-image:
      linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%),
      url("https://images.unsplash.com/photo-1497366216548-37526070297c?w=2000&q=80");
    background-size: cover;
    background-position: center;
    padding: calc(5rem + env(safe-area-inset-top, 0px)) 1.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #view-register-host .bh-back{
    position: absolute;
    top: calc(1rem + env(safe-area-inset-top, 0px));
    left: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    color: var(--m-overlay);
  }
  #view-register-host .bh-back svg{
    width: 14px;
    height: 14px;
    stroke: var(--m-overlay);
    fill: none;
  }
  #view-register-host .bh-hero-content{
    color: var(--m-overlay);
    z-index: 2;
  }
  #view-register-host .bh-eyebrow{
    display: inline-block;
    width: fit-content;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--m-overlay);
    padding: .4rem .85rem;
    border-radius: 999px;
    font-family: Manrope, sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 1rem;
  }
  #view-register-host .bh-title{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2.6rem;
    line-height: 1;
    font-weight: 400;
    color: var(--m-overlay);
    margin: 0 0 1rem;
    letter-spacing: -0.015em;
  }
  #view-register-host .bh-title em{
    font-style: italic;
    color: var(--m-mustard);
    display: block;
  }
  #view-register-host .bh-sub{
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(250, 247, 241, 0.95);
    margin: 0 0 2rem;
    max-width: 320px;
  }
  #view-register-host .bh-cta-primary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 1rem 2rem;
    background: var(--m-terracotta);
    color: var(--m-overlay);
    border: none;
    border-radius: 14px;
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(200,85,61,0.4);
  }

  /* SECTION GENERIC */
  #view-register-host .bh-section{
    padding: 2.5rem 1.5rem;
    background: var(--m-bg);
  }
  #view-register-host .bh-section-title{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.75rem;
    line-height: 1.15;
    font-weight: 400;
    color: var(--m-ink);
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
    text-align: center;
  }
  #view-register-host .bh-section-title em{
    font-style: italic;
    color: var(--m-terracotta);
  }
  #view-register-host .bh-intro{
    padding-top: 3rem;
    padding-bottom: 1.5rem;
  }

  /* FEATURES */
  #view-register-host .bh-features{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  #view-register-host .bh-feature{
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 18px;
    padding: 1.5rem 1.25rem;
  }
  #view-register-host .bh-feature-icon{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(200, 85, 61, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 1rem;
  }
  #view-register-host .bh-feature-icon svg{
    width: 22px;
    height: 22px;
    stroke: var(--m-terracotta);
    fill: none;
  }
  #view-register-host .bh-feature h3{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--m-ink);
    margin: 0 0 .75rem;
    letter-spacing: -0.005em;
  }
  #view-register-host .bh-feature ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
  }
  #view-register-host .bh-feature ul li{
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--m-ink-soft);
    padding-left: 1.25rem;
    position: relative;
  }
  #view-register-host .bh-feature ul li::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--m-terracotta);
    border-radius: 50%;
  }

  /* CLOSING */
  #view-register-host .bh-closing{
    text-align: center;
    padding: 3rem 1.5rem 2rem;
  }
  #view-register-host .bh-closing-text{
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--m-muted);
    margin: 0 0 1.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  #view-register-host .bh-closing .bh-cta-primary{
    margin: 1rem auto 0;
    display: flex;
  }

  /* FORM — hidden by default, shown when user taps a CTA */
  #view-register-host .bh-form-section{
    padding: 0 1.25rem 0;
    background: var(--m-bg);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .4s ease, opacity .3s ease, padding .3s ease;
  }
  #view-register-host .bh-form-section.open{
    max-height: 2000px;            /* large enough for the full form */
    opacity: 1;
    padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
  }
  #view-register-host .bh-form-card{
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 18px;
    padding: 1.75rem 1.5rem;
  }
  #view-register-host .bh-form-card h2{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--m-ink);
    margin: 0 0 .35rem;
    letter-spacing: -0.01em;
  }
  #view-register-host .bh-form-card .muted{
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-muted);
    margin: 0 0 1.5rem;
  }
  #view-register-host .bh-form-card form label{
    display: block;
    margin-bottom: 1rem;
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    font-weight: 600;
    color: var(--m-ink);
  }
  #view-register-host .bh-form-card form input{
    width: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--m-line);
    border-radius: 12px;
    background: var(--m-bg);
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    color: var(--m-ink);
    outline: none;
    margin-top: .35rem;
    -webkit-appearance: none;
    box-sizing: border-box;
  }
  #view-register-host .bh-form-card .grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
  #view-register-host .bh-form-card .btn-primary,
  #view-register-host .bh-form-card .btn-primary.btn-block{
    width: 100%;
    padding: 1rem;
    background: var(--m-ink);
    color: var(--m-overlay);
    border: none;
    border-radius: 14px;
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 1rem;
  }
  #view-register-host .bh-form-card .auth-foot{
    text-align: center;
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-muted);
    margin-top: 1rem;
  }
  #view-register-host .bh-form-card .auth-foot .link-text{
    color: var(--m-terracotta);
    font-weight: 600;
    text-decoration: none;
  }

  /* ============================================================
     FIX 18 v3 — Search lupa is tappable (defensive)
     ============================================================ */
  #view-search .m-search-input-wrap svg{
    pointer-events: auto !important;
    cursor: pointer;
  }

  /* ============================================================
     FIX 18 v3 — Host Listings 3-dot menu responsive (block layout)
     Card-style row: thumb+title on top, meta inline below, 3-dot
     button absolute top-right. No grid-area collisions.
     ============================================================ */
  .listings-table{
    border: none;
    background: transparent;
    padding: 0;
  }
  .listings-table .lt-head{
    display: none;
  }
  .listings-table .lt-row{
    display: block !important;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 12px;
    padding: .9rem 1rem;
    margin-bottom: .65rem;
    position: relative;
    grid-template-columns: none;
  }
  .listings-table .lt-row:last-child{
    border-radius: 12px;
  }
  .listings-table .lt-row .lt-listing{
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-right: 44px;
    margin-bottom: .5rem;
    min-width: 0;
  }
  .listings-table .lt-row .lt-listing .lt-thumb{
    width: 44px;
    height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .listings-table .lt-row .lt-listing span{
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: .95rem;
    color: var(--m-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .listings-table .lt-row > .status{
    display: inline-flex;
    align-items: center;
    margin-right: .85rem;
    font-size: .82rem;
    vertical-align: middle;
  }
  .listings-table .lt-row > span{
    display: inline-block;
    margin-right: .85rem;
    font-family: Manrope, sans-serif;
    font-size: .82rem;
    color: var(--m-muted);
    vertical-align: middle;
  }
  .listings-table .lt-row > span.muted{
    color: var(--m-muted);
    opacity: .85;
  }
  .listings-table .lt-row .lt-actions{
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: block;
    justify-content: initial;
  }
  .listings-table .lt-row .lt-actions .lt-menu{
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: 1px solid var(--m-line);
    background: var(--m-white);
    color: var(--m-ink);
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .listings-table .lt-row .lt-actions .lt-menu:hover,
  .listings-table .lt-row .lt-actions .lt-menu:active{
    background: var(--m-bg);
  }
  .listings-table .lt-row .lt-actions .lt-dropdown{
    right: 0;
    top: calc(100% + 6px);
    min-width: 220px;
    max-width: calc(100vw - 32px);
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(20, 30, 25, .14);
    padding: .35rem;
    z-index: 50;
  }
  .listings-table .lt-row .lt-actions .lt-dropdown a{
    padding: .65rem .75rem;
    border-radius: 8px;
    font-family: Manrope, sans-serif;
    font-size: .92rem;
    color: var(--m-ink);
    line-height: 1.2;
  }
  .listings-table .lt-row .lt-actions .lt-dropdown a:active{
    background: var(--m-bg);
  }
  .listings-table .lt-row .lt-actions .lt-dropdown a.danger{
    color: var(--m-terracotta);
  }
  .listings-table .lt-row .lt-actions .lt-dropdown hr{
    margin: .25rem 0;
  }
  .listings-table .lt-row:last-child .lt-actions .lt-dropdown{
    top: auto;
    bottom: calc(100% + 6px);
  }

}/* end @media max-width 768px */

/* Desktop: hide the mobile-only property top bar */
#view-property .m-prop-topbar{ display: none; }
@media (max-width: 768px){
  #view-property .m-prop-topbar{ display: flex; }
}

/* Desktop: hide the mobile-only floating "Become a host" button (FAB).
   Its show/position rules live inside @media (max-width: 768px), so on
   desktop the <a> would fall back to display:inline and its inner <svg>
   (viewBox 0 0 24 24, no explicit width/height) stretches to the full
   viewport width, producing a giant house-shaped icon after the footer. */
.fab-become-host{ display: none; }

/* ============================================================
   BECOME A HOST — desktop layout (also styles things outside the
   media query so the landing looks decent on bigger screens too)
   ============================================================ */
#view-register-host .bh-landing{
  width: 100%;
}
@media (min-width: 769px){
  #view-register-host .bh-hero{
    min-height: 540px;
    background-image:
      linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.50) 100%),
      url("https://images.unsplash.com/photo-1497366216548-37526070297c?w=2000&q=80");
    background-size: cover;
    background-position: center;
    padding: 5rem 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #FAF7F1;
    position: relative;
  }
  #view-register-host .bh-back{
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #FAF7F1;
  }
  #view-register-host .bh-back svg{
    width: 14px; height: 14px; stroke: #FAF7F1; fill: none;
  }
  #view-register-host .bh-hero-content{
    max-width: 640px;
  }
  #view-register-host .bh-eyebrow{
    display: inline-block;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: #FAF7F1;
    padding: .4rem 1rem;
    border-radius: 999px;
    font-family: Manrope, sans-serif;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin: 0 0 1.25rem;
  }
  #view-register-host .bh-title{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 3.5rem;
    line-height: 1.05;
    font-weight: 400;
    color: #FAF7F1;
    margin: 0 0 1.25rem;
    letter-spacing: -0.015em;
  }
  #view-register-host .bh-title em{
    font-style: italic;
    color: #C9962A;
  }
  #view-register-host .bh-sub{
    font-family: Manrope, sans-serif;
    font-size: 1.1rem;
    line-height: 1.5;
    max-width: 500px;
    margin: 0 0 2rem;
    color: rgba(250,247,241,0.95);
  }
  #view-register-host .bh-cta-primary{
    display: inline-flex;
    padding: 1.1rem 2.5rem;
    background: #C8553D;
    color: #FAF7F1;
    border: none;
    border-radius: 14px;
    font-family: Manrope, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(200,85,61,0.35);
  }
  #view-register-host .bh-section{
    padding: 4rem 3rem;
  }
  #view-register-host .bh-section-title{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2.4rem;
    line-height: 1.15;
    font-weight: 400;
    color: #1A2622;
    margin: 0 auto 2rem;
    letter-spacing: -0.01em;
    text-align: center;
    max-width: 800px;
  }
  #view-register-host .bh-section-title em{
    font-style: italic;
    color: #C8553D;
  }
  #view-register-host .bh-features{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
  }
  #view-register-host .bh-feature{
    background: #fff;
    border: 1px solid #E5E2DC;
    border-radius: 18px;
    padding: 2rem 1.75rem;
  }
  #view-register-host .bh-feature-icon{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(200, 85, 61, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 1.25rem;
  }
  #view-register-host .bh-feature-icon svg{
    width: 26px;
    height: 26px;
    stroke: #C8553D;
    fill: none;
  }
  #view-register-host .bh-feature h3{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: #1A2622;
    margin: 0 0 1rem;
  }
  #view-register-host .bh-feature ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
  }
  #view-register-host .bh-feature ul li{
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    line-height: 1.5;
    color: #4A5550;
    padding-left: 1.25rem;
    position: relative;
  }
  #view-register-host .bh-feature ul li::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: #C8553D;
    border-radius: 50%;
  }
  #view-register-host .bh-closing{
    text-align: center;
    padding: 4rem 3rem 2rem;
  }
  #view-register-host .bh-closing-text{
    font-family: Manrope, sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #6E7A72;
    margin: 0 auto 2rem;
    max-width: 720px;
  }
  #view-register-host .bh-form-section{
    padding: 0 3rem;
    background: #F2F2F2;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .4s ease, opacity .3s ease, padding .3s ease;
  }
  #view-register-host .bh-form-section.open{
    max-height: 2000px;
    opacity: 1;
    padding: 2rem 3rem 5rem;
  }
  #view-register-host .bh-form-card{
    max-width: 580px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #E5E2DC;
    border-radius: 18px;
    padding: 2.5rem;
  }
  #view-register-host .bh-form-card h2{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2rem;
    font-weight: 400;
    color: #1A2622;
    margin: 0 0 .5rem;
  }
}

/* Desktop: hide the mobile-only hero notification bell */
.hero-notif-btn{ display: none; }
@media (max-width: 768px){
  .hero-notif-btn{ display: flex; }
}

/* ============================================================
   FIX 18 v4 — Host-only sidebar items, CSS fallback layer
   Uses the existing FIX 17M `is-host` body class. JS sets it via
   ccIsHost() which is strict-but-tolerant. If JS misses or runs
   late, this CSS rule still keeps the items hidden for non-hosts.
   ============================================================ */
body:not(.is-host) .dash-nav-item[data-host="listings"],
body:not(.is-host) .dash-nav-item[data-host="reviews"],
body:not(.is-host) .dash-nav-item[data-host="earnings"]{
  display: none !important;
}

/* FIX 18 V4 — Hard guard: a non-host should never see the host
   dashboard view, regardless of routing path. If a stale state
   ever leaves view-host-dashboard active after switching accounts,
   this rule wins.  The is-host class is toggled centrally in
   setLoggedIn() and showView(). */
body:not(.is-host) #view-host-dashboard{
  display: none !important;
}

/* ============================================================
   FIX 18 VUELTA 2 — Share button on property cards
   Mirrors the .prop-fav heart button styling per context. Sits to
   the LEFT of the heart in the top-right corner of the image.
   ============================================================ */
@media (max-width: 768px){
  /* Base — mobile default (Home featured + Saved + everywhere else) */
  .property-card .prop-img{ position: relative; }
  .property-card .prop-share{
    position: absolute;
    top: .65rem;
    right: 3.1rem;            /* 36px (heart) + .65rem gap = ~3.1rem */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--m-white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border: none;
    cursor: pointer;
  }
  .property-card .prop-share svg{
    width: 16px;
    height: 16px;
    color: var(--m-ink);
    stroke: var(--m-ink);
    fill: none;
  }
  .property-card .prop-share:active{ background: var(--m-bg); }

  /* Featured carousel context — match heart size there */
  #view-home #featuredGrid .property-card .prop-share{
    top: .65rem;
    right: 3.1rem;
  }
  /* Search grid context — match heart size there */
  #view-search .search-grid .property-card .prop-share{
    width: 36px;
    height: 36px;
    top: .65rem;
    right: 3.1rem;
  }
  #view-search .search-grid .property-card .prop-share svg{
    width: 17px;
    height: 17px;
  }
  /* Saved (guest dashboard) context — same as base */
  #view-guest-dashboard #favoritesGrid .property-card .prop-share,
  #view-guest-dashboard .prop-grid .property-card .prop-share{
    top: .65rem;
    right: 3.1rem;
  }
}

/* Desktop baseline for .prop-share (mirrors desktop .prop-fav at L3478 of styles.css) */
.prop-share{
  position: absolute;
  top: 12px;
  right: 56px;             /* 36px (heart width) + 8px gap + 12px (heart's right) = 56px from right */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.prop-share svg{
  width: 18px;
  height: 18px;
  color: var(--ink, #1A2622);
  stroke: currentColor;
  fill: none;
}
.prop-share:hover svg{ color: var(--terracotta, #C8553D); }

/* ============================================================
   FIX 18 V3 — Saved view is ONLY favorites for Host
   (Per user spec: "en saved solo dejar lo de favorito... esto es solo para host")
   Host has their own bookings page inside the host-dashboard, so the
   bookings section shouldn't appear in their Wishlists view.
   ============================================================ */
body.is-host #view-guest-dashboard #guestBookingsSection{
  display: none !important;
}

/* Bookings section visual grouping (Guest only — the host view has its own
   styling on the host-dashboard bookings pane). */
.bookings-section{
  margin-bottom: 1.5rem;
}
.bookings-section-head{
  margin-bottom: 1rem;
}

/* ============================================================
   HELP CENTER inside Profile (FIX 18 V4)
   New "Help Center" option in the Profile/Account list, with
   embedded video tutorials and accordion-style help topics.
   ============================================================ */

/* Section titles inside the help panel */
#view-account #acctHelp .cc-help-section-title{
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--m-ink);
  margin: 1.25rem 0 .75rem;
  letter-spacing: -0.01em;
}
#view-account #acctHelp .cc-help-section-title:first-child{
  margin-top: 0;
}

/* ----- Video tutorial cards ----- */
#view-account #acctHelp .cc-help-tutorials{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
#view-account #acctHelp .cc-help-video-card{
  background: var(--m-bg);
  border: 1px solid var(--m-line);
  border-radius: 14px;
  overflow: hidden;
}
#view-account #acctHelp .cc-help-video{
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  border-radius: 14px 14px 0 0;
  -webkit-tap-highlight-color: transparent;
}
#view-account #acctHelp .cc-help-video-meta{
  padding: .85rem 1rem 1rem;
}
#view-account #acctHelp .cc-help-video-meta strong{
  display: block;
  font-family: Manrope, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--m-ink);
  margin-bottom: .2rem;
}
#view-account #acctHelp .cc-help-video-meta p{
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--m-muted);
}

/* ----- Accordion topics ----- */
#view-account #acctHelp .cc-help-topics{
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--m-white);
  border: 1px solid var(--m-line);
  border-radius: 14px;
  overflow: hidden;
  margin-top: .25rem;
}
#view-account #acctHelp .cc-help-topics .cc-help-section-title{
  padding: 0 0 .25rem;
  margin: 1.25rem 0 .75rem;
}

#view-account #acctHelp .cc-help-acc{
  border-bottom: 1px solid var(--m-line);
}
#view-account #acctHelp .cc-help-acc:last-of-type{
  border-bottom: none;
}
#view-account #acctHelp .cc-help-acc > summary{
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  font-family: Manrope, sans-serif;
}
/* hide default disclosure marker (Safari/Firefox/Chromium) */
#view-account #acctHelp .cc-help-acc > summary::-webkit-details-marker{
  display: none;
}
#view-account #acctHelp .cc-help-acc > summary::marker{
  display: none;
  content: '';
}
#view-account #acctHelp .cc-help-acc-icon{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--m-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
#view-account #acctHelp .cc-help-acc-title{
  flex: 1;
  font-size: .95rem;
  font-weight: 600;
  color: var(--m-ink);
  line-height: 1.3;
}
#view-account #acctHelp .cc-help-acc-chev{
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--m-muted);
  border-top: 2px solid var(--m-muted);
  transform: rotate(135deg);
  transition: transform .2s ease;
  flex-shrink: 0;
  margin-right: .15rem;
}
#view-account #acctHelp .cc-help-acc[open] > summary .cc-help-acc-chev{
  transform: rotate(-45deg);
}
#view-account #acctHelp .cc-help-acc[open] > summary{
  background: var(--m-bg);
}
#view-account #acctHelp .cc-help-acc-body{
  padding: .25rem 1.1rem 1.1rem;
  font-family: Manrope, sans-serif;
}
#view-account #acctHelp .cc-help-acc-body p{
  font-size: .9rem;
  line-height: 1.6;
  color: var(--m-ink-soft);
  margin: 0 0 .75rem;
}
#view-account #acctHelp .cc-help-acc-body h4{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--m-ink);
  margin: 1rem 0 .4rem;
  letter-spacing: -0.005em;
}
#view-account #acctHelp .cc-help-acc-body ol,
#view-account #acctHelp .cc-help-acc-body ul{
  padding-left: 1.15rem;
  margin: .25rem 0 .9rem;
}
#view-account #acctHelp .cc-help-acc-body li{
  font-size: .9rem;
  line-height: 1.55;
  color: var(--m-ink-soft);
  margin-bottom: .35rem;
}
#view-account #acctHelp .cc-help-acc-body strong{
  color: var(--m-ink);
  font-weight: 700;
}
#view-account #acctHelp .cc-help-acc-body .muted{
  color: var(--m-muted);
}
#view-account #acctHelp .cc-help-acc-body .small{
  font-size: .8rem;
}

/* ----- Contact rows ----- */
#view-account #acctHelp .cc-help-contact{
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-top: .5rem;
}
#view-account #acctHelp .cc-help-contact-row{
  background: var(--m-bg);
  border: 1px solid var(--m-line);
  border-radius: 12px;
  padding: .85rem 1rem;
}
#view-account #acctHelp .cc-help-contact-row strong{
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--m-ink);
  margin-bottom: .25rem;
}
#view-account #acctHelp .cc-help-contact-row p{
  margin: 0 0 .2rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--m-ink);
}
#view-account #acctHelp .cc-help-contact-row small{
  display: block;
  font-size: .78rem;
  color: var(--m-muted);
}

/* ----- Desktop / web-side polish (when this same panel is shown on web) ----- */
@media (min-width: 901px){
  #view-account #acctHelp .cc-help-tutorials{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

/* ============================================================
   FIX 18 V4 — "My bookings" inside Profile (was in Wishlist)
   Mirror the KPI grid + tab styles from #view-guest-dashboard
   into the new #acctBookings panel.
   ============================================================ */
@media (max-width: 768px){
  #view-account #acctBookings h2{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--m-ink);
    margin: 0 0 1rem;
  }

  /* KPI grid 2x2 — visually distinct from the surrounding white card */
  #view-account #acctBookings .kpi-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    margin: 0 0 1.25rem !important;
  }
  #view-account #acctBookings .kpi-card{
    background: var(--m-bg);
    border: 1px solid var(--m-line);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: none;
  }
  #view-account #acctBookings .kpi-label{
    display: block;
    font-family: Manrope, sans-serif;
    font-size: .68rem;
    color: var(--m-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .25rem;
  }
  #view-account #acctBookings .kpi-value{
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--m-ink);
    margin: 0;
  }
  #view-account #acctBookings .kpi-trend{
    display: none;
  }

  /* Tabs */
  #view-account #acctBookings .dash-tabs{
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--m-line);
    margin: 0 -1.25rem 1rem;
    padding: 0 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #view-account #acctBookings .dash-tabs::-webkit-scrollbar{ display: none; }
  #view-account #acctBookings .dash-tab{
    background: transparent;
    border: none;
    padding: .8rem 1rem;
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-muted);
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    cursor: pointer;
  }
  #view-account #acctBookings .dash-tab.active{
    color: var(--m-ink);
    border-bottom-color: var(--m-terracotta);
  }

  /* Bookings list spacing */
  #view-account #acctBookings .bookings-list{
    margin-top: .5rem;
  }
}

/* ============================================================
   FIX 18 V5 — Mirror the tight Featured-card text styling onto
   Recently viewed (.cc-extra-grid) cards. Before this, .cc-extra-grid
   cards used the global <p> default margins, which made the title /
   location / price feel like "presionar Enter" between lines.
   ============================================================ */
@media (max-width: 768px){
  #view-home .cc-extra-grid .property-card .prop-meta-row{
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: .15rem;
    margin: 0;
    padding: 0;
  }
  #view-home .cc-extra-grid .property-card .prop-meta-row > span:first-child{
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--m-ink);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }
  #view-home .cc-extra-grid .property-card .prop-rating{
    font-family: Manrope, sans-serif;
    font-size: .82rem;
    font-weight: 600;
    color: var(--m-ink);
  }
  #view-home .cc-extra-grid .property-card .prop-loc{
    font-family: Manrope, sans-serif;
    font-size: .8rem;
    color: var(--m-muted);
    margin: .05rem 0 .3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #view-home .cc-extra-grid .property-card .prop-price{
    font-family: Manrope, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--m-ink);
    margin: 0;
  }
  #view-home .cc-extra-grid .property-card .prop-price small{
    font-weight: 400;
    color: var(--m-muted);
    font-size: .8rem;
  }

  /* The simplified Featured header (no big title, no link-arrow) needs
     a touch of breathing room above the carousel — match cc-extra-group. */
  #view-home > section.container .section-head:has(> .eyebrow:only-child){
    margin-bottom: .75rem;
  }
}

/* ============================================================
   FIX 18 V5 — Location input inside the Filters panel
   Replaces the removed mobile city search pill.
   ============================================================ */
#filtersLocation{
  width: 100%;
  padding: .65rem .85rem;
  border: 1.5px solid var(--line, #E0DDD6);
  border-radius: 10px;
  font-family: Manrope, sans-serif;
  font-size: .95rem;
  background: var(--cream, #F8F5EE);
  outline: none;
  box-sizing: border-box;
}
#filtersLocation:focus{
  border-color: var(--primary, #2D4A3E);
}
@media (max-width: 768px){
  #filtersLocation{
    background: var(--m-bg);
    border-color: var(--m-line);
    color: var(--m-ink);
    font-size: 16px; /* avoid iOS zoom on focus */
  }
}

/* ============================================================
   FIX 18 V6 — Three things
   ============================================================ */

/* 1) HOSTS: hide "My bookings" tile in Profile (they cannot buy).
   The body.is-host class is toggled by setLoggedIn() and showView(). */
body.is-host #view-account .account-card[data-acct="bookings"]{
  display: none !important;
}

/* 2) PAYOUT HISTORY: avatar pill next to the guest name.
   Used inside Earnings → Payout history table cells. */
.po-guest-cell{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}
.po-guest-cell > span:last-child{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.po-guest-avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--cream-soft, #E5DECB);
  border: 1px solid var(--line, #E0DDD6);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: .8rem;
  color: var(--ink, #1A2622);
  line-height: 1;
}
.po-guest-initials{
  background-image: none !important;
}

/* 3) TIGHTER CARD TEXT — remove the "Enter look" entirely.
   These overrides target BOTH Featured cards and Recently viewed
   cards (.cc-extra-grid) since they share the same look now.
   Lower specificity rules above set looser margins; these win by
   appearing later in the cascade AND by being even more specific. */
@media (max-width: 768px){
  #view-home #featuredGrid .property-card .prop-meta-row,
  #view-home .cc-extra-grid .property-card .prop-meta-row{
    gap: 0;
    margin: 0;
    padding: 0;
    line-height: 1.15;
  }
  #view-home #featuredGrid .property-card .prop-meta-row > span:first-child,
  #view-home .cc-extra-grid .property-card .prop-meta-row > span:first-child{
    line-height: 1.15;
    margin: 0;
  }
  #view-home #featuredGrid .property-card .prop-rating,
  #view-home .cc-extra-grid .property-card .prop-rating{
    line-height: 1.15;
    margin: 0;
  }
  #view-home #featuredGrid .property-card .prop-loc,
  #view-home .cc-extra-grid .property-card .prop-loc{
    margin: 0 !important;
    padding: 0;
    line-height: 1.25;
  }
  #view-home #featuredGrid .property-card .prop-price,
  #view-home .cc-extra-grid .property-card .prop-price{
    margin: 0 !important;
    padding: 0;
    line-height: 1.25;
  }
}

/* ============================================================
   FIX 18 V7 — Three additions
   ============================================================ */

/* 1) PAYOUT HISTORY — property thumbnail in the Space cell */
.po-space-cell{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}
.po-space-cell > span:last-child{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.po-prop-thumb{
  display: inline-block;
  flex-shrink: 0;
  width: 44px;
  height: 32px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: var(--cream-soft, #E5DECB);
  border: 1px solid var(--line, #E0DDD6);
}
.po-prop-thumb-placeholder{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  background-image: none !important;
}

/* 2) BLOCK SPECIFIC DAYS — date row no longer overflows on mobile.
   Simpler approach: stack the two inputs vertically (full-width each),
   hide the redundant "to" label, keep the × button visible. The native
   date picker stays untouched. */
@media (max-width: 768px){
  .blocked-date-item{
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem !important;
    padding: .75rem !important;
    position: relative;
  }
  .blocked-date-item > input[type="date"]{
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: .65rem .75rem;
    font-size: .9rem;
    border: 1px solid var(--m-line);
    border-radius: 10px;
    background: var(--m-white);
    color: var(--m-ink);
    font-family: Manrope, sans-serif;
  }
  .blocked-date-item > span{
    display: none; /* the "to" word — visually obvious between two stacked dates */
  }
  .blocked-date-item > button{
    position: absolute;
    top: .35rem;
    right: .5rem;
    padding: .15rem .5rem;
    font-size: 1.2rem;
    line-height: 1;
    background: transparent;
    border: none;
    color: var(--m-terracotta);
    cursor: pointer;
  }
}

/* 3) SEARCH cards — apply the same tight text spacing as Featured /
   Recently. Before this they used .15rem-.4rem margins which felt like
   "presionar Enter". */
@media (max-width: 768px){
  #view-search .search-grid .property-card .prop-meta-row{
    gap: 0 !important;
    margin: 0 !important;
    padding: 0;
    line-height: 1.15;
  }
  #view-search .search-grid .property-card .prop-meta-row > span:first-child{
    line-height: 1.15;
    margin: 0;
  }
  #view-search .search-grid .property-card .prop-rating{
    line-height: 1.15;
    margin: 0;
  }
  #view-search .search-grid .property-card .prop-loc{
    margin: 0 !important;
    padding: 0;
    line-height: 1.25;
  }
  #view-search .search-grid .property-card .prop-price{
    margin: 0 !important;
    padding: 0;
    line-height: 1.25;
  }
}

/* ============================================================
   FIX 18 V8 — Aggressive overrides
   ============================================================ */

/* Body-scoped Search tight text — extra specificity to beat any
   earlier rule that uses .15rem-.4rem spacing. */
@media (max-width: 768px){
  html body #view-search .search-grid .property-card .prop-meta-row{
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
  }
  html body #view-search .search-grid .property-card .prop-meta-row > span:first-child{
    line-height: 1.15 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body #view-search .search-grid .property-card .prop-rating{
    line-height: 1.15 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body #view-search .search-grid .property-card .prop-loc{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
  }
  html body #view-search .search-grid .property-card .prop-price{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
  }

  /* Also apply the same to Featured / Recently — belt and suspenders */
  html body #view-home #featuredGrid .property-card .prop-loc,
  html body #view-home .cc-extra-grid .property-card .prop-loc,
  html body #view-home #featuredGrid .property-card .prop-price,
  html body #view-home .cc-extra-grid .property-card .prop-price{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
  }
}

/* ============================================================
   FIX 18 V9 — GLOBAL (web + mobile) tight card text
   These rules live OUTSIDE @media so they apply on desktop too.
   Bernardo is testing in the browser before compiling the APK.
   ============================================================ */

/* Tighten the flex gap inside every property card so title/loc/price
   sit close together (the "Recently viewed" look he likes). */
.property-card{
  gap: .2rem !important;
}
/* Default <p> elements have ~1em top+bottom margins from the browser;
   that's the "Enter look" you saw on the web. Kill them globally on
   property cards. */
.property-card .prop-meta-row{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}
.property-card .prop-loc{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.property-card .prop-price{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
/* The image needs a real gap before the text starts — restore that. */
.property-card .prop-img{
  margin-bottom: .55rem !important;
}

/* ============================================================
   FIX 18 V9 — Payout history: nicer card layout
   Replace the generic label/value stacked list with a more compact,
   visual layout: top row (thumb + space + date), middle (guest), bottom
   row (amounts + status pill).
   ============================================================ */
@media (max-width: 768px){
  /* Hide the auto-injected "DATA-LABEL:" prefix only inside payout history */
  #view-host-dashboard #payoutHistoryBody td::before{
    display: none !important;
    content: '' !important;
  }
  /* Card frame */
  #view-host-dashboard #payoutHistoryBody tr{
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "thumb space  date"
      "thumb guest  status"
      "amt   amt    amt";
    gap: .35rem .75rem !important;
    align-items: center;
    padding: .85rem 1rem !important;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 14px;
  }
  /* Hide labels — visual hierarchy makes them obvious */
  #view-host-dashboard #payoutHistoryBody td{
    display: block !important;
    padding: 0 !important;
    border: none !important;
    font-family: Manrope, sans-serif;
    font-size: .85rem;
    color: var(--m-ink);
    min-width: 0;
  }
  /* Date — top-right, blue accent, compact */
  #view-host-dashboard #payoutHistoryBody td[data-label="Date"]{
    grid-area: date;
    text-align: right;
    font-size: .78rem;
    color: var(--m-muted);
    font-weight: 600;
  }
  /* Space cell — title + thumb, top-left */
  #view-host-dashboard #payoutHistoryBody td[data-label="Space"]{
    grid-area: space;
    font-weight: 700;
    font-size: .92rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Thumb floats left as a column spanning two rows */
  #view-host-dashboard #payoutHistoryBody td[data-label="Space"] .po-space-cell{
    display: contents;
  }
  #view-host-dashboard #payoutHistoryBody td[data-label="Space"] .po-prop-thumb{
    grid-area: thumb;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    align-self: center;
    justify-self: start;
  }
  /* Guest below the space title */
  #view-host-dashboard #payoutHistoryBody td[data-label="Guest"]{
    grid-area: guest;
    font-size: .82rem;
    color: var(--m-muted);
    font-weight: 500;
  }
  #view-host-dashboard #payoutHistoryBody td[data-label="Guest"] .po-guest-cell{
    gap: .4rem;
  }
  #view-host-dashboard #payoutHistoryBody td[data-label="Guest"] .po-guest-avatar{
    width: 20px;
    height: 20px;
    font-size: .65rem;
  }
  /* Hide the three loose number rows; we replace them with a styled flex row */
  #view-host-dashboard #payoutHistoryBody td[data-label="Gross"],
  #view-host-dashboard #payoutHistoryBody td[data-label="Fee"]{
    display: none !important;
  }
  /* Net is the "what I got paid" hero number — bottom-left of card */
  #view-host-dashboard #payoutHistoryBody td[data-label="Net"]{
    grid-area: amt;
    border-top: 1px solid var(--m-line);
    padding-top: .55rem !important;
    margin-top: .25rem;
    display: flex !important;
    align-items: center;
    gap: .65rem;
    font-size: .85rem;
    color: var(--m-muted);
  }
  #view-host-dashboard #payoutHistoryBody td[data-label="Net"]::before{
    content: 'Net payout' !important;
    display: inline !important;
    color: var(--m-muted);
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 !important;
  }
  #view-host-dashboard #payoutHistoryBody td[data-label="Net"] strong{
    margin-left: auto;
    color: var(--m-ink);
    font-size: 1.05rem;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
  }
  /* Status pill — top-right under date */
  #view-host-dashboard #payoutHistoryBody td[data-label="Status"]{
    grid-area: status;
    text-align: right;
    justify-self: end;
  }
  #view-host-dashboard #payoutHistoryBody td[data-label="Status"] .pill{
    font-size: .68rem;
    padding: .18rem .55rem;
  }
}

/* ============================================================
   FIX 18 V11 — Search results as horizontal carousel like Recently
   (mobile only). Mirror of the #featuredGrid behavior:
   - 1 card  → full width, landscape 16/11 image
   - 2+ cards → horizontal carousel, 70% card width, portrait 4/5 image
   ============================================================ */
@media (max-width: 768px){
  /* Container becomes the same swipeable carousel as Featured */
  #view-search .search-grid{
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: .9rem !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -1.25rem !important;
    padding: 0 1.25rem 1.5rem !important;
  }
  #view-search .search-grid::-webkit-scrollbar{ display: none; }

  /* Single result → full width (no carousel) */
  #view-search .search-grid:has(.property-card:only-child){
    display: block !important;
    margin: 0 !important;
    padding: 0 1.25rem 1.5rem !important;
    overflow: visible;
  }
  #view-search .search-grid:has(.property-card:only-child) .property-card{
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  #view-search .search-grid:has(.property-card:only-child) .property-card .prop-img{
    aspect-ratio: 16 / 11 !important;
  }

  /* Multiple results → carousel cards (1.4 visible) */
  #view-search .search-grid .property-card{
    flex: 0 0 70% !important;
    max-width: 280px !important;
    scroll-snap-align: start;
  }
  #view-search .search-grid .property-card .prop-img{
    aspect-ratio: 4 / 5 !important;
    border-radius: 16px !important;
    margin: 0 0 .55rem !important;
  }
}

/* ============================================================
   FIX 18 V12 — Leaflet map containers
   Override any "sim-map" placeholder styling that could leak in.
   ============================================================ */
#searchMap.leaflet-container,
#propMap.leaflet-container,
.leaflet-container{
  background: var(--m-bg, #F2F2F2);
  font-family: Manrope, sans-serif !important;
}
#propMap.leaflet-container{
  width: 100%;
  min-height: 280px;
  border-radius: 14px;
  overflow: hidden;
}
.leaflet-control-attribution{
  font-size: 10px !important;
  background: rgba(255,255,255,0.85) !important;
}
.leaflet-popup-content{
  margin: .65rem .85rem !important;
}
@media (max-width: 768px){
  /* Show the map on mobile for both Search (when in Map view-mode) and
     property detail. Default search mobile mode hides the map; the user
     toggles via the view-mode buttons. We don't change that here. */
  #propMap.leaflet-container{
    min-height: 220px;
  }
}

/* ============================================================
   FIX 18 V13 — Airbnb-style photo pins on the search map
   ============================================================ */
.cc-map-pin{
  background: transparent !important;
  border: none !important;
}
.cc-map-pin-photo{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--cream-soft, #E5DECB);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28), 0 1px 2px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cc-map-pin-photo:hover{
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(0,0,0,0.32), 0 2px 4px rgba(0,0,0,0.18);
  z-index: 1000;
}
.cc-map-pin-photo-fallback{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background-image: none !important;
}
/* Slightly smaller pins on mobile so they don't crowd */
@media (max-width: 768px){
  .cc-map-pin-photo{
    width: 38px;
    height: 38px;
    border-width: 2.5px;
  }
}

/* ============================================================
   FIX 18 V14 — Mini map inside the search sheet + Open-in-Maps
   ============================================================ */
.m-ss-mini-map{
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  margin-top: .65rem;
  background: var(--m-bg, #F2F2F2);
  border: 1px solid var(--m-line, #E0DDD6);
}
.m-ss-mini-map.leaflet-container{
  font-family: Manrope, sans-serif !important;
}
.m-ss-mini-map-hint{
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--m-muted, #6E7A72);
}

/* Open-in-Maps link inside booking rows */
.booking-maps-link{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .4rem;
  padding: .3rem .6rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--m-ink, #2D4A3E);
  background: var(--m-bg, #F2F2F2);
  border: 1px solid var(--m-line, #E0DDD6);
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.booking-maps-link:hover{
  background: var(--cream-soft, #E5DECB);
  transform: translateY(-1px);
}
.booking-maps-link svg{
  flex-shrink: 0;
  color: var(--m-terracotta, #C8553D);
}
@media (max-width: 768px){
  .booking-maps-link{
    font-size: .72rem;
    padding: .28rem .55rem;
  }
}

/* ============================================================
   FIX 18 V15 — Property detail address + Open in Maps link
   ============================================================ */
.prop-address-row{
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}
.prop-address-row #propAddress{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 768px){
  .prop-address-row{
    align-items: flex-start;
  }
}

/* ============================================================
   FIX 18 V15 — Host-blocked dates show a clear strikethrough
   so guests see them as different from "past" dates.
   ============================================================ */
.cal-cell.host-blocked{
  position: relative;
  color: var(--m-muted, #6E7A72);
  opacity: .6;
  cursor: not-allowed;
}
.cal-cell.host-blocked::after{
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;
  height: 1.5px;
  background: var(--m-terracotta, #C8553D);
  transform: rotate(-12deg);
  pointer-events: none;
}

/* ============================================================
   FIX 18 V15g — Pull-to-refresh indicator
   ============================================================ */
.cc-ptr-indicator{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 80%, rgba(255,255,255,0));
  color: var(--m-ink, #2D4A3E);
  font-family: Manrope, sans-serif;
  font-size: .85rem;
  font-weight: 600;
  z-index: 5000;
  transform: translateY(-100%);
  transition: transform .15s ease;
  pointer-events: none;
  backdrop-filter: blur(6px);
}
.cc-ptr-indicator.visible{ pointer-events: auto; }
.cc-ptr-indicator.refreshing{ transition: transform .3s ease; }
.cc-ptr-spinner{
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--m-line, #E0DDD6);
  border-top-color: var(--m-terracotta, #C8553D);
  border-radius: 50%;
  animation: cc-ptr-spin 0.85s linear infinite;
}
.cc-ptr-indicator.refreshing .cc-ptr-spinner{ animation-play-state: running; }
@keyframes cc-ptr-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   FIX 18 V16 — Cancellation policy + cancel modal + wizard errors
   ============================================================ */

/* Property detail: policy section */
.cancel-policy-card{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--cream-soft, #F2EBDB);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.cancel-policy-badge{
  align-self: flex-start;
  background: #22b573;
  color: #fff;
  font-family: Manrope, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .25rem .65rem;
  border-radius: 999px;
  text-transform: uppercase;
}
.cancel-policy-card p{
  margin: 0;
  line-height: 1.45;
}

/* Cancel-on-booking button (small text link inside booking-side) */
.cancel-booking-btn{
  display: inline-block;
  margin-top: .35rem;
  padding: .15rem .35rem;
  font-size: .75rem;
  color: var(--terracotta, #c8553d);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
.cancel-booking-btn:hover{
  color: #8a3d2a;
}

/* Cancel modal */
.cc-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 25, 0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(3px);
}
.cc-modal{
  background: #fff;
  border-radius: 18px;
  padding: 1.5rem 1.5rem 1.25rem;
  max-width: 460px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  font-family: Manrope, sans-serif;
}
.cc-modal h2{
  margin: 0 0 .85rem;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.4rem;
}
.cc-modal-close{
  position: absolute;
  top: .75rem;
  right: .9rem;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--m-muted, #6E7A72);
  cursor: pointer;
}
.cancel-modal-summary{
  margin-bottom: .85rem;
}
.cancel-modal-summary p{ margin: 0; }
.cancel-refund-breakdown{
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  background: var(--cream-soft, #F2EBDB);
  border-radius: 10px;
}
.refund-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .4rem 0;
  font-size: .9rem;
  color: var(--m-ink, #2D4A3E);
}
.refund-row strong{ font-weight: 600; }
.refund-row-final{
  margin-top: .35rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(0,0,0,0.1);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
}
.refund-row-final strong{
  color: var(--terracotta, #c8553d);
  font-size: 1.15rem;
}
.cancel-modal-actions{
  display: flex;
  gap: .65rem;
  margin-top: 1.1rem;
}
.cancel-modal-actions button{
  flex: 1;
  padding: .75rem 1rem;
  border-radius: 10px;
  font-weight: 600;
  font-family: Manrope, sans-serif;
  font-size: .92rem;
  cursor: pointer;
}
.cancel-modal-confirm{
  background: var(--terracotta, #c8553d) !important;
  color: #fff !important;
  border: none !important;
}
.cancel-modal-confirm:hover{ filter: brightness(0.95); }

/* Wizard step error message */
.wiz-step-error{
  background: #fdecea;
  color: #8a1f1f;
  border-left: 4px solid #c8553d;
  padding: .65rem .85rem;
  border-radius: 8px;
  margin: 0 0 1rem;
  font-size: .9rem;
  font-weight: 500;
  transition: background .2s ease;
}
.wiz-step-error.flash{
  background: #f7c4be;
}

/* Mobile: cancel modal full-width feel */
@media (max-width: 768px){
  .cc-modal{
    border-radius: 14px;
    padding: 1.25rem 1.15rem 1rem;
  }
  .cc-modal h2{ font-size: 1.25rem; }
}

/* ============================================================
   FIX 18 V16b — Wizard map preview + Open-in-Maps responsive
   ============================================================ */

/* Wizard step 3 — Leaflet map below the address input */
.wiz-map-canvas{
  height: 220px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-top: .75rem;
  background: var(--m-bg, #F2F2F2);
  border: 1px solid var(--m-line, #E0DDD6);
}
@media (max-width: 768px){
  .wiz-map-canvas{ height: 180px; }
}

/* "Open in Maps" pill — below View details inside booking-side */
.booking-row .booking-side .booking-maps-link{
  margin-top: 0;
  padding: .65rem 1rem;
  font-size: .85rem;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
  background: var(--m-bg, #F2EBDB);
  border: 1px solid var(--m-line, #E0DDD6);
  border-radius: 999px;
  color: var(--m-ink, #2D4A3E);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 600;
}
.booking-row .booking-side .cancel-booking-btn{
  margin-top: 0;
  padding: .55rem 1rem;
  font-size: .85rem;
  width: 100%;
  background: transparent;
  border: 1px solid var(--m-terracotta, #C8553D);
  border-radius: 999px;
  color: var(--m-terracotta, #C8553D);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
@media (max-width: 768px){
  .booking-row .booking-side .booking-maps-link,
  .booking-row .booking-side .cancel-booking-btn{
    padding: .65rem 1rem;
  }
}

/* ============================================================
   FIX 18 V17 — Week-day slots in the wizard step 10
   ============================================================ */

.weekdays-list{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: .65rem;
}

.day-row{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: start;
  gap: .85rem;
  padding: .7rem .85rem;
  background: var(--cream-soft, #F2EBDB);
  border-radius: 12px;
}
.day-row > strong{
  font-family: Manrope, sans-serif;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .07em;
  color: var(--m-ink, #2D4A3E);
  padding-top: .55rem; /* visually align with the first slot row's input */
}
.day-slots{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 1.8rem; /* keeps the row neat even when empty */
}
.day-slots:empty::after{
  content: 'No slots — all hours open (or use Block Days)';
  display: block;
  font-family: Manrope, sans-serif;
  font-size: .75rem;
  color: var(--m-muted, #6E7A72);
  font-style: italic;
  padding-top: .3rem;
}

.slot-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr 80px 32px;
  align-items: center;
  gap: .35rem;
}
.slot-row > span{
  text-align: center;
  font-weight: 600;
  color: var(--m-muted, #6E7A72);
}
.slot-row .slot-from,
.slot-row .slot-to,
.slot-row .slot-price{
  font-family: Manrope, sans-serif;
  font-size: .85rem;
  padding: .35rem .5rem;
  border: 1px solid var(--m-line, #E0DDD6);
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  min-width: 0; /* allow grid items to shrink */
}
.slot-row .slot-price{
  text-align: right;
}
.slot-row .remove-slot-btn{
  background: transparent;
  border: 1px solid var(--m-line, #E0DDD6);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  color: var(--m-muted, #6E7A72);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
}
.slot-row .remove-slot-btn:hover{
  background: #fdecea;
  color: #c8553d;
  border-color: #c8553d;
}

.add-slot-btn{
  align-self: start;
  white-space: nowrap;
}

/* Calendar: day-of-week with no host slot configured */
.cal-cell.no-weekday-slot{
  color: var(--m-muted, #B8B0A2);
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(0,0,0,0.03) 4px,
    rgba(0,0,0,0.03) 8px
  );
  cursor: not-allowed;
}

/* Time slot price-override badge */
.time-slot .slot-price-tag{
  display: block;
  font-family: Manrope, sans-serif;
  font-size: .65rem;
  font-weight: 600;
  color: var(--terracotta, #c8553d);
  margin-top: .15rem;
  line-height: 1;
}

/* Mobile tweaks */
@media (max-width: 768px){
  .day-row{
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto;
    gap: .35rem .55rem;
    padding: .65rem .65rem;
  }
  .day-row > strong{
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-top: .35rem;
  }
  .day-row > .day-slots{
    grid-column: 2;
    grid-row: 1;
  }
  .day-row > .add-slot-btn{
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    font-size: .78rem;
    padding: .35rem .65rem;
  }
  /* Use flex-wrap so the row breaks into 2 lines on small screens:
     line 1 = [from] — [to], line 2 = [price ........] [×] */
  .slot-row{
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .4rem .5rem;
    background: #fff;
    border-radius: 8px;
  }
  .slot-row .slot-from,
  .slot-row .slot-to{
    flex: 1 1 40%;
    min-width: 0;
    font-size: .82rem;
    padding: .3rem .45rem;
  }
  .slot-row > span{
    flex: 0 0 auto;
    align-self: center;
    font-weight: 600;
    color: var(--m-muted, #6E7A72);
  }
  .slot-row .slot-price{
    flex: 1 1 calc(100% - 44px);
    text-align: left;
    font-size: .82rem;
    padding: .3rem .45rem;
  }
  .slot-row .remove-slot-btn{
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
  .day-slots:empty::after{
    font-size: .7rem;
    padding-top: .2rem;
  }
}

/* ============================================================
   FIX 18 V17d — Change date button next to Reserve Now
   ============================================================ */
.bk-action-row{
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.bk-action-row .bk-change-date-btn{
  font-size: .85rem;
  padding: .65rem 1rem;
  border: 1px solid var(--m-ink, #2D4A3E);
  background: transparent;
  color: var(--m-ink, #2D4A3E);
  border-radius: 999px;
  font-family: Manrope, sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bk-action-row .bk-change-date-btn:hover,
.bk-action-row .bk-change-date-btn:active{
  background: var(--m-ink, #2D4A3E);
  color: #fff;
}
@media (max-width: 768px){
  .bk-action-row .bk-change-date-btn{
    font-size: .82rem;
    padding: .6rem .85rem;
  }
}

/* ============================================================
   FIX 18 V17e — Search results grouped by category, each as a
   horizontal scrolling carousel (like Recently Viewed / Featured)
   ============================================================ */

/* ============================================================
   FIX 18 V17n — Airbnb-style cards in Search mobile
   No card box (no white bg, no border, no shadow). Just an image
   with rounded corners + text below sitting on the page background.
   ============================================================ */
@media (max-width: 768px){
  /* Plain default background — no cream box. Cards are naked.
     The view's parent body is already #FAF6EE so this stays consistent. */
  #view-search{
    background: #FAF6EE !important;
  }

  /* Bigger gap between categories for breathing */
  #view-search .search-grid{
    gap: 2.25rem !important;
    padding: .75rem 0 2.5rem !important;
  }
  #view-search .search-cat-section{
    gap: 1rem;
  }
  #view-search .search-cat-title{
    padding-left: .25rem;
    padding-right: .25rem;
  }

  /* Stack cards vertically. No horizontal scroll. */
  #view-search .search-cat-row{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 1.75rem !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    scroll-snap-type: none;
  }

  /* NAKED card — no box, no border, no shadow.
     Just a container for the image + text below. */
  #view-search .search-cat-row .property-card{
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;   /* icons must not be clipped */
    aspect-ratio: auto !important;
    scroll-snap-align: none;
  }

  /* Image: large, rounded corners, aspect 5:4 (more square = more presence) */
  #view-search .search-cat-row .property-card .prop-img{
    position: relative;
    aspect-ratio: 5 / 4;
    border-radius: 16px !important;
    margin: 0 !important;
    overflow: hidden;       /* the rounding clips the bg image, but the icons are positioned via abs on the img wrapper which has overflow:visible thanks to z-index */
    background-size: cover !important;
    background-position: center !important;
    background-color: var(--m-line, #E0DDD6);
  }

  /* HEART — top-right, well clear of the 16px corner radius (1rem from edge) */
  #view-search .search-cat-row .property-card .prop-fav{
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    z-index: 4;
    border: none;
    cursor: pointer;
    transition: transform .15s ease;
    padding: 0;
  }
  #view-search .search-cat-row .property-card .prop-fav:active{
    transform: scale(.9);
  }
  #view-search .search-cat-row .property-card .prop-fav svg{
    width: 16px;
    height: 16px;
    color: var(--m-ink, #2D4A3E);
    stroke: var(--m-ink, #2D4A3E);
    stroke-width: 2.2;
    fill: none;
    display: block;
  }
  #view-search .search-cat-row .property-card .prop-fav.is-fav svg{
    color: var(--m-terracotta, #C8553D);
    fill: var(--m-terracotta, #C8553D);
    stroke: var(--m-terracotta, #C8553D);
  }

  /* SHARE — tight cluster with heart, 8px gap between them */
  #view-search .search-cat-row .property-card .prop-share{
    position: absolute;
    top: 1rem;
    right: 3.25rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    z-index: 4;
    border: none;
    cursor: pointer;
    transition: transform .15s ease;
    padding: 0;
  }
  #view-search .search-cat-row .property-card .prop-share:active{
    transform: scale(.9);
  }
  #view-search .search-cat-row .property-card .prop-share svg{
    width: 14px;
    height: 14px;
    color: var(--m-ink, #2D4A3E);
    stroke: var(--m-ink, #2D4A3E);
    stroke-width: 2.2;
    fill: none;
    display: block;
  }

  /* PREMIUM / FEATURED badge — top-left, white pill with blur */
  #view-search .search-cat-row .property-card .prop-img-badge{
    position: absolute;
    top: .9rem;
    left: .9rem;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--m-ink, #2D4A3E);
    font-family: Manrope, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: .4rem .75rem;
    border-radius: 999px;
    z-index: 4;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  }

  /* TEXT BELOW IMAGE — naked, no padding sideways (uses the view's padding) */
  #view-search .search-cat-row .property-card > .prop-meta-row{
    padding: .85rem .15rem 0 0;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    gap: .65rem;
    width: 100%;
    box-sizing: border-box;
  }
  #view-search .search-cat-row .property-card > .prop-meta-row > span:first-child{
    font-family: Manrope, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--m-ink, #2D4A3E);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }
  #view-search .search-cat-row .property-card > .prop-meta-row > .prop-rating{
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    color: var(--m-ink, #2D4A3E);
    font-weight: 600;
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
  }
  #view-search .search-cat-row .property-card > .prop-loc{
    font-size: .9rem;
    color: var(--m-muted, #6E7A72);
    margin: .15rem 0 0;
    padding: 0;
  }
  #view-search .search-cat-row .property-card > .prop-price{
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--m-ink, #2D4A3E);
    margin: .35rem 0 0;
    padding: 0;
  }
  #view-search .search-cat-row .property-card > .prop-price small{
    font-family: Manrope, sans-serif;
    font-size: .9rem;
    font-weight: 400;
    color: var(--m-muted, #6E7A72);
  }
}
/* ============================================================
   FIX 18 V17i — Defensive containment for the Search view
   Prevent any inner horizontal scroll from pushing the page sideways.
   ============================================================ */
/* Hard horizontal lock — prevents children from making the page scroll sideways */
#view-search,
#view-search .container.search-wrap,
#view-search .search-content,
#view-search .search-grid-map-wrap{
  max-width: 100vw;
  overflow-x: hidden;
}

/* Force the search-grid stack the category sections vertically.
   This OVERRIDES the V11 single-carousel layout. */
#view-search .search-grid{
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 1.75rem;
  padding: .5rem 0 2rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;   /* don't allow horizontal overflow of the column itself */
  overflow-y: visible;
}

/* Each category section */
.search-cat-section{
  display: flex;
  flex-direction: column;
  gap: .65rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.search-cat-title{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--m-ink, #2D4A3E);
  margin: 0;
  padding: 0 .25rem;
}
.search-cat-count{
  font-family: Manrope, sans-serif;
  font-size: .8rem;
  font-weight: 500;
  color: var(--m-muted, #6E7A72);
  margin-left: .25rem;
}

/* The horizontal scroll row — same pattern as recently/featured carousels */
.search-cat-row{
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: .85rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: .15rem 0 .35rem;
  margin: 0;
}
.search-cat-row::-webkit-scrollbar{ display: none; }

/* Cards inside the carousel */
.search-cat-row .property-card{
  flex: 0 0 70%;
  max-width: 280px;
  scroll-snap-align: start;
  aspect-ratio: auto;
}
/* When only one card in a category, give it more room */
.search-cat-row .property-card:only-child{
  flex: 0 0 90%;
  max-width: 340px;
}

@media (min-width: 769px){
  .search-cat-row .property-card{
    flex: 0 0 280px;
    max-width: 320px;
  }
  .search-cat-title{
    font-size: 1.2rem;
  }
}

@media (max-width: 380px){
  .search-cat-row .property-card{
    flex: 0 0 78%;
  }
}

/* ============================================================
   FIX 18 V17f — Edit date/time link in the mobile sticky bar
   ============================================================ */
.m-prop-bar-edit{
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin-top: .25rem;
  font-family: Manrope, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  color: var(--terracotta, #c8553d);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}
.m-prop-bar-edit:hover,
.m-prop-bar-edit:active{
  color: #8a3d2a;
}

/* ============================================================
   FIX 18 V17f — Stronger visual separation between search categories
   ============================================================ */

/* Bigger title with an accent bar + line below */
.search-cat-section{
  position: relative;
  padding: 1rem 0 .35rem;
  border-top: 1px solid var(--m-line, #E0DDD6);
}
.search-cat-section:first-child{
  border-top: none;
  padding-top: .25rem;
}
.search-cat-title{
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--m-ink, #2D4A3E);
  margin: 0 0 .25rem;
  padding: 0 .25rem;
  position: relative;
}
.search-cat-title::before{
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.1rem;
  background: var(--terracotta, #c8553d);
  border-radius: 2px;
  margin-right: .15rem;
}
.search-cat-count{
  font-family: Manrope, sans-serif;
  font-size: .82rem;
  font-weight: 500;
  color: var(--m-muted, #6E7A72);
  background: var(--cream-soft, #F2EBDB);
  padding: .15rem .55rem;
  border-radius: 999px;
}

#view-search .search-grid{
  gap: 1rem; /* sections handle their own spacing via padding/border */
}

@media (min-width: 769px){
  .search-cat-title{ font-size: 1.3rem; }
  .search-cat-title::before{ height: 1.2rem; width: 5px; }
}

/* ============================================================
   FIX 18 V17h — Edit Listing modal · mobile polish
   ============================================================ */
.el-modal{
  position: fixed;
  inset: 0;
  background: #fff; /* full-bleed on mobile, no backdrop */
  z-index: 9500;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}
.el-shell{
  background: #fff;
  width: 100%;
  max-width: 720px;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Manrope, sans-serif;
  position: relative;
  overflow: hidden;
}
@media (min-width: 769px){
  .el-modal{
    background: rgba(20, 30, 25, 0.5);
    padding: 2rem;
    align-items: center;
    backdrop-filter: blur(3px);
  }
  .el-shell{
    height: auto;
    max-height: 92vh;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  }
}

/* Header — close (×) is replaced by a back-arrow style on mobile to feel native */
.el-head{
  padding: 1rem 1.1rem .65rem;
  border-bottom: 1px solid var(--m-line, #E0DDD6);
  position: relative;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: .25rem .5rem;
}
.el-head h2{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--m-ink, #2D4A3E);
  text-align: center;
}
.el-head > .muted{
  grid-column: 2;
  grid-row: 2;
  display: block;
  text-align: center;
  font-size: .75rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-close{
  grid-column: 1;
  grid-row: 1 / span 2;
  background: none;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--m-ink, #2D4A3E);
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .15s ease;
}
.el-close:hover{ background: var(--cream-soft, #F2EBDB); }

/* Progress bar — full-width below header */
.el-progress{
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  gap: .35rem;
  margin-top: .65rem;
  padding: 0 .15rem;
}
.el-step-dot{
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--m-line, #E0DDD6);
  transition: background .25s ease;
}
.el-step-dot.active{ background: var(--terracotta, #C8553D); }

/* Body */
.el-body{
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1.1rem 2rem;
  -webkit-overflow-scrolling: touch;
}
.el-step{ display: none; animation: el-fade .25s ease both; }
.el-step.active{ display: block; }
@keyframes el-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.el-step h1{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.45rem;
  margin: 0 0 .4rem;
  color: var(--m-ink, #2D4A3E);
  line-height: 1.2;
}
.el-step > .muted{ margin: 0 0 1.25rem; line-height: 1.4; font-size: .85rem; }

/* Hourly price — big centered money input */
.el-input-money{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .35rem;
  background: var(--cream-soft, #F2EBDB);
  border-radius: 18px;
  padding: 1.5rem 1rem;
  margin-top: 1rem;
}
.el-input-money > span:first-child{
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
  color: var(--m-muted, #6E7A72);
}
.el-input-money > span:last-child{
  font-family: Manrope, sans-serif;
  font-size: .9rem;
  font-weight: 500;
  color: var(--m-muted, #6E7A72);
  margin-left: .35rem;
}
.el-input-money input{
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--m-ink, #2D4A3E);
  width: 130px;
  text-align: center;
  padding: 0;
}

/* Min hours stepper */
.el-input-hours{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--cream-soft, #F2EBDB);
  border-radius: 10px;
  padding: .55rem .85rem;
  margin-top: .35rem;
}
.el-input-hours input{
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  width: 50px;
  text-align: center;
}
.el-input-hours > span{ font-size: .85rem; color: var(--m-muted, #6E7A72); }

/* Availability dates */
.el-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.el-grid-2 label{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--m-muted, #6E7A72);
  text-transform: uppercase;
  letter-spacing: .05em;
  min-width: 0;
}
.el-grid-2 input{
  padding: .75rem .85rem;
  border: 1px solid var(--m-line, #E0DDD6);
  border-radius: 10px;
  font-family: Manrope, sans-serif;
  font-size: .95rem;
  background: #fff;
  color: var(--m-ink, #2D4A3E);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.el-grid-2 input:focus{
  outline: none;
  border-color: var(--terracotta, #C8553D);
}
/* FIX 18 V17r — On narrow phones (e.g. 360px Galaxy), stack the two date
   inputs vertically so they never get cramped. */
@media (max-width: 420px){
  .el-grid-2{
    grid-template-columns: 1fr;
    gap: .85rem;
  }
}

/* Cancellation policy radio cards */
.el-policy-stack{
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.el-policy-card{
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1.5px solid var(--m-line, #E0DDD6);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.el-policy-card:has(input:checked){
  border-color: var(--terracotta, #C8553D);
  background: #fef6f3;
}
.el-policy-card input{
  accent-color: var(--terracotta, #C8553D);
  margin-top: .15rem;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.el-policy-card strong{
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  color: var(--m-ink, #2D4A3E);
  margin-bottom: .2rem;
}
.el-policy-card p{ margin: 0; font-size: .8rem; line-height: 1.45; }

/* Week-days editor */
.el-weekdays-list{
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.el-day-row{
  background: #fff;
  border: 1px solid var(--m-line, #E0DDD6);
  border-radius: 14px;
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.el-day-row > strong{
  font-family: Manrope, sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--terracotta, #C8553D);
}
.el-day-slots{
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-height: 0;
}
.el-day-slots:empty{ display: none; }
.el-day-row:has(.el-day-slots:empty) > strong::after{
  content: '· Any hour, base price';
  display: inline;
  margin-left: .4rem;
  font-weight: 500;
  font-size: .72rem;
  color: var(--m-muted, #6E7A72);
  letter-spacing: 0;
  text-transform: none;
}
.el-slot-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr 80px 32px;
  align-items: center;
  gap: .4rem;
  padding: .5rem .55rem;
  background: var(--cream-soft, #F2EBDB);
  border-radius: 10px;
}
.el-slot-row > span{ font-weight: 600; color: var(--m-muted); text-align: center; }
.el-slot-row input{
  padding: .4rem .5rem;
  font-size: .85rem;
  border: 1px solid var(--m-line, #E0DDD6);
  border-radius: 7px;
  background: #fff;
  min-width: 0;
  font-family: Manrope, sans-serif;
}
.el-slot-row input:focus{ outline: none; border-color: var(--terracotta, #C8553D); }
.el-slot-row .el-remove-slot{
  background: #fff;
  border: 1px solid var(--m-line, #E0DDD6);
  border-radius: 7px;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  cursor: pointer;
  color: var(--m-muted);
  transition: all .15s ease;
  padding: 0;
}
.el-slot-row .el-remove-slot:hover{
  background: #fdecea;
  color: #c8553d;
  border-color: #c8553d;
}
.el-add-slot-btn{
  align-self: flex-start;
  font-size: .8rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1.5px dashed var(--terracotta, #C8553D);
  background: transparent;
  color: var(--terracotta, #C8553D);
  font-weight: 600;
  cursor: pointer;
}
.el-add-slot-btn:hover{ background: #fef6f3; }

/* Blocked dates editor */
.el-blocked-list{
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: .8rem;
}
.el-blocked-date-item{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: .45rem;
  padding: .65rem .75rem;
  background: #fff;
  border: 1px solid var(--m-line, #E0DDD6);
  border-radius: 12px;
}
.el-blocked-date-item input{
  padding: .55rem .65rem;
  border: 1px solid var(--m-line, #E0DDD6);
  border-radius: 8px;
  background: #fff;
  font-size: .9rem;
  font-family: Manrope, sans-serif;
}
.el-blocked-date-item input:focus{ outline: none; border-color: var(--terracotta, #C8553D); }
.el-blocked-date-item > span{ color: var(--m-muted); font-size: .8rem; font-weight: 500; }
.el-blocked-date-item button{
  background: #fff;
  border: 1px solid var(--m-line, #E0DDD6);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  cursor: pointer;
  color: var(--m-muted);
  padding: 0;
}
.el-blocked-date-item button:hover{
  background: #fdecea;
  color: #c8553d;
  border-color: #c8553d;
}
#elAddBlockedDate{
  font-size: .8rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  border: 1.5px dashed var(--terracotta, #C8553D);
  background: transparent;
  color: var(--terracotta, #C8553D);
  font-weight: 600;
  cursor: pointer;
}
#elAddBlockedDate:hover{ background: #fef6f3; }

/* Footer */
.el-foot{
  padding: .9rem 1.1rem calc(.9rem + env(safe-area-inset-bottom, 0));
  border-top: 1px solid var(--m-line, #E0DDD6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  background: #fff;
  flex-shrink: 0;
}
.el-foot button{
  font-size: .9rem;
  padding: .75rem 1.4rem;
  border-radius: 999px;
  font-family: Manrope, sans-serif;
  font-weight: 600;
  cursor: pointer;
  border: none;
}
.el-foot .btn-outline{
  background: transparent;
  border: 1.5px solid var(--m-ink, #2D4A3E);
  color: var(--m-ink, #2D4A3E);
}
.el-foot .btn-outline:disabled{
  opacity: .3;
  cursor: not-allowed;
}
.el-foot .btn-primary{
  background: var(--m-ink, #2D4A3E);
  color: #fff;
  flex: 1 1 auto;
  max-width: 65%;
}
.el-step-label{
  display: none; /* hidden on mobile, redundant with progress bar */
}
@media (min-width: 769px){
  .el-step-label{
    display: inline;
    font-size: .82rem;
    color: var(--m-muted, #6E7A72);
  }
}

/* Mobile responsive for slot row — stack so price doesn't get cut off */
@media (max-width: 768px){
  .el-slot-row{
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
  }
  .el-slot-row .el-slot-from,
  .el-slot-row .el-slot-to{
    flex: 1 1 40%;
  }
  .el-slot-row .el-slot-price{
    flex: 1 1 calc(100% - 40px);
  }
  .el-slot-row .el-remove-slot{
    flex: 0 0 32px;
  }
  .el-blocked-date-item{
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .el-blocked-date-item input:first-of-type{ grid-column: 1 / span 2; grid-row: 1; }
  .el-blocked-date-item > span{
    display: none; /* "to" word is implicit in stacked layout */
  }
  .el-blocked-date-item input:last-of-type{ grid-column: 1; grid-row: 2; }
  .el-blocked-date-item button{ grid-column: 2; grid-row: 2; justify-self: end; }
}

/* ============================================================
   FIX 18 V17s — Booking confirmation preview modal
   ============================================================ */
.booking-confirm-modal{
  max-width: 460px;
}
.booking-confirm-modal h2{
  margin-bottom: .25rem;
}
.booking-confirm-modal > p.muted{
  margin: 0 0 1.2rem;
}
.bcm-card{
  display: flex;
  gap: .85rem;
  align-items: center;
  padding: .85rem;
  background: var(--cream-soft, #F2EBDB);
  border-radius: 12px;
  margin-bottom: 1.1rem;
}
.bcm-thumb{
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background-size: cover !important;
  background-position: center !important;
  background-color: var(--m-line, #E0DDD6);
  flex-shrink: 0;
}
.bcm-info{
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.bcm-info strong{
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
  color: var(--m-ink, #2D4A3E);
  line-height: 1.3;
}
.bcm-breakdown{
  margin: 0 0 1rem;
  padding: 0;
}
.bcm-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .55rem 0;
  font-size: .9rem;
  color: var(--m-ink, #2D4A3E);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.bcm-row:last-of-type{ border-bottom: none; }
.bcm-row span{ color: var(--m-muted, #6E7A72); }
.bcm-row strong{ font-weight: 600; }
.bcm-row-final{
  margin-top: .25rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(0,0,0,0.15) !important;
  border-bottom: none !important;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
}
.bcm-row-final span{ color: var(--m-ink, #2D4A3E) !important; font-weight: 600; }
.bcm-row-final strong{
  font-size: 1.4rem;
  color: var(--m-ink, #2D4A3E);
  font-weight: 700;
}
.bcm-policy{
  margin-bottom: 1.1rem;
}
.bcm-policy .cancel-policy-badge{
  margin-bottom: .35rem;
}

/* On the smallest phones, slightly tighter spacing */
@media (max-width: 380px){
  .bcm-thumb{ width: 56px; height: 56px; }
  .bcm-info strong{ font-size: 1rem; }
  .bcm-row-final strong{ font-size: 1.25rem; }
}

/* ============================================================
   FIX 18 V17s — Strong Search + Wishlist overrides
   These run after everything else in the cascade. Use high-specificity
   selectors + !important to defeat any leftover older rules.
   ============================================================ */
@media (max-width: 768px){
  /* ---------- SEARCH ---------- */
  body #view-search .search-cat-row .property-card{
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
  }
  body #view-search .search-cat-row .property-card .prop-img{
    aspect-ratio: 5 / 4 !important;
    border-radius: 16px !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* ---------- WISHLIST ---------- */
  body #view-guest-dashboard #favoritesGrid .property-card,
  body #view-guest-dashboard .prop-grid .property-card{
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  body #view-guest-dashboard #favoritesGrid .property-card .prop-img,
  body #view-guest-dashboard .prop-grid .property-card .prop-img{
    aspect-ratio: 5 / 4 !important;
    border-radius: 16px !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  /* Both: iconos del heart y share idénticos */
  body #view-search .search-cat-row .property-card .prop-fav,
  body #view-search .search-cat-row .property-card .prop-share,
  body #view-guest-dashboard #favoritesGrid .property-card .prop-fav,
  body #view-guest-dashboard #favoritesGrid .property-card .prop-share,
  body #view-guest-dashboard .prop-grid .property-card .prop-fav,
  body #view-guest-dashboard .prop-grid .property-card .prop-share{
    position: absolute !important;
    top: 1rem !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
    z-index: 4 !important;
    border: none !important;
    padding: 0 !important;
  }
  body #view-search .search-cat-row .property-card .prop-fav,
  body #view-guest-dashboard #favoritesGrid .property-card .prop-fav,
  body #view-guest-dashboard .prop-grid .property-card .prop-fav{
    right: 1rem !important;
  }
  body #view-search .search-cat-row .property-card .prop-share,
  body #view-guest-dashboard #favoritesGrid .property-card .prop-share,
  body #view-guest-dashboard .prop-grid .property-card .prop-share{
    right: 3.25rem !important;
  }
}

/* ============================================================
   FIX 18 V17t — TOTAL Search override
   Wishlist works fine with the V17s rules. Search has 26 conflicting
   prior rules. We use a final all-encompassing block to force every
   property and defeat all earlier rules.
   ============================================================ */
@media (max-width: 768px){
  /* Section container: stack cards vertically */
  html body #view-search .search-cat-row{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 1.75rem !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* CARD itself — naked, no box */
  html body #view-search .search-cat-row .property-card{
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    display: block !important;
  }

  /* IMAGE — 5:4 with rounded corners */
  html body #view-search .search-cat-row .property-card .prop-img{
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 5 / 4 !important;
    border-radius: 16px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    display: block !important;
  }

  /* HEART (top-right) */
  html body #view-search .search-cat-row .property-card .prop-fav{
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    left: auto !important;
    bottom: auto !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
    z-index: 4 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body #view-search .search-cat-row .property-card .prop-fav svg{
    width: 16px !important;
    height: 16px !important;
    color: #2D4A3E !important;
    stroke: #2D4A3E !important;
    stroke-width: 2.2 !important;
    fill: none !important;
  }
  html body #view-search .search-cat-row .property-card .prop-fav.is-fav svg{
    color: #C8553D !important;
    fill: #C8553D !important;
    stroke: #C8553D !important;
  }

  /* SHARE (next to heart) */
  html body #view-search .search-cat-row .property-card .prop-share{
    position: absolute !important;
    top: 1rem !important;
    right: 3.25rem !important;
    left: auto !important;
    bottom: auto !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
    z-index: 4 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body #view-search .search-cat-row .property-card .prop-share svg{
    width: 14px !important;
    height: 14px !important;
    color: #2D4A3E !important;
    stroke: #2D4A3E !important;
    stroke-width: 2.2 !important;
    fill: none !important;
  }

  /* PREMIUM badge top-left */
  html body #view-search .search-cat-row .property-card .prop-img-badge{
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    right: auto !important;
    background: rgba(255,255,255,0.96) !important;
    color: #2D4A3E !important;
    font-family: Manrope, sans-serif !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: .4rem .75rem !important;
    border-radius: 999px !important;
    z-index: 4 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
  }

  /* TITLE + RATING row */
  html body #view-search .search-cat-row .property-card > .prop-meta-row{
    padding: .85rem .15rem 0 0 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: .65rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  html body #view-search .search-cat-row .property-card > .prop-meta-row > span:first-child{
    font-family: Manrope, sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #2D4A3E !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body #view-search .search-cat-row .property-card > .prop-meta-row > .prop-rating{
    font-family: Manrope, sans-serif !important;
    font-size: .9rem !important;
    color: #2D4A3E !important;
    font-weight: 600 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  /* LOCATION */
  html body #view-search .search-cat-row .property-card > .prop-loc{
    font-family: Manrope, sans-serif !important;
    font-size: .88rem !important;
    color: #6E7A72 !important;
    margin: .15rem 0 0 !important;
    padding: 0 !important;
  }

  /* PRICE */
  html body #view-search .search-cat-row .property-card > .prop-price{
    font-family: Manrope, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #2D4A3E !important;
    margin: .35rem 0 0 !important;
    padding: 0 !important;
  }
  html body #view-search .search-cat-row .property-card > .prop-price small{
    font-family: Manrope, sans-serif !important;
    font-size: .85rem !important;
    font-weight: 400 !important;
    color: #6E7A72 !important;
  }
}

/* ============================================================
   FIX 18 V17u — Search container padding + Booking row final override
   ============================================================ */
@media (max-width: 768px){
  /* Ensure search container has proper side padding so cards don't touch edges */
  html body #view-search > .container.search-wrap{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  html body #view-search .search-content{
    padding: 0 !important;
    margin: 0 !important;
  }
  html body #view-search .search-grid-map-wrap{
    padding: 0 !important;
    margin: 0 !important;
    grid-template-columns: 1fr !important;
  }
  html body #view-search .search-grid{
    padding: .5rem 0 2rem !important;
    margin: 0 !important;
    gap: 2rem !important;
  }
  html body #view-search .search-cat-section{
    padding: 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--m-line, #E0DDD6);
    padding-top: 1.25rem !important;
  }
  html body #view-search .search-cat-section:first-child{
    border-top: none;
    padding-top: 0 !important;
  }
  html body #view-search .search-cat-title{
    margin: 0 0 1rem !important;
    padding: 0 !important;
    font-size: 1.15rem !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 600 !important;
    color: var(--m-ink, #2D4A3E) !important;
  }

  /* PAYOUT HISTORY / MY BOOKINGS — final override for vertical layout */
  html body #view-host-dashboard .booking-row,
  html body #view-account .booking-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid var(--m-line, #E0DDD6) !important;
    border-radius: 14px !important;
    padding: 0 !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
    align-items: stretch !important;
  }
  html body #view-host-dashboard .booking-row .booking-thumb,
  html body #view-account .booking-row .booking-thumb{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: var(--m-line, #E0DDD6) !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
    margin: 0 !important;
    flex: none !important;
  }
  html body #view-host-dashboard .booking-row .booking-info,
  html body #view-account .booking-row .booking-info{
    grid-row: 2 !important;
    grid-column: 1 !important;
    padding: .85rem 1rem 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .25rem !important;
    min-width: 0 !important;
    flex: none !important;
  }
  html body #view-host-dashboard .booking-row .booking-info h3,
  html body #view-account .booking-row .booking-info h3{
    font-family: Manrope, sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--m-ink, #2D4A3E) !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  html body #view-host-dashboard .booking-row .booking-info p,
  html body #view-account .booking-row .booking-info p{
    font-family: Manrope, sans-serif !important;
    font-size: .85rem !important;
    color: var(--m-muted, #6E7A72) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  html body #view-host-dashboard .booking-row .booking-side,
  html body #view-account .booking-row .booking-side{
    grid-row: 3 !important;
    grid-column: 1 !important;
    padding: .5rem 1rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .5rem !important;
    flex: none !important;
  }
  html body #view-host-dashboard .booking-row .booking-status,
  html body #view-account .booking-row .booking-status{
    align-self: flex-start !important;
    display: inline-block !important;
  }
}

/* ============================================================
   FIX 18 V18b — Welcome video popup — horizontal, smaller
   Video was recorded on a desktop screen, so a horizontal 16:9
   layout fits naturally. Smaller dimensions so it doesn't overwhelm.
   ============================================================ */
#welcomeVideoModal{
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}
.welcome-video-modal{
  /* Horizontal 16:9 rectangle — fits a desktop-recorded video naturally */
  width: min(560px, 92vw);
  aspect-ratio: 16 / 9;
  max-width: 92vw;
  max-height: 80vh;
  padding: 0 !important;
  background: #fff;
  border-radius: 14px;
  position: relative;
  box-shadow: 0 12px 50px rgba(0,0,0,0.55);
  margin: 0 !important;
  overflow: hidden;
}
.welcome-video-modal .cc-modal-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 400;
  cursor: pointer;
  z-index: 10001;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .15s ease, transform .15s ease;
}
.welcome-video-modal .cc-modal-close:hover,
.welcome-video-modal .cc-modal-close:active{
  background: rgba(0, 0, 0, 0.92);
  transform: scale(0.92);
}
.welcome-video-modal video{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* keep full video visible, no crop */
  background: #fff;
  display: block;
  border-radius: 0;
}
.welcome-unmute-btn{
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .55rem 1.1rem;
  font-size: .85rem;
  font-family: Manrope, sans-serif;
  font-weight: 600;
  cursor: pointer;
  z-index: 10001;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: ccUnmutePulse 1.5s ease-in-out infinite;
}
@keyframes ccUnmutePulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.06); }
}

@media (max-width: 768px){
  .welcome-video-modal{
    width: 92vw;
    max-width: 92vw;
  }
  .welcome-video-modal .cc-modal-close{
    width: 32px;
    height: 32px;
    font-size: 1.15rem;
  }
}