/* The cancellations list page: same Wonderland pieces as the booking journey. */
.hero { padding: 14px 4px 18px; }
.hero .speech { transform: rotate(-1deg); }
.wl-form { display: flex; flex-direction: column; gap: 22px; }
.wl-form .card-ink { display: flex; flex-direction: column; gap: 14px; }
.wl-form .chips .chip { min-height: 46px; padding: 0 16px; font-size: 16px; }
.small { font-size: 16px; margin: -8px 0 0; }
.opt { font-weight: 400; color: var(--ink-muted); }
.f input[type="date"] { padding: 0 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.msg { margin: 0; color: var(--heart-light); font-weight: 600; }
.msg:empty { display: none; }
.fine { margin: -8px 0 0; font-size: 16px; text-align: center; color: var(--on-navy-muted); }

/* Tap-to-pick date, with the booking journey's calendar */
.date-btn { width: 100%; min-height: 54px; border-radius: 16px; border: 3px solid var(--ink); background: #fff; color: var(--ink); font: inherit; font-weight: 600; font-size: 18px; text-align: left; padding: 0 16px; cursor: pointer; }
.date-btn.empty { color: var(--orange-deep); }
.date-btn[aria-expanded="true"] { box-shadow: var(--lift-orange); }
.linkish { align-self: flex-start; background: none; border: 0; padding: 4px 0; color: var(--orange-deep); font: inherit; font-size: 16px; text-decoration: underline; cursor: pointer; }
.cal-wrap { background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 20px; padding: 12px; margin-top: 6px; box-shadow: var(--lift-mint); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-head h3 { margin: 0; font-family: var(--display); font-size: 18px; }
.cal-head button { width: 44px; height: 44px; border-radius: 999px; border: 3px solid var(--ink); background: #fff; color: var(--ink); font-size: 18px; font-weight: 700; cursor: pointer; }
.cal-head button:disabled { opacity: .35; cursor: not-allowed; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .dow { text-align: center; font-size: 16px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; }
.day { aspect-ratio: 1; min-height: 38px; border-radius: 10px; border: 2px solid #e3e3ee; background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; display: grid; place-items: center; padding: 0; }
.day-available { border-color: var(--mint); background: var(--mint-soft); }
.day-booked { color: var(--ink-muted); text-decoration: line-through; }
.day:disabled { color: #c4c4d4; border-style: dashed; cursor: not-allowed; text-decoration: none; background: #fff; }
.day-blank { border: 0; background: transparent; cursor: default; }
.day.picked { background: var(--orange); border-color: var(--ink); color: var(--ink); text-decoration: none; }
.cal-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 16px; color: var(--ink-muted); }
.cal-key span { display: inline-flex; align-items: center; gap: 6px; }
.cal-key i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid; }
.cal-key .k-free { border-color: var(--mint); background: var(--mint-soft); }
.cal-key .k-full { border-color: #e3e3ee; background: #fff; position: relative; }
.cal-key .k-full::after { content: ''; position: absolute; left: 1px; right: 1px; top: 4px; border-top: 2px solid var(--ink-muted); }

.free-box:empty { display: none; }
.free-now, .full-now { display: flex; flex-direction: column; gap: 8px; }
.full-now { font-size: 16px; display: block; }
.free-now .sticker { align-self: flex-start; color: var(--ok); }
.free-now p { margin: 0; }
.free-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.free-day { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px; border-radius: 16px; border: 3px solid var(--ink); background: var(--mint-soft); color: var(--ink) !important; text-decoration: none; }
.free-day:hover { background: var(--mint-2); }
.free-day .d { font-family: var(--display); font-weight: 700; font-size: 18px; white-space: nowrap; }
.free-day .t { font-size: 16px; color: var(--ink-muted); min-width: 0; }
.free-day .go { font-size: 22px; font-weight: 700; }

.done { display: flex; flex-direction: column; gap: 10px; text-align: center; margin-top: 16px; }
.done h2 { margin: 0; font-family: var(--display); font-size: 28px; line-height: 1.15; }
.done p { margin: 0; }
.done .big { font-size: 52px; line-height: 1; transform: rotate(-10deg); }
.done .free-now { text-align: left; margin-top: 8px; box-shadow: none; }
.done .row { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
@media (max-width: 420px) { .hide-xs { display: none; } }

/* what's happening on the chosen date, right under it */
.d-status:empty { display: none; }
.d-status { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 10px 12px; border-radius: 14px; background: var(--paper-2); font-size: 16px; }
.ds-free b { color: var(--ok); }
.ds-full b { color: var(--bad); }
.ds-note { color: var(--ink-muted); font-size: 16px; }
.how { margin: 0 0 18px; padding: 12px 14px; border-radius: 16px; border: 2px dashed var(--navy-line); color: var(--on-navy); font-size: 16px; }
.how summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 16px; }
.how ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--on-navy-muted); }
.wl-form .free-now { box-shadow: none; border-width: 2px; padding: 12px; }
.wl-form .free-now h2 { font-size: 18px; }
/* the chance a full day frees up */
.speech .l2 .ht { display: block; margin-top: 4px; }
.chance { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 2px solid currentColor; font-size: 16px; font-weight: 700; white-space: nowrap; }
.chance-good { color: var(--ok); background: var(--ok-bg); }
.chance-some { color: var(--warn); background: var(--warn-bg); }
.chance-low { color: var(--bad); background: var(--bad-bg); }
/* calendar: same look as the booking one */
.cal-wrap .day { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.day .dfree { font-size: 16px; font-weight: 700; margin-top: 2px; color: var(--ok); }
.day .dfull { font-size: 16px; font-weight: 700; margin-top: 2px; text-transform: uppercase; color: #b3261e; }
.day.day-booked { background: #fde7e8; border-color: #f3b4b8; color: #b3261e; text-decoration: none; }
.day.picked .dfree, .day.picked .dfull { color: var(--ink); }
.cal-key .k-booked { border-color: #f3b4b8; background: #fde7e8; }
.d-status .chance { align-self: flex-start; }
/* nearby free dates: the date and Book on one line, the free times written out underneath */
.free-day { grid-template-columns: 1fr auto; row-gap: 2px; padding: 8px 14px; }
.free-day .t { grid-column: 1 / -1; font-size: 16px; }
.free-day .go { font-size: 16px; font-family: var(--display); font-weight: 700; color: var(--orange-deep); }

/* ===== Design polish (Oct 2026) ===== */
.chance { display: inline-flex; align-items: center; gap: 6px; }
.cdot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.date-btn .i { width: 22px; height: 22px; margin-right: 8px; color: var(--orange-deep); }