/* Complementos ao template: fluxo de solicitação (cadastro, contrato, pagamento). */
:root{--danger:#b3261e;--danger-bg:#fdecea;--ok:#1d7a46;--ok-bg:#e7f5ec;--warn:#8a5a00;--warn-bg:#fff4dc}

/* Rodapé sempre no fim da janela, mesmo em páginas de pouco conteúdo. */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}
body>.footer{flex-shrink:0}

/* Header fora da home: links voltam para as âncoras da home. */
.header .nav{min-height:80px}

/* Simulador: sem prazos configurados */
.terms:empty{display:none}
.simbody .btn[aria-disabled=true]{opacity:.55;pointer-events:none}
.result .total{display:block;text-align:right;font-size:12px;color:var(--muted)}

/* ===== Fluxo ===== */
.flow{padding:44px 0 80px}
.flowhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.flowhead h1{font-size:clamp(30px,3.4vw,42px);letter-spacing:-1.5px;margin:12px 0 0;line-height:1.1}
.stepper{display:flex;gap:6px;list-style:none;margin:0;padding:0;font-size:13px;font-weight:700;color:var(--muted)}
.stepper li{display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:white}
.stepper li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--light);color:var(--purple);font-size:12px}
.stepper li[aria-current=step]{border-color:var(--purple);color:var(--purple)}
.stepper li[aria-current=step] span,.stepper li.done span{background:var(--purple);color:white}
.stepper li.done{color:var(--deep)}

.flowgrid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.85fr);gap:36px;align-items:start}
.panel{background:white;border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:0 12px 35px #29134008}
.panel h2{font-size:24px;letter-spacing:-.6px;margin:0 0 6px;font-weight:600}
.panel>p.lead{color:var(--muted);margin:0 0 26px;font-size:15px}
.panel h3{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--purple);margin:30px 0 14px;padding-top:24px;border-top:1px solid var(--line)}
.panel h3:first-of-type{margin-top:0;padding-top:0;border-top:0}

.formgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 18px}
.field{display:flex;flex-direction:column;gap:6px;grid-column:span 3;min-width:0}
.field.full{grid-column:1/-1}.field.s2{grid-column:span 2}.field.s4{grid-column:span 4}
.field label{font-size:13px;font-weight:700;color:var(--deep)}
.field input,.field select{width:100%;border:1px solid #d8cde3;border-radius:9px;padding:12px 14px;font-size:15px;color:var(--deep);background:white;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px #512a8622}
.field input[readonly]{background:var(--light);color:var(--muted)}
.field.invalid input,.field.invalid select{border-color:var(--danger)}
.field .err{font-size:12px;color:var(--danger)}
.field .hint{font-size:12px;color:var(--muted)}

.pixbox{display:flex;gap:14px;align-items:flex-start;background:var(--light);border-radius:12px;padding:16px 18px;font-size:14px}
.pixbox strong{display:block}
.pixbox .icon{width:28px;height:28px}

.actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:30px;flex-wrap:wrap}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.linkbtn{background:none;border:0;padding:0;color:var(--purple);font-weight:700;font-size:14px;cursor:pointer;border-bottom:1px solid var(--purple)}

/* Resumo (coluna direita) */
.summary{position:sticky;top:24px;background:var(--light);border-radius:18px;padding:10px}
.summary .simhead{padding:12px 16px 14px}
.summary .box{background:white;border:1px solid var(--line);border-radius:14px;padding:24px}
.summary .amount{font-size:34px;display:block;line-height:1.1}
.summary dl{margin:18px 0 0;display:grid;grid-template-columns:1fr auto;gap:10px 12px;font-size:14px}
.summary dt{color:var(--muted)}.summary dd{margin:0;text-align:right;font-weight:600}
.summary .highlight{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.summary .highlight dd{color:var(--purple);font-size:19px}
.summary .note{font-size:12px;color:var(--muted);margin:16px 6px 6px;line-height:1.55}

/* Contrato */
.contract{border:1px solid var(--line);border-radius:12px;background:#fcfbfe;padding:22px 24px;max-height:430px;overflow:auto;font-size:14px;line-height:1.7}
.contract h4{margin:18px 0 6px;font-size:14px}
.contract h4:first-child{margin-top:0}
.contract p{margin:0 0 10px}
.contract table{width:100%;border-collapse:collapse;margin:8px 0 14px}
.contract td{border-bottom:1px solid var(--line);padding:6px 0}
.contract td:last-child{text-align:right;font-weight:600}
.checks{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.check-row{display:flex;gap:12px;align-items:flex-start;font-size:14px;cursor:pointer}
.check-row input{width:19px;height:19px;margin-top:2px;accent-color:var(--purple);flex-shrink:0}

/* Cartão */
.cardpreview{border-radius:16px;padding:22px 24px;color:white;background:linear-gradient(135deg,#512a86,#291340);margin-bottom:26px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;max-width:380px;box-shadow:0 16px 30px #29134030}
.cardpreview .num{font-size:20px;letter-spacing:2px;font-family:"Courier New",monospace}
.cardpreview .row{display:flex;justify-content:space-between;font-size:12px;text-transform:uppercase;opacity:.9;gap:10px}
.cardpreview .brand{font-weight:700;font-size:15px;text-align:right}
.secure{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px;margin-top:18px}
.secure svg{width:18px;height:18px;color:var(--purple);flex-shrink:0}

/* Alertas */
.alert{border-radius:12px;padding:14px 18px;font-size:14px;margin:0 0 22px;line-height:1.55}
.alert.error{background:var(--danger-bg);color:var(--danger)}
.alert.info{background:var(--light);color:var(--deep)}
.alert.ok{background:var(--ok-bg);color:var(--ok)}
.alert.warn{background:var(--warn-bg);color:var(--warn)}

/* Autenticação 3DS */
.authbox{text-align:center;padding:40px 10px}
.spinner{width:46px;height:46px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--purple);animation:spin 1s linear infinite;margin:0 auto 20px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Resultado */
.resultbox{text-align:center;padding:24px 10px 10px}
.resultbox .badge{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;font-size:30px;font-weight:700}
.resultbox .badge.ok{background:var(--ok-bg);color:var(--ok)}
.resultbox .badge.wait{background:var(--light);color:var(--purple)}
.resultbox .badge.no{background:var(--danger-bg);color:var(--danger)}
.resultbox h2{font-size:28px;margin-bottom:10px}
.resultbox p{color:var(--muted);max-width:460px;margin:0 auto 10px}

/* ===== Minha conta ===== */
.accountlink{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--deep);white-space:nowrap}
.accountlink svg{width:22px;height:22px;color:var(--purple)}
.accountlink:hover{color:var(--purple)}

.authpage{display:flex;justify-content:center}
.authcard{width:min(460px,100%)}
.authcard h1{font-size:30px;letter-spacing:-1px;margin:12px 0 8px;line-height:1.15}
.authcard .field input{width:100%}
.authlinks{margin-top:20px;text-align:center}
.hintbox{background:var(--light);border-radius:12px;padding:12px 16px;font-size:13px;color:var(--muted);line-height:1.55;margin:22px 0 0}
.senhagerada{font-family:"Courier New",monospace;font-size:26px;font-weight:700;letter-spacing:2px;color:var(--deep)!important;background:var(--light);border:1px dashed var(--purple);border-radius:12px;padding:16px;margin:18px auto!important;user-select:all;word-break:break-all}

.orderlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.orderlist li{border-bottom:1px solid var(--line)}
.orderlist a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 6px;border-radius:10px;transition:background .15s}
.orderlist a:hover{background:var(--light)}
.ol-main,.ol-side{display:flex;flex-direction:column;gap:3px;min-width:0}
.ol-side{align-items:flex-end;text-align:right;position:relative;padding-right:22px}
.ol-num{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.ol-valor{font-size:21px;letter-spacing:-.5px;color:var(--deep)}
.ol-meta{font-size:13px;color:var(--muted)}
.ol-arrow{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:26px;color:var(--purple)}

.pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.pill-lg{font-size:14px;padding:7px 16px}
.pill-espera{background:var(--light);color:var(--purple)}
.pill-ok{background:var(--ok-bg);color:var(--ok)}
.pill-nao{background:var(--danger-bg);color:var(--danger)}
.pill-acao{background:var(--warn-bg);color:var(--warn)}

.statusbox{border-radius:14px;padding:20px 22px;margin-bottom:8px;border-left:5px solid var(--purple);background:var(--light)}
.statusbox p{margin:0;font-size:15px;line-height:1.6}
.statusbox.tone-ok{background:var(--ok-bg);border-left-color:var(--ok)}
.statusbox.tone-nao{background:var(--danger-bg);border-left-color:var(--danger)}
.statusbox.tone-acao{background:var(--warn-bg);border-left-color:var(--warn)}
.statusbox+h3{margin-top:30px!important}
.pixdate{margin-top:14px;padding-top:14px;border-top:1px solid #1d7a4630;display:flex;flex-direction:column}
.pixdate span{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ok);font-weight:700}
.pixdate strong{font-size:22px;color:var(--ok);letter-spacing:-.4px}

.track{list-style:none;margin:0;padding:0}
.track li{display:flex;gap:14px;position:relative;padding-bottom:20px}
.track li:not(:last-child):before{content:'';position:absolute;left:13px;top:28px;bottom:2px;width:2px;background:var(--line)}
.track li.feito:not(:last-child):before{background:var(--purple)}
.track .dot{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:13px;font-weight:700;border:2px solid var(--line);background:white;color:white;position:relative;z-index:1}
.track .feito .dot{background:var(--purple);border-color:var(--purple)}
.track .atual .dot{border-color:var(--purple);box-shadow:0 0 0 4px #512a8620}
.track .falhou .dot{background:var(--danger);border-color:var(--danger)}
.track strong{display:block;font-size:15px;padding-top:3px}
.track .futuro strong{color:var(--muted)}
.track .when{font-size:12px;color:var(--muted)}
.track p{margin:2px 0 0;font-size:14px;color:var(--muted)}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:14px}
dl.kv dt{color:var(--muted)}dl.kv dd{margin:0;font-weight:600}

@media(max-width:740px){
  .accountlink{margin-left:auto}
  .accountlink span{display:none}
  .nav>.btn{margin-left:0}
  .orderlist a{flex-direction:column;align-items:flex-start}
  .ol-side{align-items:flex-start;text-align:left;padding-right:0}
  .ol-arrow{display:none}
}

/* Erro de circuito do Blazor */
#blazor-error-ui{background:#fff4dc;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.8rem 1.25rem;position:fixed;width:100%;z-index:1000;font-size:14px}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.6rem}
#blazor-error-ui .reload{color:var(--purple);font-weight:700;margin-left:8px}
.components-reconnect-show,.components-reconnect-failed,.components-reconnect-rejected{z-index:2000}

@media(max-width:900px){
  .flowgrid{grid-template-columns:1fr;gap:22px}
  .summary{position:static;order:-1}
  .panel{padding:24px 20px}
}
@media(max-width:560px){
  .formgrid{grid-template-columns:1fr 1fr}
  .field,.field.s2,.field.s4{grid-column:1/-1}
  .field.half{grid-column:span 1}
  .stepper li{padding:6px 10px}.stepper li b{display:none}
}
@media(prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}