/* ==========================================================================
   CALYCANTO — BOOKING MODAL, CALENDAR & PRICING
   Requires calycanto-core.css (tokens). Load once, site-wide.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Overlay & shell
   -------------------------------------------------------------------------- */
.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0px, 3vw, 40px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .38s var(--cal-ease), visibility .38s var(--cal-ease);
}
.cal-modal.is-open { opacity: 1; visibility: visible; }

/* The scrim. Not a grey wash: a deep Calycanto teal with the brand mark
   drifting through it, so the moment the checkout opens still feels like the
   rest of the site rather than a browser dialog.

   The whole job of this layer is to lose. It has to be interesting enough not
   to read as dead space, and quiet enough that nothing in it competes with the
   cream panel on top. Hence one colour family, no edges, nothing moving. */
.cal-modal__scrim {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    /* light gathering at the top, the way it does over the ridge */
    radial-gradient(125% 95% at 50% -12%, rgba(64, 190, 214, .42) 0%,
                                          rgba(20, 74, 88, 0) 58%),
    linear-gradient(175deg, rgba(20, 78, 92, .90) 0%, rgba(14, 52, 62, .94) 100%);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* The mark, tiled. Faint enough to be texture rather than pattern: at this
   opacity it is felt before it is seen, which is the point. */
.cal-modal__weave {
  position: absolute;
  /* Exactly the scrim, no overhang. An SVG <pattern> tiles infinitely inside
     whatever it fills, so the rotation cannot leave a bare corner and there is
     nothing to overhang for.

     It was written as inset plus a percentage width, which quietly failed: the
     percentage width on an <svg> root resolved to 100% while the offsets moved
     it left, so the pattern stopped dead in a visible seam before the right
     edge. Four zeroes cannot do that. */
  inset: 0;
  width: 100%;
  height: 100%;
  color: #fffcf8;
  opacity: .06;
  pointer-events: none;
}

.cal-modal__panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: min(92vh, 940px);
  background: var(--cal-cream);
  border-radius: var(--cal-r-lg);
  box-shadow: var(--cal-shadow-lg);
  overflow: hidden;
  display: block;
  transform: translateY(18px) scale(.985);
  transition: transform .48s var(--cal-ease-out);
}
.cal-modal.is-open .cal-modal__panel { transform: none; }

@media (max-width: 760px) {
  .cal-modal { padding: 0; align-items: flex-end; }
  .cal-modal__panel {
    max-width: none;
    max-height: 94vh;
    border-radius: var(--cal-r-lg) var(--cal-r-lg) 0 0;
  }
}

.cal-scope .cal-modal__close{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--cal-pill);
  background: var(--cal-cream);
  color: var(--cal-ink);
  box-shadow: var(--cal-shadow-sm);
  transition: transform var(--cal-t) var(--cal-ease), background-color var(--cal-t) var(--cal-ease);
}
.cal-scope .cal-modal__close:hover{ transform: scale(1.08); background: var(--cal-sand); }
.cal-modal__close svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Left column — dates & guests
   -------------------------------------------------------------------------- */
.cal-modal__main {
  padding: clamp(22px, 2.6vw, 34px);
  max-height: min(92vh, 940px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cal-modal__head { margin-bottom: 1.3rem; padding-right: 52px; }
.cal-modal__head .cal-small { margin-top: .35rem; }
.cal-modal__title {
  font-family: var(--cal-font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  line-height: 1.1;
  letter-spacing: -.017em;
  color: var(--cal-ink);
  margin: 0;
}

/* Date summary chips */
.cal-daterange {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--cal-hairline);
  border-radius: var(--cal-r);
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: #fff;
}
.cal-daterange__cell {
  padding: .95rem 1.15rem;
  text-align: left;
  transition: background-color var(--cal-t) var(--cal-ease);
}
.cal-daterange__cell:hover { background: var(--cal-linen); }
.cal-daterange__cell.is-active { background: var(--cal-linen); box-shadow: inset 0 -2px 0 var(--cal-teal); }
.cal-daterange__label {
  display: block;
  font-family: var(--cal-font-punch);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cal-ink-mute);
  margin-bottom: .18rem;
}
.cal-daterange__value {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cal-ink);
  line-height: 1.35;
}
.cal-daterange__value.is-empty { color: var(--cal-ink-mute); font-weight: 400; }
.cal-daterange__sep { width: 1px; background: var(--cal-hairline); }

/* --------------------------------------------------------------------------
   Calendar
   -------------------------------------------------------------------------- */
.cal-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.cal-cal__navbtn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--cal-pill);
  border: 1px solid var(--cal-hairline);
  color: var(--cal-ink);
  transition: background-color var(--cal-t) var(--cal-ease),
              border-color var(--cal-t) var(--cal-ease),
              opacity var(--cal-t) var(--cal-ease);
}
.cal-scope .cal-cal__navbtn:hover:not(:disabled){ background: var(--cal-ink); border-color: var(--cal-ink); color: var(--cal-cream); }
.cal-cal__navbtn:disabled { opacity: .28; cursor: not-allowed; }
.cal-cal__navbtn svg { width: 14px; height: 14px; }

.cal-cal__months { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 34px); }
@media (max-width: 640px) { .cal-cal__months { grid-template-columns: 1fr; } }

.cal-cal__caption {
  font-family: var(--cal-font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--cal-ink);
  text-align: center;
  margin-bottom: .7rem;
  letter-spacing: -.008em;
}
.cal-cal__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: .3rem;
}
.cal-cal__dow span {
  text-align: center;
  font-family: var(--cal-font-punch);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cal-ink-mute);
}
.cal-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }

.cal-day {
  position: relative;
  aspect-ratio: 1 / .92;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--cal-ink);
  border-radius: var(--cal-r-sm);
  transition: background-color .22s var(--cal-ease), color .22s var(--cal-ease);
}
.cal-day__num { line-height: 1; position: relative; z-index: 2; }
.cal-day--empty { pointer-events: none; }

.cal-scope .cal-day:not(:disabled):hover{ background: var(--cal-sand); }

.cal-day:disabled {
  color: var(--cal-ink-mute);
  opacity: .38;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* In-range band — drawn behind so the pill ends read as one continuous strip */
.cal-scope .cal-day--in-range::before{
  content: '';
  position: absolute;
  inset: 0 -1px;
  background: rgba(31, 158, 187, .12);
  z-index: 0;
}
.cal-day--range-start::before { left: 50%; border-radius: 0; }
.cal-day--range-end::before   { right: 50%; }
.cal-day--range-start.cal-day--range-end::before { display: none; }

.cal-scope .cal-day--selected{
  background: var(--cal-teal);
  font-weight: 700;
}
/* Explicit — the number sits above the range band, and inheriting colour left
   it dark-on-teal and effectively unreadable. */
.cal-day--selected .cal-day__num { color: #fff; }
.cal-scope .cal-day--selected .cal-day__num::after{ background: #fff; }
.cal-scope .cal-day--selected:hover{ background: var(--cal-teal-dark); }

.cal-scope .cal-day--today .cal-day__num::after{
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--cal-rust);
  transform: translateX(-50%);
}
.cal-scope .cal-day--selected.cal-day--today .cal-day__num::after{ background: #fff; }

.cal-cal__hint {
  margin-top: 1rem;
  font-size: .82rem;
  color: var(--cal-ink-mute);
  display: flex;
  align-items: center;
  gap: .5em;
  min-height: 1.4em;
}
.cal-cal__hint.is-warn { color: var(--cal-rust); font-weight: 600; }

/* A rejected pick jolts the day and flashes the hint, so the reason for the
   refusal is obvious without a popup. */
@keyframes cal-day-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}
.cal-scope .cal-day.is-rejected{
  animation: cal-day-shake .5s var(--cal-ease);
  background: rgba(171, 62, 9, .14);
  border-radius: var(--cal-r-sm);
}
@keyframes cal-hint-flash {
  0%, 100% { background: transparent; }
  25%, 60% { background: rgba(171, 62, 9, .14); }
}
.cal-cal__hint.is-flash {
  animation: cal-hint-flash .9s var(--cal-ease);
  border-radius: var(--cal-r-sm);
  padding: .3em .55em;
  margin-left: -.55em;
}
@media (prefers-reduced-motion: reduce) {
  .cal-day.is-rejected, .cal-cal__hint.is-flash { animation: none; }
}
.cal-cal__hint svg { width: 11px; height: 11px; flex: none; opacity: .7; }

/* --------------------------------------------------------------------------
   Steppers (guests, villa add-ons)
   -------------------------------------------------------------------------- */
.cal-steppers { margin-top: 1.9rem; display: grid; gap: .1rem; }
.cal-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 0;
  border-top: 1px solid var(--cal-hairline);
}
.cal-stepper:last-child { border-bottom: 1px solid var(--cal-hairline); }
.cal-stepper__text strong {
  display: block;
  font-size: .98rem;
  font-weight: 700;
  color: var(--cal-ink);
  line-height: 1.3;
}
.cal-stepper__text span { font-size: .84rem; color: var(--cal-ink-mute); }
.cal-stepper__ctrl { display: flex; align-items: center; gap: .85rem; flex: none; }
.cal-stepper__btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--cal-pill);
  border: 1px solid var(--cal-hairline);
  color: var(--cal-ink);
  font-size: 1.05rem;
  line-height: 1;
  transition: background-color var(--cal-t) var(--cal-ease),
              border-color var(--cal-t) var(--cal-ease),
              opacity var(--cal-t) var(--cal-ease);
}
.cal-scope .cal-stepper__btn:hover:not(:disabled){ background: var(--cal-ink); border-color: var(--cal-ink); color: var(--cal-cream); }
.cal-stepper__btn:disabled { opacity: .3; cursor: not-allowed; }
.cal-stepper__val { min-width: 1.6ch; text-align: center; font-weight: 700; color: var(--cal-ink); }

/* --------------------------------------------------------------------------
   Summary — appears under the steppers once a range is complete
   -------------------------------------------------------------------------- */
.cal-summary:empty { display: none; }
.cal-summary.is-live {
  margin-top: 1.4rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--cal-r);
  background: var(--cal-sand);
}

/* --------------------------------------------------------------------------
   (legacy aside styles — kept for the price line/total typography)
   -------------------------------------------------------------------------- */
.cal-modal__aside {
  position: relative;
  background: var(--cal-sand);
  padding: clamp(24px, 3vw, 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cal-modal__aside > * { position: relative; z-index: 1; }

.cal-quote-card {
  background: var(--cal-cream);
  border-radius: var(--cal-r);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--cal-shadow-sm);
}
.cal-quote-card__name {
  font-family: var(--cal-font-display);
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--cal-ink);
  line-height: 1.22;
  letter-spacing: -.012em;
  margin-bottom: .45rem;
}

.cal-price-lines { display: grid; gap: .72rem; }
.cal-price-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: .92rem;
}
.cal-price-line__label { color: var(--cal-ink-soft); }
.cal-price-line__label small { display: block; font-size: .78rem; color: var(--cal-ink-mute); }
.cal-price-line__value { font-weight: 600; color: var(--cal-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-price-line--credit .cal-price-line__value { color: #2f7d3a; }

.cal-price-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .95rem;
  border-top: 1px solid var(--cal-hairline);
  margin-top: .3rem;
}
.cal-price-total__label { font-weight: 700; color: var(--cal-ink); font-size: 1rem; }
.cal-price-total__value {
  font-family: var(--cal-font-punch);
  font-size: 1.95rem;
  font-weight: 700;
  color: var(--cal-ink);
  letter-spacing: .005em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cal-quote-empty {
  display: grid;
  gap: .55rem;
  justify-items: center;
  text-align: center;
  padding: 2.2rem 1rem;
  color: var(--cal-ink-mute);
  font-size: .92rem;
}
.cal-quote-empty svg { width: 34px; height: 34px; opacity: .22; color: var(--cal-ink); }

.cal-modal__cta { margin-top: 1.3rem; display: grid; gap: .6rem; }
.cal-modal__cta .cal-btn { width: 100%; }
.cal-modal__fineprint { font-size: .78rem; line-height: 1.55; color: var(--cal-ink-mute); text-align: center; }

/* --------------------------------------------------------------------------
   Rotator dots (shared with Guest Notes)
   -------------------------------------------------------------------------- */
.cal-scope .cal-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .28;
  padding: 0;
  transition: opacity var(--cal-t) var(--cal-ease), transform var(--cal-t) var(--cal-ease);
}
.cal-dot.is-active { opacity: 1; transform: scale(1.35); }

body.cal-modal-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Expandable option groups (additional villas, extra cleaning)
   -------------------------------------------------------------------------- */
.cal-group { border-top: 1px solid var(--cal-hairline); }
.cal-group:last-child { border-bottom: 1px solid var(--cal-hairline); }

.cal-group__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 0;
  text-align: left;
  cursor: pointer;
}
.cal-group__text strong {
  display: block;
  font-size: .98rem;
  font-weight: 700;
  color: var(--cal-ink);
  line-height: 1.3;
}
.cal-group__text span { font-size: .84rem; color: var(--cal-ink-mute); }
.cal-group__chev {
  width: 16px; height: 16px;
  flex: none;
  color: var(--cal-ink-mute);
  transition: transform var(--cal-t) var(--cal-ease), color var(--cal-t) var(--cal-ease);
}
.cal-group__head:hover .cal-group__chev { color: var(--cal-ink); }
.cal-group.is-open .cal-group__chev { transform: rotate(180deg); }

.cal-group__body { display: none; padding: 0 0 .9rem; }
.cal-group.is-open .cal-group__body { display: block; }

/* One option inside a group */
.cal-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem .95rem;
  border-radius: var(--cal-r-sm);
  background: var(--cal-linen);
}
.cal-opt + .cal-opt { margin-top: .5rem; }
.cal-opt__text strong {
  display: block;
  font-size: .94rem;
  font-weight: 700;
  color: var(--cal-ink);
  line-height: 1.3;
}
.cal-opt__text span { font-size: .82rem; color: var(--cal-ink-mute); line-height: 1.4; }
.cal-opt__side { display: flex; align-items: center; gap: 1rem; flex: none; }
.cal-opt__price {
  font-family: var(--cal-font-punch);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--cal-ink);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .cal-opt { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .cal-opt__side { width: 100%; justify-content: space-between; }
}

/* Rates-pending panel: a property that is live on the site but has no
   published nightly rate yet. Replaces the price breakdown entirely. */
.cal-price-tbd {
  display: grid;
  gap: .45rem;
  padding: 1.05rem 1.15rem;
  border-radius: var(--cal-r-sm);
  background: var(--cal-linen);
  border: 1px solid var(--cal-hairline);
}
.cal-price-tbd strong {
  font-family: var(--cal-font-punch);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cal-ink);
}
.cal-price-tbd span { font-size: .9rem; line-height: 1.55; color: var(--cal-ink-soft); }

/* Over-capacity note: shown when guests + children exceed the beds available.
   Deliberately advisory, not a blocker — small children often share. */
.cal-capnote {
  margin: .1rem 0 0;
  padding: .8rem .95rem;
  border-radius: var(--cal-r-sm);
  background: rgba(171, 62, 9, .07);
  border: 1px solid rgba(171, 62, 9, .22);
  color: var(--cal-rust);
  font-size: .88rem;
  line-height: 1.5;
}

/* ==========================================================================
   CHECKOUT
   Step 2 of the modal: a plain receipt, then who to contact. Kept deliberately
   statement-like rather than decorative — people are reading numbers here.
   ========================================================================== */
.cal-back {
  display: inline-flex; align-items: center; gap: .5em;
  margin-bottom: 1.1rem;
  font-family: var(--cal-font-punch);
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cal-ink-mute);
  transition: color var(--cal-t) var(--cal-ease);
}
.cal-back:hover { color: var(--cal-ink); }
.cal-back svg { width: 13px; height: 13px; }

.cal-receipt {
  margin: 1.2rem 0 1.6rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--cal-r-sm);
  border: 1px solid var(--cal-hairline);
  background: var(--cal-linen);
  font-size: .94rem;
}
.cal-receipt__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.2rem; padding: .3rem 0; color: var(--cal-ink-soft);
}
.cal-receipt__row small { display: block; font-size: .8rem; opacity: .75; }
.cal-receipt__row--head {
  font-family: var(--cal-font-display);
  font-size: 1.1rem; color: var(--cal-ink);
  padding-bottom: .55rem; margin-bottom: .35rem;
  border-bottom: 1px solid var(--cal-hairline);
}
.cal-receipt__rule { height: 1px; background: var(--cal-hairline); margin: .7rem 0; }
.cal-receipt__row--total {
  margin-top: .55rem; padding-top: .7rem;
  border-top: 1px solid var(--cal-hairline);
  font-family: var(--cal-font-punch);
  font-size: 1.18rem; font-weight: 700; color: var(--cal-ink);
}
.cal-receipt__row--note { font-size: .84rem; color: var(--cal-ink-mute); }

/* The code that ties this booking to a payment. Tracking and a tabular font
   because people read it over the phone and type it into a search box. */
.cal-receipt__row--ref {
  font-size: .8rem;
  color: var(--cal-ink-mute);
}
.cal-receipt__row--ref span:last-child {
  font-family: var(--cal-font-punch);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cal-ink);
}

.cal-cform { display: grid; gap: .95rem; }
.cal-cform__err {
  margin: 0; padding: .7rem .85rem;
  border-radius: var(--cal-r-sm);
  background: rgba(171, 62, 9, .07);
  border: 1px solid rgba(171, 62, 9, .22);
  color: var(--cal-rust); font-size: .88rem;
}
.cal-cform [type="submit"] { justify-content: center; }

/* Confirmation */
.cal-done { text-align: center; }
.cal-done__mark { display: grid; place-items: center; margin-bottom: 1rem; }
.cal-done__mark svg { width: 40px; height: 40px; color: var(--cal-teal); }
.cal-done__body {
  margin: .8rem auto 0; max-width: 44ch;
  color: var(--cal-ink-soft); line-height: 1.65;
}
.cal-done .cal-receipt { text-align: left; }

/* Phone field: dial code and number side by side. The select sizes to its
   content so long country names do not squeeze the number input. */
.cal-phone { display: flex; gap: .5rem; }
.cal-phone__code {
  flex: 0 0 auto;
  width: auto;
  max-width: 42%;
  padding-right: 2rem;
  cursor: pointer;
}
.cal-phone__num { flex: 1 1 auto; min-width: 0; }
@media (max-width: 420px) {
  .cal-phone__code { max-width: 46%; }
}

/* A booked night. Lighter than a past day and without the strike-through:
   it is unavailable, not gone. */
.cal-scope .cal-day--booked{
  color: var(--cal-ink-mute);
  opacity: .55;
  text-decoration: none;
  background:
    repeating-linear-gradient(-45deg,
      rgba(171, 62, 9, .10) 0 3px,
      transparent 3px 6px);
  border-radius: var(--cal-r-sm);
}


/* A refused day still takes a click (so it can explain itself) but must not
   look or behave like something you can pick. */
.cal-day.is-refused { cursor: not-allowed; }
.cal-scope .cal-day.is-refused:hover{ background: none; }

/* The amount needed to hold the dates, with the pay button inside it. Keeping
   them together is the point: the button charges this number, not the total
   above it. */
.cal-due {
  margin-top: .65rem;
  padding: .75rem .85rem .85rem;
  border-radius: var(--cal-r-sm);
  background: rgba(31, 158, 187, .10);
  border: 1px solid rgba(31, 158, 187, .22);
}
.cal-due__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
}
.cal-due__label {
  font-weight: 700;
  color: var(--cal-teal-dark);
}
.cal-due__label small {
  display: block;
  margin-top: .1rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--cal-ink-mute);
}
.cal-due__amount {
  font-family: var(--cal-font-punch);
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--cal-teal-dark);
}
/* Standing alone on the pay step rather than closing a receipt. */
[data-cal-role="p-due"] .cal-due { margin: 0 0 1.15rem; }

/* Two ways to finish: pay and hold the dates, or ask and we reply. */
.cal-pay { display: grid; gap: .55rem; }
/* Two payment buttons stack with a little air, the note under both. */
.cal-sect .cal-paybtn + .cal-paybtn { margin-top: .55rem; }
.cal-pay .cal-btn { justify-content: center; width: 100%; }
.cal-pay__note {
  margin: 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--cal-ink-mute);
  text-align: center;
}
.cal-pay__or {
  display: flex; align-items: center; gap: .9rem;
  margin: .7rem 0 .35rem;
  font-size: .86rem; font-weight: 500; letter-spacing: .04em;
  color: var(--cal-ink-mute);
}
.cal-pay__or::before, .cal-pay__or::after {
  content: ''; flex: 1; height: 1px; background: var(--cal-hairline);
}
.cal-pay__or[hidden] { display: none; }

/* A hidden button must actually hide. .cal-btn sets display, which beats the
   browser's own [hidden] rule, so it has to be said explicitly. */
.cal-btn[hidden], .cal-paybtn[hidden], .cal-ask[hidden],
.cal-back[hidden] { display: none !important; }

/* Payment buttons. Each carries its provider's own colour so it reads as a
   payment method rather than another site button. PayPal slots in below. */
.cal-paybtn {
  display: flex; align-items: center; justify-content: center; gap: .55em;
  width: 100%;
  padding: .95em 1.2em;
  border-radius: var(--cal-pill);
  border: 0;
  font-family: var(--cal-font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--cal-t) var(--cal-ease), filter var(--cal-t) var(--cal-ease);
}
.cal-paybtn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.cal-paybtn:disabled { opacity: .6; cursor: default; transform: none; }
.cal-paybtn__label { opacity: .92; }

/* Tilopay. Their own wordmark on a light ground, so the mark keeps its real
   colour instead of being tinted to fit. The button still reads as the primary
   action through its size and the shadow. */
.cal-scope .cal-paybtn--tilopay{
  background: #fff;
  color: var(--cal-ink);
  border: 1px solid rgba(43, 35, 35, .16);
  box-shadow: var(--cal-shadow-sm);
}
.cal-paybtn--tilopay:hover { filter: none; box-shadow: var(--cal-shadow); }

/* PayPal sits directly under Tilopay and must read as its equal: same white
   card, same height, same hairline. Only the mark differs. */
.cal-scope .cal-paybtn--paypal{
  background: #fff; color: var(--cal-ink);
  border: 1px solid rgba(43, 35, 35, .16);
  box-shadow: var(--cal-shadow-sm);
}
.cal-paybtn--paypal:hover { filter: none; box-shadow: var(--cal-shadow); }

/* Stand-in wordmark, set in type until the official artwork arrives. The two
   blues and the tight italic are what make PayPal readable at a glance. */
.cal-ppmark {
  font-family: var(--cal-font-punch);
  font-size: 1.28em;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -.02em;
  line-height: 1;
}
.cal-ppmark__a { color: #003087; }
.cal-ppmark__b { color: #009cde; }

/* Direct deposit. Same white card as the other two so no option looks like
   the afterthought, but with a mark rather than a brand. */
.cal-scope .cal-paybtn--bank{
  background: #fff; color: var(--cal-ink);
  border: 1px solid rgba(43, 35, 35, .16);
  box-shadow: var(--cal-shadow-sm);
  font-weight: 600;
}
.cal-paybtn--bank:hover { filter: none; box-shadow: var(--cal-shadow); }
.cal-scope .cal-paybtn--bank.is-open{ background: var(--cal-linen); box-shadow: none; }
.cal-paybtn__ico { width: 1.15em; height: 1.15em; flex: none; color: var(--cal-teal-dark); }

/* The account details. Opens under the buttons, not over them: these numbers
   are read while the other hand is in a banking app. */
.cal-bank {
  margin-top: .7rem;
  padding: 1rem;
  border: 1px solid var(--cal-hairline);
  border-radius: var(--cal-r-sm);
  background: var(--cal-linen);
}
.cal-bank[hidden] { display: none !important; }
.cal-bank__lead { margin: 0 0 .85rem; font-size: .86rem; color: var(--cal-ink-soft); }
.cal-bank__acct { margin-bottom: 1rem; }
.cal-bank__acct:last-child { margin-bottom: 0; }
.cal-bank__acct h4 {
  margin: 0 0 .45rem;
  font-family: var(--cal-font-punch);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--cal-teal-dark);
}
.cal-bank__row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .3rem 0;
  border-bottom: 1px solid rgba(43, 35, 35, .08);
  font-size: .85rem;
  color: var(--cal-ink-mute);
}
.cal-bank__row > span:last-child { color: var(--cal-ink); font-weight: 600; text-align: right; }

/* Tap to copy. An account number retyped by hand is a wrong transfer. */
.cal-bank__copy {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .2em .5em; margin: -.2em -.5em;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--cal-ink);
  cursor: pointer;
  transition: background-color var(--cal-t) var(--cal-ease);
}
.cal-bank__copy:hover { background: rgba(31, 158, 187, .12); }
.cal-bank__copy code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .84rem; font-weight: 600;
  letter-spacing: .01em;
}
.cal-bank__copy svg { width: 14px; height: 14px; opacity: .5; }
.cal-bank__copy.is-copied { background: rgba(31, 158, 187, .16); }
.cal-bank__copy.is-copied code { color: var(--cal-teal-dark); }
.cal-bank__copy.is-copied svg { display: none; }

/* What to do once the money has been sent. The step people forget. */
.cal-bank__next {
  margin-top: 1rem; padding-top: .9rem;
  border-top: 1px solid var(--cal-hairline);
}
.cal-bank__next p { margin: 0 0 .8rem; font-size: .88rem; line-height: 1.55; color: var(--cal-ink); }
.cal-bank__wa { justify-content: center; width: 100%; text-decoration: none; }
.cal-bank__wa[hidden] { display: none !important; }

/* What happens next, on the screen a guest lands on after paying. Bordered,
   because the link inside it is the thing they need to keep. */
.cal-next {
  margin-top: 1.4rem;
  padding: 1rem;
  text-align: left;
  border: 1px solid var(--cal-hairline);
  border-radius: var(--cal-r-sm);
  background: var(--cal-linen);
}
.cal-next[hidden] { display: none !important; }
.cal-next .cal-sect__ttl { margin-bottom: .6rem; }
.cal-next p { margin: 0 0 .9rem; font-size: .88rem; line-height: 1.6; color: var(--cal-ink); }
.cal-next__cta { justify-content: center; width: 100%; text-decoration: none; }
.cal-next__cta[hidden] { display: none !important; }
/* The link in full, so it can be copied or read off a printed page. */
.cal-next__url {
  margin: .75rem 0 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .7rem !important;
  line-height: 1.5 !important;
  color: var(--cal-ink-mute) !important;
  word-break: break-all;
}
.cal-next__url[hidden] { display: none; }
.cal-paybtn--tilopay .cal-paybtn__brand {
  display: block;
  height: 1.3em;
  /* width:auto collapses an inline SVG to nothing, so the artwork's own
     616x182 has to be restated as a ratio */
  aspect-ratio: 616 / 182;
  width: auto;
  flex: none;
  /* the mark carries its own red; do not let currentColor near it */
}

/* The pay step is two named sections, one under the other: what you can pay
   with, and how to ask instead. The rule sits under the heading so each block
   reads as its own thing without a heavy box around it. */
.cal-sect { margin-top: 1.5rem; }
.cal-sect[hidden] { display: none !important; }
.cal-sect__ttl {
  margin: 0 0 .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--cal-hairline);
  font-family: var(--cal-font-punch);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cal-ink);
}
.cal-cform--tight { margin-top: 0; gap: .8rem; }

/* ---- The rental agreement ------------------------------------------
   A bordered block, because it has to look like a thing you deal with
   rather than more small print at the bottom of a form. */
.cal-agree {
  margin-top: 1.35rem;
  padding: 1rem;
  border: 1px solid var(--cal-hairline);
  border-radius: var(--cal-r-sm);
  background: var(--cal-linen);
  transition: border-color var(--cal-t) var(--cal-ease),
              box-shadow var(--cal-t) var(--cal-ease);
}
.cal-agree[hidden] { display: none !important; }
.cal-agree .cal-sect__ttl { margin-bottom: .7rem; }

/* Title on the left, the download on the right. They sit on one line until
   the box gets narrow, where the button drops under the heading rather than
   squeezing it. */
.cal-scope .cal-agree__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.cal-scope .cal-agree__head .cal-sect__ttl { margin-bottom: .7rem; }

/* Quiet on purpose. Reading and signing the agreement is the job on this
   screen; taking a copy away is the exception, so it must not compete with
   the button that moves the booking on. */
.cal-scope .cal-agree__pdf {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--cal-hairline);
  background: transparent;
  color: var(--cal-ink-soft, inherit);
  font: inherit;
  font-size: .8rem;
  letter-spacing: .02em;
  padding: .36em 1em;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--cal-t) var(--cal-ease),
              background var(--cal-t) var(--cal-ease);
}
.cal-scope .cal-agree__pdf:hover,
.cal-scope .cal-agree__pdf:focus-visible {
  border-color: currentColor;
  background: rgba(0, 0, 0, .03);
}

/* Refused. Red on the block, not just a line of text somewhere below it. */
.cal-agree.is-missing {
  border-color: var(--cal-rust);
  box-shadow: 0 0 0 3px rgba(171, 62, 9, .12);
}
.cal-agree.is-missing .cal-check span { color: var(--cal-rust); font-weight: 600; }

/* The contract. Fixed height so it is obviously scrollable and does not
   push the button that follows it off the bottom of the world. */
.cal-terms {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .85rem 1rem;
  border: 1px solid var(--cal-hairline);
  border-radius: var(--cal-r-sm);
  background: #fff;
  font-size: .82rem;
  line-height: 1.62;
  color: var(--cal-ink-soft);
}
.cal-terms:focus-visible { outline: 2px solid var(--cal-teal); outline-offset: 2px; }
.cal-terms p { margin: 0 0 .7rem; }
.cal-terms a { color: var(--cal-teal-dark); }
.cal-terms__h {
  margin: 1.1rem 0 .45rem;
  font-family: var(--cal-font-punch);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cal-ink);
}
.cal-terms__h:first-child { margin-top: 0; }
.cal-terms__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .26rem 0;
  border-bottom: 1px solid rgba(43, 35, 35, .07);
}
.cal-terms__row span:last-child { text-align: right; color: var(--cal-ink); font-weight: 600; }
.cal-terms__rules { margin: 0 0 .7rem; padding-left: 1.15rem; }
.cal-terms__rules li { margin-bottom: .45rem; }
.cal-terms__note {
  margin-top: .9rem; padding-top: .7rem;
  border-top: 1px solid var(--cal-hairline);
  font-style: italic;
}

.cal-agree__scroll {
  margin: .45rem 0 0;
  font-size: .78rem;
  color: var(--cal-ink-mute);
}
.cal-agree__scroll[hidden] { display: none; }

/* The box itself. Big enough to hit on a phone. */
.cal-check {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-top: .9rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--cal-ink);
  cursor: pointer;
}
.cal-check input {
  flex: none;
  width: 20px; height: 20px;
  margin: 0;
  accent-color: var(--cal-teal);
  cursor: pointer;
}

.cal-agree__sign { margin-top: .9rem; }

/* While a gateway is open in another tab. Informational, not alarming: the
   guest has not done anything wrong, they are simply mid-payment somewhere
   else, and this is the way back if they change their mind. */
.cal-scope .cal-pay__wait {
  margin: .75rem 0 0;
  padding: .7rem .85rem;
  border: 1px solid var(--cal-hairline);
  border-radius: var(--cal-r-sm);
  background: var(--cal-linen);
  font-size: .88rem;
  line-height: 1.5;
}
.cal-scope .cal-pay__wait[hidden] { display: none !important; }

/* A link, not a button: pressing it is a correction, and it must not look
   like a third way to pay sitting under the two real ones. */
.cal-scope .cal-pay__wait-again {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cal-scope .cal-pay__wait-again:hover,
.cal-scope .cal-pay__wait-again:focus-visible { opacity: .72; }
/* Set apart from the other inputs: this one is a signature. */
/* The tick on the way back from a payment. Green because this is the one
   moment in the flow that is genuinely finished, and it should feel like it. */
.cal-done__mark--paid {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(31, 158, 187, .12);
  color: var(--cal-teal-dark);
}
.cal-done__mark--paid svg { width: 30px; height: 30px; }
/* Same shape, different weather: a failed payment is not an error the guest
   caused, so it is muted rather than alarming. */
.cal-done__mark--paid.is-failed {
  background: rgba(171, 62, 9, .10);
  color: var(--cal-rust);
}
.cal-done__mark--paid.is-failed svg { display: none; }
.cal-done__mark--paid.is-failed::before {
  content: '!';
  font-family: var(--cal-font-punch);
  font-size: 1.9rem; font-weight: 700;
}

.cal-signature {
  font-family: var(--cal-font-display);
  font-size: 1.12rem;
  font-style: italic;
}

/* Said once above the fields: read the receipt, then fill these in. */
.cal-cform__lead {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--cal-ink-mute);
}
.cal-cform__lead[hidden] { display: none; }

.cal-cform[hidden] { display: none; }
.cal-cform { margin-top: 1.15rem; }

/* The finish buttons sit inside the form, below the fields, so the details
   are read before either is reached. */
.cal-cform .cal-pay { margin-top: .35rem; }
.cal-textarea { resize: vertical; min-height: 4.5em; line-height: 1.5; font-family: inherit; }

/* The last word on backgrounds.
   ------------------------------------------------------------------------
   Each control below already declares its own background, and today that
   declaration outranks the `button:hover` the theme ships. That is a bet on
   the theme staying as weak as it is, and the bet has been lost once
   already. Restating the same colour for the interactive states at (0,3,0)
   changes nothing about how the site looks; it just removes the bet.

   Controls that deliberately change colour on hover are not here. They have
   their own :hover rules further up and those must keep winning. */
.cal-scope .cal-day--booked:hover,
.cal-scope .cal-day--booked:focus,
.cal-scope .cal-day--booked:active { background: repeating-linear-gradient(-45deg, rgba(171, 62, 9, .10) 0 3px, transparent 3px 6px); }
.cal-scope .cal-lightbox__close:hover,
.cal-scope .cal-lightbox__close:focus,
.cal-scope .cal-lightbox__close:active { background: var(--cal-cream); }
.cal-scope .cal-paybtn--bank:hover,
.cal-scope .cal-paybtn--bank:focus,
.cal-scope .cal-paybtn--bank:active { background: #fff; }
.cal-scope .cal-paybtn--paypal:hover,
.cal-scope .cal-paybtn--paypal:focus,
.cal-scope .cal-paybtn--paypal:active { background: #fff; }
.cal-scope .cal-paybtn--tilopay:hover,
.cal-scope .cal-paybtn--tilopay:focus,
.cal-scope .cal-paybtn--tilopay:active { background: #fff; }
.cal-scope .cal-pill--butter:hover,
.cal-scope .cal-pill--butter:focus,
.cal-scope .cal-pill--butter:active { background: var(--cal-butter); }
.cal-scope .cal-pill--ink:hover,
.cal-scope .cal-pill--ink:focus,
.cal-scope .cal-pill--ink:active { background: var(--cal-ink); }
.cal-scope .cal-pill--rust:hover,
.cal-scope .cal-pill--rust:focus,
.cal-scope .cal-pill--rust:active { background: rgba(171,62,9,.10); }
.cal-scope .cal-pill--teal:hover,
.cal-scope .cal-pill--teal:focus,
.cal-scope .cal-pill--teal:active { background: rgba(31,158,187,.13); }

/* A day that cannot close the range you have started: still live, because
   clicking it begins a new range from there, but visibly a step back from
   the ones that can. Dimmed rather than struck through, which is reserved
   for dates that have simply gone. */
.cal-scope .cal-day--beyond{
  color: var(--cal-ink-mute);
  opacity: .5;
}
.cal-scope .cal-day--beyond:hover,
.cal-scope .cal-day--beyond:focus-visible{
  opacity: 1;
  color: var(--cal-ink);
}

/* --------------------------------------------------------------------------
   PROMO CODE
   A short box and its button on one line, because the code is a handful of
   characters and a full-width field would promise more than it needs.
   -------------------------------------------------------------------------- */
.cal-promo {
  display: flex;
  align-items: flex-end;
  gap: .6rem;
  margin-top: 1.1rem;
}
.cal-promo__field { flex: 1 1 auto; min-width: 0; }
.cal-scope .cal-promo__apply {
  flex: none;
  padding: .72em 1.3em;
  font-size: .95rem;
}
.cal-promo__note {
  margin: .5rem 0 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--cal-teal-deep);
}
.cal-promo__note.is-bad { color: var(--cal-rust); }
.cal-promo__note[hidden] { display: none; }