/* ============================================================================ PAYG MODAL STYLES — Mind & Body Collective ---------------------------------------------------------------------------- Styling for the Pay-As-You-Go pop-up (#paygModal), opened from the "PAYG" nav + footer links (js/payg.js). PAYG is no longer an online booking flow (the old Gymcatch widget was removed) — the modal now shows short, markdown- driven copy (content/payg.md) plus two CTAs: open the floating WhatsApp chat, or jump to the enquiry form. Load order: css/main.css must load BEFORE this file — the rules below reuse the brand tokens (var(--accent), var(--card), var(--border), var(--radius)…) defined there. See the order in index.html . The overlay + close button reuse .legal-modal / .legal-box / .legal-close (css/legal.css, loaded before this file); here we only size the box and style the copy + buttons inside it. ============================================================================ */ /* ============================================================ 1. MODAL BOX + SCROLLABLE BODY ------------------------------------------------------------ .legal-box is overflow:hidden and capped at 85vh, so the inner body scrolls if the copy is ever tall. This modal is short, so it rarely will. ============================================================ */ .payg-box { max-width: 620px; } .payg-modal-body { padding: 40px; overflow-y: auto; max-height: 85vh; } .payg-modal-body .section-head { margin-bottom: 24px; } @media (max-width: 560px) { .payg-modal-body { padding: 32px 20px; } } /* ============================================================ 2. COPY (markdown rendered from content/payg.md by js/payg.js) ------------------------------------------------------------ Matches the rendered-markdown typography used elsewhere (muted body text, accent links, a simple bullet list of benefits). ============================================================ */ .payg-copy p { color: var(--muted); font-size: .98rem; line-height: 1.7; margin: 0 0 14px; } .payg-copy ul { list-style: none; margin: 0 0 16px; padding: 0; } .payg-copy li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--muted); font-size: .95rem; line-height: 1.55; } /* Teal check marker on each benefit. */ .payg-copy li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; } .payg-copy strong { color: var(--text); } .payg-copy em { color: var(--text); font-style: italic; } .payg-copy a { color: var(--accent); } .payg-copy a:hover { opacity: .8; } .payg-copy code { color: var(--accent-2); font-size: .85rem; } /* ============================================================ 3. CTA BUTTONS ------------------------------------------------------------ Two actions side by side (stack on narrow screens): WhatsApp (primary) + enquiry form (outline). They reuse the site's .btn styles from main.css. ============================================================ */ .payg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .payg-actions .btn { flex: 1 1 200px; text-align: center; cursor: pointer; } @media (max-width: 420px) { .payg-actions .btn { flex-basis: 100%; } }