/* PRXPEEL — Wholesale "Get in touch" modal
   Load AFTER the theme stylesheet (uses its :root tokens). */

.px-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}
.px-modal[hidden]{display:none}
.px-modal-backdrop{position:absolute;inset:0;background:color-mix(in srgb,var(--ink,#2C2440) 55%,transparent);backdrop-filter:blur(3px);animation:pxFade .2s ease}
.px-modal-card{position:relative;z-index:1;width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--surface,#fff);
  border-radius:20px;padding:clamp(26px,4vw,40px);box-shadow:0 30px 80px rgba(0,0,0,.28);animation:pxPop .24s cubic-bezier(.2,.8,.2,1)}
.px-modal-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:var(--soft,#F5ECF4);color:var(--ink,#2C2440);border:1px solid var(--line,#eadfe8);cursor:pointer;transition:.2s}
.px-modal-close:hover{background:var(--line,#eadfe8)}
.px-modal .px-kicker{display:block;font-family:var(--font-ui,'Hanken Grotesk',sans-serif);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--primary,#7A6CC4)}
.px-modal-title{font-family:var(--font-display,'Spectral',serif);font-weight:500;font-size:clamp(1.7rem,3vw,2.2rem);line-height:1.1;margin:2px 0 10px;color:var(--ink,#2C2440)}
.px-modal-lead{color:var(--muted,#7d719a);line-height:1.6;margin-bottom:22px;max-width:44ch}

/* Contact Form 7 wrapper — normalise plugin defaults to the prototype form */
.px-modal-cf7 .wpcf7{margin:0}
.px-modal-cf7 form.wpcf7-form{display:flex;flex-direction:column;gap:14px}
/* Neutralise CF7 auto-paragraphs / <br> if they ever appear */
.px-modal-cf7 form.wpcf7-form p{margin:0}
.px-modal-cf7 form.wpcf7-form br{display:none}
.px-modal-cf7 .px-modal-form{display:flex;flex-direction:column;gap:14px}
.px-modal-cf7 .px-modal-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.px-modal-cf7 .px-field{display:flex;flex-direction:column;gap:6px}
.px-modal-cf7 .px-field>span{font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--ink,#2C2440)}
.px-modal-cf7 .px-field .wpcf7-form-control-wrap{display:block}
.px-modal-cf7 input[type=text],
.px-modal-cf7 input[type=email],
.px-modal-cf7 input[type=tel]{
  width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line,#eadfe8);border-radius:12px;
  font-family:inherit;font-size:1rem;background:var(--bg,#FBF6FA);color:var(--ink,#2C2440);
  transition:border-color .2s,box-shadow .2s}
.px-modal-cf7 input:focus{outline:none;border-color:var(--primary,#7A6CC4);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#7A6CC4) 18%,transparent)}
.px-modal-cf7 .px-modal-submit{margin-top:4px;justify-content:center;width:100%}
/* CF7 submit button inherits the theme .px-btn look via classes on [submit] */
.px-modal-cf7 .wpcf7-spinner{margin:10px auto 0;display:block}

/* CF7 validation + response messages */
.px-modal-cf7 .wpcf7-not-valid-tip{color:#c0392b;font-size:.82rem;margin-top:4px}
.px-modal-cf7 input.wpcf7-not-valid{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.px-modal-cf7 .wpcf7-response-output{margin:14px 0 0!important;padding:12px 14px!important;border-radius:12px;
  font-size:.92rem;line-height:1.5;border:1px solid var(--line,#eadfe8)!important}
.px-modal-cf7 .wpcf7 form.sent .wpcf7-response-output{border-color:#1F8A5B!important;background:color-mix(in srgb,#1F8A5B 8%,transparent);color:#146c47}
.px-modal-cf7 .wpcf7 form.invalid .wpcf7-response-output,
.px-modal-cf7 .wpcf7 form.failed .wpcf7-response-output{border-color:#c0392b!important;background:color-mix(in srgb,#c0392b 8%,transparent);color:#a5281c}

/* When sent, hide the form + lead, show only the thank-you (see JS) */
.px-modal.is-sent .px-modal-cf7 form.wpcf7-form>*:not(.wpcf7-response-output){display:none}
.px-modal.is-sent .px-modal-lead,
.px-modal.is-sent .px-modal-direct{display:none}

.px-modal-direct{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line,#eadfe8);font-size:.9rem;color:var(--muted,#7d719a)}
.px-modal-direct a{color:var(--primary,#7A6CC4);text-decoration:none;font-weight:600}
.px-modal-direct a:hover{text-decoration:underline}

@keyframes pxFade{from{opacity:0}to{opacity:1}}
@keyframes pxPop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:520px){.px-modal-cf7 .px-modal-row{grid-template-columns:1fr}}

/* Body scroll-lock while the modal is open */
body.px-modal-open{overflow:hidden;touch-action:none}