/* Hope Intake Demo — booking page styles. Per WA_PKT_BOOKING_PAGE_VISUAL_POLISH_01. Single source of truth for both /book (cold-start) and /book/ (warm-lead). Dark mode primary; light mode opt-in via prefers-color-scheme or [data-theme="light"]. All visual styling references the design tokens in :root. To rebrand or adjust spacing/colors, change ONE variable here — the cards, inputs, CTA, etc. read it via var(). HTML structure is unchanged from prior packets; the only added markup is the .brand-header block at the top of each template (logo + heading + sub). chat.css is still linked but its banner styles get overridden here — the playground banner stays per packet scope guard, just restyled to fit the new aesthetic. */ /* ============================================================ Design tokens — single source of truth */ :root { color-scheme: light dark; /* Brand */ --woytek-brand: #3B82F6; --woytek-brand-hover: #2563EB; --woytek-brand-active: #1D4ED8; --woytek-brand-text-on: #FFFFFF; --woytek-brand-ring: rgba(59, 130, 246, 0.25); /* Surfaces — DARK (primary). Inputs sit LIGHTER than the card they live in so they read as input affordances (Bug 3 fix per WA_PKT_BOOKING_PAGE_VISUAL_POLISH_HOTFIX_01: was #0F0F11 / #2E2E33, which was darker than the #18181B card — backwards from intent). */ --page-bg: #09090B; --card-bg: #18181B; --card-border: #27272A; --input-bg: #1F1F23; --input-border: #3F3F46; --input-border-focus: #3B82F6; --divider: #27272A; /* Text — DARK (primary) */ --text-primary: #FAFAFA; --text-secondary: #A1A1AA; --text-tertiary: #71717A; --text-on-input: #FAFAFA; --placeholder: #52525B; /* Semantic */ --success: #10B981; --error: #EF4444; --warning: #F59E0B; /* Radii */ --radius-card: 12px; --radius-input: 8px; --radius-pill: 10px; --radius-cta: 12px; --radius-toggle: 999px; /* Spacing */ --card-padding: 24px; --card-gap: 16px; --input-padding: 11px 14px; --textarea-padding: 12px 14px; --textarea-min-height: 84px; --cta-padding: 16px 20px; --page-padding-top: 48px; --page-padding-side: 24px; --page-padding-bottom: 40px; --row-gap: 12px; /* Typography */ --font-stack: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; } @media (prefers-color-scheme: light) { :root { --page-bg: #F8FAFC; --card-bg: #FFFFFF; --card-border: #E5E7EB; --input-bg: #FFFFFF; --input-border: #E2E8F0; --divider: #F1F5F9; --text-primary: #0F172A; --text-secondary: #64748B; --text-tertiary: #94A3B8; --placeholder: #9CA3AF; --woytek-brand: #2563EB; --woytek-brand-hover: #1D4ED8; --woytek-brand-active: #1E40AF; } } [data-theme="light"] { --page-bg: #F8FAFC; --card-bg: #FFFFFF; --card-border: #E5E7EB; --input-bg: #FFFFFF; --input-border: #E2E8F0; --divider: #F1F5F9; --text-primary: #0F172A; --text-secondary: #64748B; --text-tertiary: #94A3B8; --placeholder: #9CA3AF; --woytek-brand: #2563EB; --woytek-brand-hover: #1D4ED8; --woytek-brand-active: #1E40AF; } /* ============================================================ Unified page background per WA_PKT_BOOKING_PAGE_FINAL_POLISH_01. chat.css declares ``html, body { background: var(--bg) }`` (grey) and the prior P3 rewrite only set the background on ``.book-body`` — so kept the chat.css grey and bled through wherever didn't fill the viewport, producing a half-black/half-grey page. Forcing html + main containers to the booking page-bg with !important kills the leak regardless of cascade order or selector ties. */ html, body.book-body, body.book-body main, body.book-body #book-main { background: var(--page-bg) !important; } /* ============================================================ Page layout */ html, body { margin: 0; padding: 0; } .book-body { background: var(--page-bg); color: var(--text-primary); font-family: var(--font-stack); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; } #book-main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--page-padding-side) var(--page-padding-bottom); display: flex; flex-direction: column; gap: 0; box-sizing: border-box; } /* ============================================================ Brand header — top of body, above the form (logo + heading + sub). WA_PKT_BOOKING_UI_LOGO_SPACING_01: tightened from padding: 48px 24px 24px → 20px 24px 16px so the decal opens closer to the fold on 1080p. Bottom 16px matches --card-gap so the gap into the first form card lines up with card-to-card rhythm. Mobile (≤640px) inherits these values; previously mobile was a tighter 32px via the --page-padding-top override, but the new desktop value is already tighter than that, so the override is redundant for this element. */ .brand-header { text-align: center; padding: 20px var(--page-padding-side) 8px; max-width: 720px; margin: 0 auto; box-sizing: border-box; } .brand-logo { /* Final P3 bump in WA_PKT_BOOKING_PAGE_FINAL_POLISH_01: 140px still under-read at desktop content width (~720px); 200px hits ~25-30% of content width which is the hero-brand proportion. max-width 520px contains the wide WA logotype on narrow viewports. Mobile rule (≤640px) drops to 100px so the logo doesn't dominate small screens. */ height: 200px; width: auto; max-width: 520px; margin: 0 auto -16px; display: block; /* Black-on-transparent PNG → invert + brighten = clean white on dark. */ filter: invert(1) brightness(2); } @media (prefers-color-scheme: light) { .brand-logo { filter: none; } } [data-theme="light"] .brand-logo { filter: none; } .brand-heading { font-size: 32px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; color: var(--text-primary); margin: 0 0 4px; } .brand-sub { font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--text-secondary); margin: 0 0 16px; } /* ============================================================ Success-mode brand-header trim — WA_PKT_BOOKING_UI_SUCCESS_HEADER_STRIP_01. The .brand-header (logo + "Confirm your appointment" H1 + subtext) is a sibling above #book-main and renders in every mode. On the post-booking confirmation view (#success-state visible) the form-mode H1 + subtext contradict the confirmation card directly below them, so hide them and let the card sit as the focal element under the logo. The logo's -16px bottom margin exists only to pull the (now-hidden) H1 up through the PNG's transparent footer; with the H1 gone that would crowd the card, so reset to a clean positive gap and zero the header's bottom padding. Activation: pure CSS via :has(). #success-state is [hidden] in form/error mode and unhidden by the existing book.js mode dispatch on the success route — no JS, no markup, no class plumbing. Form mode and error mode never match this selector and are byte-for-byte unaffected. :has() support is an established assumption in this sheet (see the existing .phone-row:has(#f-phone.field-invalid) rule). */ body.book-body:has(#success-state:not([hidden])) .brand-heading, body.book-body:has(#success-state:not([hidden])) .brand-sub { display: none; } body.book-body:has(#success-state:not([hidden])) .brand-header { padding: 20px var(--page-padding-side) 0; } body.book-body:has(#success-state:not([hidden])) .brand-logo { margin: 0 auto 8px; } /* ============================================================ Hard-fail + error banners (operator-visible alerts). Bug 2 fix per WA_PKT_BOOKING_PAGE_VISUAL_POLISH_HOTFIX_01: chat.css declares ``#error-banner { display: flex }`` which overrides the UA's [hidden] rule by selector specificity (#id beats [hidden]). Force the hidden attribute to win with an !important here. */ #hard-fail[hidden], #error-banner[hidden] { display: none !important; } #hard-fail, #error-banner { max-width: 720px; margin: 12px auto 0; padding: 12px 16px; border-radius: var(--radius-input); font-size: 14px; background: rgba(239, 68, 68, 0.12); color: var(--error); border: 1px solid rgba(239, 68, 68, 0.35); font-family: var(--font-stack); } /* ============================================================ Inner form header — the brand-header above replaces it functionally, so hide rather than render two competing h1s. */ .booking-form .booking-header { display: none; } /* ============================================================ Cards (fieldsets) — each fieldset becomes a card. Legend becomes an inline card title at the top of the card. */ .booking-form { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; border: none; } /* Bug C fix per WA_PKT_BOOKING_PAGE_FUNCTIONAL_FIXES_01: same pattern as the [hidden] enforcement on banners above — ``.booking-form { display: flex }`` (class selector) beats the UA's ``[hidden] { display: none }`` rule, so when book.js / book_new.js set ``$form.hidden = true`` on submit success the form would stay visible underneath the success card. Force the hidden attribute to win. */ .booking-form[hidden] { display: none !important; } .booking-form fieldset { display: block; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: var(--card-padding); margin: 0 0 var(--card-gap); min-width: 0; } /* Bug 1a fix per WA_PKT_BOOKING_PAGE_VISUAL_POLISH_HOTFIX_01: the previous float: left + width: 100% was orphaning the first form-row in each card (Name, Street, SMS/TCPA labels stranded right of the legend). Plain block layout works correctly across modern browsers — the legend appears as a normal block heading at the top of the card, and the next sibling flows underneath. */ .booking-form legend { float: none; display: block; width: auto; padding: 0; margin: 0 0 18px; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); text-transform: none; } .booking-form legend::after { display: none; } /* ============================================================ Form rows + labels */ .form-row { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; } .form-row:first-of-type, .booking-form legend + .form-row, .booking-form legend + label.form-row { margin-top: 0; } .form-row .form-label { font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--text-primary); } /* WA_PKT_BOOKING_UI_VIN_FIELD_01: inline "(optional)" subtext after a form label. De-emphasized so the required vs optional distinction is visible without shouting. */ .form-label-meta { font-size: 12px; font-weight: 400; color: var(--text-tertiary); margin-left: 6px; } /* Amber soft-warning variant for form hints. Used by the VIN field when the input doesn't match the 17-char spec; submit stays enabled (the bridge accepts non-conforming values as free text). */ .form-hint.form-hint--vin-invalid { color: var(--warning); } .form-row .form-hint { font-size: 12px; font-weight: 400; color: var(--text-tertiary); margin-top: 2px; } .form-row .form-hint.form-hint--error { color: var(--error); } .form-row-inline { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; } /* First/last name split per WA_PKT_BOOKING_UI_NOTES_ALWAYS_REQUIRED_01. Desktop: two equal columns side-by-side. Mobile (≤640px) stacks single column via the existing mobile media-query block at the bottom. */ .form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; } .form-row-split label { display: flex; flex-direction: column; gap: 6px; } .form-row-inline > label { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 96px; } /* ============================================================ Inputs + textarea */ .booking-form input[type="text"], .booking-form input[type="email"], .booking-form input[type="tel"], .booking-form textarea { width: 100%; padding: var(--input-padding); background: var(--input-bg); color: var(--text-on-input); border: 1px solid var(--input-border); border-radius: var(--radius-input); font-family: var(--font-stack); font-size: 14px; line-height: 1.4; box-sizing: border-box; outline: none; transition: border-color 120ms, box-shadow 120ms; } .booking-form textarea { padding: var(--textarea-padding); min-height: var(--textarea-min-height); resize: vertical; } .booking-form input::placeholder, .booking-form input[type="tel"]::placeholder, .booking-form textarea::placeholder { color: var(--placeholder); } .booking-form input:focus, .booking-form input[type="tel"]:focus, .booking-form textarea:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--woytek-brand-ring); } .booking-form input[readonly] { background: var(--card-bg); color: var(--text-secondary); cursor: not-allowed; } .booking-form input[readonly]:focus { box-shadow: none; border-color: var(--input-border); } /* ============================================================ Slot picker (fallback list — calendar widget is the primary picker and ships its own styles in calendar_widget.css). */ .slot-picker { /* Inherits card style from .booking-form fieldset */ } .slot-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; } .slot-item { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px; background: var(--input-bg); color: var(--text-primary); border: 1px solid var(--input-border); border-radius: var(--radius-pill); cursor: pointer; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; transition: background 100ms, border-color 100ms, color 100ms; } .slot-item:hover { border-color: var(--woytek-brand); } .slot-item input[type="radio"] { appearance: none; width: 0; height: 0; margin: 0; padding: 0; position: absolute; opacity: 0; } .slot-item.selected { background: var(--woytek-brand); border-color: var(--woytek-brand); color: var(--woytek-brand-text-on); } .slot-label { font-size: 15px; } /* ============================================================ Same-as-home toggle — iOS-style pill toggle, styled in place from the existing native . */ /* Bug 1b fix per WA_PKT_BOOKING_PAGE_VISUAL_POLISH_HOTFIX_01: the previous selector ``#billing-address-block .form-row-inline`` could match the State/ZIP/Country inline row inside the same address block. :has(#same-as-home) keys on the literal toggle input, so the layout applies ONLY to the same-as-home row. ``order: -1`` keeps the visual order label-left, toggle-right per the mockup, even though HTML source order is checkbox then span. */ #billing-address-block label.form-row-inline:has(#same-as-home) { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 0; flex-wrap: nowrap; } #billing-address-block label.form-row-inline:has(#same-as-home) > span { font-size: 14px; font-weight: 500; color: var(--text-primary); order: -1; flex: 1; } #same-as-home { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border-radius: var(--radius-toggle); background: #3F3F46; position: relative; cursor: pointer; border: none; margin: 0; flex-shrink: 0; transition: background 150ms; outline: none; } #same-as-home::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; transition: left 150ms; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } #same-as-home:checked { background: var(--woytek-brand); } #same-as-home:checked::after { left: 20px; } #same-as-home:focus-visible { box-shadow: 0 0 0 3px var(--woytek-brand-ring); } @media (prefers-color-scheme: light) { #same-as-home { background: #CBD5E1; } } [data-theme="light"] #same-as-home { background: #CBD5E1; } /* ============================================================ Consents — custom-styled 20x20 checkboxes with checkmark via pseudo-element. The native is restyled in place; no HTML change. */ /* Consent rows post-WA_PKT_BOOKING_UI_CONSENT_POLISH_01: - 2-column grid (checkbox + label); the prior 3rd "version pill" column was a debug stub leaking the playground_hash and is removed (book.js now stamps data-policy-version on the row instead). - Larger checkbox (24px) with comfortable hit target, brand-color fill + crisp checkmark, prominent focus ring (it's a legally- operative control — should feel deliberate to tick). - Generous line-height on the label; full width left for the legal phrasing to read calmly across two lines. - Subtle divider with breathing room between the two rows. */ .consents-block .consent-row { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; align-items: start; padding: 20px 0; border-top: 1px solid var(--divider); margin: 0; cursor: pointer; } .consents-block .consent-row:first-of-type { padding-top: 4px; border-top: none; } .consents-block .consent-row:last-of-type { padding-bottom: 4px; } .consents-block .consent-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid var(--input-border); background: transparent; margin: 0; padding: 0; cursor: pointer; position: relative; flex-shrink: 0; transition: background 100ms, border-color 100ms, box-shadow 100ms; outline: none; } .consents-block .consent-row input[type="checkbox"]:hover { border-color: var(--woytek-brand); } .consents-block .consent-row input[type="checkbox"]:checked { background: var(--woytek-brand); border-color: var(--woytek-brand); } .consents-block .consent-row input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 12px; border: solid var(--woytek-brand-text-on); border-width: 0 2px 2px 0; transform: rotate(45deg); } .consents-block .consent-row input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px var(--woytek-brand-ring); } .consent-label { font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--text-primary); } .consent-label strong { font-weight: 600; letter-spacing: -0.005em; } /* Inline policy links — theme-integrated, not raw bright-blue. */ .consent-link { color: var(--woytek-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 500; transition: color 100ms; } .consent-link:hover { color: var(--woytek-brand-hover); } .consent-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--woytek-brand-ring); border-radius: 3px; } /* ============================================================ Stripe placeholder — Phase 1.5.E will replace this with the real Stripe Elements iframe. The dashed border + diagonal stripes keep it visually distinct from a real card input. */ .stripe-placeholder { /* inherits card */ } .stripe-placeholder-tile { position: relative; background: repeating-linear-gradient( 45deg, var(--input-bg) 0px, var(--input-bg) 12px, var(--card-bg) 12px, var(--card-bg) 24px ); border: 2px dashed var(--input-border); border-radius: var(--radius-input); padding: 32px 18px 20px; text-align: center; color: var(--text-secondary); } .stripe-placeholder-badge { position: absolute; top: 10px; right: 10px; background: var(--warning); color: var(--page-bg); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 4px; } .stripe-placeholder-title { font-family: var(--font-mono); font-size: 14px; font-weight: 700; margin: 4px 0 10px; color: var(--warning); } .stripe-placeholder-body { font-size: 12.5px; line-height: 1.5; margin: 4px 0; } .stripe-placeholder-foot { font-size: 11px; margin: 12px 0 0; color: var(--text-tertiary); font-style: italic; } /* ============================================================ Stripe Elements card-capture mount (WA_PKT_PLAYGROUND_STRIPE_01). Replaces the dashed-border placeholder tile. The fieldset wrapper already inherits the card chrome from .booking-form fieldset above; these rules style the inner mount point and error line. The dead .stripe-placeholder-* selectors above are intentionally kept for now per packet — they don't render against any current HTML, so removing them is not worth a separate pass. */ #stripe-payment-element { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-input); padding: 14px; min-height: 60px; transition: border-color 120ms, box-shadow 120ms; } #stripe-payment-element.StripeElement--focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--woytek-brand-ring); } #stripe-payment-errors { color: var(--error); font-size: 13px; margin-top: 8px; min-height: 18px; line-height: 1.4; } /* No-token page hint: shown until phone blurs and Elements mounts. */ #stripe-payment-hint { margin-top: 10px; font-style: italic; color: var(--text-tertiary); } .stripe-elements.stripe-elements--mounted #stripe-payment-hint { display: none; } /* ============================================================ Signature pad per WA_PKT_BOOKING_UI_SIGNATURE_PAD_01. The fieldset inherits .booking-form fieldset card chrome. Canvas sits in a white-bg wrap (signature ink reads on white regardless of dark/light theme) with rounded border. Native JS pad in book.js captures mouse + touch; touch-action: none keeps mobile from scrolling the page while the user is drawing. */ .signature-block .signature-hint { font-size: 13px; color: var(--text-secondary); margin: 0 0 12px; line-height: 1.45; } .signature-block .signature-canvas-wrap { background: #fff; border-radius: var(--radius-input); border: 1px solid var(--input-border); padding: 4px; overflow: hidden; display: block; width: 100%; box-sizing: border-box; } .signature-block canvas#signature-canvas { display: block; width: 100%; height: 180px; touch-action: none; cursor: crosshair; } .signature-block .signature-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; } .signature-block .signature-clear-btn { background: transparent; border: 1px solid var(--input-border); color: var(--text-secondary); border-radius: var(--radius-input); padding: 6px 14px; font-size: 13px; font-family: var(--font-stack); cursor: pointer; transition: background 100ms, color 100ms, border-color 100ms; } .signature-block .signature-clear-btn:hover { background: var(--input-bg); color: var(--text-primary); } .signature-block #signature-status.form-hint--ok { color: var(--success); } /* ============================================================ Submit (CTA) — the loud blue primary action. */ .submit-row { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } #btn-submit { width: 100%; background: var(--woytek-brand); color: var(--woytek-brand-text-on); font-family: var(--font-stack); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; border: none; border-radius: var(--radius-cta); padding: var(--cta-padding); cursor: pointer; text-align: center; transition: background 100ms, transform 80ms; outline: none; } #btn-submit:hover:not(:disabled) { background: var(--woytek-brand-hover); } #btn-submit:active:not(:disabled) { background: var(--woytek-brand-active); transform: translateY(1px); } #btn-submit:focus-visible { box-shadow: 0 0 0 3px var(--woytek-brand-ring); } #btn-submit:disabled { opacity: 0.5; cursor: not-allowed; } /* WA_PKT_BOOKING_UI_SUBMIT_VALIDATION_FEEDBACK_01: the button stays clickable in the not-ready state (so the click handler can paint red on unmet gates) but visually matches the prior :disabled appearance. The :disabled selector above still applies during the in-flight POST double-submit guard inside handleSubmit. */ #btn-submit.not-ready { opacity: 0.5; cursor: not-allowed; } /* REDOUT_COVERAGE_01: tied (0,2,1) specificity per element type so this rule wins the base input rule at L384 by document order — no !important needed (the prior outline-only .field-invalid lost the cascade because .booking-form input[type=...] sets outline:none at higher specificity). PHONE_WIDGET_01 hid #f-phone; :has() projects its invalid state onto the visible .phone-input-group since the redTarget in book.js is locked. */ .booking-form input.field-invalid, .booking-form textarea.field-invalid, .booking-form select.field-invalid, .booking-form .field-invalid { border-color: var(--error); box-shadow: 0 0 0 2px var(--error); border-radius: var(--radius-input); } .booking-form .form-row.phone-row:has(#f-phone.field-invalid) .phone-input-group { border-radius: var(--radius-input); box-shadow: 0 0 0 2px var(--error); } .submit-error { margin-top: 8px; color: var(--error); font-size: 13px; font-weight: 500; text-align: center; } #submit-hint { font-size: 13px; font-weight: 400; color: var(--text-tertiary); text-align: center; font-style: normal; } /* ============================================================ Error + success state cards (shown by JS in place of the form) */ .error-state, .success-state { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 36px 28px; margin: 0 0 var(--card-gap); text-align: center; } .error-state h1, .success-state h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; } .error-state h1 { color: var(--error); } /* Success heading: neutral primary text per WA_PKT_BOOKING_UI_SUCCESS_COPY_01. The earlier green ✓ "Got it" treatment read as casual; the new copy is a measured legal acknowledgment, so the heading sits in the same color as the rest of the page. */ .success-state h1, .success-state .success-heading { color: var(--text-primary); } .error-state p, .success-state p { color: var(--text-secondary); font-size: 15px; line-height: 1.55; margin: 6px 0; } .success-state .success-lede { font-size: 16px; color: var(--text-primary); margin: 4px 0 18px; } .success-state .success-next-steps { margin: 0 0 22px; } .success-state .success-reference { font-size: 13px; color: var(--text-tertiary); margin: 22px 0 0; } .success-state .success-reference-value { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text-primary); margin-left: 6px; } .success-state .success-playground-note { font-size: 12px; color: var(--text-tertiary); font-style: italic; margin-top: 20px; } .error-state-help { font-size: 13px; color: var(--text-tertiary); margin-top: 18px; } .success-meta { display: inline-grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 22px auto 0; font-family: var(--font-mono); font-size: 13px; text-align: left; } .success-meta dt { color: var(--text-tertiary); font-weight: 500; } .success-meta dd { margin: 0; color: var(--text-primary); } .success-foot { font-size: 12px; color: var(--text-tertiary); margin-top: 20px; font-style: italic; } /* ============================================================ Service catalog grid + tiles per WA_PKT_BOOKING_UI_SERVICE_CATALOG_01. The fieldset inherits .booking-form fieldset card chrome. Tile default: dark neutral with hover-border lift; selected: brand blue with white checkmark badge. Tablet collapses 3x2 → 2x3; mobile collapses to a single column. */ .service-catalog-block .service-catalog-hint { font-size: 13px; color: var(--text-secondary); margin: 0 0 16px; line-height: 1.45; } .service-catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } .service-tile { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-card); padding: 16px; cursor: pointer; transition: background 100ms, border-color 100ms; display: flex; flex-direction: column; gap: 8px; position: relative; min-height: 140px; box-sizing: border-box; } .service-tile:hover { border-color: var(--woytek-brand); } .service-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--woytek-brand-ring); } .service-tile-name { color: var(--text-primary); font-size: 14px; font-weight: 600; line-height: 1.25; } .service-tile-duration { display: inline-block; background: var(--divider); color: var(--text-secondary); border-radius: 10px; padding: 3px 10px; font-size: 11px; width: fit-content; } .service-tile-description { color: var(--text-secondary); font-size: 12px; line-height: 1.4; margin-top: auto; } .service-tile--selected { background: var(--woytek-brand); border-color: var(--woytek-brand); border-width: 2px; padding: 15px; } .service-tile--selected .service-tile-name { color: var(--woytek-brand-text-on); } .service-tile--selected .service-tile-duration { background: rgba(255, 255, 255, 0.15); color: var(--woytek-brand-text-on); } .service-tile--selected .service-tile-description { color: rgba(255, 255, 255, 0.85); } .service-tile--selected::after { content: ""; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; background: #ffffff; border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M 7 11 L 10 14 L 16 8' stroke='%233B82F6' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; } /* Notes fieldset — its own card per WA_PKT_BOOKING_UI_NOTES_ALWAYS_REQUIRED_01. Inherits .booking-form fieldset card chrome; only the inner pieces need explicit styling. */ .notes-block .notes-hint-top { font-size: 13px; color: var(--text-secondary); margin: 0 0 12px; line-height: 1.45; } .notes-block textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-input); color: var(--text-primary); padding: 10px 12px; font-family: var(--font-stack); font-size: 14px; resize: vertical; min-height: 80px; box-sizing: border-box; } .notes-block textarea::placeholder { color: var(--placeholder); } .notes-block textarea:focus { outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--woytek-brand-ring); } .form-hint.form-hint--required { color: var(--error); } /* Tablet: 2-wide */ @media (min-width: 641px) and (max-width: 900px) { .service-catalog-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ Phone widget — WA_PKT_BOOKING_UI_PHONE_WIDGET_01. select + tel input over the hidden canonical #f-phone. Reuses the existing input palette tokens — zero new CSS variables, so dark/light theming is inherited automatically. */ .phone-input-group { display: flex; gap: 8px; } .booking-form select.phone-cc { width: 118px; flex: 0 0 auto; background: var(--input-bg); color: var(--text-on-input); border: 1px solid var(--input-border); border-radius: var(--radius-input); padding: var(--input-padding); padding-right: 28px; font-family: var(--font-stack); font-size: 14px; line-height: 1.4; box-sizing: border-box; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2371717A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; transition: border-color 120ms, box-shadow 120ms; } .booking-form input.phone-visible { flex: 1 1 auto; min-width: 0; } .booking-form select.phone-cc:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--woytek-brand-ring); } @media (max-width: 640px) { .phone-input-group { gap: 6px; } .booking-form select.phone-cc { width: 96px; padding-right: 24px; } } /* ============================================================ Mobile (≤ 640px) */ @media (max-width: 640px) { :root { --card-padding: 20px; --page-padding-top: 32px; --page-padding-side: 16px; --page-padding-bottom: 32px; } .brand-logo { height: 100px; margin-bottom: 16px; } .brand-heading { font-size: 26px; } .brand-sub { font-size: 14px; } .slot-list { grid-template-columns: 1fr; } .form-row-inline { flex-direction: column; align-items: stretch; } #billing-address-block label.form-row-inline:has(#same-as-home) { flex-direction: row; align-items: center; } .consents-block .consent-row { grid-template-columns: auto 1fr; } .signature-block canvas#signature-canvas { height: 140px; } .service-catalog-grid { grid-template-columns: 1fr; } .service-tile { min-height: auto; } .form-row-split { grid-template-columns: 1fr; } }