/* =========================================================
   FUSION GAMES - THANK YOU PAGE DARK V1.0
   Base de Order Received en modo preview
   ========================================================= */

body.fg-dark.woocommerce-order-received {
    background: #0d1015 !important;
}

/* =========================================================
   FUSION GAMES - THANK YOU PAGE DARK V2.0 FINAL
   WooCommerce Order Received + Formidable
========================================================= */


/* =========================================================
   FONDO GENERAL
========================================================= */

body.fg-dark.woocommerce-order-received,
body.fg-dark.woocommerce-order-received #wrapper,
body.fg-dark.woocommerce-order-received #main,
body.fg-dark.woocommerce-order-received .page-wrapper,
body.fg-dark.woocommerce-order-received .woocommerce,
body.fg-dark.woocommerce-order-received .woocommerce-order {

    background: #0d1015 !important;
    background-color: #0d1015 !important;
}


/* =========================================================
   BLOQUE "GRACIAS POR TU COMPRA"
========================================================= */

body.fg-dark.woocommerce-order-received
.fg-thankyou-message {

    background: #17233a !important;

    border: 1px solid rgba(8,127,245,.28) !important;
    border-radius: 12px !important;

    padding: 20px !important;

    box-shadow: none !important;
}

body.fg-dark.woocommerce-order-received
.fg-thankyou-message h1,
body.fg-dark.woocommerce-order-received
.fg-thankyou-message h2,
body.fg-dark.woocommerce-order-received
.fg-thankyou-message h3 {

    color: #ffffff !important;
}

body.fg-dark.woocommerce-order-received
.fg-thankyou-message p {

    color: #b9c3d1 !important;

    line-height: 1.55 !important;
}


/* Fallback para el bloque antiguo con inline background */
body.fg-dark.woocommerce-order-received
.woocommerce-order > .responsive-columns
.responsive-left > div[style*="background-color"] {

    background: #17233a !important;

    border: 1px solid rgba(8,127,245,.28) !important;

    color: #b9c3d1 !important;
}

body.fg-dark.woocommerce-order-received
.woocommerce-order > .responsive-columns
.responsive-left > div[style*="background-color"] h3 {

    color: #ffffff !important;
}


/* =========================================================
   DATOS BANCARIOS
========================================================= */

body.fg-dark.woocommerce-order-received
.fg-bank-details,
body.fg-dark.woocommerce-order-received
.responsive-left {

    color: #f4f6f8 !important;
}

body.fg-dark.woocommerce-order-received
.fg-bank-details h1,
body.fg-dark.woocommerce-order-received
.fg-bank-details h2,
body.fg-dark.woocommerce-order-received
.fg-bank-details h3,
body.fg-dark.woocommerce-order-received
.responsive-left h3 {

    color: #f4f6f8 !important;
}

body.fg-dark.woocommerce-order-received
.fg-bank-details p,
body.fg-dark.woocommerce-order-received
.fg-bank-details li,
body.fg-dark.woocommerce-order-received
.responsive-left li {

    color: #e1e6ed !important;
}

body.fg-dark.woocommerce-order-received
.responsive-left strong {

    color: #ffffff !important;
}


/* =========================================================
   FORMIDABLE - LABEL
========================================================= */

body.fg-dark.woocommerce-order-received
.frm_forms label,
body.fg-dark.woocommerce-order-received
.frm_forms .frm_primary_label,
body.fg-dark.woocommerce-order-received
.frm_forms .frm_section_heading,
body.fg-dark.woocommerce-order-received
.frm_forms .frm_description {

    color: #c9d1dc !important;
}


/* Asterisco requerido */
body.fg-dark.woocommerce-order-received
.frm_forms .frm_required {

    color: #ef4444 !important;
}


/* =========================================================
   FORMIDABLE - UPLOAD
========================================================= */

body.fg-dark.woocommerce-order-received
.frm_forms .dz-message.needsclick {

    min-height: 220px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    background: #151b24 !important;

    border: 1px dashed #3a4554 !important;
    border-radius: 10px !important;

    color: #f4f6f8 !important;

    padding: 28px 20px !important;

    transition:
        border-color .2s ease,
        background-color .2s ease !important;
}

body.fg-dark.woocommerce-order-received
.frm_forms .dz-message.needsclick:hover {

    background: #18202b !important;

    border-color: rgba(8,127,245,.65) !important;
}


/* Icono upload */

body.fg-dark.woocommerce-order-received
.frm_forms .dz-message.needsclick svg,
body.fg-dark.woocommerce-order-received
.frm_forms .dz-message.needsclick .frmsvg {

    color: #7f8b9b !important;
    fill: currentColor !important;
}


/* Texto principal */

body.fg-dark.woocommerce-order-received
.frm_forms .frm_upload_text,
body.fg-dark.woocommerce-order-received
.frm_forms .frm_upload_text button,
body.fg-dark.woocommerce-order-received
.frm_forms .frm_compact_text,
body.fg-dark.woocommerce-order-received
.frm_forms .frm_compact_text button {

    color: #e9edf2 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* Tamaño máximo */

body.fg-dark.woocommerce-order-received
.frm_forms .frm_small_text,
body.fg-dark.woocommerce-order-received
.frm_forms .frm_small_text p {

    color: #7f8997 !important;
}


/* =========================================================
   BOTÓN ENVIAR COMPROBANTE
========================================================= */

body.fg-dark.woocommerce-order-received
.frm_forms .frm_button_submit,
body.fg-dark.woocommerce-order-received
.frm_forms button.frm_final_submit {

    width: 100% !important;

    min-height: 50px !important;

    background: #087ff5 !important;

    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 9px !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    box-shadow: none !important;

    transition:
        background-color .2s ease,
        transform .2s ease !important;
}

body.fg-dark.woocommerce-order-received
.frm_forms .frm_button_submit:hover,
body.fg-dark.woocommerce-order-received
.frm_forms button.frm_final_submit:hover {

    background: #2992ff !important;

    transform: translateY(-1px);
}


/* =========================================================
   TARJETA RESUMEN DEL PEDIDO
========================================================= */

body.fg-dark.woocommerce-order-received
.responsive-right {

    background: #151b24 !important;

    border: 1px solid #2a313c !important;
    border-radius: 11px !important;

    color: #f4f6f8 !important;

    box-shadow: none !important;
}

body.fg-dark.woocommerce-order-received
.responsive-right h1,
body.fg-dark.woocommerce-order-received
.responsive-right h2,
body.fg-dark.woocommerce-order-received
.responsive-right h3,
body.fg-dark.woocommerce-order-received
.responsive-right h4 {

    color: #ffffff !important;
}

body.fg-dark.woocommerce-order-received
.responsive-right p,
body.fg-dark.woocommerce-order-received
.responsive-right li,
body.fg-dark.woocommerce-order-received
.responsive-right span {

    color: #aeb7c4 !important;
}

body.fg-dark.woocommerce-order-received
.responsive-right strong {

    color: #f4f6f8 !important;
}


/* =========================================================
   THANK YOU - MOBILE FINAL COMPACTO
   Reduce la separación entre el formulario y el resumen
   sin alterar el resto del layout.
========================================================= */

@media (max-width: 849px) {

    body.fg-dark.woocommerce-order-received
    .woocommerce-order {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body.fg-dark.woocommerce-order-received
    .fg-thankyou-message {
        padding: 18px !important;
    }

    body.fg-dark.woocommerce-order-received
    .frm_forms .dz-message.needsclick {
        min-height: 190px !important;
        padding: 24px 16px !important;
    }

    body.fg-dark.woocommerce-order-received
    .responsive-columns {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 24px !important;
    }

    body.fg-dark.woocommerce-order-received
    .responsive-left,
    body.fg-dark.woocommerce-order-received
    .responsive-right {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
    }

    body.fg-dark.woocommerce-order-received
    .responsive-left {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body.fg-dark.woocommerce-order-received
    .responsive-left .frm_forms,
    body.fg-dark.woocommerce-order-received
    .responsive-left .frm_forms form {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body.fg-dark.woocommerce-order-received
    .responsive-right {
        margin-top: 0 !important;
    }
}

/* =========================================================
   THANK YOU - UPLOAD CORNERS FIX
========================================================= */

body.fg-dark.woocommerce-order-received
.frm_forms .frm_dropzone,

body.fg-dark.woocommerce-order-received
.frm_forms .frm_dropzone.dz-clickable,

body.fg-dark.woocommerce-order-received
.frm_forms .frm_single_upload {

    background: #151b24 !important;
    background-color: #151b24 !important;

    border-radius: 10px !important;

    box-shadow: none !important;
}


/* El área interior ocupa completamente el contenedor */

body.fg-dark.woocommerce-order-received
.frm_forms .frm_dropzone .dz-message.needsclick {

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    background: #151b24 !important;
    background-color: #151b24 !important;

    border-radius: 10px !important;

    box-sizing: border-box !important;
}

/* =========================================================
   CART - PRODUCT QUANTITY / PRICE CONTRAST
========================================================= */

body.fg-dark.woocommerce-cart
.product-name .product-quantity,
body.fg-dark.woocommerce-cart
.product-name .product-quantity *,
body.fg-dark.woocommerce-cart
.mobile-product-price,
body.fg-dark.woocommerce-cart
.mobile-product-price * {
    color: #9da7b5 !important;
    opacity: 1 !important;
}

/* =========================================================
   CART MOBILE - ESPACIADO ZONA DE ACCIONES
========================================================= */

@media (max-width: 849px) {

    /* Espacio después del botón CONTINUAR AL PAGO */
    body.fg-dark.woocommerce-cart
    .fg-cart-checkout-primary {
        margin-bottom: 18px !important;
    }

    /* Espacio entre beneficios y botón verde de ayuda */
    body.fg-dark.woocommerce-cart
    .fg-cart-trust {
        margin-bottom: 18px !important;
    }

    /* Espacio después del botón verde antes del cupón */
    body.fg-dark.woocommerce-cart
    .fg-cart-whatsapp {
        margin-bottom: 24px !important;
    }
}

/* =========================================================
   CART MOBILE - CUPÓN AJUSTE FINO
========================================================= */

@media (max-width: 849px) {

    body.fg-dark.woocommerce-cart
    .fg-cart-coupon-form,
    body.fg-dark.woocommerce-cart
    .coupon {
        gap: 10px !important;
    }

    body.fg-dark.woocommerce-cart
    .fg-cart-coupon-form button,
    body.fg-dark.woocommerce-cart
    .coupon button {
        font-size: 15px !important;
        font-weight: 700 !important;
    }
}

/* =========================================================
   THANK YOU - BOTÓN COMPROBANTE RESPONSIVE
========================================================= */

/* Desktop */
@media (min-width: 850px) {

    body.fg-dark.woocommerce-order-received
    .frm_forms .frm_button_submit,
    body.fg-dark.woocommerce-order-received
    .frm_forms button.frm_final_submit {

        display: block !important;

        /* Mismo ancho que el formulario / uploader */
        width: 80% !important;
        max-width: none !important;

        /* Alineado a la izquierda */
        margin-left: 0 !important;
        margin-right: 0 !important;

        /* Separación respecto al uploader */
        margin-top: 24px !important;
    }
}

/* Mobile */
@media (max-width: 849px) {

    body.fg-dark.woocommerce-order-received
    .frm_forms .frm_button_submit,
    body.fg-dark.woocommerce-order-received
    .frm_forms button.frm_final_submit {

        width: 100% !important;
    }
}