/* ============================================================
   LUCAS OLIVEIRA · EMPRESA 5X · PRE-CHECKOUT MODAL
   ─────────────────────────────────────────────────────────────
   Modal reutilizável em todas as páginas de venda.
   Captura: Nome / Email / WhatsApp BR antes do checkout Kiwify.
   Usa tokens globais do style.css (--graphite, --paper, --ink,
   --blueprint, --rule, --rule-strong, --alert, fontes etc).
   ============================================================ */


/* ─────────────────────────────────────────────
   01 · OVERLAY (fundo escuro + blur)
   ───────────────────────────────────────────── */
.pcheck-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 20, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s ease;
}
.pcheck-overlay.is-open {
  display: flex;
  opacity: 1;
}


/* ─────────────────────────────────────────────
   02 · MODAL (card centralizado)
   ───────────────────────────────────────────── */
.pcheck-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--paper, #fafaf7);
  border: 1px solid var(--rule, #e8e8ee);
  padding: 36px 32px 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  transform: scale(0.95);
  opacity: 0;
  transition: transform .28s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity .28s ease;
}
.pcheck-overlay.is-open .pcheck-modal {
  transform: scale(1);
  opacity: 1;
}


/* close button */
.pcheck-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink, #0a0a14);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.pcheck-close:hover {
  border-color: var(--rule-strong, #0a0a14);
  color: var(--graphite, #0a0a14);
}


/* ─────────────────────────────────────────────
   03 · HEADER DO MODAL (eyebrow + título + sub)
   ───────────────────────────────────────────── */
.pcheck-header {
  margin-bottom: 22px;
}
.pcheck-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite, #0a0a14);
  display: inline-flex;
  align-items: center;
  gap: .65em;
  margin-bottom: 12px;
}
.pcheck-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--blueprint, #a5ff00);
}
.pcheck-title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--graphite, #0a0a14);
  margin: 0 0 8px;
}
.pcheck-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink, #0a0a14);
  margin: 0;
}


/* ─────────────────────────────────────────────
   04 · FORM
   ───────────────────────────────────────────── */
.pcheck-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pcheck-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pcheck-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite, #0a0a14);
}
.pcheck-input {
  font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 16px;
  line-height: 1.4;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong, #0a0a14);
  background: var(--paper, #fafaf7);
  color: var(--ink, #0a0a14);
  border-radius: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.pcheck-input:focus {
  outline: none;
  border-color: var(--graphite, #0a0a14);
  box-shadow: 0 0 0 2px var(--blueprint-soft, rgba(165,255,0,0.18));
}
.pcheck-input::placeholder {
  color: rgba(26, 26, 40, 0.45);
}

/* error states */
.pcheck-field.is-error .pcheck-input {
  border-color: var(--alert, #ef4444);
}
.pcheck-error {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--alert, #ef4444);
  margin-top: 2px;
  min-height: 14px;
  display: none;
}
.pcheck-field.is-error .pcheck-error {
  display: block;
}


/* ─────────────────────────────────────────────
   05 · BOTÃO PRIMÁRIO (verde — CTA do checkout)
   ───────────────────────────────────────────── */
.pcheck-submit {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 18px 24px;
  border: 1px solid var(--graphite, #0a0a14);
  background: var(--blueprint, #a5ff00);
  color: var(--graphite, #0a0a14);
  cursor: pointer;
  transition: background .18s ease, transform .12s ease, opacity .15s ease;
}
.pcheck-submit:hover {
  background: var(--graphite, #0a0a14);
  color: var(--blueprint, #a5ff00);
}
.pcheck-submit:active {
  transform: translateY(1px);
}
.pcheck-submit:disabled {
  opacity: 0.55;
  cursor: wait;
}


/* ─────────────────────────────────────────────
   06 · TRUST FOOTER
   ───────────────────────────────────────────── */
.pcheck-trust {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule, #e8e8ee);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink, #0a0a14);
  text-align: center;
  line-height: 1.5;
}
.pcheck-trust-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}


/* ─────────────────────────────────────────────
   07 · MOBILE
   ───────────────────────────────────────────── */
@media (max-width: 520px) {
  .pcheck-overlay {
    padding: 12px;
    align-items: flex-start;
  }
  .pcheck-modal {
    margin-top: 24px;
    padding: 28px 22px 22px;
    max-width: 100%;
  }
  .pcheck-title {
    font-size: 20px;
  }
  .pcheck-submit {
    padding: 16px 18px;
    font-size: 13px;
  }
}


/* ─────────────────────────────────────────────
   08 · PREFERS-REDUCED-MOTION
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pcheck-overlay,
  .pcheck-modal {
    transition: none;
  }
  .pcheck-modal {
    transform: none;
  }
}


/* ─────────────────────────────────────────────
   09 · BODY LOCK quando modal aberto
   ───────────────────────────────────────────── */
body.pcheck-lock {
  overflow: hidden;
}