/*
  Hospeo Stay — main stylesheet
  Enqueued via functions.php (wp_enqueue_style), not linked directly.
  Design tokens below are the single source of truth for the whole site —
  change a --variable here and it updates every page.
*/

:root{
  --bg:#FBFBF9;
  --olive:#54613F;
  --olive-dark:#3B4530;
  --olive-light:#E4E9D8;
  --olive-on-dark:#B9C4A8;
  --cream-card:#F1F0EB;
  --ink:#15150F;
  --yellow:#E8D65C;
  --line:#E4E2DA;
  --radius:28px;
  --radius-sm:18px;
  --radius-pill:999px;
  --ease:cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-float:0 24px 50px -20px rgba(21,21,15,0.18);
  /* Aliases so CSS ported from the editorial preview (which used
     --white/--stone/--shadow naming) resolves without a risky
     mass find-replace across this file's existing rules. */
  --white:#FFFFFF;
  --stone:var(--cream-card);
  --paper:var(--bg);
  --shadow:var(--shadow-float);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Plus Jakarta Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;height:auto;}
.hero-photo-col img, .g-main img, .g-sub img, .card-photo-inner img,
.mobile-hero img, .why-photo img, .review-avatar img, .host-avatar img,
.hero-photo-tag-avatars img, .map-frame img, .prop-map img{
  width:100%;height:100%;object-fit:cover;
}
button{font-family:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* WORDPRESS ADMIN BAR COMPATIBILITY — keeps sticky nav below the WP toolbar
   when a logged-in admin is previewing the site, instead of nav hiding under it */
body.admin-bar nav{top:32px;}
@media(max-width:782px){
  body.admin-bar nav{top:46px;}
}

/* HEADER LOGO — sized for a WordPress Customizer-uploaded logo.
   Recommended upload: SVG or PNG, ~280x64px (transparent background),
   this CSS caps the display height so any reasonably-sized upload fits the nav cleanly. */
.site-logo-link{display:flex;align-items:center;}
.site-logo-img{height:34px;width:auto;max-width:180px;object-fit:contain;}
.site-logo-text{font-size:20px;font-weight:800;}
.site-logo-text span{color:var(--olive);}

/* Screen-reader only utility, used for skip links / accessible labels */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

/* TOP BANNER — this rule was missing entirely, which is why the
   "Garantie meilleur prix" strip rendered as unstyled browser-default
   text above the nav instead of a designed banner. */
.top-banner{
  background:var(--ink);color:#fff;text-align:center;
  padding:9px 16px;font-size:12.5px;font-weight:600;
  line-height:1.4;
}
.top-banner strong{font-weight:800;}
@media(max-width:600px){
  .top-banner{font-size:11.5px;padding:8px 12px;}
}

nav{
  position:sticky;top:0;z-index:50;
  background:rgba(251,251,249,0.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0;}
.logo{font-size:20px;font-weight:800;}
.logo span{color:var(--olive);}
.nav-links{display:flex;gap:30px;}
.nav-links a{font-size:14px;font-weight:600;opacity:0.7;}
.nav-links a:hover{opacity:1;}

/* MOBILE NAV — this was missing entirely, so on phones the full
   desktop nav (logo + menu links + login icon + pill button) tried
   to fit in one row, causing the overflow\/messy layout. */

.icon-btn{
  width:42px;height:42px;border-radius:50%;
  background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.nav-actions{display:flex;gap:10px;}
.btn-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--olive);color:#fff;
  padding:13px 26px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:700;border:none;cursor:pointer;
  transition:background .2s, transform .15s;
}
.btn-pill:hover{background:var(--olive-dark);transform:translateY(-1px);}


/* ============ HOMEPAGE — EDITORIAL DESIGN ============ */
  .hero{position:relative;height:92vh;min-height:640px;max-height:840px;overflow:hidden;}
  .hero-bg{position:absolute;inset:0;overflow:hidden;}
  .hero-bg img{width:100%;height:100%;object-fit:cover;}
  .hero-bg::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(21,21,15,0.15) 0%, rgba(21,21,15,0.05) 35%, rgba(21,21,15,0.75) 100%);
  }
  .hero-inner{
    position:relative;z-index:2;height:100%;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding-bottom:64px;
  }
  .hero-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,0.12);backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.25);color:#fff;
    padding:8px 16px;border-radius:var(--radius-pill);
    font-size:12px;font-weight:700;margin-bottom:20px;width:fit-content;
  }
  .hero h1{
    color:#fff;font-size:clamp(38px,5.6vw,68px);font-weight:900;
    line-height:1.02;letter-spacing:-0.02em;max-width:760px;margin-bottom:18px;
  }
  .hero p.sub{color:rgba(255,255,255,0.82);font-size:16.5px;max-width:480px;margin-bottom:32px;line-height:1.5;}
  .hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;}
  .btn-hero-primary{
    background:var(--white);color:var(--ink);border:none;
    padding:17px 30px;border-radius:var(--radius-pill);
    font-size:14.5px;font-weight:800;cursor:pointer;
    display:flex;align-items:center;gap:8px;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .btn-hero-primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px -10px rgba(0,0,0,0.4);}
  .btn-hero-secondary{
    background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);
    color:#fff;border:1.5px solid rgba(255,255,255,0.4);
    padding:16px 28px;border-radius:var(--radius-pill);
    font-size:14.5px;font-weight:700;cursor:pointer;
    transition:background .3s;
  }
  .btn-hero-secondary:hover{background:rgba(255,255,255,0.2);}

  .search-float{position:relative;z-index:5;margin-top:-56px;padding-bottom:8px;}
  .search-card{
    background:var(--white);border-radius:var(--radius);
    padding:10px;box-shadow:var(--shadow);
    display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:2px;
  }
  .search-field{padding:16px 22px;border-radius:var(--radius-sm);cursor:pointer;transition:background .25s;}
  .search-field:hover{background:var(--stone);}
  .search-field .label{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;opacity:0.5;font-weight:700;margin-bottom:3px;}
  .search-field .value{font-size:14px;font-weight:700;}
  .search-submit{
    background:var(--olive);color:#fff;border:none;
    padding:0 30px;border-radius:var(--radius-sm);
    font-size:14px;font-weight:800;cursor:pointer;
    display:flex;align-items:center;gap:8px;transition:background .3s;
  }
  .search-submit:hover{background:var(--olive-dark);}

  .payment-trust-row{padding:20px 0 8px;}
  .payment-trust-inner{
    display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
    padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  }
  .payment-icons{display:flex;align-items:center;gap:10px;}
  .payment-icon{
    display:flex;align-items:center;justify-content:center;
    height:30px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
    font-size:11px;font-weight:800;color:var(--ink);opacity:0.7;
  }
  .payment-trust-divider{width:1px;height:22px;background:var(--line);}
  .cancellation-note{
    display:flex;align-items:center;gap:7px;
    font-size:12.5px;font-weight:600;opacity:0.65;
  }
  .cancellation-note svg{color:var(--olive);flex-shrink:0;}
  @media(max-width:600px){
    .payment-trust-inner{flex-direction:column;gap:12px;text-align:center;}
    .payment-trust-divider{display:none;}
  }

  .filter-bar{padding:8px 0 32px;}
  .filter-scroll{
    display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    padding-bottom:2px;
  }
  .filter-scroll::-webkit-scrollbar{display:none;}
  .filter-chip{
    display:flex;align-items:center;gap:7px;flex-shrink:0;
    background:var(--white);border:1px solid var(--line);
    padding:11px 19px;border-radius:var(--radius-pill);
    font-size:13.5px;font-weight:700;cursor:pointer;transition:all .3s var(--ease);
    scroll-snap-align:start;
  }
  .filter-chip.active{background:var(--ink);color:#fff;border-color:var(--ink);}
  .filter-chip:active{transform:scale(0.94);}
  @media(max-width:600px){
    .filter-bar .wrap{padding-left:20px;padding-right:0;}
    .filter-scroll{padding-right:20px;}
    .filter-chip{padding:10px 15px;font-size:13px;}
  }

  .listings{padding:16px 0 80px;}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px;}
  .section-head h2{font-size:30px;font-weight:900;letter-spacing:-0.01em;}
  .eyebrow{font-size:12px;color:var(--olive);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px;display:block;}

  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  .card{
    cursor:pointer;transition:opacity .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
    display:block;border-radius:var(--radius);overflow:hidden;
    box-shadow:0 2px 10px rgba(21,21,15,0.08);
  }
  .card:hover{box-shadow:0 10px 28px rgba(21,21,15,0.16);}
  .card.filtered-out{opacity:0;transform:scale(0.94);pointer-events:none;position:absolute;visibility:hidden;}

  /* Reference app pattern: photo is its own clean block (no text
     overlay gradient) -- info lives in a separate charcoal panel below,
     which is the signature move borrowed from the dark-card reference. */
  .card-photo{position:relative;height:190px;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;}
  .card-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease);}
  .card:hover .card-photo img{transform:scale(1.06);}
  .savings-badge{
    position:absolute;top:14px;left:14px;z-index:2;
    background:var(--white);color:var(--ink);
    font-size:11px;font-weight:800;padding:7px 13px;border-radius:var(--radius-pill);
  }
  .card-save{
    position:absolute;top:14px;right:14px;z-index:2;
    width:36px;height:36px;border-radius:50%;
    background:rgba(255,255,255,0.2);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.3);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:transform .2s var(--ease);
  }
  .card-save:hover{transform:scale(1.1);}
  .card-save svg{transition:fill .15s var(--ease), stroke .15s var(--ease);}
  .card-save.is-saved{background:rgba(255,255,255,0.92);border-color:rgba(255,255,255,0.92);}
  .card-save.is-saved svg{stroke:#E0483E;color:#E0483E;}
  .card-save svg{transition:fill .2s, stroke .2s;stroke:#fff;}
  .card-save.saved svg{fill:#E05353;stroke:#E05353;}
  .card-save.pulse svg{animation:heartPulse .45s var(--ease);}
  @keyframes heartPulse{0%{transform:scale(1);}40%{transform:scale(1.35);}100%{transform:scale(1);}}

  /* Charcoal info panel -- the reference's signature dark card-bottom
     block, replacing the old photo-overlay-gradient text. */
  .card-photo-info{
    background:#1C1C18;color:#fff;
    padding:18px 18px 4px;
    display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  }
  .card-photo-title{font-size:16px;font-weight:700;line-height:1.25;}
  .card-photo-loc{font-size:12px;opacity:0.6;font-weight:500;margin-top:4px;display:flex;align-items:center;gap:4px;}
  .card-photo-price{font-size:15px;font-weight:700;text-align:right;white-space:nowrap;color:#fff;}
  .card-photo-price .per{font-size:10.5px;font-weight:500;opacity:0.55;display:block;}

  .card-meta-row{
    background:#1C1C18;color:#fff;
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 18px 18px;border-top:1px solid rgba(255,255,255,0.08);margin-top:14px;
  }
  .card-rating{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;opacity:0.7;}
  .card-rating svg{color:#fff;opacity:0.6;}
  .card-cta-link{font-size:12px;font-weight:700;color:#fff;display:flex;align-items:center;gap:4px;}

  /* Full-bleed solid-olive color block -- no card, no rounded container,
     no icon-in-box list. The boldness is the color and the oversized
     type, not a floating card effect. Photo breaks its own frame by
     bleeding past the section's right edge on desktop. */
  /* Reverted from the full-bleed-olive direction to match the dense
     dark-card app reference: normal cream section background, the
     charcoal-panel language reused from the listing card instead of a
     bold color block. Photo sits in a normal contained card, no bleed. */
  .why-section{padding:64px 0;background:var(--bg, #FBFBF9);}
  .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
  .why-content{padding-right:0;}
  .why-content .eyebrow{color:var(--olive);font-weight:700;letter-spacing:0.06em;}
  .why-content h2{
    font-size:30px;font-weight:700;line-height:1.15;margin:14px 0 16px;
    letter-spacing:-0.01em;color:var(--ink);
  }
  .why-content p{font-size:15px;opacity:0.7;line-height:1.6;margin-bottom:24px;max-width:440px;color:var(--ink);}
  /* Light olive-tinted panel, not charcoal -- the listing card is the
     site's one signature dark element (per DESIGN.md); this section
     stays calm and readable instead of competing with it. */
  .why-points{background:var(--cream-card);border-radius:var(--radius);padding:6px 20px;}
  .why-point{
    display:flex;gap:16px;align-items:baseline;padding:16px 0;
    border-top:1px solid var(--line);
  }
  .why-point:first-child{border-top:none;}
  .why-point-mark{
    font-size:11px;font-weight:700;color:var(--olive);flex-shrink:0;
    letter-spacing:0.04em;width:22px;
  }
  .why-point-text strong{display:block;font-size:14.5px;font-weight:700;margin-bottom:3px;color:var(--ink);}
  .why-point-text span{font-size:13px;opacity:0.6;line-height:1.5;color:var(--ink);}
  .why-photo{border-radius:var(--radius);overflow:hidden;height:420px;}
  .why-photo img{width:100%;height:100%;object-fit:cover;}

  .upsell-section{padding:64px 0;}
  .upsell-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px;}
  .upsell-card{background:var(--stone);border-radius:var(--radius);padding:28px 24px;transition:transform .3s var(--ease), background .3s;}
  .upsell-card:hover{transform:translateY(-4px);background:var(--olive-light);}
  .upsell-icon{
    width:44px;height:44px;border-radius:50%;background:var(--white);
    display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--olive);
  }
  .upsell-title{font-size:15.5px;font-weight:800;margin-bottom:6px;}
  .upsell-text{font-size:13px;opacity:0.65;line-height:1.5;margin-bottom:14px;}
  .upsell-price{font-size:13px;font-weight:800;color:var(--olive);}

  .steps-section{padding:64px 0;}
  .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px;}
  .step-card{background:var(--stone);border-radius:var(--radius);padding:30px 26px;}
  .step-num{
    width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;margin-bottom:18px;
  }
  .step-title{font-size:16px;font-weight:800;margin-bottom:6px;}
  .step-text{font-size:13.5px;opacity:0.6;line-height:1.55;}

  .reviews-section{padding:64px 0;}
  .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px;}
  .review-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px;}
  .review-stars{display:flex;gap:3px;margin-bottom:14px;color:var(--olive);}
  .review-text{font-size:14px;line-height:1.6;opacity:0.75;margin-bottom:18px;}
  .review-author{display:flex;align-items:center;gap:12px;}
  .review-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;}
  .review-name{font-size:13.5px;font-weight:700;}
  .review-meta{font-size:12px;opacity:0.5;}

  .faq-section{padding:64px 0 80px;}
  .faq-list{max-width:780px;margin-top:24px;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-question{display:flex;align-items:center;justify-content:space-between;padding:22px 4px;cursor:pointer;font-size:15px;font-weight:700;}
  .faq-question svg{transition:transform .3s var(--ease);color:var(--olive);flex-shrink:0;}
  .faq-item.open .faq-question svg{transform:rotate(45deg);}
  .faq-answer{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
  .faq-item.open .faq-answer{max-height:200px;}
  .faq-answer p{padding:0 4px 22px;font-size:14px;opacity:0.65;line-height:1.65;max-width:600px;}

  /* GALLERY */
  /* Reference pattern: single full-bleed hero photo, not a multi-tile
     grid. .g-sub thumbnails stay in the DOM (lightbox JS still targets
     them) but are visually hidden -- clicking the hero photo still opens
     the full lightbox/room-grouped gallery underneath, unchanged. */
  .gallery{padding:0;}
  .gallery-grid{
    display:block;position:relative;height:340px;
    border-radius:0 0 var(--radius) var(--radius);overflow:hidden;
  }
  .gallery-grid img{transition:transform .4s;cursor:pointer;}
  .gallery-grid > div:hover img{transform:scale(1.04);}
  .g-main{position:absolute;inset:0;overflow:hidden;}
  .g-main img{width:100%;height:100%;object-fit:cover;display:block;}
  .g-sub{display:none;}
  .g-sub.g-sub-more::after{
    content:"+" attr(data-more-count) " photos";position:absolute;inset:0;
    background:rgba(43,43,38,0.45);color:#fff;font-size:14px;font-weight:700;
    display:flex;align-items:center;justify-content:center;pointer-events:none;
  }

  /* LAYOUT */
  .content-layout{
    display:grid;grid-template-columns:1fr 380px;gap:48px;
    padding:36px 0 80px;align-items:start;
  }
  .main-col{min-width:0;}

  .prop-rating-badge{
    display:inline-flex;align-items:center;gap:5px;
    background:var(--olive-light);color:var(--olive-dark);
    font-size:12.5px;font-weight:700;padding:6px 12px;
    border-radius:var(--radius-pill);margin-bottom:12px;
  }
  /* Title + inline rating on one row, matching the reference's
     'Modern Villa in Beverly Hills   4.8' layout exactly. */
  .prop-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px;}
  .prop-title{font-size:22px;font-weight:700;line-height:1.2;}
  .prop-rating-inline{
    display:flex;align-items:center;gap:4px;flex-shrink:0;padding-top:3px;
    font-size:14px;font-weight:700;color:var(--ink);
  }
  .prop-rating-inline svg{color:var(--yellow);}
  .prop-rating-count{font-size:12px;font-weight:500;opacity:0.55;margin-left:2px;}
  .prop-loc{
    font-size:13px;opacity:0.55;font-weight:500;
    display:flex;align-items:center;gap:5px;margin-bottom:20px;
  }

  /* Plain icon+label pairs, no pill backgrounds -- lighter and tighter
     to match the reference's compact bed/bath/sqft/garage row. */
  .stat-chip-row{display:flex;gap:18px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px;}
  .stat-chip{
    display:flex;align-items:center;gap:6px;
    font-size:12.5px;font-weight:600;color:var(--ink);opacity:0.65;
  }
  .stat-chip svg{opacity:0.7;flex-shrink:0;}

  .section-title{font-size:19px;font-weight:800;margin-bottom:14px;}
  .desc-block{margin-bottom:36px;}
  .desc-block p{font-size:14.5px;line-height:1.7;opacity:0.75;max-width:600px;}

  .amenities{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:36px;}
  .amenity{
    display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:600;
    padding:13px 16px;background:var(--cream-card);border-radius:var(--radius-sm);
  }
  .amenity svg{color:var(--olive);flex-shrink:0;}
  .amenity.amenity-hidden{display:none;}
  .amenities.expanded .amenity.amenity-hidden{display:flex;}
  .amenities-see-more-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:#fff;border:1.5px solid var(--ink);
    padding:10px 18px;border-radius:var(--radius-pill);
    font-size:13px;font-weight:700;cursor:pointer;margin-top:14px;
    transition:background .2s, color .2s;
  }
  .amenities-see-more-btn:hover{background:var(--ink);color:#fff;}
  .amenities-see-more-btn.expanded svg{transform:rotate(45deg);}
  .amenities-see-more-btn svg{transition:transform .2s;}

  /* CALENDAR */
  .cal-block{margin-bottom:36px;}
  .cal-legend{display:flex;gap:20px;margin-bottom:14px;}
  .legend-item{display:flex;align-items:center;gap:7px;font-size:12.5px;opacity:0.65;font-weight:600;}
  .legend-dot{width:10px;height:10px;border-radius:4px;}
  .legend-dot.open{background:var(--olive-light);border:1px solid var(--line);}
  .legend-dot.booked{background:var(--ink);opacity:0.15;}
  .legend-dot.selected{background:var(--olive);}

  .cal-grid{
    display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
    background:var(--cream-card);border-radius:var(--radius);padding:20px;
  }
  .cal-month-label{grid-column:1/-1;font-weight:800;font-size:14.5px;margin-bottom:8px;}
  .cal-dow{text-align:center;font-size:10.5px;font-weight:800;opacity:0.4;text-transform:uppercase;padding-bottom:8px;}
  .cal-day{
    aspect-ratio:1;display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;border-radius:var(--radius-sm);
    background:#fff;cursor:pointer;
  }
  .cal-day.booked{background:transparent;color:var(--ink);opacity:0.25;cursor:not-allowed;text-decoration:line-through;}
  .cal-day.selected{background:var(--olive);color:#fff;}
  .cal-day.empty{visibility:hidden;}

  /* MAP */
  .prop-map{height:270px;border-radius:var(--radius);overflow:hidden;position:relative;margin-bottom:36px;}
  .prop-map-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);}
  .pin-badge{
    width:38px;height:38px;background:var(--olive);border-radius:50% 50% 50% 0;
    transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px rgba(0,0,0,0.25);
  }
  .pin-badge svg{transform:rotate(45deg);}

  /* HOST CARD — reinforces "family" positioning on the property page too */
  /* Inline price + CTA row, matching the reference's 'Price /
     $2,850,000 / Book a Visit' layout -- a visual entry point into
     the real booking-rail sidebar below (#booking-rail-mobile),
     which still owns all actual checkout logic unchanged. */
  .prop-price-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:20px 0;border-bottom:1px solid var(--line);margin-bottom:24px;
  }
  .prop-price-label{font-size:12px;font-weight:600;opacity:0.55;margin-bottom:4px;}
  .prop-price-amount{font-size:24px;font-weight:800;color:var(--ink);}
  .prop-price-amount .per{font-size:13px;font-weight:500;opacity:0.5;}
  .prop-price-cta{
    background:var(--olive);color:#fff;font-weight:700;font-size:14px;
    padding:12px 24px;border-radius:999px;text-decoration:none;
    white-space:nowrap;transition:background .15s var(--ease);
  }
  .prop-price-cta:hover{background:var(--olive-dark);}

  .host-card{
    display:flex;align-items:center;gap:16px;
    background:var(--olive-light);border-radius:var(--radius);
    padding:20px 22px;margin-bottom:36px;
  }
  .host-avatar{width:54px;height:54px;border-radius:50%;overflow:hidden;flex-shrink:0;}
  .host-text strong{display:block;font-size:14.5px;font-weight:800;margin-bottom:3px;}
  .host-text span{font-size:13px;opacity:0.7;line-height:1.5;}

  /* NEARBY PLACES (property page) */
  .nearby-list{display:flex;flex-direction:column;gap:2px;}
  .nearby-item{
    display:flex;align-items:center;gap:14px;padding:14px 4px;
    border-bottom:1px solid var(--line);
  }
  .nearby-item:last-child{border-bottom:none;}
  .nearby-icon{
    width:38px;height:38px;border-radius:50%;background:var(--cream-card);
    display:flex;align-items:center;justify-content:center;color:var(--olive);flex-shrink:0;
  }
  .nearby-text{display:flex;flex-direction:column;}
  .nearby-text strong{font-size:14px;font-weight:700;}
  .nearby-text span{font-size:12.5px;opacity:0.55;margin-top:1px;}

  /* UPSELLS (property page full list + compact version inside booking rail) */
  .upsell-list{display:flex;flex-direction:column;gap:10px;}
  .upsell-item{
    display:flex;align-items:center;gap:14px;padding:14px 16px;
    background:var(--cream-card);border-radius:var(--radius-sm);cursor:pointer;
    transition:background .2s;
  }
  .upsell-item:has(.upsell-checkbox:checked){background:var(--olive-light);}
  .upsell-checkbox{width:18px;height:18px;accent-color:var(--olive);flex-shrink:0;cursor:pointer;}
  .upsell-item-icon{
    width:36px;height:36px;border-radius:50%;background:var(--white);
    display:flex;align-items:center;justify-content:center;color:var(--olive);flex-shrink:0;
  }
  .upsell-item-text{display:flex;flex-direction:column;flex:1;}
  .upsell-item-text strong{font-size:13.5px;font-weight:700;}
  .upsell-item-text span{font-size:12px;opacity:0.55;margin-top:1px;display:block;}
  .upsell-item-price{font-size:13px;font-weight:800;color:var(--olive);flex-shrink:0;white-space:nowrap;}

  /* REVIEWS ON PROPERTY PAGE */
  .prop-reviews{margin-bottom:20px;}
  .prop-review-card{background:var(--cream-card);border-radius:var(--radius-sm);padding:18px 20px;margin-bottom:12px;}
  .prop-review-stars{display:flex;gap:3px;margin-bottom:10px;color:var(--olive);}
  .prop-review-text{font-size:13.5px;line-height:1.6;opacity:0.8;margin-bottom:12px;}
  .prop-review-author{display:flex;align-items:center;gap:10px;}
  .prop-review-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;}
  .prop-review-name{font-size:12.5px;font-weight:700;}
  .prop-review-meta{font-size:11.5px;opacity:0.55;}

  /* BOOKING RAIL */
  .booking-rail{
    position:sticky;top:96px;
    background:#fff;border-radius:var(--radius);padding:24px;
    box-shadow:0 24px 55px -24px rgba(43,43,38,0.2);
  }
  .rail-price{display:flex;align-items:baseline;gap:6px;margin-bottom:18px;}
  .rail-price .amount{font-size:26px;font-weight:800;}
  .rail-price .per{font-size:13px;opacity:0.6;font-weight:600;}

  .rail-dates{
    display:grid;grid-template-columns:1fr 1fr;
    background:var(--cream-card);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:10px;
  }
  .rail-date{padding:12px 14px;border-right:1px solid var(--line);}
  .rail-date:last-child{border-right:none;}
  .rail-date .label{font-size:10px;text-transform:uppercase;letter-spacing:0.04em;opacity:0.5;font-weight:800;margin-bottom:3px;}
  .rail-date .value{font-size:13px;font-weight:800;}

  .rail-guests{background:var(--cream-card);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:18px;}
  .rail-guests .label{font-size:10px;text-transform:uppercase;letter-spacing:0.04em;opacity:0.5;font-weight:800;margin-bottom:3px;}
  .rail-guests .value{font-size:13px;font-weight:800;}

  .pay-toggle{
    display:grid;grid-template-columns:1fr 1fr;background:var(--cream-card);
    border-radius:var(--radius-pill);padding:4px;margin-bottom:18px;
  }
  .pay-opt{text-align:center;padding:10px 8px;border-radius:var(--radius-pill);font-size:12px;font-weight:800;cursor:pointer;transition:all .2s;}
  .pay-opt.active{background:var(--olive);color:#fff;}

  .price-breakdown{margin-bottom:18px;}
  .pb-row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;opacity:0.7;font-weight:600;}
  .pb-row.total{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-weight:800;opacity:1;font-size:15px;}
  .pb-row.pb-note{opacity:0.5;font-size:11.5px;font-style:italic;font-weight:500;padding-top:0;padding-bottom:10px;}

  .rail-upsells-block{margin-bottom:18px;}
  .rail-upsells-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;opacity:0.5;margin-bottom:10px;}
  .rail-upsells-block .upsell-list{gap:8px;}
  .rail-upsells-block .upsell-item{padding:12px 14px;}
  .rail-upsells-block .upsell-item-icon{width:32px;height:32px;}
  .rail-upsells-block .upsell-item-text strong{font-size:13px;}
  .rail-upsells-block .upsell-item-text span{font-size:11.5px;}
  .upsell-confirm-note{display:block;font-size:11px;opacity:0.55;font-style:italic;margin-top:2px;}

  .coupon-row{
    display:flex;gap:8px;margin-bottom:18px;
  }
  .coupon-row input{
    flex:1;border:1px solid var(--line);border-radius:var(--radius-pill);
    padding:10px 16px;font-size:12.5px;font-family:inherit;background:var(--cream-card);
  }
  .coupon-row input:focus{outline:2px solid var(--olive);outline-offset:1px;}
  .coupon-btn{
    background:var(--ink);color:#fff;border:none;padding:10px 18px;
    border-radius:var(--radius-pill);font-size:12px;font-weight:800;cursor:pointer;
  }

  .book-btn{
    width:100%;background:var(--olive);color:#fff;border:none;
    padding:16px;border-radius:var(--radius-pill);font-size:15px;font-weight:800;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:8px;
    transition:background .2s, transform .15s;margin-bottom:12px;
  }
  .book-btn:hover{background:var(--olive-dark);transform:translateY(-1px);}
  .book-note{text-align:center;font-size:11.5px;opacity:0.55;font-weight:500;}

  .mobile-book-bar{display:none;}

  /* Floating icons over the full-bleed hero photo -- back arrow top-
     left, share + save top-right, matching the reference exactly.
     Shown on all breakpoints now (not mobile-only), since the hero is
     full-bleed on every screen size in the new gallery layout. */
  .gallery-back-btn, .gallery-icon-btn, .gallery-save-btn{
    position:absolute;z-index:3;width:38px;height:38px;border-radius:50%;
    background:rgba(255,255,255,0.85);backdrop-filter:blur(6px);
    border:none;display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--ink);transition:transform .15s var(--ease);
  }
  .gallery-back-btn:hover, .gallery-icon-btn:hover{transform:scale(1.06);}
  .gallery-back-btn{top:16px;left:16px;}
  .gallery-top-actions{position:absolute;top:16px;right:16px;z-index:3;display:flex;gap:10px;}
  .gallery-top-actions .gallery-icon-btn, .gallery-top-actions .gallery-save-btn{position:static;}

  .gallery-mobile-counter{
    display:flex;position:absolute;bottom:16px;right:16px;z-index:3;
    background:rgba(28,28,24,0.7);backdrop-filter:blur(6px);
    color:#fff;font-size:12px;font-weight:700;
    padding:6px 12px;border-radius:999px;
    align-items:center;gap:5px;
  }
  @media(max-width:960px){
    .content-layout{grid-template-columns:1fr;gap:28px;}
    .booking-rail{position:static;box-shadow:none;display:none;}

    /* Mobile gallery: horizontal swipe strip instead of collapsing to one
       static photo. Native CSS scroll-snap — no JS library, works with
       touch out of the box, genuinely seamless like Airbnb/Booking mobile. */
    .gallery-grid{
      display:flex;height:320px;border-radius:0;
      overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
      gap:0;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .gallery-grid::-webkit-scrollbar{display:none;}
    .gallery-grid .g-main,
    .gallery-grid .g-sub{
      flex:0 0 100%;scroll-snap-align:start;
      grid-row:auto;border-radius:0;
    }
    .gallery .wrap{padding:0;max-width:none;}
    .gallery{padding-top:0;}
    .g-sub.g-sub-more::after{display:none;}

    .amenities{grid-template-columns:1fr;}
    .mobile-book-bar{
      display:flex;position:fixed;bottom:0;left:0;right:0;z-index:70;
      background:#fff;border-top:1px solid var(--line);
      padding:14px 20px;align-items:center;justify-content:space-between;
      box-shadow:0 -8px 24px rgba(0,0,0,0.08);
    }
    .mobile-price .amount{font-size:18px;font-weight:800;}
    .mobile-price .per{font-size:11.5px;opacity:0.6;}
    body{padding-bottom:78px;}
  }
  .hospeo-date-input{
    border:none;background:transparent;
    font-weight:800;font-size:13px;font-family:inherit;
    width:100%;color:var(--ink);padding:0;
    -webkit-appearance:none;appearance:none;
  }
  .hospeo-date-input::-webkit-calendar-picker-indicator{
    filter:invert(0.3) sepia(1) saturate(2) hue-rotate(50deg);
    cursor:pointer;
  }
  .hospeo-date-input:focus{outline:none;}

  /* AIRBNB-STYLE TAPPABLE DATE PICKER */
  .rail-dates{cursor:pointer;transition:box-shadow .2s;}
  .rail-dates:hover{box-shadow:0 0 0 2px var(--olive-light) inset;}
  .hospeo-date-display{font-size:13px;font-weight:800;color:var(--ink);}
  .hospeo-date-display.placeholder{opacity:0.4;font-weight:600;}

  /* CALENDAR OVERLAY — single opacity/transform system shared by both
     breakpoints, so mobile and desktop can never desync (this was the
     actual cause of the calendar appearing invisible/stuck in earlier
     versions: opacity was declared in one breakpoint but not the other). */
  .hospeo-cal-overlay{
    display:none;position:fixed;inset:0;z-index:200;
    background:rgba(43,43,38,0.4);
  }
  .hospeo-cal-overlay.open{display:block;}

  .hospeo-cal-sheet{
    position:fixed;left:0;right:0;bottom:0;
    background:#fff;border-radius:28px 28px 0 0;
    max-height:88vh;display:flex;flex-direction:column;
    opacity:0;transform:translateY(100%);
    transition:opacity .3s cubic-bezier(.32,.72,0,1), transform .32s cubic-bezier(.32,.72,0,1);
  }
  .hospeo-cal-overlay.open .hospeo-cal-sheet{
    opacity:1;transform:translateY(0);
  }
  .hospeo-cal-sheet-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 20px;border-bottom:1px solid var(--line);
    font-weight:800;font-size:15px;flex-shrink:0;
  }
  .hospeo-cal-close{
    width:34px;height:34px;border-radius:50%;border:none;
    background:var(--cream-card);display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--ink);transition:background .2s;
  }
  .hospeo-cal-close:hover{background:var(--olive-light);}
  .hospeo-cal-sheet-body{padding:16px 20px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;}
  .hospeo-cal-sheet-footer{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 20px;border-top:1px solid var(--line);flex-shrink:0;
    font-size:13px;font-weight:700;
  }
  .hospeo-cal-sheet-footer .btn-pill:disabled{opacity:0.4;cursor:not-allowed;}

  .hospeo-cal-months{display:flex;flex-direction:column;gap:24px;}

  /* Range selection visual states, layered on top of existing .cal-day rules.
     Airbnb's effect (one continuous bar, not isolated dots) needs the day
     cells to visually touch during a range — achieved by giving range days
     a full-bleed background via box-shadow (which ignores the grid gap)
     instead of relying on background-color alone. */
  .cal-day{transition:background .15s, color .15s, transform .1s;position:relative;}
  .cal-day:not(.booked):not(.empty):hover{background:var(--olive-light);}
  .cal-day:not(.booked):not(.empty):active{transform:scale(0.9);}

  .cal-day.range-start,
  .cal-day.range-end{
    background:var(--olive);color:#fff;font-weight:800;
    animation:hospeoDatePop .25s cubic-bezier(.34,1.56,.64,1);
    z-index:1;
  }
  .cal-day.range-start{
    box-shadow:4px 0 0 0 var(--olive);
    border-radius:var(--radius-sm) 0 0 var(--radius-sm);
  }
  .cal-day.range-end{
    box-shadow:-4px 0 0 0 var(--olive);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  }
  .cal-day.range-single{
    box-shadow:none;border-radius:var(--radius-sm);
  }
  .cal-day.range-middle{
    background:var(--olive-light);border-radius:0;
    box-shadow:4px 0 0 0 var(--olive-light), -4px 0 0 0 var(--olive-light);
  }
  .cal-day.range-middle.range-week-start{border-radius:var(--radius-sm) 0 0 var(--radius-sm);box-shadow:-4px 0 0 0 var(--olive-light);}
  .cal-day.range-middle.range-week-end{border-radius:0 var(--radius-sm) var(--radius-sm) 0;box-shadow:4px 0 0 0 var(--olive-light);}
  @keyframes hospeoDatePop{
    0%{transform:scale(0.6);}
    60%{transform:scale(1.12);}
    100%{transform:scale(1);}
  }

  /* Desktop: same overlay becomes a centered popover instead of a bottom
     sheet. Opacity/display logic is inherited unchanged from the base
     rule above — only position/sizing/transform-origin differ here,
     which is what makes both breakpoints reliable. */
  @media(min-width:640px){
    .hospeo-cal-sheet{
      left:50%;right:auto;bottom:auto;top:50%;
      width:640px;max-width:92vw;border-radius:24px;
      transform:translate(-50%,-46%) scale(0.96);
    }
    .hospeo-cal-overlay.open .hospeo-cal-sheet{
      transform:translate(-50%,-50%) scale(1);
    }
    .hospeo-cal-months{flex-direction:row;gap:32px;}
  }

  /* GALLERY VIEW-ALL + LIGHTBOX */
  .gallery-view-all-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:#fff;border:1px solid var(--line);
    padding:9px 16px;border-radius:var(--radius-pill);
    font-size:12.5px;font-weight:700;cursor:pointer;
    margin-top:12px;transition:background .2s, transform .15s;
  }
  .gallery-view-all-btn:hover{background:var(--cream-card);}
  .gallery-view-all-btn:active{transform:scale(0.96);}

  .hospeo-lightbox{
    display:none;position:fixed;inset:0;z-index:300;
    background:rgba(15,15,13,0.96);
    align-items:center;justify-content:center;
    opacity:0;transition:opacity .25s ease;
  }
  .hospeo-lightbox.open{display:flex;opacity:1;}
  .hospeo-lightbox-stage{
    max-width:90vw;max-height:82vh;position:relative;
    animation:hospeoLightboxIn .3s cubic-bezier(.22,1,.36,1);
  }
  @keyframes hospeoLightboxIn{
    0%{opacity:0;transform:scale(0.96);}
    100%{opacity:1;transform:scale(1);}
  }
  .hospeo-lightbox-stage img{
    max-width:90vw;max-height:78vh;width:auto;height:auto;
    border-radius:12px;object-fit:contain;
  }
  .hospeo-lightbox-counter{
    text-align:center;color:#fff;font-size:12.5px;font-weight:700;
    margin-top:12px;opacity:0.8;
  }
  .hospeo-lightbox-close{
    position:absolute;top:20px;right:20px;
    width:40px;height:40px;border-radius:50%;
    background:rgba(255,255,255,0.12);border:none;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background .2s;
  }
  .hospeo-lightbox-close:hover{background:rgba(255,255,255,0.22);}
  .hospeo-lightbox-nav{
    width:44px;height:44px;border-radius:50%;
    background:rgba(255,255,255,0.12);border:none;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background .2s, transform .15s;flex-shrink:0;
    margin:0 12px;
  }
  .hospeo-lightbox-nav:hover{background:rgba(255,255,255,0.22);}
  .hospeo-lightbox-nav:active{transform:scale(0.9);}
  @media(max-width:600px){
    .hospeo-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);margin:0;z-index:2;}
    .hospeo-lightbox-prev{left:8px;}
    .hospeo-lightbox-next{right:8px;}
  }

  /* 'Schedule a Visit' date-pill row, matching the reference. Every
     pill opens the same real availability calendar (#hospeo-cal-prompt
     id kept, so main.js's existing click handler still wires it up
     unchanged) -- these pills are a visual quick-pick entry point,
     not a separate real-availability source. */
  .cal-quick-row{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;cursor:pointer;}
  .cal-quick-day{
    flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px;
    width:52px;padding:10px 0;border-radius:14px;border:1px solid var(--line);
    transition:background .15s, border-color .15s;
  }
  .cal-quick-day-name{font-size:10.5px;font-weight:600;opacity:0.6;text-transform:uppercase;}
  .cal-quick-day-num{font-size:15px;font-weight:800;color:var(--ink);}
  .cal-quick-day.active{background:var(--olive);border-color:var(--olive);}
  .cal-quick-day.active .cal-quick-day-name, .cal-quick-day.active .cal-quick-day-num{color:#fff;opacity:1;}
  .cal-quick-note{font-size:12px;opacity:0.5;margin-top:10px;}

  .cal-prompt-card{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--cream-card);border:1px solid var(--line);
    border-radius:var(--radius);padding:20px 22px;cursor:pointer;
    transition:background .2s, transform .15s;
  }
  .cal-prompt-card:hover{background:var(--olive-light);}
  .cal-prompt-card:active{transform:scale(0.98);}
  .cal-prompt-text{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;color:var(--ink);}
  .cal-prompt-text svg{color:var(--olive);flex-shrink:0;}
  .cal-prompt-arrow{color:var(--olive);display:flex;}

  @media(max-width:600px){
    .cal-grid{padding:14px;gap:4px;}
    .prop-title{font-size:24px;}
  }

  /* ROOM-GROUPED GALLERY OVERLAY + ORDER-REVIEW POPUP */
  .gallery-overlay{
    display:none;position:fixed;inset:0;z-index:200;
    background:var(--paper);overflow-y:auto;
  }
  .gallery-overlay.open{display:block;}
  .gallery-overlay-header{
    position:sticky;top:0;z-index:2;background:var(--paper);
    border-bottom:1px solid var(--line);padding:18px 0;
  }
  .gallery-overlay-header-inner{display:flex;align-items:center;justify-content:space-between;}
  .gallery-overlay-close{
    width:40px;height:40px;border-radius:50%;background:var(--stone);border:none;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .gallery-overlay-title{font-size:15px;font-weight:800;}
  .gallery-room-group{padding:32px 0 8px;}
  .gallery-room-group-title{font-size:20px;font-weight:800;margin-bottom:16px;}
  .gallery-room-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
  .gallery-room-grid img{border-radius:var(--radius-sm);height:320px;cursor:zoom-in;}
  @media(max-width:700px){
    .gallery-room-grid{grid-template-columns:1fr;}
    .gallery-room-grid img{height:260px;}
  }

  /* REVIEW-ORDER CONFIRMATION POPUP — appears before redirecting to Zazu */
  .order-popup-backdrop{
    display:none;position:fixed;inset:0;z-index:250;
    background:rgba(21,21,15,0.55);backdrop-filter:blur(4px);
    align-items:center;justify-content:center;padding:20px;
  }
  .order-popup-backdrop.open{display:flex;}
  .order-popup{
    background:var(--white);border-radius:var(--radius);
    max-width:440px;width:100%;max-height:90vh;overflow-y:auto;
    box-shadow:var(--shadow);
  }
  .order-popup-header{
    background:var(--ink);color:#fff;padding:22px 26px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .order-popup-header h3{font-size:17px;font-weight:800;}
  .order-popup-close{
    width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.15);
    border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .order-popup-body{padding:24px 26px;}
  .order-popup-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px;
  }
  .order-popup-row .label{opacity:0.55;font-weight:600;}
  .order-popup-row .value{font-weight:800;}
  .order-popup-row.total{border-bottom:none;padding-top:16px;font-size:16px;}
  .order-popup-guest-fields{margin:18px 0;}
  .order-popup-guest-fields input{
    width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);
    margin-bottom:10px;font-family:inherit;font-size:13.5px;background:var(--stone);
  }
  .order-popup-confirm-btn{
    width:100%;background:var(--olive);color:#fff;border:none;
    padding:16px;border-radius:var(--radius-pill);font-size:14.5px;font-weight:800;
    cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
    transition:background .25s;
  }
  .order-popup-confirm-btn:hover{background:var(--olive-dark);}
  .order-popup-note{text-align:center;font-size:11.5px;opacity:0.5;margin-top:12px;}

/* Moved to end of file so it wins the cascade over the earlier
   desktop-default rules it targets — CSS resolves equal-specificity
   conflicts by source order, and this block was previously BEFORE
   the rules it was supposed to override, so every single mobile fix
   in it was being silently beaten by the later desktop rule. This is
   the actual reason nothing in the last round visibly changed despite
   the CSS being 100% correctly written and 100% correctly cache-busted. */
/* COMPREHENSIVE MOBILE PASS — the file only had scattered fixes
   (nav, one or two others). Every major homepage component below had
   ZERO responsive override, which is why the search card overflowed
   off-screen, the property grid left blank gaps, upsell/step/review
   cards kept their fixed 3-column desktop grid with no wrap, and the
   filter chips sat behind the phone status bar with no safe-area
   padding. Fixing all of it in one pass instead of one-off patches. */
@media(max-width:860px){
  .nav-links{display:none;}
  .nav-inner{padding:14px 0;}
  .site-logo-text{font-size:16px;}
  .btn-pill{padding:11px 16px;font-size:12.5px;}

  /* Hero -- previously collapsed to height:auto with a 260px bottom
     padding hack reserved for the floating search card. That made the
     background photo's rendered height an accident of that padding
     number instead of a real, intentional size, and text sat inside
     an oddly-tall box. Now: a real fixed photo height on mobile,
     content in normal flow, no negative-margin overlap trick. */
  .hero{height:62vh;min-height:420px;max-height:560px;padding:0;}
  .hero-inner{position:relative;padding:24px 20px 28px;}
  .hero h1{font-size:28px;line-height:1.15;max-width:100%;}
  .hero .sub{font-size:14px;}

  /* Search card -- no longer floats over the hero with a negative
     margin (that only worked because the hero reserved exact space
     for it); sits directly below in normal document flow. */
  .search-float{margin-top:0;}
  .search-card{grid-template-columns:1fr;gap:8px;}
  .search-submit{padding:14px;justify-content:center;}

  /* Filter chips — add top clearance so the row doesn't sit behind
     the phone status bar/notch. */
  .filter-bar{padding-top:calc(8px + env(safe-area-inset-top, 0px));}

  /* Property grid, upsells, steps, reviews — all were a hardcoded
     3-column grid with no mobile override, causing blank cells and
     huge empty gaps instead of a clean single column. */
  .grid{grid-template-columns:1fr;gap:20px;}
  .upsell-grid{grid-template-columns:1fr;gap:16px;}
  .steps-grid{grid-template-columns:1fr;gap:16px;}
  .reviews-grid{grid-template-columns:1fr;gap:16px;}
  .why-grid{grid-template-columns:1fr;gap:24px;}
  .why-content{padding-right:0;}
  .why-photo{height:220px;order:-1;}

  .card-photo{height:240px;}
  .section-head{flex-direction:column;align-items:flex-start;gap:10px;}
}
@media(max-width:420px){
  .btn-pill{padding:10px 13px;font-size:12px;}
}

/* Property-page upsells — deliberately not a card grid (that pattern is
   reserved for the homepage upsell/step sections). Numbered rows with a
   hairline divider so it reads as a considered list of add-ons, not
   another row of bordered boxes. */
.prop-upsells{margin-top:8px;}
.prop-upsells-intro{font-size:13.5px;opacity:0.6;margin-top:6px;margin-bottom:22px;max-width:520px;line-height:1.5;}
.prop-upsells-list{border-top:1px solid var(--line);}
.prop-upsell-row{
  display:grid;grid-template-columns:36px 1fr auto;gap:20px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--line);
}
.prop-upsell-index{font-size:13px;font-weight:700;color:var(--olive);opacity:0.55;padding-top:2px;}
.prop-upsell-title{font-size:15px;font-weight:800;margin-bottom:4px;}
.prop-upsell-text{font-size:13.5px;opacity:0.65;line-height:1.5;}
.prop-upsell-price{font-size:14.5px;font-weight:800;color:var(--olive);white-space:nowrap;padding-top:2px;}
@media(max-width:640px){
  .prop-upsell-row{grid-template-columns:24px 1fr;}
  .prop-upsell-price{grid-column:2;padding-top:2px;}
}
/* Homepage "Comment ca marche" — replaces the old 3-identical-card grid
   with an asymmetric lead+trailing-items flow (variance 0.45). Step 1 is
   the large anchor; steps 2-3 trail smaller, connected by one running
   divider, so the section reads differently from the property grid and
   the upsell rows rather than repeating the same card pattern a third time. */
.steps-flow{display:grid;grid-template-columns:minmax(240px,0.85fr) 1.15fr;gap:48px;margin-top:36px;align-items:start;}
.steps-flow-lead{display:flex;gap:20px;align-items:flex-start;}
.steps-flow-num{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:64px;font-weight:800;
  line-height:0.85;color:var(--olive);opacity:0.9;flex-shrink:0;
}
.steps-flow-title{font-size:20px;font-weight:800;margin-bottom:8px;}
.steps-flow-text{font-size:14px;opacity:0.62;line-height:1.55;max-width:280px;}
.steps-flow-rest{border-left:1px solid var(--line);padding-left:40px;display:flex;flex-direction:column;gap:28px;}
.steps-flow-item{display:flex;gap:16px;align-items:flex-start;}
.steps-flow-num-sm{
  width:30px;height:30px;border-radius:50%;background:var(--cream-card);color:var(--olive);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;margin-top:2px;
}
.steps-flow-title-sm{font-size:15.5px;font-weight:800;margin-bottom:4px;}
@media(max-width:820px){
  .steps-flow{grid-template-columns:1fr;gap:32px;}
  .steps-flow-rest{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:24px;}
}
/* Mobile gallery — real horizontal swipe with scroll-snap, replacing the
   squeezed 3-col desktop grid below 700px. The desktop grid (g-main + 4x
   g-sub) is reused as slides rather than duplicating markup: JS toggles a
   "is-mobile-gallery" class that this stylesheet turns into a snap-scroller. */
@media(max-width:700px){
  .gallery-grid.is-mobile-gallery{
    display:flex;grid-template-columns:none;height:320px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;gap:0;
    border-radius:var(--radius-sm);
  }
  .gallery-grid.is-mobile-gallery::-webkit-scrollbar{display:none;}
  .gallery-grid.is-mobile-gallery > div{
    flex:0 0 100%;scroll-snap-align:start;grid-row:auto;height:100%;
  }
  .gallery-grid.is-mobile-gallery .g-sub.g-sub-more::after{content:none;}
}
/* /logements archive -- simple page-title band + filter row above the
   existing .grid/.card component (unchanged). Kept deliberately plain
   since the grid itself is the product, not another hero moment. */
.archive-hero{padding:56px 0 8px;}
.archive-hero h1{font-size:32px;font-weight:800;margin-top:6px;}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;padding:28px 0 8px;}
@media(max-width:700px){
  .archive-hero{padding:36px 0 4px;}
  .archive-hero h1{font-size:26px;}
}
/* /contact -- WhatsApp-first per brief 3.4. One primary pill (WhatsApp),
   phone/email demoted to plain text links beside it, never a second
   solid-olive button competing in the same viewport. */
.contact-hero{padding:56px 0 8px;max-width:640px;}
.contact-hero h1{font-size:32px;font-weight:800;margin-top:6px;margin-bottom:10px;}
.contact-sub{font-size:15px;opacity:0.65;line-height:1.55;}
.contact-body{padding:40px 0 96px;}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.contact-primary{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.contact-whatsapp-btn{display:inline-flex;align-items:center;gap:10px;}
.contact-secondary-links{font-size:14px;}
.contact-secondary-links a{color:var(--ink);opacity:0.65;text-decoration:none;}
.contact-secondary-links a:hover{opacity:1;text-decoration:underline;}
.contact-divider{margin:0 8px;opacity:0.4;}
.contact-about p{font-size:14.5px;opacity:0.7;line-height:1.65;max-width:420px;}
@media(max-width:820px){
  .contact-layout{grid-template-columns:1fr;gap:32px;}
  .contact-hero h1{font-size:26px;}
}
/* =========================================================
   MOTION LAYER — property page app-like interactions
   Additive only: no existing selector redefined above is
   overridden, only entrance/feedback states are added.
   Rule: animate transform + opacity only. Honors
   prefers-reduced-motion (collapses everything to instant/static).
   ========================================================= */

/* --- Scroll-reveal primitive ---------------------------------- */
/* .reveal starts slightly down + transparent; .js-ready (added by
   main.js on load) plus .in-view (added by IntersectionObserver)
   together trigger the transition. If JS never runs, .reveal alone
   has no opacity rule, so content stays visible — degrades safely. */
.js-ready .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:transform,opacity;
}
.js-ready .reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
/* Stagger children within a revealed group — index-based delay via
   inline --d custom property set by main.js, capped so long lists
   don't feel sluggish. */
.js-ready .reveal{transition-delay:var(--d,0s);}

/* --- Gallery entrance ------------------------------------------ */
.js-ready .g-main{
  opacity:0;transform:scale(1.03);
  transition:opacity .6s var(--ease), transform .9s var(--ease);
}
.js-ready .g-main.in-view{opacity:1;transform:scale(1);}
.js-ready .g-sub{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:var(--d,0s);
}
.js-ready .g-sub.in-view{opacity:1;transform:translateY(0);}

/* --- Stat-chip row: staggered pop-in ---------------------------- */
.js-ready .stat-chip{
  opacity:0;transform:translateY(10px) scale(0.94);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  transition-delay:var(--d,0s);
}
.js-ready .stat-chip.in-view{opacity:1;transform:translateY(0) scale(1);}

/* --- Rating badge + title: quick fade-up on load, not scroll --- */
.js-ready .prop-rating-badge,
.js-ready .prop-title,
.js-ready .prop-loc{
  opacity:0;transform:translateY(10px);
  animation:hospeoFadeUp .6s var(--ease) forwards;
}
.js-ready .prop-rating-badge{animation-delay:.05s;}
.js-ready .prop-title{animation-delay:.12s;}
.js-ready .prop-loc{animation-delay:.18s;}
@keyframes hospeoFadeUp{to{opacity:1;transform:translateY(0);}}

/* --- Interactive press feedback: cards, chips, buttons ---------- */
.card, .stat-chip, .pay-opt, .book-btn, .filter-chip,
.gallery-view-all-btn, .amenities-see-more-btn, .cal-prompt-card{
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.card:hover{transform:translateY(-4px);}
.book-btn:hover{transform:translateY(-2px);}
.book-btn:active, .pay-opt:active{transform:scale(0.97);}
.cal-prompt-card:hover{transform:translateX(2px);}
.cal-prompt-card:active{transform:scale(0.99);}
.amenity{transition:opacity .3s var(--ease);}

/* --- Host card + upsell rows + reviews: scroll reveal ----------- */
.js-ready .host-card,
.js-ready .prop-upsell-row,
.js-ready .prop-review-card,
.js-ready .nearby-item,
.js-ready .desc-block{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:var(--d,0s);
}
.js-ready .host-card.in-view,
.js-ready .prop-upsell-row.in-view,
.js-ready .prop-review-card.in-view,
.js-ready .nearby-item.in-view,
.js-ready .desc-block.in-view{
  opacity:1;transform:translateY(0);
}

/* --- Booking rail: settle in from the side on desktop ----------- */
@media(min-width:961px){
  .js-ready .booking-rail{
    opacity:0;transform:translateY(16px);
    animation:hospeoFadeUp .7s var(--ease) forwards;
    animation-delay:.2s;
  }
}

/* --- Mobile sticky book bar: slide up on load -------------------- */
@media(max-width:960px){
  .mobile-book-bar{
    transform:translateY(100%);
    animation:hospeoSlideUpBar .5s var(--ease) forwards;
    animation-delay:.3s;
  }
}
@keyframes hospeoSlideUpBar{to{transform:translateY(0);}}

/* --- Lightbox: refined open/close, no more instant show/hide ---- */
.hospeo-lightbox .hospeo-lightbox-stage img{
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.hospeo-lightbox.open .hospeo-lightbox-stage img{
  animation:hospeoLightboxIn .35s var(--ease);
}
@keyframes hospeoLightboxIn{
  from{opacity:0;transform:scale(0.97);}
  to{opacity:1;transform:scale(1);}
}

/* --- FAQ accordion: smooth expand instead of instant snap -------- */
.faq-item .faq-answer{
  transition:max-height .35s var(--ease), opacity .3s var(--ease);
}

/* --- Amenities expand: fade the newly-revealed rows in ----------- */
.amenity-hidden{opacity:0;max-height:0;overflow:hidden;transition:opacity .3s var(--ease);}
#hospeo-amenities-list.expanded .amenity-hidden{opacity:1;max-height:none;}

/* --- Respect reduced motion: collapse everything to instant ----- */
@media (prefers-reduced-motion: reduce){
  .js-ready .reveal,
  .js-ready .g-main, .js-ready .g-sub, .js-ready .stat-chip,
  .js-ready .prop-rating-badge, .js-ready .prop-title, .js-ready .prop-loc,
  .js-ready .host-card, .js-ready .prop-upsell-row,
  .js-ready .prop-review-card, .js-ready .nearby-item, .js-ready .desc-block,
  .js-ready .booking-rail, .mobile-book-bar,
  .hospeo-lightbox .hospeo-lightbox-stage img{
    animation:none!important;
    transition:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .card:hover, .book-btn:hover, .cal-prompt-card:hover{transform:none!important;}
}