:root { --brand: #007C80; --brand-d: #00666a; --bg: #00666a; --bd: #cfd8dc; } /* --- Base layout --- */ * { box-sizing: border-box; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); padding: 2rem; margin: 0; } .card { max-width: 720px; margin: auto; background: #fff; padding: 1.25rem 1.25rem 1.5rem; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.06); } h2 { margin: 0 0 .5rem; color: #123; } p.help { margin: .25rem 0 1rem; color: #567; font-size: .95rem; } /* --- Test/Live banner (toggle via server-side) --- */ .env-banner { display: none; /* server will set inline style attr or a class on to show it in test */ background: #ffe08a; color: #443800; padding: .5rem .75rem; margin: 0 0 1rem; border-radius: .5rem; font-size: .95rem; font-weight: 600; } body.is-test .env-banner { display: block; } /* --- Form elements --- */ label { display: block; margin-top: 1rem; font-weight: 600; color: #123; } input, textarea, select { width: 100%; padding: .7rem .8rem; margin-top: .4rem; border-radius: 10px; border: 1px solid var(--bd); font-size: 1rem; outline: none; transition: border .15s, box-shadow .15s; background: #fff; color: #111; } input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,124,128,.12); } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid rgba(0,124,128,.6); outline-offset: 2px; } input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: #e11d48; box-shadow: 0 0 0 3px rgba(225,29,72,.12); } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid > div { min-width: 0; } .row { display: flex; gap: 12px; } .flex1 { flex: 1; } button, .btn { margin-top: 1.25rem; background: var(--brand); color: #fff; padding: .9rem 1.25rem; border: none; border-radius: 12px; cursor: pointer; width: 100%; font-weight: 700; letter-spacing: .2px; transition: background .15s ease, opacity .15s ease, transform .02s ease-in-out; } button:hover, .btn:hover { background: var(--brand-d); } button:active, .btn:active { transform: translateY(1px); } button:disabled, .btn:disabled { opacity: .6; cursor: not-allowed; } small.note { color: #567; display: block; margin-top: .25rem; } .errmsg { background: #fff3f3; border: 1px solid #ffd6d6; color: #8a1f1f; padding: .6rem .8rem; border-radius: 10px; margin-top: .75rem; display: none; } .errmsg.active { display: block; } .hidden { display: none !important; } .mt12 { margin-top: 12px; } /* CSP-safe honeypot (hidden off-screen) */ .hp{ position:absolute !important; left:-10000px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; } /* Screen-reader only helper */ .sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } /* --- Stripe Payment Section (legacy non-modal fallback) --- */ #payment-stage { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed #e1e5e9; } /* --- Modal styling --- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; z-index: 9999; } .modal-overlay[aria-hidden="false"] { display: flex; } .modal-card { background: #fff; max-width: 520px; width: 92vw; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 16px 16px 20px; color: #111; } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .modal-title { font-size: 1.1rem; margin: 0; } .modal-close { appearance: none; border: 0; background: transparent; font-size: 1.25rem; cursor: pointer; line-height: 1; } .modal-body { margin-top: 8px; } .modal-body .note { font-size: .9rem; color: #555; } .modal-body .errmsg { margin-top: .75rem; display: block; } .modal-body .row { margin-top: 1rem; } /* Buttons inside modal */ .btn { padding: .6rem .9rem; border-radius: 8px; border: 1px solid #e5e7eb; background: var(--brand); color: #fff; cursor: pointer; font-weight: 600; transition: background .15s ease, opacity .15s ease; width: auto; } .btn:hover { background: var(--brand-d); } .btn:disabled { opacity: .6; cursor: not-allowed; } .btn.secondary { background: #fff; color: #111; } .btn.secondary:hover { background: #f1f1f1; } /* Spinner (loading indicator) */ .spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid #ccc; border-top-color: #333; border-radius: 50%; animation: spin .8s linear infinite; margin-left: 8px; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* Small responsive tweaks */ @media (max-width: 600px) { .grid { grid-template-columns: 1fr; } .modal-card { width: 95vw; padding: 14px; } }