/* calendar-redesign-experimental.css - Experimental calendar themes: apple-glass, minimal, FAQ chat, 2x book buttons */ /* ------------------- APPLE LIQUID GLASS CALENDAR REDESIGN ------------------- */ .layout-container #bookingCalendar.calendar-wrapper, .form-calendar-overlay__mount #bookingCalendar.calendar-wrapper { --apple-cal-ink: rgba(73, 53, 36, 0.98); --apple-cal-ink-soft: rgba(101, 75, 52, 0.9); --apple-cal-border: rgba(122, 94, 68, 0.52); --apple-cal-border-soft: rgba(122, 94, 68, 0.32); --apple-cal-surface: radial-gradient(135% 90% at 8% -18%, rgba(255, 233, 211, 0.48) 0%, rgba(255, 233, 211, 0) 58%), radial-gradient(120% 92% at 96% 108%, rgba(255, 244, 230, 0.35) 0%, rgba(255, 244, 230, 0) 62%), linear-gradient(162deg, rgba(255, 255, 255, 0.74) 0%, rgba(248, 238, 226, 0.62) 52%, rgba(236, 219, 199, 0.58) 100%), rgba(225, 205, 183, 0.52); --apple-cal-surface-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(245, 233, 220, 0.76) 100%), rgba(226, 207, 186, 0.56); --apple-cal-surface-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 236, 225, 0.88) 100%), rgba(234, 215, 194, 0.68); --apple-cal-surface-active: linear-gradient(180deg, rgba(133, 100, 69, 0.9) 0%, rgba(109, 81, 56, 0.9) 100%), rgba(120, 89, 61, 0.88); --apple-cal-shadow: 0 0.3rem 0.82rem rgba(212, 184, 154, 0.15), inset 0 1px 0 rgba(212, 184, 154, 0.35); --apple-cal-shadow-soft: 0 0.22rem 0.68rem rgba(212, 184, 154, 0.1), inset 0 1px 0 rgba(212, 184, 154, 0.25); --apple-cal-shadow-hover: 0 4px 15px rgba(212, 184, 154, 0.2), inset 0 1px 0 rgba(212, 184, 154, 0.4); /* TODO-DELETE if stable after test: background: var(--apple-cal-surface) !important */ /* TODO-DELETE if stable after test: border: 1px solid var(--apple-cal-border) !important */ /* TODO-DELETE if stable after test: border-radius: 2rem !important */ /* TODO-DELETE if stable after test: box-shadow: var(--apple-cal-shadow) !important */ /* TODO-DELETE if stable after test: backdrop-filter: blur(14px) saturate(118%) !important */ /* TODO-DELETE if stable after test: -webkit-backdrop-filter: blur(14px) saturate(118%) !important */ /* TODO-DELETE if stable after test: padding: 1.04rem !important */ /* TODO-DELETE if stable after test: overflow: hidden !important */ position: relative !important; isolation: isolate; } .layout-container #bookingCalendar.calendar-wrapper::before, .form-calendar-overlay__mount #bookingCalendar.calendar-wrapper::before { /* TODO-DELETE if stable after test: content: "" !important */ position: absolute; inset: 1px; border-radius: calc(2rem - 1px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.54) 0%, rgba(255, 255, 255, 0.16) 24%, rgba(255, 255, 255, 0) 48%), radial-gradient(88% 68% at 100% 0%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 58%); opacity: 0.94; pointer-events: none; z-index: 0; animation: appleCalendarSpecular 10.8s ease-in-out infinite; } .layout-container #bookingCalendar.calendar-wrapper::after, .form-calendar-overlay__mount #bookingCalendar.calendar-wrapper::after { /* TODO-DELETE if stable after test: content: "" !important */ position: absolute; /* TODO-DELETE if stable after test: inset: auto 12% -0.84rem 12% !important */ /* TODO-DELETE if stable after test: height: 1.72rem !important */ /* TODO-DELETE if stable after test: border-radius: 999px !important */ /* TODO-DELETE if stable after test: background: radial-gradient(58% 100% at 50% 0%, rgba(212, 184, 154, 0.34) 0%, rgba(212, 184, 154, 0.14) 50%, rgba(212, 184, 154, 0) 100%) !important */ filter: blur(7px); /* TODO-DELETE if stable after test: opacity: 0.86 !important */ pointer-events: none; z-index: 0; } .layout-container #bookingCalendar>*, .form-calendar-overlay__mount #bookingCalendar>* { position: relative; z-index: 1; } .layout-container #bookingCalendar .calendar-header, .form-calendar-overlay__mount #bookingCalendar .calendar-header { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; justify-items: center !important; /* TODO-DELETE if stable after test: margin-bottom: 1rem !important */ /* TODO-DELETE if stable after test: padding: 0.62rem 0.84rem !important */ /* TODO-DELETE if stable after test: gap: 0.9rem !important */ } .layout-container #bookingCalendar #monthDisplay, .form-calendar-overlay__mount #bookingCalendar #monthDisplay { /* TODO-DELETE if stable after test: width: 100% !important */ /* TODO-DELETE if stable after test: text-align: center !important */ justify-self: center !important; margin: 0 auto !important; } .layout-container #bookingCalendar .calendar-title, .form-calendar-overlay__mount #bookingCalendar .calendar-title { /* TODO-DELETE if stable after test: display: flex !important */ /* TODO-DELETE if stable after test: flex-direction: column !important */ /* TODO-DELETE if stable after test: align-items: center !important */ /* TODO-DELETE if stable after test: justify-content: center !important */ text-align: center !important; /* TODO-DELETE if stable after test: width: 100% !important */ } .layout-container #bookingCalendar .calendar-title .cal-selected-day .cal-weekday, .layout-container #bookingCalendar .calendar-title .cal-selected-day .cal-day-number, .form-calendar-overlay__mount #bookingCalendar .calendar-title .cal-selected-day .cal-weekday, .form-calendar-overlay__mount #bookingCalendar .calendar-title .cal-selected-day .cal-day-number { display: inline-block !important; line-height: inherit !important; } .layout-container #bookingCalendar .calendar-title .cal-selected-day .cal-day-number, .form-calendar-overlay__mount #bookingCalendar .calendar-title .cal-selected-day .cal-day-number { min-width: 1.6ch; text-align: center; font-variant-numeric: tabular-nums; } .layout-container #bookingCalendar .calendar-title .cal-selected-day, .layout-container #bookingCalendar .cal-day-name, .layout-container #bookingCalendar #slotsDayDisplay, .layout-container #bookingCalendar .slot-date-legal, .form-calendar-overlay__mount #bookingCalendar .calendar-title .cal-selected-day, .form-calendar-overlay__mount #bookingCalendar .cal-day-name, .form-calendar-overlay__mount #bookingCalendar #slotsDayDisplay, .form-calendar-overlay__mount #bookingCalendar .slot-date-legal { color: rgba(96, 70, 47, 0.9) !important; } .layout-container #bookingCalendar .calendar-nav-btn:active, .form-calendar-overlay__mount #bookingCalendar .calendar-nav-btn:active { transform: translateY(0) !important; } .layout-container #bookingCalendar .calendar-nav-btn:disabled, .layout-container #bookingCalendar .calendar-nav-btn[aria-disabled="true"], .layout-container #bookingCalendar #prevBtn:disabled, .layout-container #bookingCalendar #prevBtn[aria-disabled="true"], .layout-container #bookingCalendar #prevBtn.calendar-nav-btn--muted, .layout-container #bookingCalendar #prevBtn.calendar-nav-btn--muted:disabled, .layout-container #bookingCalendar #prevBtn.calendar-nav-btn--muted[aria-disabled="true"], .form-calendar-overlay__mount #bookingCalendar .calendar-nav-btn:disabled, .form-calendar-overlay__mount #bookingCalendar .calendar-nav-btn[aria-disabled="true"], .form-calendar-overlay__mount #bookingCalendar #prevBtn:disabled, .form-calendar-overlay__mount #bookingCalendar #prevBtn[aria-disabled="true"], .form-calendar-overlay__mount #bookingCalendar #prevBtn.calendar-nav-btn--muted, .form-calendar-overlay__mount #bookingCalendar #prevBtn.calendar-nav-btn--muted:disabled, .form-calendar-overlay__mount #bookingCalendar #prevBtn.calendar-nav-btn--muted[aria-disabled="true"] { /* TODO-DELETE if stable after test: background: rgba(255, 255, 255, 0.58) !important */ /* TODO-DELETE if stable after test: border-color: rgba(122, 94, 68, 0.26) !important */ /* TODO-DELETE if stable after test: color: rgba(122, 94, 68, 0.58) !important */ /* TODO-DELETE if stable after test: box-shadow: none !important */ /* TODO-DELETE if stable after test: opacity: 0.74 !important */ transform: none !important; } .layout-container #bookingCalendar .cal-day-name, .form-calendar-overlay__mount #bookingCalendar .cal-day-name { /* TODO-DELETE if stable after test: margin-bottom: 0.42rem !important */ /* TODO-DELETE if stable after test: font-size: 0.74rem !important */ /* TODO-DELETE if stable after test: letter-spacing: 0.16em !important */ /* TODO-DELETE if stable after test: font-weight: 700 !important */ text-transform: uppercase; } .layout-container #bookingCalendar .cal-day::before, .form-calendar-overlay__mount #bookingCalendar .cal-day::before { /* TODO-DELETE if stable after test: content: "" !important */ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 58%); pointer-events: none; opacity: 0.9; } .layout-container #bookingCalendar .cal-day--today, .form-calendar-overlay__mount #bookingCalendar .cal-day--today { /* TODO-DELETE if stable after test: border-color: rgba(255, 255, 255, 0.72) !important */ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24), var(--apple-cal-shadow-soft) !important; } .layout-container #bookingCalendar #slotsDayDisplay, .form-calendar-overlay__mount #bookingCalendar #slotsDayDisplay { /* TODO-DELETE if stable after test: font-size: clamp(0.98rem, 2.65vw, 1.24rem) !important */ /* TODO-DELETE if stable after test: font-weight: 700 !important */ /* TODO-DELETE if stable after test: letter-spacing: 0.1em !important */ text-transform: uppercase; /* TODO-DELETE if stable after test: min-height: 2.24rem !important */ /* TODO-DELETE if stable after test: line-height: 1.25 !important */ /* TODO-DELETE if stable after test: text-align: center !important */ /* TODO-DELETE if stable after test: justify-content: center !important */ /* TODO-DELETE if stable after test: margin: 0 !important */ } .layout-container #bookingCalendar .slots-grid .slot-btn, .layout-container #bookingCalendar .slots-grid .slot-btn:focus-visible, .form-calendar-overlay__mount #bookingCalendar .slots-grid .slot-btn, .form-calendar-overlay__mount #bookingCalendar .slots-grid .slot-btn:focus-visible { display: grid !important; grid-template-columns: 2.92rem minmax(0, 1fr) !important; align-items: center !important; gap: 0.78rem !important; width: 100% !important; min-height: 4.76rem !important; padding: 0.86rem 0.98rem !important; /* TODO-DELETE if stable after test: border-radius: 1.26rem !important */ /* TODO-DELETE if stable after test: background: var(--apple-cal-surface-panel) !important */ /* TODO-DELETE if stable after test: border: 1px solid var(--apple-cal-border-soft) !important */ /* TODO-DELETE if stable after test: box-shadow: var(--apple-cal-shadow-soft) !important */ /* TODO-DELETE if stable after test: color: var(--apple-cal-ink) !important */ /* TODO-DELETE if stable after test: backdrop-filter: blur(16px) saturate(124%) !important */ /* TODO-DELETE if stable after test: -webkit-backdrop-filter: blur(16px) saturate(124%) !important */ transition: background 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease, transform 0.26s ease !important; } @keyframes appleCalendarSpecular { 0%, 100% { opacity: 0.38; transform: translateY(0); } 50% { opacity: 0.52; transform: translateY(-0.14rem); } } /* ------------------- MINIMAL CALENDAR THEME (SITE-ALIGNED) ------------------- */ .layout-container #bookingCalendar.calendar-wrapper, .form-calendar-overlay__mount #bookingCalendar.calendar-wrapper { --calendar-min-bg: radial-gradient(128% 120% at 0% 0%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 58%), linear-gradient(180deg, rgba(var(--site-bg-light-rgb), 0.15) 0%, rgba(var(--site-bg-mid-rgb), 0.1) 52%, rgba(var(--site-bg-dark-rgb), 0.2) 100%), rgba(var(--site-bg-dark-rgb), 0.2); --calendar-min-bg-strong: linear-gradient(145deg, rgba(var(--site-bg-light-rgb), 0.26) 0%, rgba(var(--site-bg-mid-rgb), 0.14) 100%), rgba(var(--site-bg-dark-rgb), 0.24); --calendar-min-border: rgba(255, 236, 214, 0.34); --calendar-min-border-soft: rgba(var(--site-bg-light-rgb), 0.24); --calendar-min-ink: rgba(255, 255, 255, 0.96); --calendar-min-ink-muted: rgba(255, 255, 255, 0.68); --calendar-min-accent: rgba(var(--modal-design-tone-rgb), 0.94); --calendar-min-accent-soft: rgba(var(--modal-design-tone-rgb), 0.82); /* TODO-DELETE if stable after test: background: var(--calendar-min-bg) !important */ /* TODO-DELETE if stable after test: border: 1px solid var(--calendar-min-border) !important */ /* TODO-DELETE if stable after test: border-radius: 1rem !important */ /* TODO-DELETE if stable after test: box-shadow: 0 1.15rem 2.5rem rgba(var(--site-bg-shadow-rgb), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important */ padding: 0.9rem !important; /* TODO-DELETE if stable after test: backdrop-filter: none !important */ /* TODO-DELETE if stable after test: -webkit-backdrop-filter: none !important */ } .layout-container #bookingCalendar .calendar-header, .form-calendar-overlay__mount #bookingCalendar .calendar-header { margin-bottom: 0.8rem !important; /* TODO-DELETE if stable after test: padding: 0.58rem 0.68rem !important */ gap: 0.66rem !important; } .layout-container #bookingCalendar #monthDisplay, .form-calendar-overlay__mount #bookingCalendar #monthDisplay { width: 100% !important; text-align: center !important; } .layout-container #bookingCalendar .calendar-title, .form-calendar-overlay__mount #bookingCalendar .calendar-title { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; } .layout-container #bookingCalendar .calendar-title, .layout-container #bookingCalendar .calendar-title span, .layout-container #bookingCalendar .cal-day-name, .layout-container #bookingCalendar #slotsDayDisplay, .layout-container #bookingCalendar .slot-date-legal, .form-calendar-overlay__mount #bookingCalendar .calendar-title, .form-calendar-overlay__mount #bookingCalendar .calendar-title span, .form-calendar-overlay__mount #bookingCalendar .cal-day-name, .form-calendar-overlay__mount #bookingCalendar #slotsDayDisplay, .form-calendar-overlay__mount #bookingCalendar .slot-date-legal { /* TODO-DELETE if stable after test: color: var(--calendar-min-ink) !important */ /* TODO-DELETE if stable after test: text-shadow: none !important */ background: transparent !important; border: none !important; box-shadow: none !important; } .layout-container #bookingCalendar .calendar-title .cal-month, .layout-container #bookingCalendar .calendar-title .cal-selected-day, .form-calendar-overlay__mount #bookingCalendar .calendar-title .cal-month, .form-calendar-overlay__mount #bookingCalendar .calendar-title .cal-selected-day { /* TODO-DELETE if stable after test: font-size: 1.18rem !important */ /* TODO-DELETE if stable after test: letter-spacing: 0.08em !important */ /* TODO-DELETE if stable after test: line-height: 1.14 !important */ font-weight: 800 !important; text-transform: uppercase !important; } .layout-container #bookingCalendar .calendar-title .cal-selected-day, .form-calendar-overlay__mount #bookingCalendar .calendar-title .cal-selected-day { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.3rem !important; } .layout-container #bookingCalendar .calendar-nav-btn, .form-calendar-overlay__mount #bookingCalendar .calendar-nav-btn { width: var(--calendar-day-btn-size, 2.76rem) !important; height: var(--calendar-day-btn-size, 2.76rem) !important; /* TODO-DELETE if stable after test: border-radius: 0.66rem !important */ /* TODO-DELETE if stable after test: border: 1px solid var(--calendar-min-border) !important */ /* TODO-DELETE if stable after test: background: linear-gradient(145deg, rgba(var(--site-bg-light-rgb), 0.18) 0%, rgba(var(--site-bg-mid-rgb), 0.08) 100%), rgba(var(--site-bg-dark-rgb), 0.2) !important */ /* TODO-DELETE if stable after test: color: var(--calendar-min-ink) !important */ /* TODO-DELETE if stable after test: box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0.3rem 0.75rem rgba(var(--site-bg-shadow-rgb), 0.12) !important */ transform: none !important; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important; } .layout-container #bookingCalendar .calendar-nav-btn:hover, .layout-container #bookingCalendar .calendar-nav-btn:focus-visible, .form-calendar-overlay__mount #bookingCalendar .calendar-nav-btn:hover, .form-calendar-overlay__mount #bookingCalendar .calendar-nav-btn:focus-visible { /* TODO-DELETE if stable after test: background: var(--calendar-min-bg-strong) !important */ /* TODO-DELETE if stable after test: border-color: rgba(255, 236, 214, 0.52) !important */ /* TODO-DELETE if stable after test: color: #ffffff !important */ transform: none !important; /* TODO-DELETE if stable after test: box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0.42rem 0.94rem rgba(var(--site-bg-shadow-rgb), 0.16) !important */ } .layout-container #bookingCalendar .calendar-nav-btn:disabled, .layout-container #bookingCalendar .calendar-nav-btn[aria-disabled="true"], .layout-container #bookingCalendar #prevBtn:disabled, .layout-container #bookingCalendar #prevBtn[aria-disabled="true"], .layout-container #bookingCalendar #prevBtn.calendar-nav-btn--muted, .layout-container #bookingCalendar #prevBtn.calendar-nav-btn--muted:disabled, .layout-container #bookingCalendar #prevBtn.calendar-nav-btn--muted[aria-disabled="true"], .form-calendar-overlay__mount #bookingCalendar .calendar-nav-btn:disabled, .form-calendar-overlay__mount #bookingCalendar .calendar-nav-btn[aria-disabled="true"], .form-calendar-overlay__mount #bookingCalendar #prevBtn:disabled, .form-calendar-overlay__mount #bookingCalendar #prevBtn[aria-disabled="true"], .form-calendar-overlay__mount #bookingCalendar #prevBtn.calendar-nav-btn--muted, .form-calendar-overlay__mount #bookingCalendar #prevBtn.calendar-nav-btn--muted:disabled, .form-calendar-overlay__mount #bookingCalendar #prevBtn.calendar-nav-btn--muted[aria-disabled="true"] { background: rgba(var(--site-bg-dark-rgb), 0.18) !important; border-color: rgba(var(--site-bg-light-rgb), 0.14) !important; color: rgba(255, 255, 255, 0.38) !important; opacity: 0.72 !important; box-shadow: none !important; } .layout-container #bookingCalendar .calendar-grid, .form-calendar-overlay__mount #bookingCalendar .calendar-grid { gap: 0.44rem !important; grid-auto-rows: auto !important; align-content: start !important; align-items: start !important; min-height: clamp(15rem, 33vh, 20rem) !important; } .layout-container #bookingCalendar .cal-day-name, .form-calendar-overlay__mount #bookingCalendar .cal-day-name { margin-bottom: 0.38rem !important; /* TODO-DELETE if stable after test: font-size: 0.72rem !important */ /* TODO-DELETE if stable after test: letter-spacing: 0.14em !important */ font-weight: 700 !important; /* TODO-DELETE if stable after test: color: var(--calendar-min-ink-muted) !important */ text-transform: uppercase; } .layout-container #bookingCalendar .cal-day, .form-calendar-overlay__mount #bookingCalendar .cal-day { display: grid !important; place-items: center !important; /* TODO-DELETE if stable after test: border-radius: 0.66rem !important */ border: 1px solid var(--calendar-min-border-soft) !important; background: linear-gradient(145deg, rgba(var(--site-bg-light-rgb), 0.12) 0%, rgba(var(--site-bg-mid-rgb), 0.06) 100%), rgba(var(--site-bg-dark-rgb), 0.14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0.22rem 0.62rem rgba(var(--site-bg-shadow-rgb), 0.08) !important; /* TODO-DELETE if stable after test: color: var(--calendar-min-ink) !important */ /* TODO-DELETE if stable after test: font-size: 0.95rem !important */ /* TODO-DELETE if stable after test: font-weight: 700 !important */ position: relative !important; overflow: hidden !important; transform: none !important; /* TODO-DELETE if stable after test: transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important */ } .layout-container #bookingCalendar .cal-day--empty, .form-calendar-overlay__mount #bookingCalendar .cal-day--empty { background: transparent !important; border-color: transparent !important; box-shadow: none !important; cursor: default !important; } .layout-container #bookingCalendar .cal-day--has-slots, .layout-container #bookingCalendar .cal-day--closed, .form-calendar-overlay__mount #bookingCalendar .cal-day--has-slots, .form-calendar-overlay__mount #bookingCalendar .cal-day--closed { background: linear-gradient(145deg, rgba(var(--site-bg-light-rgb), 0.16) 0%, rgba(var(--site-bg-mid-rgb), 0.08) 100%), rgba(var(--site-bg-dark-rgb), 0.16) !important; border-color: rgba(var(--site-bg-light-rgb), 0.3) !important; } .layout-container #bookingCalendar .cal-day--nearest, .form-calendar-overlay__mount #bookingCalendar .cal-day--nearest { border-color: rgba(255, 236, 214, 0.62) !important; /* TODO-DELETE if stable after test: box-shadow: inset 0 0 0 1px rgba(255, 236, 214, 0.28), 0 0.42rem 0.9rem rgba(var(--site-bg-shadow-rgb), 0.14) !important */ animation: none !important; } .layout-container #bookingCalendar .cal-day--busy, .layout-container #bookingCalendar .cal-day--disabled, .form-calendar-overlay__mount #bookingCalendar .cal-day--busy, .form-calendar-overlay__mount #bookingCalendar .cal-day--disabled { /* TODO-DELETE if stable after test: background: rgba(var(--site-bg-dark-rgb), 0.14) !important */ /* TODO-DELETE if stable after test: border-color: rgba(var(--site-bg-light-rgb), 0.12) !important */ /* TODO-DELETE if stable after test: color: rgba(255, 255, 255, 0.36) !important */ /* TODO-DELETE if stable after test: box-shadow: none !important */ opacity: 0.62 !important; transform: none !important; } .layout-container #bookingCalendar .cal-day--disabled:not(.cal-day--sunday), .form-calendar-overlay__mount #bookingCalendar .cal-day--disabled:not(.cal-day--sunday) { border-radius: 999px !important; } .layout-container #bookingCalendar .slots-nav, .form-calendar-overlay__mount #bookingCalendar .slots-nav { /* TODO-DELETE if stable after test: margin: 1.08rem 0 0.74rem !important */ /* TODO-DELETE if stable after test: padding: 0.4rem 0.58rem !important */ /* TODO-DELETE if stable after test: min-height: 2.68rem !important */ /* TODO-DELETE if stable after test: display: grid !important */ place-items: center !important; /* TODO-DELETE if stable after test: background: linear-gradient(145deg, rgba(var(--site-bg-light-rgb), 0.3) 0%, rgba(var(--site-bg-mid-rgb), 0.2) 100%), rgba(var(--site-bg-dark-rgb), 0.42) !important */ /* TODO-DELETE if stable after test: border: none !important */ /* TODO-DELETE if stable after test: box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0.26rem 0.62rem rgba(var(--site-bg-shadow-rgb), 0.18) !important */ } .layout-container #bookingCalendar #slotsDayDisplay, .form-calendar-overlay__mount #bookingCalendar #slotsDayDisplay { /* TODO-DELETE if stable after test: font-size: clamp(0.9rem, 2.5vw, 1.08rem) !important */ /* TODO-DELETE if stable after test: font-weight: 700 !important */ /* TODO-DELETE if stable after test: letter-spacing: 0.08em !important */ text-transform: uppercase; min-height: 100% !important; height: 100% !important; /* TODO-DELETE if stable after test: line-height: 1 !important */ /* TODO-DELETE if stable after test: text-align: center !important */ /* TODO-DELETE if stable after test: margin: 0 !important */ width: 100% !important; /* TODO-DELETE if stable after test: display: flex !important */ align-items: center !important; justify-content: center !important; transform: translateY(0.03em) !important; /* TODO-DELETE if stable after test: color: var(--calendar-min-ink) !important */ } .layout-container #bookingCalendar .slots-grid, .form-calendar-overlay__mount #bookingCalendar .slots-grid { grid-template-columns: 1fr !important; gap: 0.54rem !important; width: 100% !important; margin-top: 0 !important; } .layout-container #bookingCalendar .slots-grid .slot-btn, .form-calendar-overlay__mount #bookingCalendar .slots-grid .slot-btn { grid-template-columns: minmax(0, 1fr) !important; gap: 0.86rem !important; /* TODO-DELETE if stable after test: min-height: 6.4rem !important */ /* TODO-DELETE if stable after test: padding: 0.92rem 1.04rem !important */ /* TODO-DELETE if stable after test: border-radius: 0.72rem !important */ /* TODO-DELETE if stable after test: background: linear-gradient(145deg, rgba(var(--site-bg-light-rgb), 0.42) 0%, rgba(var(--site-bg-mid-rgb), 0.26) 100%), rgba(var(--site-bg-dark-rgb), 0.5) !important */ /* TODO-DELETE if stable after test: border: none !important */ /* TODO-DELETE if stable after test: box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0.42rem 0.92rem rgba(var(--site-bg-shadow-rgb), 0.28) !important */ /* TODO-DELETE if stable after test: color: var(--calendar-min-ink) !important */ /* TODO-DELETE if stable after test: backdrop-filter: none !important */ /* TODO-DELETE if stable after test: -webkit-backdrop-filter: none !important */ transform: none !important; opacity: 1 !important; transition: opacity 1.8s ease, background 1.8s ease, color 1.8s ease, box-shadow 1.8s ease, border-color 1.8s ease, transform 1.8s ease !important; } .layout-container #bookingCalendar .slots-grid .slot-btn:focus-visible, .form-calendar-overlay__mount #bookingCalendar .slots-grid .slot-btn:focus-visible { /* TODO-DELETE if stable after test: background: var(--calendar-min-bg-strong) !important */ /* TODO-DELETE if stable after test: border: none !important */ /* TODO-DELETE if stable after test: box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0.46rem 0.96rem rgba(var(--site-bg-shadow-rgb), 0.24) !important */ /* TODO-DELETE if stable after test: color: #ffffff !important */ opacity: 1 !important; transform: none !important; } .layout-container #bookingCalendar .slots-grid .slot-btn:active, .layout-container #bookingCalendar .slots-grid .slot-btn.slot-btn--clicked, .form-calendar-overlay__mount #bookingCalendar .slots-grid .slot-btn:active, .form-calendar-overlay__mount #bookingCalendar .slots-grid .slot-btn.slot-btn--clicked { /* TODO-DELETE if stable after test: background: var(--calendar-min-accent-soft) !important */ /* TODO-DELETE if stable after test: border: none !important */ /* TODO-DELETE if stable after test: color: #ffffff !important */ /* TODO-DELETE if stable after test: box-shadow: inset 0 1px 0 rgba(255, 243, 226, 0.24), 0 0.48rem 0.98rem rgba(var(--site-bg-shadow-rgb), 0.16) !important */ transform: none !important; } .layout-container #bookingCalendar .slot-btn--hypnotic, .form-calendar-overlay__mount #bookingCalendar .slot-btn--hypnotic { animation: none !important; } .layout-container #bookingCalendar .slot-icon-wrapper, .form-calendar-overlay__mount #bookingCalendar .slot-icon-wrapper { display: none !important; /* TODO-DELETE if stable after test: width: 0 !important */ /* TODO-DELETE if stable after test: height: 0 !important */ /* TODO-DELETE if stable after test: border-radius: 0 !important */ align-items: center !important; justify-content: center !important; /* TODO-DELETE if stable after test: background: transparent !important */ /* TODO-DELETE if stable after test: border: none !important */ /* TODO-DELETE if stable after test: box-shadow: none !important */ } .layout-container #bookingCalendar .slot-time, .form-calendar-overlay__mount #bookingCalendar .slot-time { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.2rem !important; /* TODO-DELETE if stable after test: font-size: 1.2rem !important */ /* TODO-DELETE if stable after test: line-height: 1.12 !important */ letter-spacing: 0.02em !important; /* TODO-DELETE if stable after test: color: var(--calendar-min-ink) !important */ width: 100% !important; text-align: center !important; } .layout-container #bookingCalendar .slot-time .slot-time-main, .form-calendar-overlay__mount #bookingCalendar .slot-time .slot-time-main { display: block !important; /* TODO-DELETE if stable after test: font-size: 1.56rem !important */ font-weight: 800 !important; /* TODO-DELETE if stable after test: letter-spacing: 0.03em !important */ /* TODO-DELETE if stable after test: color: #ffffff !important */ width: 100% !important; text-align: center !important; } .layout-container #bookingCalendar .slot-date-legal, .form-calendar-overlay__mount #bookingCalendar .slot-date-legal { display: block !important; /* TODO-DELETE if stable after test: opacity: 0.72 !important */ /* TODO-DELETE if stable after test: font-size: 0.96rem !important */ /* TODO-DELETE if stable after test: letter-spacing: 0.03em !important */ /* TODO-DELETE if stable after test: color: var(--calendar-min-ink-muted) !important */ width: 100% !important; text-align: center !important; } .cal-key-img, .cal-key-svg { width: clamp(1.8rem, 72%, 2.7rem) !important; height: auto !important; max-width: 92% !important; max-height: 92% !important; filter: none !important; } /* ------------------- FAQ CHAT STYLE (LEFT QUESTION / RIGHT ANSWER) ------------------- */ .layout-container #faqSpoiler { --faq-cal-bg: rgba(255, 255, 255, 0.06); --faq-cal-bg-strong: rgba(255, 255, 255, 0.14); --faq-cal-border: rgba(255, 255, 255, 0.28); --faq-cal-border-soft: rgba(255, 255, 255, 0.18); --faq-cal-ink: rgba(255, 255, 255, 0.96); --faq-cal-ink-muted: rgba(255, 255, 255, 0.76); display: flex; flex-direction: column; gap: 0.86rem; margin-top: 0.22rem; } .layout-container #faqSpoiler .faq__item { margin: 0 !important; padding: 0 !important; width: 100%; display: flex; flex-direction: column; gap: 0.45rem; } .layout-container #faqSpoiler .faq__question, .layout-container #faqSpoiler .faq__answer, .layout-container #faqSpoiler .faq__item.is-open .faq__answer { border: 1px solid var(--faq-cal-border-soft) !important; background: var(--faq-cal-bg) !important; box-shadow: 0 0.34rem 0.84rem rgba(var(--site-bg-shadow-rgb), 0.12), 0 0.08rem 0.2rem rgba(var(--site-bg-shadow-rgb), 0.06) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important; } .layout-container #faqSpoiler .faq__question { /* TODO-DELETE if stable after test: align-self: flex-start !important */ width: min(100%, 432px) !important; max-width: 432px !important; margin: 0 !important; padding: 0.82rem 0.96rem !important; border-radius: 0.98rem 0.98rem 0.98rem 0.48rem !important; color: var(--faq-cal-ink) !important; /* TODO-DELETE if stable after test: font-size: clamp(0.95rem, 2.7vw, 1.03rem) !important */ /* TODO-DELETE if stable after test: line-height: 1.35 !important */ /* TODO-DELETE if stable after test: letter-spacing: 0.015em !important */ /* TODO-DELETE if stable after test: text-transform: none !important */ cursor: default !important; } .layout-container #faqSpoiler .faq__question:hover { background: var(--faq-cal-bg-strong) !important; border-color: var(--faq-cal-border) !important; box-shadow: 0 0.46rem 1.02rem rgba(var(--site-bg-shadow-rgb), 0.16), 0 0.14rem 0.3rem rgba(var(--site-bg-shadow-rgb), 0.08) !important; transform: none !important; } .layout-container #faqSpoiler .faq__answer, .layout-container #faqSpoiler .faq__item.is-open .faq__answer { /* TODO-DELETE if stable after test: align-self: center !important */ width: min(100%, 432px) !important; max-width: 432px !important; max-height: none !important; overflow: visible !important; opacity: 1 !important; margin: 0 auto !important; padding: 0.84rem 0.96rem !important; border-radius: 0.98rem 0.98rem 0.48rem 0.98rem !important; color: var(--faq-cal-ink-muted) !important; /* TODO-DELETE if stable after test: line-height: 1.6 !important */ /* TODO-DELETE if stable after test: letter-spacing: 0.01em !important */ } .layout-container #faqSpoiler .faq__answer:hover, .layout-container #faqSpoiler .faq__item.is-open .faq__answer:hover { background: var(--faq-cal-bg-strong) !important; border-color: var(--faq-cal-border) !important; box-shadow: 0 0.46rem 1.02rem rgba(var(--site-bg-shadow-rgb), 0.16), 0 0.14rem 0.3rem rgba(var(--site-bg-shadow-rgb), 0.08) !important; transform: none !important; } .layout-container #faqSpoiler .faq__question::before, .layout-container #faqSpoiler .faq__question::after, .layout-container #faqSpoiler .faq__answer::before, .layout-container #faqSpoiler .faq__answer::after { content: none !important; display: none !important; } .layout-container #faqSpoiler .faq__answer>p { margin: 0 0 0.52rem !important; padding: 0 !important; } .layout-container #faqSpoiler .faq__answer>p:last-child { margin-bottom: 0 !important; } .layout-container #faqSpoiler .faq__answer--map, .layout-container #faqSpoiler .faq__item.is-open .faq__answer--map { /* TODO-DELETE if stable after test: align-self: center !important */ width: min(100%, 432px) !important; max-width: 432px !important; max-height: 460px !important; /* TODO-DELETE if stable after test: margin-left: auto !important */ /* TODO-DELETE if stable after test: margin-right: auto !important */ overflow: hidden !important; border-radius: 0.86rem !important; } .layout-container #faqSpoiler .faq__answer--map .map-container { width: 100%; height: clamp(14rem, 46vw, 20.5rem) !important; } /* ------------------- BOOK BUTTONS (2X SIZE) ------------------- */ #headerBookBtn, #footerBookBtn { width: auto !important; max-width: 20rem !important; min-width: 12rem !important; min-height: 4rem !important; padding: 1rem 2.6rem !important; border-width: 1px !important; border-radius: 999px !important; } #headerBookBtn, #footerBookBtn, #headerBookBtnText, #headerBookBtnText span, #footerBookBtnText, #footerBookBtnText span { font-size: 1.2rem !important; line-height: 1 !important; } .book-btn-container, .book-btn-container--footer { height: auto !important; min-height: 0 !important; }