/* ============================================================
   t_hypnoticux — the booking card as a premium invitation
   (operator: "I like the booking reservation here, the style")

   Anatomy measured on hypnoticvillas.com (Shopify, 2026-11-06):
   the book card is a DARK object inside a light page — deep surface,
   cream type, 1px cream/18% border, 22px radius, 60px deep shadow,
   a rate head ("Rates from" + big price + honest notes right-aligned),
   the calendar INSIDE the card, and a full-width 999px CTA that is a
   quiet white/8% slab with helpful copy until dates are chosen, then
   activates.

   Theirs is black/gold. Ours is forest/brass on the same values, and
   the page stays light so the card is the one dark anchor. Nothing
   here invents a claim: the notes are only printed when the data
   backs them (tourist tax really is inside the total; "same rate
   weekdays & weekends" only when no weekend rate exists for the villa).

   Loaded last on villa pages; one git rm + one <link> reverts it.
   ============================================================ */

/* Cormorant Garamond (SIL OFL), self-hosted variable, subsets split so a
   Cyrillic villa name costs 37 KB and a Latin one 30 KB — never a CDN
   request, never a consent question. Georgia carries the metric fallback. */
@font-face{
  font-family:"Villa Display";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("/assets/fonts/cormorant-garamond-cyrillic-ext.woff2") format("woff2-variations");
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:"Villa Display";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("/assets/fonts/cormorant-garamond-cyrillic.woff2") format("woff2-variations");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Villa Display";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("/assets/fonts/cormorant-garamond-latin-ext.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Villa Display";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("/assets/fonts/cormorant-garamond-latin.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- 1. the display-serif option on the villa H1 (item 5) ----
   A villa title is a name, not a UI label; the display face gives it the
   editorial register the reference has. Body and every control stay Inter:
   the serif is used once per page, at large size, weight 400 (Cormorant is
   a light design — 300 disappears at Windows rendering). */
body[data-page="villa"] .villahead h1{
  font-family:"Villa Display","Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(2.1rem,4.4vw,3.25rem);
  line-height:1.05;
  letter-spacing:.004em;
  margin-bottom:.4rem;
}
@media (max-width:640px){
  body[data-page="villa"] .villahead h1{font-size:clamp(1.9rem,8vw,2.5rem)}
}

/* ---- 2. the card becomes the dark anchor (item 4) ----
   The whole palette flips on the card's own scope, so every existing inner
   rule that reads var(--ink)/var(--line)/var(--card) follows without being
   rewritten. Values from the measurement: #122F2A surface, cream #F4F1E8,
   cream/18% border, 22px radius, 60px three-layer shadow. */
body[data-page="villa"] .bookcard{
  --ink:#F4F1E8;
  --ink-2:#D8D3C6;
  --ink-3:#ADAA9E;
  --line:rgba(244,241,232,.16);
  --line-2:rgba(244,241,232,.10);
  --card:#0E2723;
  --surface:#12312B;
  --accent:#F4F1E8;
  --accent-soft:rgba(244,241,232,.08);
  background:#122F2A;
  color:#F4F1E8;
  border:1px solid rgba(244,241,232,.18);
  border-radius:22px!important;
  box-shadow:
    0 1px 0 rgba(244,241,232,.06) inset,
    0 10px 24px rgba(9,26,22,.28),
    0 60px 90px -30px rgba(9,26,22,.55);
}
/* the sticky/raised states keep the same shadow language, deeper */
body[data-page="villa"] .rail.is-stuck .bookcard{
  box-shadow:
    0 1px 0 rgba(244,241,232,.06) inset,
    0 14px 30px rgba(9,26,22,.32),
    0 70px 100px -28px rgba(9,26,22,.6);
}

/* ---- 3. the rate head (item 1) ----
   "Rates from" small, the price at display scale, the honest notes under
   it, the final-price line right-aligned — their exact proportions. */
body[data-page="villa"] .bcprice{
  align-items:flex-start;
  flex-wrap:wrap;
  gap:.15rem .45rem;
  margin-bottom:.55rem;
}
body[data-page="villa"] .bcprice .from{
  flex:1 0 auto;
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:rgba(244,241,232,.62);
  align-self:center;
}
body[data-page="villa"] .bcprice strong{
  font-size:2.1rem;
  font-weight:650;
  letter-spacing:-.03em;
  color:#F4F1E8;
  line-height:1;
}
body[data-page="villa"] .bcprice span,
body[data-page="villa"] .bcprice .unit{
  font-size:.8rem;
  color:rgba(244,241,232,.66);
  align-self:flex-end;
  padding-bottom:.2rem;
}
/* the right-aligned "final price" line, mirroring their VAT note */
body[data-page="villa"] .bcprice .bcfin{
  margin-left:auto;
  align-self:center;
  text-align:right;
  max-width:52%;
  font-size:.68rem;
  line-height:1.3;
  color:rgba(244,241,232,.55);
}
/* the honest note list: only rows the data backs are rendered */
.bcnotes{
  list-style:none;
  margin:0 0 .7rem;
  padding:0;
  display:grid;
  gap:.2rem;
  font-size:.72rem;
  color:rgba(244,241,232,.62);
}
.bcnotes li{display:flex;align-items:flex-start;gap:.35rem}
.bcnotes li::before{
  content:"";
  flex:0 0 auto;
  width:9px;height:9px;
  margin-top:.24em;
  border-radius:50%;
  border:1.5px solid rgba(168,131,79,.85);
}

/* the weekly equivalent, kept quiet under the notes */
body[data-page="villa"] .bcweek{color:rgba(244,241,232,.55);margin:-.25rem 0 .8rem}
body[data-page="villa"] .bcweek small{color:rgba(244,241,232,.42)}

/* ---- 4. the bar: pills on the dark surface ---- */
body[data-page="villa"] .bcpill{
  background:rgba(244,241,232,.06);
  border-color:rgba(244,241,232,.18);
  color:#F4F1E8;
}
body[data-page="villa"] .bcpill:hover{
  background:rgba(244,241,232,.11);
  border-color:rgba(244,241,232,.34);
}
body[data-page="villa"] .bcpill[aria-expanded="true"]{
  background:rgba(244,241,232,.12);
  border-color:rgba(244,241,232,.42);
}
body[data-page="villa"] .bcpill>svg{color:rgba(244,241,232,.72)}
body[data-page="villa"] .bcpill-k{color:rgba(244,241,232,.52)}
body[data-page="villa"] .bcpill-v{color:rgba(244,241,232,.82)}
body[data-page="villa"] .bcpill-v[data-filled="1"]{color:#F4F1E8}
body[data-page="villa"] .bcpill-chev{border-color:rgba(244,241,232,.5)}

/* tooltip: cream slab, forest text (its own var(--ink) is cream here) */
body[data-page="villa"] .bctip{background:#F4F1E8;color:#122F2A;box-shadow:0 8px 20px rgba(9,26,22,.35)}
body[data-page="villa"] .bctip::after{border-top-color:#F4F1E8}
body[data-page="villa"] .bcpill.needs-dates{background:rgba(168,131,79,.18);border-color:#C39B62}

/* ---- 5. the calendar, polished (item 2) ----
   Inside the card the calendar is the invitation's own paper: no second
   surface, no inner box. Cells get room, the month header gets a rule and
   the arrows read as controls on dark. Prices carry brass. */
body[data-page="villa"] .bcpop{
  background:#0E2723;
  border-color:rgba(244,241,232,.18);
  box-shadow:0 30px 70px -20px rgba(5,16,13,.72),0 2px 8px rgba(5,16,13,.4);
}
body[data-page="villa"] .bcpop-foot .btn{
  background:rgba(244,241,232,.08);
  color:#F4F1E8;
  border:1px solid rgba(244,241,232,.16);
}
body[data-page="villa"] .bcpop-foot .btn:hover{background:rgba(244,241,232,.14)}

body[data-page="villa"] .calx{
  border:0;
  background:transparent;
  box-shadow:none;
  padding:0;
  margin:.1rem 0 .2rem;
}
body[data-page="villa"] .calx-mhead{
  padding-bottom:.4rem;
  margin-bottom:.45rem;
  border-bottom:1px solid rgba(244,241,232,.12);
}
body[data-page="villa"] .calx-mhead strong{
  font-size:.86rem;
  font-weight:650;
  letter-spacing:.02em;
  color:#F4F1E8;
}
body[data-page="villa"] .calx-arrow{
  background:rgba(244,241,232,.06);
  border-color:rgba(244,241,232,.18);
  color:#F4F1E8;
}
body[data-page="villa"] .calx-arrow:hover{background:rgba(244,241,232,.14);border-color:rgba(244,241,232,.36)}
body[data-page="villa"] .calx-wd span{color:rgba(244,241,232,.45);font-size:.62rem}
body[data-page="villa"] .calx-day{border-radius:10px;color:#F4F1E8}
body[data-page="villa"] .calx-day .calx-price{color:rgba(244,241,232,.55)}
body[data-page="villa"] .calx-day:hover:not(.busy):not(.past){background:rgba(244,241,232,.10)}
body[data-page="villa"] .calx-day.weekend:not(.busy):not(.past) .calx-price{color:#C39B62}
body[data-page="villa"] .calx-day.busy{background:repeating-linear-gradient(135deg,rgba(244,241,232,.03),rgba(244,241,232,.03) 4px,rgba(244,241,232,.07) 4px,rgba(244,241,232,.07) 8px);color:rgba(244,241,232,.4)}
body[data-page="villa"] .calx-day.busy .calx-num{color:rgba(244,241,232,.42)}
body[data-page="villa"] .calx-day.past{color:rgba(244,241,232,.38)}
body[data-page="villa"] .calx-day.past.busy{background:transparent}
body[data-page="villa"] .calx-day.off:not(.busy){color:rgba(244,241,232,.38)}
body[data-page="villa"] .calx-day.has-min{padding-top:.4rem}
body[data-page="villa"] .calx-minb{background:#C39B62;color:#122F2A}
body[data-page="villa"] .calx-day.prev-in,
body[data-page="villa"] .calx-day.prev-end{background:rgba(244,241,232,.16)}
body[data-page="villa"] .calx-day.prev-end::after{border-color:rgba(244,241,232,.55)}
body[data-page="villa"] .calx-day.in-range{background:rgba(168,131,79,.30)}
body[data-page="villa"] .calx-day.in-range .calx-price{color:rgba(244,241,232,.8)}
body[data-page="villa"] .calx-day.sel-start,
body[data-page="villa"] .calx-day.sel-end{background:#F4F1E8;color:#122F2A}
body[data-page="villa"] .calx-day.sel-start .calx-price,
body[data-page="villa"] .calx-day.sel-end .calx-price{color:rgba(18,47,42,.72)}
body[data-page="villa"] .calx-day.sel-start .calx-minb,
body[data-page="villa"] .calx-day.sel-end .calx-minb{background:#122F2A;color:#F4F1E8}
body[data-page="villa"] .calx-tip{background:#F4F1E8;color:#122F2A}
body[data-page="villa"] .calx-legend{color:rgba(244,241,232,.55)}
body[data-page="villa"] .calx-sw{background:rgba(244,241,232,.06);border-color:rgba(244,241,232,.2)}
body[data-page="villa"] .calx-sw.free{background:transparent}
body[data-page="villa"] .calx-foot{color:rgba(244,241,232,.6)}

/* ---- 6. the CTA (item 3) ----
   999px pill. Until dates are chosen it is a quiet cream/8% slab whose
   label says what to do — a disabled LOOK on aria-disabled (so the click
   still lands and guides, which is the whole t_booknow01 contract), and
   the moment a stay exists it becomes the one brass gradient on the page. */
body[data-page="villa"] .bc-actions .btn{
  border-radius:999px;
  min-height:48px;
  font-weight:650;
  font-size:.95rem;
  text-transform:none;
  letter-spacing:0;
  background:rgba(244,241,232,.08);
  color:#F4F1E8;
  border:1px solid rgba(244,241,232,.16);
  box-shadow:none;
  transition:background .18s ease,border-color .18s ease,transform .12s ease,filter .15s ease,opacity .15s ease,box-shadow .2s ease;
}
body[data-page="villa"] .bc-actions .btn:hover{background:rgba(244,241,232,.14);border-color:rgba(244,241,232,.3)}

/* ready state: brass gradient + dark ink + the lit shadow */
body[data-page="villa"] .bookcard.bc-ready .bc-actions .btn:not(.ghost):not(.is-blocked){
  background:linear-gradient(180deg,#C9A268 0%,#A8834F 62%,#9A7645 100%);
  color:#122F2A;
  border-color:rgba(201,162,104,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 10px 24px -10px rgba(168,131,79,.75);
}
body[data-page="villa"] .bookcard.bc-ready .bc-actions .btn:not(.ghost):not(.is-blocked):hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}
/* the enquiry twin stays a hairline ghost so the gradient keeps priority */
body[data-page="villa"] .bc-actions .btn.ghost{
  background:transparent;
  color:rgba(244,241,232,.85);
  border-color:rgba(244,241,232,.22);
  min-height:44px;
  font-size:.86rem;
}
body[data-page="villa"] .bc-actions .btn.ghost:hover{background:rgba(244,241,232,.08);border-color:rgba(244,241,232,.4)}
/* dates taken: dim, but keep the label readable on dark */
body[data-page="villa"] .bc-actions .btn.is-blocked{opacity:.5}

/* loading spinner must read on both states */
body[data-page="villa"] .btn.is-loading{opacity:.9}

/* ---- 7. the fine print inside the dark card ---- */
body[data-page="villa"] .bcpre{color:rgba(244,241,232,.58)}
body[data-page="villa"] .bcpre h3{color:rgba(244,241,232,.42)}
body[data-page="villa"] .bcpre li{color:rgba(244,241,232,.6)}
body[data-page="villa"] .bcpre li::before{color:#C39B62}
body[data-page="villa"] .bcpre a{color:rgba(244,241,232,.78);text-decoration:underline;text-underline-offset:2px}
body[data-page="villa"] .bcpre .muted,
body[data-page="villa"] .bookcard .muted{color:rgba(244,241,232,.56)}
body[data-page="villa"] .bcnote{color:rgba(244,241,232,.55)}
body[data-page="villa"] .bcnocard{color:rgba(244,241,232,.5)}
body[data-page="villa"] .bcsum{
  background:rgba(244,241,232,.06);
  border-color:rgba(244,241,232,.16);
  color:#F4F1E8;
}
body[data-page="villa"] .bcbreak{border-color:rgba(244,241,232,.12);color:rgba(244,241,232,.75)}
body[data-page="villa"] .bcbreak .row{border-color:rgba(244,241,232,.1)}
body[data-page="villa"] .bcextras summary{color:rgba(244,241,232,.8);border-color:rgba(244,241,232,.14)}
body[data-page="villa"] .bcaddons{color:rgba(244,241,232,.7)}

/* the micro trust row keeps its light chips — they read as foil on dark */
body[data-page="villa"] .bcreassure{color:rgba(244,241,232,.6)}
body[data-page="villa"] .bcreassure .ti{background:rgba(244,241,232,.1);color:#E8C89A}

/* whatsapp / call twins */
body[data-page="villa"] .bc-contact .btn{
  background:rgba(244,241,232,.06);
  border-color:rgba(244,241,232,.16);
  color:#F4F1E8;
  border-radius:999px;
}
body[data-page="villa"] .bc-contact .btn:hover{background:rgba(244,241,232,.13)}

/* ---- 8. mobile: same dark treatment, card collapses as designed ---- */
@media (max-width:860px){
  body[data-page="villa"] .bookcard{
    border-radius:18px;
    box-shadow:0 8px 20px rgba(9,26,22,.22);
  }
}
/* the bottom sheet is the card's phone body: same surface, same type, the
   rounded top the panel already carries. (The sheet MOVES .bcfields into
   #sheet-slot — the card frame itself stays behind the display:none). */
@media (max-width:760px){
  body[data-page="villa"] .sheet-panel{
    --ink:#F4F1E8;
    --ink-2:#D8D3C6;
    --ink-3:#ADAA9E;
    --line:rgba(244,241,232,.16);
    --card:#0E2723;
    --accent:#F4F1E8;
    --accent-soft:rgba(244,241,232,.08);
    background:#122F2A;
    color:#F4F1E8;
    border-top:1px solid rgba(244,241,232,.18);
    box-shadow:0 -20px 60px rgba(5,16,13,.5);
  }
  body[data-page="villa"] .sheet-grip span{background:rgba(244,241,232,.34)}
  body[data-page="villa"] .sheet-x{background:rgba(244,241,232,.1);color:#F4F1E8}
  body[data-page="villa"] .sheet-foot .btn{
    border-radius:999px;
    min-height:52px;
    font-weight:650;
    background:rgba(244,241,232,.08);
    color:#F4F1E8;
    border:1px solid rgba(244,241,232,.16);
    box-shadow:none;
  }
  /* the sheet's Go button lights up with the card's ready state (the class
     lives on #bookcard, the button does not — :has bridges the two) */
  body:has(#bookcard.bc-ready) .sheet-foot .btn{
    background:linear-gradient(180deg,#C9A268 0%,#A8834F 62%,#9A7645 100%);
    color:#122F2A;
    border-color:rgba(201,162,104,.9);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 10px 24px -10px rgba(168,131,79,.75);
  }
  body[data-page="villa"] .bc-actions .btn{min-height:52px}
}

@media (prefers-reduced-motion:reduce){
  body[data-page="villa"] .bc-actions .btn,
  body[data-page="villa"] .bcpill{transition:none}
}