/**
 * ==========================================================
 * Francherry Manager Portal
 * PWA Interface
 * Version: 1.0.0
 * ==========================================================
 */


/* ==========================================================
   1. VARIABLES
========================================================== */

:root {

    --fb-pwa-gold: #C89B3C;
    --fb-pwa-gold-hover: #B98D32;

    --fb-pwa-black: #111111;
    --fb-pwa-text: #242424;
    --fb-pwa-muted: #737373;

    --fb-pwa-white: #FFFFFF;
    --fb-pwa-background: #F6F7F8;

    --fb-pwa-border: #E2E2E2;

    --fb-pwa-success: #287A4D;
    --fb-pwa-success-bg: #EFFAF2;

    --fb-pwa-danger: #A23D3D;
    --fb-pwa-danger-bg: #FFF2F2;

    --fb-pwa-warning: #8A6419;
    --fb-pwa-warning-bg: #FFF8E8;

}


/* ==========================================================
   2. BASE
========================================================== */

.fb-pwa-install-card,
.fb-pwa-update-notice,
.fb-pwa-toast,
.fb-pwa-offline-notice {

    box-sizing: border-box !important;

    font-family: inherit !important;
}


.fb-pwa-install-card *,
.fb-pwa-update-notice *,
.fb-pwa-toast *,
.fb-pwa-offline-notice * {

    box-sizing: border-box !important;
}


/* ==========================================================
   3. INSTALL BUTTON
========================================================== */

[data-fb-pwa-install] {

    min-height: 44px !important;

    padding:
        0
        18px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    background:
        var(--fb-pwa-gold) !important;

    color:
        #111111 !important;

    border:
        1px solid
        var(--fb-pwa-gold) !important;

    border-radius:
        8px !important;

    box-shadow:
        none !important;

    font-family:
        inherit !important;

    font-size:
        13px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    text-decoration:
        none !important;

    cursor:
        pointer !important;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease !important;
}


[data-fb-pwa-install]:hover {

    background:
        var(--fb-pwa-black) !important;

    color:
        var(--fb-pwa-white) !important;

    border-color:
        var(--fb-pwa-black) !important;
}


[data-fb-pwa-install]:active {

    transform:
        translateY(1px) !important;
}


[data-fb-pwa-install]:focus-visible {

    outline:
        3px solid
        rgba(200, 155, 60, 0.22) !important;

    outline-offset:
        2px !important;
}


/* ==========================================================
   4. INSTALLED BUTTON STATE
========================================================== */

[data-fb-pwa-install].is-installed {

    background:
        #F2F2F2 !important;

    color:
        #666666 !important;

    border-color:
        #DEDEDE !important;

    cursor:
        default !important;
}


[data-fb-pwa-install].is-installed:hover {

    background:
        #F2F2F2 !important;

    color:
        #666666 !important;

    border-color:
        #DEDEDE !important;
}


[data-fb-pwa-install]:disabled {

    opacity:
        0.75 !important;
}


/* ==========================================================
   5. INSTALL CARD
========================================================== */

.fb-pwa-install-card {

    width:
        100% !important;

    padding:
        20px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        20px !important;

    background:
        #FFFFFF !important;

    border:
        1px solid
        var(--fb-pwa-border) !important;

    border-radius:
        14px !important;

    box-shadow:
        0 1px 3px
        rgba(0, 0, 0, 0.03) !important;
}


.fb-pwa-install-card-content {

    min-width:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        14px !important;
}


/* ==========================================================
   6. APP ICON
========================================================== */

.fb-pwa-install-card-icon {

    width:
        48px !important;

    height:
        48px !important;

    flex:
        0 0
        48px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    overflow:
        hidden !important;

    background:
        var(--fb-pwa-black) !important;

    border-radius:
        12px !important;
}


.fb-pwa-install-card-icon img {

    width:
        100% !important;

    height:
        100% !important;

    display:
        block !important;

    object-fit:
        cover !important;
}


/* ==========================================================
   7. INSTALL CARD TEXT
========================================================== */

.fb-pwa-install-card-copy {

    min-width:
        0 !important;
}


.fb-pwa-install-card-copy h3 {

    margin:
        0
        0
        4px !important;

    padding:
        0 !important;

    color:
        var(--fb-pwa-text) !important;

    font-size:
        15px !important;

    font-weight:
        700 !important;

    line-height:
        1.35 !important;
}


.fb-pwa-install-card-copy p {

    margin:
        0 !important;

    padding:
        0 !important;

    max-width:
        520px !important;

    color:
        var(--fb-pwa-muted) !important;

    font-size:
        13px !important;

    font-weight:
        400 !important;

    line-height:
        1.5 !important;
}


/* ==========================================================
   8. UPDATE NOTICE
========================================================== */

.fb-pwa-update-notice {

    position:
        fixed !important;

    left:
        50% !important;

    bottom:
        24px !important;

    z-index:
        999999 !important;

    width:
        min(
            560px,
            calc(100% - 32px)
        ) !important;

    opacity:
        0 !important;

    visibility:
        hidden !important;

    transform:
        translate(
            -50%,
            18px
        ) !important;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease !important;
}


.fb-pwa-update-notice.active {

    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        translate(
            -50%,
            0
        ) !important;
}


/* ==========================================================
   9. UPDATE NOTICE CONTENT
========================================================== */

.fb-pwa-update-notice-content {

    width:
        100% !important;

    min-height:
        70px !important;

    padding:
        13px
        14px
        13px
        17px !important;

    display:
        grid !important;

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

    align-items:
        center !important;

    gap:
        12px !important;

    background:
        #111111 !important;

    color:
        #FFFFFF !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.08) !important;

    border-radius:
        12px !important;

    box-shadow:
        0 14px 40px
        rgba(0, 0, 0, 0.22) !important;
}


.fb-pwa-update-notice-content > div {

    min-width:
        0 !important;
}


.fb-pwa-update-notice-content strong {

    display:
        block !important;

    margin-bottom:
        3px !important;

    color:
        #FFFFFF !important;

    font-size:
        13px !important;

    font-weight:
        700 !important;

    line-height:
        1.3 !important;
}


.fb-pwa-update-notice-content span {

    display:
        block !important;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        ) !important;

    font-size:
        11px !important;

    line-height:
        1.4 !important;
}


/* ==========================================================
   10. UPDATE BUTTON
========================================================== */

.fb-pwa-update-button {

    min-width:
        82px !important;

    height:
        38px !important;

    padding:
        0
        14px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    background:
        var(--fb-pwa-gold) !important;

    color:
        #111111 !important;

    border:
        1px solid
        var(--fb-pwa-gold) !important;

    border-radius:
        7px !important;

    font-family:
        inherit !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    cursor:
        pointer !important;
}


.fb-pwa-update-button:hover {

    background:
        #FFFFFF !important;

    border-color:
        #FFFFFF !important;
}


/* ==========================================================
   11. UPDATE DISMISS BUTTON
========================================================== */

.fb-pwa-update-dismiss {

    width:
        34px !important;

    height:
        34px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    background:
        transparent !important;

    color:
        #FFFFFF !important;

    border:
        0 !important;

    border-radius:
        50% !important;

    font-family:
        Arial,
        sans-serif !important;

    font-size:
        22px !important;

    font-weight:
        400 !important;

    line-height:
        1 !important;

    cursor:
        pointer !important;
}


.fb-pwa-update-dismiss:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.10
        ) !important;
}


/* ==========================================================
   12. TOAST
========================================================== */

.fb-pwa-toast {

    position:
        fixed !important;

    left:
        50% !important;

    bottom:
        24px !important;

    z-index:
        1000000 !important;

    width:
        auto !important;

    max-width:
        min(
            460px,
            calc(100% - 32px)
        ) !important;

    padding:
        13px
        18px !important;

    background:
        #111111 !important;

    color:
        #FFFFFF !important;

    border-radius:
        9px !important;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.20) !important;

    opacity:
        0 !important;

    visibility:
        hidden !important;

    transform:
        translate(
            -50%,
            14px
        ) !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;

    line-height:
        1.45 !important;

    text-align:
        center !important;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease !important;
}


.fb-pwa-toast.active {

    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        translate(
            -50%,
            0
        ) !important;
}


/* ==========================================================
   13. CONNECTION / OFFLINE NOTICE
========================================================== */

.fb-pwa-offline-notice {

    position:
        fixed !important;

    top:
        0 !important;

    left:
        0 !important;

    z-index:
        999998 !important;

    width:
        100% !important;

    padding:
        8px
        16px !important;

    background:
        #111111 !important;

    color:
        #FFFFFF !important;

    font-size:
        12px !important;

    font-weight:
        600 !important;

    line-height:
        1.4 !important;

    text-align:
        center !important;

    transform:
        translateY(-100%) !important;

    transition:
        transform 0.2s ease !important;
}


.fb-pwa-offline-notice.active {

    transform:
        translateY(0) !important;
}


/* ==========================================================
   14. PWA STATUS
========================================================== */

.fb-pwa-status {

    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        7px !important;

    color:
        var(--fb-pwa-muted) !important;

    font-size:
        12px !important;

    font-weight:
        500 !important;
}


.fb-pwa-status-dot {

    width:
        8px !important;

    height:
        8px !important;

    flex:
        0 0
        8px !important;

    background:
        #BDBDBD !important;

    border-radius:
        50% !important;
}


.fb-pwa-status.is-installed
.fb-pwa-status-dot {

    background:
        var(--fb-pwa-success) !important;
}


.fb-pwa-status.is-offline
.fb-pwa-status-dot {

    background:
        var(--fb-pwa-danger) !important;
}


/* ==========================================================
   15. SETTINGS PWA BLOCK
========================================================== */

.fb-settings-pwa-card {

    width:
        100% !important;

    padding:
        18px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        18px !important;

    background:
        #FAFAFA !important;

    border:
        1px solid
        #E7E7E7 !important;

    border-radius:
        10px !important;
}


.fb-settings-pwa-copy {

    min-width:
        0 !important;
}


.fb-settings-pwa-copy strong {

    display:
        block !important;

    margin-bottom:
        3px !important;

    color:
        #333333 !important;

    font-size:
        14px !important;

    font-weight:
        600 !important;

    line-height:
        1.35 !important;
}


.fb-settings-pwa-copy small {

    display:
        block !important;

    color:
        #858585 !important;

    font-size:
        12px !important;

    font-weight:
        400 !important;

    line-height:
        1.45 !important;
}


/* ==========================================================
   16. INSTALL ACTION AREA
========================================================== */

.fb-pwa-install-action {

    flex:
        0
        0
        auto !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        10px !important;
}


/* ==========================================================
   17. SUCCESS STATE
========================================================== */

.fb-pwa-install-success {

    padding:
        10px
        13px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        7px !important;

    background:
        var(--fb-pwa-success-bg) !important;

    color:
        var(--fb-pwa-success) !important;

    border:
        1px solid
        #CDEBD4 !important;

    border-radius:
        8px !important;

    font-size:
        12px !important;

    font-weight:
        600 !important;
}


/* ==========================================================
   18. HIDDEN UTILITY
========================================================== */

.fb-pwa-hidden {

    display:
        none !important;
}


/* ==========================================================
   19. STANDALONE MODE
========================================================== */

@media (display-mode: standalone) {

    /*
    |--------------------------------------------------------------------------
    | Anything specifically intended only for browser mode can
    | receive this class.
    |--------------------------------------------------------------------------
    */

    .fb-pwa-browser-only {

        display:
            none !important;
    }

}


/* ==========================================================
   20. TABLET
========================================================== */

@media (max-width: 900px) {

    .fb-pwa-install-card {

        padding:
            17px !important;
    }


    .fb-pwa-install-card-copy h3 {

        font-size:
            15px !important;
    }


    .fb-pwa-install-card-copy p {

        font-size:
            12px !important;
    }


    .fb-settings-pwa-card {

        padding:
            16px !important;
    }

}


/* ==========================================================
   21. MOBILE
========================================================== */

@media (max-width: 700px) {

    /* ----------------------------------------------------------
       INSTALL CARD
    ---------------------------------------------------------- */

    .fb-pwa-install-card {

        display:
            block !important;

        padding:
            16px !important;
    }


    .fb-pwa-install-card-content {

        align-items:
            flex-start !important;
    }


    .fb-pwa-install-card-icon {

        width:
            44px !important;

        height:
            44px !important;

        flex-basis:
            44px !important;

        border-radius:
            10px !important;
    }


    .fb-pwa-install-card-copy h3 {

        font-size:
            15px !important;
    }


    .fb-pwa-install-card-copy p {

        font-size:
            13px !important;

        line-height:
            1.5 !important;
    }


    .fb-pwa-install-action {

        width:
            100% !important;

        margin-top:
            15px !important;
    }


    .fb-pwa-install-action
    [data-fb-pwa-install] {

        width:
            100% !important;
    }


    /* ----------------------------------------------------------
       SETTINGS PWA CARD
    ---------------------------------------------------------- */

    .fb-settings-pwa-card {

        display:
            block !important;
    }


    .fb-settings-pwa-copy strong {

        font-size:
            14px !important;
    }


    .fb-settings-pwa-copy small {

        font-size:
            12px !important;
    }


    .fb-settings-pwa-card
    .fb-pwa-install-action {

        margin-top:
            14px !important;
    }


    /* ----------------------------------------------------------
       UPDATE NOTICE
    ---------------------------------------------------------- */

    .fb-pwa-update-notice {

        bottom:
            14px !important;

        width:
            calc(100% - 24px) !important;
    }


    .fb-pwa-update-notice-content {

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

        gap:
            8px !important;

        padding:
            12px !important;

        border-radius:
            11px !important;
    }


    .fb-pwa-update-notice-content strong {

        font-size:
            12px !important;
    }


    .fb-pwa-update-notice-content span {

        font-size:
            10px !important;
    }


    .fb-pwa-update-button {

        min-width:
            70px !important;

        height:
            36px !important;

        padding:
            0
            11px !important;

        font-size:
            11px !important;
    }


    .fb-pwa-update-dismiss {

        width:
            32px !important;

        height:
            32px !important;

        font-size:
            21px !important;
    }


    /* ----------------------------------------------------------
       TOAST
    ---------------------------------------------------------- */

    .fb-pwa-toast {

        bottom:
            14px !important;

        width:
            calc(100% - 24px) !important;

        max-width:
            none !important;

        padding:
            12px
            14px !important;

        font-size:
            12px !important;
    }

}


/* ==========================================================
   22. SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .fb-pwa-update-notice-content {

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


    .fb-pwa-update-button {

        grid-column:
            1 / -1 !important;

        grid-row:
            2 !important;

        width:
            100% !important;

        order:
            3 !important;
    }


    .fb-pwa-update-dismiss {

        grid-column:
            2 !important;

        grid-row:
            1 !important;
    }


    .fb-pwa-install-card-content {

        gap:
            11px !important;
    }


    [data-fb-pwa-install] {

        min-height:
            46px !important;

        font-size:
            13px !important;
    }

}


/* ==========================================================
   23. REDUCED MOTION
========================================================== */

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

    .fb-pwa-update-notice,
    .fb-pwa-toast,
    .fb-pwa-offline-notice,
    [data-fb-pwa-install] {

        transition:
            none !important;
    }

}