/* ============================================================
   Registro do Compositor — Checkout skin V17 (Fase 1)
   Somente VISUAL: tipografia, cores, espaçamentos e responsivo.
   Nenhum seletor estrutural novo, nenhum ID alterado.
   Carregado DEPOIS de styles.css em checkout.html.
   A lógica do Mercado Pago (checkout.js) não depende deste arquivo.
   ============================================================ */

/* Tipografia igual à landing (Fraunces + Archivo) */
.checkout-page-v12 {
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(250, 199, 12, 0.10), transparent 60%),
    radial-gradient(800px 600px at -10% 30%, rgba(40, 70, 200, 0.14), transparent 60%),
    linear-gradient(180deg, #030720 0%, #060D33 100%);
}

.payment-title-row-v12 h1,
.order-card-v12 h2,
.method-box-v12 h2,
.post-payment-v12 h3,
.support-box-v12 h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.payment-title-row-v12 h1 {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.08;
}

.order-card-v12 h2 { font-size: 28px; }
.method-box-v12 h2 { font-size: 24px; }

/* Marca no topo: mesmo selo circular dourado da landing */
.checkout-brand-v12 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0;
}

.brand-mark-v12 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(250, 199, 12, 0.18), transparent 65%);
  border: 1.6px solid #FAC70C;
  color: #FAC70C;
  box-shadow: none;
  font-size: 14px;
}

.secure-pill-v12 {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 9px 15px;
}

.checkout-back-v12 {
  font-weight: 700;
  font-size: 14px;
  opacity: 0.92;
}
.checkout-back-v12:hover { opacity: 1; }

/* Cards mais próximos do design system da landing */
.payment-card-v12,
.order-card-v12 {
  border-radius: 24px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.65);
}

.order-card-v12 { border: 1px solid rgba(250, 199, 12, 0.35); }

.mini-badge-v12,
.order-label-v12 {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  letter-spacing: 1.8px;
}

.payment-title-row-v12 p { font-size: 17px; }

/* Inputs e abas com o mesmo acabamento da landing */
.buyer-grid-v12 input {
  border-radius: 14px;
  font-size: 16px; /* evita zoom automático no iOS */
}

.pay-tabs-v12 { border-radius: 18px; }
.pay-tab-v12 { border-radius: 13px; font-weight: 800; }

.method-box-v12 { border-radius: 20px; }
.method-box-v12 p { font-size: 15.5px; }

.lead-notice-v12 {
  font-size: 13px !important;
  line-height: 1.5;
}

/* Botão principal: mesmo dourado da landing */
.primary-pay-button-v12 {
  border-radius: 16px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2px;
  background: linear-gradient(180deg, #FFDD55, #FAC70C);
  box-shadow: 0 14px 34px -10px rgba(250, 199, 12, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.primary-pay-button-v12:hover:not(:disabled) {
  box-shadow: 0 18px 40px -10px rgba(250, 199, 12, 0.75);
  transform: translateY(-1px);
}

.copy-row-v12 input { border-radius: 14px; font-size: 16px; }
.copy-row-v12 button { border-radius: 14px; font-weight: 800; }
.boleto-link-v12 { border-radius: 14px; font-weight: 800; }
.whatsapp-button-v12 { border-radius: 14px; font-weight: 800; }
.post-payment-v12 { border-radius: 18px; }
.post-payment-v12 button { border-radius: 13px; font-weight: 800; }
.support-box-v12 { border-radius: 18px; }
.order-total-v12 { border-radius: 18px; }

.order-total-v12 strong {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  letter-spacing: -1px;
}

.boleto-extra-v12 input {
  border-radius: 14px;
  font-size: 16px;
}

/* ---------- Responsivo (refinamentos visuais) ---------- */
@media (max-width: 680px) {
  .payment-title-row-v12 h1 { font-size: 30px; }
  .order-card-v12 h2 { font-size: 24px; }
  .method-box-v12 h2 { font-size: 21px; }
  .secure-pill-v12 { font-size: 10px; padding: 8px 12px; }
  .primary-pay-button-v12 { padding: 18px; font-size: 17px; }
  .order-total-v12 strong { font-size: 30px; }
}

@media (max-width: 400px) {
  .checkout-shell-v12 { width: calc(100% - 20px); }
  .payment-card-v12, .order-card-v12 { padding: 18px 16px; border-radius: 20px; }
  .method-box-v12 { padding: 16px 14px; }
}