/* --- ESTILOS TIENDA - Carrito, cuenta y finalizar compra --- */

.flm-woo {
    --flm-woo-borde: color-mix(in srgb, var(--c-crema) 88%, var(--c-negro));
    --flm-woo-texto: color-mix(in srgb, var(--c-azul) 80%, var(--c-blanco));
    --flm-woo-campo: color-mix(in srgb, var(--c-crema) 25%, var(--c-blanco));

    .e-my-account-tab {
        & > .woocommerce {
            display: flex !important;
            align-items: stretch;
            justify-content: space-between;
            gap: 30px;

            &::before, &::after {
                display: none;
            }
        }
    }

    .woocommerce {
        font-family: var(--f-general);
        color: var(--c-negro);
        font-size: 15px;
        line-height: 1.6;

        a {
            color: var(--c-rojo);
            text-decoration: none;
            transition: color .2s;

            &:hover {
                color: var(--c-rojo-oscuro);
            }
        }

        /* ---------- Tarjetas ---------- */
        .e-cart__column,
        .e-checkout__order_review,
        .woocommerce-checkout-payment,
        .e-checkout__column:first-child,
        .e-coupon-box,
        form.woocommerce-form-login,
        form.woocommerce-form-register,
        form.lost_reset_password,
        .woocommerce-MyAccount-navigation,
        .woocommerce-MyAccount-content {
            background-color: var(--c-blanco) !important;
            border: 1px solid var(--flm-woo-borde) !important;
            border-radius: 24px !important;
            padding: 32px !important;
            box-shadow: 0 20px 60px -30px color-mix(in srgb, var(--c-negro) 60%, transparent) !important;

            @media (max-width: 767px) {
                padding: 20px !important;
                border-radius: 20px !important;
            }
        }

        .e-cart-section,
        #customer-details .col-1,
        #customer-details .woocommerce-additional-fields {
            padding: 0 !important;
            border: none !important;
        }

        .woocommerce-additional-fields:empty {
            display: none;
        }

        /* ---------- Maquetación ---------- */
        /* Finalizar compra: formulario y resumen a ancho completo */
        #customer_details,
        #order_review,
        .col2-set .col-1,
        .col2-set .col-2 {
            width: 100% !important;
            float: none !important;
            max-width: none !important;
        }

        #customer_details.col2-set {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        /* Mi cuenta: Acceder / Registrarse en dos columnas */
        .u-columns.col2-set {
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            gap: 32px;

            &::before,
            &::after {
                display: none !important;
            }

            .u-column1,
            .u-column2 {
                width: 100% !important;
                float: none !important;
            }

            @media (max-width: 1024px) {
                grid-template-columns: 1fr;
            }
        }

        form.woocommerce-form-login,
        form.woocommerce-form-register {
            margin: 0 !important;
        }

        /* ---------- Títulos ---------- */
        h2,
        h3,
        .e-checkout-secondary-title,
        legend {
            color: var(--c-azul) !important;
            font-weight: 400;
            letter-spacing: -0.2px;
        }

        .cart_totals h2,
        #order_review_heading,
        .woocommerce-billing-fields h3,
        .woocommerce-additional-fields h3 {
            font-size: 24px !important;
            line-height: 1.25;
            margin: 0 0 20px !important;
            text-align: left !important;
        }

        /* Títulos sobre el fondo oscuro (Mi cuenta: Acceder / Registrarse) */
        .u-columns>div>h2,
        >h2 {
            color: var(--c-blanco) !important;
            font-size: 30px !important;
            margin-bottom: 20px !important;
        }

        /* ---------- Formularios ---------- */
        label {
            color: var(--c-azul) !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            margin-bottom: 6px !important;

            .required {
                color: var(--c-rojo);
            }
        }

        input.input-text,
        input[type=text],
        input[type=email],
        input[type=tel],
        input[type=password],
        input[type=number],
        textarea,
        select,
        .select2-container .select2-selection--single {
            min-height: 48px;
            padding: 12px 16px !important;
            border: 1px solid var(--flm-woo-borde) !important;
            border-radius: 12px !important;
            background-color: var(--flm-woo-campo) !important;
            color: var(--c-azul) !important;
            font-size: 15px !important;
            box-shadow: none !important;
            transition: border-color .2s, box-shadow .2s;
        }

        .select2-container .select2-selection--single {
            .select2-selection__rendered {
                color: var(--c-azul) !important;
                line-height: 22px !important;
                padding: 0 !important;
            }

            .select2-selection__arrow {
                top: 50% !important;
                transform: translateY(-50%);
                right: 10px !important;
            }
        }

        input::placeholder,
        textarea::placeholder {
            color: color-mix(in srgb, var(--c-azul) 45%, transparent);
        }

        input:focus,
        textarea:focus,
        select:focus {
            outline: none !important;
            border-color: var(--c-rojo) !important;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-rojo) 15%, transparent) !important;
        }

        input[type=checkbox],
        input[type=radio] {
            accent-color: var(--c-rojo);
        }

        /* ---------- Botones (como .btn-primario) ---------- */
        .button,
        button.button,
        a.button,
        input.button,
        #place_order,
        .checkout-button,
        .woocommerce-form-login__submit,
        .woocommerce-form-register__submit,
        .woocommerce-Button {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            gap: 12px;
            min-height: 48px;
            padding: 12px 24px !important;
            border: 0 !important;
            border-radius: 200px !important;
            background-color: var(--c-rojo) !important;
            background-image: linear-gradient(132deg, var(--c-rojo) 0%, var(--c-rojo-oscuro) 100%) !important;
            color: var(--c-blanco) !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            line-height: 20px;
            text-decoration: none !important;
            cursor: pointer;
            transition: transform .2s, box-shadow .2s, opacity .2s;

            &:hover {
                color: var(--c-blanco);
                transform: translateY(-2px);
                box-shadow: 0 0 20px color-mix(in srgb, var(--c-rojo) 25%, transparent) !important;
            }

            &:disabled,
            &[disabled],
            &.disabled {
                opacity: .45 !important;
                transform: none !important;
                box-shadow: none !important;
                cursor: not-allowed;
            }
        }

        #place_order,
        .checkout-button {
            width: 100%;
            min-height: 52px;
            font-size: 15px !important;
        }

        /* Botones secundarios */
        button[name=update_cart],
        button[name=apply_coupon] {
            background-image: none !important;
            background-color: transparent !important;
            color: var(--c-azul) !important;
            border: 1px solid color-mix(in srgb, var(--c-azul) 25%, transparent) !important;

            &:hover {
                border-color: var(--c-azul) !important;
                color: var(--c-azul) !important;
                box-shadow: none !important;
            }
        }

        /* "Volver a la tienda" queda sobre el fondo oscuro */
        .return-to-shop .button {
            background-image: none !important;
            background-color: color-mix(in srgb, var(--c-blanco) 5%, transparent) !important;
            color: var(--c-blanco) !important;
            border: 1px solid color-mix(in srgb, var(--c-blanco) 20%, transparent) !important;
        }

        /* ---------- Tablas (carrito, totales, pedido) ---------- */
        table.shop_table {
            border: 0 !important;
            border-collapse: collapse;
            width: 100%;
            background: transparent !important;
            margin: 0;

            th {
                color: var(--flm-woo-texto) !important;
                font-size: 12px !important;
                font-weight: 400 !important;
                letter-spacing: 1.2px;
                text-transform: uppercase;
                border: 0 !important;
                border-bottom: 1px solid var(--flm-woo-borde) !important;
                padding: 12px 8px !important;
                background: transparent !important;
            }

            td {
                color: var(--c-azul) !important;
                border: 0 !important;
                border-bottom: 1px solid var(--flm-woo-borde) !important;
                padding: 16px 8px !important;
                background: transparent !important;
                vertical-align: middle;
            }

            tr:last-child td,
            tfoot tr:last-child th {
                border-bottom: 0 !important;
            }

            td.product-name a,
            .product-name {
                color: var(--c-azul) !important;
                font-weight: 500;
            }

            td.product-name a:hover {
                color: var(--c-rojo) !important;
            }

            .product-thumbnail {
                display: none;
            }
        }

        a.remove {
            color: var(--c-rojo) !important;
            border-radius: 999px;
            background: color-mix(in srgb, var(--c-rojo) 10%, transparent) !important;
            width: 28px;
            height: 28px;
            line-height: 26px;
            text-align: center;
            font-size: 18px;

            &:hover {
                color: var(--c-blanco) !important;
                background: var(--c-rojo) !important;
            }
        }

        .order-total {

            th,
            td,
            .amount {
                color: var(--c-azul) !important;
                font-size: 18px !important;
                font-weight: 600 !important;
            }
        }

        .woocommerce-Price-amount {
            color: inherit;
        }

        small.includes_tax,
        .tax_label {
            color: color-mix(in srgb, var(--c-azul) 55%, transparent) !important;
            font-size: 12px;
        }

        /* ---------- Selector de cantidad ---------- */
        .quantity {
            display: inline-flex !important;
            align-items: center;
            gap: 0;
            border: 1px solid var(--flm-woo-borde);
            border-radius: 999px;
            background: var(--flm-woo-campo);
            overflow: hidden;

            .minus,
            .plus {
                display: inline-flex !important;
                align-items: center;
                justify-content: center;
                width: 36px;
                height: 44px;
                border: 0 !important;
                background: transparent !important;
                color: var(--c-azul) !important;
                font-size: 16px;
                line-height: 1;
                text-decoration: none !important;

                &:hover {
                    color: var(--c-rojo) !important;
                }
            }

            .qty {
                width: 44px !important;
                min-height: 44px;
                padding: 0 !important;
                border: 0 !important;
                border-radius: 0 !important;
                background: transparent !important;
                text-align: center;
                -moz-appearance: textfield;

                &::-webkit-outer-spin-button,
                &::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }

                &:focus {
                    box-shadow: none !important;
                }
            }

            &:focus-within {
                border-color: var(--c-rojo);
                box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-rojo) 15%, transparent);
            }
        }

        /* ---------- Pago ---------- */
        #payment {
            padding: 32px !important;

            @media (max-width: 767px) {
                padding: 20px !important;
            }

            ul.payment_methods {
                border: 0 !important;
                padding: 0 !important;
                margin: 0 0 20px !important;
                display: flex;
                flex-direction: column;
                gap: 10px;
                list-style: none;

                li {
                    padding: 14px 16px !important;
                    border: 1px solid var(--flm-woo-borde);
                    border-radius: 12px;
                    background: var(--flm-woo-campo) !important;
                    color: var(--c-azul);

                    label {
                        margin: 0 !important;
                    }
                }
            }

            div.payment_box {
                background: var(--c-crema) !important;
                color: var(--flm-woo-texto) !important;
                border-radius: 12px !important;
                margin-top: 12px !important;
                font-size: 14px;

                &::before {
                    display: none !important;
                }
            }

            .place-order {
                padding: 0 !important;
                margin: 0 !important;
            }
        }

        .woocommerce-privacy-policy-text,
        .woocommerce-terms-and-conditions-wrapper {
            font-size: 13px;
            color: color-mix(in srgb, var(--c-azul) 70%, var(--c-blanco));
        }

        .lost_password a,
        .woocommerce-LostPassword a,
        .woocommerce-privacy-policy-text a {
            color: var(--c-rojo) !important;
        }

        .woocommerce-privacy-policy-text {
            margin-bottom: 20px;
        }

        /* ---------- Avisos ---------- */
        .woocommerce-message,
        .woocommerce-info,
        .woocommerce-error,
        .woocommerce-notice,
        .cart-empty {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            margin: 0 0 24px !important;
            padding: 16px 20px !important;
            border: 1px solid var(--c-crema) !important;
            border-left: 3px solid var(--c-rojo) !important;
            border-radius: 16px !important;
            background: color-mix(in srgb, var(--c-blanco) 6%, transparent) !important;
            color: var(--c-negro) !important;
            font-size: 15px;
            list-style: none;

            &::before, &::after {
                display: none !important;
            }
        }

        /* Avisos dentro de una tarjeta blanca */
        .e-woocommerce-login-section,
        .e-cart-section,
        .e-checkout__order_review,
        #payment {
            .woocommerce-info {
                background: color-mix(in srgb, var(--c-crema) 50%, var(--c-blanco)) !important;
                color: var(--c-azul) !important;
                border-color: var(--flm-woo-borde) !important;
                border-left-color: var(--c-rojo) !important;
            }
        }

        /* ---------- Mi cuenta (usuario conectado) ---------- */
        .woocommerce-MyAccount-navigation {
            padding: 16px !important;

            ul {
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                gap: 4px;

                li {
                    border: 0 !important;
                    padding: 0 !important;

                    a {
                        display: block;
                        padding: 12px 16px;
                        border-radius: 12px;
                        color: var(--c-blanco);
                        font-size: 15px;
                        transition: background-color .2s, color .2s;

                        &:hover {
                            background: color-mix(in srgb, var(--c-crema) 50%, var(--c-blanco));
                            color: var(--c-rojo);
                        }
                    }

                    &.is-active a {
                        background: var(--c-azul);
                        color: var(--c-blanco) !important;
                    }
                }
            }
        }

        .woocommerce-MyAccount-content {
            p,
            address {
                color: var(--flm-woo-texto);
            }

            mark {
                background: color-mix(in srgb, var(--c-rojo) 10%, transparent);
                color: var(--c-rojo);
                padding: 0 4px;
                border-radius: 4px;
            }

            a {
                color: var(--c-rojo);

                &:hover {
                    color: var(--c-azul);
                }
            }
        }

        .lost_password a,
        .woocommerce-LostPassword a {
            font-size: 14px;
        }

        .woocommerce-form-login__rememberme {
            display: inline-flex !important;
            align-items: center;
            gap: 8px;
            margin: 0 16px 0 0 !important;
            font-weight: 400 !important;
        }

        .woocommerce-password-strength {
            border-radius: 8px;
            font-size: 13px;
        }
    }
}

@media screen and (max-width: 768px) {
    .flm-woo {
        .e-my-account-tab {
            & > .woocommerce {
                flex-direction: column;
                gap: 20px;
            }
        }
    }

    .elementor-widget-woocommerce-cart .woocommerce table.cart tr {
        padding: 0 !important;
    }
}