/* SIXCLINIC/assets/css/checkout.css */
:root{
    --topo-bg:#eee4a1;--meio-lateral:#f0eada;--meio-centro:#fff;--rodape-bg:#fed725;
    --text:#696969;--border:rgba(0,0,0,.12);--container-max:1100px;--radius:12px;
    --whatsapp:#25D366;--pay:#554d40;--pay-hover:#3f392f;--err:#b00020;--ok:#0a7a38;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:#fff}
a{color:inherit;text-decoration:none}
.container{width:min(100%,var(--container-max));margin:0 auto;padding:0 16px;min-width:0}

header.topo{height:95px;background:var(--topo-bg);border-bottom:1px solid var(--border)}
.topo-inner{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.topo-left{justify-self:start}.topo-center{justify-self:center}.topo-right{justify-self:end}

.btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:10px 14px;border-radius:10px;border:1px solid var(--border);
    background:rgba(255,255,255,.5);font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;
    transition: background .15s ease, filter .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{background:rgba(255,255,255,.75)}
.btn-whatsapp{background:var(--whatsapp);border-color:var(--whatsapp);color:#fff}
.btn-whatsapp:hover{filter:brightness(.95);color:#fff}

.logo{height:93px;width:auto;display:block}

main.meio{min-height:calc(100vh - 95px - 130px)}
.meio-stack{display:grid;grid-template-columns:1fr;gap:16px;padding:22px 0}

.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:0 6px 20px rgba(0,0,0,.04);min-width:0;overflow-wrap:break-word;word-break:break-word}
.card.card-alt{background:var(--meio-lateral)} .card.card-center{background:var(--meio-centro)}
.section-title{margin:0 0 12px;font-size:18px}

.alert{padding:10px 12px;border-radius:10px;border:1px solid var(--border);margin-bottom:12px}
.alert.err{border-color:rgba(176,0,32,.25);color:var(--err);background:rgba(176,0,32,.06)}
.alert.ok{border-color:rgba(10,122,56,.25);color:var(--ok);background:rgba(10,122,56,.06)}

.form{display:grid;gap:14px}
.block{border:1px solid var(--border);border-radius:12px;padding:14px;background:#fff}
.block-title{margin:0 0 10px;font-size:14px;font-weight:800;color:#4b4b4b}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid.one{grid-template-columns:1fr}
.field label{display:block;font-size:13px;margin-bottom:6px;font-weight:700}
.field input,.field select{width:100%;max-width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);outline:none;background:#fff;color:var(--text)}
.field input:focus,.field select:focus{border-color:rgba(0,0,0,.25)}

.btn-primary{background:var(--pay);color:#fff;border-color:var(--pay)}
.btn-primary:hover{background:var(--pay-hover);border-color:var(--pay-hover);color:#fff;filter:none}
.btn-primary:focus{outline:2px solid rgba(85,77,64,.25); outline-offset:2px}

.hint{font-size:12px;color:#666;margin-top:6px}
.hint.err{color:var(--err)}
.inline-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-start;margin-top:12px}

.layout{display:grid;grid-template-columns:1.65fr .85fr;gap:16px}
@media (max-width:920px){.layout{grid-template-columns:1fr}}
@media (max-width:720px){.grid{grid-template-columns:1fr}}

footer.rodape{background:var(--rodape-bg);border-top:1px solid var(--border)}
.rodape-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.rodape-logo{height:70px;width:auto;display:block}

/* Resumo da compra */
.resumo-item{margin-bottom:12px}
.resumo-item strong{font-size:14px;color:#333;display:block;margin-bottom:2px}
.resumo-item p{margin:0;font-size:13px;color:#666;line-height:1.5}
.resumo-divisor{border:none;border-top:1px solid var(--border);margin:18px 0}
.section-subtitle{margin:0 0 12px;font-size:16px;font-weight:700;color:#333}

/* Ícones para mobile no topo */
.btn-icon{display:none}
.btn-text{}
@media (max-width:520px){
    .topo-inner{gap:6px}
    .topo-left .btn, .topo-right .btn{padding:10px 12px;font-size:18px}
    .btn-icon{display:inline}
    .btn-text{display:none}
    .logo{height:70px}
    header.topo{height:75px}
}