/* Public booking wizard — business storefront treatment. The category accent is injected on as --color-primary / --booking-accent-dark overrides, so everything below normalizes to it. */ @layer page { /* --- Shell --- */ .booking_body:has(.booking_shell) { padding: 0; align-items: flex-start; } .booking_shell { display: flex; flex-direction: column; width: 100%; max-width: 480px; min-height: 100dvh; margin: 0 auto; background: var(--color-bg); @media (min-width: 640px) { border-inline: 1px solid var(--color-border); } } .booking_main { flex: 1; display: flex; flex-direction: column; padding: 20px var(--content-padding) 24px; } .booking_main--flush { padding: 0 0 24px; } .booking_step_title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--color-text); text-align: left; margin: 0 0 16px; } /* --- Storefront hero (gradient band) --- */ .booking_hero { display: flex; flex-direction: column; gap: 14px; padding: 24px var(--content-padding) 20px; background: linear-gradient(150deg, var(--booking-accent-dark), var(--color-primary)); color: white; } .booking_hero_main { display: flex; align-items: center; gap: 14px; } .booking_hero_identity { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .booking_hero_name { font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: white; margin: 0; line-height: var(--line-height-base); } .booking_hero_category { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.85); } .booking_hero_desc { font-size: var(--text-sm); line-height: var(--line-height-md); color: white; margin: 0; } /* --- Demo notice --- */ /* Demo links point at a business that doesn't exist: an alert above every step's title. */ .booking_demo_notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 16px; border-radius: 10px; background: var(--color-warning-wash); color: var(--color-warning-text); font-size: var(--text-sm); line-height: var(--line-height-md); > svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; } } .booking_demo_notice_text { margin: 0; min-width: 0; } .booking_demo_notice_title { display: block; font-weight: var(--font-weight-bold); } /* the services step's main is flush; give the alert the page inset the title lacks there */ .booking_main--flush > .booking_demo_notice { margin: 16px var(--content-padding) 8px; } /* --- Avatar --- */ .booking_avatar { flex-shrink: 0; border-radius: 50%; object-fit: cover; } .booking_avatar--hero { width: 56px; height: 56px; } .booking_avatar--band { width: 28px; height: 28px; } .booking_avatar--icon { display: flex; align-items: center; justify-content: center; background: rgba(var(--color-primary-rgb), 0.12); color: var(--color-primary); svg { width: 26px; height: 26px; } &.booking_avatar--band svg { width: 15px; height: 15px; } } /* On the gradient the icon avatar inverts to a white circle */ .booking_hero .booking_avatar--icon, .booking_band .booking_avatar--icon { background: white; color: var(--color-primary); } /* Dark mode: the light-mode accent gradient glares against the dark page, so deepen both stops. The frosted avatar replaces the solid white circle, which was the brightest element on screen. */ [data-theme="dark"] { .booking_hero, .booking_band { background: linear-gradient(150deg, color-mix(in srgb, var(--booking-accent-dark), black 45%), color-mix(in srgb, var(--booking-accent), black 35%)); } .booking_hero .booking_avatar--icon, .booking_band .booking_avatar--icon { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.95); } .booking_body .btn.primary { background: color-mix(in srgb, var(--booking-accent), black 28%); border-color: color-mix(in srgb, var(--booking-accent), black 28%); &:hover { background: color-mix(in srgb, var(--booking-accent), black 40%); border-color: color-mix(in srgb, var(--booking-accent), black 40%); } &:active { background: color-mix(in srgb, var(--booking-accent), black 48%); border-color: color-mix(in srgb, var(--booking-accent), black 48%); } } } /* --- Storefront fact lines --- */ .booking_facts { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; } .booking_fact { display: flex; align-items: center; gap: 9px; font-size: var(--text-sm); min-width: 0; > svg { width: 16px; height: 16px; flex-shrink: 0; } span { min-width: 0; /* iOS auto-detects the phone number as a tel: link — keep it in the surrounding color */ a { color: inherit; text-decoration: none; } } } .booking_facts--hero { color: rgba(255, 255, 255, 0.92); > .booking_fact > svg { opacity: 0.85; } } .booking_facts--sheet { color: var(--color-text); > .booking_fact > svg { color: var(--color-muted); } } .booking_fact_chip { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; svg { width: 14px; height: 14px; } } .booking_fact_chip--maps { width: 24px; height: 24px; svg { width: 12px; height: 12px; } } /* Frosted treatment on the gradient */ .booking_facts--hero .booking_fact_chip { background: rgba(255, 255, 255, 0.16); color: white; } /* Page-background treatment inside the sheet */ .booking_facts--sheet .booking_fact_chip--whatsapp { background: rgba(var(--color-primary-rgb), 0.12); color: var(--color-primary); } .booking_facts--sheet .booking_fact_chip--maps { background: var(--color-bg-secondary); color: var(--color-text-light); } /* --- Compact band + nav row --- */ .booking_nav { position: sticky; top: 0; z-index: var(--z-nav); } .booking_band { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 6px; background: linear-gradient(150deg, var(--booking-accent-dark), var(--color-primary)); color: white; } .booking_band--overlay { position: fixed; top: 0; left: 50%; transform: translate(-50%, -100%); width: 100%; max-width: 480px; z-index: var(--z-nav); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease; cursor: pointer; &.visible { transform: translate(-50%, 0); opacity: 1; } } .booking_band_back { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--back-tap-size); height: var(--back-tap-size); border-radius: 50%; color: white; svg { width: var(--back-icon-size); height: var(--back-icon-size); } &:active { background: rgba(255, 255, 255, 0.16); } } .booking_band_spacer { flex-shrink: 0; width: var(--back-tap-size); } .booking_band_identity { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; } .booking_band_name { font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .booking_band_info { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; background: none; border: none; cursor: pointer; color: white; &::before { content: none; } svg { width: 16px; height: 16px; } } .booking_band_info svg { box-sizing: content-box; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); } /* --- Gate card (phone / verification) --- */ .booking_gate_card { display: flex; flex-direction: column; gap: 14px; padding: 20px 16px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14), 0 0 32px rgba(var(--color-primary-rgb), 0.18); } /* Dark mode: a lighter surface does the elevation work; the dark drop shadow grounds the card and the accent glow makes it pop against the near-black page (plain black shadows barely register there). */ [data-theme="dark"] .booking_gate_card { background: var(--color-bg-tertiary); border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 32px rgba(var(--color-primary-rgb), 0.22); } .booking_gate_copy { font-size: var(--text-base); line-height: var(--line-height-md); color: var(--color-text); margin: 0; } .booking_gate_form { display: flex; flex-direction: column; gap: 12px; } .booking_gate_link { align-self: flex-start; padding: 0; background: none; border: none; cursor: pointer; font-size: var(--text-sm); color: var(--color-link); } .booking_gate_link--inline { display: inline; } .booking_gate_help { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .booking_resend_form { display: flex; align-items: center; } .booking_submit_btn--whatsapp svg { width: 20px; height: 20px; } /* Returning visitor fast path */ .booking_returning_row { display: flex; align-items: center; gap: 12px; } .booking_returning_avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--color-primary-rgb), 0.12); color: var(--color-primary); font-weight: var(--font-weight-semibold); } .booking_returning_info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .booking_returning_name { font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--color-text); } .booking_returning_phone { font-size: var(--text-sm); color: var(--color-text-light); } .booking_returning_device { font-size: var(--text-xs); color: var(--color-text-light); } /* --- Services teaser behind the gate --- */ .booking_teaser { margin-top: 28px; pointer-events: none; user-select: none; mask-image: linear-gradient(to bottom, black 20%, transparent 100%); } .booking_teaser_row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; opacity: 0.5; &:not(:first-child) { border-top: 1px solid var(--color-border); } } .booking_teaser_name { font-size: var(--text-base); font-weight: var(--font-weight-light); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .booking_teaser_price { flex-shrink: 0; width: 72px; height: 14px; border-radius: var(--radius-pill); background: var(--color-bg-secondary); filter: blur(3px); } /* --- Footer badge --- */ .booking_footer { padding: 20px var(--content-padding) calc(20px + var(--safe-bottom)); text-align: center; background: none; border-top: none; } .booking_made_with { font-size: var(--text-xs); color: var(--color-muted); margin: 0; } .booking_made_with_link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-brand); font-weight: var(--font-weight-bold); color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; } /* The mark in the host's muted grey, monochrome. 14px is the floor: the seam between the bars is one device pixel at 13px and goes half-tone below it. */ .booking_made_with_mark { width: 14px; height: 14px; flex-shrink: 0; color: var(--color-muted); } /* --- Fields --- */ .booking_form, .booking_address_form { display: flex; flex-direction: column; gap: 14px; } .booking_field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } .booking_field--small { flex: 0 0 96px; } .booking_field_row { display: flex; gap: 10px; } .booking_field_label { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); text-align: left; } .booking_address_details { display: flex; flex-direction: column; gap: 14px; &.hidden { display: none; } } .booking_state_select { width: 100%; appearance: auto; } /* The link that swaps the form's way in: CEP first, or the address search. */ .booking_address_mode { margin-top: -4px; } .booking_address_suggestions { display: flex; flex-direction: column; margin-top: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; &.hidden { display: none; } } .booking_address_suggestion { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--color-bg); border: none; border-bottom: 1px solid var(--color-border); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; &:last-child { border-bottom: none; } &:active { background: var(--color-bg-tertiary); } .place { font-size: var(--text-sm); color: var(--color-muted); } } .booking_cep_missing { margin: 0; font-size: var(--text-sm); color: var(--color-warning); &.hidden { display: none; } } .wizard_input.autofilled, .booking_state_select.autofilled { background: var(--color-bg-light); border-bottom-color: var(--color-primary); } /* Phone input — the prefix carries the same rule as the field beside it. */ .booking_phone_input { display: flex; align-items: stretch; gap: 8px; width: 100%; .wizard_input { flex: 1; min-width: 0; } } .booking_phone_prefix { display: flex; align-items: center; flex-shrink: 0; padding: 12px 0; font-size: var(--text-base); color: var(--color-text-light); border-bottom: 1px solid var(--color-border); } /* Verification code — the one boxed field in the flow. Six digits read as six slots, not as a value on a line. See docs/topics/WIZARDS.md, deviations. */ .booking_code_input { padding: 1rem; font-size: var(--text-xl); letter-spacing: 0.5rem; text-align: center; font-weight: var(--font-weight-semibold); background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: 4px; &:focus { border-color: var(--color-primary); } } /* --- Services list --- */ .booking_services_list { display: flex; flex-direction: column; } .booking_service_row { display: flex; align-items: center; gap: 12px; padding: 16px var(--content-padding); &:not(:first-child) { border-top: 1px solid var(--color-border); } } .booking_service_info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .booking_service_name { font-size: var(--text-base); font-weight: var(--font-weight-light); color: var(--color-text); line-height: var(--line-height-md); } .booking_service_meta { font-size: var(--text-sm); color: var(--color-text-light); } .booking_service_price { color: var(--color-text); font-variant-numeric: tabular-nums; } .booking_service_price--text { color: var(--color-text-light); } .booking_service_actions { flex-shrink: 0; } .booking_add_btn { padding: 7px 18px; background: transparent; border: 1.5px solid var(--color-primary); border-radius: var(--radius-pill); color: var(--color-primary); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); cursor: pointer; &.hidden { display: none; } } .booking_stepper { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 2px; &.hidden { display: none; } } .booking_stepper_btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; border-radius: 50%; color: var(--color-primary); cursor: pointer; svg { width: 16px; height: 16px; } &:active { background: rgba(var(--color-primary-rgb), 0.1); } } .booking_stepper_qty { width: 26px; padding: 0; border: none; background: transparent; text-align: center; font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--color-text); -moz-appearance: textfield; &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } } /* --- Sticky cart bar --- */ .booking_cart_bar { position: sticky; bottom: 0; z-index: var(--z-nav); display: flex; align-items: center; gap: 12px; padding: 12px var(--content-padding) calc(12px + var(--safe-bottom)); background: var(--color-bg); border-top: 1px solid var(--color-border); &.hidden { display: none; } } .booking_cart_summary { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .booking_cart_count { font-size: var(--text-sm); color: var(--color-text-light); } .booking_cart_total { font-size: var(--text-base); font-weight: var(--font-weight-bold); color: var(--color-text); font-variant-numeric: tabular-nums; } /* Longer one-line summary on the address/slot steps */ .booking_cart_total--inline { font-size: var(--text-sm); } .booking_cart_btn { flex-shrink: 0; border-radius: var(--radius-md); } /* --- Slot picking --- */ .booking_days { display: flex; flex-direction: column; gap: 22px; width: 100%; } .booking_day_group { display: flex; flex-direction: column; gap: 10px; } .booking_day_header { font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; } .booking_slots { display: flex; flex-wrap: wrap; gap: 8px; } .booking_slot_pill { padding: 10px 18px; background: transparent; border: 1px solid var(--color-border); border-radius: 10px; font-size: var(--text-base); color: var(--color-text); font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color 0.15s, background-color 0.15s, color 0.15s; &.selected { background: var(--color-primary); border-color: var(--color-primary); color: white; } } /* No availability message */ .booking_no_availability { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem 1rem; text-align: center; svg { width: 48px; height: 48px; color: var(--color-muted); } p { font-size: var(--text-base); color: var(--color-text-light); margin: 0; } } /* --- Review receipt --- */ .booking_receipt { display: flex; flex-direction: column; gap: 14px; padding: 18px 16px; background: var(--color-bg-card); border-radius: 14px; } .booking_receipt_row { display: flex; align-items: flex-start; gap: 12px; > svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: var(--color-muted); } } .booking_receipt_text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .booking_receipt_value { font-size: var(--text-base); font-weight: var(--font-weight-medium); color: var(--color-text); } .booking_receipt_sub { font-size: var(--text-sm); color: var(--color-text-light); } .booking_receipt_divider { border: none; border-top: 1px solid var(--color-border); margin: 2px 0; } .booking_bill { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; } .booking_bill_row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--text-sm); } .booking_bill_name { color: var(--color-text); min-width: 0; } .booking_bill_price { flex-shrink: 0; color: var(--color-text-light); font-variant-numeric: tabular-nums; text-align: right; } .booking_bill_row--total { margin-top: 4px; font-weight: var(--font-weight-medium); .booking_bill_price { color: var(--color-text); } } /* --- Consent + confirm --- */ .booking_confirm_form { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; } .booking_consent { font-size: var(--text-sm); line-height: var(--line-height-md); color: var(--color-text-light); text-align: center; margin: 0; a { color: var(--color-link); } } .booking_confirm_note { font-size: var(--text-sm); color: var(--color-text-light); text-align: center; margin: 0; } /* --- "Sobre o negócio" bottom sheet --- */ .booking_sheet { position: fixed; inset: 0; z-index: var(--z-modal); visibility: hidden; pointer-events: none; &.open { visibility: visible; pointer-events: auto; .booking_sheet_backdrop { opacity: 1; } .booking_sheet_panel { transform: translateY(0); } } } .booking_sheet_backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.2s ease; } .booking_sheet_panel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 14px; max-width: 480px; max-height: 85dvh; margin: 0 auto; padding: 20px 16px calc(20px + var(--safe-bottom)); overflow-y: auto; background: var(--color-bg); border-radius: 20px 20px 0 0; transform: translateY(100%); transition: transform 0.25s ease; } .booking_sheet_header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .booking_sheet_identity { display: flex; align-items: center; gap: 12px; min-width: 0; } .booking_sheet_name { font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--color-text); margin: 0; } .booking_sheet_category { font-size: var(--text-sm); color: var(--color-text-light); } .booking_sheet_close { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; background: var(--color-bg-secondary); border: none; border-radius: 50%; color: var(--color-text); cursor: pointer; svg { width: 18px; height: 18px; } } .booking_sheet_desc { font-size: var(--text-sm); line-height: var(--line-height-md); color: var(--color-text); margin: 0; } .booking_sheet_actions { display: flex; gap: 10px; margin-top: 4px; .booking_sheet_action { flex: 1; gap: 0.5rem; svg { width: 18px; height: 18px; } } } /* --- Pending status banner --- */ .booking_pending_notice { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem; background: var(--color-state-pending-bg); border: 1px solid var(--color-state-pending-border); border-radius: 8px; margin-bottom: 1rem; svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-state-pending-text); } p { font-size: var(--text-sm); color: var(--color-state-pending-text); margin: 0; } } /* --- Confirmation / Success --- */ .booking_confirmation { display: flex; flex-direction: column; align-items: center; text-align: center; } .booking_confirmation_icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: var(--color-success-wash); border-radius: 50%; margin-bottom: 1.5rem; svg { width: 40px; height: 40px; color: var(--color-success-dark); } } .booking_confirmation_title { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0 0 0.5rem; } .booking_confirmation_subtitle { font-size: var(--text-base); color: var(--color-text-light); margin: 0 0 2rem; } .booking_confirmation_details { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; padding: 1rem; background: var(--color-bg-light); border-radius: 8px; text-align: left; margin-bottom: 2rem; } .booking_confirmation_row { display: flex; justify-content: space-between; align-items: flex-start; font-size: var(--text-sm); .label { color: var(--color-text-light); } .value { font-weight: var(--font-weight-medium); color: var(--color-text); text-align: right; } } /* --- Inactive link state --- */ .booking_inactive { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 1rem; } .booking_inactive_icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-secondary); border-radius: 50%; margin-bottom: 1.5rem; svg { width: 32px; height: 32px; color: var(--color-muted); } } /* --- Wizard timer for resend --- */ .wizard_timer { font-size: var(--text-sm); color: var(--color-muted); margin-left: 0.5rem; } /* --- Calendar dropdown for success page --- */ .booking_success_actions { display: flex; flex-direction: column; gap: 0.75rem; } .booking_calendar_actions { position: relative; width: 100%; } .booking_add_calendar_btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; svg { flex-shrink: 0; } } .booking_calendar_dropdown { position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: var(--shadow-md); z-index: var(--z-popup); overflow: hidden; &.hidden { display: none; } } .booking_calendar_option { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.875rem 1rem; font-size: var(--text-base); color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-border); transition: background-color 0.15s; &:last-child { border-bottom: none; } &:hover { background: var(--color-bg-light); } svg { flex-shrink: 0; color: var(--color-text-light); } } /* --- Hover states (pointer devices) --- */ @media (hover: hover) { .booking_add_btn:hover { background: rgba(var(--color-primary-rgb), 0.08); } .booking_slot_pill:not(.selected):hover { border-color: var(--color-border-hover); background: var(--color-bg-light); } .booking_gate_link:hover { text-decoration: underline; } .booking_band_back:hover, .booking_band_info:hover { background: rgba(255, 255, 255, 0.12); } } /* --- Desktop layout (≥1024px) --- */ /* On desktop the wizard becomes a single card centered in the viewport, split into two panes: the business storefront (gradient) on the left and the step content on the right — the right pane is essentially the mobile column. The compact band collapses to a bare back button — the identity and the ⓘ sheet are redundant next to the always-visible left pane. */ .booking_hero--aside { display: none; } .booking_step_title--desktop { display: none; } @media (min-width: 1024px) { .booking_body:has(.booking_shell) { align-items: center; padding: 32px; } .booking_shell { display: grid; grid-template-columns: 380px minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; max-width: 960px; min-height: min(620px, calc(100dvh - 64px)); border: 1px solid var(--color-border); border-radius: 20px; /* clip, not hidden: hidden would stop the cart bar from sticking */ overflow: clip; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12); } [data-theme="dark"] .booking_shell { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); } /* Left pane: the storefront hero stretches over the full card height */ .booking_hero { grid-column: 1; grid-row: 1 / -1; padding: 32px 28px; gap: 18px; } .booking_hero--aside { display: flex; } /* Right pane */ .booking_nav { grid-column: 2; grid-row: 1; position: static; padding: 24px 32px 0; } .booking_main { grid-column: 2; grid-row: 1 / 3; padding: 28px 32px 32px; } .booking_shell:has(.booking_nav) .booking_main { grid-row: 2 / 3; padding-top: 20px; } .booking_step_title { font-size: var(--text-2xl); } .booking_step_title--desktop { display: block; } /* The cart bar stays a bar, pinned to the bottom of the right pane */ .booking_cart_bar { grid-column: 2; grid-row: 3; padding: 14px 32px calc(14px + 0px); } .booking_footer { grid-column: 2; grid-row: 4; padding: 0 32px 18px; } /* Band collapses to a bare back button on the pane background. The .booking_nav qualifier outweighs the [data-theme="dark"] gradient. */ .booking_nav .booking_band, [data-theme="dark"] .booking_nav .booking_band { height: auto; padding: 0; background: none; } .booking_band_identity, .booking_band_info, .booking_band_spacer, .booking_band--overlay { display: none; } .booking_band_back { width: 40px; height: 40px; color: var(--color-text); border: 1px solid var(--color-border); background: var(--color-bg); &:hover { background: var(--color-bg-light); } } /* Services list reads as a bordered card inside the pane */ .booking_services_list { border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; } .booking_service_row:not(:first-child) { border-top: 1px solid var(--color-border); } /* Success page: match the wider container */ .booking_body .wizard { max-width: 640px; } } } /* @layer page */