/* Cart table */
/* Tabelas HTML têm uma largura mínima de conteúdo que width:100% não reduz
   (o navegador prefere estourar o container a espremer as colunas demais) —
   em telas estreitas isso empurrava a página inteira pra rolagem horizontal
   e cortava colunas inteiras (ex: o botão "Remover") pra fora da tela. Todo
   <table> do projeto fica dentro de um .table-responsive, que contém esse
   overflow só na tabela (com rolagem lateral própria) em vez de na página. */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--paper);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
}

th, td {
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1rem;
    text-align: left;
}

/* Linha do carrinho de um item bomboniere que a calculadora de frete
   (cart_detail.html) marcou como bloqueado pra entrega fora de Poços de
   Caldas — ver blocked_product_ids em cart.views.cart_calculate_shipping. */
.cart-row-blocked {
    background: #FBEAE8;
    color: var(--red);
}

.cart-row-blocked td {
    border-bottom-color: #F3C7C3;
}

th {
    background: var(--navy);
    color: white;
    font-size: var(--fs-sm);
}

.total {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--navy);
    text-align: right;
}

.btn-in-cart,
.btn-in-cart:hover {
    background: #E8E4D8;
    color: var(--text-muted);
    cursor: default;
    opacity: 1;
}

.product-card-body .btn-in-cart,
.product-card-body .btn-secondary {
    width: 100%;
    padding: 0.5rem 0.9rem;
    font-size: var(--fs-sm);
    margin-top: 0.5rem;
    text-align: center;
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--red);
    font-weight: 600;
    font-size: var(--fs-md);
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.link-button:hover {
    opacity: 0.8;
}

/* Ações de tabela não-destrutivas ("Editar", "Ver") — mesmo peso visual de
   .link-button (sublinhado, negrito, sem fundo), mas em navy em vez de
   vermelho, já que vermelho fica reservado pra ações destrutivas
   (Excluir/Remover) nas mesmas linhas de tabela. */
.table-link {
    color: var(--navy);
    font-weight: 600;
    font-size: var(--fs-md);
    text-decoration: underline;
}

.table-link:hover {
    opacity: 0.8;
}

.quick-add-form button {
    width: 100%;
    padding: 0.5rem 0.9rem;
    font-size: var(--fs-sm);
    margin-top: 0.5rem;
}

/* Campo de quantidade da bomboniere (food) — único tipo com mais de 1
   unidade por carrinho. Só max-width (nunca width:auto junto — reverte pro
   tamanho intrínseco do navegador, ~227px, e faz o max-width virar um
   no-op nesse caso). */
.quick-add-quantity,
#id_quantity {
    max-width: 5rem;
}

.qty-stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.qty-stepper .qty-btn {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    font-size: var(--fs-lg);
    line-height: 1;
}

.quick-add-form .qty-stepper .qty-btn {
    width: 2.25rem;
    margin-top: 0;
    padding: 0;
    font-size: var(--fs-lg);
}

.qty-stepper .qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.qty-stepper .qty-input {
    max-width: 3rem;
    text-align: center;
    -moz-appearance: textfield;
}

.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-quantity-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.cart-quantity-form input[type="number"] {
    min-width: 3.5rem;
    max-width: 4.5rem;
}

/* .table-link (definido acima) só tinha sido usado em <a> até aqui — reseta
   o visual padrão de <button> pra esse elemento ficar com o mesmo peso
   (sem fundo/borda), já que aqui a ação precisa ser um submit de formulário,
   não um link. */
.cart-quantity-form button.table-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.out-of-stock {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Linhas de produto+quantidade em "Lançar pedido"/"Editar pedido" (staff) */
.order-item-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.order-item-row select {
    flex: 1;
    min-width: 10rem;
}

.order-item-row input[type="number"] {
    max-width: 6rem;
}

.order-item-row .remove-item-row {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Linha de "lançar/editar pedido" (staff) marcada pela calculadora de frete
   como bomboniere que não pode ser entregue fora de Poços de Caldas — mesmo
   sentido do .cart-row-blocked do carrinho do cliente, ver
   order_manage_create.html. */
.order-item-row.item-row-blocked {
    background: #FBEAE8;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    color: var(--red);
}

.form-hint {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin: -0.5rem 0 1.5rem;
}

/* A margem negativa acima serve para colar a dica no CAMPO que vem antes. Depois de um bloco (formulário,
   botão, link-botão, lista, tabela, cartão) ela fazia o texto passar por cima do elemento anterior —
   por isso reaparecia a cada tela nova. Nesses casos a dica tem espaço normal; quem precisa do outro
   comportamento continua podendo sobrescrever. */
form + .form-hint,
button + .form-hint,
a + .form-hint,
ul + .form-hint,
ol + .form-hint,
table + .form-hint,
.table-responsive + .form-hint,
section + .form-hint,
details + .form-hint,
figure + .form-hint {
    margin: 0.75rem 0 1.25rem;
}

option[hidden] {
    display: none;
}

.status-badge {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    vertical-align: middle;
}

.status-pending { background: #FCEFC7; color: var(--warn); }
.status-paid { background: #DFF0D8; color: #3C763D; }
.status-shipped { background: #D9EDF7; color: #31708F; }
.status-delivered { background: #DFF0D8; color: #3C763D; }
.status-cancelled { background: #FBE1DF; color: var(--red); }
.status-expired { background: #ECECEC; color: #5F6368; }

.order-progress {
    margin: 1.5rem 0 2rem;
}

.order-timeline {
    display: flex;
    list-style: none;
    margin: 1.25rem 0;
    padding: 0;
}

.order-timeline-step {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: center;
}

.order-timeline-step::before {
    content: "";
    position: absolute;
    top: 1rem;
    right: 50%;
    width: 100%;
    height: 3px;
    background: #D9D9D9;
    z-index: 0;
}

.order-timeline-step:first-child::before {
    display: none;
}

.order-timeline-step--completed::before,
.order-timeline-step--current::before {
    background: #4F7942;
}

.order-timeline-marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 3px solid #C9C9C9;
    border-radius: var(--radius-round);
    background: var(--paper);
    color: #777;
    font-weight: 800;
}

.order-timeline-step--completed .order-timeline-marker {
    border-color: #4F7942;
    background: #4F7942;
    color: white;
}

.order-timeline-step--current .order-timeline-marker {
    border-color: var(--gold-dark);
    color: var(--gold-dark);
    box-shadow: 0 0 0 4px #FFF3C4;
}

.order-timeline-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: 0.6rem;
    padding: 0 0.35rem;
}

.order-timeline-content time {
    color: #777;
    font-size: var(--fs-xs);
}

.order-terminal,
.reservation-deadline,
.tracking-details {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    background: #F4F1E8;
}

.order-terminal--cancelled {
    background: #FBE1DF;
    color: var(--red);
}

.order-terminal--expired {
    background: #ECECEC;
    color: #5F6368;
}

.reservation-deadline {
    border-left: 4px solid var(--gold-dark);
}

.tracking-details p {
    margin: 0.35rem 0;
}

.order-status-form {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
    max-width: 320px;
}

/* Tela interna do pedido (equipe): compacta, com o essencial do fluxo em
   destaque e o reembolso separado no fim. Uma coluna por padrão; duas a partir
   de 721px (min-width — este trecho vem depois do bloco mobile no arquivo). */
.admin-compact {
    font-size: var(--fs-md);
}

.admin-compact h1,
.admin-compact h2 {
    margin: 0.2rem 0;
    font-size: var(--fs-xl);
}

.admin-compact h3 {
    margin: 0 0 0.5rem;
    font-size: var(--fs-base);
}

.admin-compact h4 {
    margin: 0.6rem 0 0.3rem;
    font-size: var(--fs-md);
}

.admin-order-head .form-hint {
    margin: 0 0 0.7rem;
}

.admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    margin-bottom: 0.9rem;
}

.admin-card {
    margin-bottom: 0.9rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--paper);
}

.admin-grid .admin-card {
    margin-bottom: 0;
}

.admin-card--flow {
    border-color: var(--navy);
    border-left-width: 5px;
}

.admin-legend {
    margin: 0.1rem 0 0.6rem;
    color: #6B6357;
    font-size: var(--fs-sm);
}

/* Selos de campo: obrigatório (parte do fluxo) x opcional. */
.field-tag {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    vertical-align: middle;
    white-space: nowrap;
}

.field-tag--required {
    background: #DDF0E1;
    color: #1E5B2B;
}

.field-tag--optional {
    background: #ECEAE4;
    color: #6B6357;
}

.admin-form p,
.admin-form > label {
    margin: 0.5rem 0;
}

.admin-form label {
    display: block;
    font-weight: 600;
}

.admin-form label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.admin-form textarea {
    min-height: 0;
}

.admin-subform {
    margin: 0.4rem 0;
    padding: 0.4rem 0.8rem 0.6rem;
    border-radius: var(--radius-sm);
    background: var(--cream);
}

.admin-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    max-width: none;
}

.requested-shipping {
    margin: 0.2rem 0 0.5rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    background: #EAF1FB;
    color: var(--navy-dark);
    font-size: var(--fs-sm);
}

.admin-table th,
.admin-table td {
    padding: 0.3rem 0.55rem;
    font-size: var(--fs-sm);
}

.refund-net-line {
    margin: 0.2rem 0;
    color: #A62A1E;
    text-align: right;
}

.refund-net-total {
    margin: 0.2rem 0 0;
}

.refund-history {
    margin: 0.4rem 0;
}

.admin-line {
    margin: 0.3rem 0;
}

.admin-total {
    margin: 0.4rem 0 0;
    font-size: var(--fs-base);
}

.admin-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 1rem;
    margin: 0;
}

.admin-facts > div {
    min-width: 0;
}

.admin-facts .wide {
    grid-column: 1 / -1;
}

.admin-facts dt {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.admin-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-timeline .order-progress {
    margin: 0 0 0.9rem;
    padding: 0.5rem 1rem 0.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--paper);
}

.admin-timeline .order-progress h3 {
    margin: 0;
    font-size: var(--fs-base);
}

.admin-timeline .order-timeline {
    margin: 0.5rem 0;
}

.admin-optional {
    margin: 0 0 0.7rem;
    padding: 0.5rem 0.9rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--paper);
}

.admin-optional > summary {
    cursor: pointer;
    color: var(--navy);
    font-weight: 600;
}

/* Reembolso: bloco à parte, no fim e recolhido, para não se confundir com o
   fluxo normal do pedido. */
.refund-zone {
    margin: 1.4rem 0 1rem;
    padding: 0.6rem 1rem;
    border: 2px solid #E7B7B2;
    border-left-width: 6px;
    border-radius: var(--radius-md);
    background: #FFF7F6;
}

.refund-zone > summary {
    cursor: pointer;
    color: #A62A1E;
    font-weight: 700;
}

.refund-block,
.refund-zone .partial-refund {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px solid #F0D5D2;
}

@media (min-width: 721px) {
    .admin-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }

    .admin-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Reembolso parcial: ocupa a largura toda da seção (o .order-status-form limita
   a 320px e encolhia a tabela, forçando barra de rolagem horizontal no desktop). */
.partial-refund-form {
    width: 100%;
}

.partial-refund-form > label {
    display: block;
    margin: 0.7rem 0;
    max-width: 34rem;
}

.partial-refund-form td,
.partial-refund-form th {
    vertical-align: top;
}

.partial-refund-form td label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-weight: 400;
    white-space: nowrap;
}

.partial-refund-form input[type="number"] {
    width: 6.5rem;
}

.partial-refund-form td .form-hint {
    display: block;
    margin: 0.15rem 0 0;
    white-space: nowrap;
}

.actions-cell {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.inline-form {
    display: inline-flex;
    margin: 0;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: #EFF3F8;
    font-weight: 600;
    transition: color 0.15s ease;
}

.nav-dropdown summary::-webkit-details-marker {
    display: none;
}

.nav-dropdown summary::after {
    content: '▾';
    font-size: var(--fs-xs);
}

.nav-dropdown summary:hover,
.nav-dropdown[open] summary {
    color: var(--gold);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.85rem);
    right: 0;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 24px rgba(27, 59, 99, 0.18);
    min-width: 190px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    z-index: 20;
}

.site-header .nav-dropdown-menu a {
    color: var(--navy);
    font-weight: 600;
    font-size: var(--fs-md);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
}

.site-header .nav-dropdown-menu a:hover {
    background: var(--cream);
    color: var(--navy);
}

/* "Sair" dentro do menu da conta: fundo claro, então texto escuro. */
.nav-dropdown-menu .nav-logout-form {
    display: flex;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--border);
}

.nav-dropdown-menu .nav-logout {
    width: 100%;
    text-align: left;
    color: var(--navy);
    font-size: var(--fs-md);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
}

.nav-dropdown-menu .nav-logout:hover {
    background: var(--cream);
    color: var(--navy);
}

/* Forms (login, signup, checkout) */
form p {
    margin-bottom: 1rem;
}

input, select, textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    /* 16px, nunca menos: no iPhone, um campo com fonte menor que 16px faz a
       tela dar zoom ao ser tocado (e o cliente precisa desfazer à mão). */
    font-size: 16px;
}

/* Campos com tamanho fixo de conteúdo não precisam ocupar a largura toda.
   IMPORTANTE: não usar "width: auto" aqui — isso faz o campo voltar pro
   tamanho padrão do navegador (~227px) e ignora o max-width quando ele é
   maior que isso. Só o max-width já reduz a partir do width:100% herdado. */
#id_cpf {
    max-width: 12rem;
}

#id_postal_code {
    max-width: 8rem;
}

/* Botão de mostrar/ocultar senha (base.html injeta isso via JS em todo
   input[type="password"] da página) — o wrapper precisa ser block/relative
   pra herdar a largura do input (que é width:100% por padrão) e ancorar o
   botão absoluto por cima, sem empurrar o layout. */
.password-field-wrapper {
    position: relative;
    display: block;
}

/* Requisitos da nova senha (static/js/password-rules.js): cinza antes de
   digitar, verde quando atendido, vermelho quando não. */
.password-rules {
    list-style: none;
    margin: 0.4rem 0 0.75rem;
    padding: 0;
    font-size: var(--fs-sm);
    color: #6B7075;
}

.password-rule {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0.15rem 0;
}

.password-rule::before {
    content: '•';
    display: inline-block;
    width: 1rem;
    text-align: center;
    font-weight: 700;
}

.password-rule--ok {
    color: #2E7D32;
}

.password-rule--ok::before {
    content: '✓';
}

.password-rule--fail {
    color: var(--red);
}

.password-rule--fail::before {
    content: '✗';
}

.password-field-wrapper input {
    padding-right: 2.75rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.3rem;
    margin: 0;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle:hover {
    color: var(--navy);
    opacity: 1;
}

#id_whatsapp {
    max-width: 12rem;
}

#id_number {
    max-width: 6rem;
}

#id_state {
    /* Mostra o nome completo do estado (ex: "Rio Grande do Norte"), não só a sigla */
    max-width: 15rem;
}

#id_complement,
#id_neighborhood,
#id_city {
    max-width: 18rem;
}

#id_first_name,
#id_last_name {
    max-width: 14rem;
}

#id_street {
    /* Bem maior que os outros campos de endereço */
    max-width: 32rem;
}

.input-prefix-group[hidden] {
    display: none;
}

.input-prefix-group {
    display: flex;
    align-items: stretch;
    max-width: 20rem;
}

.instagram-display {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: 0.5rem;
}

.instagram-display a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: underline;
}

.input-prefix {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    background: var(--cream);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: var(--text-muted);
    font-size: var(--fs-md);
    white-space: nowrap;
}

.input-prefix-group input {
    border-radius: 0 8px 8px 0;
}

label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: var(--fs-md);
    color: var(--navy);
}

.errorlist {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    background: #FBE1DF;
    border: 1px solid var(--red);
    border-radius: var(--radius-sm);
    color: var(--red);
    font-size: var(--fs-md);
    font-weight: 600;
}

.errorlist li + li {
    margin-top: 0.3rem;
}

.helptext {
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 400;
    margin-top: 0.2rem;
}

/* Aviso de erro de buscas por API externa (ISBN em product_form.html, CEP
   em base.html) — o motivo aparece no title nativo do navegador ao passar
   o mouse, sem precisar de tooltip customizado. */
.lookup-status {
    display: block;
    color: var(--red);
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-top: 0.3rem;
    cursor: help;
}

.cep-lookup-hint {
    display: block;
    max-width: 32rem;
    margin-top: 0.35rem;
    color: var(--navy);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.cep-lookup-status {
    max-width: 32rem;
    cursor: default;
}

.cep-lookup-status--loading {
    color: #6B6357;
}

.cep-lookup-status--success {
    color: #3F6B35;
}

.cep-lookup-status--error {
    color: var(--red);
}

/* Calculadora de frete no carrinho (cart_detail.html) — um "quadro" só,
   reunindo a escolha de entrega/retirada e o resultado calculado, no mesmo
   estilo de cartão (borda + sombra leve) já usado em .product-card/
   .nav-dropdown-menu. O mesmo aviso de falha (.shipping-error) é
   reaproveitado, sem o cartão, em order_created/order_detail/order_manage_detail. */
.shipping-calculator {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.shipping-calculator h3 {
    margin-top: 0;
}
.shipping-methods {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: 0.9rem;
}
/* Radio nativo só na cor do site (em vez do azul padrão do navegador) —
   aplica em qualquer radio/checkbox do projeto, não só aqui (is_staff/
   is_active em user_update, "Remover" em product_form). width:auto escapa
   do input,select,textarea{width:100%} global — sem isso o navegador tenta
   esticar o controle igual um campo de texto. */
input[type="radio"],
input[type="checkbox"] {
    width: auto;
    accent-color: var(--navy);
}
/* "Chips" clicáveis pra Entrega/Retirada e cada opção da SuperFrete — troca
   o radio soltinho ao lado do texto por um cartão inteiro clicável, com
   destaque de borda/fundo quando selecionado (:has, suportado nos
   navegadores atuais; sem ele, degrada pro radio nativo sem destaque, sem
   perder funcionalidade). */
.shipping-methods label,
.shipping-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
/* O radio em si fica só funcional (clique/estado), sem aparecer — o
   destaque de selecionado é todo do cartão (:has(input:checked) abaixo). */
.shipping-methods input[type="radio"],
.shipping-option input[type="radio"] {
    display: none;
}
.shipping-methods label:has(input:checked),
.shipping-option:has(input:checked) {
    border-color: var(--navy);
    background: var(--cream);
    color: var(--navy);
}
/* Durante um recálculo (troca de forma de entrega/serviço), o resultado
   anterior fica visível (só esmaecido) em vez de sumir da tela enquanto a
   resposta nova não chega — ver a remoção de hideResult() no início de
   calculate(), em cart_detail.html. */
.shipping-result {
    transition: opacity 0.15s ease;
}
.shipping-calculator--loading .shipping-result {
    opacity: 0.5;
}
.shipping-loading {
    color: var(--navy);
    font-weight: 600;
}
.shipping-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0.75rem 0;
}
.shipping-error {
    color: var(--red);
    font-weight: 600;
}
.shipping-error[title] {
    cursor: help;
}

/* Escolha de pagamento no último passo do checkout */
.payment-choice {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.payment-choice legend {
    color: var(--navy);
    font-weight: 700;
    padding: 0 0.35rem;
}
.payment-choice-options ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}
.payment-choice-options li { margin: 0.55rem 0; }
.payment-choice-options label { cursor: pointer; }
.payment-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: 0.75rem;
    background: #eaf5e7;
    border-radius: var(--radius-sm);
    color: #35572c;
}
/* display:flex acima vence o atributo [hidden] — sem esta regra o resumo do
   Pix continuava visível ao escolher cartão. */
.payment-summary[hidden] {
    display: none;
}

/* Flash messages */
.messages {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.messages li {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--fs-md);
    margin-bottom: 0.75rem;
}

.messages .success {
    background: #DFF0D8;
    border: 1px solid #3C763D;
    color: #3C763D;
}

.messages .error {
    background: var(--danger-bg);
    border: 1px solid var(--red);
    color: var(--danger);
}

/* O título principal de cada tela é <h1> (navegação por títulos e SEO), com o
   mesmo tamanho visual que o <h2> tinha antes — o tamanho padrão do navegador
   para <h1> (2em) seria grande demais aqui. */
h1 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h1, h2 {
    font-family: var(--font-display);
    color: var(--navy);
}

/* Footer */
.profile-alert {
    background: var(--gold);
    color: var(--navy-dark);
    text-align: center;
    padding: 0.65rem 1.5rem;
    font-size: var(--fs-md);
    font-weight: 600;
}

.profile-alert a {
    color: var(--navy-dark);
    text-decoration: underline;
}

.card-pending-alert {
    background: #FCEFC7;
    color: var(--navy-dark);
    padding: 0.75rem 1.5rem;
    font-size: var(--fs-md);
}

.card-pending-alert p {
    margin: 0 0 0.5rem;
}

.card-pending-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.card-pending-actions form {
    margin: 0;
}

.site-footer {
    text-align: center;
    padding: 1.5rem;
    color: #6F6A5E;
    font-size: var(--fs-md);
    border-top: 1px solid var(--border);
    margin-top: 2rem;
}

/* Rodapé em três blocos (Loja, Ajuda, Contato): lado a lado quando cabem, empilhados no celular. */
.footer-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.25rem 2rem;
    max-width: 60rem;
    margin: 0 auto 1rem;
    text-align: left;
}

.footer-block h2 {
    font-size: var(--fs-md);
    margin: 0 0 0.4rem;
    color: var(--navy);
}

.footer-block p {
    margin: 0 0 0.35rem;
}

.footer-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-block li {
    margin: 0 0 0.35rem;
}

.footer-tagline {
    margin: 0.5rem 0 0;
}