/* booking-form-theme.css — Booking modal warm palette & input/dropdown/status styles. Extracted from calendar-theme-active.css during 2026-05 decomposition. */ /* Final warm booking form + calendar lock loaded after external CSS */ :root { --booking-warm-shell: linear-gradient(180deg, rgba(228, 211, 193, 0.96) 0%, rgba(205, 184, 163, 0.95) 100%); --booking-warm-panel: linear-gradient(180deg, rgba(245, 236, 225, 0.62) 0%, rgba(213, 193, 172, 0.42) 100%), rgba(205, 184, 163, 0.34); --booking-warm-input: linear-gradient(180deg, rgba(255, 250, 243, 0.96) 0%, rgba(239, 227, 212, 0.94) 100%); --booking-warm-input-hover: linear-gradient(180deg, rgba(255, 252, 246, 0.98) 0%, rgba(243, 232, 217, 0.96) 100%); --booking-warm-button: linear-gradient(180deg, rgba(148, 111, 82, 0.98) 0%, rgba(114, 82, 58, 0.98) 100%); --booking-warm-button-hover: linear-gradient(180deg, rgba(160, 122, 91, 0.98) 0%, rgba(124, 90, 64, 0.98) 100%); --booking-warm-border: rgba(140, 109, 83, 0.34); --booking-warm-border-strong: rgba(126, 96, 72, 0.52); --booking-warm-shadow: rgba(90, 66, 47, 0.22); --booking-warm-shadow-soft: rgba(90, 66, 47, 0.12); --booking-warm-ink: #4e392a; --booking-warm-ink-soft: rgba(78, 57, 42, 0.78); --booking-warm-ink-strong: #fffaf3; --booking-warm-cream: #fff8ef; --booking-warm-highlight: rgba(184, 146, 111, 0.18); --booking-warm-highlight-strong: rgba(184, 146, 111, 0.28); } #bookingModal .modal__content, #bookingModal.booking-modal--flat .modal__content, #bookingModal.booking-modal--flat[data-state="form"] .modal__content { background: var(--booking-warm-shell) !important; border: 1px solid rgba(255, 248, 239, 0.44) !important; box-shadow: 0 1.4rem 3rem rgba(90, 66, 47, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important; } #bookingModal .modal__title, #bookingModal .modal__title *, #bookingModal .modal__body, #bookingModal .contact-form__label, #bookingModal .contact-form__checkbox-label, #bookingModal .contact-form__terms-link, #bookingModal .contact-form__terms-word, #bookingModal .file-attach__title, #bookingModal .file-attach__drop-zone, #bookingModal .file-attach__drop-zone p, #bookingModal #bookingStatus, #bookingModal .final-result-form__hello, #bookingModal .final-result-form__lead, #bookingModal .final-result-warning { color: var(--booking-warm-ink) !important; -webkit-text-fill-color: var(--booking-warm-ink) !important; text-shadow: none !important; } #bookingModal .modal__title, #bookingModal .modal__title *, #bookingModal #modalAppointmentTime, #bookingModal #modalAppointmentTime * { color: var(--booking-warm-ink) !important; -webkit-text-fill-color: var(--booking-warm-ink) !important; } #bookingModal .booking-row__deadline-optional, #bookingModal .contact-form__input::placeholder, #bookingModal .contact-form__textarea::placeholder, #bookingModal .custom-select__trigger:not(.contact-form__input--has-content) span { color: var(--booking-warm-ink-soft) !important; -webkit-text-fill-color: var(--booking-warm-ink-soft) !important; opacity: 1 !important; } #bookingModal #bookingForm>.contact-form__group, #bookingModal #bookingForm>.contact-form__group:first-child>div[onclick*="openCalendarBtn"], #bookingModal .file-attach, #bookingModal .modal-sticky-actions, #bookingModal #bookingStatus, #bookingModal .final-result-warning { background: var(--booking-warm-panel) !important; border: 1px solid rgba(255, 248, 239, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0.7rem 1.5rem var(--booking-warm-shadow-soft) !important; } .confirm-later-btn { background: none !important; border: none !important; padding: 0 !important; margin: 0 0.15rem; cursor: pointer; box-shadow: none !important; outline: none !important; border-radius: 0 !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; display: inline-flex !important; align-items: center !important; min-width: 0 !important; min-height: 0 !important; } #bookingModal .contact-form__input, #bookingModal .contact-form__textarea, #bookingModal .custom-select__trigger, #bookingModal .booking-static-province, #bookingModal .file-attach__drop-zone { background: var(--booking-warm-input) !important; border: 1px solid var(--booking-warm-border) !important; color: var(--booking-warm-ink) !important; -webkit-text-fill-color: var(--booking-warm-ink) !important; caret-color: var(--booking-warm-ink) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 0.42rem 1rem rgba(90, 66, 47, 0.09) !important; } #bookingModal .contact-form__input:focus, #bookingModal .contact-form__textarea:focus, #bookingModal .contact-form__input:focus-visible, #bookingModal .contact-form__textarea:focus-visible, #bookingModal .custom-select__trigger:hover, #bookingModal .custom-select__trigger:focus-visible, #bookingModal .custom-select.open .custom-select__trigger, #bookingModal .booking-static-province:focus-visible, #bookingModal .file-attach__drop-zone:hover, #bookingModal .file-attach__drop-zone:focus-visible { background: var(--booking-warm-input-hover) !important; border-color: var(--booking-warm-border-strong) !important; color: var(--booking-warm-ink) !important; -webkit-text-fill-color: var(--booking-warm-ink) !important; outline: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 0 0 0.18rem rgba(184, 146, 111, 0.14), 0 0.6rem 1.24rem rgba(90, 66, 47, 0.14) !important; } /* Keep dashed upload outlines uniform (no brighter top edge). */ #bookingModal .file-attach:not(.file-attach--drag-over) .file-attach__drop-zone-file, #bookingModal .file-attach:not(.file-attach--drag-over) .file-attach__drop-zone-file:hover, #bookingModal .file-attach:not(.file-attach--drag-over) .file-attach__drop-zone-file:focus-visible, #bookingModal .file-attach__drop-zone-camera, #bookingModal .file-attach__drop-zone-camera:hover, #bookingModal .file-attach__drop-zone-camera:focus-visible { border-style: dashed !important; border-width: 3px !important; border-color: var(--form-hint-tone, #5a3d2a) !important; border-top-color: var(--form-hint-tone, #5a3d2a) !important; border-right-color: var(--form-hint-tone, #5a3d2a) !important; border-bottom-color: var(--form-hint-tone, #5a3d2a) !important; border-left-color: var(--form-hint-tone, #5a3d2a) !important; border-image: none !important; box-shadow: 0 0.42rem 1rem rgba(90, 66, 47, 0.09) !important; outline: none !important; } /* Dropdown variable palette */ #bookingModal .custom-select, #bookingModal #customSelect, #bookingModal #cityCustomSelect { --dropdown-trigger-bg: var(--booking-warm-input) !important; --dropdown-trigger-bg-active: var(--booking-warm-input-hover) !important; --dropdown-trigger-border: var(--booking-warm-border) !important; --dropdown-trigger-border-active: var(--booking-warm-border-strong) !important; --dropdown-panel-bg: linear-gradient(180deg, rgba(255, 251, 246, 0.98) 0%, rgba(239, 228, 214, 0.97) 100%) !important; --dropdown-panel-border: rgba(131, 99, 74, 0.26) !important; --dropdown-option-text: var(--booking-warm-ink) !important; --dropdown-placeholder: var(--booking-warm-ink-soft) !important; --dropdown-option-hover-bg: linear-gradient(180deg, rgba(239, 226, 210, 0.98) 0%, rgba(229, 214, 198, 0.98) 100%) !important; --dropdown-option-selected-bg: linear-gradient(180deg, rgba(228, 210, 191, 0.98) 0%, rgba(216, 195, 174, 0.98) 100%) !important; --dropdown-option-selected-text: var(--booking-warm-ink) !important; --dropdown-panel-shadow: 0 1.2rem 2.8rem rgba(90, 66, 47, 0.22), 0 0.36rem 0.82rem rgba(90, 66, 47, 0.14) !important; } #bookingModal .custom-select__trigger, #bookingModal .custom-select__trigger span, #bookingModal .custom-select.open .custom-select__trigger, #bookingModal .custom-select.open .custom-select__trigger span, #bookingModal .custom-select__trigger.contact-form__input--has-content span { color: var(--booking-warm-ink) !important; -webkit-text-fill-color: var(--booking-warm-ink) !important; text-shadow: none !important; } #bookingModal .custom-select__trigger::after, #bookingModal .custom-select__trigger:hover::after, #bookingModal .custom-select__trigger:focus-visible::after, #bookingModal .custom-select__trigger.contact-form__input--has-content::after, #bookingModal .custom-select.open .custom-select__trigger::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23553f2d' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 12 15 19 8'/%3E%3C/svg%3E") !important; } #bookingModal .custom-options { background: var(--dropdown-panel-bg) !important; border: 1px solid var(--dropdown-panel-border) !important; box-shadow: var(--dropdown-panel-shadow) !important; backdrop-filter: blur(10px) saturate(110%) !important; -webkit-backdrop-filter: blur(10px) saturate(110%) !important; } #bookingModal .custom-options::-webkit-scrollbar-thumb { background: rgba(131, 99, 74, 0.44) !important; } #bookingModal .custom-options::-webkit-scrollbar-track { background: rgba(196, 176, 155, 0.26) !important; } /* Inset dropdown scrollbars so the thumb starts/ends inside the panel. */ .custom-options::-webkit-scrollbar-track, #bookingModal .custom-options::-webkit-scrollbar-track, #floatingCustomSelectLayer .custom-options.custom-options--floating::-webkit-scrollbar-track { margin-block: 0.9rem; border-radius: 999px; } #bookingModal .custom-option { background: transparent !important; border: 1px solid transparent !important; color: var(--booking-warm-ink) !important; -webkit-text-fill-color: var(--booking-warm-ink) !important; } #bookingModal .custom-option:hover, #bookingModal .custom-option:focus-visible { background: var(--dropdown-option-hover-bg) !important; border-color: rgba(131, 99, 74, 0.22) !important; color: var(--booking-warm-ink) !important; -webkit-text-fill-color: var(--booking-warm-ink) !important; outline: none !important; } #bookingModal .custom-option.selected { background: var(--dropdown-option-selected-bg) !important; border-color: rgba(118, 87, 64, 0.28) !important; color: var(--booking-warm-ink) !important; -webkit-text-fill-color: var(--booking-warm-ink) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0.22rem 0.44rem rgba(90, 66, 47, 0.08) !important; } #bookingModal .custom-option.selected::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23553f2d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7.2'/%3E%3C/svg%3E") !important; filter: none !important; } #bookingModal :is(button, input, textarea, .custom-select__trigger, .custom-option, .contact-form__checkbox) { -webkit-tap-highlight-color: rgba(184, 146, 111, 0.18); } /* Status alert palettes */ #bookingModal #bookingStatus.status-alert--success { --booking-status-fg: #5a412e !important; --booking-status-border: rgba(131, 99, 74, 0.34) !important; --booking-status-bg: rgba(241, 231, 218, 0.96) !important; --booking-status-pulse: rgba(184, 146, 111, 0.2) !important; } #bookingModal #bookingStatus.status-alert--warning { --booking-status-fg: #5a412e !important; --booking-status-border: rgba(156, 117, 85, 0.36) !important; --booking-status-bg: rgba(244, 229, 210, 0.96) !important; --booking-status-pulse: rgba(184, 146, 111, 0.22) !important; } #bookingModal #bookingStatus.status-alert--error { --booking-status-fg: #5c3b32 !important; --booking-status-border: rgba(148, 95, 83, 0.34) !important; --booking-status-bg: rgba(238, 219, 212, 0.96) !important; --booking-status-pulse: rgba(148, 95, 83, 0.18) !important; } #bookingModal .contact-form__checkbox, #bookingModal .contact-form__checkbox-wrapper.file-attach__terms .contact-form__checkbox { border-color: var(--booking-warm-border) !important; } /* Selected dropdown (e.g. Services) must look identical to the province field (Ontario). This override sits at the very end of the last theme file to beat all legacy !important rules. */ #bookingModal .custom-select__trigger.contact-form__input--has-content { background: var(--booking-warm-input) !important; border: 1px solid var(--booking-warm-border) !important; box-shadow: 0 0.54rem 1.2rem rgba(58, 42, 29, 0.2) !important; } #bookingModal .custom-select__trigger.contact-form__input--has-content span { font-weight: 900 !important; opacity: 1 !important; color: #3a2a1a !important; -webkit-text-fill-color: #3a2a1a !important; line-height: 1.3 !important; }