/* ============================================================
   t_banskoux — the reference booking FLOW, merged into our one card
   (operator likes banskoretreat.com/properties/apartment-a2)

   Measured on that page, 2026-11-06: the calendar is a SECTION with a
   printed month heading, a tinted guidance box sits above the CTA saying
   "select your dates", the terms (from-price, minimum nights, cleaning
   fee) are printed before the form, and the button says "Book & Pay
   Securely" with a lock. Nothing is duplicated here: the reference's five
   ideas land on top of the bar (t_resvbar01), the click contract
   (t_booknow01), the dialog (t_modalbox01) and the dark card
   (t_hypnoticux) — one card, not a second one.

   Loaded after bookcard-lux.css on villa pages only; the whole file is a
   revert by deleting one <link>.
   ============================================================ */

/* ---- 1. the month heading is a display-serif HEADING (see calendar.js)
   The reference prints "November 2026" as a heading above the grid; ours was
   a bold label. Same face as the villa H1, at reading size. */
.calx-mtitle{
  font-family:"Villa Display","Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:1.32rem;
  line-height:1.1;
  letter-spacing:.012em;
  margin:0;
  text-transform:capitalize;
}
/* the panel head: month + arrows stay one row, the arrows sit on the baseline */
.calx-mhead{align-items:center}
.calx-mhead .calx-nav{align-self:center}

/* the popover's own section head (kicker + heading), so the calendar reads as
   a step in the page and not as an unexplained grid */
body[data-page="villa"] .bcpop-head{display:flex;flex-direction:column;gap:.1rem;margin:.15rem .15rem .45rem;
  position:sticky;top:-.55rem;z-index:2;background:var(--card);padding-top:.25rem}
body[data-page="villa"] .bcpop-k{
  margin:0;font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,241,232,.58);
}
body[data-page="villa"] .bcpop-h{
  margin:0;font-family:"Villa Display","Cormorant Garamond",Georgia,serif;
  font-weight:400;font-size:1.24rem;line-height:1.15;color:#F4F1E8;
}

/* ---- 2. the terms line: every rule that decides the price, before the form */
body[data-page="villa"] .bcterms{
  display:flex;flex-wrap:wrap;gap:.1rem .38rem;
  margin:.55rem 0 .1rem;
  font-size:.72rem;line-height:1.35;
  color:rgba(244,241,232,.62);
  font-variant-numeric:tabular-nums;
}
body[data-page="villa"] .bcterms span{white-space:nowrap}
body[data-page="villa"] .bcterms span + span::before{
  content:"·";margin-right:.38rem;color:rgba(244,241,232,.34);
}

/* ---- 3. the guidance box: ONE element, two states ---------------------
   Empty: warm brass tint + the hint + a button that opens the calendar.
   Quoted: quiet slab holding the live breakdown under its kicker.
   (Both states inherit the card's cream type, so the tints are the only
   difference — a light page would need no second rule.) */
body[data-page="villa"] .bcguide{
  margin:.7rem 0 .1rem;
  border:1px solid rgba(195,155,98,.42);
  border-radius:12px;
  padding:.6rem .7rem .65rem;
  background:rgba(195,155,98,.13);
  transition:background-color .2s ease,border-color .2s ease;
}
/* the fold (t_villapage02) must not strip this box's frame while idle */
body.vbook-idle .bcguide{margin-top:.7rem;padding-top:.6rem;border-top:1px solid rgba(195,155,98,.42)}

body[data-page="villa"] .bcguide[data-state="empty"] .bcg-hint{
  display:grid;grid-template-columns:auto 1fr;gap:.15rem .5rem;align-items:start;margin:0;
}
body[data-page="villa"] .bcg-i{
  width:16px;height:16px;color:#E8C89A;margin-top:.1rem;
}
body[data-page="villa"] .bcg-t{
  font-size:.78rem;line-height:1.35;color:rgba(244,241,232,.88);
}
body[data-page="villa"] .bcg-open{
  grid-column:2;justify-self:start;
  margin-top:.35rem;padding:0 0 .1rem;
  font:inherit;font-size:.75rem;font-weight:650;
  color:#E8C89A;background:none;border:0;border-bottom:1px solid rgba(232,200,154,.45);
  cursor:pointer;
}
body[data-page="villa"] .bcg-open:hover{border-bottom-color:#E8C89A}
body[data-page="villa"] .bcg-open:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:3px}

/* state 2: the quote. The amber goes away — the summary is information, not
   a call to action, so it takes the neutral card tone. */
body[data-page="villa"] .bcguide[data-state="quote"]{
  border-color:rgba(244,241,232,.14);
  background:rgba(244,241,232,.05);
}
body[data-page="villa"] .bcguide .bcg-k{
  margin:0 0 .3rem;font-size:.56rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(244,241,232,.58);
}
/* the error branch keeps the empty tint but prints plain text */
body[data-page="villa"] .bcguide[data-state="empty"] > p.muted{margin:0;font-size:.78rem}

/* ---- 4. the money CTA carries a lock once a stay exists ---------------
   bookcard-lux.js repaints the label with textContent, which would drop a
   child SVG — so the lock is a mask on a pseudo element and survives. */
body[data-page="villa"] .bookcard.bc-ready #bc-submit::before,
body[data-page="villa"] #sheet-go.lock::before{
  content:"";
  display:inline-block;
  width:.95em;height:.95em;
  margin-right:.45em;
  vertical-align:-.12em;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4.5' y='10' width='15' height='10' rx='2.2'/%3E%3Cpath d='M8.2 10V7.2a3.8 3.8 0 017.6 0V10'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4.5' y='10' width='15' height='10' rx='2.2'/%3E%3Cpath d='M8.2 10V7.2a3.8 3.8 0 017.6 0V10'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* the longer, confidence-boosting label needs a little more room */
body[data-page="villa"] .bc-actions .btn#bc-submit{font-size:.86rem;letter-spacing:.005em}

@media (max-width:760px){
  body[data-page="villa"] .bcguide{padding:.65rem .7rem .7rem}
  body[data-page="villa"] .bcg-t{font-size:.8rem}
  body[data-page="villa"] .bcg-open{font-size:.78rem}
  body[data-page="villa"] .bcpop-h{font-size:1.32rem}
  .calx-mtitle{font-size:1.4rem}
  /* the sheet hides the plain card blocks while a sub-view is open; the
     guidance box and the terms are exactly what belongs under the calendar,
     with the sheet's own CTA right below them */
  body.bcpop-mode #sheet-slot .bcguide{display:block}
  body.bcpop-mode #sheet-slot .bcterms{display:flex;margin:.55rem 0 0}
  body.bcpop-mode #sheet-slot .bcguide{margin-bottom:.35rem}
  /* with the calendar already open in the sheet, "open the calendar" is a
     dead instruction — the hint text alone carries it; the guests view keeps
     the button, so `:has` is scoped to the calendar's own open state */
  #sheet-slot:has(#bc-calpop[data-open="1"]) .bcg-open{display:none}
}

@media (prefers-reduced-motion:reduce){
  body[data-page="villa"] .bcguide{transition:none}
}