/* ===================== */
/* SWEETALERT2 WESTERN   */
/* ===================== */

.swal2-popup{
    background: linear-gradient(to bottom, rgba(255,250,244,0.97), rgba(228,203,171,0.92)) !important;
    color: #4a2411 !important;
    border-radius: calc(30px * var(--scale)) !important;
    border: 1px solid rgba(98,58,28,0.28) !important;
    box-shadow:
        0 calc(2px * var(--scale)) 0 rgba(255,255,255,0.55) inset,
        0 calc(-2px * var(--scale)) 0 rgba(120,70,30,0.10) inset,
        0 calc(6px * var(--scale)) 0 rgba(120,70,30,0.22),
        0 calc(12px * var(--scale)) calc(22px * var(--scale)) rgba(0,0,0,0.22) !important;
    padding: calc(1.4em * var(--scale)) calc(1.2em * var(--scale)) calc(1.2em * var(--scale)) calc(1.2em * var(--scale)) !important;
    font-size: clamp(
        calc(18px * var(--scale)),
        calc(4vw * var(--scale)),
        calc(30px * var(--scale))
    ) !important;
}

.swal2-title{
    font-family: "titres" !important;
    color: #4a2411 !important;
    font-size: clamp(
        calc(42px * var(--scale)),
        calc(7vw * var(--scale)),
        calc(72px * var(--scale))
    ) !important;
    line-height: 1.05 !important;
    text-transform: capitalize;
    margin-bottom: calc(0.35em * var(--scale)) !important;
    text-shadow: 0 calc(1px * var(--scale)) calc(4px * var(--scale)) rgba(90,45,20,0.12);
}

.swal2-html-container{
    font-family: "texte" !important;
    color: #4a2411 !important;
    font-size: clamp(
        calc(18px * var(--scale)),
        calc(4vw * var(--scale)),
        calc(30px * var(--scale))
    ) !important;
    line-height: 1.4 !important;
}

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny{
    border-radius: calc(25px * var(--scale)) !important;
    padding: calc(0.9em * var(--scale)) calc(1.3em * var(--scale)) !important;
    font-family: "texte" !important;
    font-size: clamp(
        calc(18px * var(--scale)),
        calc(4vw * var(--scale)),
        calc(26px * var(--scale))
    ) !important;
    box-shadow:
        0 calc(2px * var(--scale)) 0 rgba(255,255,255,0.18) inset,
        0 calc(-2px * var(--scale)) 0 rgba(0,0,0,0.12) inset,
        0 calc(5px * var(--scale)) 0 rgba(59,40,28,0.95),
        0 calc(10px * var(--scale)) calc(16px * var(--scale)) rgba(0,0,0,0.24) !important;
    transition: all .2s ease-in-out !important;
}

.swal2-styled.swal2-confirm{
    background: linear-gradient(to bottom, #8b6b4e, #5a3f2c) !important;
    color: #fff8ef !important;
    border: 1px solid #3d2a1d !important;
}

.swal2-styled.swal2-cancel{
    background: linear-gradient(to bottom, #a08a73, #6f5a49) !important;
    color: #fff8ef !important;
    border: 1px solid #58473a !important;
}

.swal2-styled.swal2-deny{
    background: linear-gradient(to bottom, #9a5a47, #6e3527) !important;
    color: #fff8ef !important;
    border: 1px solid #57281d !important;
}

.swal2-styled.swal2-confirm:hover,
.swal2-styled.swal2-cancel:hover,
.swal2-styled.swal2-deny:hover{
    transform: translateY(calc(2px * var(--scale))) !important;
    box-shadow:
        0 calc(1px * var(--scale)) 0 rgba(255,255,255,0.14) inset,
        0 calc(-2px * var(--scale)) 0 rgba(0,0,0,0.18) inset,
        0 calc(2px * var(--scale)) 0 #24170f,
        0 calc(8px * var(--scale)) calc(14px * var(--scale)) rgba(0,0,0,0.22) !important;
}

.swal2-icon{
    border-color: #7b4a24 !important;
    color: #7b4a24 !important;
}

.swal2-success-ring{
    border-color: rgba(123,74,36,0.25) !important;
}

.swal2-timer-progress-bar{
    background: linear-gradient(to right, #8b6b4e, #5a3f2c) !important;
}

@media (max-width:700px){

    .swal2-popup{
        border-radius: calc(24px * var(--scale)) !important;
        padding: calc(1.15em * var(--scale)) calc(1em * var(--scale)) !important;
    }

    .swal2-title{
        line-height: 1.08 !important;
    }

    .swal2-html-container{
        line-height: 1.45 !important;
    }

    .swal2-styled.swal2-confirm,
    .swal2-styled.swal2-cancel,
    .swal2-styled.swal2-deny{
        width: 100%;
        max-width: 100%;
    }

}