/*
 * Caixa de frete do produto/carrinho/checkout.
 *
 * As regras antigas deste arquivo miravam .combined-shipping / .combined-whatsapp /
 * a.whats. Essas classes vêm do whatsapp.phtml do PACOTE combined_shipping, que serve
 * o tema k13/default (base antiga) — lá elas valem. No tema novo o template é a cópia
 * local, que usa .whatsapp, então aqui aquelas regras nunca casavam: quem estilizava a
 * caixa era só o bundle do tema, via .address-box .address / .icon / .whatsapp.
 *
 * Por isso os templates continuam usando ESSAS classes como base, e as k13-shipping*
 * apenas refinam. Enquanto k13_seo/css_js/active estiver desligado este arquivo é
 * servido sem ?cache= e sem Cache-Control: um navegador com a cópia antiga não veria
 * as regras abaixo, e a caixa precisa continuar de pé nesse cenário.
 *
 * Regra ao editar: só declarar aqui o que o tema NÃO declara. O bundle do tema é
 * emitido depois deste arquivo e usa o prefixo
 * `#product .presentation .col-presentation .address-box`, que vence qualquer
 * seletor de classe simples daqui.
 */

/* ---------- Linha de método de envio ---------- */

/* display/gap não são declarados pelo tema em .address, então valem.
   color, line-height e margin ficam por conta do tema, de propósito. */
.k13-shipping-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.k13-shipping-row__icon {
    flex: 0 0 20px;
    text-align: center;
}

.k13-shipping-row__title {
    flex: 1 1 auto;
    min-width: 0;
}

/* O preço vai para a direita e ganha peso, para a coluna ficar legível de bater o olho. */
.k13-shipping-row__price {
    flex: 0 0 auto;
    margin-left: auto;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- Aviso (método indisponível) ---------- */

/* Sem a classe .address no markup, aqui não há disputa com o tema. */
.k13-shipping-msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 4px;
    border-left: 3px solid #b57b0a;
    background: #fff4b7;
    color: #b57b0a;
    line-height: 1.4;
}

.k13-shipping-msg > i {
    flex: 0 0 auto;
    margin-top: 1px;
}

/* ---------- Botão WhatsApp ---------- */

.k13-shipping-cta {
    padding: 4px 0 2px;
}

/* O tema já dá fundo, cor, raio, padding, largura e display:inline-block ao .whatsapp.
   margin-right no ícone em vez de gap justamente porque o display do tema vence. */
.k13-shipping-whatsapp {
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease;
}

.k13-shipping-whatsapp > i {
    margin-right: 6px;
    font-size: 17px;
    line-height: 1;
}

/* O tema zera outline globalmente; reposto aqui para navegação por teclado. */
.k13-shipping-whatsapp:focus-visible {
    outline: 2px solid var(--product-presentation-payment-methods-color, #2c5bb3);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .k13-shipping-whatsapp {
        transition: none;
    }
}