/* Bulgarian Villas — villa detail page, premium money page (task t_1eb049e8).
   Page-scoped: loaded from propertyPage's extraHead only, AFTER lux.css /
   design-polish / chrome / booking-premium, so it wins on equal specificity
   without touching the global sheet another worker owns.

   Composition: photo mosaic hero with a real lightbox, a title block that
   carries the proof (stars, score, price), icon amenity chips, a sticky
   booking card that never loses the price or the "no charge yet" promise,
   a distances TABLE, host/trust card, and a mobile bottom bar with dates.
   Front-end only — every number still comes from the server. */

/* the off-canvas mobile nav pane is position:fixed and translated outside the
   viewport; a closed pane must not create sideways scroll, and an overflow-x
   clip on html/body breaks the sticky booking card — so a closed pane leaves
   the layout entirely (visibility alone keeps the box and its overflow) */
body:not(:has(.navt:checked)) .navpane{display:none}

/* the always-on modal scrim: .modal{display:grid} beats UA [hidden] */
.modal[hidden]{display:none}

/* ------------------------------------------------------------- 1. mosaic */
/* Four real photos, Airbnb geometry: one tall lead frame + three stacked
   frames. Tiles are buttons in all but semantics — the lightbox binds to
   .gcell img, so a <figure> keeps existing JS working. */
.gallery2.mosaic{
  display:grid;gap:8px;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:repeat(2,minmax(0,1fr));
  height:clamp(300px,42vw,460px);
  position:relative;
}
.gallery2.mosaic .gcell{grid-row:auto;aspect-ratio:auto;height:100%;border-radius:var(--r-card,14px)}
.gallery2.mosaic .gcell.g0{grid-column:1;grid-row:1 / span 2}
.gallery2.mosaic .gcell.g0 img{aspect-ratio:4/3}
.gallery2.mosaic .gcell img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gallery2.mosaic .gcell:hover img{transform:scale(1.035)}
.gcell::after{background:linear-gradient(180deg,rgba(10,25,22,0) 55%,rgba(10,25,22,.22))}
.gcell:hover::after{background:linear-gradient(180deg,rgba(10,25,22,.05) 55%,rgba(10,25,22,.3))}
.gcell figcaption{
  letter-spacing:.02em;text-transform:none;font-size:.72rem;
  background:rgba(10,25,22,.62);padding:.28rem .6rem;border-radius:var(--r-pill);
}
/* one-photo / two-photo villas still fill the frame honestly */
.gallery2.mosaic.n1{grid-template-columns:1fr;grid-template-rows:1fr}
.gallery2.mosaic.n1 .gcell.g0{grid-column:1/-1}
.gallery2.mosaic.n2{grid-template-columns:1.4fr 1fr}
.gallery2.mosaic.n2 .gcell.g0{grid-row:1 / span 2}
.gallery2.mosaic.n2 .gcell.g1{grid-column:2;grid-row:1 / span 2}

/* "+N photos" tile: the fourth frame says how much more there is */
.gpin{
  position:absolute;right:var(--s3);bottom:var(--s3);z-index:2;
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.78rem;font-weight:600;color:#fff;
  background:rgba(10,25,22,.72);border:1px solid rgba(255,255,255,.35);
  padding:.4rem .7rem;border-radius:var(--r-pill);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  pointer-events:none;
}
.gpin svg{width:14px;height:14px;flex:0 0 auto}
.gshowall{
  right:calc(var(--gutter,1rem) + .5rem);bottom:.6rem;
  display:inline-flex;align-items:center;gap:.4rem;min-height:40px;
  border-radius:var(--r-pill);font-weight:600;padding:.55rem 1rem;
  background:#fff;color:var(--ink);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.gshowall:hover{transform:translateY(-1px);filter:none;box-shadow:var(--shadow-md)}
body[data-page="villa"] .gcell{border-radius:var(--r-card,14px)}

/* --------------------------------------------------------- 2. title block */
.villahead{padding-bottom:var(--s5)}
.villahead .eyebrow{
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-ink);font-weight:700;margin:0 0 .45rem;
}
.villahead h1{font-size:clamp(1.6rem,3.4vw,2.35rem);margin:0 0 .5rem}
.villahead .vsub{font-size:.95rem;color:var(--ink-3)}
.vbadges{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:.8rem 0 0}
.vbadge{
  display:inline-flex;align-items:center;gap:.32rem;
  font-size:.78rem;font-weight:600;line-height:1;
  padding:.45rem .62rem;border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--ink-2);border:1px solid transparent;
}
.vbadge svg{width:13px;height:13px;flex:0 0 auto}
.vbadge.stars{background:#FBF2DF;color:#7A5A22;border-color:#EBD9B4}
.vbadge.stars .on{color:var(--accent-2)}
.vbadge.score{background:var(--accent);color:#fff}
.vbadge.ok{background:#E9F3EC;color:#1C5B3A;border-color:#CFE6D7}
.vprice{display:flex;align-items:baseline;gap:.4rem;margin:1rem 0 0;min-height:3.6rem}
.vprice strong{font-size:1.5rem;letter-spacing:-.03em;color:var(--ink)}
.vprice .from,.vprice .unit{font-size:.82rem;color:var(--ink-3)}
/* Season range line (t_21bf3597): sits under the "from €X" header price so
   the floor price never reads as flat. Only rendered when rate_seasons
   actually raise the rate above the base. */
.vseason{margin:.15rem 0 0;font-size:.78rem;color:var(--ink-3);line-height:1.3}

/* ------------------------------------------------ 3. vibe / highlights */
.vibeblock{
  margin:0 0 var(--s5);padding:var(--s4) var(--s5);
  border-left:3px solid var(--accent-2);border-radius:0 var(--r-card,14px) var(--r-card,14px) 0;
  background:linear-gradient(90deg,rgba(168,131,79,.09),rgba(168,131,79,0));
}
.vibeblock p{margin:0;font-size:1.02rem;line-height:1.6;color:var(--ink)}
.vibeblock h3{margin:0 0 .45rem;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--brass-ink)}
.uspblock{
  margin:0 0 var(--s5);padding:var(--s4) var(--s5);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card,14px);
}
.uspblock h3{margin:0 0 .7rem;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.usplist{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;grid-template-columns:1fr 1fr}
.usplist li{display:flex;gap:.5rem;align-items:flex-start;font-size:.9rem;color:var(--ink-2)}
.usplist li::before{
  content:"";flex:0 0 auto;width:16px;height:16px;margin-top:.15rem;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ---------------------------------------------------- 4. amenity chips */
.amen{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem}
.amen li{
  display:flex;align-items:center;gap:.6rem;
  padding:.6rem .75rem;border-radius:var(--r-md);background:var(--surface,#fff);
  border:1px solid var(--line);font-size:.88rem;color:var(--ink-2);
}
.amen .ai{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--accent-soft);color:var(--accent)}
.amen .ai svg{width:16px;height:16px}
.flagrow{margin-top:.9rem}

/* --------------------------------------------------- 5. distances table */
.disttable{width:100%;border-collapse:collapse;font-size:.92rem}
.disttable caption{text-align:left;color:var(--ink-3);font-size:.78rem;padding-bottom:.5rem}
.disttable tr{border-bottom:1px solid var(--line)}
.disttable tr:last-child{border-bottom:0}
.disttable th{text-align:left;font-weight:500;color:var(--ink-2);padding:.7rem .8rem .7rem 0;width:45%}
.disttable th .dm{display:block;font-size:.72rem;color:var(--ink-3);font-weight:400}
.disttable td{padding:.7rem 0;vertical-align:middle}
.disttable td.val{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.disttable td.val span{font-size:.72rem;font-weight:500;color:var(--ink-3);margin-left:.15rem}
.disttable td.td-time{color:var(--ink-3);font-size:.82rem;text-align:right;padding-left:.7rem;white-space:nowrap;width:6.5rem}
.disttable .here{color:var(--accent);font-weight:600;font-size:.88rem}
.dist-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.7rem}
.maplink{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(18,47,42,.25)}
.maplink svg{width:14px;height:14px}
.maplink:hover{border-bottom-color:var(--accent)}
.dist-note{max-width:64ch;margin-top:.8rem}

/* --------------------------------------------------------- 6. reviews */
.revsum2{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
.revbig2{display:flex;gap:.9rem;align-items:center}
.revbig2 .num{font-size:3rem;line-height:.9;font-weight:700;letter-spacing:-.04em}
.revbig2 .stars{display:flex;gap:.12rem;color:var(--accent-2)}
.revbig2 .stars svg{width:15px;height:15px}
.revbig2 small{display:block;color:var(--ink-3);font-size:.78rem;margin-top:.25rem}
.revscores2{display:grid;gap:.45rem}
.revscore2{display:grid;grid-template-columns:8.5rem 1fr 2.2rem;align-items:center;gap:.7rem;font-size:.84rem;color:var(--ink-2)}
.revscore2 .bar{height:5px;background:var(--line);border-radius:99px;overflow:hidden}
.revscore2 .bar i{display:block;height:100%;background:var(--accent-2);border-radius:99px}
.revscore2 .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.revitem{border:1px solid var(--line);border-radius:var(--r-card,14px);padding:var(--s4);background:var(--card)}
.revitem + .revitem{margin-top:.8rem}
.revitem .stars{display:flex;gap:.1rem;color:var(--accent-2);margin-bottom:.4rem}
.revitem .stars svg{width:13px;height:13px}
.revempty{border:1px dashed var(--line);border-radius:var(--r-card,14px);padding:var(--s5);text-align:center;color:var(--ink-3)}
.revempty strong{display:block;color:var(--ink);margin-bottom:.25rem}

/* --------------------------------------------------- 7. host / trust */
.hostblock{
  display:grid;gap:var(--s4);grid-template-columns:auto 1fr;
  padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-card,14px);
  background:linear-gradient(180deg,rgba(18,47,42,.045),rgba(18,47,42,0));
}
.hostava{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-weight:700;font-size:1.15rem;letter-spacing:.02em;
  box-shadow:0 0 0 4px var(--accent-soft);
}
.hostblock h3{margin:0;font-size:1.05rem}
.hostblock .hs{color:var(--ink-3);font-size:.86rem;margin:.2rem 0 0}
.trustlist{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.55rem;grid-column:1/-1}
.trustlist li{display:flex;gap:.6rem;align-items:flex-start;font-size:.87rem;color:var(--ink-2)}
.trustlist .ti{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#E9F3EC;color:#1C5B3A}
.trustlist .ti svg{width:14px;height:14px}
.trustlist b{font-weight:600;color:var(--ink)}
.trustlist small{display:block;color:var(--ink-3);font-size:.78rem}

/* ------------------------------------------------ 8. booking card seams */
.bcprice strong{font-size:1.9rem}
.bcweek{margin:-.35rem 0 .9rem;font-size:.82rem;color:var(--ink-2)}
.bcweek small{display:block;color:var(--ink-3);font-size:.72rem}
.bc-actions{display:grid;gap:.5rem;margin-top:var(--s3)}
/* t_f04bc28b: buttons are pills (chrome.css owns the token); the per-layer
   12px here only mattered while chrome forced 14 on everything. */
.bc-actions .btn{border-radius:var(--r-pill);padding:.85rem 1.2rem;margin-top:0}
.bc-actions .btn.ghost{border-radius:var(--r-pill);font-weight:600}
.bcnote.center{text-align:center}
.bcnocard{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.76rem;color:var(--ink-3);margin:.7rem 0 0}
.bcnocard svg{width:13px;height:13px}
.bookcard{border-radius:var(--r-lg);padding:var(--s5) var(--s5) var(--s4)}

/* ------------------------------------------------------- 9. mobile bar */
.sbdate{
  display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);
  background:var(--surface,#fff);border-radius:var(--r-sm);padding:.55rem .7rem;
  font:inherit;font-size:.78rem;font-weight:600;color:var(--ink);cursor:pointer;
}
.sbdate svg{width:14px;height:14px;color:var(--accent)}
.sbprice{min-width:0}
.sbprice .unit{display:block}
.stickybar .btn{border-radius:var(--r-pill);padding:.7rem 1rem;white-space:nowrap}
.stickybar .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.sb-fine{font-size:.66rem;color:var(--ink-3);margin-top:.1rem}

/* --------------------------------------------------------- responsive */
@media (max-width:1040px){
  .amen{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (max-width:860px){
  .gallery2.mosaic{height:min(56vw,360px);grid-template-columns:1.6fr 1fr}
  .gallery2.mosaic .gcell.g2{display:none}
  .gallery2.mosaic .gcell.g0{grid-row:1 / span 2}
  .gallery2.mosaic .gcell.g1{grid-column:2;grid-row:1}
  .gallery2.mosaic .gcell.g3{grid-column:2;grid-row:2}
  .revsum2{grid-template-columns:1fr}
  .usplist{grid-template-columns:1fr}
}
@media (max-width:760px){
  .stickybar{gap:.55rem;padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom))}
  .sbprice{font-size:.95rem}
  .sbprice .unit{font-size:.68rem}
  .stickybar .btn{font-size:.85rem;padding:.65rem .8rem}
  .sb-fine{display:none}
}
@media (max-width:640px){
  .gallery2.mosaic{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:6px;padding:0}
  .gallery2.mosaic .gcell.g0{grid-column:1/-1;grid-row:1;aspect-ratio:16/10;height:auto}
  .gallery2.mosaic .gcell.g1,.gallery2.mosaic .gcell.g2,.gallery2.mosaic .gcell.g3{
    grid-row:2;height:auto;aspect-ratio:1/1;display:block;
  }
  .gallery2.mosaic .gcell.g1{grid-column:1}
  .gallery2.mosaic .gcell.g2{grid-column:2}
  .gallery2.mosaic .gcell.g3{display:none}
  .gallery2.mosaic .gcell{border-radius:var(--r-md)}
  .gcell figcaption{font-size:.66rem}
  .gshowall{right:.5rem;bottom:.5rem;font-size:.75rem;padding:.45rem .8rem}
  .gpin{right:6px;bottom:6px;font-size:.7rem;padding:.3rem .55rem}
  .amen{grid-template-columns:1fr 1fr}
  .amen li{font-size:.82rem;padding:.5rem .6rem}
  .vbadges{gap:.35rem}
  .vbadge{font-size:.73rem}
  .disttable th{width:52%}
  .hostblock{padding:var(--s4)}
  .revbig2 .num{font-size:2.4rem}
  .revscore2{grid-template-columns:6.5rem 1fr 2rem}
}
@media (max-width:420px){
  .amen{grid-template-columns:1fr 1fr;gap:.4rem}
  .amen li{font-size:.78rem;padding:.45rem .5rem;gap:.45rem}
  .amen .ai{width:24px;height:24px}
  .gallery2.mosaic{grid-template-columns:1fr 1fr}
  .stickybar{gap:.4rem;padding-left:.6rem;padding-right:.6rem}
  .stickybar .btn{font-size:.8rem;padding:.6rem .55rem;min-height:44px}
  /* icon-only date chip must still be a real 44px target (t_f04bc28b) */
  .sbdate{padding:.5rem;min-width:44px;min-height:44px;justify-content:center}
  .sbdate span{display:none}
}

/* ================================================================
   t_154cd430 — money-page composition: 2/3 content, 1/3 rail,
   section rhythm, and a booking box that sticks SMOOTHLY.
   Strategy: the RAIL is the sticky unit and it is sticky in CSS; JS
   only flips state classes (never writes geometry per frame) and
   disables sticking when there is no room to travel. Motion is
   transform/box-shadow only, so the compositor does the work.
   ================================================================ */

body[data-page="villa"]{--rhythm:48px}

/* 2/3 + 1/3 with a floor for the rail so the card never squeezes */
body[data-page="villa"] .layout2{
  grid-template-columns:minmax(0,2fr) minmax(300px,1fr);
  gap:clamp(2rem,4.5vw,4.5rem);
  padding-bottom:var(--s8);
}

/* The rail stretches to the row height: that height IS the sticky travel range,
   so a villa with less copy than the rail lets the card go no further (it
   simply stops at the aside's end). Only the BOOKING CARD sticks — the rail
   itself is far taller than a viewport, so sticking the whole stack would
   never engage. */
.bookcol{position:relative;align-self:stretch;min-width:0}
/* design-reference makes the ASIDE an internally scrolling rail at >=1000px.
   That is a scroll trap and it caps the sticky range, so the card does the
   sticking and the aside scrolls with the page. */
@media (min-width:1000px){
  body[data-page="villa"] .bookcol{max-height:none;overflow:visible;padding-right:0}
}
.railsent{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.rail{display:grid;gap:var(--s4);min-width:0;align-content:start}
.bookcard{
  position:sticky;top:calc(var(--hdr-h,68px) + 1rem);z-index:2;
  will-change:transform;
  transition:box-shadow .28s ease,transform .28s ease;
}
body.rail-nostick .bookcard{position:static;will-change:auto}
/* the card can be taller than a viewport (it carries a calendar): cap it from
   first paint and let it scroll inside, so the sticky step changes nothing */
body.rail-tall .bookcard{
  max-height:calc(100svh - var(--hdr-h,68px) - 2rem);
  overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
}
.rail.is-stuck .bookcard{box-shadow:var(--shadow-lg);transform:translate3d(0,-2px,0)}
.rail.is-stuck .railcard{box-shadow:var(--shadow-sm)}

/* rail side cards: host/trust + a map tile. Same card language as the box. */
.railcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);box-shadow:var(--shadow-sm);transition:box-shadow .28s ease;
}
.railcard h2{font-size:.95rem;margin:0}
.hostmini-top{display:flex;gap:.75rem;align-items:flex-start}
.hostmini .hostava{width:42px;height:42px;font-size:.95rem;box-shadow:0 0 0 3px var(--accent-soft)}
.hostmini .hs{color:var(--ink-3);font-size:.78rem;margin:.15rem 0 0;line-height:1.35}
.hostmini .trustlist{gap:.45rem;margin-top:.75rem}
.hostmini .trustlist li{font-size:.8rem;align-items:center;gap:.5rem}
.hostmini .trustlist b{font-weight:600}
.maptile{
  height:96px;border-radius:var(--r-md);margin-bottom:.7rem;position:relative;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(18,47,42,.06) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(180deg,rgba(18,47,42,.06) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(140deg,#EAEFE9,#F6F3EC);
}
.maptile::after{
  content:"";position:absolute;left:-10%;right:-10%;top:62%;height:7px;
  background:linear-gradient(90deg,rgba(168,131,79,.5),rgba(168,131,79,.15));
  transform:rotate(-7deg);
}
.mappin{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;box-shadow:0 3px 10px rgba(10,25,22,.28);
}
.mappin svg{width:16px;height:16px}
.mapmini h2{font-size:.95rem;margin:0 0 .2rem}
.mapmini .maptext{font-size:.78rem;color:var(--ink-3);margin:0 0 .45rem;line-height:1.4}

/* ---- rhythm + hierarchy: one 48px beat, headings that rank ---- */
body[data-page="villa"] .block{margin-top:var(--rhythm);padding-top:var(--rhythm)}
body[data-page="villa"] .block h2{font-size:clamp(1.2rem,1.6vw,1.4rem);letter-spacing:-.022em;margin-bottom:var(--s4)}
body[data-page="villa"] .vibeblock,
body[data-page="villa"] .uspblock{margin-bottom:var(--rhythm)}
body[data-page="villa"] .prose{font-size:1.0125rem;line-height:1.7;max-width:64ch}
body[data-page="villa"] .villatabs{margin-top:var(--s5)}

/* a sticky card must FIT: dates side by side, extras folded away, so the box
   stays under a laptop viewport instead of being taller than the screen */
body[data-page="villa"] .bcrow-dates{grid-template-columns:1fr 1fr}
.bcextras{border-top:1px solid var(--line);margin-top:var(--s3);padding-top:var(--s3)}
.bcextras>summary{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);cursor:pointer;list-style:none;display:flex;align-items:center;gap:.4rem;
}
.bcextras>summary::-webkit-details-marker{display:none}
.bcextras>summary::before{content:"+";font-size:1rem;line-height:1;color:var(--accent)}
.bcextras[open]>summary::before{content:"–"}
.bcextras[open]>summary{margin-bottom:.5rem}
.bcextras .bcaddons{margin-top:0;border-top:0;padding-top:0}


/* price is the loudest value on the page, in both places it appears */
.vprice strong{font-size:1.9rem;letter-spacing:-.035em}
.vprice .from{text-transform:uppercase;letter-spacing:.09em;font-weight:700;font-size:.68rem}
.bcprice strong{font-size:2rem;letter-spacing:-.04em}
.bcprice .from{text-transform:uppercase;letter-spacing:.09em;font-weight:700;font-size:.68rem}

/* ---- mobile: the card folds into the bottom bar + this sheet ---- */
.bcsheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end}
.bcsheet[hidden]{display:none}
.sheet-scrim{position:absolute;inset:0;background:rgba(18,47,42,.45);opacity:0;transition:opacity .25s ease}
.sheet-panel{
  position:relative;width:100%;max-width:560px;margin:0 auto;max-height:88svh;overflow:auto;
  background:var(--card);border-radius:22px 22px 0 0;
  padding:.35rem var(--s5) calc(var(--s5) + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-lg);
  transform:translate3d(0,100%,0);
  transition:transform .34s cubic-bezier(.22,.75,.24,1);
  will-change:transform;touch-action:pan-y;
}
body.sheet-open{overflow:hidden}
body.sheet-open .sheet-scrim{opacity:1}
body.sheet-open .sheet-panel{transform:translate3d(0,0,0)}
.sheet-grip{display:block;width:100%;padding:.5rem 0 .3rem;background:none;border:0;cursor:grab;touch-action:none}
.sheet-grip span{display:block;width:44px;height:5px;margin:0 auto;border-radius:99px;background:var(--line)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.1rem 0 .8rem}
.sheet-head h2{font-size:1.1rem;margin:0}
.sheet-x{border:0;background:var(--accent-soft);color:var(--ink-2);width:34px;height:34px;border-radius:50%;font-size:1.25rem;line-height:1;cursor:pointer}
/* the moved card fields: full-width dates, then guests side by side */
#sheet-slot .bcfields{display:flex;flex-direction:column;gap:var(--s3)}
#sheet-slot .bcfields input{font-size:16px;min-height:48px}
#sheet-slot .bcrow-dates{grid-template-columns:1fr}
#sheet-slot .bcbreak{margin-top:var(--s4)}
#sheet-slot .bc-addons{margin-top:var(--s3)}
.sheet-foot{margin-top:var(--s4)}

@media (max-width:999px){
  /* one column: the card flows with the copy, and no cap, so a touch scroll
     never has to negotiate a nested scroller */
  body[data-page="villa"] .layout2{grid-template-columns:1fr;gap:var(--s6)}
  body[data-page="villa"] .bookcard{position:static;max-height:none;overflow:visible}
  .bookcol{order:-1}
  body[data-page="villa"] .block{margin-top:var(--s6);padding-top:var(--s6)}
}
/* phones: card is redundant — the bar carries dates, price and the CTA */
@media (max-width:760px){
  .bookcol{display:none}
  body[data-page="villa"]{--rhythm:36px}
  .stickybar{box-shadow:0 -10px 30px rgba(10,25,22,.14)}
}
@media (max-width:420px){
  .sheet-panel{padding-left:var(--s4);padding-right:var(--s4)}
}
@media (prefers-reduced-motion:reduce){
  .bookcard,.railcard{transition:none}
  .sheet-panel,.sheet-scrim{transition:none}
}


/* ---------- Phase 2.1 conversion upgrades (t_c6245a70) ----------
   Card: lei anchor line, guest-review snippet, stay-verify badge, deal chip.
   Villa page: reassurance line, masked-phone reveal, sticky-bar states.
   Everything hidden when its data is absent — no dead trust furniture. */

/* lei anchor under the card price (RO only, fx on): quiet, clearly secondary
   to the euro price the guest actually pays. */
.vlei{display:block;font-size:.8rem;color:var(--ink-3);margin-top:.1rem}
.vlei small{font-size:.7rem;color:var(--ink-3);opacity:.85}

/* guest-review snippet: the quote sits under the location line, before the
   attributes, so it reads as the reason for the price. */
.vquote{display:block;margin:.3rem 0 0;text-decoration:none;color:var(--ink-2)}
.vquote .vq{font-size:.85rem;line-height:1.4;font-style:italic}
.vquote:hover .vq{color:var(--ink)}
.vstay{display:inline-flex;align-items:center;gap:.2rem;margin-left:.35rem;
  font-size:.68rem;font-weight:600;letter-spacing:.02em;color:var(--ok);
  border:1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  background:color-mix(in srgb, var(--ok) 8%, transparent);
  padding:.06rem .35rem;border-radius:var(--r-pill,999px);font-style:normal;white-space:nowrap}
.vstay svg{width:.72rem;height:.72rem;flex:none}

/* discount chip from a real, active rate rule — its own terms only */
.deal{display:inline-flex;align-items:center;gap:.25rem;margin:.25rem 0 0;
  font-size:.74rem;font-weight:600;color:var(--accent-2, #9a6b2f);
  background:color-mix(in srgb, var(--accent-2, #9a6b2f) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent-2, #9a6b2f) 30%, transparent);
  border-radius:var(--r-pill,999px);padding:.15rem .55rem}
.deal svg{width:.8rem;height:.8rem;flex:none}
/* offer-engine campaign chip (t_offerengine01): same pill family, greener
   so a seasonal campaign reads differently from a rate-rule deal */
.deal.offr{color:var(--ok, #2f6b4f);
  background:color-mix(in srgb, var(--ok, #2f6b4f) 10%, transparent);
  border-color:color-mix(in srgb, var(--ok, #2f6b4f) 30%, transparent)}

/* conversion lines on the dark booking card (t_conver01, re-cut for the
   t_hypnoticux card): the reassurance sentence under the CTA, the total-first
   headline, the deposit split, the counted scarcity line and the hold
   countdown. All of them are printed only when the server has the data. */
.bcreassure{margin:.65rem 0 0;font-size:.78rem;line-height:1.45;color:rgba(244,241,232,.72)}
.bcreassure-trust{margin:.5rem 0 0;padding:.5rem .6rem;border-radius:var(--r-sm,8px);
  background:rgba(46,125,79,.16);border:1px solid rgba(46,125,79,.3)}
.bcreassure span{display:block;font-size:.8rem;font-weight:600;color:rgba(244,241,232,.86)}
.bcreassure small{display:block;font-size:.72rem;color:rgba(244,241,232,.55);margin-top:.1rem}

/* total first: once dates exist the number is the headline, its detail under
   it, and the split is one sentence rather than two rows to subtract */
.bctotal{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin:0 0 .5rem}
.bctotal strong{font-size:1.5rem;letter-spacing:-.03em;color:#F4F1E8}
.bctotal span{font-size:.74rem;color:rgba(244,241,232,.6)}
.bcpay{margin:.55rem 0 0;padding:.5rem .65rem;border-radius:var(--r-sm,8px);font-size:.78rem;
  font-weight:600;color:#F4F1E8;
  background:rgba(232,200,154,.1);border:1px solid rgba(232,200,154,.22)}

/* honest urgency from real availability, and the hold countdown */
.bcscarce{margin:.55rem 0 0;font-size:.76rem;font-weight:600;color:#E8C89A}
.bchold{margin:.45rem 0 0;font-size:.72rem;color:rgba(244,241,232,.6)}
.bchold::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:.35rem;vertical-align:middle;background:#5fbf8a}

/* masked phone: reveal button becomes a tel link once fetched */
.bc-contact .btn.call{cursor:pointer}
.bc-contact .btn.call.shown{background:var(--card);border-color:var(--ok, #2e7d4f)}
.phonehint{display:block;font-size:.7rem;color:var(--ink-3);margin-top:.25rem}

/* sticky bar: appears only when the card is out of view; total mirror line */
.stickybar{opacity:0;pointer-events:none;transform:translateY(100%);
  transition:transform .25s ease,opacity .25s ease}
.stickybar.is-on{opacity:1;pointer-events:auto;transform:translateY(0)}
.sblei{font-size:.68rem;color:var(--ink-3);font-weight:400}
.sbcall{white-space:nowrap}
[data-sb-total]{display:block;font-size:.68rem;color:var(--ink-3);font-weight:400}
@media (prefers-reduced-motion:reduce){.stickybar{transition:none}}

/* 390px: anchor + snippet + deal must never overflow the card body */
@media (max-width:420px){
  .vlei{font-size:.74rem}
  .vquote .vq{font-size:.8rem}
  .deal{font-size:.7rem}
}

/* ================================================================
   t_villapage02 — density pass (operator: "a lot of empty spaces").
   Two jobs: (a) one tight vertical rhythm instead of 48+48 double
   beats on every section, (b) the booking card opens as the guest
   actually uses it — price, calendar, guests, CTA — and only unfolds
   the money detail and the reassurance once a stay is picked.
   Nothing is removed from the DOM: the legal pre-contract block, the
   breakdown and the notes are all still there and still reachable
   with JS off (they simply stay expanded, see .bc-cond default).
   ================================================================ */

/* ---- 1. section rhythm: one 28px beat, no double spacing ---- */
body[data-page="villa"]{--rhythm:28px}
body[data-page="villa"] .block{margin-top:0;padding-top:var(--rhythm)}
body[data-page="villa"] .block h2{margin-bottom:12px}
/* a section's own trailing margin must not stack onto the next beat */
body[data-page="villa"] .block > :last-child{margin-bottom:0}
body[data-page="villa"] .vibeblock{--rhythm:20px;margin-bottom:20px}
body[data-page="villa"] .uspblock{margin-bottom:20px}
body[data-page="villa"] .villatabs{margin-top:var(--s4)}

/* the photo mosaic keeps its own air on top, not 48px below it */
body[data-page="villa"] main .wrap.layout2{padding-top:20px;padding-bottom:var(--s6)}
body[data-page="villa"] .villahead{padding-bottom:var(--s4)}

/* ---- 2. title block: name, destination and badges on one line ---- */
.vheadrow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;margin:.1rem 0 0}
.vheadrow .vsub{margin:0}
.vheadrow .vbadges{margin:0}
.villahead h1{margin-bottom:.35rem}
.vprice{min-height:0;margin:.65rem 0 0}

/* ---- 3. the card: only what a guest needs before they pick dates ---- */
/* .bc-cond nodes are the money detail and the trust lines. They start
   collapsed in the idle state; picking a stay (or the summary button)
   unfolds them with a height transition, so nothing pops. */
.bc-cond{
  overflow:hidden;max-height:2000px;
  transition:max-height .4s cubic-bezier(.2,.7,.2,1),opacity .3s ease;
}
body.vbook-idle .bc-cond{max-height:0;opacity:0}
body.vbook-idle .bcbreak,
body.vbook-idle .bcreassure,
body.vbook-idle .bcnote{margin-top:0;padding-top:0;border-top:0}
@media (prefers-reduced-motion:reduce){.bc-cond{transition:none}}

/* micro trust row (t_trustbadges01): icon + one word, three at most, built by
   lib/trust.js so nothing false gets printed — no card claim while Stripe is
   not live, no cancellation promise at a 0-day window. */
.bcmicro{list-style:none;display:flex;flex-wrap:wrap;gap:.28rem .9rem;margin:0;padding:0}
.bcmicro li{display:flex;align-items:center;gap:.3rem;min-width:0;font-size:.7rem;line-height:1.25;color:var(--ink-2)}
.bcmicro svg{width:13px;height:13px;flex:none;stroke:var(--accent-2)}

/* the collapsed stand-in: one quiet line that opens the breakdown */
.bcsum{
  width:100%;margin:.55rem 0 0;padding:.5rem .6rem;border:1px dashed var(--line);
  border-radius:var(--r-sm,8px);background:transparent;cursor:pointer;
  font:inherit;font-size:.78rem;color:var(--ink-2);text-align:center;
  display:flex;align-items:center;justify-content:center;gap:.35rem;flex-wrap:wrap;
}
.bcsum[hidden]{display:none}
.bcsum strong{color:var(--ink);font-variant-numeric:tabular-nums}
.bcsum:hover{border-color:var(--ink-3);background:var(--accent-soft)}
.bcsum::after{content:"›";color:var(--accent);font-weight:700;transform:rotate(90deg)}

/* tighter stack: the calendar is the tallest thing in the card and its
   own outer air is already generous. Field gaps follow. */
body[data-page="villa"] .bcfields{gap:.5rem}
body[data-page="villa"] .bcfields .calx{margin:.1rem 0 .1rem}
body[data-page="villa"] .bc-actions{margin-top:.65rem}
/* the pre-contract block stays (Directive 2011/83 art. 6) but reads as
   one compact paragraph with inline links, not a wall above the CTA */
.bcpre{margin:.15rem 0 .55rem;font-size:.72rem;line-height:1.45;color:var(--ink-3)}
.bcpre h3{margin:0 0 .2rem;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.bcpre ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.1rem .7rem}
.bcpre li{font-size:.72rem;color:var(--ink-3)}
.bcpre li::before{content:"·";margin-right:.35rem;color:var(--accent)}
.bcprelinks{margin:.2rem 0 0;display:flex;gap:.7rem;flex-wrap:wrap}
.bcprelinks a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.bcpre .muted{margin:.2rem 0 0;font-size:.68rem;line-height:1.4}
body[data-page="villa"] .bcnocard{margin:.5rem 0 0}

/* desktop rail: 40px days keep 6 rows of grid inside the laptop viewport
   while the card is sticky; phones keep the 44px target in the sheet */
@media (min-width:761px){
  body[data-page="villa"] #bookcard .calx-day{min-height:40px}
  body[data-page="villa"] #bookcard .calx-pad{min-height:40px}
}

/* ---- 4. phones: tighter sections, the card is already a sheet ---- */
@media (max-width:760px){
  body[data-page="villa"]{--rhythm:20px}
  body[data-page="villa"] .block h2{margin-bottom:10px}
  body[data-page="villa"] main .wrap.layout2{padding-top:14px}
}

/* ---- 5. the folded card has to fit a laptop screen, not just be shorter ----
   Everything here only trims air, never content: the legend is decorative
   (aria-hidden) and the day cells are dense but still 34px on a mouse
   pointer, the pre-contract block becomes one compact paragraph. */
body[data-page="villa"] .bookcard{padding:var(--s4) var(--s4) 12px}
body[data-page="villa"] #bookcard .calx{padding:8px 8px 6px}
body[data-page="villa"] #bookcard .calx-legend{display:none}
body[data-page="villa"] #bookcard .calx-view{padding-top:1.9rem}
body[data-page="villa"] #bookcard .calx-day,
body[data-page="villa"] #bookcard .calx-pad{min-height:34px}
body[data-page="villa"] #bookcard .calx-day .calx-num{font-size:.78rem}
body[data-page="villa"] #bookcard .calx-day .calx-price{font-size:.62rem}
body[data-page="villa"] .bcprice{margin-bottom:.5rem}
body[data-page="villa"] .bc-actions .btn{padding:.7rem 1rem}
.bcpre{font-size:.7rem;line-height:1.4;margin:.1rem 0 .45rem}
.bcpre li{font-size:.7rem}
.bcpre .muted{margin-top:.15rem}
.bcsum{margin:.4rem 0 0;padding:.35rem .5rem;font-size:.74rem;border-style:solid;border-color:var(--line);background:var(--accent-soft)}
body[data-page="villa"] .bcnocard{margin:.45rem 0 0}
/* a collapsed .bc-cond must not leave the base padding behind (10px ghost) */
body.vbook-idle .bcreassure,
body.vbook-idle .bcnote{margin:0;padding:0;border-width:0}
@media (min-width:761px){
  /* phones get the sheet; the rail re-tightens only where it must */
  body[data-page="villa"] #bookcard .calx-day,body[data-page="villa"] #bookcard .calx-pad{min-height:36px}
}

/* ---- 6. the last of the air ---- */
/* the pre-contract block is one flowing pass of small print, not a list of
   three stacked lines: dots carry the separation, links stay inline */
.bcpre ul{display:block;margin:0}
.bcpre li{display:inline;font-size:.68rem}
.bcpre li + li::before{content:"·";margin:0 .3rem;color:var(--accent)}
.bcpre li::before{content:"";margin:0}
.bcpre li + li::before{content:"·";margin:0 .3rem;color:var(--accent)}
.bcpre .muted{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body[data-page="villa"] .bookcard{padding:12px 14px 10px}
/* guests on one dense row: the number inputs are the target, the word is a tag */
body[data-page="villa"] .bcfields label{font-size:.64rem;gap:1px}
body[data-page="villa"] .bcfields input{padding:.4rem .5rem;min-height:36px}
body[data-page="villa"] .bcprice strong{font-size:1.7rem}
body[data-page="villa"] .bcprice{margin-bottom:.35rem}
body[data-page="villa"] #bookcard .calx-view{padding-top:1.55rem}
body[data-page="villa"] #bookcard .calx-mhead{margin-bottom:.15rem}
.bcsum{border:0;background:transparent;padding:.25rem 0;margin:.3rem 0 0;justify-content:flex-start;text-align:left;color:var(--ink-3)}
.bcsum:hover{background:transparent;text-decoration:underline}
@media (min-width:761px){
  body[data-page="villa"] #bookcard .calx-day,body[data-page="villa"] #bookcard .calx-pad{min-height:32px}
}

/* extras ride with the breakdown: add-ons belong to a stay that exists */
body.vbook-idle .bcextras{margin:0;padding:0;border-top:0}
body[data-page="villa"] #bookcard .calx{padding:6px 7px 5px}
body[data-page="villa"] #bookcard .calx-view{padding-top:1.4rem}
body[data-page="villa"] #bookcard .calx-mhead{margin-bottom:0}
body[data-page="villa"] #bookcard .calx-foot{min-height:0}
.bcpre li,.bcpre{font-size:.66rem}
body[data-page="villa"] .bcprice strong{font-size:1.6rem}
body[data-page="villa"] .bookcard{padding-bottom:8px}
@media (min-width:761px){
  body[data-page="villa"] #bookcard .calx-day,body[data-page="villa"] #bookcard .calx-pad{min-height:30px}
}

/* ---- 7. final beat: 24px on desktop is still a beat, half the old 48 ---- */
body[data-page="villa"]{--rhythm:24px}
body[data-page="villa"] .block h2{margin-bottom:10px}

/* phones keep the tighter 20px beat (the desktop 24px above would win
   otherwise: same specificity, later in the sheet) */
@media (max-width:760px){
  body[data-page="villa"]{--rhythm:20px}
  body[data-page="villa"] .block h2{margin-bottom:9px}
}

/* ---- 8. headroom: 22px keeps every language under the height budget
   (ro/bg copy wraps differently; a language must not blow the target) ---- */
body[data-page="villa"]{--rhythm:22px}

/* ---- 9. the repeated components: same information, less frame ----
   Scoped to the villa page so the checkout keeps its roomier rows. */
body[data-page="villa"] .paypanel{gap:.45rem;margin-bottom:0}
body[data-page="villa"] .payrow{padding:.6rem .8rem;gap:.7rem}
body[data-page="villa"] .payrow small{font-size:.8rem}
body[data-page="villa"] .faq{gap:.35rem}
body[data-page="villa"] .faq summary{padding:.62rem 0}
body[data-page="villa"] .disttable th{padding:.5rem .8rem .5rem 0}
body[data-page="villa"] .disttable td{padding:.5rem 0}

/* phones: the 20px beat must win over every later desktop beat */
@media (max-width:760px){
  body[data-page="villa"]{--rhythm:20px}
}

/* a touch more breathing room inside the card than the tightest pass: the
   fold target is met with margin to spare, so the fields stop touching the
   edge */
body[data-page="villa"] .bookcard{padding:14px 15px 12px}
body[data-page="villa"] .bcfields{gap:.55rem}

/* the calendar replaces the stay inputs: their labels are hidden by JS, but
   `display:flex` beat the UA [hidden] rule and left a 58px dead row behind */
body[data-page="villa"] .bcfields label[hidden]{display:none}
body[data-page="villa"] #bookcard .bcrow-dates:has(> label[hidden]){display:none}
/* the pre-contract lines are small print, not paragraphs */
.bcpre li{font-size:.64rem;line-height:1.3}

/* ---- final headroom for long-copy villas: body leading, small print and a
   2px tighter heading beat, so a villa with a 1300px description still lands
   under the height budget instead of being an exception ---- */
body[data-page="villa"] .prose{line-height:1.6}
body[data-page="villa"] .block h2{margin-bottom:8px}
.bcpre li{font-size:.62rem;line-height:1.25}
.bcpre .muted{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============================================ reservation bar (t_resvbar01)
   Collapsed bar: two pills, each opening a popover. Only transform and
   opacity are ever transitioned — box metrics are placed once at open time,
   so a pick can never animate width/height/top ("jumpy boxes"). */
.bcfields{position:relative}
.bcpills{display:none;grid-template-columns:1fr;gap:.5rem}
html.js-bar .bcpills{display:grid}
html.js-bar .bcrow-dates{display:none}
.bcpill{
  display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;
  border:1px solid var(--line);background:var(--surface,#fff);border-radius:14px;
  padding:.55rem .72rem;font:inherit;color:var(--ink);cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.bcpill:hover{border-color:var(--ink-3);background:var(--accent-soft)}
.bcpill:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.bcpill[aria-expanded="true"]{border-color:var(--accent);background:var(--accent-soft)}
.bcpill>svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto}
.bcpill-b{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
.bcpill-k{
  font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bcpill-v{
  font-size:.84rem;font-weight:600;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}
.bcpill-v[data-filled="1"]{color:var(--ink)}
.bcpill-chev{
  flex:0 0 auto;width:8px;height:8px;margin-right:.25rem;
  border-right:1.7px solid var(--ink-3);border-bottom:1.7px solid var(--ink-3);
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .18s ease;
}
.bcpill[aria-expanded="true"] .bcpill-chev{transform:rotate(-135deg) translate(-1px,-1px)}

/* the popover box: placed once, animated on transform/opacity only */
.bcpop{
  position:absolute;left:0;right:0;top:calc(100% + .5rem);z-index:40;display:none;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 26px 60px -22px rgba(18,47,42,.42),0 2px 8px rgba(18,47,42,.07);
  padding:.55rem .6rem .65rem;
  max-height:min(70svh,540px);overflow:auto;overscroll-behavior:contain;
  transform-origin:top center;
  transform:translate3d(0,-6px,0) scale(.985);opacity:0;
  transition:transform 180ms cubic-bezier(.22,.75,.24,1),opacity 160ms ease;
}
.bcpop[data-open="1"]{display:block}
.bcpop.is-in{transform:none;opacity:1}
.bcpop.flip{top:auto;bottom:calc(100% + .5rem);transform-origin:bottom center;transform:translate3d(0,6px,0) scale(.985)}
.bcpop.flip.is-in{transform:none}
/* an open panel must not be clipped by the tall-card cap */
body.bcpop-open .bookcard{overflow:visible;max-height:none}
.bcpop-foot{margin-top:.55rem}
.bcpop-foot .btn{padding:.6rem 1rem;font-size:.85rem;border-radius:var(--r-pill)}
.bcpop .calx{padding:0}
.bcpop .calx-foot{margin-top:.45rem}

/* guests dropdown */
.bstep{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .15rem}
.bstep+.bstep{border-top:1px solid var(--line)}
.bstep-l{display:flex;flex-direction:column}
.bstep-l b{font-size:.88rem;font-weight:600}
.bstep-l small{font-size:.72rem;color:var(--ink-3)}
.bstep-c{display:flex;align-items:center;gap:.45rem}
.bstep-c button{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:1.05rem;line-height:1;cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease,transform .16s ease;
}
.bstep-c button:hover:not([disabled]){border-color:var(--ink-3);background:var(--accent-soft)}
.bstep-c button:active:not([disabled]){transform:scale(.94)}
.bstep-c button[disabled]{opacity:.4;cursor:default}
.bstep-c output{min-width:1.6rem;text-align:center;font-weight:650;font-variant-numeric:tabular-nums}
.bc-vis{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- phones: the popover panel becomes the sheet body ---- */
@media (max-width:760px){
  .bcpop{
    position:static;display:none;border:0;box-shadow:none;border-radius:0;
    padding:0;max-height:none;overflow:visible;transform:none;opacity:1;transition:none;
  }
  .bcpop.is-in{transform:none}
  body.bcpop-open .bookcard{overflow:visible;max-height:none}
  /* inside the sheet only the open sub-view is shown */
  body.bcpop-mode #sheet-slot .bcpills,
  body.bcpop-mode #sheet-slot .bcbreak,
  body.bcpop-mode #sheet-slot .bcextras,
  body.bcpop-mode #sheet-slot .bcreassure,
  body.bcpop-mode #sheet-slot .bc-contact{display:none}
  .bcpill{padding:.8rem .8rem;border-radius:16px}
  .bcpop .calx .calx-day,
  .bcpop .calx .calx-pad{min-height:40px}
  .bcpop .calx .calx-legend{display:flex}
  .bcpop-foot .btn{padding:.85rem 1rem;font-size:.92rem}
  .bcpop-cal .bcpop-foot .btn{width:100%}
/* ---- 10. "What the price includes" (REFERENCE-WAVE-2 pattern #7, t_refimpl2)
   Same quiet list frame as .rules, but with the trust-tile icon treatment
   (26px green tile) for the first line so the block reads as value, not as
   conditions. Plain lines stay icon-free — the icons mark the two facts a
   group actually doubts (who sleeps, what tax). */
.inclusions{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;color:var(--ink-2);font-size:.9rem}
.inclusions li{display:flex;gap:.6rem;align-items:flex-start}
.inclusions .ti{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#E9F3EC;color:#1C5B3A}
.inclusions .ti svg{width:14px;height:14px}
.inclusions li > span:last-child{padding-top:2px}
@media (max-width:760px){
  .inclusions{gap:.4rem;font-size:.85rem}
  .inclusions .ti{width:22px;height:22px}
  .inclusions .ti svg{width:12px;height:12px}
}