/*
==================
    1.0  Header Builder
        1.1 Site Identity
        1.2 Primary Menu
        1.3 Search
        1.4 Dark Mode
==================
*/

/* Social Icons */
/* Official Colors */
/* Facebook */
.official--on .facebook i {
    color: var(--bbe-site-facebook-color);
}

.official--on.outline .facebook i {
    border-color: var(--bbe-site-facebook-color);
}

.official--on.outline .facebook i:hover {
    color: #fff;
    background: var(--bbe-site-facebook-color);
}

.official--on.filled .facebook i {
    color: #fff;
    background: var(--bbe-site-facebook-color);
}

.official--on.filled .facebook i:hover {
    background: #4191f9;
}

/* Twitter */
.official--on .twitter i {
    color: var(--bbe-site-twitter-color);
}

.official--on.outline .twitter i {
    border-color: var(--bbe-site-twitter-color);
}

.official--on.outline .twitter i:hover {
    color: #fff;
    background: var(--bbe-site-twitter-color);
}

.official--on.filled .twitter i {
    color: #fff;
    background: var(--bbe-site-twitter-color);
}

.official--on.filled .twitter i:hover {
    background: #42b5fb;
}

/* Instagram */
.official--on .instagram i {
    background: var(--bbe-site-instagram-color);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.official--on.outline .instagram i {
    border-color: #f56040;
}

.official--on.outline .instagram i:hover {
    -webkit-text-fill-color: #fff;
    background: var(--bbe-site-instagram-color);
}

.official--on.filled .instagram i {
    -webkit-text-fill-color: #fff;
    background: var(--bbe-site-instagram-color);
}

.official--on.filled .instagram i:hover {
    background: linear-gradient(192deg, #5A73EB, #6F6AE3, #9A57C2, #D04C96, #E5527A, #FF4A4A, #F77A57, #F88C55, #FDBB5F, #FFE39A);
}

/* Threads */
.official--on .threads i {
    color: var(--bbe-site-threads-color);
}

.official--on.outline .threads i {
    border-color: var(--bbe-site-threads-color);
}

.official--on.outline .threads i:hover {
    color: #fff;
    background: var(--bbe-site-threads-color);
}

.official--on.filled .threads i {
    color: #fff;
    background: var(--bbe-site-threads-color);
}

.official--on.filled .threads i:hover {
    background: #585858;
}

/* WhatsApp */
.official--on .whatsapp i {
    color: var(--bbe-site-whatsapp-color);
}

.official--on.outline .whatsapp i {
    border-color: var(--bbe-site-whatsapp-color);
}

.official--on.outline .whatsapp i:hover {
    color: #fff;
    background: var(--bbe-site-whatsapp-color);
}

.official--on.filled .whatsapp i {
    color: #fff;
    background: var(--bbe-site-whatsapp-color);
}

.official--on.filled .whatsapp i:hover {
    background: #38e378;
}

/* X */
.official--on .x i {
    color: var(--bbe-site-x-color);
}

.official--on.outline .x i {
    border-color: var(--bbe-site-x-color);
}

.official--on.outline .x i:hover {
    color: #fff;
    background: var(--bbe-site-x-color);
}

.official--on.filled .x i {
    color: #fff;
    background: var(--bbe-site-x-color);
}

.official--on.filled .x i:hover {
    background: #585858;
}

/* TikTok */
.official--on .tiktok i {
    color: var(--bbe-site-tiktok-color);
}

.official--on.outline .tiktok i {
    border-color: var(--bbe-site-tiktok-color);
}

.official--on.outline .tiktok i:hover {
    color: #fff;
    background: var(--bbe-site-tiktok-color);
}

.official--on.filled .tiktok i {
    color: #fff;
    background: var(--bbe-site-tiktok-color);
}

.official--on.filled .tiktok i:hover {
    background: #585858;
}

/* Snapchat */
.official--on .snapchat i {
    color: var(--bbe-site-snapchat-color);
}

.official--on.outline .snapchat i {
    border-color: var(--bbe-site-snapchat-color);
}

.official--on.outline .snapchat i:hover {
    color: #fff;
    background: var(--bbe-site-snapchat-color);
}

.official--on.filled .snapchat i {
    color: #fff;
    background: var(--bbe-site-snapchat-color);
}

.official--on.filled .snapchat i:hover {
    background: #e1df26;
}

/* Pinterest */
.official--on .pinterest i {
    color: var(--bbe-site-pinterest-color);
}

.official--on.outline .pinterest i {
    border-color: var(--bbe-site-pinterest-color);
}

.official--on.outline .pinterest i:hover {
    color: #fff;
    background: var(--bbe-site-pinterest-color);
}

.official--on.filled .pinterest i {
    color: #fff;
    background: var(--bbe-site-pinterest-color);
}

.official--on.filled .pinterest i:hover {
    background: #ff3e5b;
}

/* Reddit */
.official--on .reddit i {
    color: var(--bbe-site-reddit-color);
}

.official--on.outline .reddit i {
    border-color: var(--bbe-site-reddit-color);
}

.official--on.outline .reddit i:hover {
    color: #fff;
    background: var(--bbe-site-reddit-color);
}

.official--on.filled .reddit i {
    color: #fff;
    background: var(--bbe-site-reddit-color);
}

.official--on.filled .reddit i:hover {
    background: #fd8559;
}

/* Tumblr */
.official--on .tumblr i {
    color: var(--bbe-site-tumblr-color);
}

.official--on.outline .tumblr i {
    border-color: var(--bbe-site-tumblr-color);
}

.official--on.outline .tumblr i:hover {
    color: #fff;
    background: var(--bbe-site-tumblr-color);
}

.official--on.filled .tumblr i {
    color: #fff;
    background: var(--bbe-site-tumblr-color);
}

.official--on.filled .tumblr i:hover {
    background: #536e91;
}

/* Mastodon */
.official--on .mastodon i {
    color: var(--bbe-site-mastodon-color);
}

.official--on.outline .mastodon i {
    border-color: var(--bbe-site-mastodon-color);
}

.official--on.outline .mastodon i:hover {
    color: #fff;
    background: var(--bbe-site-mastodon-color);
}

.official--on.filled .mastodon i {
    color: #fff;
    background: var(--bbe-site-mastodon-color);
}

.official--on.filled .mastodon i:hover {
    background: #8384fb;
}

/* Bluesky */
.official--on .bluesky i {
    color: var(--bbe-site-bluesky-color);
}

.official--on.outline .bluesky i {
    border-color: var(--bbe-site-bluesky-color);
}

.official--on.outline .bluesky i:hover {
    color: #fff;
    background: var(--bbe-site-bluesky-color);
}

.official--on.filled .bluesky i {
    color: #fff;
    background: var(--bbe-site-bluesky-color);
}

.official--on.filled .bluesky i:hover {
    background: #41a4ff;
}

/* LinkedIn */
.official--on .linkedin i {
    color: var(--bbe-site-linkedin-color);
}

.official--on.outline .linkedin i {
    border-color: var(--bbe-site-linkedin-color);
}

.official--on.outline .linkedin i:hover {
    color: #fff;
    background: var(--bbe-site-linkedin-color);
}

.official--on.filled .linkedin i {
    color: #fff;
    background: var(--bbe-site-linkedin-color);
}

.official--on.filled .linkedin i:hover {
    background: #4483c3;
}

/* YouTube */
.official--on .youtube i {
    color: var(--bbe-site-youtube-color);
}

.official--on.outline .youtube i {
    border-color: var(--bbe-site-youtube-color);
}

.official--on.outline .youtube i:hover {
    color: #fff;
    background: var(--bbe-site-youtube-color);
}

.official--on.filled .youtube i {
    color: #fff;
    background: var(--bbe-site-youtube-color);
}

.official--on.filled .youtube i:hover {
    background: #ff6060;
}

/* Twitch */
.official--on .twitch i {
    color: var(--bbe-site-twitch-color);
}

.official--on.outline .twitch i {
    border-color: var(--bbe-site-twitch-color);
}

.official--on.outline .twitch i:hover {
    color: #fff;
    background: var(--bbe-site-twitch-color);
}

.official--on.filled .twitch i {
    color: #fff;
    background: var(--bbe-site-twitch-color);
}

.official--on.filled .twitch i:hover {
    background: #8769bf;
}

/* Vimeo */
.official--on .vimeo i {
    color: var(--bbe-site-vimeo-color);
}

.official--on.outline .vimeo i {
    border-color: var(--bbe-site-vimeo-color);
}

.official--on.outline .vimeo i:hover {
    color: #fff;
    background: var(--bbe-site-vimeo-color);
}

.official--on.filled .vimeo i {
    color: #fff;
    background: var(--bbe-site-vimeo-color);
}

.official--on.filled .vimeo i:hover {
    background: #57d3fb;
}

/* Dailymotion */
.official--on .dailymotion i {
    color: var(--bbe-site-dailymotion-color);
}

.official--on.outline .dailymotion i {
    border-color: var(--bbe-site-dailymotion-color);
}

.official--on.outline .dailymotion i:hover {
    color: #fff;
    background: var(--bbe-site-dailymotion-color);
}

.official--on.filled .dailymotion i {
    color: #fff;
    background: var(--bbe-site-dailymotion-color);
}

.official--on.filled .dailymotion i:hover {
    background: #5fc2f3;
}

/* Discord */
.official--on .discord i {
    color: var(--bbe-site-discord-color);
}

.official--on.outline .discord i {
    border-color: var(--bbe-site-discord-color);
}

.official--on.outline .discord i:hover {
    color: #fff;
    background: var(--bbe-site-discord-color);
}

.official--on.filled .discord i {
    color: #fff;
    background: var(--bbe-site-discord-color);
}

.official--on.filled .discord i:hover {
    background: #848df3;
}

/* Telegram */
.official--on .telegram i {
    color: var(--bbe-site-telegram-color);
}

.official--on.outline .telegram i {
    border-color: var(--bbe-site-telegram-color);
}

.official--on.outline .telegram i:hover {
    color: #fff;
    background: var(--bbe-site-telegram-color);
}

.official--on.filled .telegram i {
    color: #fff;
    background: var(--bbe-site-telegram-color);
}

.official--on.filled .telegram i:hover {
    background: #359bcf;
}

/* Skype */
.official--on .skype i {
    color: var(--bbe-site-skype-color);
}

.official--on.outline .skype i {
    border-color: var(--bbe-site-skype-color);
}

.official--on.outline .skype i:hover {
    color: #fff;
    background: var(--bbe-site-skype-color);
}

.official--on.filled .skype i {
    color: #fff;
    background: var(--bbe-site-skype-color);
}

.official--on.filled .skype i:hover {
    background: #36bbed;
}

/* Viber */
.official--on .viber i {
    color: var(--bbe-site-viber-color);
}

.official--on.outline .viber i {
    border-color: var(--bbe-site-viber-color);
}

.official--on.outline .viber i:hover {
    color: #fff;
    background: var(--bbe-site-viber-color);
}

.official--on.filled .viber i {
    color: #fff;
    background: var(--bbe-site-viber-color);
}

.official--on.filled .viber i:hover {
    background: #8d7ef5;
}

/* WeChat */
.official--on .weixin i {
    color: var(--bbe-site-weixin-color);
}

.official--on.outline .weixin i {
    border-color: var(--bbe-site-weixin-color);
}

.official--on.outline .weixin i:hover {
    color: #fff;
    background: var(--bbe-site-weixin-color);
}

.official--on.filled .weixin i {
    color: #fff;
    background: var(--bbe-site-weixin-color);
}

.official--on.filled .weixin i:hover {
    background: #3dcf83;
}

/* QQ */
.official--on .qq i {
    color: var(--bbe-site-qq-color);
}

.official--on.outline .qq i {
    border-color: var(--bbe-site-qq-color);
}

.official--on.outline .qq i:hover {
    color: #fff;
    background: var(--bbe-site-qq-color);
}

.official--on.filled .qq i {
    color: #fff;
    background: var(--bbe-site-qq-color);
}

.official--on.filled .qq i:hover {
    background: #3bc5f9;
}

/* KK */
.official--on .kk i {
    color: var(--bbe-site-kk-color);
}

.official--on.outline .kk i {
    border-color: var(--bbe-site-kk-color);
}

.official--on.outline .kk i:hover {
    color: #fff;
    background: var(--bbe-site-kk-color);
}

.official--on.filled .kk i {
    color: #fff;
    background: var(--bbe-site-kk-color);
}

.official--on.filled .kk i:hover {
    background: #efdc32;
}

/* Odnoklassniki */
.official--on .odnoklassniki i {
    color: var(--bbe-site-odnoklassniki-color);
}

.official--on.outline .odnoklassniki i {
    border-color: var(--bbe-site-odnoklassniki-color);
}

.official--on.outline .odnoklassniki i:hover {
    color: #fff;
    background: var(--bbe-site-odnoklassniki-color);
}

.official--on.filled .odnoklassniki i {
    color: #fff;
    background: var(--bbe-site-odnoklassniki-color);
}

.official--on.filled .odnoklassniki i:hover {
    background: #ed9d43;
}

/* Weibo */
.official--on .weibo i {
    color: var(--bbe-site-weibo-color);
}

.official--on.outline .weibo i {
    border-color: var(--bbe-site-weibo-color);
}

.official--on.outline .weibo i:hover {
    color: #fff;
    background: var(--bbe-site-weibo-color);
}

.official--on.filled .weibo i {
    color: #fff;
    background: var(--bbe-site-weibo-color);
}

.official--on.filled .weibo i:hover {
    background: #e54254;
}

/* Renren */
.official--on .renren i {
    color: var(--bbe-site-renren-color);
}


.official--on.outline .renren i {
    border-color: var(--bbe-site-renren-color);
}

.official--on.outline .renren i:hover {
    color: #fff;
    background: var(--bbe-site-renren-color);
}

.official--on.filled .renren i {
    color: #fff;
    background: var(--bbe-site-renren-color);
}

.official--on.filled .renren i:hover {
    background: #277cc3;
}

/* ========= Global ================ */
    .align--center .content-wrapper .entry-categories,
    .align--center .content-wrapper .entry-categories,
    .align--center .content-wrapper .entry-meta,
    .align--center .entry-inner .entry-categories,
    .align--center .entry-inner .entry-meta {
        justify-content: center;
    }

    .align--right .content-wrapper .entry-categories,
    .align--right .content-wrapper .entry-meta,
    .align--right .entry-inner .entry-categories,
    .align--right .entry-inner .entry-meta {
        justify-content: right;
    }

/* Button Hover Effects */
    .controller-wrap .filled {
        --bbe-site-bg-color: #30344b;
        background: var(--bbe-site-bg-color);
    } 

    .controller-wrap .outline {
        border: 1px solid var(--bbe-site-border-color);
    }

    .controller-wrap .rounded {
        border-radius: 6px;
    }

    .controller-wrap .circle {
        border-radius: 30px;
    }

/*
=================================
MARK: Glass Morphism 
=================================
*/

    .card--boxed.glass-morphism--enabled .card--default .bbe-article,
    body.glass-morphism--enabled .card--boxed .bbe-article,
    body.glass-morphism--enabled .layout--list.card--boxed .bbe-article .entry-content,
    .glass-morphism--enabled.card--boxed .card--default .block-wrap > div,
    body.glass-morphism--enabled .card--boxed .block-wrap > div,
    .glass-morphism--enabled.card--boxed .bbe-carousel.card--default .entry-content,
    .glass-morphism--enabled.card--boxed .bbe-category-collection.card--default:not(.layout--four) .entry-content > li,
    body.glass-morphism--enabled .bbe-category-collection.card--boxed:not(.layout--four) .entry-content > li,
    .glass-morphism--enabled.card--boxed .bbe-video-playlist.layout--one.card--default:not(.active) .entry-content .video-item,
    body.glass-morphism--enabled .bbe-video-playlist.layout--one.card--boxed:not(.active) .entry-content .video-item,
    body.card--boxed.glass-morphism--enabled .site .card--default .widget,
    body.glass-morphism--enabled .site .card--boxed .widget {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.18);
        overflow: hidden;
        isolation: isolate;
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(120, 100, 180, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(20px) saturate(1.4);
        -webkit-backdrop-filter: blur(20px) saturate(1.4);
        transition: var(--transition-1);
    }

    .card--boxed.glass-morphism--enabled .card--default .bbe-article::before,
    body.glass-morphism--enabled .card--boxed .bbe-article::before,
    body.glass-morphism--enabled .layout--list.card--boxed .bbe-article .entry-content::before,
    .glass-morphism--enabled.card--boxed .card--default .block-wrap > div::before,
    body.glass-morphism--enabled .card--boxed .block-wrap > div::before,
    .glass-morphism--enabled.card--boxed .bbe-carousel.card--default .entry-content::before,
    .glass-morphism--enabled.card--boxed .bbe-category-collection.card--default:not(.layout--four) .entry-content > li::before,
    body.glass-morphism--enabled .bbe-category-collection.card--boxed:not(.layout--four) .entry-content > li::before,
    .glass-morphism--enabled.card--boxed .bbe-video-playlist.layout--one.card--default:not(.active) .entry-content .video-item::before,
    body.glass-morphism--enabled .bbe-video-playlist.layout--one.card--boxed:not(.active) .entry-content .video-item::before,
    body.card--boxed.glass-morphism--enabled .site .card--default .widget::before,
    body.glass-morphism--enabled .site .card--boxed .widget::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05) );
        pointer-events: none;
        z-index: 0;
    }

    .card--boxed.glass-morphism--enabled .card--default .bbe-article:hover,
    body.glass-morphism--enabled .card--boxed .bbe-article:hover,
    body.glass-morphism--enabled .layout--list.card--boxed .bbe-article .entry-content:hover,
    .glass-morphism--enabled.card--boxed .card--default .block-wrap > div:hover,
    body.glass-morphism--enabled .card--boxed .block-wrap > div:hover,
    .glass-morphism--enabled.card--boxed .bbe-carousel.card--default .entry-content:hover,
    .glass-morphism--enabled.card--boxed .bbe-category-collection.card--default:not(.layout--four) .entry-content > li:hover,
    body.glass-morphism--enabled .bbe-category-collection.card--boxed:not(.layout--four) .entry-content > li:hover,
    .glass-morphism--enabled.card--boxed .bbe-video-playlist.layout--one.card--default:not(.active) .entry-content .video-item:hover,
    body.glass-morphism--enabled .bbe-video-playlist.layout--one.card--boxed:not(.active) .entry-content .video-item:hover,
    body.card--boxed.glass-morphism--enabled .site .card--default .widget::before,
    body.glass-morphism--enabled .site .card--boxed .widget:hover {
        border-color: rgba(255, 255, 255, 0.35);
    }

    .card--boxed.glass-morphism--enabled .card--default.bbe-carousel .bbe-article {
        backdrop-filter: none; 
    }

    /* Glass Morphism - Dark Mode*/
    .bbe-dark.card--boxed.glass-morphism--enabled .bbe-article {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(18px) saturate(1.25);
        -webkit-backdrop-filter: blur(18px) saturate(1.25);
        overflow: hidden;
        isolation: isolate;
        transition: var(--transition-1);
    }

    .bbe-dark.card--boxed.glass-morphism--enabled .bbe-article::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.08) );
        pointer-events: none;
        z-index: 0;
    }

    .bbe-dark.card--boxed.glass-morphism--enabled .bbe-article:hover {
        border-color: rgba(255, 255, 255, 0.12);
    }

    /* Glass Morphism - Background Blobs */
    .bbe-card-blobs {
        position: fixed;
        inset: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    .bbe-card-blobs .blob {
        height: 70%;
        width: 70%;
        margin: auto;
        border-radius: 50%;
        filter: blur(120px);
        opacity: 0.8;
    }

    .bbe-card-blobs .blob.top-left {
        background: #6C3CE1;
    }

    .bbe-card-blobs .blob.top-center {
        background: #E13C8A;
    }

    .bbe-card-blobs .blob.top-right {
        background: #0EA5E9;
    }

    .bbe-card-blobs .blob.center-left {
        background: #F59E0B;
    }

    .bbe-card-blobs .blob.center-center {
        background: #10B981;
    }

    .bbe-card-blobs .blob.center-right {
        background: #EF4444;
    }

    .bbe-card-blobs .blob.bottom-left {
        background: #F97316;
    }

    .bbe-card-blobs .blob.bottom-center {
        background: #A855F7;
    }

    .bbe-card-blobs .blob.bottom-right {
        background: #06B6D4;
    }