/*
|--------------------------------------------------------------------------
| ShopCore GH PWA Installer
|--------------------------------------------------------------------------
*/

:root{
    --scpwa-orange:#ff5a00;
    --scpwa-orange-dark:#e95000;
    --scpwa-orange-soft:#fff7f2;
    --scpwa-white:#ffffff;
    --scpwa-dark:#17233b;
    --scpwa-text:#64748b;
    --scpwa-muted:#8b95a5;
    --scpwa-border:#e7ebf0;
}

/*
|--------------------------------------------------------------------------
| Floating Install Prompt
|--------------------------------------------------------------------------
*/

.sc-pwa-launcher{
    position:fixed;
    left:22px;
    bottom:22px;
    z-index:5000;
    width:auto;
    max-width:365px;
    pointer-events:auto;
    animation:scPwaLauncherShow .3s ease-out;
}

.sc-pwa-launcher[hidden]{
    display:none!important;
}

@keyframes scPwaLauncherShow{
    from{
        opacity:0;
        transform:translateY(14px) scale(.98);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/*
|--------------------------------------------------------------------------
| Launcher Card
|--------------------------------------------------------------------------
*/

.sc-pwa-launcher-card{
    position:relative;
    min-height:68px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:9px 42px 9px 9px;

    border:1px solid rgba(255,90,0,.20);
    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 16px 45px rgba(15,23,42,.13),
        0 3px 10px rgba(15,23,42,.05);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

/*
|--------------------------------------------------------------------------
| Launcher App Icon
|--------------------------------------------------------------------------
*/

.sc-pwa-launcher-app-icon{
    width:48px;
    height:48px;
    flex:0 0 48px;

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

    padding:3px;

    overflow:hidden;

    border:1px solid rgba(255,90,0,.16);
    border-radius:13px;

    background:#ffffff;

    box-shadow:
        0 2px 6px rgba(15,23,42,.06),
        inset 0 0 0 1px rgba(255,255,255,.7);
}

.sc-pwa-launcher-app-icon img{
    display:block;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    border:0;
    border-radius:9px;

    background:#ffffff;

    object-fit:contain;
    object-position:center;

    box-shadow:none;
    filter:none;
}

/*
|--------------------------------------------------------------------------
| Launcher Main Button
|--------------------------------------------------------------------------
*/

.sc-pwa-launcher-main{
    appearance:none;
    -webkit-appearance:none;

    min-width:0;
    flex:1 1 auto;

    padding:0;

    border:0;
    outline:0;

    background:transparent;

    display:flex;
    align-items:center;
    gap:12px;

    text-align:left;

    font-family:inherit;

    cursor:pointer;
}

.sc-pwa-launcher-main:focus-visible{
    outline:2px solid rgba(255,90,0,.20);
    outline-offset:4px;
    border-radius:8px;
}

/*
|--------------------------------------------------------------------------
| Launcher Text
|--------------------------------------------------------------------------
*/

.sc-pwa-launcher-copy{
    min-width:0;
    flex:1 1 auto;

    display:flex;
    flex-direction:column;
    gap:4px;
}

.sc-pwa-launcher-copy strong{
    margin:0;
    padding:0;

    color:var(--scpwa-dark);

    font-family:inherit;
    font-size:12px;
    font-weight:800;
    line-height:1.2;

    white-space:nowrap;
}

.sc-pwa-launcher-copy small{
    margin:0;
    padding:0;

    color:var(--scpwa-text);

    font-family:inherit;
    font-size:9.5px;
    font-weight:500;
    line-height:1.35;

    white-space:nowrap;
}

/*
|--------------------------------------------------------------------------
| Download Action
|--------------------------------------------------------------------------
*/

.sc-pwa-launcher-action{
    width:36px;
    height:36px;
    flex:0 0 36px;

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

    border-radius:10px;

    background:var(--scpwa-orange);
    color:var(--scpwa-white);

    box-shadow:0 6px 16px rgba(255,90,0,.18);

    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.sc-pwa-launcher-main:hover .sc-pwa-launcher-action{
    background:var(--scpwa-orange-dark);

    box-shadow:0 8px 20px rgba(255,90,0,.22);

    transform:translateY(-1px);
}

.sc-pwa-launcher-main:active .sc-pwa-launcher-action{
    transform:scale(.96);
}

.sc-pwa-launcher-download{
    width:17px;
    height:17px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.sc-pwa-launcher-download svg{
    width:100%;
    height:100%;

    display:block;

    fill:currentColor;
}

/*
|--------------------------------------------------------------------------
| Loading Spinner
|--------------------------------------------------------------------------
*/

.sc-pwa-launcher-spinner{
    width:16px;
    height:16px;

    display:none;

    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;

    animation:scPwaSpin .65s linear infinite;
}

.sc-pwa-launcher-main.is-loading .sc-pwa-launcher-download{
    display:none;
}

.sc-pwa-launcher-main.is-loading .sc-pwa-launcher-spinner{
    display:block;
}

@keyframes scPwaSpin{
    to{
        transform:rotate(360deg);
    }
}

/*
|--------------------------------------------------------------------------
| Launcher Close Button
|--------------------------------------------------------------------------
*/

.sc-pwa-launcher-close{
    appearance:none;
    -webkit-appearance:none;

    position:absolute;
    top:8px;
    right:8px;

    width:26px;
    height:26px;

    padding:0;

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

    border:0;
    outline:0;
    border-radius:50%;

    background:#f3f5f7;
    color:#8590a0;

    cursor:pointer;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.sc-pwa-launcher-close:hover{
    background:#e9edf1;
    color:#111827;
}

.sc-pwa-launcher-close:active{
    transform:scale(.92);
}

.sc-pwa-launcher-close:focus-visible{
    box-shadow:0 0 0 3px rgba(255,90,0,.13);
}

.sc-pwa-launcher-close svg{
    width:13px;
    height:13px;

    display:block;

    fill:currentColor;
}

/*
|--------------------------------------------------------------------------
| Install Modal
|--------------------------------------------------------------------------
*/

.sc-pwa-modal{
    position:fixed;
    inset:0;

    z-index:20000;

    width:100%;
    height:100%;

    padding:20px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.sc-pwa-modal[hidden]{
    display:none!important;
}

/*
|--------------------------------------------------------------------------
| Modal Backdrop
|--------------------------------------------------------------------------
*/

.sc-pwa-modal-backdrop{
    appearance:none;
    -webkit-appearance:none;

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    padding:0;

    border:0;
    outline:0;

    background:rgba(15,23,42,.58);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

/*
|--------------------------------------------------------------------------
| Modal Dialog
|--------------------------------------------------------------------------
*/

.sc-pwa-modal-dialog{
    position:relative;
    z-index:2;

    width:min(100%,440px);
    max-height:calc(100dvh - 40px);

    overflow-x:hidden;
    overflow-y:auto;

    overscroll-behavior:contain;

    border:1px solid rgba(15,23,42,.08);
    border-radius:23px;

    background:#ffffff;

    box-shadow:0 32px 90px rgba(15,23,42,.30);

    animation:scPwaDialogShow .24s ease-out;
}

@keyframes scPwaDialogShow{
    from{
        opacity:0;
        transform:translateY(15px) scale(.98);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.sc-pwa-sheet-handle{
    display:none;
}

/*
|--------------------------------------------------------------------------
| Modal Header
|--------------------------------------------------------------------------
*/

.sc-pwa-modal-header{
    padding:21px 21px 17px;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;

    border-bottom:1px solid var(--scpwa-border);
}

/*
|--------------------------------------------------------------------------
| Modal App Information
|--------------------------------------------------------------------------
*/

.sc-pwa-modal-app{
    min-width:0;
    flex:1 1 auto;

    display:flex;
    align-items:center;
    gap:12px;
}

/*
|--------------------------------------------------------------------------
| Modal App Icon
|--------------------------------------------------------------------------
*/

.sc-pwa-modal-app-icon{
    width:52px;
    height:52px;
    flex:0 0 52px;

    padding:3px;

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

    overflow:hidden;

    border:1px solid rgba(255,90,0,.16);
    border-radius:14px;

    background:#ffffff;

    box-shadow:
        0 2px 7px rgba(15,23,42,.06),
        inset 0 0 0 1px rgba(255,255,255,.7);
}

.sc-pwa-modal-app-icon img{
    display:block;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    border:0;
    border-radius:10px;

    background:#ffffff;

    object-fit:contain;
    object-position:center;

    box-shadow:none;
    filter:none;
}

/*
|--------------------------------------------------------------------------
| Modal Heading
|--------------------------------------------------------------------------
*/

.sc-pwa-modal-heading{
    min-width:0;
}

.sc-pwa-modal-badge{
    width:max-content;
    max-width:100%;

    display:inline-flex;

    margin-bottom:5px;
    padding:4px 7px;

    border-radius:100px;

    background:var(--scpwa-orange-soft);
    color:var(--scpwa-orange);

    font-family:inherit;
    font-size:7.5px;
    font-weight:800;
    letter-spacing:.35px;
    line-height:1;
}

.sc-pwa-modal-heading h3{
    margin:0 0 4px;
    padding:0;

    color:#111827;

    font-family:inherit;
    font-size:17px;
    font-weight:800;
    line-height:1.2;
}

.sc-pwa-modal-heading p{
    margin:0;
    padding:0;

    color:var(--scpwa-text);

    font-family:inherit;
    font-size:10.5px;
    font-weight:500;
    line-height:1.45;
}

/*
|--------------------------------------------------------------------------
| Modal Close Button
|--------------------------------------------------------------------------
*/

.sc-pwa-modal-x{
    appearance:none;
    -webkit-appearance:none;

    width:34px;
    height:34px;
    flex:0 0 34px;

    padding:0;

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

    border:0;
    outline:0;
    border-radius:10px;

    background:#f3f5f7;
    color:#748091;

    cursor:pointer;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.sc-pwa-modal-x:hover{
    background:#e9edf1;
    color:#111827;
}

.sc-pwa-modal-x:active{
    transform:scale(.94);
}

.sc-pwa-modal-x:focus-visible{
    box-shadow:0 0 0 3px rgba(255,90,0,.13);
}

.sc-pwa-modal-x svg{
    width:16px;
    height:16px;

    display:block;

    fill:currentColor;
}

/*
|--------------------------------------------------------------------------
| Modal Content
|--------------------------------------------------------------------------
*/

.sc-pwa-modal-content{
    padding:17px 21px 18px;
}

/*
|--------------------------------------------------------------------------
| Benefits
|--------------------------------------------------------------------------
*/

.sc-pwa-modal-benefits{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;

    margin-bottom:18px;
}

.sc-pwa-benefit{
    min-height:43px;

    padding:8px 10px;

    display:flex;
    align-items:center;
    gap:8px;

    border:1px solid var(--scpwa-border);
    border-radius:11px;

    background:#fafbfc;
    color:#526070;

    font-family:inherit;
    font-size:9.5px;
    font-weight:700;
}

.sc-pwa-benefit-icon{
    width:27px;
    height:27px;
    flex:0 0 27px;

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

    border-radius:8px;

    background:var(--scpwa-orange-soft);
    color:var(--scpwa-orange);
}

.sc-pwa-benefit-icon svg{
    width:13px;
    height:13px;

    display:block;

    fill:currentColor;
}

/*
|--------------------------------------------------------------------------
| Installation Guide
|--------------------------------------------------------------------------
*/

.sc-pwa-guide[hidden]{
    display:none!important;
}

.sc-pwa-guide-label{
    margin:0 0 9px;

    color:#929bab;

    font-family:inherit;
    font-size:8px;
    font-weight:800;
    letter-spacing:.7px;
}

/*
|--------------------------------------------------------------------------
| Installation Steps
|--------------------------------------------------------------------------
*/

.sc-pwa-step{
    width:100%;
    min-height:61px;

    margin-bottom:8px;
    padding:11px 12px;

    display:flex;
    align-items:center;
    gap:11px;

    border:1px solid var(--scpwa-border);
    border-radius:12px;

    background:#fbfcfd;
}

.sc-pwa-step:last-child{
    margin-bottom:0;
}

.sc-pwa-step-number{
    width:29px;
    height:29px;
    flex:0 0 29px;

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

    border-radius:50%;

    background:var(--scpwa-orange);
    color:#ffffff;

    font-size:10px;
    font-weight:800;
}

.sc-pwa-step-copy{
    min-width:0;
    flex:1 1 auto;

    display:flex;
    flex-direction:column;
    gap:3px;
}

.sc-pwa-step-copy strong{
    color:#243045;

    font-family:inherit;
    font-size:11px;
    font-weight:800;
    line-height:1.3;
}

.sc-pwa-step-copy span{
    color:#7c8696;

    font-family:inherit;
    font-size:9.5px;
    font-weight:500;
    line-height:1.4;
}

.sc-pwa-step-icon{
    width:31px;
    height:31px;
    flex:0 0 31px;

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

    border:1px solid var(--scpwa-border);
    border-radius:9px;

    background:#ffffff;
    color:var(--scpwa-orange);
}

.sc-pwa-step-icon svg{
    width:15px;
    height:15px;

    display:block;

    fill:currentColor;
}

/*
|--------------------------------------------------------------------------
| Modal Footer
|--------------------------------------------------------------------------
*/

.sc-pwa-modal-footer{
    padding:0 21px 21px;
}

.sc-pwa-modal-done{
    appearance:none;
    -webkit-appearance:none;

    width:100%;
    min-height:44px;

    padding:0 16px;

    border:0;
    outline:0;
    border-radius:11px;

    background:var(--scpwa-orange);
    color:#ffffff;

    font-family:inherit;
    font-size:11px;
    font-weight:800;

    cursor:pointer;

    box-shadow:0 7px 20px rgba(255,90,0,.18);

    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.sc-pwa-modal-done:hover{
    background:var(--scpwa-orange-dark);
    box-shadow:0 9px 24px rgba(255,90,0,.22);
}

.sc-pwa-modal-done:active{
    transform:scale(.985);
}

.sc-pwa-modal-done:focus-visible{
    box-shadow:
        0 7px 20px rgba(255,90,0,.18),
        0 0 0 3px rgba(255,90,0,.14);
}

/*
|--------------------------------------------------------------------------
| Body Lock
|--------------------------------------------------------------------------
*/

body.sc-pwa-modal-open{
    overflow:hidden!important;
}

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

@media(max-width:900px){

    .sc-pwa-launcher{
        left:16px;
        bottom:16px;
        max-width:340px;
    }

    .sc-pwa-launcher-card{
        min-height:65px;
    }

    .sc-pwa-launcher-app-icon{
        width:46px;
        height:46px;
        flex-basis:46px;
    }
}

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

@media(max-width:620px){

    .sc-pwa-launcher{
        left:12px!important;
        right:12px!important;
        bottom:calc(14px + env(safe-area-inset-bottom))!important;

        z-index:6000!important;

        width:auto!important;
        max-width:none!important;
    }

    .sc-pwa-launcher-card{
        width:100%;
        min-height:64px;

        padding:8px 39px 8px 8px;

        gap:9px;

        border-radius:16px;

        background:#ffffff;

        box-shadow:
            0 14px 42px rgba(15,23,42,.17),
            0 3px 9px rgba(15,23,42,.06);
    }

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

    .sc-pwa-launcher-app-icon{
        width:45px;
        height:45px;
        flex:0 0 45px;

        padding:3px;

        border-radius:12px;

        background:#ffffff;
    }

    .sc-pwa-launcher-app-icon img{
        width:100%;
        height:100%;

        border-radius:9px;

        background:#ffffff;

        object-fit:contain;
    }

    .sc-pwa-launcher-main{
        gap:8px;
    }

    .sc-pwa-launcher-copy strong{
        font-size:11px;
    }

    .sc-pwa-launcher-copy small{
        max-width:200px;

        font-size:8.7px;
        line-height:1.35;

        white-space:normal;
    }

    .sc-pwa-launcher-action{
        width:35px;
        height:35px;
        flex:0 0 35px;

        border-radius:10px;
    }

    .sc-pwa-launcher-download{
        width:16px;
        height:16px;
    }

    .sc-pwa-launcher-close{
        top:7px;
        right:7px;

        width:24px;
        height:24px;
    }

    /*
    |--------------------------------------------------------------------------
    | Mobile Bottom Sheet
    |--------------------------------------------------------------------------
    */

    .sc-pwa-modal{
        align-items:flex-end;

        padding:0;
    }

    .sc-pwa-modal-dialog{
        width:100%;
        max-width:none;
        max-height:92dvh;

        border:0;
        border-radius:23px 23px 0 0;

        background:#ffffff;

        box-shadow:0 -18px 55px rgba(15,23,42,.22);

        animation:scPwaMobileSheet .25s ease-out;
    }

    @keyframes scPwaMobileSheet{
        from{
            opacity:0;
            transform:translateY(40px);
        }

        to{
            opacity:1;
            transform:translateY(0);
        }
    }

    .sc-pwa-sheet-handle{
        width:38px;
        height:4px;

        display:block;

        margin:8px auto 0;

        border-radius:100px;

        background:#d6dae0;
    }

    .sc-pwa-modal-header{
        padding:13px 16px 14px;
    }

    .sc-pwa-modal-app{
        gap:10px;
    }

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

    .sc-pwa-modal-app-icon{
        width:46px;
        height:46px;
        flex:0 0 46px;

        padding:3px;

        border-radius:12px;

        background:#ffffff;
    }

    .sc-pwa-modal-app-icon img{
        width:100%;
        height:100%;

        border-radius:9px;

        background:#ffffff;

        object-fit:contain;
    }

    .sc-pwa-modal-heading h3{
        font-size:14.5px;
    }

    .sc-pwa-modal-heading p{
        font-size:9.5px;
    }

    .sc-pwa-modal-x{
        width:31px;
        height:31px;
        flex:0 0 31px;
    }

    .sc-pwa-modal-content{
        padding:13px 16px 15px;
    }

    .sc-pwa-modal-benefits{
        gap:7px;
        margin-bottom:13px;
    }

    .sc-pwa-benefit{
        min-height:38px;

        padding:7px 8px;

        font-size:8.7px;
    }

    .sc-pwa-benefit-icon{
        width:25px;
        height:25px;
        flex:0 0 25px;
    }

    .sc-pwa-step{
        min-height:57px;

        padding:9px 10px;

        gap:9px;
    }

    .sc-pwa-step-number{
        width:27px;
        height:27px;
        flex:0 0 27px;

        font-size:9px;
    }

    .sc-pwa-step-copy strong{
        font-size:10px;
    }

    .sc-pwa-step-copy span{
        font-size:8.7px;
    }

    .sc-pwa-step-icon{
        width:29px;
        height:29px;
        flex:0 0 29px;
    }

    .sc-pwa-modal-footer{
        padding:
            0
            16px
            calc(15px + env(safe-area-inset-bottom));
    }

    .sc-pwa-modal-done{
        min-height:42px;

        font-size:10.5px;
    }
}

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

@media(max-width:400px){

    .sc-pwa-launcher{
        left:9px!important;
        right:9px!important;
        bottom:calc(10px + env(safe-area-inset-bottom))!important;
    }

    .sc-pwa-launcher-card{
        min-height:60px;

        padding:
            7px
            37px
            7px
            7px;

        border-radius:15px;
    }

    .sc-pwa-launcher-app-icon{
        width:42px;
        height:42px;
        flex:0 0 42px;

        padding:3px;

        border-radius:11px;
    }

    .sc-pwa-launcher-app-icon img{
        border-radius:8px;
    }

    .sc-pwa-launcher-copy strong{
        font-size:10.3px;
    }

    .sc-pwa-launcher-copy small{
        max-width:170px;

        font-size:8.1px;
    }

    .sc-pwa-launcher-action{
        width:32px;
        height:32px;
        flex:0 0 32px;

        border-radius:9px;
    }

    .sc-pwa-launcher-close{
        width:22px;
        height:22px;
    }

    .sc-pwa-modal-heading h3{
        font-size:13.5px;
    }
}

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

@media(max-width:340px){

    .sc-pwa-launcher{
        left:7px!important;
        right:7px!important;
    }

    .sc-pwa-launcher-card{
        min-height:57px;

        padding:
            6px
            34px
            6px
            6px;
    }

    .sc-pwa-launcher-app-icon{
        width:40px;
        height:40px;
        flex:0 0 40px;
    }

    .sc-pwa-launcher-copy strong{
        font-size:10px;
    }

    .sc-pwa-launcher-copy small{
        display:none;
    }

    .sc-pwa-launcher-action{
        width:31px;
        height:31px;
        flex:0 0 31px;
    }

    .sc-pwa-modal-benefits{
        grid-template-columns:1fr;
    }
}

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

@media(max-width:900px) and (orientation:landscape){

    .sc-pwa-launcher{
        bottom:10px!important;
    }

    .sc-pwa-modal-dialog{
        max-height:94dvh;
    }

    .sc-pwa-modal-header{
        padding-top:11px;
        padding-bottom:11px;
    }

    .sc-pwa-modal-content{
        padding-top:11px;
        padding-bottom:12px;
    }
}

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

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

    .sc-pwa-launcher,
    .sc-pwa-modal-dialog,
    .sc-pwa-launcher-main,
    .sc-pwa-launcher-close,
    .sc-pwa-launcher-action,
    .sc-pwa-modal-x,
    .sc-pwa-modal-done{
        animation:none!important;
        transition:none!important;
    }
}