/* =========================================================
   CHECKOUT FINAL - ORDEM + ESTILO PROFISSIONAL + ANIMAÇÕES
   Ordem desejada:
   ESQUERDA: Your order > tabela > Billing details
   DIREITA:  Payment options > Stripe > Place order
========================================================= */

.woocommerce-checkout {
    --checkout-blue: #2f7da5;
    --checkout-blue-dark: #256987;
    --checkout-border: #d7dde5;
    --checkout-border-focus: #2f7da5;
    --checkout-bg: #ffffff;
    --checkout-soft-bg: #f8fafc;
    --checkout-text: #182334;
    --checkout-muted: #6b7280;
}

/* =========================================================
   OCULTA "SAVE PAYMENT INFORMATION..."
========================================================= */

.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew,
.woocommerce-checkout #wc-stripe-new-payment-method,
.woocommerce-checkout label[for="wc-stripe-new-payment-method"],
.woocommerce-checkout .payment_box.payment_method_stripe fieldset:not(#wc-stripe-upe-form) {
    display: none !important;
}


/* =========================================================
   ORGANIZAÇÃO DESKTOP
========================================================= */

@media (min-width: 1025px) {

    form.woocommerce-checkout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 44px !important;
        row-gap: 28px !important;
        align-items: start !important;
    }

    form.woocommerce-checkout > .woocommerce-content-box.full-width {
        display: contents !important;
    }

    form.woocommerce-checkout #order_review {
        display: contents !important;
    }

    form.woocommerce-checkout > .clearboth,
    form.woocommerce-checkout .clearboth {
        display: none !important;
    }

    /* Your order acima do Billing details */
    form.woocommerce-checkout #order_review_heading {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Tabela do pedido abaixo do título Your order */
    form.woocommerce-checkout .woocommerce-checkout-review-order-table {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 0 0 28px 0 !important;
    }

    /* Billing details abaixo do Your order */
    form.woocommerce-checkout .avada-checkout-no-shipping {
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    form.woocommerce-checkout #customer_details,
    form.woocommerce-checkout #customer_details .col-1 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    form.woocommerce-checkout #customer_details .col-2 {
        display: none !important;
    }

    /* Payment options no lugar onde antes estava Your order */
    form.woocommerce-checkout #payment {
        grid-column: 2 !important;
        grid-row: 1 / span 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: none !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: start !important;
    }
}


/* =========================================================
   ORGANIZAÇÃO MOBILE
========================================================= */

@media (max-width: 1024px) {

    form.woocommerce-checkout {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    form.woocommerce-checkout > .woocommerce-content-box.full-width,
    form.woocommerce-checkout #order_review {
        display: contents !important;
    }

    form.woocommerce-checkout > .clearboth,
    form.woocommerce-checkout .clearboth {
        display: none !important;
    }

    form.woocommerce-checkout #order_review_heading {
        order: 1 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    form.woocommerce-checkout .woocommerce-checkout-review-order-table {
        order: 2 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    form.woocommerce-checkout #payment {
        order: 3 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    form.woocommerce-checkout .avada-checkout-no-shipping {
        order: 4 !important;
        width: 100% !important;
        margin: 0 !important;
    }
}


/* =========================================================
   TÍTULOS
========================================================= */

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #payment li.wc_payment_method > label[for="payment_method_stripe"] {
    display: block !important;
    color: #111827 !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 22px 0 !important;
    padding: 0 0 18px 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
}


/* =========================================================
   CAMPOS PROFISSIONAIS
========================================================= */

.woocommerce-checkout .form-row {
    margin-bottom: 18px !important;
}

.woocommerce-checkout .form-row label {
    display: block !important;
    margin-bottom: 7px !important;
    color: #1f2937 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.woocommerce-checkout .required {
    color: #2f7da5 !important;
    font-weight: 700 !important;
}

.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection--single {
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    background: #ffffff !important;
    border: 1px solid var(--checkout-border) !important;
    border-radius: 12px !important;
    padding: 13px 15px !important;
    color: var(--checkout-text) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease !important;
}

.woocommerce-checkout input.input-text::placeholder,
.woocommerce-checkout textarea::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

.woocommerce-checkout input.input-text:hover,
.woocommerce-checkout textarea:hover,
.woocommerce-checkout select:hover,
.woocommerce-checkout .select2-container .select2-selection--single:hover {
    border-color: #aeb8c5 !important;
}

/* Foco com leve elevação, elegante e sutil */
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--single {
    border-color: var(--checkout-border-focus) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(47, 125, 165, 0.13) !important;
    transform: translateY(-1px) !important;
}


/* =========================================================
   CAMPOS LADO A LADO
========================================================= */

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    width: calc(50% - 10px) !important;
    float: left !important;
    clear: none !important;
}

.woocommerce-checkout .form-row-first {
    margin-right: 20px !important;
}

.woocommerce-checkout .form-row-last {
    margin-right: 0 !important;
}

.woocommerce-checkout .form-row-wide,
.woocommerce-checkout #account_password_field {
    width: 100% !important;
    clear: both !important;
}

.woocommerce-checkout .create-account {
    clear: both !important;
    width: 100% !important;
}


/* =========================================================
   SELECT2 COUNTRY
========================================================= */

.woocommerce-checkout .select2-container {
    width: 100% !important;
}

.woocommerce-checkout .select2-container .select2-selection--single {
    display: flex !important;
    align-items: center !important;
}

.woocommerce-checkout .select2-container .select2-selection__rendered {
    padding-left: 0 !important;
    padding-right: 28px !important;
    color: var(--checkout-text) !important;
    line-height: normal !important;
}

.woocommerce-checkout .select2-container .select2-selection__arrow {
    height: 52px !important;
    right: 12px !important;
}


/* =========================================================
   SENHA
========================================================= */

.woocommerce-checkout .password-input {
    display: block !important;
    position: relative !important;
    width: 100% !important;
}

.woocommerce-checkout .password-input input.input-text {
    padding-right: 52px !important;
}

.woocommerce-checkout .show-password-input {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid #cfd6df !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background 0.18s ease, transform 0.18s ease !important;
}

.woocommerce-checkout .show-password-input:hover {
    background: #eef2f7 !important;
    transform: translateY(-50%) scale(1.06) !important;
}


/* =========================================================
   PAYMENT OPTIONS / STRIPE
========================================================= */

.woocommerce-checkout #payment {
    background: transparent !important;
    border: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
}

.woocommerce-checkout #payment li.wc_payment_method {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.woocommerce-checkout .payment_box.payment_method_stripe {
    background: #ffffff !important;
    border: 1px solid #e1e7ef !important;
    border-radius: 18px !important;
    padding: 24px !important;
    margin: 0 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08) !important;
    animation: checkoutFadeInUp 0.5s ease both !important;
}

.woocommerce-checkout .payment_box.payment_method_stripe fieldset {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-checkout .wc-stripe-upe-element.StripeElement {
    background: #f8fafc !important;
    border: 1px solid #d7dde5 !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    min-height: 58px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.woocommerce-checkout .wc-stripe-upe-element.StripeElement:hover {
    background: #ffffff !important;
    border-color: #aeb8c5 !important;
}

.woocommerce-checkout .wc-stripe-upe-element.StripeElement--focus,
.woocommerce-checkout .wc-stripe-upe-element.StripeElement:focus-within {
    background: #ffffff !important;
    border-color: var(--checkout-border-focus) !important;
    box-shadow: 0 0 0 4px rgba(47, 125, 165, 0.13) !important;
}

.woocommerce-checkout .wc-stripe-upe-element .__PrivateStripeElement {
    width: 100% !important;
    margin: 0 !important;
}

.woocommerce-checkout .wc-stripe-upe-element iframe {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
}


/* =========================================================
   TABELA YOUR ORDER
========================================================= */

.woocommerce-checkout-review-order-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05) !important;
    animation: checkoutFadeInUp 0.5s ease both !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    border: 0 !important;
    padding: 18px 20px !important;
    color: #374151 !important;
    font-size: 15px !important;
}

.woocommerce-checkout-review-order-table thead th {
    background: #f8fafc !important;
    color: #1f2937 !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.woocommerce-checkout-review-order-table tbody td {
    border-bottom: 1px solid #eef2f7 !important;
}

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
    border-top: 1px solid #eef2f7 !important;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    color: #111827 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

.woocommerce-checkout-review-order-table .product-thumbnail img {
    border-radius: 8px !important;
    transition: transform 0.25s ease !important;
}

.woocommerce-checkout-review-order-table tbody tr:hover .product-thumbnail img {
    transform: scale(1.05) !important;
}


/* =========================================================
   BOTÃO PLACE ORDER
   ---------------------------------------------------------
   CORREÇÃO DO TEXTO DUPLICADO:
   O tema injeta um pseudo-elemento (::before/::after) com
   content: attr(value) ou attr(data-value) por cima do texto
   nativo do botão, gerando "Place orderPlace order".
   As duas primeiras regras abaixo ANULAM qualquer conteúdo
   injetado pelo tema. As animações usam SOMENTE elementos
   sem texto (brilho, sombra, escala) — nunca duplicam a
   palavra do botão.
========================================================= */

.woocommerce-checkout #place_order::before,
.woocommerce-checkout #place_order::after,
.woocommerce-checkout .form-row.place-order::before,
.woocommerce-checkout .form-row.place-order::after {
    content: none !important;
    display: none !important;
}

.woocommerce-checkout #payment .form-row.place-order {
    margin-top: 28px !important;
    padding: 0 !important;
}

.woocommerce-checkout #place_order {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    min-height: 56px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--checkout-blue) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 10px 24px rgba(47, 125, 165, 0.22) !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease !important;
    cursor: pointer !important;
}

/* Brilho (shimmer) elegante ao passar o mouse — puramente visual, sem texto */
.woocommerce-checkout #place_order::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: skewX(-20deg) !important;
    transition: left 0.6s ease !important;
    pointer-events: none !important;
}

.woocommerce-checkout #place_order:hover::after {
    left: 130% !important;
}

.woocommerce-checkout #place_order:hover {
    background: var(--checkout-blue-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 30px rgba(47, 125, 165, 0.28) !important;
}

.woocommerce-checkout #place_order:active {
    transform: translateY(0) scale(0.985) !important;
    box-shadow: 0 8px 18px rgba(47, 125, 165, 0.18) !important;
}

.woocommerce-checkout #place_order:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(47, 125, 165, 0.28), 0 10px 24px rgba(47, 125, 165, 0.22) !important;
}

/* Estado de processamento do WooCommerce (adiciona .processing ao form) */
.woocommerce-checkout.processing #place_order,
.woocommerce-checkout blockUI #place_order {
    animation: checkoutPulse 1.1s ease-in-out infinite !important;
}


/* =========================================================
   VALIDAÇÃO
========================================================= */

.woocommerce-checkout .woocommerce-invalid input.input-text,
.woocommerce-checkout .woocommerce-invalid select,
.woocommerce-checkout .woocommerce-invalid .select2-selection {
    border-color: #dc2626 !important;
    background: #fffafa !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08) !important;
    animation: checkoutShake 0.35s ease !important;
}

.woocommerce-checkout .woocommerce-validated input.input-text,
.woocommerce-checkout .woocommerce-validated select,
.woocommerce-checkout .woocommerce-validated .select2-selection {
    border-color: #16a34a !important;
    animation: checkoutValidPulse 0.4s ease !important;
}


/* =========================================================
   ANIMAÇÕES GLOBAIS (KEYFRAMES)
========================================================= */

@keyframes checkoutFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes checkoutPulse {
    0%, 100% {
        box-shadow: 0 10px 24px rgba(47, 125, 165, 0.22);
    }
    50% {
        box-shadow: 0 10px 30px rgba(47, 125, 165, 0.4);
    }
}

@keyframes checkoutShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

@keyframes checkoutValidPulse {
    0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.25); }
    100% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}

/* Título e blocos principais entram suavemente ao carregar a página */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
    animation: checkoutFadeInUp 0.45s ease both !important;
}

.woocommerce-checkout .avada-checkout-no-shipping {
    animation: checkoutFadeInUp 0.55s ease both !important;
}

/* Respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
    .woocommerce-checkout *,
    .woocommerce-checkout *::before,
    .woocommerce-checkout *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   RESPONSIVO DOS CAMPOS
========================================================= */

@media (max-width: 768px) {

    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-right: 0 !important;
    }

    .woocommerce-checkout .payment_box.payment_method_stripe {
        padding: 18px !important;
        border-radius: 15px !important;
    }

    .woocommerce-checkout input.input-text,
    .woocommerce-checkout textarea,
    .woocommerce-checkout select,
    .woocommerce-checkout .select2-container .select2-selection--single {
        min-height: 50px !important;
        height: 50px !important;
        font-size: 15px !important;
    }

    .woocommerce-checkout h3,
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #payment li.wc_payment_method > label[for="payment_method_stripe"] {
        font-size: 24px !important;
    }
}