/* ============================================================================ * booking-modal.css — Lady of Destiny · luxury multi-step booking modal. * * Every rule is scoped under #lodBookingModal (root also carries .lod-book) so * nothing here can leak into the surrounding site. Colours + type mirror the * site theme (navy #0a0d1f, gold #d4af37 / #f4d47c, cream #f5e9c8; Cinzel / * Cormorant Garamond / Inter Tight). Self-contained: no @import, no deps. * ==========================================================================*/ /* ---- Scroll lock applied to while the modal is open ---------------- */ body.lod-noscroll { position: fixed; inset: 0; width: 100%; overflow: hidden; } /* ---- Local theme tokens (hard-coded so the modal never depends on the page) */ #lodBookingModal { --lod-void: #05060d; --lod-navy: #0a0d1f; --lod-deep: #11142b; --lod-panel: rgba(13, 16, 33, 0.74); --lod-panel-2: rgba(212, 175, 55, 0.05); --lod-gold: #d4af37; --lod-gold-bright: #f4d47c; --lod-gold-deep: #8a6d1c; --lod-cream: #f5e9c8; --lod-mist: rgba(245, 233, 200, 0.60); --lod-mist-2: rgba(245, 233, 200, 0.42); --lod-line: rgba(212, 175, 55, 0.22); --lod-line-soft: rgba(212, 175, 55, 0.10); --lod-field-bg: rgba(255, 255, 255, 0.035); --lod-field-bg-2: rgba(255, 255, 255, 0.06); --lod-err: #ef9d76; --lod-err-line: rgba(239, 157, 118, 0.55); --lod-ok: #8fd6a0; --lod-serif: 'Cormorant Garamond', 'Times New Roman', serif; --lod-display: 'Cinzel', 'Cormorant Garamond', serif; --lod-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --lod-radius: 22px; --lod-ease: cubic-bezier(0.22, 1, 0.36, 1); --lod-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 26px; color: var(--lod-cream); font-family: var(--lod-sans); color-scheme: dark; opacity: 0; visibility: hidden; transition: opacity 0.42s var(--lod-ease), visibility 0s linear 0.42s; -webkit-font-smoothing: antialiased; } #lodBookingModal[hidden] { display: none; } #lodBookingModal.is-open { opacity: 1; visibility: visible; transition: opacity 0.42s var(--lod-ease); } #lodBookingModal * { box-sizing: border-box; } #lodBookingModal *:focus-visible { outline: 2px solid var(--lod-gold-bright); outline-offset: 2px; } /* ---- Backdrop ------------------------------------------------------------- */ #lodBookingModal .lod-backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 0%, rgba(107, 70, 193, 0.20), transparent 55%), radial-gradient(ellipse at 82% 100%, rgba(212, 175, 55, 0.10), transparent 55%), rgba(4, 5, 12, 0.72); backdrop-filter: blur(9px) saturate(120%); -webkit-backdrop-filter: blur(9px) saturate(120%); opacity: 0; transition: opacity 0.42s var(--lod-ease); } #lodBookingModal.is-open .lod-backdrop { opacity: 1; } /* ---- The glass card ------------------------------------------------------- */ #lodBookingModal .lod-card { position: relative; z-index: 1; width: 100%; max-width: 920px; max-height: 92vh; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(17, 20, 43, 0.86), rgba(10, 13, 31, 0.90)); border: 1px solid var(--lod-line); border-radius: var(--lod-radius); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.62), 0 2px 0 rgba(255, 255, 255, 0.04) inset, 0 0 0 1px rgba(255, 255, 255, 0.02) inset; backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%); overflow: hidden; transform: translateY(26px) scale(0.965); opacity: 0; transition: transform 0.5s var(--lod-ease), opacity 0.5s var(--lod-ease); } #lodBookingModal.is-open .lod-card { transform: none; opacity: 1; } /* Top gold hairline + soft crown glow */ #lodBookingModal .lod-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--lod-gold-bright), transparent); opacity: 0.85; z-index: 3; } #lodBookingModal .lod-card-glow { position: absolute; top: -140px; left: 50%; width: 460px; height: 300px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.18), transparent 70%); pointer-events: none; z-index: 0; } /* ---- Close button --------------------------------------------------------- */ #lodBookingModal .lod-x { position: absolute; top: 14px; right: 14px; z-index: 6; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--lod-line-soft); border-radius: 50%; background: rgba(255, 255, 255, 0.03); color: var(--lod-mist); cursor: pointer; font-size: 22px; line-height: 1; transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.25s; } #lodBookingModal .lod-x:hover { color: var(--lod-gold-bright); border-color: var(--lod-gold); background: rgba(212, 175, 55, 0.10); transform: rotate(90deg); } /* ---- Header --------------------------------------------------------------- */ #lodBookingModal .lod-head { position: relative; z-index: 2; padding: 30px 34px 14px; text-align: center; flex: none; } #lodBookingModal .lod-brand { font-family: var(--lod-sans); font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--lod-gold); } #lodBookingModal .lod-title { font-family: var(--lod-display); font-weight: 600; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.14; margin: 0.5rem 0 0.2rem; color: var(--lod-cream); } #lodBookingModal .lod-sub { font-family: var(--lod-serif); font-style: italic; font-size: 1.02rem; color: var(--lod-mist); margin: 0; } #lodBookingModal .lod-draftnote { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.7rem; padding: 0.3rem 0.85rem; border: 1px solid var(--lod-line); border-radius: 40px; background: rgba(212, 175, 55, 0.07); font-family: var(--lod-sans); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--lod-gold-bright); animation: lodb-fade 0.5s var(--lod-ease); } /* ---- Step indicator (dots) ------------------------------------------------ */ #lodBookingModal .lod-steps { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 2px; padding: 12px 30px 4px; flex: none; } #lodBookingModal .lod-dot { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; background: none; border: 0; padding: 0; cursor: default; color: var(--lod-mist-2); } #lodBookingModal .lod-dot .lod-dot-num { position: relative; z-index: 1; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--lod-line); background: rgba(10, 13, 31, 0.9); font-family: var(--lod-sans); font-size: 0.78rem; font-weight: 500; color: var(--lod-mist); transition: all 0.35s var(--lod-ease); } #lodBookingModal .lod-dot .lod-dot-label { font-family: var(--lod-sans); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lod-mist-2); transition: color 0.35s; white-space: nowrap; } /* connector line */ #lodBookingModal .lod-dot::after { content: ""; position: absolute; top: 15px; left: 50%; right: -50%; height: 1px; background: var(--lod-line-soft); z-index: 0; } #lodBookingModal .lod-dot:last-child::after { display: none; } #lodBookingModal .lod-dot.done .lod-dot-num { border-color: var(--lod-gold); background: linear-gradient(135deg, var(--lod-gold-deep), var(--lod-gold)); color: #1a1500; font-size: 0; } #lodBookingModal .lod-dot.done .lod-dot-num::after { content: ""; width: 11px; height: 6px; border-left: 2px solid #1a1500; border-bottom: 2px solid #1a1500; transform: rotate(-45deg) translateY(-1px); } #lodBookingModal .lod-dot.current .lod-dot-num { border-color: var(--lod-gold-bright); background: rgba(212, 175, 55, 0.14); color: var(--lod-gold-bright); box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.10), 0 0 18px rgba(212, 175, 55, 0.25); transform: scale(1.06); } #lodBookingModal .lod-dot.current .lod-dot-label { color: var(--lod-gold-bright); } #lodBookingModal .lod-dot.done .lod-dot-label { color: var(--lod-mist); } /* ---- Slim progress bar ---------------------------------------------------- */ #lodBookingModal .lod-progress { position: relative; z-index: 2; height: 2px; margin: 10px 34px 0; border-radius: 2px; background: var(--lod-line-soft); flex: none; } #lodBookingModal .lod-progress > span { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--lod-gold), var(--lod-gold-bright)); box-shadow: 0 0 10px rgba(212, 175, 55, 0.5); transition: width 0.5s var(--lod-ease); } /* ---- Form / scrolling viewport ------------------------------------------- */ #lodBookingModal .lod-stage { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } #lodBookingModal .lod-form { display: contents; } /* The site hides the native cursor for its custom pointer; the modal sits above that pointer, so restore normal cursors inside it (fixes "no cursor" in the modal). */ #lodBookingModal, #lodBookingModal * { cursor: auto; } #lodBookingModal a, #lodBookingModal button, #lodBookingModal [role="button"], #lodBookingModal label, #lodBookingModal .lod-chip, #lodBookingModal .lod-mode, #lodBookingModal .lod-seg-btn, #lodBookingModal .lod-dot, #lodBookingModal [data-close], #lodBookingModal .lod-x, #lodBookingModal select { cursor: pointer; } #lodBookingModal input, #lodBookingModal textarea { cursor: text; } #lodBookingModal .lod-optional { color: var(--lod-gold-bright); font-weight: 700; letter-spacing: 0.02em; } #lodBookingModal .lod-viewport { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; padding: 20px 34px 8px; scrollbar-width: thin; scrollbar-color: var(--lod-gold-deep) transparent; } #lodBookingModal .lod-viewport::-webkit-scrollbar { width: 8px; } #lodBookingModal .lod-viewport::-webkit-scrollbar-thumb { background: var(--lod-gold-deep); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } #lodBookingModal .lod-viewport::-webkit-scrollbar-track { background: transparent; } #lodBookingModal .lod-step { display: none; } #lodBookingModal .lod-step.active { display: block; animation: lodb-stepin 0.45s var(--lod-ease); } #lodBookingModal .lod-step-head { margin-bottom: 1.1rem; } #lodBookingModal .lod-step-head h3 { font-family: var(--lod-display); font-weight: 500; font-size: 1.28rem; color: var(--lod-cream); margin: 0 0 0.25rem; } #lodBookingModal .lod-step-head p { font-family: var(--lod-serif); font-size: 1.04rem; color: var(--lod-mist); margin: 0; line-height: 1.5; } /* ---- Fields grid ---------------------------------------------------------- */ #lodBookingModal .lod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.95rem 1.1rem; } #lodBookingModal .lod-field { display: flex; flex-direction: column; min-width: 0; } #lodBookingModal .lod-field.wide { grid-column: 1 / -1; } #lodBookingModal .lod-field > label { font-family: var(--lod-sans); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--lod-gold); margin-bottom: 0.4rem; font-weight: 500; } #lodBookingModal .lod-field .lod-req { color: var(--lod-gold-bright); } #lodBookingModal .lod-field .lod-hint { text-transform: none; letter-spacing: 0.01em; color: var(--lod-mist-2); font-size: 0.64rem; font-weight: 400; } #lodBookingModal input, #lodBookingModal select, #lodBookingModal textarea { width: 100%; font-family: var(--lod-sans); font-size: 0.92rem; color: var(--lod-cream); background: var(--lod-field-bg); border: 1px solid var(--lod-line); border-radius: 12px; padding: 0.72rem 0.85rem; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; -webkit-appearance: none; appearance: none; } #lodBookingModal textarea { resize: vertical; min-height: 130px; line-height: 1.6; font-family: var(--lod-serif); font-size: 1.05rem; } #lodBookingModal input::placeholder, #lodBookingModal textarea::placeholder { color: var(--lod-mist-2); } #lodBookingModal input:hover, #lodBookingModal select:hover, #lodBookingModal textarea:hover { border-color: rgba(212, 175, 55, 0.4); } #lodBookingModal input:focus, #lodBookingModal select:focus, #lodBookingModal textarea:focus { outline: none; border-color: var(--lod-gold); background: var(--lod-field-bg-2); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14), 0 0 18px rgba(212, 175, 55, 0.10); } #lodBookingModal input[type="date"], #lodBookingModal input[type="time"] { min-height: 44px; } #lodBookingModal input[type="date"]::-webkit-calendar-picker-indicator, #lodBookingModal input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.75) sepia(1) saturate(4) hue-rotate(2deg); opacity: 0.85; cursor: pointer; } /* Custom select caret */ #lodBookingModal .lod-selwrap { position: relative; } #lodBookingModal .lod-selwrap select { padding-right: 2.2rem; cursor: pointer; } #lodBookingModal .lod-selwrap .lod-caret { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; pointer-events: none; color: var(--lod-gold); } #lodBookingModal option { background: var(--lod-deep); color: var(--lod-cream); } /* Invalid state */ #lodBookingModal .lod-field.invalid input, #lodBookingModal .lod-field.invalid select, #lodBookingModal .lod-field.invalid textarea { border-color: var(--lod-err-line); box-shadow: 0 0 0 3px rgba(239, 157, 118, 0.12); } #lodBookingModal .lod-err-msg { display: none; font-family: var(--lod-sans); font-size: 0.68rem; letter-spacing: 0.02em; color: var(--lod-err); margin-top: 0.35rem; min-height: 0; } #lodBookingModal .lod-field.invalid .lod-err-msg { display: block; animation: lodb-fade 0.3s ease; } /* ---- Character counter (concern) ----------------------------------------- */ #lodBookingModal .lod-count { font-family: var(--lod-sans); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--lod-mist-2); margin-top: 0.4rem; text-align: right; } #lodBookingModal .lod-count.short span { color: var(--lod-err); } #lodBookingModal .lod-count.ok span { color: var(--lod-ok); } /* ---- Service chips (multi-select) ---------------------------------------- */ #lodBookingModal .lod-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; } #lodBookingModal .lod-chip { font-family: var(--lod-sans); font-size: 0.8rem; letter-spacing: 0.02em; color: var(--lod-cream); background: rgba(212, 175, 55, 0.05); border: 1px solid var(--lod-line); border-radius: 40px; padding: 0.5rem 1rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; transition: all 0.22s var(--lod-ease); user-select: none; } #lodBookingModal .lod-chip::before { content: ""; width: 0; height: 0; overflow: hidden; opacity: 0; transition: width 0.22s var(--lod-ease), opacity 0.22s; } #lodBookingModal .lod-chip:hover { border-color: var(--lod-gold); background: rgba(212, 175, 55, 0.10); transform: translateY(-1px); } #lodBookingModal .lod-chip[aria-pressed="true"] { background: linear-gradient(120deg, var(--lod-gold), var(--lod-gold-bright)); border-color: var(--lod-gold-bright); color: #1a1500; font-weight: 600; box-shadow: 0 6px 18px rgba(212, 175, 55, 0.28); } #lodBookingModal .lod-chip[aria-pressed="true"]::before { content: "✓"; width: auto; opacity: 1; font-size: 0.72rem; font-weight: 700; } #lodBookingModal .lod-chips-count { font-family: var(--lod-sans); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--lod-mist); margin-top: 0.9rem; } #lodBookingModal .lod-chips-count b { color: var(--lod-gold-bright); font-weight: 600; } /* ---- Live price panel on the Consultation step ---------------------------- */ #lodBookingModal .lod-consult-price { margin-top: 1.1rem; padding: 1rem 1.15rem; border: 1px solid var(--lod-gold); border-radius: 12px; background: linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.03)); display: flex; flex-direction: column; gap: 0.3rem; } #lodBookingModal .lod-price-head { font-family: var(--lod-sans); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lod-mist); } #lodBookingModal .lod-price-name { font-family: var(--lod-serif); font-size: 1.2rem; color: var(--lod-cream); } #lodBookingModal .lod-price-amt { font-family: var(--lod-sans); font-size: 1.02rem; font-weight: 600; color: var(--lod-gold-bright); } /* ---- Mode radio cards ----------------------------------------------------- */ #lodBookingModal .lod-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; } #lodBookingModal .lod-mode { position: relative; display: flex; align-items: center; gap: 0.8rem; text-align: left; padding: 0.95rem 1rem; border: 1px solid var(--lod-line); border-radius: 14px; background: rgba(212, 175, 55, 0.04); color: var(--lod-cream); cursor: pointer; transition: all 0.24s var(--lod-ease); } #lodBookingModal .lod-mode:hover { border-color: var(--lod-gold); background: rgba(212, 175, 55, 0.09); transform: translateY(-2px); } #lodBookingModal .lod-mode .lod-mode-ic { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--lod-line); background: rgba(10, 13, 31, 0.6); color: var(--lod-gold-bright); } #lodBookingModal .lod-mode .lod-mode-ic svg { width: 20px; height: 20px; } #lodBookingModal .lod-mode .lod-mode-t { font-family: var(--lod-sans); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; } #lodBookingModal .lod-mode .lod-mode-check { position: absolute; top: 0.6rem; right: 0.7rem; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--lod-line); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; } #lodBookingModal .lod-mode[aria-checked="true"] { border-color: var(--lod-gold-bright); background: rgba(212, 175, 55, 0.12); box-shadow: 0 0 0 1px var(--lod-gold), 0 8px 22px rgba(212, 175, 55, 0.18); } #lodBookingModal .lod-mode[aria-checked="true"] .lod-mode-ic { background: linear-gradient(135deg, var(--lod-gold-deep), var(--lod-gold)); color: #1a1500; border-color: var(--lod-gold-bright); } #lodBookingModal .lod-mode[aria-checked="true"] .lod-mode-check { opacity: 1; background: var(--lod-gold-bright); border-color: var(--lod-gold-bright); color: #1a1500; font-size: 0.6rem; } /* ---- Segmented control (urgency) ----------------------------------------- */ #lodBookingModal .lod-seg { display: inline-flex; padding: 4px; gap: 3px; border: 1px solid var(--lod-line); border-radius: 40px; background: rgba(10, 13, 31, 0.6); } #lodBookingModal .lod-seg-btn { font-family: var(--lod-sans); font-size: 0.8rem; letter-spacing: 0.03em; color: var(--lod-mist); background: none; border: 0; border-radius: 40px; padding: 0.5rem 1.15rem; cursor: pointer; transition: color 0.22s, background 0.22s, box-shadow 0.22s; } #lodBookingModal .lod-seg-btn:hover { color: var(--lod-cream); } #lodBookingModal .lod-seg-btn[aria-checked="true"] { color: #1a1500; font-weight: 600; background: linear-gradient(120deg, var(--lod-gold), var(--lod-gold-bright)); box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3); } #lodBookingModal .lod-seg-btn.urg-Priority[aria-checked="true"] { background: linear-gradient(120deg, #e0a94e, var(--lod-gold-bright)); } #lodBookingModal .lod-seg-btn.urg-Emergency[aria-checked="true"] { background: linear-gradient(120deg, #e07a5f, #f0a68a); color: #2a0f07; } #lodBookingModal .lod-urg-note { font-family: var(--lod-serif); font-style: italic; font-size: 0.98rem; color: var(--lod-mist); margin-top: 0.7rem; } /* ---- Review step ---------------------------------------------------------- */ #lodBookingModal .lod-review { display: flex; flex-direction: column; gap: 0.85rem; } #lodBookingModal .lod-rev-group { border: 1px solid var(--lod-line-soft); border-radius: 14px; background: rgba(212, 175, 55, 0.035); padding: 0.95rem 1.1rem; } #lodBookingModal .lod-rev-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; } #lodBookingModal .lod-rev-head h4 { font-family: var(--lod-sans); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lod-gold); margin: 0; } #lodBookingModal .lod-edit { font-family: var(--lod-sans); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--lod-gold-bright); background: none; border: 0; cursor: pointer; padding: 0.2rem 0.3rem; border-radius: 6px; transition: color 0.2s, background 0.2s; } #lodBookingModal .lod-edit:hover { background: rgba(212, 175, 55, 0.12); text-decoration: underline; } #lodBookingModal .lod-rev-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 1rem; } #lodBookingModal .lod-rev-item { min-width: 0; } #lodBookingModal .lod-rev-item.full { grid-column: 1 / -1; } #lodBookingModal .lod-rev-k { font-family: var(--lod-sans); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lod-mist-2); display: block; margin-bottom: 0.1rem; } #lodBookingModal .lod-rev-v { font-family: var(--lod-serif); font-size: 1.02rem; color: var(--lod-cream); line-height: 1.45; word-wrap: break-word; } #lodBookingModal .lod-rev-v.muted { color: var(--lod-mist-2); font-style: italic; } #lodBookingModal .lod-rev-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; } #lodBookingModal .lod-rev-tag { font-family: var(--lod-sans); font-size: 0.72rem; color: var(--lod-gold-bright); border: 1px solid var(--lod-line); background: rgba(212, 175, 55, 0.06); border-radius: 40px; padding: 0.2rem 0.7rem; } /* ---- Confirm step --------------------------------------------------------- */ #lodBookingModal .lod-confirm { text-align: center; padding: 0.6rem 0 0.4rem; } #lodBookingModal .lod-confirm-emblem { font-size: 1.8rem; color: var(--lod-gold-bright); margin-bottom: 0.4rem; animation: lodb-pulse 3s ease-in-out infinite; } #lodBookingModal .lod-confirm h3 { font-family: var(--lod-display); font-weight: 500; font-size: 1.4rem; color: var(--lod-cream); margin: 0 0 0.5rem; } #lodBookingModal .lod-confirm p { font-family: var(--lod-serif); font-size: 1.06rem; color: var(--lod-mist); max-width: 440px; margin: 0 auto 0.6rem; line-height: 1.55; } #lodBookingModal .lod-fineprint { font-family: var(--lod-sans) !important; font-size: 0.72rem !important; color: var(--lod-mist-2) !important; letter-spacing: 0.01em; } #lodBookingModal .lod-captcha { display: flex; justify-content: center; margin: 1rem 0 0.4rem; min-height: 0; } #lodBookingModal .lod-captcha:empty { margin: 0; } /* ---- Footer / nav buttons ------------------------------------------------- */ #lodBookingModal .lod-foot { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 16px 34px 24px; border-top: 1px solid var(--lod-line-soft); background: linear-gradient(180deg, transparent, rgba(5, 6, 13, 0.35)); } #lodBookingModal .lod-stepinfo { font-family: var(--lod-sans); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lod-mist-2); text-align: center; flex: 1 1 auto; } #lodBookingModal .lod-btn { font-family: var(--lod-sans); font-size: 0.82rem; letter-spacing: 0.06em; padding: 0.82rem 1.6rem; border-radius: 40px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: filter 0.2s, background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.15s; white-space: nowrap; } #lodBookingModal .lod-btn:active { transform: translateY(1px); } #lodBookingModal .lod-primary { background: linear-gradient(120deg, var(--lod-gold), var(--lod-gold-bright)); color: #1a1500; font-weight: 600; box-shadow: 0 8px 22px rgba(212, 175, 55, 0.24); } #lodBookingModal .lod-primary:hover { filter: brightness(1.07); } #lodBookingModal .lod-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; filter: none; } #lodBookingModal .lod-ghost { border-color: var(--lod-line); color: var(--lod-mist); background: transparent; } #lodBookingModal .lod-ghost:hover { border-color: var(--lod-gold); color: var(--lod-gold-bright); background: rgba(212, 175, 55, 0.06); } #lodBookingModal .lod-back[hidden] { display: none; } /* ---- Loading overlay ------------------------------------------------------ */ #lodBookingModal .lod-loading { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: rgba(6, 8, 18, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--lod-radius); animation: lodb-fade 0.3s ease; } #lodBookingModal .lod-loading[hidden] { display: none; } #lodBookingModal .lod-spinner { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(212, 175, 55, 0.2); border-top-color: var(--lod-gold-bright); animation: lodb-spin 0.9s linear infinite; } #lodBookingModal .lod-loading p { font-family: var(--lod-serif); font-style: italic; font-size: 1.06rem; color: var(--lod-cream); letter-spacing: 0.02em; } #lodBookingModal .lod-loading .lod-loading-sub { font-family: var(--lod-sans); font-style: normal; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lod-mist-2); } /* ---- Submit error banner -------------------------------------------------- */ #lodBookingModal .lod-submit-err { display: none; margin: 0 0 0.4rem; padding: 0.7rem 0.95rem; border: 1px solid var(--lod-err-line); border-radius: 12px; background: rgba(239, 157, 118, 0.10); color: var(--lod-err); font-family: var(--lod-sans); font-size: 0.82rem; line-height: 1.45; } #lodBookingModal .lod-submit-err.show { display: block; animation: lodb-fade 0.3s ease; } /* ---- Success screen ------------------------------------------------------- */ #lodBookingModal .lod-confetti { position: absolute; inset: 0; z-index: 5; pointer-events: none; } #lodBookingModal .lod-success { position: relative; z-index: 2; text-align: center; padding: 40px 34px 42px; animation: lodb-fade 0.6s var(--lod-ease); } #lodBookingModal .lod-tick { width: 92px; height: 92px; margin: 0 auto 1.2rem; border-radius: 50%; border: 1px solid var(--lod-line); background: radial-gradient(circle at 50% 40%, rgba(212, 175, 55, 0.16), transparent 70%); display: flex; align-items: center; justify-content: center; animation: lodb-pop 0.6s var(--lod-ease) both; } #lodBookingModal .lod-tick svg { width: 52px; height: 52px; color: var(--lod-gold-bright); } #lodBookingModal .lod-tick svg path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: lodb-draw 0.7s var(--lod-ease) 0.25s forwards; } #lodBookingModal .lod-success h2 { font-family: var(--lod-display); font-weight: 600; font-size: clamp(1.7rem, 5vw, 2.3rem); color: var(--lod-cream); margin: 0 0 0.5rem; } #lodBookingModal .lod-success .lod-success-msg { font-family: var(--lod-serif); font-size: 1.12rem; color: var(--lod-mist); max-width: 440px; margin: 0 auto 1.4rem; line-height: 1.6; } #lodBookingModal .lod-refbox { display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.1rem 1.6rem; border: 1px solid var(--lod-gold); border-radius: 16px; background: rgba(212, 175, 55, 0.07); box-shadow: 0 0 30px rgba(212, 175, 55, 0.12) inset; margin-bottom: 1.5rem; } #lodBookingModal .lod-refbox .lod-ref-k { font-family: var(--lod-sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lod-gold); } #lodBookingModal .lod-refbox .lod-ref-v { font-family: var(--lod-display); font-size: 1.5rem; letter-spacing: 0.06em; color: var(--lod-gold-bright); } #lodBookingModal .lod-copy { font-family: var(--lod-sans); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--lod-cream); background: rgba(212, 175, 55, 0.1); border: 1px solid var(--lod-line); border-radius: 40px; padding: 0.35rem 0.9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; transition: all 0.2s; } #lodBookingModal .lod-copy:hover { border-color: var(--lod-gold); color: var(--lod-gold-bright); } #lodBookingModal .lod-copy.copied { color: var(--lod-ok); border-color: var(--lod-ok); } #lodBookingModal .lod-success-actions { display: flex; justify-content: center; } /* ---- Honeypot (kept off-screen, never focusable) -------------------------- */ #lodBookingModal .lod-hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* ---- Responsive: mobile full-height sheet -------------------------------- */ @media (max-width: 620px) { #lodBookingModal { padding: 0; align-items: flex-end; } #lodBookingModal .lod-card { max-width: 100%; width: 100%; height: 100%; max-height: 100%; border-radius: 0; border-left: 0; border-right: 0; transform: translateY(100%); } #lodBookingModal.is-open .lod-card { transform: none; } #lodBookingModal .lod-head { padding: 26px 20px 10px; } #lodBookingModal .lod-steps { padding: 10px 12px 4px; } #lodBookingModal .lod-dot .lod-dot-label { display: none; } #lodBookingModal .lod-dot.current .lod-dot-label { display: block; } #lodBookingModal .lod-progress { margin: 8px 20px 0; } #lodBookingModal .lod-viewport { padding: 18px 20px 8px; } #lodBookingModal .lod-foot { padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px)); } #lodBookingModal .lod-grid { grid-template-columns: 1fr; } #lodBookingModal .lod-modes { grid-template-columns: 1fr; } #lodBookingModal .lod-rev-list { grid-template-columns: 1fr; } #lodBookingModal .lod-btn { padding: 0.82rem 1.2rem; } } @media (max-width: 380px) { #lodBookingModal .lod-dot .lod-dot-num { width: 26px; height: 26px; } #lodBookingModal .lod-seg-btn { padding: 0.5rem 0.85rem; font-size: 0.74rem; } } /* ---- Reduced motion ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #lodBookingModal, #lodBookingModal .lod-card, #lodBookingModal .lod-backdrop { transition-duration: 0.001s; } #lodBookingModal .lod-card { transform: none; } #lodBookingModal .lod-step.active, #lodBookingModal .lod-draftnote, #lodBookingModal .lod-success, #lodBookingModal .lod-tick, #lodBookingModal .lod-loading, #lodBookingModal .lod-submit-err.show { animation: none; } #lodBookingModal .lod-tick svg path { stroke-dashoffset: 0; animation: none; } #lodBookingModal .lod-confirm-emblem, #lodBookingModal .lod-spinner { animation-duration: 0.001s; } #lodBookingModal .lod-x:hover { transform: none; } #lodBookingModal .lod-chip:hover, #lodBookingModal .lod-mode:hover { transform: none; } } /* ---- Keyframes ------------------------------------------------------------ */ @keyframes lodb-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes lodb-stepin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes lodb-spin { to { transform: rotate(360deg); } } @keyframes lodb-pop { 0% { opacity: 0; transform: scale(0.5); } 60% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } @keyframes lodb-draw { to { stroke-dashoffset: 0; } } @keyframes lodb-pulse { 0%, 100% { opacity: 0.7; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }