/* =========================================================
   BONYEL SHOP — CHECKOUT
   Este CSS pertenece ÚNICAMENTE al checkout normal del Shop.
========================================================= */


/* =========================================================
   BASE
========================================================= */

body.edd-checkout:not(.bonyel-beats-checkout) {
    margin: 0;
    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(255,255,255,.035),
            transparent 38%
        ),
        #050505 !important;

    color: #fff;
}


/* Fondo transparente del tema */

body.edd-checkout:not(.bonyel-beats-checkout) #page,
body.edd-checkout:not(.bonyel-beats-checkout) .site,
body.edd-checkout:not(.bonyel-beats-checkout) .site-content,
body.edd-checkout:not(.bonyel-beats-checkout) .content-area,
body.edd-checkout:not(.bonyel-beats-checkout) main {
    background: transparent !important;
}


/* =========================================================
   OCULTAR HEADER / FOOTER ANTIGUOS
========================================================= */

body.edd-checkout:not(.bonyel-beats-checkout) .site-header,
body.edd-checkout:not(.bonyel-beats-checkout) #masthead,
body.edd-checkout:not(.bonyel-beats-checkout) header.site-header,
body.edd-checkout:not(.bonyel-beats-checkout) .site-footer,
body.edd-checkout:not(.bonyel-beats-checkout) #colophon,
body.edd-checkout:not(.bonyel-beats-checkout) footer.site-footer,
body.edd-checkout:not(.bonyel-beats-checkout) .header_holder,
body.edd-checkout:not(.bonyel-beats-checkout) #footer_background {
    display: none !important;
}


/* =========================================================
   HEADER BONYEL
========================================================= */

body.edd-checkout:not(.bonyel-beats-checkout)
.bonyel-checkout-header {

    width: calc(100% - 80px);
    max-width: 1440px;
    height: 86px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    position: relative;
    z-index: 100;
}


body.edd-checkout:not(.bonyel-beats-checkout)
.bonyel-checkout-brand {

    display: flex;
    align-items: center;

    gap: 12px;

    color: #fff !important;
    text-decoration: none !important;
}


body.edd-checkout:not(.bonyel-beats-checkout)
.bonyel-checkout-brand img {

    width: 34px;
    height: 34px;

    display: block;
    object-fit: contain;
}


body.edd-checkout:not(.bonyel-beats-checkout)
.bonyel-checkout-brand span {

    color: #fff;

    font-size: 17px;
    font-weight: 600;

    letter-spacing: .35em;

    line-height: 1;
}


body.edd-checkout:not(.bonyel-beats-checkout)
.bonyel-checkout-back {

    color: rgba(255,255,255,.48) !important;

    text-decoration: none !important;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .14em;

    transition:
        color .2s ease,
        transform .2s ease;
}


body.edd-checkout:not(.bonyel-beats-checkout)
.bonyel-checkout-back:hover {

    color: #fff !important;

    transform: translateX(-3px);
}


/* =========================================================
   CONTENEDOR PRINCIPAL
========================================================= */

body.edd-checkout:not(.bonyel-beats-checkout)
.site-content {

    width: calc(100% - 48px);

    max-width: 1120px;

    margin: 0 auto;

    padding:
        65px
        0
        110px;
}


/*
 * Fallback para el tema BONYEL standalone.
 */

body.edd-checkout:not(.bonyel-beats-checkout)
.bonyel-main {

    width: calc(100% - 48px);

    max-width: 1120px;

    margin:
        0
        auto;

    padding:
        65px
        0
        110px;
}


body.edd-checkout:not(.bonyel-beats-checkout)
.bonyel-entry-content {

    width: 100%;

    max-width: 1120px;

    margin:
        0
        auto;
}


/* Evitar doble ancho si bonyel-main contiene entry-content */

body.edd-checkout:not(.bonyel-beats-checkout)
.bonyel-main
.bonyel-entry-content {

    max-width: none;
}


/* =========================================================
   TÍTULO
========================================================= */

body.edd-checkout:not(.bonyel-beats-checkout)
h1 {

    margin:
        0
        0
        34px;

    color: #fff !important;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: clamp(
        38px,
        5vw,
        58px
    );

    line-height: 1;

    font-weight: 800;

    letter-spacing: -.055em;
}


body.edd-checkout:not(.bonyel-beats-checkout)
h2,

body.edd-checkout:not(.bonyel-beats-checkout)
h3,

body.edd-checkout:not(.bonyel-beats-checkout)
legend {

    color: #fff !important;
}


/* =========================================================
   VOLVER A LA TIENDA
========================================================= */

body.edd-checkout:not(.bonyel-beats-checkout)
.bonyel-checkout-nav {

    width: 100%;

    margin:
        0
        0
        22px;
}


body.edd-checkout:not(.bonyel-beats-checkout)
.bonyel-checkout-nav a {

    display: inline-flex;
    align-items: center;

    gap: 8px;

    color:
        rgba(255,255,255,.45) !important;

    text-decoration: none !important;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;

    transition:
        color .2s ease,
        transform .2s ease;
}


body.edd-checkout:not(.bonyel-beats-checkout)
.bonyel-checkout-nav a:hover {

    color: #fff !important;

    transform:
        translateX(-3px);
}


/* =========================================================
   CARRITO
========================================================= */

body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_cart {

    width: 100%;

    margin:
        0
        0
        42px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.085);

    border-radius: 18px;

    overflow: hidden;

    color: #fff;

    box-shadow:
        0 20px 70px rgba(0,0,0,.18);
}


body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_cart th {

    padding:
        18px
        22px;

    background:
        rgba(255,255,255,.035);

    color:
        rgba(255,255,255,.42);

    border: 0;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;
}


body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_cart td {

    padding:
        22px;

    background: transparent;

    color: #fff;

    border-color:
        rgba(255,255,255,.07);
}


body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_cart a {

    color: #fff;

    text-decoration: none;

    font-weight: 600;
}


body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_cart
.edd_cart_total {

    color: #fff;

    font-weight: 700;
}


/* =========================================================
   ELIMINAR PRODUCTO
========================================================= */

body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_cart
.edd_cart_remove_item_btn,

body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_cart
.edd-remove-from-cart {

    color: #fff !important;

    opacity: .45 !important;

    transition:
        opacity .2s ease,
        transform .2s ease;
}


body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_cart
.edd_cart_remove_item_btn:hover,

body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_cart
.edd-remove-from-cart:hover {

    opacity: 1 !important;

    transform: scale(1.08);
}


body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_cart svg {

    fill: #fff !important;

    stroke: #fff !important;
}


/* EDD Blocks */

body.edd-checkout:not(.bonyel-beats-checkout)
.edd-blocks-cart__action-remove {

    background-image: none !important;

    position: relative !important;

    width: 18px !important;
    height: 18px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    opacity: .45 !important;

    font-size: 0 !important;
}


body.edd-checkout:not(.bonyel-beats-checkout)
.edd-blocks-cart__action-remove::before {

    content: "×";

    color: #fff !important;

    font-family: Arial, sans-serif;

    font-size: 20px !important;

    font-weight: 300;

    line-height: 1;
}


body.edd-checkout:not(.bonyel-beats-checkout)
.edd-blocks-cart__action-remove:hover {

    opacity: 1 !important;
}


/* =========================================================
   FORMULARIO
========================================================= */

body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_form_wrap {

    width: 100%;
}


body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_form_wrap fieldset {

    margin:
        0
        0
        22px;

    padding:
        30px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.085);

    border-radius: 18px;

    box-shadow:
        0 20px 70px rgba(0,0,0,.12);
}


body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_form_wrap legend {

    padding:
        0
        10px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}


body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_form_wrap label {

    color:
        rgba(255,255,255,.7);

    font-size: 12px;

    font-weight: 600;
}


body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_form_wrap input[type="text"],

body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_form_wrap input[type="email"],

body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_form_wrap input[type="password"],

body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_form_wrap select {

    width: 100%;

    min-height: 48px;

    margin-top: 7px;

    padding:
        0
        15px;

    background:
        rgba(255,255,255,.045);

    border:
        1px solid rgba(255,255,255,.11);

    border-radius: 10px;

    color: #fff;

    outline: none;

    box-shadow: none;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_form_wrap input:focus,

body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_form_wrap select:focus {

    background:
        rgba(255,255,255,.065);

    border-color:
        rgba(255,255,255,.35);

    box-shadow:
        0
        0
        0
        3px
        rgba(255,255,255,.025);
}


body.edd-checkout:not(.bonyel-beats-checkout)
#edd_checkout_form_wrap
.edd-description {

    color:
        rgba(255,255,255,.32);

    font-size: 10px;
}


/* No necesitamos apellido */

body.edd-checkout:not(.bonyel-beats-checkout)
#edd-last-name-wrap {

    display: none !important;
}


/* =========================================================
   BOTÓN FINAL
========================================================= */

body.edd-checkout:not(.bonyel-beats-checkout)
#edd_purchase_submit {

    margin-top: 26px !important;
}


body.edd-checkout:not(.bonyel-beats-checkout)
#edd-purchase-button,

body.edd-checkout:not(.bonyel-beats-checkout)
.edd-submit,

body.edd-checkout:not(.bonyel-beats-checkout)
button[type="submit"] {

    min-width: 235px !important;

    min-height: 54px !important;

    padding:
        16px
        30px !important;

    background:
        #ffffff !important;

    color:
        #080808 !important;

    border:
        1px solid #fff !important;

    border-radius:
        100px !important;

    font-size:
        12px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .07em !important;

    text-transform:
        uppercase;

    cursor:
        pointer;

    box-shadow:
        0
        8px
        30px
        rgba(255,255,255,.07) !important;

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


body.edd-checkout:not(.bonyel-beats-checkout)
#edd-purchase-button:hover,

body.edd-checkout:not(.bonyel-beats-checkout)
.edd-submit:hover,

body.edd-checkout:not(.bonyel-beats-checkout)
button[type="submit"]:hover {

    background:
        #f2f2f2 !important;

    transform:
        translateY(-2px);

    box-shadow:
        0
        12px
        38px
        rgba(255,255,255,.13) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    body.edd-checkout:not(.bonyel-beats-checkout)
    .bonyel-checkout-header {

        width:
            calc(100% - 36px);

        height: 74px;

        margin:
            0
            18px;
    }


    body.edd-checkout:not(.bonyel-beats-checkout)
    .bonyel-checkout-brand img {

        width: 29px;
        height: 29px;
    }


    body.edd-checkout:not(.bonyel-beats-checkout)
    .bonyel-checkout-brand span {

        font-size: 14px;

        letter-spacing: .27em;
    }


    body.edd-checkout:not(.bonyel-beats-checkout)
    .bonyel-checkout-back {

        font-size: 8px;

        letter-spacing: .08em;
    }


    body.edd-checkout:not(.bonyel-beats-checkout)
    .site-content,

    body.edd-checkout:not(.bonyel-beats-checkout)
    .bonyel-main {

        width:
            calc(100% - 32px);

        padding:
            42px
            0
            70px;
    }


    body.edd-checkout:not(.bonyel-beats-checkout)
    h1 {

        font-size: 38px;

        margin-bottom: 28px;
    }


    body.edd-checkout:not(.bonyel-beats-checkout)
    #edd_checkout_cart {

        border-radius: 14px;

        margin-bottom: 32px;
    }


    body.edd-checkout:not(.bonyel-beats-checkout)
    #edd_checkout_cart th,

    body.edd-checkout:not(.bonyel-beats-checkout)
    #edd_checkout_cart td {

        padding:
            15px
            13px;
    }


    body.edd-checkout:not(.bonyel-beats-checkout)
    #edd_checkout_form_wrap fieldset {

        padding:
            23px
            18px;

        border-radius:
            14px;
    }


    body.edd-checkout:not(.bonyel-beats-checkout)
    #edd-purchase-button,

    body.edd-checkout:not(.bonyel-beats-checkout)
    .edd-submit,

    body.edd-checkout:not(.bonyel-beats-checkout)
    button[type="submit"] {

        width:
            100% !important;

        min-width:
            0 !important;
    }

}