/*
|--------------------------------------------------------------------------
| ShopCore Main Store Footer
|--------------------------------------------------------------------------
*/

:root{
    --sc-footer-orange:#ff5a00;
    --sc-footer-orange-dark:#e95000;
    --sc-footer-orange-soft:#fff4ee;
    --sc-footer-white:#ffffff;

    --sc-footer-text:#17233b;
    --sc-footer-soft:#64748b;
    --sc-footer-muted:#94a3b8;

    --sc-footer-border:#e7edf4;
    --sc-footer-surface:#f8fafc;

    --sc-footer-container:1180px;
}

/*
|--------------------------------------------------------------------------
| Base
|--------------------------------------------------------------------------
*/

.sc-footer{
    width:100%;
    flex:0 0 auto;
    margin-top:auto;
    font-family:inherit;
}

.sc-mobile-bottom-nav{
    display:none;
}

/*
|--------------------------------------------------------------------------
| Desktop Footer
|--------------------------------------------------------------------------
*/

.sc-footer-desktop{
    width:100%;
    background:var(--sc-footer-surface);
    border-top:1px solid var(--sc-footer-border);
}

.sc-footer-container{
    width:min(calc(100% - 56px),var(--sc-footer-container));
    margin:0 auto;
}

/*
|--------------------------------------------------------------------------
| Main Footer Grid
|--------------------------------------------------------------------------
*/

.sc-footer-main{
    display:grid;
    grid-template-columns:
        minmax(280px,1.45fr)
        minmax(140px,.65fr)
        minmax(250px,1fr);
    align-items:start;
    gap:64px;
    padding:50px 0 40px;
}

/*
|--------------------------------------------------------------------------
| Brand
|--------------------------------------------------------------------------
*/

.sc-footer-brand{
    min-width:0;
}

.sc-footer-logo-link{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    text-decoration:none;
}

.sc-footer-logo{
    display:block;
    width:170px;
    height:auto;
    max-width:100%;
    object-fit:contain;
    object-position:left center;
}

.sc-footer-description{
    width:100%;
    max-width:450px;
    margin:17px 0 0;
    color:var(--sc-footer-soft);
    font-size:14px;
    font-weight:500;
    line-height:1.75;
}

/*
|--------------------------------------------------------------------------
| Footer Columns
|--------------------------------------------------------------------------
*/

.sc-footer-column{
    min-width:0;
}

.sc-footer-title{
    margin:0 0 19px;
    color:var(--sc-footer-text);
    font-size:14px;
    font-weight:800;
    line-height:1.25;
    letter-spacing:-.1px;
}

.sc-footer-links{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:13px;
}

.sc-footer-links a{
    display:inline-flex;
    align-items:center;
    color:var(--sc-footer-soft);
    font-size:13px;
    font-weight:600;
    line-height:1.4;
    text-decoration:none;
    transition:
        color .18s ease,
        transform .18s ease;
}

.sc-footer-links a:hover{
    color:var(--sc-footer-orange);
    transform:translateX(2px);
}

/*
|--------------------------------------------------------------------------
| Support
|--------------------------------------------------------------------------
*/

.sc-footer-support-list{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.sc-footer-support-item{
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--sc-footer-text);
    text-decoration:none;
}

.sc-footer-support-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:var(--sc-footer-orange-soft);
    color:var(--sc-footer-orange);
    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.sc-footer-support-icon svg{
    display:block;
    width:19px;
    height:19px;
    fill:currentColor;
}

.sc-footer-support-item > span:last-child{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.sc-footer-support-item strong{
    display:block;
    overflow:hidden;
    color:var(--sc-footer-text);
    font-size:13px;
    font-weight:750;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
    transition:color .18s ease;
}

.sc-footer-support-item small{
    display:block;
    overflow:hidden;
    color:var(--sc-footer-soft);
    font-size:11.5px;
    font-weight:500;
    line-height:1.35;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.sc-footer-support-item:hover strong{
    color:var(--sc-footer-orange);
}

.sc-footer-support-item:hover .sc-footer-support-icon{
    background:var(--sc-footer-orange);
    color:var(--sc-footer-white);
    transform:translateY(-1px);
}

/*
|--------------------------------------------------------------------------
| Desktop Legal Links
|--------------------------------------------------------------------------
*/

.sc-footer-legal{
    width:100%;
    min-height:54px;
    padding:14px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    gap:10px;
    border-top:1px solid var(--sc-footer-border);
}

.sc-footer-legal a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    color:var(--sc-footer-soft);
    font-size:12px;
    font-weight:650;
    line-height:1.4;
    text-decoration:none;
    white-space:nowrap;
    transition:color .18s ease;
}

.sc-footer-legal a:hover{
    color:var(--sc-footer-orange);
}

.sc-footer-legal > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    color:var(--sc-footer-muted);
    font-size:8px;
    font-weight:700;
    line-height:1;
}

/*
|--------------------------------------------------------------------------
| Desktop Footer Bottom
|--------------------------------------------------------------------------
*/

.sc-footer-bottom{
    min-height:68px;
    padding:16px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid var(--sc-footer-border);
}

.sc-footer-bottom p{
    margin:0;
    color:var(--sc-footer-soft);
    font-size:12px;
    font-weight:500;
    line-height:1.5;
}

.sc-footer-powered{
    text-align:right;
}

.sc-footer-powered strong{
    color:var(--sc-footer-orange);
    font-weight:800;
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width:900px) and (min-width:621px){

    .sc-footer-container{
        width:calc(100% - 44px);
    }

    .sc-footer-main{
        grid-template-columns:
            minmax(0,1.2fr)
            minmax(0,.65fr)
            minmax(0,1fr);
        gap:34px;
        padding:42px 0 34px;
    }

    .sc-footer-logo{
        width:155px;
    }

    .sc-footer-description{
        max-width:330px;
        font-size:13px;
        line-height:1.7;
    }

    .sc-footer-title{
        font-size:13.5px;
        margin-bottom:17px;
    }

    .sc-footer-links{
        gap:12px;
    }

    .sc-footer-links a{
        font-size:12.5px;
    }

    .sc-footer-support-item{
        gap:10px;
    }

    .sc-footer-support-icon{
        width:39px;
        height:39px;
        flex-basis:39px;
    }

    .sc-footer-support-icon svg{
        width:18px;
        height:18px;
    }

    .sc-footer-support-item strong{
        font-size:12.5px;
    }

    .sc-footer-support-item small{
        font-size:11px;
    }

    .sc-footer-legal{
        min-height:50px;
        padding:12px 0;
    }

    .sc-footer-legal a{
        font-size:11.5px;
    }

    .sc-footer-bottom{
        min-height:62px;
    }

    .sc-footer-bottom p{
        font-size:11.5px;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width:620px){

    /*
    |--------------------------------------------------------------------------
    | Hide Desktop Footer Completely
    |--------------------------------------------------------------------------
    */

    .sc-footer{
        width:0;
        height:0;
        min-height:0;
        margin:0;
        padding:0;
    }

    .sc-footer-desktop,
    .sc-footer-main,
    .sc-footer-container,
    .sc-footer-legal,
    .sc-footer-bottom{
        display:none !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Mobile Glass Bottom Navigation
    |--------------------------------------------------------------------------
    */

    .sc-mobile-bottom-nav{
        position:fixed;
        z-index:1500;
        left:50%;
        bottom:calc(10px + env(safe-area-inset-bottom));
        width:min(calc(100% - 20px),480px);
        min-height:70px;
        margin:0;
        padding:7px 8px;
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        align-items:center;
        gap:2px;
        overflow:hidden;
        border:1px solid rgba(255,255,255,.76);
        border-radius:22px;
        background:rgba(255,255,255,.78);
        box-shadow:
            0 14px 45px rgba(15,23,42,.16),
            0 2px 8px rgba(15,23,42,.06),
            inset 0 1px 0 rgba(255,255,255,.88);
        transform:translateX(-50%);
        backdrop-filter:blur(24px) saturate(180%);
        -webkit-backdrop-filter:blur(24px) saturate(180%);
    }

    /*
    |--------------------------------------------------------------------------
    | Glass Background
    |--------------------------------------------------------------------------
    */

    .sc-mobile-bottom-nav::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:-1;
        pointer-events:none;
        border-radius:inherit;
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.46) 0%,
                rgba(255,255,255,.12) 46%,
                rgba(255,255,255,.19) 100%
            );
    }

    /*
    |--------------------------------------------------------------------------
    | Mobile Navigation Item
    |--------------------------------------------------------------------------
    */

    .sc-mobile-nav-item{
        position:relative;
        z-index:1;
        min-width:0;
        height:55px;
        margin:0;
        padding:4px 2px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        border:0;
        outline:0;
        border-radius:12px;
        background:transparent !important;
        color:var(--sc-footer-soft);
        text-decoration:none !important;
        box-shadow:none;
        -webkit-tap-highlight-color:transparent;
        transition:
            color .16s ease,
            transform .16s ease,
            opacity .16s ease;
    }

    .sc-mobile-nav-item:hover{
        background:transparent !important;
        color:var(--sc-footer-soft);
        text-decoration:none !important;
    }

    .sc-mobile-nav-item:focus,
    .sc-mobile-nav-item:focus-visible{
        background:transparent !important;
        outline:none;
        text-decoration:none !important;
    }

    .sc-mobile-nav-item:active{
        background:transparent !important;
        transform:scale(.94);
        opacity:.82;
    }

    /*
    |--------------------------------------------------------------------------
    | Active Navigation
    |--------------------------------------------------------------------------
    */

    .sc-mobile-nav-item.is-active{
        background:transparent !important;
        color:var(--sc-footer-orange);
        box-shadow:none;
    }

    .sc-mobile-nav-item.is-active::before,
    .sc-mobile-nav-item.is-active::after{
        display:none !important;
        content:none !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Mobile Icon
    |--------------------------------------------------------------------------
    */

    .sc-mobile-nav-icon{
        width:22px;
        height:22px;
        flex:0 0 22px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        color:inherit;
    }

    .sc-mobile-nav-icon svg{
        display:block;
        width:100%;
        height:100%;
        fill:currentColor;
    }

    /*
    |--------------------------------------------------------------------------
    | Increased Mobile Text
    |--------------------------------------------------------------------------
    */

    .sc-mobile-nav-label{
        display:block;
        width:100%;
        max-width:100%;
        margin:0;
        padding:0;
        overflow:hidden;
        color:inherit;
        font-size:10px;
        font-weight:750;
        line-height:1.1;
        text-align:center;
        text-decoration:none !important;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    /*
    |--------------------------------------------------------------------------
    | Remove Underlines
    |--------------------------------------------------------------------------
    */

    .sc-mobile-nav-item,
    .sc-mobile-nav-item:hover,
    .sc-mobile-nav-item:active,
    .sc-mobile-nav-item:focus,
    .sc-mobile-nav-item.is-active,
    .sc-mobile-nav-item .sc-mobile-nav-label{
        text-decoration:none !important;
    }
}

/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width:420px){

    .sc-mobile-bottom-nav{
        bottom:calc(8px + env(safe-area-inset-bottom));
        width:calc(100% - 16px);
        min-height:68px;
        padding:6px;
        border-radius:20px;
    }

    .sc-mobile-nav-item{
        height:54px;
        gap:5px;
    }

    .sc-mobile-nav-icon{
        width:21px;
        height:21px;
        flex-basis:21px;
    }

    .sc-mobile-nav-label{
        font-size:9.5px;
        font-weight:750;
    }
}

/*
|--------------------------------------------------------------------------
| Very Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width:350px){

    .sc-mobile-bottom-nav{
        width:calc(100% - 12px);
        min-height:64px;
        padding:5px 4px;
        gap:0;
        border-radius:18px;
    }

    .sc-mobile-nav-item{
        height:51px;
        padding-left:1px;
        padding-right:1px;
        gap:4px;
    }

    .sc-mobile-nav-icon{
        width:20px;
        height:20px;
        flex-basis:20px;
    }

    .sc-mobile-nav-label{
        font-size:9px;
        font-weight:750;
    }
}

/*
|--------------------------------------------------------------------------
| iPhone Safe Area
|--------------------------------------------------------------------------
*/

@supports (padding:max(0px)){

    @media (max-width:620px){

        .sc-mobile-bottom-nav{
            bottom:max(
                8px,
                calc(7px + env(safe-area-inset-bottom))
            );
        }
    }
}

/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion:reduce){

    .sc-footer a,
    .sc-footer-support-icon,
    .sc-mobile-nav-item{
        transition:none !important;
    }
}