/* t_booknow01 — the click contract (see booknow.js).
   Kept in its own file so the booking card can be restructured underneath:
   nothing here changes layout, only transform, opacity and colour.
   Load order matters — include AFTER villa-premium.css. */

/* press feedback: the finger gets an answer even when the work is instant */
.bc-actions .btn,
.stickybar .btn,
.sheet-foot .btn{
  transition:transform .12s ease,filter .15s ease,opacity .15s ease;
}
.bc-actions .btn:active,
.bc-actions .btn.is-press,
.stickybar .btn:active,
.stickybar .btn.is-press,
.sheet-foot .btn:active,
.sheet-foot .btn.is-press{
  transform:scale(.98);
  filter:brightness(.94);
}

/* the spinner is additive: the label stays readable */
.btn.is-loading{pointer-events:none;opacity:.85}
.btn.is-loading::after{
  content:"";
  display:inline-block;
  width:.85em;height:.85em;
  margin-left:.5em;
  vertical-align:-.1em;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:bcspin .55s linear infinite;
}
@keyframes bcspin{to{transform:rotate(360deg)}}

/* a booked-out range: the button still takes the click and explains */
.btn.is-blocked{opacity:.55}

/* the pill that has to be filled: one 600ms nudge, then it settles */
.bcpill{position:relative}
.bcrow-dates{position:relative}
.bcpill.needs-dates{
  border-color:var(--accent);
  background:var(--accent-soft);
  animation:bcpill-nudge .6s cubic-bezier(.2,.8,.25,1) 1;
}
@keyframes bcpill-nudge{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(14,107,79,.42)}
  40%{transform:scale(1.02);box-shadow:0 0 0 6px rgba(14,107,79,.16)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(14,107,79,0)}
}

/* the tooltip grows out of the pill, so it cannot point at nothing */
.bctip{
  position:absolute;left:.35rem;bottom:calc(100% + .5rem);z-index:60;
  background:var(--ink,#122F2A);color:#fff;
  font-size:.72rem;font-weight:600;line-height:1.25;
  padding:.3rem .55rem;border-radius:8px;white-space:nowrap;
  pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .16s ease,transform .16s ease;
}
.bctip.is-in{opacity:1;transform:none}
.bctip::after{
  content:"";position:absolute;left:1rem;top:100%;
  border:5px solid transparent;border-top-color:var(--ink,#122F2A);
}

/* discard-if-dirty bar inside the dialog */
.mconfirm{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  margin:0 0 .7rem;padding:.55rem .7rem;
  background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--r-md);
}
.mconfirm[hidden]{display:none}
.mconfirm p{flex:1 1 100%;margin:0;font-size:.8rem;font-weight:600}
.mconfirm .btn,.mconfirm .ghost{font-size:.78rem;padding:.35rem .7rem;margin:0;box-shadow:none}
.mconfirm .ghost{background:transparent;border:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){
  .bc-actions .btn,.stickybar .btn,.sheet-foot .btn,.bctip{transition:none}
  .bc-actions .btn.is-press,.stickybar .btn.is-press,.sheet-foot .btn.is-press{transform:none}
  .bcpill.needs-dates{animation:none;border-color:var(--accent)}
  .btn.is-loading::after{animation:none;border-top-color:currentColor;opacity:.5}
}