/* ============================================================================
   FO — WOOCOMMERCE UX v3 (checkout CLÁSSICO + encomenda recebida)
   ----------------------------------------------------------------------------
   Carregado APENAS nas páginas de loja pelo inc/wc-ux.php (handle
   fo-woocommerce), DEPOIS do style.css — os tokens --fo-* vêm de lá e estas
   regras vencem empates com a camada "Lote 4" do style.css.

   MUDANÇA DE CONTEXTO (3.ª passagem): o site voltou ao checkout clássico
   ([woocommerce_cart]/[woocommerce_checkout]). Todas as regras .wc-block-*
   de carrinho/checkout das passagens anteriores foram REMOVIDAS (mortas).
   A encomenda recebida usa o markup clássico (thankyou.php) — mantém-se a
   versão validada; a variante wc-block-order-confirmation foi removida.

   A base estrutural do checkout (grid, inputs, cartões de moradas) vive na
   camada Lote 4 do style.css, corrigida nesta passagem. Este ficheiro trata
   do DESIGN dos métodos de pagamento, resumo e estados.

   Princípios (estudo na 2.ª passagem): um acento (vermelho = CTA + radio),
   navy para selecção e hierarquia; métodos como cartões com identidade à
   esquerda; escala tipográfica curta; estados inequívocos; foco visível.
   !important só contra o CSS core do WooCommerce, comentado.
   ============================================================================ */

/* ============================================================================
   1. MÉTODOS DE PAGAMENTO — cartões seleccionáveis
      Markup clássico: #payment > ul.wc_payment_methods > li.wc_payment_method
      > input.input-radio + label[for] + div.payment_box
   ============================================================================ */

body.woocommerce-checkout #payment {
    background: transparent !important; /* core pinta #payment de cinzento */
    border-radius: 0;
}

body.woocommerce-checkout #payment ul.wc_payment_methods {
    list-style: none;
    margin: 0 0 var(--fo-space-5);
    padding: var(--fo-space-5) 0 0 !important; /* core: 1em com bordas */
    border: none !important;
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-3);
}

body.woocommerce-checkout li.wc_payment_method {
    position: relative;
    margin: 0 !important;
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-lg);
    overflow: hidden;
    transition: border-color var(--fo-transition), box-shadow var(--fo-transition);
}

/* Cartão seleccionado: contorno navy sem alterar larguras (box-shadow) */
body.woocommerce-checkout li.wc_payment_method:has(> input.input-radio:checked) {
    border-color: var(--fo-navy);
    box-shadow: 0 0 0 1px var(--fo-navy);
}

body.woocommerce-checkout li.wc_payment_method:hover {
    border-color: var(--fo-gray-400);
}

/* O label é a área clicável inteira do cartão */
body.woocommerce-checkout li.wc_payment_method > label {
    display: flex !important;    /* core: inline */
    align-items: center;
    gap: var(--fo-space-3);
    min-height: 56px;
    padding: var(--fo-space-4) var(--fo-space-5);
    margin: 0 !important;
    cursor: pointer;
    font-weight: 600;
    color: var(--fo-navy);
    background: transparent;
}

body.woocommerce-checkout li.wc_payment_method:has(> input.input-radio:checked) > label {
    background: color-mix(in srgb, var(--fo-navy) 4%, var(--fo-white));
}

/* Radio em fluxo, dentro do label visualmente (fica antes no DOM):
   posiciona-se sobre o padding esquerdo do label via absolute — aqui é
   seguro porque NÓS controlamos o padding do label (lição da 2.ª passagem:
   nunca depender do padding de terceiros). */
body.woocommerce-checkout li.wc_payment_method > input.input-radio {
    position: absolute;
    left: var(--fo-space-5);
    top: 28px; /* centro dos 56px de min-height do label */
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    margin: 0 !important;
    accent-color: var(--fo-red);
}

body.woocommerce-checkout li.wc_payment_method > label {
    padding-left: calc(var(--fo-space-5) + 20px + var(--fo-space-3)); /* espaço do radio reservado por NÓS */
}

/* Logótipos dos gateways (assets/img/payments/): altura consistente,
   alinhados à direita do cartão, primeiro logo empurra o grupo */
body.woocommerce-checkout li.wc_payment_method > label img,
body.woocommerce-checkout li.wc_payment_method > label img.fo-pay-logo {
    height: 24px !important;     /* core deixa crescer */
    max-height: 24px !important;
    width: auto;
    flex-shrink: 0;
    vertical-align: middle;
}

body.woocommerce-checkout li.wc_payment_method > label img:first-of-type {
    margin-left: auto; /* nome à esquerda, logos à direita */
}

body.woocommerce-checkout li.wc_payment_method > label img + img {
    margin-left: var(--fo-space-2);
}

/* ---- Balão da descrição (.payment_box): deixa de ser balão ----
   Passa a rodapé do próprio cartão: sem seta, sem fundo lilás, tipografia
   do sistema, alinhado com o texto do label. */
body.woocommerce-checkout li.wc_payment_method div.payment_box {
    position: relative;
    margin: 0 !important;             /* core: 1em 0 com deslocamentos */
    padding: var(--fo-space-4) var(--fo-space-5) var(--fo-space-5)
             calc(var(--fo-space-5) + 20px + var(--fo-space-3)) !important;
    background: color-mix(in srgb, var(--fo-navy) 3%, var(--fo-white)) !important; /* core: #dfdcde lilás */
    border-top: 1px solid var(--fo-gray-100);
    border-radius: 0 !important;
    color: var(--fo-gray-700) !important;
    font-size: var(--fo-text-sm);
    line-height: 1.6;
}

body.woocommerce-checkout li.wc_payment_method div.payment_box::before {
    display: none !important; /* core: seta triangular #dfdcde apontada ao radio */
    content: none !important;
}

body.woocommerce-checkout li.wc_payment_method div.payment_box p {
    margin: 0 0 var(--fo-space-2);
}

body.woocommerce-checkout li.wc_payment_method div.payment_box p:last-child {
    margin-bottom: 0;
}

/* ============================================================================
   2. RESUMO — totais legíveis (defeito nº 7)
   ============================================================================ */

/* Total em navy — o vermelho é do CTA. O core e camadas antigas pintam
   .amount de vermelho; aqui ganha-se por ordem de cascata + !important. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total .woocommerce-Price-amount {
    color: var(--fo-navy) !important;
    font-size: var(--fo-text-xl);
    font-weight: 800;
}

/* "(inclui X € IVA23)" — linha própria, pequena, cinza, sem partir números */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total .includes_tax,
body.woocommerce-checkout .woocommerce-checkout-review-order-table small {
    display: block;
    margin-top: var(--fo-space-1);
    font-size: var(--fo-text-xs);
    font-weight: 400;
    color: var(--fo-gray-500) !important;
    white-space: nowrap;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total .includes_tax .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
    color: inherit !important;
}

/* Linhas do resumo respiradas */
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding: var(--fo-space-3) 0 !important; /* core usa paddings apertados com bordas */
    border: none !important;
    border-bottom: 1px solid var(--fo-gray-100) !important;
    vertical-align: top;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:last-child th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:last-child td {
    border-bottom: none !important;
}

/* ============================================================================
   3. EXPRESS (Apple/Google Pay) — movidos para depois do "Finalizar
      encomenda" pelo inc/wc-checkout-classic.php. Aqui só o enquadramento.
   ============================================================================ */

body.woocommerce-checkout #payment #wc-stripe-payment-request-wrapper,
body.woocommerce-checkout #payment #wc-stripe-express-checkout-element {
    margin: var(--fo-space-2) 0 0 !important; /* o plugin traz margens inline próprias */
}

/* Separador "— OU —" — agora no sítio certo (entre o express e o bloco
   privacidade/termos). O plugin mostra/esconde-o por JS; aqui só o aspecto. */
#wc-stripe-payment-request-button-separator {
    margin: var(--fo-space-4) 0 !important;   /* inline style do plugin: 1.5em */
    text-align: center;
    color: var(--fo-gray-500);
    font-size: var(--fo-text-sm);
    letter-spacing: 0.08em;
}

/* ============================================================================
   4. ENCOMENDA RECEBIDA (markup clássico — validado na 1.ª passagem)
   ============================================================================ */

body.woocommerce-order-received .woocommerce-thankyou-order-received {
    background: var(--fo-navy);
    color: var(--fo-white);
    font-family: var(--fo-font-display);
    font-size: var(--fo-text-xl);
    font-weight: 600;
    padding: var(--fo-space-6) var(--fo-space-8);
    border-radius: var(--fo-radius-lg);
    margin: 0 0 var(--fo-space-8);
}

body.woocommerce-order-received ul.woocommerce-order-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--fo-space-3);
    list-style: none;
    margin: 0 0 var(--fo-space-8);
    padding: 0;
}

body.woocommerce-order-received ul.woocommerce-order-overview li {
    float: none !important; /* core: ul.order_details li { float:left } */
    width: auto !important;
    margin: 0 !important;
    padding: var(--fo-space-4) !important;
    border: 1px solid var(--fo-gray-200) !important; /* core mete border-right dashed */
    border-radius: var(--fo-radius-md);
    background: var(--fo-white);
    font-size: var(--fo-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fo-gray-600);
}

body.woocommerce-order-received ul.woocommerce-order-overview li strong {
    display: block;
    margin-top: var(--fo-space-1);
    font-size: var(--fo-text-base);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--fo-navy);
}

body.woocommerce-order-received .woocommerce-order-details__title {
    font-family: var(--fo-font-display);
    color: var(--fo-navy);
    font-size: var(--fo-text-xl);
    margin: 0 0 var(--fo-space-4);
}

body.woocommerce-order-received table.shop_table {
    width: 100%;
    border: 1px solid var(--fo-gray-200) !important; /* core traz rgba própria */
    border-radius: var(--fo-radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--fo-white);
    margin: 0 0 var(--fo-space-10);
}

body.woocommerce-order-received table.shop_table th,
body.woocommerce-order-received table.shop_table td {
    border: none !important;              /* core: border-top em cada célula */
    border-bottom: 1px solid var(--fo-gray-100) !important;
    padding: var(--fo-space-4) var(--fo-space-5) !important;
    text-align: left;
}

body.woocommerce-order-received table.shop_table thead th {
    background: var(--fo-gray-50);
    color: var(--fo-gray-600);
    font-size: var(--fo-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.woocommerce-order-received table.shop_table tfoot tr:last-child th,
body.woocommerce-order-received table.shop_table tfoot tr:last-child td {
    border-bottom: none !important;
    font-size: var(--fo-text-lg);
    color: var(--fo-navy);
    font-weight: 700;
}

body.woocommerce-order-received table.shop_table a {
    color: var(--fo-navy);
    text-decoration: none;
    font-weight: 600;
}

body.woocommerce-order-received table.shop_table a:hover {
    color: var(--fo-red);
}

/* Moradas: grid explícito, floats do core anulados */
body.woocommerce-order-received .woocommerce-columns--addresses,
body.woocommerce-order-received .col2-set.addresses {
    display: grid !important; /* core: floats que colapsavam nos wrappers do GP */
    grid-template-columns: 1fr 1fr;
    gap: var(--fo-space-5);
    width: 100%;
    margin: 0 0 var(--fo-space-8);
}

body.woocommerce-order-received .woocommerce-columns--addresses .woocommerce-column,
body.woocommerce-order-received .col2-set.addresses .col-1,
body.woocommerce-order-received .col2-set.addresses .col-2 {
    float: none !important;   /* core: float left/right 48% */
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-lg);
    padding: var(--fo-space-6);
    box-sizing: border-box;
}

body.woocommerce-order-received .col2-set.addresses::before,
body.woocommerce-order-received .col2-set.addresses::after,
body.woocommerce-order-received .woocommerce-columns--addresses::before,
body.woocommerce-order-received .woocommerce-columns--addresses::after {
    display: none !important; /* clearfix do core viraria célula fantasma do grid */
}

body.woocommerce-order-received .woocommerce-column__title {
    font-family: var(--fo-font-display);
    font-size: var(--fo-text-lg);
    color: var(--fo-navy);
    margin: 0 0 var(--fo-space-3);
}

body.woocommerce-order-received address {
    font-style: normal;
    line-height: 1.8;
    color: var(--fo-gray-700);
}

@media (max-width: 640px) {
    body.woocommerce-order-received .woocommerce-columns--addresses,
    body.woocommerce-order-received .col2-set.addresses {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   5. ACESSIBILIDADE — foco visível ao teclado
   ============================================================================ */

body.woocommerce-checkout a:focus-visible,
body.woocommerce-checkout button:focus-visible,
body.woocommerce-checkout input:focus-visible,
body.woocommerce-checkout select:focus-visible,
body.woocommerce-cart a:focus-visible,
body.woocommerce-cart button:focus-visible,
body.woocommerce-cart input:focus-visible,
body.woocommerce-order-received a:focus-visible {
    outline: 2px solid var(--fo-red) !important; /* core remove o outline */
    outline-offset: 2px;
}

/* Radio focado ao teclado: anel no cartão inteiro */
body.woocommerce-checkout li.wc_payment_method:has(> input.input-radio:focus-visible) {
    outline: 2px solid var(--fo-red);
    outline-offset: 2px;
}

/* ============================================================================
   6. MOBILE (<=480px, testado a 380px)
   ============================================================================ */

@media (max-width: 480px) {
    body.woocommerce-checkout li.wc_payment_method > label {
        min-height: 52px;
        padding-right: var(--fo-space-4);
    }

    body.woocommerce-checkout li.wc_payment_method div.payment_box {
        padding-left: var(--fo-space-4) !important; /* o indent alinhado não cabe */
    }

    body.woocommerce-order-received .woocommerce-thankyou-order-received {
        padding: var(--fo-space-4) var(--fo-space-5);
        font-size: var(--fo-text-lg);
    }

    body.woocommerce-order-received ul.woocommerce-order-overview {
        grid-template-columns: 1fr 1fr;
    }

    body.woocommerce-order-received table.shop_table th,
    body.woocommerce-order-received table.shop_table td {
        padding: var(--fo-space-3) !important;
        font-size: var(--fo-text-sm);
    }
}

/* ============================================================================
   7. TOPO DO CHECKOUT E DO CARRINHO — padrão da "Minha Conta"
   ----------------------------------------------------------------------------
   Replica o hero escuro da conta (banda --fo-ink com gradientes radiais,
   título centrado, subtítulo via ::after) e puxa o conteúdo para cima sobre
   a banda. Os avisos de login/cupão deixam de ser .woocommerce-info azuis do
   core e passam a cartões utilitários discretos do design system.
   ============================================================================ */

/* Wrappers do GeneratePress transparentes (como na conta) */
body.woocommerce-checkout .inside-article,
body.woocommerce-cart .inside-article {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Banda escura de lado a lado */
body.woocommerce-checkout .entry-header,
body.woocommerce-cart .entry-header {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 calc(50% - 50vw) !important;
    background:
        radial-gradient(ellipse 45% 70% at 85% 20%, rgba(230, 57, 70, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 75% at 10% 85%, rgba(55, 182, 255, 0.10) 0%, transparent 65%),
        var(--fo-ink);
    padding: calc(80px + var(--fo-space-12)) var(--fo-space-6) calc(var(--fo-space-12) + 64px);
    text-align: center;
}

body.woocommerce-checkout .entry-header .entry-title,
body.woocommerce-cart .entry-header .entry-title {
    color: var(--fo-ice);
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0;
}

/* Subtítulos (o template GP não tem slot — via ::after, como na conta) */
body.woocommerce-checkout:not(.woocommerce-order-received) .entry-header .entry-title::after {
    content: 'Confirme os seus dados e pague em segurança — MB WAY, Multibanco ou cartão.';
}

body.woocommerce-order-received .entry-header .entry-title::after {
    content: 'A sua encomenda foi registada com sucesso.';
}

body.woocommerce-cart .entry-header .entry-title::after {
    content: 'Reveja os artigos antes de finalizar a compra.';
}

html[lang^="en"] body.woocommerce-checkout:not(.woocommerce-order-received) .entry-header .entry-title::after {
    content: 'Confirm your details and pay securely — MB WAY, Multibanco or card.';
}

html[lang^="en"] body.woocommerce-order-received .entry-header .entry-title::after {
    content: 'Your order has been placed successfully.';
}

html[lang^="en"] body.woocommerce-cart .entry-header .entry-title::after {
    content: 'Review your items before checking out.';
}

body.woocommerce-checkout .entry-header .entry-title::after,
body.woocommerce-cart .entry-header .entry-title::after {
    display: block;
    margin-top: var(--fo-space-4);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-lg);
    font-weight: 400;
    letter-spacing: 0;
    color: rgba(237, 242, 251, 0.65); /* mesmo tom do subtítulo da conta */
}

/* Conteúdo puxado para cima, sobre a banda */
body.woocommerce-checkout .entry-content .woocommerce,
body.woocommerce-cart .entry-content .woocommerce {
    position: relative;
    z-index: 1;
    margin-top: -64px;
}

/* ---- Login e cupão: cartões utilitários lado a lado sobre o hero ----
   O grid apanha os dois toggles; avisos, formulários e o form.checkout
   ocupam a linha inteira. */
body.woocommerce-checkout:not(.woocommerce-order-received) .entry-content .woocommerce {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fo-space-4) var(--fo-space-5);
    align-items: start;
}

body.woocommerce-checkout .entry-content .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-checkout .entry-content .woocommerce > form.woocommerce-form-login,
body.woocommerce-checkout .entry-content .woocommerce > form.checkout_coupon,
body.woocommerce-checkout .entry-content .woocommerce > form.checkout {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    body.woocommerce-checkout:not(.woocommerce-order-received) .entry-content .woocommerce {
        grid-template-columns: 1fr;
    }
}

/* Os avisos dos toggles: cartão branco com borda superior colorida (o padrão
   dos cartões da conta), SEM a barra azul do core */
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    background: var(--fo-white) !important;   /* core: fundo cinzento-azulado */
    border: 1px solid var(--fo-gray-200) !important;
    border-top: 3px solid var(--fo-red) !important; /* core: 3px #1e85be (azul fora dos tokens) */
    border-radius: var(--fo-radius-lg);
    box-shadow: var(--fo-shadow-sm);
    color: var(--fo-gray-700) !important;
    font-size: var(--fo-text-sm);
    padding: var(--fo-space-4) var(--fo-space-5) !important; /* core reserva espaço p/ ícone */
    margin: 0 !important;
}

/* Ícone do core (fonte WooCommerce) fora */
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
    display: none !important; /* core injecta glifo da icon-font com cor azul */
    content: none !important;
}

body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
    color: var(--fo-navy);
    font-weight: 700;
    text-decoration: none;
}

body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a:hover,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a:hover {
    color: var(--fo-red);
}

/* Formulários expandidos (login/cupão): cartão branco coerente */
body.woocommerce-checkout form.woocommerce-form-login,
body.woocommerce-checkout form.checkout_coupon {
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-200) !important; /* core traz borda própria */
    border-radius: var(--fo-radius-lg);
    padding: var(--fo-space-6) !important;
    margin: 0 !important;
}

body.woocommerce-checkout form.checkout_coupon .form-row {
    margin-bottom: 0;
}

body.woocommerce-checkout form.checkout_coupon button {
    background: var(--fo-navy);
    color: var(--fo-white);
    border: none;
    border-radius: var(--fo-radius-md);
    min-height: 48px;
    padding: var(--fo-space-3) var(--fo-space-5);
    font-weight: 700;
    cursor: pointer;
}

body.woocommerce-checkout form.checkout_coupon button:hover {
    background: var(--fo-red);
}

/* Mobile: hero mais curto */
@media (max-width: 480px) {
    body.woocommerce-checkout .entry-header,
    body.woocommerce-cart .entry-header {
        padding: calc(64px + var(--fo-space-8)) var(--fo-space-4) calc(var(--fo-space-8) + 56px);
    }

    body.woocommerce-checkout .entry-content .woocommerce,
    body.woocommerce-cart .entry-content .woocommerce {
        margin-top: -56px;
    }
}

/* O hero encosta ao header fixo: a camada antiga dava padding-top:100px ao
   .site-content destas páginas, criando uma faixa branca entre o header e a
   banda escura (o hero já compensa o header no próprio padding). */
body.woocommerce-checkout .site-content,
body.woocommerce-cart .site-content {
    padding-top: 0;
}

/* O offset do header fixo vive em camadas antigas no #primary (80px de
   margin + 80px de padding = 160px de faixa branca). O hero já compensa o
   header no próprio padding — zerar aqui. !important porque as camadas
   antigas do style.css também usam !important nesse offset. */
body.woocommerce-checkout #primary.content-area,
body.woocommerce-cart #primary.content-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
}