/*
    Top bar — links que abrem o modal e o modal de entrega por cidade.
    O visual da barra em si (.topbar) continua no site.css.
*/

/* Frase clicável: parece texto da barra, com sublinhado pontilhado indicando que abre algo */
.tb-link{
    background:none; border:0; padding:0; margin:0; cursor:pointer;
    font:inherit; color:inherit;
    text-decoration:underline dotted; text-underline-offset:3px;
    text-decoration-color:rgba(255,255,255,.55);
}
.tb-link:hover{ text-decoration-color:#fff; }
.tb-link:focus-visible{ outline:2px solid #fff; outline-offset:2px; border-radius:4px; }

/* ── modal ── */
.tb-modal {
    padding: 0;
    border: 0;
    border-radius: 14px;
    width: min(480px, calc(100% - 32px));
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
    color: var(--text,#1d2321);
    margin: auto;
    max-height: calc(100vh - 32px);
    overflow: auto;
}
.tb-modal::backdrop{ background:rgba(14,22,18,.55); }

.tb-modal-caixa{ padding:20px 24px 18px; }
.tb-modal-topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.tb-modal-topo h3{ margin:0; font-family:'Sora',sans-serif; font-size:18px; }
.tb-modal-fechar{
    background:none; border:0; font-size:24px; line-height:1; padding:4px 8px;
    color:var(--muted,#5d6b65); cursor:pointer;
}
.tb-modal-fechar:hover{ color:var(--text,#1d2321); }

.tb-cidades{ list-style:none; margin:0; padding:0; }
.tb-cidade{
    display:grid; grid-template-columns:1fr auto; gap:2px 16px;
    padding:12px 0; border-bottom:1px solid var(--border,#e2e8e5); font-size:14px;
}
.tb-cidade:last-child{ border-bottom:0; }
.tb-cidade-nome{ font-weight:700; }
.tb-cidade-prazo{ text-align:right; color:var(--brand,#1f7a4a); font-weight:600; }
.tb-cidade-frete{ grid-column:1 / -1; font-size:13px; color:var(--muted,#5d6b65); }
.tb-encerrado{ color:#b26a00; }
.tb-sem-frete{ color:#9aa5a0; }

.tb-modal-rodape{ margin:12px 0 0; font-size:12px; color:var(--muted,#5d6b65); }