/* =========================================================
   MYBLOG - EXPLORE APPS DARK MODE
   ========================================================= */

html.dark-mode {
    color-scheme: dark;

    --explore-dark-bg: #18191a;
    --explore-dark-card: #242526;
    --explore-dark-card-2: #3a3b3c;
    --explore-dark-hover: #4e4f50;
    --explore-dark-border: #3e4042;

    --explore-dark-text: #e4e6eb;
    --explore-dark-secondary: #b0b3b8;
    --explore-dark-muted: #8b949e;

    --explore-blue: #4599ff;
}


/* =========================================================
   PAGE
   ========================================================= */

html.dark-mode,
html.dark-mode body {
    background: var(--explore-dark-bg) !important;
    color: var(--explore-dark-text) !important;
}

html.dark-mode body {
    min-height: 100vh;
}


/* =========================================================
   HEADER
   ========================================================= */

html.dark-mode .explore-header {
    background: var(--explore-dark-card) !important;

    border-bottom:
        1px solid var(--explore-dark-border) !important;

    color:
        var(--explore-dark-text) !important;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, .35) !important;
}


html.dark-mode .explore-header-inner {
    color:
        var(--explore-dark-text) !important;
}


html.dark-mode .explore-title {
    color:
        var(--explore-dark-text) !important;
}


html.dark-mode .explore-subtitle {
    color:
        var(--explore-dark-secondary) !important;
}


/* =========================================================
   BACK / HOME BUTTON
   ========================================================= */

html.dark-mode .back-btn {
    background:
        var(--explore-dark-card-2) !important;

    color:
        var(--explore-dark-text) !important;

    border:
        1px solid var(--explore-dark-border) !important;
}


html.dark-mode .back-btn:hover {
    background:
        var(--explore-dark-hover) !important;

    color:
        #ffffff !important;

    border-color:
        var(--explore-dark-hover) !important;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

html.dark-mode .explore-container {
    background:
        transparent !important;

    color:
        var(--explore-dark-text) !important;
}


/* =========================================================
   APP CARD
   ========================================================= */

html.dark-mode .app-card {
    background:
        var(--explore-dark-card) !important;

    border:
        1px solid var(--explore-dark-border) !important;

    color:
        var(--explore-dark-text) !important;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .25) !important;
}


html.dark-mode .app-card:hover {
    background:
        var(--explore-dark-card-2) !important;

    border-color:
        #505256 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .45) !important;
}


/* =========================================================
   APP LOGO CONTAINER
   ========================================================= */

html.dark-mode .app-logo {
    background:
        var(--explore-dark-card-2) !important;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .35) !important;
}


/* =========================================================
   APP LOGO FALLBACK ICON
   ========================================================= */

html.dark-mode .app-logo i {
    color:
        var(--explore-blue) !important;
}


/* =========================================================
   APP NAME
   ========================================================= */

html.dark-mode .app-name {
    color:
        var(--explore-dark-text) !important;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

html.dark-mode .empty-state {
    background:
        var(--explore-dark-card) !important;

    border:
        1px solid var(--explore-dark-border) !important;

    color:
        var(--explore-dark-secondary) !important;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .25) !important;
}


html.dark-mode .empty-state h4 {
    color:
        var(--explore-dark-text) !important;
}


html.dark-mode .empty-state p {
    color:
        var(--explore-dark-secondary) !important;
}


/* =========================================================
   EMPTY ICON
   ========================================================= */

html.dark-mode .empty-icon {
    background:
        #263b58 !important;

    color:
        var(--explore-blue) !important;
}


html.dark-mode .empty-icon i {
    color:
        var(--explore-blue) !important;
}


/* =========================================================
   DATABASE ERROR
   ========================================================= */

html.dark-mode .database-error {
    background:
        #351d1d !important;

    border:
        1px solid #633b3b !important;

    color:
        #ffb4b4 !important;
}


html.dark-mode .database-error strong {
    color:
        #ffcccc !important;
}


/* =========================================================
   LINKS
   ========================================================= */

html.dark-mode a {
    color:
        inherit;
}


html.dark-mode a:hover {
    color:
        inherit;
}


/* =========================================================
   BOOTSTRAP OVERRIDES
   ========================================================= */

html.dark-mode .text-dark {
    color:
        var(--explore-dark-text) !important;
}


html.dark-mode .text-secondary {
    color:
        var(--explore-dark-secondary) !important;
}


html.dark-mode .bg-white {
    background:
        var(--explore-dark-card) !important;

    color:
        var(--explore-dark-text) !important;
}


html.dark-mode .border {
    border-color:
        var(--explore-dark-border) !important;
}


/* =========================================================
   ICONS
   ========================================================= */

html.dark-mode .bi {
    color:
        inherit;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

html.dark-mode * {
    scrollbar-color:
        #4e4f50
        #18191a;
}


html.dark-mode *::-webkit-scrollbar {
    width:
        8px;

    height:
        8px;
}


html.dark-mode *::-webkit-scrollbar-track {
    background:
        #18191a;
}


html.dark-mode *::-webkit-scrollbar-thumb {
    background:
        #4e4f50;

    border-radius:
        10px;
}


html.dark-mode *::-webkit-scrollbar-thumb:hover {
    background:
        #666;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    html.dark-mode .explore-header {
        background:
            var(--explore-dark-card) !important;
    }

    html.dark-mode .app-card {
        background:
            var(--explore-dark-card) !important;
    }

    html.dark-mode .app-card:hover {
        background:
            var(--explore-dark-card-2) !important;
    }

    html.dark-mode .app-logo {
        background:
            var(--explore-dark-card-2) !important;
    }

}

/* end dark mode styles */

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background: #f0f2f5;
            color: #1c1e21;
            font-family:
                Arial,
                Helvetica,
                sans-serif;
        }


        /*
        |--------------------------------------------------------------------------
        | HEADER
        |--------------------------------------------------------------------------
        */

        .explore-header {

            background: #ffffff;

            border-bottom:
                1px solid #dddfe2;

            padding:
                18px 20px;

            position:
                sticky;

            top: 0;

            z-index: 50;
        }


        .explore-header-inner {

            max-width:
                1100px;

            margin:
                auto;

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                15px;
        }


        .explore-title {

            margin: 0;

            font-size:
                24px;

            font-weight:
                700;
        }


        .explore-subtitle {

            margin:
                3px 0 0;

            color:
                #65676b;

            font-size:
                14px;
        }


        .back-btn {

            width:
                42px;

            height:
                42px;

            border-radius:
                50%;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            background:
                #f0f2f5;

            color:
                #1c1e21;

            text-decoration:
                none;

            font-size:
                20px;
        }


        .back-btn:hover {

            background:
                #e4e6eb;

            color:
                #1c1e21;
        }


        /*
        |--------------------------------------------------------------------------
        | CONTENT
        |--------------------------------------------------------------------------
        */

        .explore-container {

            max-width:
                1100px;

            margin:
                auto;

            padding:
                25px 15px 60px;
        }


        /*
        |--------------------------------------------------------------------------
        | APPS GRID
        |--------------------------------------------------------------------------
        */

        .apps-grid {

            display:
                grid;

            grid-template-columns:
                repeat(
                    auto-fill,
                    minmax(
                        150px,
                        1fr
                    )
                );

            gap:
                18px;
        }


        /*
        |--------------------------------------------------------------------------
        | APP CARD
        |--------------------------------------------------------------------------
        */

        .app-card {

            background:
                #ffffff;

            border:
                1px solid #dddfe2;

            border-radius:
                14px;

            padding:
                20px 12px 16px;

            text-decoration:
                none;

            color:
                #1c1e21;

            text-align:
                center;

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


        .app-card:hover {

            transform:
                translateY(-4px);

            box-shadow:
                0 8px 25px
                rgba(
                    0,
                    0,
                    0,
                    .10
                );

            border-color:
                #d0d2d6;

            color:
                #1c1e21;
        }


        /*
        |--------------------------------------------------------------------------
        | APP LOGO
        |--------------------------------------------------------------------------
        */

        .app-logo {

            width:
                92px;

            height:
                92px;

            margin:
                0 auto 13px;

            border-radius:
                22px;

            overflow:
                hidden;

            background:
                #f0f2f5;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            box-shadow:
                0 2px 8px
                rgba(
                    0,
                    0,
                    0,
                    .08
                );
        }


        .app-logo img {

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;
        }


        .app-logo i {

            font-size:
                42px;

            color:
                #1877f2;
        }


        /*
        |--------------------------------------------------------------------------
        | APP NAME
        |--------------------------------------------------------------------------
        */

        .app-name {

            margin:
                0;

            font-size:
                15px;

            font-weight:
                700;

            line-height:
                1.35;

            word-break:
                break-word;
        }


        /*
        |--------------------------------------------------------------------------
        | EMPTY STATE
        |--------------------------------------------------------------------------
        */

        .empty-state {

            background:
                #ffffff;

            border:
                1px solid #dddfe2;

            border-radius:
                16px;

            padding:
                55px 20px;

            text-align:
                center;

            color:
                #65676b;
        }


        .empty-icon {

            width:
                70px;

            height:
                70px;

            border-radius:
                50%;

            background:
                #e7f3ff;

            color:
                #1877f2;

            margin:
                0 auto 15px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            font-size:
                32px;
        }


        .empty-state h4 {

            margin:
                0 0 6px;

            color:
                #1c1e21;

            font-size:
                19px;
        }


        .empty-state p {

            margin:
                0;

            font-size:
                14px;
        }


        /*
        |--------------------------------------------------------------------------
        | DATABASE ERROR
        |--------------------------------------------------------------------------
        */

        .database-error {

            background:
                #fff1f0;

            border:
                1px solid #ffccc7;

            color:
                #a8071a;

            border-radius:
                12px;

            padding:
                15px;

            margin-bottom:
                20px;

            overflow:
                auto;

            font-size:
                13px;
        }


        /*
        |--------------------------------------------------------------------------
        | MOBILE
        |--------------------------------------------------------------------------
        */

        @media (
            max-width: 575px
        ) {

            .explore-header {

                padding:
                    14px;
            }

            .explore-title {

                font-size:
                    21px;
            }

            .apps-grid {

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

                gap:
                    10px;
            }

            .app-card {

                padding:
                    13px 7px;
            }

            .app-logo {

                width:
                    70px;

                height:
                    70px;

                border-radius:
                    18px;

                margin-bottom:
                    9px;
            }

            .app-name {

                font-size:
                    12px;
            }

        }


        @media (
            min-width: 576px
        ) and (
            max-width: 767px
        ) {

            .apps-grid {

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

        }