/* ============================================================
   WCB Checkout — Premium Layout
   Alinha /finalizar-compra/ ao design system do tema.
   Carregado via wp_head priority 1 (antes de style.css),
   por isso usamos body.woocommerce-checkout para ganhar
   especificidade sobre as regras !important de style.css.
   ============================================================ */

/* ── Nível de página ────────────────────────────────────── */

/* Oculta h1 genérico do page.php no checkout */
body.woocommerce-checkout .wcb-page-title {
    display: none !important;
}

/* Remove margin/padding do article wrapper gerado pelo page.php */
body.woocommerce-checkout .wcb-page-content {
    padding-top: 0;
    margin-top: 0;
}

/* ── Progress steps ─────────────────────────────────────── */
body.woocommerce-checkout .wcb-checkout-progress {
    margin-bottom: var(--wcb-space-lg, 1.25rem);
}

body.woocommerce-checkout .wcb-checkout-progress__steps {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

body.woocommerce-checkout .wcb-checkout-step {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wcb-gray-500, #6b7280);
}

body.woocommerce-checkout .wcb-checkout-step__link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    text-decoration: none;
    color: inherit;
}

body.woocommerce-checkout .wcb-checkout-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    border: 2px solid currentColor;
    flex-shrink: 0;
}

body.woocommerce-checkout .wcb-checkout-step--done {
    color: var(--wcb-blue, #155dfd);
}

body.woocommerce-checkout .wcb-checkout-step--done .wcb-checkout-step__num {
    background: var(--wcb-blue, #155dfd);
    color: #fff !important;
    border-color: var(--wcb-blue, #155dfd);
}

body.woocommerce-checkout .wcb-checkout-step--active {
    color: var(--wcb-gray-900, #111827);
    font-weight: 700;
}

body.woocommerce-checkout .wcb-checkout-step--active .wcb-checkout-step__num {
    background: var(--wcb-gray-900, #111827);
    color: #fff !important;
    border-color: var(--wcb-gray-900, #111827);
}

body.woocommerce-checkout .wcb-checkout-step--next {
    color: var(--wcb-gray-400, #9ca3af);
}

body.woocommerce-checkout .wcb-checkout-step--next .wcb-checkout-step__num {
    border-color: var(--wcb-gray-300, #d1d5db);
}

body.woocommerce-checkout .wcb-checkout-step__sep {
    color: var(--wcb-gray-300, #d1d5db);
    font-size: 1rem;
    list-style: none;
    display: block;
}

/* ── Grid principal: dois painéis lado a lado ───────────── */
body.woocommerce-checkout form.wcb-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--wcb-space-2xl, 2rem);
    align-items: start;
    padding-top: 0;
    padding-bottom: calc(var(--wcb-space-2xl, 2rem) * 1.5);
}

@media (max-width: 960px) {
    body.woocommerce-checkout form.wcb-checkout-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Coluna de campos (esquerda) ────────────────────────── */
body.woocommerce-checkout .wcb-checkout-fields {
    display: flex;
    flex-direction: column;
    gap: var(--wcb-space-lg, 1.25rem);
}

/* Cards individuais billing / shipping */
body.woocommerce-checkout .wcb-checkout-fields #customer_details .col-1,
body.woocommerce-checkout .wcb-checkout-fields #customer_details .col-2 {
    background: var(--wcb-white, #fff) !important;
    border: 1px solid var(--wcb-gray-200, #e5e7eb) !important;
    border-radius: var(--wcb-radius-lg, 12px) !important;
    padding: var(--wcb-space-xl, 1.5rem) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Headings das seções */
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-shipping-fields > h3,
body.woocommerce-checkout .woocommerce-additional-fields > h3 {
    margin-top: 0 !important;
    margin-bottom: var(--wcb-space-lg, 1.25rem) !important;
    padding-bottom: var(--wcb-space-sm, 0.5rem) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--wcb-gray-900, #111827) !important;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--wcb-gray-100, #f3f4f6) !important;
}

/* Checkbox "Entregar em endereço diferente" */
body.woocommerce-checkout #ship-to-different-address label {
    font-weight: 600 !important;
    color: var(--wcb-gray-800, #1f2937) !important;
    cursor: pointer;
}

/* ── Resumo do pedido (coluna direita / sidebar) ─────────── */
body.woocommerce-checkout .wcb-checkout-review {
    background: var(--wcb-white, #fff) !important;
    border: 1px solid var(--wcb-gray-200, #e5e7eb) !important;
    border-radius: var(--wcb-radius-lg, 12px) !important;
    padding: var(--wcb-space-xl, 1.5rem) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05), 0 0 0 0 transparent !important;
    position: sticky !important;
    top: calc(var(--wcb-header-h, 72px) + 16px) !important;
    align-self: start;
}

body.woocommerce-checkout .wcb-checkout-review h3#order_review_heading {
    margin-top: 0 !important;
    margin-bottom: var(--wcb-space-md, 1rem) !important;
    padding-bottom: var(--wcb-space-sm, 0.5rem) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--wcb-gray-900, #111827) !important;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--wcb-gray-200, #e5e7eb) !important;
}

/* Tabela de itens */
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.875rem !important;
    margin-bottom: var(--wcb-space-sm, 0.5rem) !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding: 9px 4px !important;
    border-bottom: 1px solid var(--wcb-gray-100, #f3f4f6) !important;
    vertical-align: middle !important;
    text-align: left !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: var(--wcb-gray-400, #9ca3af) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    border-bottom-color: var(--wcb-gray-200, #e5e7eb) !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
    color: var(--wcb-gray-800, #1f2937) !important;
    font-weight: 500 !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
    border-bottom: none !important;
    padding-top: 12px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--wcb-gray-900, #111827) !important;
}

/* ── Seção de pagamento ─────────────────────────────────── */
body.woocommerce-checkout #payment {
    background: var(--wcb-gray-50, #f9fafb) !important;
    border: 1px solid var(--wcb-gray-200, #e5e7eb) !important;
    border-radius: var(--wcb-radius-md, 8px) !important;
    padding: var(--wcb-space-lg, 1.25rem) !important;
    margin-top: var(--wcb-space-lg, 1.25rem) !important;
}

body.woocommerce-checkout #payment ul.payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 var(--wcb-space-md, 1rem) !important;
    border-bottom: 1px solid var(--wcb-gray-200, #e5e7eb) !important;
}

body.woocommerce-checkout #payment ul.payment_methods li {
    padding: 8px 0 !important;
    font-size: 0.9375rem !important;
}

body.woocommerce-checkout #payment div.place-order {
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

/* ── Botão Finalizar Pedido ─────────────────────────────── */
body.woocommerce-checkout #place_order {
    width: 100% !important;
    padding: 15px 24px !important;
    background: var(--wcb-blue, #155dfd) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: var(--wcb-radius-md, 8px) !important;
    cursor: pointer !important;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s !important;
    display: block !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(21, 93, 253, 0.25) !important;
    letter-spacing: 0.01em;
}

body.woocommerce-checkout #place_order:hover {
    background: var(--wcb-blue-hover, #0f48d4) !important;
    box-shadow: 0 4px 16px rgba(21, 93, 253, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* ── Mensagens WooCommerce ──────────────────────────────── */
body.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info {
    border-radius: var(--wcb-radius-md, 8px) !important;
    margin-bottom: var(--wcb-space-lg, 1.25rem) !important;
}

/* ── Responsivo ─────────────────────────────────────────── */
@media (max-width: 960px) {
    body.woocommerce-checkout .wcb-checkout-review {
        position: static !important;
        top: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════
   SIDE CART — correção de layout no checkout
   O plugin omite a CSS inline de largura de .xoo-wsc-img-col
   quando isSideCartPage() é false; sem essa largura a imagem
   expande 100%. Garantimos os constraints aqui porque
   checkout-premium.css é injetado diretamente via wp_head
   priority 1, independente do sistema de dependências.
   ══════════════════════════════════════════════════════════ */

/* Força layout em linha: imagem | info */
body.woocommerce-checkout .xoo-wsc-product {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
}

/* Caixa fixa 90×90 para a miniatura */
body.woocommerce-checkout .xoo-wsc-img-col {
    flex: 0 0 90px !important;
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Imagem contida dentro da caixa */
body.woocommerce-checkout .xoo-wsc-img-col img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Coluna de info ocupa o restante */
body.woocommerce-checkout .xoo-wsc-sum-col,
body.woocommerce-checkout .xoo-wsc-sm-front {
    flex: 1 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
}

/* ============================================================
   CartFlows Canvas — Header injection + Progress Bar
   ============================================================ */

.uagb-icon-list__label,
.wcf-checkout-header-progress-bar .step-name,
.wcf-checkout-header-progress-bar span {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

img[src*="white-cloud-brasil-logo"] { width: 150px !important; height: auto !important; }

.wcf-checkout-header-image img {
    max-height: 60px !important;
    min-height: 40px !important;
    width: auto !important;
    object-fit: contain;
}

.wp-block-uagb-icon-list .uagb-icon-list__source-icon svg,
.uagb-icon-list__source-wrap {
    fill: var(--wcb-blue) !important;
    color: var(--wcb-blue) !important;
}
.wp-block-uagb-icon-list .uagb-icon-list__source-icon svg path { fill: var(--wcb-blue) !important; }

.cartflows-canvas .wcb-topbar,
.cartflows-canvas .wcb-header,
.cartflows-canvas .wcb-nav,
.cartflows-canvas .wcb-mobile-menu,
.cartflows-canvas .wcb-mobile-overlay {
    position: static !important; top: auto !important; left: auto !important;
    transform: none !important; visibility: visible !important;
    opacity: 1 !important; display: revert !important; z-index: auto !important;
}
body.cartflows-canvas                  { overflow-x: hidden; }
.cartflows-canvas .wcb-topbar          { display: flex  !important; }
.cartflows-canvas .wcb-header          { display: block !important; }
.cartflows-canvas .wcb-nav             { display: block !important; }
.cartflows-canvas .wcf-checkout-header { margin-top: 0  !important; }
.cartflows-canvas .wcb-mobile-menu     { display: none !important; transform: translateX(-100%) !important; }
.cartflows-canvas .wcb-mobile-overlay  { display: none !important; }

/* ============================================================
   Logos de Pagamento Seguro (above submit button)
   ============================================================ */
.wcb-payment-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px 0 10px;
    border-top: 1px solid var(--wcb-gray-200, #e5e7eb);
}
.wcb-payment-logos__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--wcb-gray-500, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.wcb-payment-logos__label::before { content: "🔒"; font-size: 12px; }
.wcb-payment-logos__icons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.wcb-pay-icon {
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    transition: transform 0.15s;
}
.wcb-pay-icon:hover { transform: translateY(-1px); }