/* The booking form and the booked page, the same in every theme. Colours come from the colour set's variables.
   Themes load after this and style .choices and h2 too, so these selectors start at .site .booking to win. */
.site button.btn { border: 0; cursor: pointer; font-family: inherit; }
.question form { display: contents; }

.booking-header { background: var(--brand); color: #fff; }
.booking-header .wrap { padding-top: 18px; padding-bottom: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.site .booking-header a { color: #fff; text-decoration: none; }
.booking-header .home { font-weight: 800; font-size: 22px; }

.booking { max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; display: flex; flex-direction: column; gap: 20px; }
.booking-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px; }
.site .booking h1 { margin: 0 0 8px; font-size: clamp(30px, 5vw, 42px); line-height: 1.1; letter-spacing: -0.01em; }
.site .booking h2 { margin: 0 0 14px; font-size: 22px; line-height: 1.2; }
.site .booking .hint, .booking-note, .site .booking .fine { margin: 0; font-size: 15px; color: var(--muted); }

.booking-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.booking-bars span { height: 6px; border-radius: 3px; background: var(--line2); }
.booking-bars span.on { background: var(--brand); }
.booking-form:not(.is-stepped) .booking-bars { display: none; }
.booking-form.is-stepped .booking-step:not(.is-current) { display: none; }

.booking-step { margin: 0 0 28px; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.booking-form.is-stepped .booking-step { margin-bottom: 0; }
.step-count { margin: 0; font-size: 15px; color: var(--muted); }
.booking-step h1 { margin: 0; }

.booking-field { display: flex; flex-direction: column; gap: 6px; }
.booking-field > label, .booking-field > .label { font-weight: 700; }
.site .booking input[type=text], .site .booking input[type=tel], .site .booking input[type=email], .site .booking input[type=number], .site .booking input[type=date], .site .booking textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid var(--line2); border-radius: 10px; background: #fff; color: var(--ink); font-size: 16px;
}
.site .booking input:focus-visible, .site .booking textarea:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.site .booking input.has-problem { border-color: var(--warning); }

.site .booking .choices { display: grid; grid-template-columns: 1fr; gap: 10px; }
.site .booking .choices.two { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.site .booking .choice { display: block; cursor: pointer; position: relative; }
.site .booking .choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.site .booking .choice > span { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 56px; height: 100%; padding: 12px 16px; border-radius: 12px; border: 2px solid var(--line2); background: #fff; color: var(--ink); }
.site .booking .choice strong { font-size: 18px; }
.site .booking .choice small { font-size: 15px; font-weight: 400; color: var(--muted); }
.site .booking .choice input:checked + span { background: var(--tint); border-color: var(--brand); }
.site .booking .choice input:checked + span small { color: var(--ink); }
.site .booking .choice input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }

.site .booking .booking-note { padding: 12px 14px; border-radius: 10px; background: var(--warning-tint); color: var(--ink); font-size: 16px; }
.site .booking .booking-note[hidden] { display: none; }
.booking-note small { display: block; font-size: 15px; color: var(--muted); }

.booking-nav { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.booking-nav .btn { flex: 1; min-height: 52px; padding: 14px 20px; border-radius: 12px; font-size: 17px; font-weight: 700; }
.booking-nav .btn[disabled], .booking .btn[disabled] { background: var(--line2); color: var(--muted); cursor: not-allowed; }
.booking-form:not(.is-stepped) [data-stepped-only] { display: none; }
.link-button { background: none; border: 0; padding: 12px 4px; color: var(--brand); font: inherit; font-weight: 700; cursor: pointer; }
.link-button.inline { padding: 0; font-weight: 400; text-decoration: underline; }
.channel-line { margin: 0; font-size: 15px; color: var(--muted); }

.booked-panel { background: #fff; border: 3px solid var(--brand); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.booked-panel.is-problem { border-color: var(--warning); background: var(--warning-tint); }
.booked-panel.is-confirmed { background: var(--tint); }
.booked-panel p { margin: 0; }
.booked-panel .big { font-size: 22px; line-height: 1.3; }
.booked-panel .ticks-line { font-size: 15px; font-weight: 700; color: var(--brand); }
.booked-panel .small { font-size: 15px; color: var(--muted); }
.booked-panel form { display: contents; }
.booked-panel .button-to { display: inline; }
.fix-number { display: flex; flex-wrap: wrap; gap: 10px; }
.fix-number input { flex: 1 1 200px; width: auto !important; }
.fix-number .btn { min-height: 52px; padding: 13px 20px; border-radius: 10px; font-weight: 700; }

/* Shown after about a minute with no reply. No script, because a refresh mustn't start the wait again. */
.not-there { max-height: 0; overflow: hidden; animation: not-there-shows 0.3s 45s forwards; }
@keyframes not-there-shows { to { max-height: 300px; overflow: visible; } }

.sending-dot { display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -2px; border-radius: 50%; border: 3px solid var(--tint); border-top-color: var(--brand); animation: sending-spin 0.9s linear infinite; }
@keyframes sending-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sending-dot { animation: none; } .not-there { animation-duration: 0s; } }

/* The booked page is held while the message goes, for up to about 8 seconds */
.booked[data-booked-page-state-value=sending]:not(.held-long-enough) .after-hold { display: none; }

.timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.timeline li { display: flex; gap: 14px; }
.timeline .mark { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line2); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.timeline .mark.done { background: var(--brand); border-color: var(--brand); color: #fff; }
.timeline .mark.now { border-color: var(--brand); color: var(--brand); }
.timeline .mark.warn { border-color: var(--warning); background: var(--warning-tint); color: var(--ink); }
.timeline strong { display: block; }
.timeline span.line { font-size: 16px; color: var(--muted); }

/* The page a text links to: a big button for each answer */
.answer-buttons { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.answer-buttons .btn { width: 100%; min-height: 52px; padding: 14px 20px; border-radius: 12px; font-size: 17px; font-weight: 700; }

/* The follow-up chat, on the same page, carrying on from the button */
.chat-lines { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.chat-line { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.chat-line.from-agent { align-self: flex-start; background: var(--tint); color: var(--ink); }
.chat-line.from-customer { align-self: flex-end; background: var(--brand); color: #fff; }
.chat-line.is-typing { color: var(--muted); font-size: 15px; }
.chat-line.is-typing .sending-dot { margin-right: 0; }
.chat .answer-buttons { margin: 0 0 12px; }
.chat .answer-buttons .button-to { display: block; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.chat-form textarea { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 13px 14px; border: 2px solid var(--line2); border-radius: 12px; font: inherit; font-size: 17px; resize: vertical; }
.chat-form .btn { flex: none; min-height: 52px; padding: 13px 20px; border-radius: 12px; font-weight: 700; }
.chat-form .btn[disabled] { opacity: 0.5; }
.chat .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }