/* Bulgarian Villas — reference-pattern layer (t_b3596514, operator brief
   "take the best from these sites"). Loaded LAST, after lux.css,
   design-polish.css, chrome.css, booking-premium.css and destpremium.css.

   Every block names the reference it comes from; the mapping doc is
   Desktop/BULGARIAN-VILLAS/05-REPORTS/DESIGN-REFERENCE-SYNTHESIS.md.
   Markup lives in lib/lux.js — if a whole-file rewrite of lux.js lands, the
   markup can come back without this file (unstyled) or this file without the
   markup (inert). Both are recoverable; neither breaks a page. */

/* ---------------------------------------------- 1. photo counter (RLVC)
   The villa-premium gallery carries its own "+N" remainder badge and the
   "View all N photos" label, so this layer only keeps the label readable over
   the photo: a scrim behind the button instead of blue-on-white text. */
.gshowall{
  bottom:1.1rem;
  background:rgba(11,30,26,.72);color:#F3E6D2;
  border:1px solid rgba(216,188,147,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.gshowall:hover{background:rgba(11,30,26,.86)}

/* ---------------------------------------- 2. speciality ribbon (RLVC)
   One line of identity, max four items, before any prose. Brass rule on the
   left so it reads as a label strip, not as more amenity chips. */
.specrow{
  display:flex;flex-wrap:wrap;gap:.4rem .55rem;
  margin:var(--s4) 0 var(--s5);padding:0;list-style:none;
}
.specrow li{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.34rem .7rem .34rem .55rem;border-radius:var(--r-pill);
  background:var(--accent-soft);border:1px solid var(--line);
  font-size:.78rem;letter-spacing:.01em;color:var(--ink);
}
.specrow li::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--accent-2);flex:none;
}
@media (max-width:640px){.specrow li{font-size:.74rem}}

/* -------------------------------------------------- 3. sleeping (RLVC, green-hill)
   Rooms as numbered cards, one per row: the number answers "how many bedrooms
   are actually usable" at a glance. */
.rooms{display:grid;gap:.6rem}
.roomrow{
  display:grid;grid-template-columns:2rem 1fr auto;align-items:center;gap:.85rem;
  padding:.75rem .9rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);
}
.roomrow .rnum{
  display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;
  background:var(--accent-soft);color:var(--ink);font-size:.78rem;
  font-variant-numeric:tabular-nums;border:1px solid var(--line);
}
.roomrow .rname{font-weight:600;color:var(--ink);min-width:0}
.roomrow .rbeds{color:var(--ink-3);font-size:.86rem;text-align:right}
.roomrow .pill.tiny{align-self:center}
@media (max-width:560px){
  .roomrow{grid-template-columns:2rem 1fr;row-gap:.3rem}
  .roomrow .rbeds{grid-column:2;text-align:left;font-size:.8rem}
}

/* ------------------------------------------------- 4. payment panel (RLVC)
   Three rows: deposit, card, transfer. Icon column, amount in the label —
   borrowed wholesale from the Croatian villa record because it answers the
   question the booking card leaves open. */
.paypanel{display:grid;gap:.55rem;margin-bottom:var(--s6)}
.payrow{
  display:grid;grid-template-columns:2.1rem 1fr;gap:.9rem;align-items:start;
  padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);
}
.payrow strong{display:block;font-weight:600;color:var(--ink);font-size:.94rem}
.payrow small{display:block;margin-top:.15rem;color:var(--ink-3);font-size:.82rem;line-height:1.45}
.payico{
  display:grid;place-items:center;width:2.1rem;height:2.1rem;
  border-radius:var(--r-sm);background:var(--accent-soft);color:var(--ink);
}
.payico svg{width:1.1rem;height:1.1rem;stroke:currentColor;fill:none}

/* ------------------------------------------------- 5. good to know (immozu, bookvilla)
   Native <details>: works with scripts blocked, and the closed state keeps the
   page short. Brass marker, one line of rule per row. */
.faq{display:grid;gap:.4rem}
.faq details{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);padding:0 .95rem;
}
.faq summary{
  display:flex;align-items:center;gap:.6rem;
  padding:.85rem 0;cursor:pointer;list-style:none;
  font-weight:600;font-size:.94rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"+";display:grid;place-items:center;flex:none;
  width:1.35rem;height:1.35rem;border-radius:50%;
  border:1px solid var(--line);color:var(--accent-2);
  font-size:.95rem;line-height:1;font-weight:500;
}
.faq details[open] summary::before{content:"–";background:var(--accent-soft);color:var(--ink)}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq p{margin:.7rem 0 .9rem;color:var(--ink-2);font-size:.9rem;line-height:1.55}

/* ----------------------------- 6. weekly equivalent (blackseavillas, bulgarianhomecare)
   The nightly price stays primary; the week sits under it, quiet, so a group
   comparing 5-night stays does not do the maths on a phone. */
.bcweek{
  margin-top:-.2rem;margin-bottom:.75rem;color:var(--ink-3);font-size:.8rem;
  font-variant-numeric:tabular-nums;
}
.bcweek small{display:block;font-size:.72rem;color:var(--ink-3);opacity:.85}
.sbweek{
  margin-left:.6rem;padding-left:.6rem;border-left:1px solid var(--line-2);
  color:var(--ink-3);font-size:.8rem;white-space:nowrap;
}
.vweek{
  margin-top:.15rem;color:var(--ink-3);font-size:.78rem;
  font-variant-numeric:tabular-nums;
}
@media (max-width:560px){.sbweek{display:none}}

/* ------------------------------------------- 7. occasion band (villaplus)
   A season is a collection, not a filter. Photo cards in a 4-up strip, the
   season named in the heading and the dated search in the link. */
.occasion{--occ-h:11rem}
.occgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.occcard{
  position:relative;display:block;border-radius:var(--r-card);overflow:hidden;
  isolation:isolate;background:var(--ink);
}
.occcard img{
  width:100%;height:var(--occ-h);object-fit:cover;display:block;
  transition:transform var(--t-zoom) ease,opacity var(--t-hover) ease;
}
.occcard:hover img{transform:scale(1.05);opacity:.92}
.occcard::after{
  content:"";position:absolute;inset:auto 0 0 0;height:60%;z-index:1;
  background:linear-gradient(180deg,rgba(11,30,26,0),rgba(11,30,26,.78));
}
.occname,.occinfo{position:absolute;left:.85rem;right:.85rem;z-index:2;color:#fff}
.occname{bottom:1.85rem;font-weight:600;font-size:.95rem;line-height:1.25}
.occinfo{bottom:.8rem;font-size:.76rem;opacity:.85}
@media (max-width:900px){.occgrid{grid-template-columns:repeat(2,1fr)}.occasion{--occ-h:12rem}}
@media (max-width:480px){.occgrid{grid-template-columns:1fr 1fr;gap:.6rem}.occasion{--occ-h:9rem}
  .occname{font-size:.85rem}}

/* -------------------------------------------- 8. style tiles (holidayhomes)
   "Find a villa that fits your style" as compact pills with live counts. */
.styletiles{display:flex;flex-wrap:wrap;gap:.5rem}
.styletile{
  display:inline-flex;align-items:baseline;gap:.45rem;
  padding:.55rem .95rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-size:.88rem;transition:border-color var(--t-micro) ease,background var(--t-micro) ease;
}
.styletile:hover{border-color:var(--accent-2);background:var(--accent-soft)}
.styletile em{
  font-style:normal;color:var(--ink-3);font-size:.76rem;
  font-variant-numeric:tabular-nums;
}
@media (max-width:560px){
  .styletiles{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:.3rem}
  .styletiles::-webkit-scrollbar{display:none}
  .styletile{flex:none}
}

/* --------------------------------- 9. "N villas that could be the right fit" (immozu)
   The result count as a promise, in the open, not buried in a sort bar. */
.fitcount{
  display:block;margin:0 0 var(--s4);color:var(--ink-2);font-size:.92rem;
  font-variant-numeric:tabular-nums;
}
.fitcount strong{color:var(--ink)}

/* ------------------------------- 10. sticky filter rail on desktop (immozu, bookvilla)
   The rail follows the scroll on a tall grid; on a phone it stays a static
   block above the results, which is where the swipeable chips already are. */
@media (min-width:1000px){
  .results .filters{position:sticky;top:1.25rem;align-self:start;max-height:calc(100svh - 2.5rem);overflow:auto}
}

/* ------------------------------ 11. destination hero facts (immozu, vila.bg)
   Region, villa count and average nightly price in one quiet row under the
   destination h1 — the resort states its own size before the grid. */
.destfacts{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:.4rem 0 0;
  padding:0;list-style:none;color:var(--ink-3);font-size:.85rem;
}
.destfacts li{display:inline-flex;gap:.35rem;align-items:baseline}
.destfacts strong{color:var(--ink);font-variant-numeric:tabular-nums}
.destfacts li + li::before{content:"·";color:var(--line);margin-right:.5rem}

@media (prefers-reduced-motion:reduce){
  .occcard img{transition:none}
}

/* ------------------------------ 12. booking rail that is taller than the screen
   Measured: on a 900px-tall desktop the villa booking card is ~907px, so the
   sticky rail pins at top:80 and the "Book now" button sits 140px below the
   fold for the whole scroll. The rail scrolls inside itself instead — the
   button stays one wheel away, and the card is never cut in half. */
@media (min-width:1000px){
  .bookcol{
    max-height:calc(100svh - 6.5rem);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    padding-right:.15rem;
  }
}

/* --------------------------------------------- 13. footer payment strip (villaplus, RLVC)
   The references print the card marks and the deposit/cancellation line in the
   footer; a guest deciding at the bottom of the page gets the terms without
   opening anything. Marks are drawn in CSS, no external asset. */
.ftrpay{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem;
  max-width:var(--max);margin:0 auto;padding:1.1rem var(--gutter) 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.ftrpay-k{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.72}
.paymarks{display:flex;gap:.4rem;margin:0;padding:0;list-style:none}
.pm{
  display:inline-flex;align-items:center;justify-content:center;gap:.15rem;
  height:1.6rem;padding:0 .5rem;border-radius:4px;
  background:#fff;color:#122F2A;font-size:.6rem;font-weight:700;letter-spacing:.02em;
}
.pm-visa span{font-style:italic;font-size:.72rem;letter-spacing:.06em;color:#1A1F71}
.pm-amex span{color:#016FD0;font-size:.58rem}
.pm-ap span,.pm-gp span{font-size:.62rem;font-weight:600}
.pm-mc i{width:.85rem;height:.85rem;border-radius:50%;display:block}
.pm-mc i:first-child{background:#EB001B;margin-right:-.35rem}
.pm-mc i:last-child{background:#F79E1B;opacity:.9}
.ftrpay-note{font-size:.78rem;opacity:.8;font-variant-numeric:tabular-nums}
@media (max-width:560px){.ftrpay{padding-top:.9rem}.ftrpay-note{flex-basis:100%}}

/* ------------------------------------------------ 14. header availability CTA (villaplus)
   The references keep one "check availability" button in the header, separated
   from the enquiry phone. Desktop only: on a phone the sticky booking bar and
   the drawer already cover it. */
.hdravail{
  display:none;align-items:center;gap:.4rem;margin-left:auto;
  padding:.5rem .9rem;border-radius:var(--r-pill);
  background:var(--accent);color:var(--bg);font-size:.82rem;font-weight:600;
  white-space:nowrap;
}
.hdravail svg{width:15px;height:15px;flex:none}
.hdravail:hover{background:#1B4239}
body.overhero .hdravail{background:rgba(255,255,255,.94);color:var(--ink)}
body.overhero .hdravail:hover{background:#fff}
@media (min-width:1000px){.hdravail{display:inline-flex}}

/* ---------------------------------- 15. in-page tab strip (bgvakancia, RLVC)
   A long villa page needs a way back to a section instead of a 30-second
   scroll. Sticks under the header; each tab is a real anchor so it works with
   scripts blocked and keeps the URL shareable. */
.villatabs{
  position:sticky;top:var(--hdr-h,64px);z-index:6;
  display:flex;gap:.2rem;margin:var(--s4) 0 var(--s5);
  padding:.35rem;border-radius:var(--r-pill);
  background:var(--accent-soft);border:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;
}
.villatabs::-webkit-scrollbar{display:none}
.villatabs a{
  padding:.4rem .8rem;border-radius:var(--r-pill);white-space:nowrap;
  font-size:.82rem;color:var(--ink-2);
}
.villatabs a:hover{background:var(--card);color:var(--ink)}
@media (max-width:560px){.villatabs{font-size:.78rem}.villatabs a{padding:.35rem .65rem}}