/* ════════════════════════════════════════════════════════════ SOUL INQUIRY FORM — unified across all CTAs Used inline (homepage hero, contact page) and inside the Book-a-Lesson popup. Same UX everywhere. ═══════════════════════════════════════════════════════════ */ .soul-inq-form{font-family:var(--f-body),'Josefin Sans',system-ui,sans-serif;color:#1A202C} .soul-inq-form *{box-sizing:border-box} /* /contact/ already has the form inline — hide the redundant header CTA there. WP automatically adds .page-contact and .page-id-738 to on that page. */ body.page-contact .soul-header-cta, body.page-id-738 .soul-header-cta{display:none} .soul-inq-heading{font-family:var(--f-heading),'Cormorant Garamond',Georgia,serif;font-size:1.4rem;font-weight:600;color:#2C3E50;margin:0 0 4px} .soul-inq-form.is-compact .soul-inq-heading{font-size:1.2rem} .soul-inq-sub{font-size:.85rem;color:#475569;margin:0 0 14px;line-height:1.4} .soul-inq-form.is-compact .soul-inq-sub{font-size:.78rem;margin:0 0 10px} .soul-inq-group{margin-bottom:10px} .soul-inq-label{display:block;font-size:.68rem;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:1.1px;margin-bottom:5px} .soul-inq-req{color:#E11D48;font-size:.7rem;vertical-align:super;margin-left:1px} .soul-inq-pills{display:flex;flex-wrap:wrap;gap:5px} .soul-inq-pill{padding:6px 12px;background:#F5F9FE;border:1.5px solid transparent;border-radius:50px;font-size:.78rem;color:#475569;cursor:pointer;font-family:inherit;font-weight:500;transition:all .15s;white-space:nowrap} .soul-inq-pill:hover{background:#fff;border-color:#5DADE2;color:#2C3E50} .soul-inq-pill.is-active{background:#5DADE2;color:#fff;border-color:#5DADE2;font-weight:600} .soul-inq-other{margin-top:8px} .soul-inq-other-input{width:100%;padding:10px 13px;border:1.5px solid #E2E8F0;border-radius:8px;font-size:.9rem;font-family:inherit;background:#fff} .soul-inq-other-input:focus{outline:none;border-color:#5DADE2;box-shadow:0 0 0 3px rgba(93,173,226,0.15)} /* Floating-label fields */ .soul-inq-field{position:relative;margin-bottom:10px} .soul-inq-field input, .soul-inq-field textarea{width:100%;padding:18px 13px 6px;border:1.5px solid #E2E8F0;border-radius:8px;font-size:.92rem;font-family:inherit;color:#1A202C;background:#fff;transition:border-color .15s,box-shadow .15s;height:50px;resize:vertical} .soul-inq-field textarea{height:auto;min-height:64px;padding-top:22px;line-height:1.5} .soul-inq-field input:focus, .soul-inq-field textarea:focus{outline:none;border-color:#5DADE2;box-shadow:0 0 0 3px rgba(93,173,226,0.15)} .soul-inq-field label{position:absolute;left:13px;top:15px;font-size:.92rem;color:#94A3B8;pointer-events:none;transition:all .18s ease;font-weight:500} .soul-inq-field input:focus+label, .soul-inq-field input:not(:placeholder-shown)+label, .soul-inq-field textarea:focus+label, .soul-inq-field textarea:not(:placeholder-shown)+label{top:6px;font-size:.65rem;color:#5DADE2;font-weight:700;text-transform:uppercase;letter-spacing:.6px} /* Inline validation errors */ .soul-inq-field.has-error input, .soul-inq-field.has-error textarea{border-color:#E11D48;box-shadow:0 0 0 3px rgba(225,29,72,.12)} .soul-inq-field.has-error label{color:#E11D48} .soul-inq-err{display:none;font-size:.72rem;color:#E11D48;margin-top:3px;line-height:1.3;font-weight:500} .soul-inq-field.has-error .soul-inq-err{display:block} /* Pill-group error state — applied when instrument/age/experience missing on submit. Felix's ask: if AGE isn't selected, the AGE label should turn red (not just bottom error). */ .soul-inq-group.has-error .soul-inq-label{color:#E11D48} .soul-inq-group.has-error .soul-inq-pills{ padding:8px;border:1.5px solid #E11D48;border-radius:10px; background:#FEF2F2;animation:soulInqShake .3s ease; } .soul-inq-group.has-error .soul-inq-pill{background:#fff} .soul-inq-group-err{display:none;font-size:.72rem;color:#E11D48;margin-top:4px;font-weight:500} .soul-inq-group.has-error .soul-inq-group-err{display:block} @keyframes soulInqShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 50%{transform:translateX(4px)} 75%{transform:translateX(-2px)} } /* Phone field with country-code selector. The WRAPPER carries the border + focus state — children (select + input) live inside borderless so they don't overlap the frame. Floating-label pattern still works because label remains absolutely positioned. */ .soul-inq-phone-field{ position:relative; border:1.5px solid #E2E8F0; border-radius:8px; background:#fff; height:50px; overflow:hidden; transition:border-color .15s, box-shadow .15s; } .soul-inq-phone-field:focus-within{ border-color:#5DADE2; box-shadow:0 0 0 3px rgba(93,173,226,0.15); } .soul-inq-phone-field.has-error{ border-color:#E11D48; box-shadow:0 0 0 3px rgba(225,29,72,.12); } .soul-inq-cc{ position:absolute;top:0;bottom:0;left:0;width:96px; border:0;border-right:1px solid #E2E8F0;border-radius:0; background:#F5F9FE;padding:0 22px 0 10px; font-family:inherit;font-size:.86rem;font-weight:500;color:#1A202C; cursor:pointer;appearance:none;-webkit-appearance:none;z-index:2; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 8px center; } .soul-inq-cc:focus{outline:none;background-color:#E8F0FA} /* Phone input inside the wrapper: no border of its own (wrapper has it) */ .soul-inq-phone-field input[name="phone"]{ border:0!important; box-shadow:none!important; background:transparent!important; padding-left:108px!important; height:100%!important; width:100%; } .soul-inq-phone-field input[name="phone"]:focus{ border:0!important; box-shadow:none!important; } .soul-inq-phone-field>label{left:108px!important} .soul-inq-phone-field input[name="phone"]:focus+label, .soul-inq-phone-field input[name="phone"]:not(:placeholder-shown)+label{left:108px!important} /* On narrow screens, stack the selector + input vertically so neither gets crushed */ @media(max-width:380px){ .soul-inq-phone-field{padding-top:0} .soul-inq-cc{position:static;width:100%;height:38px;border:1.5px solid #E2E8F0;border-radius:8px;margin-bottom:6px} .soul-inq-phone-field input[name="phone"]{padding-left:13px!important} .soul-inq-phone-field>label{left:13px!important;top:50px!important} .soul-inq-phone-field input[name="phone"]:focus+label, .soul-inq-phone-field input[name="phone"]:not(:placeholder-shown)+label{left:13px!important;top:42px!important;font-size:.6rem!important} } .soul-inq-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px} .soul-inq-parent{margin-top:2px} /* Honeypot — visually hidden but not display:none */ .soul-inq-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .soul-inq-submit{width:100%;padding:13px;background:#5DADE2;color:#fff;border:none;border-radius:10px;font-weight:700;font-size:.96rem;font-family:inherit;cursor:pointer;transition:all .15s;margin-top:6px} .soul-inq-submit:hover{background:#3498DB;transform:translateY(-1px);box-shadow:0 8px 20px rgba(93,173,226,0.3)} .soul-inq-submit:disabled{opacity:.6;cursor:not-allowed;transform:none} .soul-inq-status{margin-top:12px;padding:0;font-size:.88rem;line-height:1.5;text-align:center} .soul-inq-status.is-success{padding:14px;background:#ECFDF5;border:1px solid #10B981;border-radius:8px;color:#065F46} .soul-inq-status.is-error{padding:12px;background:#FEF2F2;border:1px solid #FCA5A5;border-radius:8px;color:#991B1B} .soul-inq-trust{margin-top:10px;font-size:.72rem;color:#94A3B8;text-align:center;line-height:1.4} @media(max-width:640px){ .soul-inq-pair{grid-template-columns:1fr;gap:8px} } /* ════════════════════════════════════════════════════════════ POPUP — modal that wraps the form when triggered by any "Book a Lesson" / "Book your evaluation" button. ═══════════════════════════════════════════════════════════ */ .soul-inq-popup-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:flex-start;justify-content:center;z-index:99999;padding:32px 16px;overflow-y:auto;opacity:0;transition:opacity .18s ease} .soul-inq-popup-overlay.is-open{display:flex;opacity:1} .soul-inq-popup-modal{background:#fff;border-radius:14px;max-width:560px;width:100%;padding:32px 28px 24px;box-shadow:0 18px 60px rgba(15,23,42,.28);position:relative;transform:translateY(8px);transition:transform .2s ease;margin:auto} .soul-inq-popup-overlay.is-open .soul-inq-popup-modal{transform:translateY(0)} .soul-inq-popup-close{position:absolute;top:10px;right:14px;background:transparent;border:0;font-size:28px;line-height:1;color:#64748B;cursor:pointer;padding:6px 10px;border-radius:6px;transition:background .15s ease,color .15s ease;font-family:inherit} .soul-inq-popup-close:hover{background:#F1F5F9;color:#1A202C} @media(max-width:640px){ .soul-inq-popup-overlay{padding:16px 12px} .soul-inq-popup-modal{padding:24px 20px 20px} }