/* ================================================================
   checkout.css — Página de pagamento /pagamento/
   Espaço Acolher · Identidade editorial (consultório particular)
================================================================ */

.page-wrap { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }

/* Painel esquerdo */
.panel-left {
  background:var(--bg-alt);
  border-right:1px solid var(--line);
  padding:48px 52px; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}

.back-link { display:inline-flex; align-items:center; gap:8px; color:var(--ink-muted); font-size:.85rem; margin-bottom:48px; transition:color .2s; }
.back-link:hover { color:var(--accent); }

.brand-name { font-family:var(--ff-d); font-weight:500; font-size:1.1rem; color:var(--ink); margin-bottom:48px; }
.brand-name span { color:var(--accent); }

.plan-eyebrow { font-size:.70rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:10px; }
.plan-name    { font-family:var(--ff-d); font-weight:500; font-size:1.75rem; line-height:1.2; color:var(--ink); }
.plan-value   {
  font-family:var(--ff-d); font-weight:500; font-size:2.9rem; line-height:1;
  letter-spacing:-.015em; color:var(--ink); margin:22px 0 4px;
}
.plan-value span { font-family:var(--ff-b); font-size:.95rem; font-weight:400; color:var(--ink-muted); }

.plan-divider { width:48px; height:1px; background:var(--line-2); margin:28px 0; }

.plan-benefits { display:flex; flex-direction:column; gap:14px; flex:1; }
.plan-benefits li { display:flex; align-items:flex-start; gap:12px; font-size:.90rem; color:var(--ink-2); line-height:1.6; }
.plan-benefits li::before {
  content:''; width:6px; height:1px; background:var(--accent-line);
  flex-shrink:0; margin-top:11px;
}

.security-badge {
  display:flex; align-items:center; gap:10px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;
  font-size:.80rem; color:var(--ink-muted); margin-top:32px;
}
.security-badge svg { width:20px; height:20px; flex-shrink:0; fill:var(--ink-muted); }

/* Painel direito */
.panel-right { background:var(--bg); padding:48px 52px; overflow-y:auto; }

.checkout-header { margin-bottom:40px; }
.checkout-title { font-family:var(--ff-d); font-weight:500; font-size:1.85rem; color:var(--ink); margin-bottom:8px; }
.checkout-sub { color:var(--ink-muted); font-size:.90rem; }

.form-section { margin-bottom:36px; }
.form-section-title {
  font-size:.70rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); margin-bottom:18px; padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-row.single { grid-template-columns:1fr; }
.mt-4 { margin-top:16px; }

.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:.82rem; font-weight:500; color:var(--ink); }

.field input, .field select {
  padding:13px 16px; background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--radius-sm); font-family:var(--ff-b); font-size:.92rem; color:var(--ink);
  outline:none; transition:border-color .2s, box-shadow .2s; -webkit-appearance:none;
}
.field input::placeholder { color:var(--ink-muted); opacity:.65; }
.field input:focus, .field select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(44,74,82,.10); }
.field input.error { border-color:#a3423a; box-shadow:0 0 0 3px rgba(163,66,58,.10); }
.field input.valid { border-color:#3f6b52; }
.field select option { background:var(--surface); color:var(--ink); }

.field-error { font-size:.78rem; color:#a3423a; display:none; }
.field-error.show { display:block; }
.card-hint { font-size:.75rem; color:var(--ink-muted); margin-top:2px; }

/* Abas */
.payment-tabs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:24px; }
.pay-tab {
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px;
  border:1px solid var(--line-2); border-radius:var(--radius); cursor:pointer;
  transition:var(--transition); background:var(--surface); font-family:var(--ff-b);
}
.pay-tab:hover { border-color:var(--accent-line); }
.pay-tab.active { border-color:var(--accent); background:var(--accent-soft); }
.tab-icon  { font-size:1.3rem; }
.tab-label { font-size:.82rem; font-weight:600; color:var(--ink); }
.tab-sub   { font-size:.72rem; color:var(--ink-muted); }

/* Pix */
.pix-panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; text-align:center; }
.pix-qr {
  width:160px; height:160px; background:var(--bg-alt); border-radius:var(--radius-sm);
  margin:0 auto 16px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); position:relative; overflow:hidden;
}
.pix-qr::before {
  content:''; position:absolute; inset:16px;
  background:repeating-linear-gradient(0deg,rgba(26,35,50,.18) 0,rgba(26,35,50,.18) 3px,transparent 3px,transparent 6px),
             repeating-linear-gradient(90deg,rgba(26,35,50,.18) 0,rgba(26,35,50,.18) 3px,transparent 3px,transparent 6px);
}
.pix-logo  { font-size:2rem; z-index:1; }
.pix-panel h4 { font-family:var(--ff-d); font-weight:500; font-size:1.15rem; color:var(--ink); margin-bottom:10px; }
.pix-panel p  { font-size:.83rem; color:var(--ink-muted); line-height:1.7; margin-bottom:16px; }
.pix-key-box {
  background:var(--bg-alt); border:1px dashed var(--line-2);
  border-radius:var(--radius-sm); padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px;
}
.pix-key-box code { font-size:.75rem; color:var(--ink-2); word-break:break-all; text-align:left; }
.copy-btn {
  background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:var(--radius-sm); padding:8px 14px;
  font-family:var(--ff-b); font-size:.78rem; font-weight:600; cursor:pointer; transition:var(--transition); white-space:nowrap; flex-shrink:0;
}
.copy-btn:hover { background:var(--accent-dark); border-color:var(--accent-dark); }

/* Submit */
.btn-submit {
  width:100%; padding:17px; background:var(--accent); color:#fff; border:1px solid var(--accent);
  border-radius:var(--radius-sm); font-family:var(--ff-b); font-size:.98rem; font-weight:600;
  cursor:pointer; transition:var(--transition); position:relative; overflow:hidden; margin-top:8px;
}
.btn-submit:hover:not(:disabled) { background:var(--accent-dark); border-color:var(--accent-dark); }
.btn-submit:disabled { opacity:.55; cursor:not-allowed; }
.btn-submit .btn-text { transition:opacity .2s; }
.btn-submit .btn-spinner {
  display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:22px; height:22px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite;
}
.btn-submit.loading .btn-text    { opacity:0; }
.btn-submit.loading .btn-spinner { display:block; }
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }

.accepted-cards { display:flex; align-items:center; gap:8px; margin-top:16px; justify-content:center; }
.accepted-cards > span { font-size:.73rem; color:var(--ink-muted); }
.card-icon { background:var(--bg-alt); border:1px solid var(--line); border-radius:2px; padding:3px 8px; font-size:.68rem; font-weight:600; color:var(--ink-muted); }
.checkout-legal { font-size:.75rem; color:var(--ink-muted); text-align:center; margin-top:14px; line-height:1.65; }
.checkout-legal a { color:var(--accent); text-decoration:underline; }

/* Sucesso */
#success-overlay {
  display:none; position:fixed; inset:0; z-index:999; background:rgba(247,245,241,.98);
  flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px;
  animation:fadeIn .4s ease;
}
#success-overlay.show { display:flex; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.success-icon {
  width:64px; height:64px; background:var(--accent); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color:#fff; margin-bottom:26px;
}

.success-title { font-family:var(--ff-d); font-weight:500; font-size:2.1rem; color:var(--ink); margin-bottom:14px; }
.success-desc  { color:var(--ink-muted); max-width:440px; line-height:1.75; margin-bottom:32px; }
.success-steps { display:flex; flex-direction:column; gap:10px; max-width:400px; width:100%; margin-bottom:36px; }
.success-step  { display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; text-align:left; }
.step-num      { width:26px; height:26px; background:var(--accent); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.76rem; font-weight:600; flex-shrink:0; color:#fff; }
.success-step p      { font-size:.86rem; color:var(--ink-muted); line-height:1.55; }
.success-step strong { display:block; font-size:.90rem; color:var(--ink); margin-bottom:2px; }

.btn-whatsapp {
  display:inline-flex; align-items:center; gap:10px; background:#25D366; color:white;
  font-family:var(--ff-b); font-weight:600; font-size:.95rem; padding:14px 28px;
  border-radius:var(--radius-sm); border:none; cursor:pointer; text-decoration:none; transition:var(--transition);
}
.btn-whatsapp:hover { background:#1DA851; }

@media (max-width:860px) {
  .page-wrap    { grid-template-columns:1fr; }
  .panel-left   { position:static; height:auto; padding:32px 24px; border-right:none; border-bottom:1px solid var(--line); }
  .panel-right  { padding:32px 24px; }
  .form-row     { grid-template-columns:1fr; }
  .payment-tabs { grid-template-columns:1fr; }
}