/** * PTST Booking & Enquiry Modal v6 — design-system aligned. * * Companion file to /js/ptst-modal.js. All visual treatments use the * shared design tokens defined in css/colors_and_type.css so the modal * stays in lockstep with the rest of the site when tokens change. * * Defensive `!important` is kept ONLY on elements that Elementor's global * theme styles target aggressively (buttons, form inputs). Everything * else is plain selectors. Scope is `#ptst-modal-overlay …` for the same * reason — the overlay is appended to and lives outside any * design-system wrapper, so we have no ancestor specificity to lean on. */ /* ============================================================ 1. OVERLAY + CONTAINER ============================================================ */ .ptst-modal-overlay { display: none; position: fixed; inset: 0; background: var(--overlay, rgba(11, 27, 51, 0.55)); z-index: 99999; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .ptst-modal-overlay--open { display: flex; animation: ptst-modal-fade-in 0.18s ease-out both; } @keyframes ptst-modal-fade-in { from { opacity: 0; } to { opacity: 1; } } #ptst-modal-overlay .ptst-modal { background: var(--bg, #FFFFFF); border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-lg, 0 18px 40px rgba(11, 27, 51, 0.16)); width: 100%; max-width: 620px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; position: relative; /* anchor for the discard panel */ font-family: var(--font-sans, inherit); font-size: 14px; color: var(--ink, #0B1B33); animation: ptst-modal-pop-in 0.22s cubic-bezier(0.2, 0.8, 0.25, 1) both; } @keyframes ptst-modal-pop-in { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* ============================================================ 2. HEADER — deep blue with a hero-like gradient + scrim ============================================================ */ #ptst-modal-overlay .ptst-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 28px 20px; color: #FFFFFF; flex-shrink: 0; position: relative; /* Deep brand gradient with a subtle highlight at the top edge — same feel as the page heroes, scaled down for modal proportions. */ background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 60%), linear-gradient(135deg, var(--brand-blue, #012F63) 0%, var(--brand-blue-deep, #08316B) 100%); } #ptst-modal-overlay .ptst-modal__header-text { min-width: 0; /* lets the subtitle truncate cleanly */ flex: 1; } #ptst-modal-overlay .ptst-modal__title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 4px; color: #FFFFFF; } #ptst-modal-overlay .ptst-modal__subtitle { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.78); word-break: break-word; } #ptst-modal-overlay .ptst-modal__close { appearance: none !important; background: rgba(255, 255, 255, 0.10) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: #FFFFFF !important; font-size: 22px !important; line-height: 1 !important; width: 34px; height: 34px; border-radius: 999px !important; cursor: pointer; flex-shrink: 0; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s, transform 0.15s; box-shadow: none !important; outline: none; } #ptst-modal-overlay .ptst-modal__close:hover, #ptst-modal-overlay .ptst-modal__close:focus-visible { background: rgba(255, 255, 255, 0.20) !important; border-color: rgba(255, 255, 255, 0.35) !important; } #ptst-modal-overlay .ptst-modal__close:focus-visible { box-shadow: var(--shadow-focus, 0 0 0 4px rgba(46, 143, 208, 0.30)) !important; } /* ============================================================ 3. STEP INDICATOR — clickable on done steps ============================================================ */ #ptst-modal-overlay .ptst-modal__steps { display: flex; align-items: center; gap: 4px; padding: 14px 28px; background: var(--bg-soft, #F4F7FB); border-bottom: 1px solid var(--line, #E2E8F2); flex-shrink: 0; overflow-x: auto; scrollbar-width: thin; } /* When wrapped in a