#booking-main-area.mobile-booking-page, #booking-main-area { background: var(--background-color) !important; color: var(--text-primary) !important; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif !important; } #booking-main-area * { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif !important; } #mobile-builtin-booking-container { background: transparent !important; } #mobile-services-selection { min-height: 100% !important; } #booking-main-area .booking-header-bar { padding: 18px 20px 12px !important; background: var(--background-color) !important; border-bottom: 0 !important; box-shadow: none !important; backdrop-filter: blur(22px) saturate(150%) !important; -webkit-backdrop-filter: blur(22px) saturate(150%) !important; } #booking-main-area .mobile-booking-header-grid { display: grid !important; grid-template-columns: 1fr !important; align-items: center !important; justify-items: start !important; gap: 10px !important; } #booking-main-area .mobile-booking-title-wrap { text-align: left !important; min-width: 0 !important; width: 100% !important; } #booking-main-area .mobile-booking-eyebrow { display: block !important; margin-bottom: 5px !important; color: var(--text-secondary) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 880 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } #booking-main-area .mobile-booking-eyebrow:empty { display: none !important; } #booking-main-area #booking-main-title { margin: 0 !important; color: var(--text-primary) !important; font-size: 16px !important; line-height: 1 !important; font-weight: 920 !important; letter-spacing: 0 !important; } #booking-main-area #booking-main-subtitle { margin: 6px 0 0 !important; color: var(--text-secondary) !important; font-size: 10px !important; line-height: 1.25 !important; font-weight: 720 !important; } #booking-main-area .mobile-booking-header-actions { display: flex !important; align-items: center !important; gap: 8px !important; } #booking-main-area #booking-notification-icon, #booking-main-area #booking-settings-icon, #booking-main-area #booking-add-service-icon { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 999px !important; border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent) !important; background: color-mix(in srgb, var(--surface-color, #ffffff) 92%, transparent) !important; color: var(--text-primary) !important; box-shadow: 0 10px 24px color-mix(in srgb, var(--text-primary) 8%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent) !important; font-size: 15px !important; } #booking-main-area #booking-add-service-icon { width: auto !important; min-width: 0 !important; padding: 0 13px !important; gap: 7px !important; background: color-mix(in srgb, var(--text-primary) 5%, transparent) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; font-size: 12px !important; font-weight: 820 !important; } #booking-main-area #booking-add-service-icon i { font-size: 11px !important; } #booking-main-area .mobile-booking-week-shell { padding: 10px 20px 12px !important; background: var(--background-color) !important; border-bottom: 0 !important; box-shadow: none !important; width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; box-sizing: border-box !important; } #booking-main-area #booking-week-strip { display: flex !important; gap: 10px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; padding: 0 20px 6px !important; margin: 0 -20px !important; scroll-padding: 20px !important; } #booking-main-area #booking-week-strip::-webkit-scrollbar { display: none !important; } #booking-main-area .mobile-booking-day { min-width: 76px !important; height: 72px !important; border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent) !important; border-radius: 17px !important; background: color-mix(in srgb, var(--surface-color, #ffffff) 72%, transparent) !important; color: var(--text-primary) !important; box-shadow: none !important; display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 0 !important; position: relative !important; cursor: pointer !important; flex: 0 0 auto !important; } #booking-main-area .mobile-booking-day.is-selected { background: color-mix(in srgb, var(--primary-color) 88%, var(--text-primary) 12%) !important; border-color: color-mix(in srgb, var(--primary-color) 92%, var(--text-primary) 8%) !important; color: var(--background-color) !important; box-shadow: 0 14px 30px color-mix(in srgb, var(--primary-color) 22%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent) !important; } #booking-main-area .mobile-booking-day.is-today:not(.is-selected) { border-color: color-mix(in srgb, #22c55e 28%, var(--border-color)) !important; } #booking-main-area .mobile-booking-day-name { color: var(--text-secondary) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } #booking-main-area .mobile-booking-day-number { color: var(--text-primary) !important; font-size: 22px !important; line-height: 1 !important; font-weight: 920 !important; } #booking-main-area .mobile-booking-day.is-selected .mobile-booking-day-name, #booking-main-area .mobile-booking-day.is-selected .mobile-booking-day-number { color: var(--background-color) !important; -webkit-text-fill-color: var(--background-color) !important; } #booking-main-area .mobile-booking-day-dot, #booking-main-area .booking-week-dot { width: 4px !important; height: 4px !important; border-radius: 999px !important; background: #22c55e !important; box-shadow: none !important; opacity: 0 !important; position: absolute !important; left: 50% !important; bottom: 8px !important; transform: translateX(-50%) !important; } #booking-main-area .mobile-booking-day.has-availability .mobile-booking-day-dot, #booking-main-area .mobile-booking-day.has-availability .booking-week-dot { opacity: 1 !important; } #booking-main-area #mobile-services-selection-list { padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 156px) !important; gap: 12px !important; } @keyframes bookingMainPlaceholderPulse { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.86; } } #booking-main-area #booking-loading-state.booking-main-loading-state { display: grid; gap: 14px; padding: 6px 0 24px !important; color: var(--text-primary) !important; text-align: left !important; } #booking-main-area .booking-main-loading-shell, #booking-main-area .booking-main-loading-shell * { box-sizing: border-box; letter-spacing: 0; } #booking-main-area .booking-main-loading-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 4px 0 2px; } #booking-main-area .booking-main-loading-kicker { margin: 0 0 7px; color: var(--primary-color) !important; -webkit-text-fill-color: var(--primary-color) !important; font-size: 10px; line-height: 1; font-weight: 920; letter-spacing: 0.18em; text-transform: uppercase; } #booking-main-area .booking-main-loading-title { margin: 0; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; font-size: 24px; line-height: 0.98; font-weight: 920; } #booking-main-area .booking-main-loading-note { display: none; } #booking-main-area .booking-main-loading-list { display: grid; gap: 0; border-top: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent); } #booking-main-area .booking-main-loading-row { min-height: 92px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 86px; gap: 12px; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent); } #booking-main-area .booking-main-loading-count, #booking-main-area .booking-main-loading-line, #booking-main-area .booking-main-loading-pill { background: color-mix(in srgb, var(--text-primary) 11%, transparent); animation: bookingMainPlaceholderPulse 1.1s ease-in-out infinite; } #booking-main-area .booking-main-loading-count { width: 34px; height: 34px; border-radius: 10px; } #booking-main-area .booking-main-loading-copy { display: grid; gap: 8px; min-width: 0; } #booking-main-area .booking-main-loading-line { height: 13px; border-radius: 999px; } #booking-main-area .booking-main-loading-line.is-title { width: 76%; height: 19px; border-radius: 7px; background: color-mix(in srgb, var(--text-primary) 14%, transparent); } #booking-main-area .booking-main-loading-line.is-meta { width: 54%; } #booking-main-area .booking-main-loading-line.is-time { width: 38%; height: 22px; border-radius: 7px; } #booking-main-area .booking-main-loading-pill { width: 86px; height: 38px; border-radius: 999px; background: color-mix(in srgb, var(--text-primary) 12%, transparent); } #bloc-byte-fullscreen::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: calc(env(safe-area-inset-top, 0px) + 28px); background: linear-gradient(180deg, #000 0%, #000 68%, rgba(0,0,0,0) 100%); z-index: 130003; pointer-events: none; } #bloc-byte-topbar { display: none !important; } #bloc-byte-info-shell { position: fixed; left: 0; right: 0; bottom: 0; z-index: 130002; padding: 34px 16px calc(86px + env(safe-area-inset-bottom, 0px)); pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.62) 30%, #000000 100%); touch-action: pan-y; } #bloc-byte-info-inner { display: flex; flex-direction: column; gap: 6px; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 12px rgba(0,0,0,0.86), 0 1px 3px rgba(0,0,0,0.9); pointer-events: auto; touch-action: pan-y; } #bloc-byte-title-inline { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 17px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bloc-byte-caption-inline { max-width: min(86vw, 520px); color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 15px; font-weight: 650; line-height: 1.28; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; cursor: pointer; pointer-events: auto; touch-action: manipulation; } #bloc-byte-caption-inline.is-expanded { display: block !important; max-height: min(42vh, 360px); overflow-y: auto; -webkit-line-clamp: unset; padding-right: 4px; -webkit-overflow-scrolling: touch; touch-action: pan-y; } #bloc-byte-meta-inline { color: rgba(255,255,255,0.9) !important; -webkit-text-fill-color: rgba(255,255,255,0.9) !important; font-size: 12px; font-weight: 600; opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bloc-byte-info-topline, #bloc-byte-index-inline, #bloc-byte-platform-inline { color: rgba(255,255,255,0.92) !important; -webkit-text-fill-color: rgba(255,255,255,0.92) !important; } #bloc-byte-info-topline { display: flex; align-items: center; gap: 10px; min-width: 0; } #bloc-byte-platform-inline { display: none !important; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; font-size: 13px; flex: 0 0 auto; } #bloc-byte-index-inline { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.58; flex: 0 0 auto; } /* Keep Bloc byte metadata as text overlay only, no container panel. */ #bloc-byte-info-shell { background: transparent !important; box-shadow: none !important; border: 0 !important; } #bloc-byte-info-inner, #bloc-byte-title-inline, #bloc-byte-caption-inline, #bloc-byte-meta-inline { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } /* Bytes fullscreen bottom only: readable details and clean actions. */ body.bloc-byte-fullscreen-open #bloc-byte-fullscreen::before { display: none !important; height: 0 !important; opacity: 0 !important; } body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] { height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; } body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-needs-safe-top { padding-top: max(44px, env(safe-area-inset-top, 0px)) !important; } body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-needs-safe-top > [data-embed-scope] { height: calc(100% - max(44px, env(safe-area-inset-top, 0px))) !important; min-height: calc(100% - max(44px, env(safe-area-inset-top, 0px))) !important; max-height: calc(100% - max(44px, env(safe-area-inset-top, 0px))) !important; } /* A website card's own footer sits right where #bloc-byte-info-shell and #bloc-byte-engagement-shell overlay the bottom of the frame -- both are position:fixed, so they cover whatever the page has there instead of leaving room for it, the same overlap the moments timeline preview had. ~185px covers the caption band plus the engagement row plus their own margins at a typical one-line caption; a longer caption grows the band and can still clip, but this clears the common case instead of the guaranteed one. */ body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-web-embed > [data-embed-scope] { height: calc(100% - max(44px, env(safe-area-inset-top, 0px)) - 185px) !important; min-height: calc(100% - max(44px, env(safe-area-inset-top, 0px)) - 185px) !important; max-height: calc(100% - max(44px, env(safe-area-inset-top, 0px)) - 185px) !important; } body.bloc-byte-fullscreen-open #bloc-byte-info-shell { position: fixed !important; left: 0 !important; right: 0 !important; bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; z-index: 130002 !important; min-height: 0 !important; padding: 11px 18px 10px !important; background: rgba(255, 255, 255, 0.98) !important; border-top: 1px solid rgba(17, 17, 17, 0.08) !important; box-shadow: 0 -10px 24px rgba(17, 17, 17, 0.035) !important; pointer-events: auto !important; } body.bloc-byte-fullscreen-open #bloc-byte-info-inner { max-width: 720px !important; margin: 0 auto !important; gap: 4px !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; text-shadow: none !important; } body.bloc-byte-fullscreen-open #bloc-byte-title-inline { color: #111111 !important; -webkit-text-fill-color: #111111 !important; font-size: clamp(16px, 4vw, 21px) !important; line-height: 1.06 !important; font-weight: 850 !important; white-space: normal !important; overflow: hidden !important; text-overflow: clip !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } body.bloc-byte-fullscreen-open #bloc-byte-title-inline.is-full-caption { display: block !important; max-height: min(30vh, 220px) !important; overflow-y: auto !important; -webkit-line-clamp: unset !important; -webkit-box-orient: initial !important; font-size: clamp(15px, 3.7vw, 19px) !important; line-height: 1.16 !important; padding-right: 2px !important; -webkit-overflow-scrolling: touch !important; } body.bloc-byte-fullscreen-open #bloc-byte-caption-inline { max-width: 100% !important; color: rgba(17, 17, 17, 0.72) !important; -webkit-text-fill-color: rgba(17, 17, 17, 0.72) !important; font-size: 11px !important; line-height: 1.24 !important; font-weight: 650 !important; text-shadow: none !important; -webkit-line-clamp: 2 !important; } body.bloc-byte-fullscreen-open #bloc-byte-caption-inline.is-expanded { display: block !important; max-height: min(22vh, 160px) !important; overflow-y: auto !important; -webkit-line-clamp: unset !important; -webkit-box-orient: initial !important; -webkit-overflow-scrolling: touch !important; } body.bloc-byte-fullscreen-open #bloc-byte-meta-inline { color: rgba(17, 17, 17, 0.54) !important; -webkit-text-fill-color: rgba(17, 17, 17, 0.54) !important; font-size: 9px !important; line-height: 1.2 !important; font-weight: 820 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; text-shadow: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: calc(56px + env(safe-area-inset-bottom, 0px)) !important; padding: 0 0 env(safe-area-inset-bottom, 0px) !important; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 0 !important; align-items: stretch !important; justify-content: stretch !important; background: rgba(255, 255, 255, 0.98) !important; border-top: 1px solid rgba(17, 17, 17, 0.06) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell button { all: unset !important; position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; height: 56px !important; box-sizing: border-box !important; color: #0f0f10 !important; -webkit-text-fill-color: #0f0f10 !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; } body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell button::before { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 42px !important; height: 42px !important; border-radius: 999px !important; background: transparent !important; transform: translate(-50%, -50%) scale(0.96) !important; transition: background 140ms ease, transform 140ms ease !important; } body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell button:active::before { background: rgba(17, 17, 17, 0.055) !important; transform: translate(-50%, -50%) scale(1) !important; } body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell button:not(:last-child)::after { content: "" !important; position: absolute !important; top: 15px !important; right: 0 !important; bottom: 15px !important; width: 1px !important; background: rgba(17, 17, 17, 0.055) !important; } body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell i { position: relative !important; z-index: 1 !important; color: #0f0f10 !important; -webkit-text-fill-color: #0f0f10 !important; font-size: 19px !important; } body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell span:not([hidden]) { position: relative !important; z-index: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-left: 5px !important; color: #0f0f10 !important; -webkit-text-fill-color: #0f0f10 !important; font-size: 12px !important; font-weight: 850 !important; } /* Premium fullscreen pass for timeline byte opens. */ body.bloc-byte-fullscreen-open #bloc-byte-fullscreen { background: radial-gradient(circle at 50% -12%, rgba(255,255,255,0.08), rgba(0,0,0,0) 38%), #000000 !important; } body.bloc-byte-fullscreen-open #bloc-byte-fullscreen-scroll { height: calc(100dvh - 158px - env(safe-area-inset-bottom, 0px)) !important; min-height: 420px !important; background: #050505 !important; } body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] { height: calc(100dvh - 158px - env(safe-area-inset-bottom, 0px)) !important; min-height: 420px !important; max-height: calc(100dvh - 158px - env(safe-area-inset-bottom, 0px)) !important; background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(0,0,0,0) 28%), #050505 !important; } body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-embed-scope], body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-card-container, body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-card-shell, body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-media-shell, body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-media-wrapper, body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-media-container { background: #050505 !important; } body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-media-shell, body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-media-wrapper, body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-media-container { display: flex !important; align-items: center !important; justify-content: center !important; } body.bloc-byte-fullscreen-open #bloc-byte-fullscreen img, body.bloc-byte-fullscreen-open #bloc-byte-fullscreen video { object-fit: contain !important; object-position: center center !important; filter: saturate(1.04) contrast(1.025) !important; } body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-video-frame { background: #050505 !important; } body.bloc-byte-fullscreen-open #bloc-byte-info-shell { bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; padding: 12px 18px 11px !important; background: rgba(255, 255, 255, 0.985) !important; border-top: 1px solid rgba(17, 17, 17, 0.07) !important; box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important; } body.bloc-byte-fullscreen-open #bloc-byte-info-inner { gap: 5px !important; } body.bloc-byte-fullscreen-open #bloc-byte-title-inline { color: #0d0d0e !important; -webkit-text-fill-color: #0d0d0e !important; font-size: clamp(16px, 4.1vw, 20px) !important; line-height: 1.1 !important; font-weight: 820 !important; letter-spacing: 0 !important; -webkit-line-clamp: 2 !important; } body.bloc-byte-fullscreen-open #bloc-byte-title-inline.is-full-caption { font-size: clamp(15px, 3.8vw, 18px) !important; line-height: 1.17 !important; } body.bloc-byte-fullscreen-open #bloc-byte-caption-inline { color: rgba(17, 17, 17, 0.66) !important; -webkit-text-fill-color: rgba(17, 17, 17, 0.66) !important; font-size: 11px !important; line-height: 1.26 !important; font-weight: 620 !important; -webkit-line-clamp: 2 !important; } body.bloc-byte-fullscreen-open #bloc-byte-meta-inline { color: rgba(17, 17, 17, 0.48) !important; -webkit-text-fill-color: rgba(17, 17, 17, 0.48) !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: 0.075em !important; } /* The avatar+name credit row (#bloc-byte-by-inline), same idea as the cinema's own .mcin__by/.mcin__face/.mcin__name for a photo or clip -- this overlay is the one other cards don't reach (video and photo go to the cinema instead), so it needed its own copy of the same look rather than inheriting one. */ body.bloc-byte-fullscreen-open #bloc-byte-by-inline { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; } body.bloc-byte-fullscreen-open #bloc-byte-by-name-inline { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 14px !important; font-weight: 750 !important; letter-spacing: 0 !important; text-transform: none !important; } /* Got the same treatment as the name above it -- forgotten when that rule was written, so this span fell through to the light-theme nuclear span rule (color: near-black) instead of the light-on-dark it needs here, and read as invisible against the black chrome. */ body.bloc-byte-fullscreen-open #bloc-byte-by-date-inline { color: rgba(255, 255, 255, 0.48) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.48) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell { height: calc(56px + env(safe-area-inset-bottom, 0px)) !important; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; background: rgba(255, 255, 255, 0.99) !important; border-top: 1px solid rgba(17, 17, 17, 0.055) !important; box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.055) !important; } body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell button { height: 56px !important; color: #0d0d0e !important; -webkit-text-fill-color: #0d0d0e !important; } body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell i { color: #0d0d0e !important; -webkit-text-fill-color: #0d0d0e !important; font-size: 19px !important; } body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell span:not([hidden]) { color: rgba(17, 17, 17, 0.62) !important; -webkit-text-fill-color: rgba(17, 17, 17, 0.62) !important; } #booking-main-area #booking-services-content { gap: 0 !important; } #booking-main-area .mobile-booking-list-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 6px 0 8px !important; } #booking-main-area .mobile-booking-list-head span { color: var(--text-secondary) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 920 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } #booking-main-area .mobile-booking-list-head strong { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: var(--text-secondary) !important; font-size: 12px !important; line-height: 1 !important; font-weight: 820 !important; padding: 0 !important; border-radius: 999px !important; background: transparent !important; border: 0 !important; } #booking-main-area .mobile-booking-hero-card { padding: 20px !important; border-radius: 22px !important; background: radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--primary-color) 22%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, #0b0b0b 92%, transparent), color-mix(in srgb, #171717 92%, transparent)) !important; border: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent) !important; box-shadow: 0 22px 46px color-mix(in srgb, var(--text-primary) 14%, transparent) !important; margin-bottom: 16px !important; overflow: hidden !important; } #booking-main-area .mobile-booking-hero-grid { display: block !important; } #booking-main-area .mobile-booking-hero-copy { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-self: start !important; min-height: 100% !important; gap: 10px !important; } #booking-main-area .mobile-booking-hero-kicker { font-size: 12px !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.66) !important; margin: 0 !important; } #booking-main-area .mobile-booking-hero-title { margin: 0 !important; font-size: 25px !important; line-height: 1.06 !important; letter-spacing: -0.03em !important; font-weight: 840 !important; color: #ffffff !important; max-width: 15ch !important; } #booking-main-area .mobile-booking-hero-summary { margin: 0 !important; font-size: 13px !important; line-height: 1.42 !important; color: rgba(255,255,255,0.78) !important; font-weight: 680 !important; max-width: 30ch !important; } #booking-main-area .mobile-booking-hero-next { margin: 2px 0 0 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 720 !important; color: rgba(255,255,255,0.84) !important; white-space: nowrap !important; } #booking-main-area .mobile-booking-hero-next i { color: var(--primary-color) !important; } #booking-main-area .mobile-booking-hero-cta { margin-top: 12px !important; min-height: 50px !important; width: 100% !important; border-radius: 16px !important; border: 0 !important; background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 92%, #ffffff 4%), color-mix(in srgb, var(--accent-color, var(--primary-color)) 76%, #050506 18%) ) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 15px !important; font-weight: 860 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; box-shadow: 0 16px 32px color-mix(in srgb, var(--primary-color) 22%, transparent) !important; } #booking-main-area .mobile-booking-hero-visual { display: none !important; } #booking-main-area .mobile-booking-hero-visual img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } #booking-main-area .mobile-booking-hero-visual::after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.24) 100%) !important; } #booking-main-area .mobile-booking-stage { margin-top: 14px !important; } #booking-main-area .mobile-booking-stage-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 10px !important; } #booking-main-area .mobile-booking-stage-head span { color: var(--text-secondary) !important; font-size: 11px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } #booking-main-area .mobile-booking-stage-head strong { color: var(--text-primary) !important; font-size: 12px !important; line-height: 1 !important; font-weight: 860 !important; } #booking-main-area .mobile-booking-service-scroller, #booking-main-area .mobile-booking-date-rail { display: flex !important; gap: 8px !important; overflow-x: auto !important; padding-bottom: 4px !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; } #booking-main-area .mobile-booking-service-scroller::-webkit-scrollbar, #booking-main-area .mobile-booking-date-rail::-webkit-scrollbar { display: none !important; } #booking-main-area .mobile-booking-service-card { min-width: 210px !important; min-height: 196px !important; padding: 16px !important; border-radius: 20px !important; border: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent) !important; background: color-mix(in srgb, var(--surface-color, #ffffff) 92%, transparent) !important; box-shadow: 0 12px 28px color-mix(in srgb, var(--text-primary) 4%, transparent) !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 6px !important; text-align: left !important; color: var(--text-primary) !important; } #booking-main-area .mobile-booking-service-card.is-selected { border-color: color-mix(in srgb, var(--primary-color) 52%, var(--border-color)) !important; box-shadow: 0 18px 36px color-mix(in srgb, var(--primary-color) 18%, transparent) !important; background: color-mix(in srgb, var(--primary-color) 8%, var(--surface-color, #ffffff)) !important; } #booking-main-area .mobile-booking-service-card-icon { width: 36px !important; height: 36px !important; border-radius: 12px !important; background: color-mix(in srgb, var(--primary-color) 10%, transparent) !important; color: color-mix(in srgb, var(--primary-color) 86%, var(--text-primary)) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; margin-bottom: 2px !important; } #booking-main-area .mobile-booking-service-card-kicker { font-size: 9px !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--text-secondary) !important; } #booking-main-area .mobile-booking-service-card-title { font-size: 15px !important; line-height: 1.12 !important; font-weight: 850 !important; color: var(--text-primary) !important; letter-spacing: -0.01em !important; min-height: 40px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } #booking-main-area .mobile-booking-service-card-desc { font-size: 12px !important; line-height: 1.34 !important; color: var(--text-secondary) !important; min-height: 32px !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } #booking-main-area .mobile-booking-service-card-meta { font-size: 12px !important; line-height: 1.2 !important; color: var(--text-secondary) !important; font-weight: 760 !important; text-transform: uppercase !important; margin-top: auto !important; } #booking-main-area .mobile-booking-guest-shell { display: grid !important; gap: 18px !important; } #booking-main-area .mobile-booking-guest-top { padding: 4px 0 2px !important; } #booking-main-area .mobile-booking-guest-kicker { display: block !important; margin-bottom: 7px !important; color: var(--text-secondary) !important; font-size: 11px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; } #booking-main-area .mobile-booking-guest-title { margin: 0 !important; color: var(--text-primary) !important; font-size: 34px !important; line-height: 0.95 !important; font-weight: 920 !important; letter-spacing: -0.055em !important; } #booking-main-area .mobile-booking-selected-panel { border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent) !important; border-radius: 22px !important; background: radial-gradient(circle at 94% 0%, color-mix(in srgb, var(--primary-color) 22%, transparent), transparent 38%), color-mix(in srgb, var(--surface-color, #0f0f0f) 94%, transparent) !important; padding: 16px !important; box-shadow: 0 18px 42px color-mix(in srgb, var(--text-primary) 7%, transparent) !important; } #booking-main-area .mobile-booking-selected-row { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; } #booking-main-area .mobile-booking-selected-icon, #booking-main-area .mobile-booking-row-icon { width: 44px !important; height: 44px !important; border-radius: 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: color-mix(in srgb, var(--primary-color) 13%, transparent) !important; color: color-mix(in srgb, var(--primary-color) 88%, var(--text-primary)) !important; font-size: 16px !important; } #booking-main-area .mobile-booking-selected-label, #booking-main-area .mobile-booking-row-kicker { color: var(--text-secondary) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } #booking-main-area .mobile-booking-selected-name, #booking-main-area .mobile-booking-row-title { margin-top: 5px !important; color: var(--text-primary) !important; font-size: 16px !important; line-height: 1.08 !important; font-weight: 880 !important; } #booking-main-area .mobile-booking-selected-price { color: var(--text-primary) !important; font-size: 18px !important; line-height: 1 !important; font-weight: 900 !important; } #booking-main-area .mobile-booking-selected-copy { margin: 14px 0 0 !important; color: var(--text-secondary) !important; font-size: 13px !important; line-height: 1.42 !important; font-weight: 650 !important; } #booking-main-area .mobile-booking-selected-meta { margin-top: 14px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; color: var(--text-secondary) !important; font-size: 12px !important; font-weight: 850 !important; } #booking-main-area .mobile-booking-selected-meta span { display: inline-flex !important; align-items: center !important; gap: 7px !important; } #booking-main-area .mobile-booking-section-title { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 10px !important; } #booking-main-area .mobile-booking-section-title span { color: var(--text-primary) !important; font-size: 19px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: -0.035em !important; text-transform: none !important; } #booking-main-area .mobile-booking-section-title strong { color: var(--text-secondary) !important; font-size: 12px !important; line-height: 1 !important; font-weight: 850 !important; } #booking-main-area .mobile-booking-service-list { display: grid !important; gap: 12px !important; } #booking-main-area .mobile-booking-service-row-btn { width: 100% !important; min-height: 76px !important; padding: 12px !important; border-radius: 18px !important; border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent) !important; background: color-mix(in srgb, var(--surface-color, #0f0f0f) 92%, transparent) !important; color: var(--text-primary) !important; display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; text-align: left !important; } #booking-main-area .mobile-booking-service-row-btn.is-selected { border-color: color-mix(in srgb, var(--primary-color) 56%, var(--border-color)) !important; background: color-mix(in srgb, var(--primary-color) 8%, var(--surface-color, #0f0f0f)) !important; } #booking-main-area .mobile-booking-row-sub { margin-top: 7px !important; color: var(--text-secondary) !important; font-size: 12px !important; line-height: 1 !important; font-weight: 760 !important; } #booking-main-area .mobile-booking-row-check { width: 28px !important; height: 28px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--primary-color) !important; background: color-mix(in srgb, var(--primary-color) 12%, transparent) !important; font-size: 12px !important; } #booking-main-area .mobile-booking-date-card { min-width: 66px !important; min-height: 68px !important; border-radius: 18px !important; border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent) !important; background: color-mix(in srgb, var(--surface-color, #ffffff) 92%, transparent) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; padding: 8px 5px !important; position: relative !important; color: var(--text-primary) !important; box-shadow: none !important; } #booking-main-area .mobile-booking-date-card.has-availability::after { content: '' !important; width: 4px !important; height: 4px !important; border-radius: 999px !important; background: #22c55e !important; position: absolute !important; bottom: 8px !important; left: 50% !important; transform: translateX(-50%) !important; } #booking-main-area .mobile-booking-date-card.is-selected { background: var(--text-primary) !important; border-color: var(--text-primary) !important; color: var(--background-color) !important; box-shadow: 0 14px 26px color-mix(in srgb, var(--text-primary) 14%, transparent) !important; } #booking-main-area .mobile-booking-date-card.is-selected .mobile-booking-date-card-day, #booking-main-area .mobile-booking-date-card.is-selected .mobile-booking-date-card-number, #booking-main-area .mobile-booking-date-card.is-selected .mobile-booking-date-card-month { color: var(--background-color) !important; -webkit-text-fill-color: var(--background-color) !important; } #booking-main-area .mobile-booking-date-card-day, #booking-main-area .mobile-booking-date-card-month { font-size: 8px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--text-secondary) !important; } #booking-main-area .mobile-booking-date-card-number { font-size: 22px !important; line-height: 0.95 !important; font-weight: 860 !important; letter-spacing: -0.04em !important; color: var(--text-primary) !important; } #booking-main-area .mobile-booking-stage-label { color: var(--text-secondary) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; margin-bottom: 10px !important; } #booking-main-area .mobile-booking-stage-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } #booking-main-area .mobile-booking-stage-time { min-height: 44px !important; border-radius: 14px !important; border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent) !important; background: color-mix(in srgb, var(--surface-color, #ffffff) 94%, transparent) !important; color: var(--text-primary) !important; font-size: 11px !important; font-weight: 760 !important; box-shadow: 0 10px 24px color-mix(in srgb, var(--text-primary) 3%, transparent) !important; } #booking-main-area .mobile-booking-stage-time.is-selected { background: color-mix(in srgb, var(--primary-color) 88%, #7ee07f) !important; border-color: color-mix(in srgb, var(--primary-color) 72%, #7ee07f) !important; color: #071106 !important; -webkit-text-fill-color: #071106 !important; } #booking-main-area .mobile-booking-stage-note { margin-top: 10px !important; font-size: 12px !important; line-height: 1.35 !important; color: var(--text-secondary) !important; text-align: center !important; } #booking-main-area .mobile-booking-stage-empty { min-height: 82px !important; border: 1px dashed color-mix(in srgb, var(--border-color) 84%, transparent) !important; border-radius: 18px !important; background: color-mix(in srgb, var(--text-primary) 2%, transparent) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 16px !important; text-align: center !important; font-size: 13px !important; line-height: 1.35 !important; color: var(--text-secondary) !important; font-weight: 700 !important; } #mobile-booking-summary-bar { position: fixed !important; left: 0 !important; right: 0 !important; bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; z-index: 100 !important; padding: 0 14px !important; display: none; pointer-events: none !important; } #mobile-booking-summary-bar .mobile-booking-summary-card { pointer-events: auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 12px !important; border-radius: 20px !important; border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent) !important; background: color-mix(in srgb, var(--surface-color, #ffffff) 96%, transparent) !important; box-shadow: 0 22px 40px color-mix(in srgb, var(--text-primary) 10%, transparent) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; } #mobile-booking-summary-bar .mobile-booking-summary-copy { min-width: 0 !important; flex: 1 1 auto !important; } #mobile-booking-summary-bar .mobile-booking-summary-kicker { font-size: 8px !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--text-secondary) !important; margin-bottom: 4px !important; } #mobile-booking-summary-bar .mobile-booking-summary-title { font-size: 10px !important; line-height: 1.06 !important; font-weight: 800 !important; color: var(--text-primary) !important; letter-spacing: -0.02em !important; } #mobile-booking-summary-bar .mobile-booking-summary-meta { margin-top: 3px !important; font-size: 8px !important; line-height: 1.25 !important; color: var(--text-secondary) !important; font-weight: 680 !important; } #mobile-booking-summary-bar .mobile-booking-summary-side { display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: flex-end !important; } #mobile-booking-summary-bar .mobile-booking-summary-price { font-size: 12px !important; line-height: 1 !important; font-weight: 860 !important; color: var(--text-primary) !important; letter-spacing: -0.03em !important; } #mobile-booking-summary-bar .mobile-booking-summary-cta { min-width: 100px !important; min-height: 36px !important; padding: 0 16px !important; border-radius: 14px !important; border: 0 !important; background: color-mix(in srgb, var(--primary-color) 88%, #7ee07f) !important; color: #071106 !important; -webkit-text-fill-color: #071106 !important; font-size: 10px !important; font-weight: 820 !important; box-shadow: 0 12px 24px color-mix(in srgb, var(--primary-color) 22%, transparent) !important; } #mobile-booking-summary-bar .mobile-booking-summary-cta.is-disabled { background: color-mix(in srgb, var(--text-primary) 10%, transparent) !important; color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; box-shadow: none !important; } #booking-main-area .mobile-booking-service-row { display: block !important; padding: 18px !important; margin-top: 10px !important; border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent) !important; border-radius: 18px !important; background: var(--surface-color, #ffffff) !important; color: var(--text-primary) !important; box-shadow: 0 14px 34px color-mix(in srgb, var(--text-primary) 5%, transparent) !important; } #booking-main-area .mobile-booking-service-index { display: none !important; } #booking-main-area .mobile-booking-service-copy { min-width: 0 !important; display: grid !important; grid-auto-flow: row !important; row-gap: 0 !important; margin-top: 14px !important; } #booking-main-area .mobile-booking-service-head { display: flex !important; align-items: flex-start !important; gap: 0 !important; } #booking-main-area .mobile-booking-service-head-copy { min-width: 0 !important; flex: 1 1 auto !important; } #booking-main-area .mobile-booking-service-kicker { display: inline-block !important; margin-bottom: 8px !important; color: var(--text-secondary) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; } #booking-main-area .mobile-booking-service-top { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 10px !important; } #booking-main-area .mobile-booking-service-pill { display: inline-flex !important; align-items: center !important; min-height: 30px !important; padding: 0 12px !important; border-radius: 999px !important; background: color-mix(in srgb, #22c55e 9%, var(--surface-color, #ffffff)) !important; color: color-mix(in srgb, #15803d 82%, var(--text-primary)) !important; border: 1px solid rgba(34, 197, 94, 0.18) !important; font-size: 11px !important; font-weight: 900 !important; white-space: nowrap !important; flex: 0 0 auto !important; } #booking-main-area .mobile-booking-service-pill.is-closed { background: color-mix(in srgb, var(--text-primary) 5%, transparent) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; } #booking-main-area .mobile-booking-service-title { margin: 0 !important; color: var(--text-primary) !important; font-size: 23px !important; line-height: 1.05 !important; font-weight: 900 !important; letter-spacing: 0 !important; min-width: 0 !important; overflow-wrap: anywhere !important; } #booking-main-area .mobile-booking-service-meta { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; margin-top: 0 !important; margin-bottom: 0 !important; color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary)) !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 760 !important; text-transform: none !important; } #booking-main-area .mobile-booking-service-meta-sep { color: var(--text-secondary) !important; opacity: 0.52 !important; } #booking-main-area .mobile-booking-service-desc { display: block !important; margin: 9px 0 0 !important; color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary)) !important; font-size: 13px !important; line-height: 1.35 !important; font-weight: 650 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } #booking-main-area .mobile-booking-service-copy.is-compact .mobile-booking-times-grid, #booking-main-area .mobile-booking-service-copy.is-compact .mobile-booking-no-times { margin-top: 14px !important; } #booking-main-area .mobile-booking-times-label { display: none !important; } #booking-main-area .mobile-booking-times-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 14px !important; max-height: none !important; overflow: visible !important; } #booking-main-area .mobile-booking-time-btn { min-height: 48px !important; padding: 0 12px !important; border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent) !important; border-radius: 14px !important; background: color-mix(in srgb, var(--surface-color, #ffffff) 96%, var(--background-color)) !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; font-size: 15px !important; font-weight: 900 !important; box-shadow: none !important; cursor: pointer !important; transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease !important; } #booking-main-area .mobile-booking-time-btn:active { transform: scale(0.98) !important; background: color-mix(in srgb, var(--text-primary) 8%, transparent) !important; } #booking-main-area .mobile-booking-time-btn:hover, #booking-main-area .mobile-booking-time-btn:focus-visible { border-color: color-mix(in srgb, var(--primary-color) 54%, var(--border-color)) !important; background: color-mix(in srgb, var(--primary-color) 6%, var(--surface-color, #ffffff)) !important; outline: none !important; } #booking-main-area .mobile-booking-time-btn.is-selected { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } #booking-main-area .mobile-booking-more-btn { grid-column: 1 / -1 !important; min-height: 34px !important; border: 0 !important; background: transparent !important; color: var(--primary-color) !important; font-size: 12px !important; font-weight: 900 !important; text-decoration: none !important; justify-self: center !important; padding: 0 8px !important; } #booking-main-area .mobile-booking-no-times { margin-top: 12px !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px dashed var(--border-color) !important; border-radius: 14px !important; color: var(--text-secondary) !important; font-size: 12px !important; font-weight: 760 !important; background: transparent !important; } [data-theme="dark"] #booking-main-area, [data-theme="dark-accent"] #booking-main-area, [data-theme="dark"] #mobile-builtin-booking-container, [data-theme="dark-accent"] #mobile-builtin-booking-container { background: radial-gradient(circle at 50% -12%, color-mix(in srgb, var(--primary-color) 14%, transparent), transparent 38%), var(--background-color) !important; } [data-theme="dark"] #booking-main-area .booking-header-bar, [data-theme="dark-accent"] #booking-main-area .booking-header-bar { background: color-mix(in srgb, var(--background-color) 88%, transparent) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.08) !important; } [data-theme="dark"] #booking-main-area #booking-notification-icon, [data-theme="dark"] #booking-main-area #booking-settings-icon, [data-theme="dark-accent"] #booking-main-area #booking-notification-icon, [data-theme="dark-accent"] #booking-main-area #booking-settings-icon { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; box-shadow: 0 12px 28px rgba(0,0,0,0.32) !important; } [data-theme="dark"] #booking-main-area .mobile-booking-day, [data-theme="dark-accent"] #booking-main-area .mobile-booking-day { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: none !important; } [data-theme="dark"] #booking-main-area .mobile-booking-day.is-selected, [data-theme="dark-accent"] #booking-main-area .mobile-booking-day.is-selected { background: #ffffff !important; border-color: #ffffff !important; color: #050505 !important; box-shadow: 0 12px 26px rgba(255,255,255,0.10) !important; } [data-theme="dark"] #booking-main-area .mobile-booking-day.is-selected .mobile-booking-day-name, [data-theme="dark"] #booking-main-area .mobile-booking-day.is-selected .mobile-booking-day-number, [data-theme="dark-accent"] #booking-main-area .mobile-booking-day.is-selected .mobile-booking-day-name, [data-theme="dark-accent"] #booking-main-area .mobile-booking-day.is-selected .mobile-booking-day-number { color: #050505 !important; -webkit-text-fill-color: #050505 !important; } [data-theme="dark"] #booking-main-area .mobile-booking-service-row, [data-theme="dark-accent"] #booking-main-area .mobile-booking-service-row { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: none !important; } @media (max-width: 390px) { #booking-main-area .mobile-booking-hero-grid { display: block !important; } #booking-main-area .mobile-booking-hero-title { font-size: 23px !important; } #booking-main-area .mobile-booking-service-card { min-width: 204px !important; } } /* booking-v2-direct-time-css */ #mobile-booking-summary-bar { display: none !important; } #mobile-booking-summary-bar .mobile-booking-summary-card { min-height: 74px !important; padding: 12px 12px 12px 14px !important; border-radius: 22px !important; border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent) !important; background: color-mix(in srgb, var(--surface-color, #ffffff) 98%, transparent) !important; box-shadow: 0 18px 42px color-mix(in srgb, var(--text-primary) 16%, transparent) !important; } #mobile-booking-summary-bar .mobile-booking-summary-kicker { display: none !important; } #mobile-booking-summary-bar .mobile-booking-summary-title { font-size: 13px !important; line-height: 1.1 !important; font-weight: 900 !important; letter-spacing: -0.01em !important; max-width: 46vw !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #mobile-booking-summary-bar .mobile-booking-summary-meta { margin-top: 5px !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 760 !important; } #mobile-booking-summary-bar .mobile-booking-summary-price { display: none !important; } #mobile-booking-summary-bar .mobile-booking-summary-cta { min-width: 116px !important; min-height: 46px !important; border-radius: 16px !important; background: var(--primary-color) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 13px !important; font-weight: 900 !important; } #booking-main-area .mobile-booking-time-btn.is-selected { border-color: var(--primary-color) !important; background: var(--primary-color) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 10px 22px color-mix(in srgb, var(--primary-color) 24%, transparent) !important; } #booking-main-area .mobile-booking-service-list { display: grid !important; gap: 12px !important; } #booking-main-area .mobile-booking-service-row { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; padding: 18px !important; margin: 0 !important; border-radius: 18px !important; border: 1px solid rgba(15, 23, 42, 0.09) !important; background: #ffffff !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important; } #booking-main-area .mobile-booking-service-head-copy { display: grid !important; gap: 8px !important; } #booking-main-area .mobile-booking-service-kicker { margin: 0 !important; color: rgba(15, 23, 42, 0.48) !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; } #booking-main-area .mobile-booking-service-top { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: start !important; gap: 12px !important; margin: 0 !important; } #booking-main-area .mobile-booking-service-title { font-size: 24px !important; line-height: 1.02 !important; font-weight: 900 !important; color: #050505 !important; -webkit-text-fill-color: #050505 !important; } #booking-main-area .mobile-booking-service-pill { min-height: 30px !important; padding: 0 12px !important; border-radius: 999px !important; background: rgba(22, 163, 74, 0.08) !important; border: 1px solid rgba(22, 163, 74, 0.18) !important; color: #166534 !important; -webkit-text-fill-color: #166534 !important; font-size: 11px !important; font-weight: 900 !important; } #booking-main-area .mobile-booking-service-meta { color: rgba(15, 23, 42, 0.62) !important; -webkit-text-fill-color: rgba(15, 23, 42, 0.62) !important; font-size: 13px !important; font-weight: 760 !important; letter-spacing: 0 !important; text-transform: none !important; } #booking-main-area .mobile-booking-service-copy { margin: 0 !important; } #booking-main-area .mobile-booking-times-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; margin-top: 0 !important; } #booking-main-area .mobile-booking-time-btn { width: 100% !important; min-height: 52px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 14px !important; border-radius: 15px !important; border: 1px solid rgba(15, 23, 42, 0.10) !important; background: #f8fafc !important; color: #050505 !important; -webkit-text-fill-color: #050505 !important; font-size: 16px !important; font-weight: 900 !important; text-align: left !important; box-shadow: none !important; } #booking-main-area .mobile-booking-time-btn::after { content: 'Book' !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 58px !important; min-height: 30px !important; padding: 0 12px !important; border-radius: 999px !important; background: #050505 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 11px !important; font-weight: 900 !important; } #booking-main-area .mobile-booking-time-btn.is-selected { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } #booking-main-area .mobile-booking-time-btn.is-selected::after { background: rgba(255,255,255,0.22) !important; } [data-theme="dark"] #booking-main-area .mobile-booking-time-btn, [data-theme="dark-accent"] #booking-main-area .mobile-booking-time-btn { background: rgba(0,0,0,0.28) !important; border-color: rgba(255,255,255,0.11) !important; box-shadow: none !important; } [data-theme="dark"] #booking-main-area .mobile-booking-time-btn.is-selected, [data-theme="dark-accent"] #booking-main-area .mobile-booking-time-btn.is-selected { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } #booking-main-area #booking-empty-state { padding: 18px 18px 42px !important; color: var(--text-secondary) !important; } #booking-main-area #booking-empty-state.is-owner-empty { min-height: clamp(330px, 52vh, 480px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } #booking-main-area.booking-owner-empty .booking-header-bar, #booking-main-area.booking-owner-empty .mobile-booking-week-shell { display: none !important; } #booking-main-area.booking-owner-empty #mobile-services-selection-list { padding-top: 18px !important; } #booking-main-area #booking-empty-state i { display: none !important; } #booking-main-area #booking-empty-state.is-owner-empty i { display: inline-flex !important; align-items: center !important; justify-content: center !important; } #booking-main-area #booking-empty-state h3 { color: var(--text-primary) !important; font-size: 23px !important; line-height: 1 !important; font-weight: 860 !important; letter-spacing: 0 !important; } #booking-main-area #booking-empty-state.is-owner-empty .booking-owner-empty-card { width: min(100%, 360px) !important; margin: 0 auto !important; text-align: left !important; border-radius: 0 !important; border: 0 !important; background: transparent !important; padding: 4px 2px !important; box-shadow: none !important; box-sizing: border-box !important; } #booking-main-area #booking-empty-state.is-owner-empty .booking-owner-empty-primary { background: var(--text-primary) !important; color: var(--background-color) !important; -webkit-text-fill-color: var(--background-color) !important; border-color: var(--text-primary) !important; } #booking-main-area #booking-empty-state.is-owner-empty .booking-owner-empty-primary *, #booking-main-area #booking-empty-state.is-owner-empty .booking-owner-empty-primary i, #booking-main-area #booking-empty-state.is-owner-empty .booking-owner-empty-primary span { color: var(--background-color) !important; -webkit-text-fill-color: var(--background-color) !important; opacity: 1 !important; visibility: visible !important; } #booking-main-area #booking-empty-state.is-owner-empty .booking-owner-empty-secondary *, #booking-main-area #booking-empty-state.is-owner-empty .booking-owner-empty-secondary span { color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; } #booking-main-area #booking-empty-state.is-owner-empty .booking-owner-empty-secondary i { color: var(--primary-color) !important; -webkit-text-fill-color: var(--primary-color) !important; } body.booking-active #pwa-install-banner, body.stream-active #pwa-install-banner, body.booking-active #bloc-install-banner, body.booking-active .bloc-install-pill { display: none !important; } #mobileAddBookingModal, #mobileAddBookingModal * { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif !important; letter-spacing: 0 !important; } #mobileAddBookingModal div:has(> #mobile-specificDate) { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 9px !important; } #mobileAddBookingModal #mobile-specificDate, #mobileAddBookingModal #mobile-specificTime { width: 100% !important; min-width: 0 !important; padding: 14px !important; } #mobileAddBookingModal button[onclick*="mobileAddSpecificAvailability"] { grid-column: 1 / -1 !important; width: 100% !important; padding: 14px 16px !important; background: color-mix(in srgb, var(--primary-color) 92%, white 8%) !important; border: 1px solid color-mix(in srgb, var(--primary-color) 86%, black 14%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 10px 28px color-mix(in srgb, var(--primary-color) 20%, transparent) !important; } #mobile-builtin-calendar { background: var(--background-color) !important; min-height: 100dvh !important; color: var(--text-primary) !important; padding: 24px 14px calc(env(safe-area-inset-bottom, 0px) + 28px) !important; margin-top: 0 !important; overflow-y: auto !important; } #mobile-builtin-calendar .mobile-calendar-shell { width: 100% !important; max-width: 520px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; gap: 14px !important; } #mobile-builtin-calendar #calendar-header { padding: 0 !important; background: transparent !important; border: 0 !important; position: static !important; display: grid !important; grid-template-columns: 56px minmax(0, 1fr) 56px !important; align-items: center !important; gap: 8px !important; } #mobile-builtin-calendar #calendar-header > div:nth-child(2) { text-align: center !important; min-width: 0 !important; } #mobile-builtin-calendar #calendar-month-year { font-size: 30px !important; line-height: 1 !important; font-weight: 880 !important; letter-spacing: 0 !important; color: var(--text-primary) !important; } #mobile-builtin-calendar #booking-date-text { margin: 5px 0 0 !important; font-size: 12px !important; font-weight: 720 !important; color: var(--text-secondary) !important; opacity: 1 !important; } #mobile-builtin-calendar #calendar-back-btn, #mobile-builtin-calendar #prev-month, #mobile-builtin-calendar #next-month { width: 40px !important; height: 40px !important; border: 1px solid var(--border-color) !important; border-radius: 999px !important; background: var(--surface-color) !important; color: var(--text-primary) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; } #mobile-builtin-calendar #calendar-back-btn { width: auto !important; min-width: 0 !important; height: auto !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; opacity: 1 !important; font-size: 12px !important; line-height: 1 !important; font-weight: 820 !important; justify-content: flex-start !important; padding: 0 !important; } #mobile-builtin-calendar .mobile-calendar-nav { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 6px 0 0 !important; } #mobile-builtin-calendar .mobile-calendar-nav-label { min-height: 32px !important; display: inline-flex !important; align-items: center !important; padding: 0 12px !important; border-radius: 999px !important; background: color-mix(in srgb, var(--text-primary) 5%, transparent) !important; color: var(--text-primary) !important; font-size: 12px !important; font-weight: 820 !important; } #mobile-builtin-calendar .mobile-calendar-weekdays { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 6px !important; margin: 0 !important; } #mobile-builtin-calendar .mobile-calendar-weekdays div { text-align: center !important; color: var(--text-secondary) !important; font-size: 9px !important; line-height: 1 !important; padding: 0 0 3px !important; font-weight: 860 !important; letter-spacing: 0.08em !important; opacity: 0.72 !important; } #mobile-builtin-calendar #calendar-days { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 6px !important; min-height: 0 !important; flex: 0 0 auto !important; } #mobile-builtin-calendar .calendar-day { appearance: none !important; min-height: 43px !important; height: 43px !important; border-radius: 15px !important; border: 1px solid transparent !important; background: transparent !important; box-shadow: none !important; font-size: 13px !important; line-height: 1 !important; font-weight: 830 !important; color: var(--text-primary) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; cursor: pointer !important; transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important; } #mobile-builtin-calendar .calendar-day:hover, #mobile-builtin-calendar .calendar-day:focus-visible { background: color-mix(in srgb, var(--text-primary) 5%, transparent) !important; border-color: var(--border-color) !important; outline: none !important; } #mobile-builtin-calendar .calendar-day.is-today:not(.selected) { border-color: color-mix(in srgb, #22c55e 34%, var(--border-color)) !important; background: color-mix(in srgb, #22c55e 5%, transparent) !important; } #mobile-builtin-calendar .calendar-day.is-past { color: color-mix(in srgb, var(--text-secondary) 64%, transparent) !important; cursor: not-allowed !important; } #mobile-builtin-calendar .calendar-day.is-empty { pointer-events: none !important; opacity: 0 !important; } #mobile-builtin-calendar .calendar-day.selected { background: var(--text-primary) !important; color: var(--background-color) !important; border-color: var(--text-primary) !important; transform: translateY(-1px) !important; } #mobile-builtin-calendar .calendar-day.selected, #mobile-builtin-calendar .calendar-day.selected * { color: var(--background-color) !important; -webkit-text-fill-color: var(--background-color) !important; } #mobile-builtin-calendar .calendar-day .calendar-day-dot { width: 4px !important; height: 4px !important; border-radius: 999px !important; background: #22c55e !important; position: absolute !important; left: 50% !important; bottom: 7px !important; transform: translateX(-50%) !important; } #mobile-builtin-calendar .calendar-day.is-full .calendar-day-dot { background: var(--text-secondary) !important; opacity: 0.55 !important; } #mobile-builtin-calendar .calendar-day.selected .calendar-day-dot { background: var(--background-color) !important; -webkit-text-fill-color: var(--background-color) !important; } #mobile-builtin-calendar .mobile-calendar-legend { display: flex !important; flex-wrap: wrap !important; gap: 8px 14px !important; padding-top: 0 !important; color: var(--text-secondary) !important; font-size: 11px !important; font-weight: 760 !important; } #mobile-builtin-calendar .mobile-calendar-legend span { display: inline-flex !important; align-items: center !important; gap: 6px !important; } #mobile-builtin-calendar .mobile-calendar-legend i { width: 5px !important; height: 5px !important; border-radius: 999px !important; background: #22c55e !important; display: inline-block !important; } #mobile-builtin-calendar .mobile-calendar-legend i.is-booked { background: var(--text-secondary) !important; opacity: 0.6 !important; } /* No rule between the legend and the day list — spacing separates them. */ #mobile-builtin-calendar .mobile-calendar-day-panel { border-top: 0 !important; padding-top: 18px !important; margin-top: 0 !important; display: grid !important; gap: 12px !important; } #mobile-builtin-calendar .mobile-calendar-day-panel-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; min-height: 42px !important; } #mobile-builtin-calendar .mobile-calendar-day-panel-head span { color: var(--text-secondary) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 880 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } /* Flat: the day title is plain type, not a pill. */ #mobile-builtin-calendar .mobile-calendar-day-panel-head strong { color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; min-height: 0 !important; display: block !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; font-size: 19px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: -0.02em !important; text-align: left !important; white-space: nowrap !important; } /* The list is part of the page, not a boxed container. */ #mobile-builtin-calendar .mobile-calendar-day-panel-list { display: grid !important; gap: 0 !important; border-radius: 0 !important; background: transparent !important; border: 0 !important; overflow: visible !important; } #mobile-builtin-calendar .mobile-calendar-day-service, #mobile-builtin-calendar .mobile-calendar-day-booking { display: grid !important; gap: 10px !important; padding: 16px 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent) !important; background: transparent !important; } #mobile-builtin-calendar .mobile-calendar-day-booking { grid-template-columns: 62px minmax(0, 1fr) !important; align-items: start !important; gap: 14px !important; } #mobile-builtin-calendar .mobile-calendar-day-service:last-child, #mobile-builtin-calendar .mobile-calendar-day-booking:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; } #mobile-builtin-calendar .mobile-calendar-day-service h3, #mobile-builtin-calendar .mobile-calendar-day-booking h3 { margin: 0 !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; font-size: 18px !important; line-height: 1 !important; font-weight: 880 !important; } #mobile-builtin-calendar .mobile-calendar-booking-time { min-height: 44px !important; display: grid !important; align-content: center !important; justify-items: start !important; gap: 3px !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; } #mobile-builtin-calendar .mobile-calendar-booking-time strong { color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; font-size: 14px !important; line-height: 1 !important; font-weight: 880 !important; white-space: nowrap !important; } #mobile-builtin-calendar .mobile-calendar-booking-time span { color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 860 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } #mobile-builtin-calendar .mobile-calendar-booking-detail { min-width: 0 !important; display: grid !important; gap: 6px !important; } #mobile-builtin-calendar .mobile-calendar-day-meta { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 820 !important; text-transform: uppercase !important; } #mobile-builtin-calendar .mobile-calendar-booking-call { width: max-content !important; min-height: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 0 12px !important; border: 1px solid var(--text-primary) !important; border-radius: 999px !important; background: var(--text-primary) !important; color: var(--background-color) !important; -webkit-text-fill-color: var(--background-color) !important; font-size: 11px !important; line-height: 1 !important; font-weight: 860 !important; letter-spacing: 0 !important; cursor: pointer !important; } #mobile-builtin-calendar .mobile-calendar-booking-call i { color: var(--background-color) !important; -webkit-text-fill-color: var(--background-color) !important; font-size: 10px !important; } #mobile-builtin-calendar .mobile-calendar-day-times { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 1px !important; } #mobile-builtin-calendar .mobile-calendar-day-time { min-height: 40px !important; border: 1px solid var(--border-color) !important; border-radius: 14px !important; background: var(--background-color) !important; color: var(--text-primary) !important; font-size: 13px !important; font-weight: 830 !important; box-shadow: none !important; } #mobile-builtin-calendar .mobile-calendar-day-time:hover, #mobile-builtin-calendar .mobile-calendar-day-time:focus-visible { border-color: color-mix(in srgb, var(--text-primary) 24%, var(--border-color)) !important; background: color-mix(in srgb, var(--text-primary) 5%, var(--background-color)) !important; outline: none !important; } #mobile-builtin-calendar .mobile-calendar-empty-day { min-height: 98px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; border: 1px dashed color-mix(in srgb, var(--border-color) 82%, transparent) !important; border-radius: 20px !important; background: color-mix(in srgb, var(--surface-color, var(--background-color)) 72%, var(--background-color)) !important; color: var(--text-secondary) !important; font-size: 13px !important; font-weight: 760 !important; line-height: 1.35 !important; } #mobileAddBookingModal { background: linear-gradient(color-mix(in srgb, var(--border-color) 28%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--border-color) 28%, transparent) 1px, transparent 1px), var(--background-color) !important; background-size: 22px 22px, 22px 22px, auto !important; color: var(--text-primary) !important; } #mobileAddBookingModal > div { max-width: 720px !important; padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px calc(env(safe-area-inset-bottom, 0px) + 28px) !important; } #mobileAddBookingModal .mobile-booking-service-shell { min-height: 100% !important; } #mobileAddBookingModal .mobile-booking-service-header { display: grid !important; grid-template-columns: 42px minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; margin-bottom: 14px !important; } #mobileAddBookingModal .mobile-booking-service-back { width: 42px !important; height: 42px !important; border-radius: 999px !important; border: 1px solid var(--border-color) !important; background: var(--surface-color) !important; color: var(--text-primary) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; } #mobileAddBookingModal .mobile-booking-service-title { text-align: center !important; min-width: 0 !important; } #mobileAddBookingModal .mobile-booking-service-title span { display: block !important; color: var(--text-secondary) !important; font-size: 11px !important; line-height: 1 !important; font-weight: 760 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; margin-bottom: 2px !important; } #mobileAddBookingModal .mobile-booking-service-title h2 { font-size: 22px !important; line-height: 1 !important; font-weight: 780 !important; color: var(--text-primary) !important; margin: 0 !important; } #mobileAddBookingModal .mobile-booking-service-save { min-height: 40px !important; padding: 0 14px !important; border-radius: 999px !important; border: 1px solid color-mix(in srgb, var(--primary-color) 72%, transparent) !important; background: color-mix(in srgb, var(--primary-color) 12%, transparent) !important; color: var(--primary-color) !important; -webkit-text-fill-color: var(--primary-color) !important; font-size: 13px !important; font-weight: 820 !important; box-shadow: none !important; } #mobileAddBookingModal #mobileAddBookingForm { display: grid !important; gap: 12px !important; } #mobileAddBookingModal #mobileAddBookingForm > div { margin: 0 !important; } #mobileAddBookingModal label { color: var(--text-secondary) !important; font-size: 10px !important; font-weight: 860 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } #mobileAddBookingModal input, #mobileAddBookingModal select, #mobileAddBookingModal textarea { background: var(--background-color) !important; border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent) !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; border-radius: 14px !important; min-height: 44px !important; font-size: 14px !important; font-weight: 650 !important; box-shadow: none !important; } #mobileAddBookingModal textarea { min-height: 96px !important; line-height: 1.42 !important; } #mobileAddBookingModal #mobile-specificAvailabilityContainer { background: var(--background-color) !important; border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent) !important; border-radius: 16px !important; min-height: 64px !important; } #mobileAddBookingModal button[onclick*="mobileBulkAddDay"] { border: 1px solid var(--border-color) !important; border-radius: 999px !important; background: var(--surface-color) !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; padding: 9px 12px !important; } #mobileAddBookingModal button[onclick="saveMobileBookingService()"] { background: color-mix(in srgb, var(--primary-color) 92%, white 8%) !important; border-color: color-mix(in srgb, var(--primary-color) 86%, black 14%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: none !important; } #mobileAddBookingModal .mobile-builder-time-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 7px !important; margin: 8px 0 10px !important; } #mobileAddBookingModal .mobile-builder-time-grid button { min-height: 36px !important; border: 1px solid var(--border-color) !important; border-radius: 999px !important; background: var(--surface-color) !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; font-size: 12px !important; font-weight: 820 !important; } #mobileAddBookingModal .mobile-builder-error { display: block !important; margin-top: 7px !important; color: #b42318 !important; -webkit-text-fill-color: #b42318 !important; font-size: 11px !important; font-weight: 760 !important; line-height: 1.25 !important; } #mobileAddBookingModal .mobile-builder-status { margin: 8px 0 0 !important; color: var(--text-secondary) !important; font-size: 11px !important; font-weight: 720 !important; } #mobileAddBookingModal .mobile-builder-empty { color: var(--text-secondary) !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 640 !important; } #mobileAddBookingModal .mobile-builder-availability-list { display: grid !important; gap: 10px !important; } #mobileAddBookingModal .mobile-builder-availability-row { display: grid !important; gap: 8px !important; padding-bottom: 10px !important; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent) !important; } #mobileAddBookingModal .mobile-builder-availability-row:last-child { padding-bottom: 0 !important; border-bottom: 0 !important; } #mobileAddBookingModal .mobile-builder-availability-date { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; color: var(--text-primary) !important; font-size: 13px !important; font-weight: 780 !important; } #mobileAddBookingModal .mobile-builder-availability-count { color: var(--text-secondary) !important; font-size: 11px !important; font-weight: 760 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } #mobileAddBookingModal .mobile-builder-availability-times { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } #mobileAddBookingModal .mobile-builder-availability-chip { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: 34px !important; padding: 0 12px !important; border-radius: 999px !important; border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent) !important; background: var(--surface-color) !important; color: var(--text-primary) !important; font-size: 12px !important; font-weight: 760 !important; } #mobileAddBookingModal .mobile-builder-availability-remove { width: 18px !important; height: 18px !important; min-width: 18px !important; border-radius: 999px !important; border: 0 !important; background: color-mix(in srgb, var(--danger-color, #b42318) 10%, transparent) !important; color: var(--danger-color, #b42318) !important; -webkit-text-fill-color: var(--danger-color, #b42318) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; box-shadow: none !important; } #mobileAddBookingModal .mobile-booking-availability-shell { display: grid !important; gap: 12px !important; } #mobileAddBookingModal .mobile-booking-availability-top { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; align-items: end !important; } #mobileAddBookingModal .mobile-booking-availability-stack { display: grid !important; gap: 6px !important; min-width: 0 !important; } #mobileAddBookingModal .mobile-booking-availability-stack:has(> #mobile-specificDate), #mobileAddBookingModal .mobile-booking-availability-stack:has(> #mobile-specificTime) { grid-template-columns: minmax(0, 1fr) !important; } #mobileAddBookingModal .mobile-booking-mini-label { color: var(--text-secondary) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 860 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } #mobileAddBookingModal .mobile-booking-add-time-btn { grid-column: 1 / -1 !important; width: 100% !important; min-height: 50px !important; padding: 0 14px !important; border-radius: 16px !important; background: color-mix(in srgb, var(--primary-color) 92%, white 8%) !important; border: 1px solid color-mix(in srgb, var(--primary-color) 86%, black 14%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 14px !important; font-weight: 860 !important; white-space: nowrap !important; } #mobileAddBookingModal .mobile-booking-repeat-row { display: grid !important; gap: 10px !important; margin: 8px 0 0 !important; padding: 12px !important; border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent) !important; border-radius: 18px !important; background: color-mix(in srgb, var(--surface-color) 68%, transparent) !important; } #mobileAddBookingModal .mobile-booking-repeat-row .mobile-booking-mini-label { width: 100% !important; } #mobileAddBookingModal .mobile-booking-repeat-days { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; } #mobileAddBookingModal .mobile-booking-repeat-days button { width: 100% !important; min-height: 40px !important; padding: 0 !important; justify-content: center !important; } #mobilePaymentModal.mobile-booking-payment-sheet { background: var(--background-color) !important; color: var(--text-primary) !important; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif !important; } #mobilePaymentModal .mobile-payment-shell { max-width: 620px !important; margin: 0 auto !important; min-height: 100dvh !important; padding: calc(env(safe-area-inset-top, 0px) + 30px) 22px calc(env(safe-area-inset-bottom, 0px) + 84px) !important; } #mobilePaymentModal .mobile-payment-back { border: 0 !important; background: transparent !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; padding: 0 !important; margin: 0 0 24px !important; font-size: 12px !important; font-weight: 820 !important; } #mobilePaymentModal .mobile-payment-title { margin: 0 0 7px !important; color: var(--text-primary) !important; font-size: 34px !important; line-height: 0.98 !important; font-weight: 880 !important; letter-spacing: 0 !important; } #mobilePaymentModal .mobile-payment-subtitle { margin: 0 0 20px !important; color: var(--text-secondary) !important; font-size: 13px !important; font-weight: 720 !important; } #mobilePaymentModal .mobile-payment-summary { border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 0 0 18px !important; margin-bottom: 20px !important; border-bottom: 1px solid var(--border-color) !important; } #mobilePaymentModal .mobile-payment-summary-title { margin: 0 0 6px !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; font-size: 19px !important; line-height: 1.08 !important; font-weight: 860 !important; letter-spacing: -0.02em !important; } #mobilePaymentModal .mobile-payment-summary-date { margin: 0 0 18px !important; color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; font-size: 13px !important; line-height: 1.35 !important; font-weight: 740 !important; } #mobilePaymentModal .mobile-payment-line { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; padding: 12px 0 !important; border-top: 1px solid var(--border-color) !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; font-size: 14px !important; font-weight: 740 !important; } #mobilePaymentModal .mobile-payment-line-label { color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; font-weight: 720 !important; } #mobilePaymentModal .mobile-payment-total-line { padding-top: 15px !important; font-size: 15px !important; font-weight: 860 !important; } #mobilePaymentModal .mobile-payment-total-line strong { font-size: 22px !important; letter-spacing: -0.035em !important; } #mobilePaymentModal .mobile-payment-method-title { margin: 0 0 10px !important; color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; font-size: 10.5px !important; font-weight: 860 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } #mobilePaymentModal .mobile-payment-card-divider { display: flex !important; align-items: center !important; gap: 10px !important; margin: 16px 0 12px !important; color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; font-size: 10.5px !important; font-weight: 860 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } #mobilePaymentModal .mobile-payment-card-divider::before, #mobilePaymentModal .mobile-payment-card-divider::after { content: "" !important; height: 1px !important; flex: 1 !important; background: var(--border-color) !important; } #mobilePaymentModal #mobile-pay-button { width: 100% !important; min-height: 52px !important; background: var(--primary-color) !important; color: var(--background-color) !important; -webkit-text-fill-color: var(--background-color) !important; border: 1px solid var(--primary-color) !important; border-radius: 14px !important; font-size: 15px !important; font-weight: 820 !important; box-shadow: 0 10px 26px color-mix(in srgb, var(--primary-color) 16%, transparent) !important; } #booking-settings-modal { background: var(--background-color) !important; color: var(--text-primary) !important; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif !important; } #booking-settings-modal > div { max-width: 560px !important; padding: calc(env(safe-area-inset-top, 0px) + 34px) 20px calc(env(safe-area-inset-bottom, 0px) + 96px) !important; } #booking-settings-modal button[onclick="closeBookingSettingsModal()"] { top: calc(env(safe-area-inset-top, 0px) + 24px) !important; right: 20px !important; width: auto !important; height: auto !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; font-size: 13px !important; font-weight: 850 !important; line-height: 1 !important; } #booking-settings-modal h2 { font-size: 34px !important; line-height: 0.98 !important; letter-spacing: -0.045em !important; font-weight: 880 !important; text-align: left !important; } #booking-settings-modal h3 { color: var(--text-primary) !important; font-size: 13px !important; font-weight: 850 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin: 0 0 14px !important; } #booking-settings-modal .mobile-booking-settings-section { margin-bottom: 34px !important; padding-bottom: 28px !important; border-bottom: 1px solid var(--border-color) !important; } #booking-settings-modal .mobile-booking-settings-section:last-child { border-bottom: 0 !important; } #booking-settings-modal .booking-permissions-ui { display: grid !important; gap: 18px !important; } #booking-settings-modal .booking-permissions-choice-group { display: grid !important; grid-template-columns: 1fr !important; border: 1px solid var(--border-color) !important; border-radius: 18px !important; overflow: hidden !important; background: color-mix(in srgb, var(--background-color) 98%, var(--text-primary) 2%) !important; } #booking-settings-modal .booking-permissions-choice { position: relative !important; display: grid !important; gap: 7px !important; padding: 17px !important; border-bottom: 1px solid var(--border-color) !important; cursor: pointer !important; } #booking-settings-modal .booking-permissions-choice:last-child { border-bottom: 0 !important; } #booking-settings-modal .booking-permissions-choice input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; } #booking-settings-modal .booking-permissions-choice-title { display: flex !important; align-items: center !important; justify-content: space-between !important; color: var(--text-primary) !important; font-size: 15px !important; font-weight: 860 !important; letter-spacing: -0.015em !important; } #booking-settings-modal .booking-permissions-choice-title::after { content: "" !important; width: 10px !important; height: 10px !important; border-radius: 999px !important; border: 1px solid color-mix(in srgb, var(--text-secondary) 44%, transparent) !important; background: transparent !important; } #booking-settings-modal .booking-permissions-choice-copy { margin: 0 !important; color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; font-size: 12px !important; line-height: 1.38 !important; font-weight: 640 !important; } #booking-settings-modal .booking-permissions-choice:has(input:checked) { background: color-mix(in srgb, var(--primary-color) 9%, var(--background-color)) !important; } #booking-settings-modal .booking-permissions-choice:has(input:checked) .booking-permissions-choice-title::after { border-color: rgba(34, 197, 94, 0.42) !important; background: rgba(34, 197, 94, 0.72) !important; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.10) !important; } #booking-settings-modal .booking-permissions-access { display: grid !important; gap: 12px !important; } #booking-settings-modal .booking-permissions-access h4 { margin: 0 !important; color: var(--text-primary) !important; font-size: 16px !important; font-weight: 850 !important; letter-spacing: -0.02em !important; } #booking-settings-modal .booking-permissions-access p { margin: 5px 0 0 !important; color: var(--text-secondary) !important; font-size: 12px !important; line-height: 1.35 !important; font-weight: 640 !important; } #booking-settings-modal .booking-permissions-access-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 10px !important; } #booking-settings-modal .booking-permissions-access-row input { min-height: 46px !important; padding: 0 13px !important; border: 1px solid var(--border-color) !important; border-radius: 13px !important; background: transparent !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; font-size: 13px !important; font-weight: 760 !important; outline: 0 !important; } #booking-settings-modal .booking-permissions-access-row button { min-height: 46px !important; padding: 0 17px !important; border: 1px solid color-mix(in srgb, var(--primary-color) 82%, black 18%) !important; border-radius: 13px !important; background: color-mix(in srgb, var(--primary-color) 92%, white 8%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 12px !important; font-weight: 850 !important; cursor: pointer !important; } #booking-settings-modal .mobile-booking-setting-row { display: grid !important; gap: 12px !important; } #booking-settings-modal .mobile-booking-setting-main { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important; } #booking-settings-modal .mobile-booking-setting-title { margin: 0 !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; font-size: 16px !important; line-height: 1.08 !important; font-weight: 860 !important; letter-spacing: -0.02em !important; text-transform: none !important; } #booking-settings-modal .mobile-booking-setting-copy { margin: 6px 0 0 !important; color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; font-size: 12px !important; line-height: 1.35 !important; font-weight: 640 !important; } #booking-settings-modal .mobile-booking-setting-note { color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 680 !important; } #booking-settings-modal .mobile-booking-setting-note strong { color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; } #booking-settings-modal .mobile-booking-settings-action { width: 100% !important; min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; padding: 0 16px !important; border: 1px solid color-mix(in srgb, var(--primary-color) 82%, black 18%) !important; border-radius: 14px !important; background: color-mix(in srgb, var(--primary-color) 92%, white 8%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 13px !important; font-weight: 850 !important; box-shadow: none !important; cursor: pointer !important; } #booking-settings-modal .mobile-booking-settings-action.is-secondary { background: transparent !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; border-color: var(--border-color) !important; } #booking-settings-modal .mobile-booking-settings-action.is-danger { width: auto !important; min-height: 34px !important; padding: 0 12px !important; border-color: rgba(239, 68, 68, 0.26) !important; background: rgba(239, 68, 68, 0.08) !important; color: #dc2626 !important; -webkit-text-fill-color: #dc2626 !important; font-size: 12px !important; } #booking-settings-modal .mobile-booking-share-tools { display: grid !important; gap: 10px !important; } #booking-settings-modal #booking-link-display { margin-top: 12px !important; } #booking-settings-modal #booking-link-url { width: 100% !important; min-height: 44px !important; box-sizing: border-box !important; padding: 0 13px !important; border: 1px solid var(--border-color) !important; border-radius: 13px !important; background: transparent !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; font-size: 12px !important; font-weight: 720 !important; margin-bottom: 10px !important; }