/* =========================================================
   CHRONOS EXPERIENCE
   SUMMARY.CSS
   CHRONOS FANTASY
   STEAMPUNK / ALQUIMIA
   ========================================================= */


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

.cf-summary-wrapper {

    width: calc(100% - 40px);
    max-width: 1500px;

    margin: 50px auto;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            rgba(12,9,7,.48),
            rgba(30,19,10,.38),
            rgba(9,7,6,.52)
        );

    border:
        1px solid rgba(190,145,55,.38);

    border-radius:
        18px;

    box-shadow:

        0 20px 55px
        rgba(0,0,0,.48),

        0 0 25px
        rgba(180,130,40,.06),

        inset 0 1px 0
        rgba(255,220,140,.10),

        inset 0 0 45px
        rgba(0,0,0,.18);

    backdrop-filter:
        blur(2px);

    -webkit-backdrop-filter:
        blur(2px);

    overflow:
        hidden;

    position:
        relative;

}


/* =========================================================
   BRILLO INTERNO
   ========================================================= */

.cf-summary-wrapper::before {

    content: "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(214,170,70,.07),
            transparent 40%
        ),

        radial-gradient(
            circle at 0% 50%,
            rgba(135,76,25,.05),
            transparent 35%
        ),

        radial-gradient(
            circle at 100% 100%,
            rgba(135,76,25,.04),
            transparent 35%
        );

    z-index:
        0;

}


/* =========================================================
   CONTENIDO
   ========================================================= */

.cf-summary-wrapper > * {

    position:
        relative;

    z-index:
        1;

}


/* =========================================================
   FILA SUPERIOR — 3 COLUMNAS
   ========================================================= */

.cf-summary-top {

    display:
        grid !important;

    grid-template-columns:

        minmax(0, 1fr)
        minmax(0, 1.25fr)
        minmax(0, 1fr) !important;

    width:
        100%;

}


/* =========================================================
   COLUMNA — RESERVA
   ========================================================= */

.cf-summary-reservation {

    min-width:
        0;

    padding:
        30px;

    box-sizing:
        border-box;

    border-right:
        1px solid
        rgba(190,145,55,.20);

}


/* =========================================================
   COLUMNA — EXPERIENCIA
   ========================================================= */

.cf-summary-experience {

    min-width:
        0;

    padding:
        30px;

    box-sizing:
        border-right-box;

    border-right:
        1px solid
        rgba(190,145,55,.20);

}


/* =========================================================
   COLUMNA — TOTALES
   ========================================================= */

.cf-summary-totals {

    min-width:
        0;

    padding:
        30px;

    box-sizing:
        border-box;

}


/* =========================================================
   TARJETAS INTERNAS
   ========================================================= */

.cf-card {

    width:
        100%;

    box-sizing:
        border-box;

    background:
        transparent !important;

    border:
        none !important;

    border-radius:
        0;

    box-shadow:
        none !important;

    padding:
        0;

}


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

.cf-card h2 {

    margin:
        0 0 22px;

    color:
        #d6ad55 !important;

    text-align:
        center;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        25px !important;

    font-weight:
        700 !important;

    line-height:
        1.2;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

    text-shadow:

        0 1px 1px #000,

        0 2px 4px
        rgba(0,0,0,.75);

}


/* =========================================================
   LÍNEA DECORATIVA
   ========================================================= */

.cf-card h2::after {

    content:
        "";

    display:
        block;

    width:
        75px;

    height:
        2px;

    margin:
        9px auto 0;

    background:

        linear-gradient(
            90deg,
            transparent,
            #896126,
            #d7b35d,
            #896126,
            transparent
        );

    box-shadow:

        0 0 5px
        rgba(214,173,85,.18);

}


/* =========================================================
   DATOS RESERVA
   ========================================================= */

#cf-reservation-data {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

}


#cf-reservation-data p {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        12px;

    padding:
        10px 0;

    margin:
        0;

    border-bottom:
        1px solid
        rgba(190,145,55,.12);

    color:
        #e6dfd2;

    font-size:
        15px;

    line-height:
        1.45;

}


#cf-reservation-data p:last-child {

    border-bottom:
        none;

}


#cf-reservation-data strong {

    color:
        #d8b566;

    font-weight:
        700;

}


/* =========================================================
   PRODUCTOS
   ========================================================= */

#cf-cart {

    max-height:
        400px;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    padding-right:
        7px;

    box-sizing:
        border-box;

    scrollbar-width:
        thin;

    scrollbar-color:

        rgba(195,150,58,.72)

        rgba(0,0,0,.16);

}


#cf-cart::-webkit-scrollbar {

    width:
        5px;

}


#cf-cart::-webkit-scrollbar-track {

    background:
        rgba(0,0,0,.16);

    border-radius:
        5px;

}


#cf-cart::-webkit-scrollbar-thumb {

    background:

        linear-gradient(
            180deg,
            #76521d,
            #c79b3d,
            #76521d
        );

    border-radius:
        5px;

}


#cf-cart::-webkit-scrollbar-thumb:hover {

    background:

        linear-gradient(
            180deg,
            #a97d2c,
            #e0bd68,
            #a97d2c
        );

}


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

.cf-product {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        11px;

    margin-bottom:
        8px;

    box-sizing:
        border-box;

    background:

        linear-gradient(
            135deg,
            rgba(35,23,13,.56),
            rgba(10,8,6,.68)
        );

    border:
        1px solid
        rgba(188,143,54,.28);

    border-radius:
        9px;

    box-shadow:

        inset 0 1px 0
        rgba(255,220,140,.04),

        0 5px 14px
        rgba(0,0,0,.22);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

}


.cf-product:last-child {

    margin-bottom:
        0;

}


.cf-product:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(218,176,83,.55);

    box-shadow:

        0 7px 18px
        rgba(0,0,0,.30),

        0 0 10px
        rgba(190,145,55,.07);

}


/* =========================================================
   IMAGEN
   ========================================================= */

.cf-product-image {

    width:
        62px;

    height:
        62px;

    flex-shrink:
        0;

    overflow:
        hidden;

    border-radius:
        8px;

    border:
        1px solid
        rgba(190,145,55,.42);

    background:
        rgba(7,5,4,.70);

}


.cf-product-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

}


/* =========================================================
   INFO PRODUCTO
   ========================================================= */

.cf-product-info {

    flex:
        1;

    min-width:
        0;

}


.cf-product-title {

    color:
        #d9b566 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .3px;

    margin-bottom:
        5px;

    line-height:
        1.25;

    text-shadow:
        0 1px 2px #000;

}


.cf-product-meta {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        10px;

    color:
        #d5cdbd;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        12px;

}


.cf-product-qty {

    color:
        #bca477;

}


.cf-product-price {

    color:
        #e5c979;

    font-weight:
        700;

}


/* =========================================================
   TOTALES
   ========================================================= */

.cf-cart-totals {

    margin:
        0;

    padding:
        20px;

    box-sizing:
        border-box;

    background:

        linear-gradient(
            135deg,
            rgba(36,23,13,.40),
            rgba(12,9,7,.52)
        );

    border:
        1px solid
        rgba(188,143,54,.25);

    border-radius:
        11px;

    box-shadow:

        inset 0 1px 0
        rgba(255,220,140,.04),

        inset 0 0 20px
        rgba(0,0,0,.18);

}


.cf-cart-title {

    margin:
        0 0 18px;

    text-align:
        center;

    color:
        #d9b566;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        17px;

    font-weight:
        700;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;

}


.cf-total-row {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        15px;

    padding:
        10px 0;

    color:
        #ddd5c5;

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size:
        13px;

}


.cf-total-row strong {

    color:
        #eee4cd;

}


.cf-grand-total {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        14px;

    padding-top:
        14px;

    border-top:
        1px solid
        rgba(190,145,55,.25);

}


.cf-grand-total span {

    color:
        #d9b566;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        18px;

    font-weight:
        700;

}


.cf-grand-total strong {

    color:
        #e5c979;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        22px;

    font-weight:
        700;

}


/* =========================================================
   ANTES DE CONTINUAR
   ========================================================= */

.cf-summary-terms {

    width:
        100%;

    padding:
        25px 30px 28px;

    box-sizing:
        border-box;

    border-top:
        1px solid
        rgba(190,145,55,.20);

}


/* =========================================================
   CONTENEDOR CONDICIONES
   ========================================================= */

.cf-reservation-terms {

    width:
        100%;

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        20px 22px;

    background:

        linear-gradient(
            135deg,
            rgba(35,23,13,.40),
            rgba(12,9,7,.54)
        );

    border:
        1px solid
        rgba(188,143,54,.27);

    border-radius:
        11px;

    box-shadow:

        inset 0 1px 0
        rgba(255,220,140,.04),

        inset 0 0 20px
        rgba(0,0,0,.18);

}


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

.cf-reservation-terms-title {

    display:
        block;

    width:
        100%;

    margin:
        0 0 16px;

    color:
        #d9b566 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        17px !important;

    font-weight:
        700 !important;

    line-height:
        1.3;

    text-align:
        center !important;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

    text-shadow:
        0 1px 2px #000;

}


/* =========================================================
   CONDICIONES — DOS ELEMENTOS LADO A LADO
   ========================================================= */

.cf-terms-columns {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:
        12px;

}


/* =========================================================
   CONDICIÓN
   ========================================================= */

.cf-terms-checkbox {

    display:
        flex !important;

    align-items:
        center !important;

    width:
        100%;

    box-sizing:
        border-box;

    position:
        relative;

    margin:
        0;

    padding:
        12px 14px;

    background:

        linear-gradient(
            135deg,
            rgba(45,29,17,.38),
            rgba(14,10,8,.58)
        );

    border:
        1px solid
        rgba(188,143,54,.17);

    border-radius:
        8px;

    cursor:
        pointer;

    text-align:
        left !important;

    transition:

        border-color .25s ease,

        background .25s ease,

        box-shadow .25s ease;

}


.cf-terms-checkbox:hover {

    border-color:
        rgba(211,169,76,.48);

    background:

        linear-gradient(
            135deg,
            rgba(52,34,20,.46),
            rgba(19,13,9,.65)
        );

}


/* =========================================================
   CHECKBOX OCULTO
   ========================================================= */

.cf-terms-checkbox input[type="checkbox"] {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    opacity:
        0;

    pointer-events:
        none;

}


/* =========================================================
   CHECKBOX
   ========================================================= */

.cf-custom-checkbox {

    display:
        inline-block;

    flex:
        0 0 21px;

    width:
        21px;

    height:
        21px;

    margin:
        0 12px 0 0;

    box-sizing:
        border-box;

    border:
        2px solid
        #98702d;

    border-radius:
        4px;

    background:
        #100b08;

    position:
        relative;

    box-shadow:
        inset 0 0 7px
        rgba(0,0,0,.70);

}


/* =========================================================
   CHECK ACTIVADO
   ========================================================= */

.cf-terms-checkbox
input[type="checkbox"]:checked
~ .cf-custom-checkbox {

    background:

        linear-gradient(
            135deg,
            #e4bd5e,
            #a87420
        );

    border-color:
        #f1d889;

    box-shadow:

        0 0 7px
        rgba(235,191,79,.60),

        0 0 15px
        rgba(220,164,43,.22),

        inset 0 0 5px
        rgba(255,255,255,.35);

}


/* =========================================================
   CHECK
   ========================================================= */

.cf-terms-checkbox
input[type="checkbox"]:checked
~ .cf-custom-checkbox::after {

    content:
        "";

    position:
        absolute;

    left:
        5px;

    top:
        2px;

    width:
        6px;

    height:
        10px;

    border-right:
        2px solid
        #241508;

    border-bottom:
        2px solid
        #241508;

    transform:
        rotate(45deg);

}


/* =========================================================
   TEXTO
   ========================================================= */

.cf-terms-text {

    display:
        block;

    flex:
        1;

    margin:
        0;

    color:
        #ded6c7 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        18px !important;

    font-weight:
        400 !important;

    line-height:
        1.5;

    text-align:
        left !important;

}


.cf-terms-text strong {

    color:
        #dfbb68 !important;

    font-weight:
        700 !important;

}


/* =========================================================
   LINK
   ========================================================= */

.cf-terms-link {

    display:
        inline-block;

    margin-left:
        5px;

    color:
        #d5aa52 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight:
        700 !important;

    text-decoration:
        none !important;

    border-bottom:
        1px solid
        rgba(213,170,82,.35);

}


.cf-terms-link:hover {

    color:
        #f0cf78 !important;

    border-bottom-color:
        rgba(240,207,120,.70);

}


/* =========================================================
   ERROR
   ========================================================= */

.cf-terms-error {

    display:
        none;

    width:
        100%;

    box-sizing:
        border-box;

    margin-top:
        12px;

    padding:
        9px 12px;

    color:
        #ffb3b3 !important;

    background:
        rgba(110,15,15,.22);

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

    border-radius:
        7px;

    font-size:
        13px !important;

    line-height:
        1.4;

    text-align:
        center;

}


.cf-terms-error.is-visible {

    display:
        block;

}


.cf-terms-checkbox.cf-term-error {

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

    box-shadow:
        0 0 10px
        rgba(255,50,50,.10);

}


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

.cf-summary-actions {

    width:
        100%;

    padding:
        0 30px 30px;

    box-sizing:
        border-box;

}


/* =========================================================
   BOTÓN CONTINUAR
   ========================================================= */

#cf-checkout-btn {

    width:
        100%;

    min-height:
        58px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        16px 28px;

    border:
        1px solid
        #c59a42;

    border-radius:
        9px;

    cursor:
        pointer;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        16px !important;

    font-weight:
        700 !important;

    letter-spacing:
        1px;

    color:
        #281708 !important;

    text-transform:
        uppercase;

    line-height:
        1;

    box-sizing:
        border-box;

    background:

        linear-gradient(
            180deg,
            #e4c36d 0%,
            #c99a3d 48%,
            #9f6d1d 100%
        );

    box-shadow:

        0 5px 14px
        rgba(0,0,0,.32),

        0 0 12px
        rgba(205,160,57,.12),

        inset 0 1px 0
        rgba(255,255,255,.42),

        inset 0 -2px 0
        rgba(76,45,9,.28);

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        filter .25s ease;

}


#cf-checkout-btn:hover {

    color:
        #241406 !important;

    transform:
        translateY(-2px);

    filter:
        brightness(1.06);

    box-shadow:

        0 8px 19px
        rgba(0,0,0,.38),

        0 0 20px
        rgba(212,175,55,.22),

        inset 0 1px 0
        rgba(255,255,255,.52);

}


#cf-checkout-btn:active {

    transform:
        translateY(0);

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .cf-summary-top {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

    }


    .cf-summary-totals {

        grid-column:
            1 / -1;

        border-top:
            1px solid
            rgba(190,145,55,.20);

    }


    .cf-summary-experience {

        border-right:
            none;

    }

}


/* =========================================================
   TABLET PEQUEÑO
   ========================================================= */

@media (max-width: 768px) {

    .cf-summary-wrapper {

        width:
            calc(100% - 20px);

        margin:
            25px auto;

        border-radius:
            15px;

    }


    .cf-summary-top {

        grid-template-columns:
            1fr !important;

    }


    .cf-summary-reservation,
    .cf-summary-experience,
    .cf-summary-totals {

        padding:
            22px;

        border-right:
            none;

        border-bottom:
            1px solid
            rgba(190,145,55,.20);

    }


    .cf-summary-totals {

        border-bottom:
            none;

    }


    .cf-summary-terms {

        padding:
            20px 22px 22px;

    }


    .cf-terms-columns {

        grid-template-columns:
            1fr;

    }


    .cf-card h2 {

        font-size:
            23px !important;

    }


    #cf-reservation-data p {

        font-size:
            13px;

    }


    .cf-product-image {

        width:
            68px;

        height:
            68px;

    }


    #cf-checkout-btn {

        min-height:
            55px;

        font-size:
            15px !important;

    }

}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 480px) {

    .cf-summary-wrapper {

        width:
            calc(100% - 14px);

    }


    .cf-summary-reservation,
    .cf-summary-experience,
    .cf-summary-totals {

        padding:
            18px;

    }


    .cf-summary-terms {

        padding:
            18px;

    }


    .cf-summary-actions {

        padding:
            0 18px 18px;

    }


    .cf-card h2 {

        font-size:
            21px !important;

    }


    .cf-product-image {

        width:
            60px;

        height:
            60px;

    }


    .cf-product-title {

        font-size:
            13px !important;

    }

}