/* =========================================================================
* wdz-checkout — Form module (Phase 4). Colors via --wdz-f-primary/-accent.
* ========================================================================= */
.wdz-form[hidden] { display: none !important; }
.wdz-form {
--wdz-f-primary: #0F3460; --wdz-f-accent: #C9A227;
position: fixed; inset: 0; z-index: 99998; display: flex; align-items: center; justify-content: center; font-family: var(--wdz-font, inherit);
max-width: 100vw; /* 1.8.19: a host page wider than the screen can't push the panel's right edge off-screen */
}
.wdz-form__overlay { position: absolute; inset: 0; background: rgba(10,18,35,0.72); }
.wdz-form__dialog {
position: relative; z-index: 1; display: flex; gap: 0;
width: 920px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px);
background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.32);
}
.wdz-form__close { position: absolute; top: 10px; right: 14px; z-index: 3; width: 34px; height: 34px; border: 0; background: transparent; font-size: 28px; line-height: 1; color: #9aa3ad; cursor: pointer; border-radius: 8px; }
.wdz-form__close:hover { background: #f1f3f5; color: #333; }
.wdz-form__main { flex: 1; padding: 30px 30px 22px; overflow-y: auto; }
/* Progress */
.wdz-form__progress { display: flex; gap: 6px; list-style: none; margin: 0 0 6px; padding: 0; }
.wdz-form__progress li { height: 6px; flex: 1; border-radius: 999px; background: #e3e6ea; }
.wdz-form__progress li.is-active { background: var(--wdz-f-accent); }
.wdz-form__progress li.is-done { background: var(--wdz-f-primary); }
.wdz-form__steplabel { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #8b94a0; margin: 0 0 18px; }
/* Steps */
.wdz-form__step { display: none; }
.wdz-form__step.is-active { display: block; }
.wdz-form__steptitle { font-size: 18px; margin: 0 0 16px; color: #1f2733; }
.wdz-form__date { display: flex; align-items: center; gap: 10px; background: rgba(15,52,96,0.05); border-radius: 9px; padding: 10px 14px; margin-bottom: 16px; font-weight: 600; color: var(--wdz-f-primary); }
.wdz-form__link { border: 0; background: none; color: var(--wdz-f-accent); font-weight: 700; cursor: pointer; text-decoration: underline; margin-left: auto; }
.wdz-form__field { margin-bottom: 14px; }
.wdz-form__field-row { display: flex; gap: 12px; }
.wdz-form__field-row .wdz-form__field { flex: 1; }
.wdz-form__field-row .wdz-form__field--state { flex: 0 0 76px; }
.wdz-form__field label { display: block; font-size: 13px; font-weight: 600; color: #4a5562; margin-bottom: 6px; }
.wdz-form__field input, .wdz-form__field select {
width: 100%; box-sizing: border-box; padding: 11px 12px; font-size: 16px; border: 2px solid #d7dbe0; border-radius: 9px; background: #fff; color: #1f2733;
}
.wdz-form__field input:focus, .wdz-form__field select:focus { outline: none; border-color: var(--wdz-f-primary); box-shadow: 0 0 0 3px rgba(15,52,96,0.12); }
.wdz-form__field input[aria-invalid="true"] { border-color: #c8102e; }
.wdz-form__hint { font-size: 12px; margin: 5px 0 0; color: #b07e00; }
.wdz-form__hint button { border: 0; background: none; color: var(--wdz-f-primary); text-decoration: underline; cursor: pointer; font-size: 12px; }
.wdz-form__toggle, .wdz-form__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.wdz-form__choice, .wdz-form__chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 2px solid #e3e6ea; border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 600; color: #1f2733; }
.wdz-form__choice:has(input:checked), .wdz-form__chip:has(input:checked) { border-color: var(--wdz-f-primary); background: rgba(15,52,96,0.04); }
.wdz-form__chip input, .wdz-form__choice input { accent-color: var(--wdz-f-primary); }
.wdz-form__required { font-size: 10px; background: #ffd34d; color: #5c4500; padding: 1px 6px; border-radius: 4px; vertical-align: middle; }
.wdz-form__required[hidden] { display: none; }
.wdz-form__waiver { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 2px solid #e3e6ea; border-radius: 10px; margin-bottom: 16px; cursor: pointer; font-size: 14px; }
.wdz-form__waiver input { margin-top: 3px; accent-color: var(--wdz-f-primary); }
.wdz-form__tips { display: flex; gap: 8px; flex-wrap: wrap; }
.wdz-form__tip { padding: 9px 16px; border: 2px solid #e3e6ea; border-radius: 9px; background: #fff; font-weight: 700; cursor: pointer; }
.wdz-form__tip.is-active { border-color: var(--wdz-f-primary); background: rgba(15,52,96,0.05); color: var(--wdz-f-primary); }
.wdz-form__tip-custom { margin-top: 10px; }
.wdz-form__tip-custom[hidden] { display: none; }
/* Summary */
.wdz-form__summary { margin: 0 0 16px; }
.wdz-form__summary > div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #eef0f3; font-size: 14px; }
.wdz-form__summary dt { color: #6b7480; margin: 0; }
.wdz-form__summary dd { margin: 0; font-weight: 600; color: #1f2733; }
.wdz-form__summary .is-total { font-size: 16px; }
.wdz-form__summary .is-total dt, .wdz-form__summary .is-total dd { color: var(--wdz-f-primary); font-weight: 800; }
.wdz-form__summary .is-note dd { color: #6b7480; font-weight: 500; font-style: italic; }
/* Editable line items: name on the left; qty stepper + price + remove on the right */
.wdz-form__summary .wdz-form__sumline dt { color: #1f2733; font-weight: 600; flex: 1 1 auto; }
.wdz-form__summary .wdz-form__sumline dd { display: inline-flex; align-items: center; gap: 12px; }
.wdz-form__sumqty { display: inline-flex; align-items: center; border: 1px solid #d7dbe0; border-radius: 8px; overflow: hidden; }
.wdz-form__qstep { width: 28px; height: 28px; border: 0; background: #f4f6fb; color: var(--wdz-f-primary, #0F3460); font-size: 16px; line-height: 1; cursor: pointer; }
.wdz-form__qstep:hover { background: #e7ebf3; }
.wdz-form__qval { min-width: 26px; text-align: center; font-size: 14px; font-weight: 600; }
.wdz-form__sumprice { min-width: 64px; text-align: right; }
.wdz-form__remove { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: #9aa3b0; font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; }
.wdz-form__remove:hover { background: #fdecec; color: #c0392b; }
.wdz-form__sumempty dt { color: #9aa3b0; font-style: italic; }
/* Hide the booking plugin's redundant floating cart widget (.cartInfo — fixed top-right "N items").
The header cart icon already opens our checkout form, and since we neutralize
the booking plugin's native popover this floating one does nothing on click. This CSS loads
site-wide (the form module is site-wide), so it's hidden everywhere. */
.cartInfo { display: none !important; }
.wdz-form__nopay { display: flex; align-items: center; gap: 10px; justify-content: center; text-align: left; background: #e8f6ec; color: #0a7f3f; border: 1px solid #b6e3c4; border-radius: 10px; padding: 12px 14px; margin: 16px 0; }
.wdz-form__nopay-text { display: flex; flex-direction: column; line-height: 1.3; }
.wdz-form__nopay-main { font-weight: 800; }
.wdz-form__nopay-sub { font-weight: 500; font-size: 12px; opacity: .85; }
.wdz-form__footer { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
.wdz-form__btn { font-size: 15px; font-weight: 700; padding: 13px 22px; border-radius: 10px; border: 0; cursor: pointer; }
.wdz-form__btn--primary { margin-left: auto; background: var(--wdz-f-primary); color: var(--wdz-f-primary-ink, #fff); }
.wdz-form__btn--submit { margin-left: auto; background: var(--wdz-f-accent); color: var(--wdz-f-accent-ink, #1a1a1a); }
.wdz-form__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.wdz-form__btn--ghost { background: transparent; color: #6b7480; }
/* Upsell rail (desktop) */
.wdz-form__upsell { width: 280px; flex: none; background: #f7f8fa; border-left: 1px solid #eceef1; padding: 30px 22px; overflow-y: auto; }
.wdz-form__upsell h4 { margin: 0 0 14px; color: var(--wdz-f-primary); font-size: 15px; }
.wdz-form__upsell-card { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #e7eaee; border-radius: 9px; padding: 8px; margin-bottom: 10px; }
.wdz-form__upsell-card img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex: none; }
.wdz-form__upsell-name { font-size: 13px; font-weight: 600; color: #1f2733; }
.wdz-form__upsell-add { margin-left: auto; border: 0; background: var(--wdz-f-accent); color: var(--wdz-f-accent-ink, #1a1a1a); font-weight: 700; border-radius: 7px; padding: 6px 10px; cursor: pointer; font-size: 12px; }
.wdz-form__upsell-empty { font-size: 13px; color: #8b94a0; }
/* Mobile CTA */
.wdz-form__cta { display: none; }
@media (max-width: 1023px) { .wdz-form__upsell { display: none; } .wdz-form__dialog { width: 600px; } }
@media (max-width: 768px) {
.wdz-form__dialog { width: 100%; max-width: 100vw; height: 100%; max-height: 100vh; border-radius: 0; flex-direction: column; }
.wdz-form__main { padding: 24px 18px 90px; }
.wdz-form__footer { display: none; }
.wdz-form__cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; align-items: center; gap: 12px; background: #fff; border-top: 1px solid #e3e6ea; padding: 12px 16px; max-width: 100vw; box-sizing: border-box; }
.wdz-form__cta-total { font-weight: 800; color: var(--wdz-f-primary); }
.wdz-form__cta .wdz-form__btn { margin-left: auto; }
/* The footer is hidden on phones, so the bar carries the step Back button too. */
.wdz-form__cta .wdz-form__btn--ghost { margin-left: 0; padding: 13px 10px; }
.wdz-form__cta [data-wdz-fback][hidden] { display: none; }
.wdz-form__btn, .wdz-form__choice, .wdz-form__chip, .wdz-form__tip, .wdz-form__close { min-height: 44px; }
}
/* a11y (Phase 5) — visible focus */
.wdz-form :focus-visible { outline: 3px solid var(--wdz-f-accent); outline-offset: 2px; border-radius: 6px; }
/* Submit result panel + pending state (Phase 4 real submit) */
.wdz-checkout-form__result { margin: 0 0 14px; padding: 12px 14px; border-radius: 9px; font-size: 14px; line-height: 1.4; }
.wdz-checkout-form__result.is-success { background: #e7f7ec; color: #18603a; border: 1px solid #b6e4c4; }
.wdz-checkout-form__result.is-error { background: #fdecec; color: #8a1c1c; border: 1px solid #f1bcbc; }
.wdz-checkout-form__result strong { display: inline-block; margin-bottom: 2px; }
/* 1.8.13: after a booking went through only the result is shown (no review of an emptied cart, nothing to book again) */
.wdz-form.is-submitted .wdz-form__form, .wdz-form.is-submitted .wdz-form__progress, .wdz-form.is-submitted .wdz-form__steplabel,
.wdz-form.is-submitted .wdz-form__tocart, .wdz-form.is-submitted .wdz-form__cta, .wdz-form.is-submitted .wdz-form__upsell { display: none !important; }
.wdz-form__btn.is-pending, [data-wdz-fsubmit].is-pending, [data-wdz-fcta-btn].is-pending { opacity: .7; cursor: progress; pointer-events: none; }
/* Inline validation hints (Phase 6.2 — explain why Continue is unavailable) */
.wdz-form__hint.wdz-form__hint--error { color: #8a1c1c; font-size: 13px; margin: 4px 0 0; line-height: 1.35; }
.wdz-form__field input:not([type=checkbox]):not([type=radio]):invalid:not(:placeholder-shown),
.wdz-form__field:has(.wdz-form__hint--error:not([hidden])) input { border-color: #d04848; }
.wdz-form__btn.is-disabled,
[data-wdz-fnext].is-disabled,
[data-wdz-fcta-btn].is-disabled { background: #c6cad1 !important; color: #5f6772 !important; cursor: not-allowed; box-shadow: none !important; }
/* =========================================================================
* Phase 6.4 — Design polish
* Subtle motion, refined typography, more confident button affordances,
* stronger visual hierarchy on the summary. Tighter spacing without losing
* the existing 44px touch targets on mobile.
* ========================================================================= */
/* Modal entrance — match the gate's polished feel */
.wdz-form__overlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.wdz-form__dialog { animation: wdz-form-in 0.24s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes wdz-form-in {
from { opacity: 0; transform: translateY(14px) scale(0.985); }
to { opacity: 1; transform: none; }
}
/* Smooth fade-in when a step becomes active */
.wdz-form__step.is-active { animation: wdz-step-in 0.22s ease-out; }
@keyframes wdz-step-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* Tighter, more confident step heading */
.wdz-form__steptitle {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0 0 18px;
}
.wdz-form__steplabel {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
}
/* Premium date pill on step 1 */
.wdz-form__date {
background: linear-gradient(135deg, rgba(15,52,96,0.06) 0%, rgba(201,162,39,0.05) 100%);
border: 1px solid rgba(15,52,96,0.08);
padding: 12px 16px;
border-radius: 10px;
font-size: 14px;
}
.wdz-form__date::before {
content: "";
display: inline-block; width: 16px; height: 16px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain; background-repeat: no-repeat;
margin-right: 4px; vertical-align: -3px; opacity: 0.8;
}
/* Refined input fields — slightly softer borders + lift on focus */
.wdz-form__field input, .wdz-form__field select {
border-width: 1.5px; border-color: #d9dde3;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wdz-form__field input:hover:not(:focus), .wdz-form__field select:hover:not(:focus) { border-color: #b9c0c8; }
.wdz-form__field input:focus, .wdz-form__field select:focus {
box-shadow: 0 0 0 3.5px rgba(15,52,96,0.14);
}
/* Buttons — primary gets a real shadow and a lift-on-hover */
.wdz-form__btn {
transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
letter-spacing: 0.01em;
}
.wdz-form__btn--primary, .wdz-form__btn--submit {
box-shadow: 0 4px 14px rgba(15,52,96,0.18), 0 1px 2px rgba(15,52,96,0.06);
}
.wdz-form__btn--submit { box-shadow: 0 4px 14px rgba(201,162,39,0.32), 0 1px 2px rgba(0,0,0,0.04); }
.wdz-form__btn--primary:hover:not(.is-disabled):not(:disabled),
.wdz-form__btn--submit:hover:not(.is-disabled):not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(15,52,96,0.24), 0 2px 4px rgba(15,52,96,0.08);
}
.wdz-form__btn--submit:hover:not(.is-disabled):not(:disabled) {
box-shadow: 0 8px 22px rgba(201,162,39,0.4), 0 2px 4px rgba(0,0,0,0.06);
}
.wdz-form__btn--primary:active, .wdz-form__btn--submit:active { transform: translateY(0); }
.wdz-form__btn--ghost:hover { background: #f1f3f5; color: #1f2733; }
/* Tip chips — selected feels more confident, subtle hover */
.wdz-form__tip { transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; }
.wdz-form__tip:hover:not(.is-active) { border-color: #b9c0c8; }
.wdz-form__tip.is-active {
border-color: var(--wdz-f-primary);
background: var(--wdz-f-primary);
color: #fff;
box-shadow: 0 4px 12px rgba(15,52,96,0.18);
}
/* Waiver card — subtle accent stripe on the left */
.wdz-form__waiver {
position: relative; overflow: hidden;
transition: border-color 0.15s ease, background 0.15s ease;
}
.wdz-form__waiver::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: var(--wdz-f-accent); opacity: 0.6;
transition: opacity 0.15s ease;
}
.wdz-form__waiver:hover { border-color: #b9c0c8; }
.wdz-form__waiver:has(input:checked) {
border-color: var(--wdz-f-primary);
background: rgba(15,52,96,0.03);
}
.wdz-form__waiver:has(input:checked)::before { opacity: 1; background: var(--wdz-f-primary); }
/* Review summary — stronger total emphasis, cleaner rows */
.wdz-form__summary > div { padding: 11px 0; font-size: 14.5px; }
.wdz-form__summary > div:last-child { border-bottom: 0; }
.wdz-form__summary .is-total {
margin-top: 4px; padding-top: 14px;
border-top: 1.5px solid #1f2733; border-bottom: 0;
font-size: 17px;
}
/* "No payment" badge — softer, more inviting */
.wdz-form__nopay {
background: linear-gradient(180deg, #effaf2 0%, #e3f4e9 100%);
border-color: #b6e3c4;
font-weight: 700;
letter-spacing: 0.01em;
box-shadow: 0 1px 2px rgba(10,127,63,0.06);
}
/* Result panel: success state with checkmark icon */
.wdz-checkout-form__result.is-success {
padding: 18px 18px 18px 56px;
position: relative;
background: linear-gradient(180deg, #effaf2 0%, #e3f4e9 100%);
border-color: #b6e3c4;
box-shadow: 0 1px 2px rgba(10,127,63,0.06);
}
.wdz-checkout-form__result.is-success::before {
content: "";
position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
width: 28px; height: 28px; border-radius: 50%;
background: #18a85a url("data:image/svg+xml;utf8,") center / 16px no-repeat;
box-shadow: 0 2px 8px rgba(24,168,90,0.32);
}
.wdz-checkout-form__result.is-success strong { font-size: 16px; }
/* Error panel: small alert icon */
.wdz-checkout-form__result.is-error {
padding: 14px 14px 14px 50px;
position: relative;
}
.wdz-checkout-form__result.is-error::before {
content: "!"; font-weight: 800;
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
width: 24px; height: 24px; border-radius: 50%;
background: #d04848; color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 16px;
}
/* Disabled-look button — softer gray, gentler */
.wdz-form__btn.is-disabled,
[data-wdz-fnext].is-disabled,
[data-wdz-fcta-btn].is-disabled {
background: #e2e5ea !important; color: #8a93a0 !important;
transform: none !important;
}
/* Refined close X */
.wdz-form__close { transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; }
.wdz-form__close:hover { transform: scale(1.06); }
/* Upsell rail empty state — feels intentional, not forgotten */
.wdz-form__upsell-empty {
padding: 14px; background: #fff; border: 1px dashed #d9dde3; border-radius: 9px;
text-align: center; font-style: italic;
}
/* Mobile sticky CTA — subtle elevation */
@media (max-width: 768px) {
.wdz-form__cta { box-shadow: 0 -4px 14px rgba(15,52,96,0.06); }
.wdz-form__main { padding-top: 28px; }
}
/* Routed-back banner — a touch softer than the error panel */
[data-wdz-frouted-banner].wdz-checkout-form__result {
padding-left: 14px;
}
[data-wdz-frouted-banner].wdz-checkout-form__result::before { display: none; }
/* Try-again row inside the error panel */
.wdz-form__retry-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.wdz-form__btn--retry { background: var(--wdz-f-primary); color: #fff; padding: 9px 16px; font-size: 14px; border-radius: 8px; }
.wdz-form__retry-or { color: #6b7480; font-size: 13px; }
.wdz-form__phonelink { color: var(--wdz-f-primary); font-weight: 700; text-decoration: none; }
.wdz-form__phonelink:hover { text-decoration: underline; }
.wdz-form__statuscode { color: #8a1c1c; opacity: 0.75; font-weight: 500; font-size: 12px; margin-left: 6px; }
/* =========================================================================
* Phase 6.6 — Modal polish round 2
* (1) hide the upsell rail when empty + narrow the modal so the main column
* reads as the intentional center of attention, not the left half of a
* two-column layout with nothing on the right.
* (2) quiet the surface/choice chips: kill the redundant native radio dot,
* let the chip border do the work.
* (3) cleaner Change link on the date pill, tighter review summary spacing.
* (4) success state: hide Back/coupon noise so the moment lands clean.
* ========================================================================= */
/* (1) Empty-rail collapse — uses :has() (supported in all modern browsers) */
.wdz-form__dialog:has(.wdz-form__upsell-empty) {
width: 720px;
}
.wdz-form__dialog:has(.wdz-form__upsell-empty) .wdz-form__upsell { display: none; }
/* (2) Chip + choice — hide the native radio, the border + check is the cue */
.wdz-form__chip input[type=radio],
.wdz-form__chip input[type=checkbox],
.wdz-form__choice input[type=radio],
.wdz-form__choice input[type=checkbox] {
position: absolute;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
}
.wdz-form__chip, .wdz-form__choice {
padding: 10px 16px;
border-color: #d9dde3;
}
.wdz-form__chip:hover:not(:has(input:checked)),
.wdz-form__choice:hover:not(:has(input:checked)) {
border-color: #b9c0c8;
background: #f8f9fb;
}
.wdz-form__chip:has(input:checked),
.wdz-form__choice:has(input:checked) {
background: var(--wdz-f-primary);
border-color: var(--wdz-f-primary);
color: #fff;
box-shadow: 0 4px 12px rgba(15,52,96,0.16);
}
/* Surface "REQUIRED" pill — slightly softer */
.wdz-form__required {
background: rgba(201,162,39,0.18);
color: #6b4f00;
border: 1px solid rgba(201,162,39,0.32);
font-weight: 700;
}
/* (3) Date pill Change link — quieter */
.wdz-form__date .wdz-form__link {
font-size: 12px;
font-weight: 700;
text-decoration: none;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.85;
}
.wdz-form__date .wdz-form__link:hover { opacity: 1; text-decoration: underline; }
/* The date takes the wrapping; Change never breaks mid-word ("CHANG E" on phones, seen in testing). */
.wdz-form__date [data-wdz-fdate-label] { min-width: 0; flex: 1 1 auto; }
.wdz-form__date .wdz-form__link { white-space: nowrap; flex: 0 0 auto; }
/* (3) Review summary — tighter, more confident grouping */
.wdz-form__summary { margin-bottom: 18px; }
.wdz-form__summary > div { padding: 12px 0; }
.wdz-form__summary > div:first-child { padding-top: 4px; }
.wdz-form__summary .is-note dd { font-size: 13px; }
/* Coupon field — group as "Have a coupon?" to feel intentional */
.wdz-form__coupon { background: #f7f8fa; border: 1px dashed #d9dde3; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.wdz-form__coupon label {
color: #5f6772; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
}
.wdz-form__coupon input { background: #fff; border-color: #e3e6ea; }
/* (4) Success state: hide step controls so the celebration lands clean */
.wdz-form__main:has(.wdz-checkout-form__result.is-success) .wdz-form__footer,
.wdz-form__main:has(.wdz-checkout-form__result.is-success) [data-wdz-fback],
.wdz-form__main:has(.wdz-checkout-form__result.is-success) .wdz-form__coupon,
.wdz-form__main:has(.wdz-checkout-form__result.is-success) .wdz-form__nopay {
display: none !important;
}
/* And the success panel itself should breathe a touch more on success */
.wdz-form__main:has(.wdz-checkout-form__result.is-success) .wdz-form__summary {
margin-top: 10px;
opacity: 0.92;
}
/* Modal close button — softer interaction */
.wdz-form__close { top: 12px; right: 14px; color: #b0b9c4; }
.wdz-form__close:hover { background: #f5f6f8; color: #2b3441; }
/* Slight gradient on the modal top so the header feels grounded */
.wdz-form__main {
background: linear-gradient(180deg, #fdfdfe 0%, #fff 80px);
}
/* Mobile: narrower-modal rule shouldn't fight full-screen mobile layout */
@media (max-width: 768px) {
.wdz-form__dialog:has(.wdz-form__upsell-empty) { width: 100%; }
}
/* 1.8.10: while the platform asks for a required choice (banner, Wet/Dry), nothing of ours sits on top of it. */
html.wdz-ioopt-open .wdz-added-bar,
html.wdz-ioopt-open .wdz-browse-fab,
html.wdz-ioopt-open .wdz-gate-sticky { display: none !important; }
.wdz-optline { display: block; font-size: .85em; font-weight: 400; opacity: .75; margin-top: 2px; }
.wdz-itemcal__addnote { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff4e5; color: #7a4100; font-size: 14px; }
.wdz-itemcal__addnote[hidden] { display: none; }
/* "Added to your cart" bar on item pages (replaces the platform's cart panel). */
.wdz-added-bar[hidden] { display: none !important; }
.wdz-added-bar {
position: fixed; z-index: 2147483000; top: 16px; left: 50%; transform: translateX(-50%);
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
padding: 10px 12px 10px 18px; border-radius: 14px;
background: #1f2733; color: #fff; box-shadow: 0 10px 30px rgba(10, 18, 35, .28);
font: 600 15px/1.3 inherit; font-family: var(--wdz-font, inherit);
}
.wdz-added-bar__msg::before { content: "\2713"; display: inline-block; margin-right: 8px; color: #4ade80; font-weight: 800; }
.wdz-added-bar__btn {
appearance: none; border: 0; border-radius: 10px; padding: 9px 14px; min-height: 40px;
font: inherit; font-weight: 700; cursor: pointer; background: rgba(255, 255, 255, .12); color: #fff;
}
.wdz-added-bar__btn--main { background: var(--wdz-f-accent, #f5b400); color: var(--wdz-f-accent-ink, #1f2733); padding-left: 20px; padding-right: 20px; }
.wdz-added-bar__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 480px) { .wdz-added-bar { top: 10px; width: calc(100vw - 20px); padding: 10px; } .wdz-added-bar__msg { width: 100%; text-align: center; } }
.wdz-form__optional { font-weight: 400; color: #8b94a0; font-size: .92em; }
/* =====================================================================
Cart summary drawer (cart icon / Book Now once the cart has items).
Items, quantity, remove, subtotal, then a big "Continue shopping" and a
quieter "Checkout" (user testing: keep people shopping).
===================================================================== */
.wdz-cart[hidden] { display: none !important; }
.wdz-cart { position: fixed; inset: 0; z-index: 2147482900; font-family: var(--wdz-font, inherit); color: #1f2733; }
html.wdz-cart-open, html.wdz-cart-open body { overflow: hidden; }
.wdz-cart__overlay { position: absolute; inset: 0; background: rgba(10, 18, 35, .55); }
.wdz-cart__panel {
position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); box-sizing: border-box;
display: flex; flex-direction: column; background: #fff; box-shadow: -12px 0 40px rgba(10, 18, 35, .25);
padding: 20px 20px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto;
}
.wdz-cart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.wdz-cart__head h2 { margin: 0; font-size: 22px; line-height: 1.2; color: #1f2733; }
.wdz-cart__x { width: 44px; height: 44px; border: 0; border-radius: 10px; background: #f1f3f5; color: #1f2733; font-size: 26px; line-height: 1; cursor: pointer; }
.wdz-cart__date { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #f4f6fa; font-size: 14px; }
.wdz-cart__link { border: 0; background: none; padding: 0 0 0 6px; font: inherit; font-weight: 700; color: var(--wdz-f-primary, #0f3460); text-decoration: underline; cursor: pointer; }
.wdz-cart__list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.wdz-cart__row { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #e8ebf0; }
.wdz-cart__img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: #eef1f5; display: block; }
.wdz-cart__name { margin: 0 0 6px; font-weight: 700; font-size: 15px; line-height: 1.3; }
.wdz-cart__qty { display: inline-flex; align-items: center; border: 1px solid #d7dbe0; border-radius: 10px; overflow: hidden; }
.wdz-cart__qty button { width: 36px; height: 36px; border: 0; background: #fff; font-size: 18px; cursor: pointer; color: #1f2733; }
.wdz-cart__qty span { min-width: 28px; text-align: center; font-weight: 700; }
.wdz-cart__right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.wdz-cart__price { font-weight: 800; font-size: 16px; }
.wdz-cart__remove { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 13px; color: #b42318; text-decoration: underline; cursor: pointer; }
.wdz-cart__empty { text-align: center; padding: 30px 0; }
.wdz-cart__foot { border-top: 2px solid #1f2733; padding-top: 14px; margin-top: 8px; display: grid; gap: 10px; }
.wdz-cart__foot[hidden], .wdz-cart__empty[hidden], .wdz-cart__date[hidden] { display: none !important; }
.wdz-cart__total { display: flex; justify-content: space-between; margin: 0; font-size: 18px; }
.wdz-cart__len { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: 14px; opacity: .85; }
.wdz-cart__len[hidden] { display: none; }
.wdz-cart__note { margin: 0; font-size: 13px; color: #5f6772; }
.wdz-cart__btn {
display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px;
border: 2px solid #d7dbe0; background: #fff; color: #1f2733; font: inherit; font-weight: 700; font-size: 16px;
text-decoration: none; cursor: pointer;
}
.wdz-cart__btn--main { min-height: 54px; border-color: transparent; background: var(--wdz-f-accent, #f5b400); color: var(--wdz-f-accent-ink, #1f2733); font-size: 17px; }
.wdz-cart button:focus-visible, .wdz-cart a:focus-visible { outline: 3px solid var(--wdz-f-primary, #0f3460); outline-offset: 2px; }
@media (max-width: 480px) { .wdz-cart__panel { padding: 16px 16px calc(14px + env(safe-area-inset-bottom)); } .wdz-cart__row { grid-template-columns: 56px 1fr auto; } .wdz-cart__img { width: 56px; height: 56px; } }
@media (prefers-reduced-motion: no-preference) { .wdz-cart:not([hidden]) .wdz-cart__panel { animation: wdzCartIn .22s ease-out; } }
@keyframes wdzCartIn { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.wdz-form__fee { font-style: normal; font-weight: 700; font-size: .85em; opacity: .8; }
.wdz-form__waiver-why { display: inline-block; margin-top: 4px; color: #5f6772; font-size: 13px; line-height: 1.45; font-weight: 400; }
/* "Back to cart" from checkout (user testing); what was typed stays in the form */
.wdz-form__tocart { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; padding: 4px 0; min-height: 32px; background: none; border: 0; color: var(--wdz-f-primary, #0f3460); font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wdz-form__tocart:focus-visible { outline: 3px solid var(--wdz-f-primary, #0f3460); outline-offset: 2px; border-radius: 4px; }
/* 1.8.8 — themes that style button { display: ... } must not undo [hidden] in our UI
(the submit button showed on every step and Continue on the last). */
.wdz-form button[hidden], .wdz-form label[hidden], .wdz-form .wdz-form__field[hidden], .wdz-form p[hidden], .wdz-form em[hidden], .wdz-cart button[hidden], .wdz-cart p[hidden], .wdz-cart div[hidden], .wdz-cart em[hidden], .wdz-added-bar[hidden] { display: none !important; }
/* 1.8.8 — "your full total is on the next page" note (cart + review) */
.wdz-form__quotenote, .wdz-cart__quotenote { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #f3f6fb; color: #1f2733; font-size: 13.5px; line-height: 1.45; }
.wdz-form__summary .is-qnote dd { flex: 1 1 100%; font-weight: 500; }
.wdz-form__coupon-hint { margin: 6px 0 0; color: #5b6472; font-size: 12.5px; }
.wdz-form__summary .is-saving dd { color: #127a3a; }
.wdz-cart__price.is-tbd { font-size: 13px; font-weight: 600; color: #5b6472; }
/* 1.8.8 — weekend extension toggle (cart drawer + review step) */
.wdz-ext { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; padding: 12px; border: 2px solid #e3e6ea; border-radius: 12px; background: #fff; text-align: left; cursor: pointer; color: #1f2733; }
.wdz-ext input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--wdz-f-primary, #0f3460); }
.wdz-ext strong { display: block; font-size: 15px; color: var(--wdz-f-primary, #0f3460); }
.wdz-ext span { display: block; font-size: 13px; line-height: 1.4; }
.wdz-ext.is-on { border-color: var(--wdz-f-primary, #0f3460); }
.wdz-ext__msg[hidden] { display: none !important; }
.wdz-ext__msg { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: #b42318; }
.wdz-cart__ext { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: 14px; }
/* 1.8.8 — the account's own delivery options as cards */
.wdz-form__dopts { display: grid; gap: 8px; }
.wdz-form__dopt { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 2px solid #e3e6ea; border-radius: 10px; background: #fff; cursor: pointer; color: #1f2733; font-size: 14px; line-height: 1.35; }
.wdz-form__dopt input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--wdz-f-primary, #0f3460); }
.wdz-form__dopt-l { flex: 1 1 auto; }
.wdz-form__dopt-p { flex: none; font-weight: 700; }
.wdz-form__dopt-p.is-saving { color: #127a3a; }
.wdz-form__dopt:has(input:checked) { border-color: var(--wdz-f-primary, #0f3460); background: color-mix(in srgb, var(--wdz-f-primary, #0f3460) 6%, #fff); }
#wdz-form .wdz-form__dopt { display: flex !important; align-items: center; gap: 10px; margin: 0; }
#wdz-form .wdz-form__dopt input { margin: 0 2px 0 0 !important; }
#wdz-form .wdz-form__dopt-p { margin-left: 8px; white-space: nowrap; }
/* 1.8.10 — price loading / error, booking blockers, delivery timing, per-unit extension */
.wdz-price-state { margin: 10px 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
.wdz-price-state.is-loading { background: #f3f6fb; color: #1f2733; }
.wdz-price-state.is-error { background: #fdecec; color: #8a1f1f; }
.wdz-price-state p { margin: 0 0 8px; }
.wdz-price-retry { border: 0; border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; background: var(--wdz-f-primary, #0f3460); color: var(--wdz-f-primary-ink, #fff); }
.wdz-form__blockers { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: #fff4e5; color: #6b3d00; font-size: 14px; line-height: 1.45; }
.wdz-form__blockers p { margin: 0 0 4px; }
.wdz-form__dexplain { margin: 0 0 8px; color: #4b5563; font-size: 13px; line-height: 1.45; }
#wdz-form .wdz-form__dopt.is-off { opacity: .55; cursor: not-allowed; background: #f6f7f9; }
.wdz-form__dopt-why { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: #8a1f1f; }
.wdz-form__dnone { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #fdecec; color: #8a1f1f; font-size: 14px; line-height: 1.45; }
.wdz-cart__btn.is-disabled, .wdz-cart__btn:disabled { opacity: .5; cursor: not-allowed; }
.wdz-form__sumprice.is-tbd, .wdz-cart__price.is-tbd { font-size: 13px; font-weight: 600; color: #5b6472; }
.wdz-ext { flex-direction: column; gap: 6px; cursor: default; }
.wdz-ext__rows { display: grid; gap: 6px; margin: 4px 0; }
.wdz-ext__row { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.wdz-ext__row input { width: 18px; height: 18px; margin: 0; accent-color: var(--wdz-f-primary, #0f3460); }
.wdz-ext__row select { min-height: 36px; border: 2px solid #d7dbe0; border-radius: 8px; padding: 2px 6px; font: inherit; }
.wdz-ext__terms { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.45; color: #4b5563; }
.wdz-ext__terms li { margin: 0 0 2px; }
/* 1.8.11: the account's own yes/no options (text updates, damage waiver): one per line */
.wdz-form__acctopt { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; line-height: 1.4; }
.wdz-form__acctopt input { margin-top: 3px; flex: none; }
.wdz-form__acctpaid { color: #6b7480; }
/* 1.8.12 (QA6): the order changed after review (another tab) or its price changed: shown above the
order, booking waits for "I've checked" */
.wdz-form__ordernotice { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: #fff4e5; color: #5c3400; border: 1px solid #f3c27a; border-left: 4px solid #d97706; font-size: 14px; line-height: 1.45; }
.wdz-form__ordernotice[hidden] { display: none; }
.wdz-form__ordernotice p { margin: 0 0 10px; }
.wdz-form__ordernotice strong { color: #4a2a00; }
.wdz-form__ackbtn { min-height: 44px; }
/* the party date and time on the review */
.wdz-form__summary > .wdz-form__sumwhen dd { font-weight: 600; text-align: right; }
/* empty cart: a plain note, not an error */
.wdz-checkout-form__result.is-info { background: #f2f5fa; color: #1f2733; border: 1px solid #d9e0ea; }
/* a delivery offered with an early arrival */
.wdz-form__dopt-why.is-early { color: #6b4a00; font-style: normal; }