/* =====================================================
   SHOPZI COOKIE CONSENT
===================================================== */

.sz-cookie-consent,
.sz-cookie-consent *{
    box-sizing:border-box;
}

.sz-cookie-banner{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    z-index:5000;

    padding:
        12px
        12px
        calc(
            76px +
            env(safe-area-inset-bottom)
        );

    pointer-events:none;

}

.sz-cookie-banner-inner{

    width:min(
        1120px,
        100%
    );

    margin:0 auto;

    background:#111;
    color:#fff;

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

    border-radius:18px;

    box-shadow:
        0 14px 45px rgba(0,0,0,.26);

    padding:16px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    pointer-events:auto;

}

.sz-cookie-copy{
    max-width:690px;
}

.sz-cookie-title{

    font-size:16px;

    font-weight:900;

}

.sz-cookie-copy p{

    margin:
        6px 0 5px;

    color:#d0d0d0;

    font-size:14px;

    line-height:1.55;

}

.sz-cookie-copy a{

    color:#ff9a3d;

    font-size:14px;

    font-weight:900;

    text-decoration:none;

}

.sz-cookie-actions{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(120px,1fr));

    gap:8px;

    flex:0 0 auto;

}

.sz-cookie-btn{

    min-height:40px;

    border-radius:11px;

    border:
        1px solid transparent;

    padding:
        0 13px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:14px;

    font-weight:900;

    cursor:pointer;

}

.sz-cookie-btn-primary{

    background:#ff7a00;

    color:#fff;

}

.sz-cookie-btn-secondary{

    background:#fff;

    color:#111;

}

.sz-cookie-btn-ghost{

    background:transparent;

    color:#fff;

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

}

.sz-cookie-actions .sz-cookie-btn-ghost{
    grid-column:1 / -1;
}


/* =====================================================
   BACKDROP
===================================================== */

.sz-cookie-backdrop{

    position:fixed;

    inset:0;

    z-index:5090;

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

    backdrop-filter:
        blur(3px);

}


/* =====================================================
   MODAL
===================================================== */

.sz-cookie-modal{

    position:fixed;

    inset:0;

    z-index:5100;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:16px;

}

.sz-cookie-modal-card{

    width:min(
        560px,
        100%
    );

    max-height:
        min(
            720px,
            calc(100vh - 30px)
        );

    overflow:auto;

    background:#fff;

    color:#171717;

    border-radius:20px;

    border:
        1px solid #eeeeee;

    box-shadow:
        0 22px 60px rgba(0,0,0,.24);

    padding:18px;

}

.sz-cookie-modal-head{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:12px;

    margin-bottom:13px;

}

.sz-cookie-modal-title{

    font-size:17px;

    font-weight:900;

}

.sz-cookie-modal-subtitle{

    margin-top:4px;

    color:#777;

    font-size:14px;

    line-height:1.5;

}

.sz-cookie-close{

    width:35px;

    height:35px;

    flex:0 0 35px;

    border:none;

    border-radius:10px;

    background:#f3f3f3;

    color:#111;

    font-size:22px;

    line-height:1;

    cursor:pointer;

}

.sz-cookie-category{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    padding:
        13px 2px;

    border-top:
        1px solid #eeeeee;

}

.sz-cookie-category-copy{

    min-width:0;

}

.sz-cookie-category-copy strong{

    display:block;

    font-size:14px;

    font-weight:900;

}

.sz-cookie-category-copy span{

    display:block;

    margin-top:4px;

    color:#666;

    font-size:14px;

    line-height:1.45;

}

.sz-cookie-required{

    flex:0 0 auto;

    border-radius:999px;

    padding:
        5px 8px;

    background:#eaf8ef;

    color:#166534;

    font-size:14px;

    font-weight:900;

}


/* =====================================================
   TOGGLE
===================================================== */

.sz-cookie-switch{

    position:relative;

    width:44px;

    height:25px;

    flex:0 0 44px;

}

.sz-cookie-switch input{

    position:absolute;

    opacity:0;

    width:1px;

    height:1px;

}

.sz-cookie-slider{

    position:absolute;

    inset:0;

    background:#d5d5d5;

    border-radius:999px;

    cursor:pointer;

    transition:
        .18s ease;

}

.sz-cookie-slider::after{

    content:"";

    position:absolute;

    width:19px;

    height:19px;

    left:3px;

    top:3px;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 1px 4px rgba(0,0,0,.18);

    transition:
        .18s ease;

}

.sz-cookie-switch input:checked +
.sz-cookie-slider{

    background:#ff7a00;

}

.sz-cookie-switch input:checked +
.sz-cookie-slider::after{

    transform:
        translateX(19px);

}

.sz-cookie-switch input:focus-visible +
.sz-cookie-slider{

    outline:
        2px solid #111;

    outline-offset:2px;

}


/* =====================================================
   MODAL ACTIONS
===================================================== */

.sz-cookie-modal-actions{

    margin-top:12px;

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:8px;

}

.sz-cookie-modal-actions
.sz-cookie-btn-ghost{

    background:#f5f5f5;

    color:#111;

    border-color:#e7e7e7;

}

.sz-cookie-modal-actions
#szSavePreferences{

    grid-column:1 / -1;

}

.sz-cookie-policy-link{

    margin-top:12px;

    text-align:center;

    color:#777;

    font-size:14px;

    line-height:1.45;

}

.sz-cookie-policy-link a{

    color:#ff7a00;

    font-weight:900;

    text-decoration:none;

}


/* =====================================================
   PERSISTENT SETTINGS BUTTON
===================================================== */

.sz-cookie-settings-button{

    position:fixed;

    left:12px;

    bottom:
        calc(
            72px +
            env(safe-area-inset-bottom)
        );

    z-index:4900;

    min-height:34px;

    border:
        1px solid #e8e8e8;

    border-radius:999px;

    background:#fff;

    color:#333;

    box-shadow:
        0 4px 16px rgba(0,0,0,.10);

    padding:
        0 10px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:14px;

    font-weight:900;

    cursor:pointer;

}

.sz-cookie-settings-button:hover{
    color:#ff7a00;
}


/* =====================================================
   UTILITIES
===================================================== */

.sz-cookie-consent [hidden]{
    display:none !important;
}

body.sz-cookie-modal-open{
    overflow:hidden;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:760px){

    .sz-cookie-banner-inner{

        align-items:stretch;

        flex-direction:column;

    }

    .sz-cookie-actions{

        width:100%;

    }

}

@media(max-width:390px){

    .sz-cookie-actions{

        grid-template-columns:1fr;

    }

    .sz-cookie-actions
    .sz-cookie-btn-ghost{

        grid-column:auto;

    }

    .sz-cookie-modal-actions{

        grid-template-columns:1fr;

    }

    .sz-cookie-modal-actions
    #szSavePreferences{

        grid-column:auto;

    }

}