/* ============================================================
   CRM de Alta Conversão — Checkout (Asaas)
   Estende /styles.css (tema escuro premium).
   ============================================================ */

.ck-wrap { position: relative; z-index: 2; max-width: 920px; margin: 0 auto;
  padding: clamp(60px, 9vh, 110px) var(--gutter) clamp(60px, 9vh, 110px); }

.ck-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display);
  font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan);
  border: 1px solid rgba(30,217,238,.28); border-radius: 100px; padding: 7px 16px; background: rgba(30,217,238,.06); margin-bottom: 22px; }
.ck-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grad); }

.ck-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; }
.ck-title .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.ck-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; margin-top: 34px; align-items: start; }

/* resumo do pedido */
.ck-summary { border: 1px solid var(--hair-soft); border-radius: 20px; padding: 28px 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); position: sticky; top: 24px; }
.ck-summary h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; }
.ck-summary .plan-tag { display: inline-block; margin-top: 4px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan); font-family: var(--font-display); font-weight: 600; }
.ck-price { margin: 20px 0 6px; display: flex; align-items: flex-end; gap: 7px; }
.ck-price .cur { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--muted); margin-bottom: 6px; }
.ck-price .val { font-family: var(--font-display); font-weight: 700; font-size: 2.8rem; line-height: 1; color: var(--ink); }
.ck-price .per { font-size: .9rem; color: var(--muted); margin-bottom: 6px; }
.ck-cycle { font-size: .84rem; color: var(--faint); }
.ck-cycle b { color: var(--muted); font-weight: 600; }
.ck-summary ul { list-style: none; margin: 22px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ck-summary li { position: relative; padding-left: 26px; font-size: .93rem; color: var(--muted); line-height: 1.4; }
.ck-summary li svg { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; stroke: var(--cyan); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ck-summary .switch { margin-top: 20px; font-size: .84rem; }
.ck-summary .switch a { color: var(--cyan); }

/* formulário */
.ck-form { border: 1px solid var(--hair-soft); border-radius: 20px; padding: 30px 32px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.006)); }
.ck-form h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; margin-bottom: 4px; }
.ck-form .sub { font-size: .9rem; color: var(--muted); margin-bottom: 22px; }
.ck-field { margin-bottom: 16px; }
.ck-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; font-family: var(--font-display); }
.ck-field input { width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--hair);
  background: rgba(0,0,0,.25); color: var(--ink); font-size: 1rem; font-family: var(--font-body); outline: none;
  transition: border-color .2s var(--ease); }
.ck-field input:focus { border-color: var(--cyan); }
.ck-field input::placeholder { color: var(--faint); }
.ck-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.ck-submit { width: 100%; margin-top: 8px; justify-content: center; }
.ck-secure { margin-top: 16px; display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--faint); line-height: 1.4; }
.ck-secure svg { width: 16px; height: 16px; stroke: var(--cyan); fill: none; stroke-width: 2; flex-shrink: 0; }

.ck-error { margin-bottom: 20px; padding: 14px 18px; border-radius: 12px; font-size: .92rem; line-height: 1.5;
  color: #ffd9d9; border: 1px solid rgba(224,37,155,.35); background: rgba(224,37,155,.08); }
.ck-error b { color: #fff; }

/* estados finais (obrigado) */
.ck-final { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; text-align: center;
  padding: clamp(90px, 16vh, 180px) var(--gutter) 120px; }
.ck-final .ico { width: 64px; height: 64px; margin: 0 auto 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(30,217,238,.4); background: rgba(30,217,238,.08); }
.ck-final .ico svg { width: 30px; height: 30px; stroke: var(--cyan); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ck-final h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.12; }
.ck-final h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ck-final p { margin: 18px auto 0; color: var(--muted); line-height: 1.6; font-size: 1.04rem; max-width: 48ch; }

.ck-footer { position: relative; z-index: 2; border-top: 1px solid var(--hair-soft); max-width: 920px; margin: 0 auto;
  padding: 44px var(--gutter) 60px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 18px; }
.ck-footer img { height: clamp(120px, 16vw, 164px); width: auto; opacity: .85; }
.ck-footer span { font-size: .8rem; color: var(--faint); }

.ck-hint { display: block; margin-top: 6px; font-size: .8rem; }
.ck-hint.ok { color: #48d597; }
.ck-hint.bad { color: var(--pink); }
.ck-field input.ok { border-color: rgba(72,213,151,.55); }
.ck-field input.bad { border-color: rgba(242,63,176,.6); }

.ck-sec { font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin: 24px 0 12px; }
.ck-field label .opt { color: var(--faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
.ck-row--cep { grid-template-columns: 130px 1fr 74px; }
.ck-uf input { text-transform: uppercase; }

.ck-accept { margin: 22px 0 6px; }
.ck-check { display: flex; align-items: flex-start; gap: 11px; font-size: .93rem; color: var(--muted); line-height: 1.5; cursor: pointer; }
.ck-check input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--cyan); cursor: pointer; }
.ck-link { background: none; border: none; padding: 0; color: var(--cyan); text-decoration: underline; cursor: pointer; font: inherit; }
.ck-link:hover { color: var(--ink); }

/* ---------- MODAL DO CONTRATO ---------- */
.ct-modal { display: none; position: fixed; inset: 0; z-index: 100; align-items: flex-start; justify-content: center; padding: clamp(14px,4vw,48px); }
.ct-modal.open { display: flex; }
.ct-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.ct-dialog { position: relative; width: 100%; max-width: 820px; max-height: 92vh; display: flex; flex-direction: column;
  background: #f4f4f0; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 120px -30px rgba(0,0,0,.8); }
.ct-actions { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #ececE6; border-bottom: 1px solid #d9d9d2; flex-shrink: 0; }
.ct-actions .btn { height: auto; padding: 10px 18px; font-size: .88rem; }
.ct-actions .btn--line { color: #1a1a1a; border-color: #b9b9b0; background: #fff; }
.ct-actions .ct-x { margin-left: auto; background: none; border: none; font-size: 1.8rem; line-height: 1; color: #666; cursor: pointer; padding: 0 6px; }
.ct-paper { overflow-y: auto; padding: clamp(26px,5vw,54px); color: #1a1a1a; background: #fff;
  font-family: "General Sans", Georgia, serif; font-size: .95rem; line-height: 1.6; }
.ct-paper .ct-h1 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; text-align: center; color: #111; line-height: 1.3; margin-bottom: 6px; }
.ct-paper .ct-meta { text-align: center; font-size: .8rem; color: #777; margin-bottom: 26px; }
.ct-paper .ct-h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: #111; margin: 22px 0 8px; }
.ct-paper p { margin-bottom: 11px; }
.ct-paper b { color: #000; font-weight: 600; }
.ct-fill { background: #fff6d6; padding: 0 2px; border-radius: 3px; }
.ct-sign { margin-top: 26px; }
.ct-sign2 { font-size: .82rem; color: #666; }

@media (max-width: 760px) {
  .ck-grid { grid-template-columns: 1fr; }
  .ck-summary { position: static; order: 2; }
  .ck-row { grid-template-columns: 1fr; }
  .ck-row--cep { grid-template-columns: 1fr 1fr 60px; }
}

/* ---------- IMPRESSÃO (Baixar PDF) ---------- */
@media print {
  body > *:not(#contrato-modal) { display: none !important; }
  .bg-grain, .bg-aura, .bg-grid { display: none !important; }
  #contrato-modal { position: static; display: block !important; padding: 0; }
  #contrato-modal .ct-backdrop, #contrato-modal .ct-actions { display: none !important; }
  #contrato-modal .ct-dialog { max-width: none; max-height: none; box-shadow: none; border-radius: 0; background: #fff; }
  #contrato-modal .ct-paper { overflow: visible; padding: 0; }
  .ct-fill { background: none; }
}