/* Minha conta (conta.html) e o que a página de pagamento usa dos cartões salvos. Mockup aprovado em 20/10/2026. */
body{background:var(--rosa-400)}
[hidden]{display:none!important}
.ct-nav{background:var(--paper);border-bottom:2px solid var(--ink-900)}
.ct-nav-in{max-width:1180px;margin:0 auto;height:64px;display:flex;align-items:center;gap:var(--space-6);padding:0 var(--gutter)}
.ct-marca{display:flex;align-items:center;gap:10px;text-decoration:none}
.ct-marca img{height:40px;width:auto}
.ct-marca .ct-wordmark{height:20px}
.ct-links{margin-left:auto;display:flex;gap:var(--space-6)}
.ct-links a{font-family:var(--font-display);text-transform:uppercase;font-size:13px;letter-spacing:.18em;color:var(--ink-900);text-decoration:none}
.ct-quem{font-family:var(--font-display);text-transform:uppercase;font-size:12px;letter-spacing:.14em;border:2px solid var(--ink-900);border-radius:var(--radius-pill);padding:8px 14px;background:var(--rosa-200)}
.ct section{border-bottom:0}
.ct{max-width:1180px;margin:0 auto;padding:var(--space-8) var(--gutter) var(--space-16)}
.ct h1,.ct h2,.ct-folha h2{font-family:var(--font-display);text-transform:uppercase;line-height:1;margin:0}
.ct h1{font-size:30px}
.ct h2,.ct-folha h2{font-size:20px}
.ct p,.ct-folha p{margin:0}
.ct-card{background:var(--paper);border:var(--border-ink-bold);border-radius:var(--radius-xl);box-shadow:var(--shadow-sticker-lg);padding:var(--space-6);display:grid;gap:var(--space-4);align-content:start;min-width:0}
.ct-estreito{max-width:520px;margin:0 auto}
.ct-carregando{text-align:center;font-size:17px}
.ct-muted{color:var(--ink-500);font-size:14px}
.ct-campos{display:grid;gap:var(--space-4)}
.ct-par{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.ct label,.ct-folha label{display:grid;gap:6px;font-family:var(--font-display);text-transform:uppercase;font-size:12px;letter-spacing:.16em}
.ct input,.ct select,.ct-folha input{font:inherit;font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:17px;padding:11px 13px;border:2px solid var(--ink-900);border-radius:var(--radius-md);background:var(--paper);color:var(--ink-900);width:100%;box-sizing:border-box}
.ct-msg{font-size:15px}
.ct-msg:empty{display:none}
.ct-msg.erro{color:var(--rosa-600);font-weight:700}
.ct-link{background:none;border:0;padding:0;font:inherit;font-size:15px;color:var(--rosa-600);text-decoration:underline;cursor:pointer;justify-self:center}
.ct-codigo{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.ct-canais{display:grid;gap:var(--space-3)}
.ct-canal{display:flex;align-items:center;gap:14px;text-align:left;font:inherit;color:var(--ink-900);background:var(--paper);border:2px solid var(--ink-900);border-radius:var(--radius-lg);padding:14px 16px;cursor:pointer;box-shadow:var(--shadow-sticker);min-width:0}
.ct-canal:hover{background:var(--rosa-200)}
.ct-canal:disabled{opacity:.6;cursor:wait}
.ct-canal>span:last-child{display:grid;gap:2px;min-width:0}
.ct-canal b{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:17px;letter-spacing:.06em}
.ct-canal small{font-size:15px;color:var(--ink-500);overflow-wrap:anywhere}
.ct-canal-ic{flex:none;width:42px;height:42px;border-radius:50%;border:2px solid var(--ink-900);background:var(--caramelo-300,#f3c77e);display:grid;place-items:center}
.ct-canal-ic svg{width:22px;height:22px;fill:var(--ink-900)}
.ct-reenvio{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px}
.ct .ct-codigo input{text-align:center;font-size:26px;font-family:var(--font-display);padding:10px 0}
button:disabled{opacity:.6;cursor:progress}

/* Área: menu ao lado no computador, abas no celular */
.ct-area{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--space-8);align-items:start}
.ct-lado{background:var(--paper);border:var(--border-ink-bold);border-radius:var(--radius-xl);box-shadow:var(--shadow-sticker-lg);padding:var(--space-5);display:grid;gap:6px;position:sticky;top:var(--space-6)}
.ct-lado .dv-label{padding:4px 14px 8px}
.ct-lado a,.ct-sair{font-family:var(--font-display);text-transform:uppercase;font-size:13px;letter-spacing:.12em;color:var(--ink-900);text-decoration:none;padding:12px 14px;border-radius:var(--radius-md);text-align:left;background:none;border:0;cursor:pointer}
.ct-lado a[aria-current="page"]{background:var(--ink-900);color:var(--paper)}
.ct-lado .ct-sair{color:var(--ink-500)}
.ct-miolo{display:grid;gap:var(--space-5);min-width:0}
.ct-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.ct-abas{display:none}
.ct-so-celular{display:none}
.ct-vista{display:grid;gap:var(--space-5)}
.ct-duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-6);align-items:start}
.ct-duas.so-lista{grid-template-columns:minmax(0,1fr)}

/* Lista de pedidos */
.ct-ped{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-3);border:2px solid transparent;border-radius:var(--radius-lg);background:none;font:inherit;text-align:left;color:inherit;cursor:pointer;width:100%}
.ct-ped+.ct-ped{border-top:2px dashed var(--ink-100)}
.ct-ped[aria-current="true"]{border:2px solid var(--ink-900);background:var(--paper-warm)}
.ct-ped img{width:64px;height:64px;object-fit:contain;background:var(--paper-warm);border:2px solid var(--ink-900);border-radius:var(--radius-md)}
.ct-ped b{font-family:var(--font-display);font-weight:400;font-size:18px;display:block}
.ct-num{font-family:var(--font-display);text-transform:uppercase;font-size:12px;letter-spacing:.14em;white-space:nowrap}
.ct-st{display:inline-flex;font-family:var(--font-display);text-transform:uppercase;font-size:10px;letter-spacing:.14em;padding:6px 10px 5px;border-radius:var(--radius-pill);border:2px solid var(--ink-900);background:var(--paper);white-space:nowrap}
.ct-st.pago,.ct-st.separado{background:var(--caramelo-100)}
.ct-st.enviado{background:var(--coroa-300)}
.ct-st.entregue{background:#cfe9d6}
.ct-st.cancelado,.ct-st.estornado,.ct-st.estornando{background:var(--ink-100);color:var(--ink-500)}
.ct-st.aguardando,.ct-st.pedido{background:var(--rosa-200)}
.ct-vazio{display:grid;gap:var(--space-4);justify-items:start}

/* Detalhe */
.ct-cab{display:flex;justify-content:space-between;align-items:start;gap:12px}
.ct-cab h2{font-size:26px;margin-top:6px}
.ct-voltar{display:none}
.ct-linha{list-style:none;margin:0;padding:0;display:grid}
.ct-linha li{display:grid;grid-template-columns:28px 1fr;gap:var(--space-3);position:relative;padding-bottom:var(--space-4)}
.ct-linha li::before{content:"";width:18px;height:18px;border-radius:50%;border:3px solid var(--ink-900);background:var(--paper);margin-top:2px;z-index:1}
.ct-linha li.ok::before{background:var(--caramelo-500)}
.ct-linha li.agora::before{background:var(--rosa-500);box-shadow:0 0 0 4px var(--rosa-200)}
.ct-linha li::after{content:"";position:absolute;left:10px;top:20px;bottom:0;width:3px;background:var(--ink-100)}
.ct-linha li.ok::after{background:var(--caramelo-500)}
.ct-linha li:last-child::after{display:none}
.ct-linha li:last-child{padding-bottom:0}
.ct-linha b{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:14px;letter-spacing:.06em;display:block}
.ct-linha small{color:var(--ink-500);font-size:13px}
.ct-rastreio{background:var(--paper-warm);border:2px solid var(--ink-900);border-radius:var(--radius-lg);padding:var(--space-4);display:grid;gap:var(--space-3)}
.ct-rastreio .cod{font-family:var(--font-display);font-size:22px;letter-spacing:.06em;word-break:break-all}
.ct-par-info{display:grid;grid-template-columns:1fr auto;gap:4px var(--space-3);font-size:15px;align-items:center}
.ct-par-info small{grid-column:1/-1;font-family:var(--font-display);text-transform:uppercase;font-size:11px;letter-spacing:.16em;color:var(--ink-500)}
.ct-res{display:grid;gap:6px;font-size:15px}
.ct-res div{display:flex;justify-content:space-between;gap:var(--space-3)}
.ct-res .tot{border-top:2px solid var(--ink-900);padding-top:8px;font-family:var(--font-display);font-size:20px}
.ct-acoes{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.ct-acoes .btn{padding:13px 10px;font-size:13px}
.ct-acoes .btn:only-child{grid-column:1/-1}
.ct-aviso{background:var(--caramelo-100);border:2px solid var(--ink-900);border-radius:var(--radius-md);padding:10px 14px;font-size:14px}

/* Cartões */
.ct-cartao{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);align-items:center;border:2px solid var(--ink-900);border-radius:var(--radius-lg);padding:var(--space-4)}
.ct-band{width:52px;height:34px;border-radius:6px;border:2px solid var(--ink-900);display:grid;place-items:center;font-family:var(--font-display);font-size:10px;letter-spacing:.04em;background:var(--ink-900);color:var(--paper);text-transform:uppercase}
.ct-band.mastercard{background:#f0a23a;color:var(--ink-900)}
.ct-band.elo{background:var(--rosa-500);color:var(--ink-900)}

/* Opções (ajuda, motivo, cartão salvo) */
.ct-opcoes{display:grid;gap:8px}
.ct-radio{display:grid!important;grid-template-columns:22px auto minmax(0,1fr);gap:var(--space-3)!important;align-items:center;border:2px solid var(--ink-900);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);font-family:var(--font-body)!important;text-transform:none!important;letter-spacing:0!important;font-size:15px!important;cursor:pointer;background:var(--paper)}
.ct-radio:has(input:checked){background:var(--caramelo-100)}
.ct-radio input{width:18px!important;height:18px;margin:0;accent-color:var(--ink-900);padding:0!important}
.ct-radio .ct-st{justify-self:end}
.ct-faq details{border-top:2px dashed var(--ink-100);padding:var(--space-3) 0}
.ct-faq details:first-of-type{border-top:0}
.ct-faq summary{font-weight:700;cursor:pointer;font-size:16px}
.ct-faq p{margin-top:8px!important;font-size:15px;color:var(--ink-700)}
.ct-dados{display:grid;gap:var(--space-4)}

/* Janela de cancelar */
.ct-veu{position:fixed;inset:0;background:rgba(23,23,20,.55);display:grid;place-items:center;padding:var(--space-4);z-index:50}
.ct-folha{width:100%;max-width:520px;margin:0;max-height:92vh;overflow:auto}

@media(max-width:860px){
  .ct{padding-top:var(--space-5)}
  .ct-links{display:none}
  .ct-quem{margin-left:auto}
  .ct-area{grid-template-columns:minmax(0,1fr)}
  .ct-lado{display:none}
  .ct-abas{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .ct-abas a{font-family:var(--font-display);text-transform:uppercase;font-size:11px;letter-spacing:.1em;text-align:center;padding:10px 4px;border:2px solid var(--ink-900);border-radius:var(--radius-pill);background:var(--paper);color:var(--ink-900);text-decoration:none}
  .ct-abas a[aria-current="page"]{background:var(--ink-900);color:var(--paper)}
  .ct-so-celular{display:inline-block;padding:6px 0;border-bottom:2px solid var(--ink-900);border-radius:0}
  .ct-duas{grid-template-columns:minmax(0,1fr)}
  .ct-duas.com-detalhe .ct-lista{display:none}
  .ct-duas:not(.com-detalhe) .ct-detalhe{display:none}
  .ct-voltar{display:inline-block;justify-self:start}
  .ct-veu{place-items:end center}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
