/* =========================================================
   THEME TITLE: Kizi Blue Arcade Clean
   WEBSITE: ArcadeGames / CrazyGames-like
   PURPOSE: Custom theme colors loaded after all.css
   STYLE: Dark blue arcade, clean panels, fixed spacing/search/tags/blogs
   ========================================================= */

/* =========================================================
   MAIN BACKGROUND
   ========================================================= */

html,
body {
    min-height: 100%;
    background: #071A33 !important;
    background:
        radial-gradient(circle at center top, rgba(45, 171, 255, 0.34) 0%, rgba(9, 39, 76, 0.98) 44%, #030914 100%) !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    overflow-x: hidden;
    color: #ffffff !important;
}

/* Remove old diamond background */
.bg-diamonds {
    display: none !important;
    background: none !important;
    animation: none !important;
}

/* Keep layout above background */
main,
#header,
.sidebar,
.wrapper,
footer {
    position: relative;
    z-index: 1;
}


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

#header,
#header > div {
    background: linear-gradient(180deg, #0E3A70 0%, #08284F 100%) !important;
    border-bottom: 1px solid rgba(72, 198, 255, 0.30) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30) !important;
}


/* =========================================================
   CLEAN HEADER SEARCH BAR
   ========================================================= */

/* Search wrapper */
#header .relative.bg-\[\#373952\],
#header div[class*="bg-[#373952]"] {
    background: rgba(5, 34, 70, 0.72) !important;
    border: 1px solid rgba(72, 198, 255, 0.36) !important;
    border-radius: 999px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 22px rgba(0, 0, 0, 0.22),
        0 0 18px rgba(72, 198, 255, 0.12) !important;
    overflow: hidden !important;
}

/* Search input */
#header input[type="text"],
#header input[type="search"],
#header .search-form .txt {
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: 16px !important;
    padding-left: 14px !important;
}

/* Placeholder */
#header input[type="text"]::placeholder,
#header input[type="search"]::placeholder,
#header .search-form .txt::placeholder {
    color: rgba(216, 244, 255, 0.72) !important;
}

/* Search icon */
#header .fa-search,
#header i.fa-search {
    color: #8ee7ff !important;
    text-shadow: 0 0 10px rgba(72, 198, 255, 0.35) !important;
}

/* Focus effect */
#header .relative.bg-\[\#373952\]:focus-within,
#header div[class*="bg-[#373952]"]:focus-within {
    background: rgba(7, 48, 96, 0.88) !important;
    border-color: rgba(142, 231, 255, 0.82) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 8px 24px rgba(0, 0, 0, 0.26),
        0 0 22px rgba(72, 198, 255, 0.28) !important;
}

/* Search result boxes */
#search-results-desktop,
#search-results-tablet,
#search-results {
    background: rgba(7, 38, 78, 0.96) !important;
    border: 1px solid rgba(72, 198, 255, 0.26) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.30) !important;
    color: #ffffff !important;
}

/* Search result links */
#search-results-desktop a,
#search-results-tablet a,
#search-results a {
    color: #ffffff !important;
}

#search-results-desktop a:hover,
#search-results-tablet a:hover,
#search-results a:hover {
    background: rgba(72, 198, 255, 0.14) !important;
    color: #8ee7ff !important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

#sidebar-menu {
    background: linear-gradient(180deg, #0B315F 0%, #061E3D 100%) !important;
    border-right: 1px solid rgba(72, 198, 255, 0.24) !important;
    box-shadow: 8px 0 22px rgba(0, 0, 0, 0.26) !important;
}

#sidebar {
    background: transparent !important;
}

#sidebar-menu > div:first-child {
    background: linear-gradient(180deg, #0B315F 0%, #061E3D 100%) !important;
}

#sidebar-menu a {
    color: #ffffff !important;
}

#sidebar-menu a:hover {
    background: rgba(72, 198, 255, 0.16) !important;
    border-radius: 14px !important;
}

#sidebar-menu a img,
#sidebar-menu svg {
    filter: drop-shadow(0 0 6px rgba(72, 198, 255, 0.34));
}

/* Restore sidebar tag/category links so tag page styles do not affect menu */
#sidebar-menu a[href*="/tag/"],
#sidebar-menu a[href*="/category/"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#sidebar-menu a[href*="/tag/"]:hover,
#sidebar-menu a[href*="/category/"]:hover {
    background: rgba(72, 198, 255, 0.16) !important;
    border-radius: 14px !important;
}

/* Remove sidebar top close/header block on desktop */
@media (min-width: 1024px) {
    #sidebar-menu > div:first-child {
        display: none !important;
    }

    #sidebar {
        padding-top: 12px !important;
    }

    #sidebar-menu::after {
        background: rgba(72, 198, 255, 0.26) !important;
    }
}


/* =========================================================
   GLOBAL SPACING FIX
   ========================================================= */

main,
main > div,
.wrapper,
.page-container,
.content-container,
.play-game-page-container,
[class*="pt-20"],
[class*="pt-16"],
[class*="pt-14"],
[class*="pt-12"],
[class*="mt-20"],
[class*="mt-16"],
[class*="mt-14"],
[class*="mt-12"] {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.play-game-page-container > .flex.flex-col,
main > div:first-child,
.wrapper > div:first-child,
.page-container > div:first-child,
.content-container > div:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* =========================================================
   COMMON PANELS
   ========================================================= */

main .bg-\[\#1F1F30\],
main .bg-\[\#1f1f30\],
main .bg-\[\#1a1b28\],
main .bg-\[\#1A1B28\],
main .bg-\[\#212233\],
main .bg-\[\#181925\],
main .bg-\[\#0C0D14\],
main .bg-\[\#0c0d14\],
main .border-\[\#28293D\] {
    background: rgba(8, 40, 79, 0.54) !important;
    border-color: rgba(72, 198, 255, 0.22) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24) !important;
    color: #ffffff !important;
}

/* Text/footer/content blocks */
.footer-description,
.bottomtext,
.play-game-desc,
.category-section-top,
#special-page-header-desc {
    background: rgba(8, 40, 79, 0.50) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(72, 198, 255, 0.18) !important;
    color: #ffffff !important;
}


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

#game-containers,
#game-containers .bgs,
.game-info,
.page-col,
#Gameinner,
#detail-infobox,
#flex-howtoplay,
.howtoplay-init,
.play-game-bottom,
#mobi-desc-container,
.mobi-desc-content,
#mobi-desc-gamelist,
.game-tags {
    background: rgba(8, 40, 79, 0.50) !important;
    border-color: rgba(72, 198, 255, 0.22) !important;
    color: #ffffff !important;
}

#ava-game_container,
#mobi-play-game,
#mobi-game-preloading,
#game-preloader,
#game-preloading {
    background-color: #071A33 !important;
}

/* Game player bottom bar */
#gameDiv .bg-\[\#212233\] {
    background: rgba(11, 49, 95, 0.90) !important;
    border: 1px solid rgba(72, 198, 255, 0.24) !important;
}

/* Game details card */
.play-game-page-container .bg-\[\#1a1b28\],
.play-game-page-container .bg-\[\#1A1B28\] {
    background: rgba(8, 40, 79, 0.58) !important;
    border: 1px solid rgba(72, 198, 255, 0.20) !important;
}

/* Old play.css boxes */
#detail-top-gamebox,
.intro-ads,
.pro-play_970x90,
.pro-info_336x280_1,
.pro-info_300x600,
.howtoplay-side-as,
#flex-howtoplay h2 {
    background: rgba(11, 49, 95, 0.90) !important;
    border: 1px solid rgba(72, 198, 255, 0.24) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important;
    color: #ffffff !important;
}


/* =========================================================
   GAME PAGE TAG/CATEGORY BUTTONS
   ========================================================= */

.play-game-page-container .flex.flex-wrap.gap-4 > a,
.play-game-page-container .flex.flex-wrap.gap-3 > a,
body a[href*="/tag/"].bg-\[\#212233\],
body a[href*="/category/"].bg-\[\#212233\] {
    background: linear-gradient(180deg, #256fcf 0%, #0b3f86 100%) !important;
    border: 1px solid rgba(72, 198, 255, 0.45) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(45, 171, 255, 0.22) !important;
}

.play-game-page-container .flex.flex-wrap.gap-4 > a span,
.play-game-page-container .flex.flex-wrap.gap-3 > a span,
body a[href*="/tag/"].bg-\[\#212233\] span,
body a[href*="/category/"].bg-\[\#212233\] span {
    color: #8ee7ff !important;
    opacity: 1 !important;
}

.play-game-page-container .flex.flex-wrap.gap-4 > a:hover,
.play-game-page-container .flex.flex-wrap.gap-3 > a:hover,
body a[href*="/tag/"].bg-\[\#212233\]:hover,
body a[href*="/category/"].bg-\[\#212233\]:hover {
    background: linear-gradient(180deg, #48c6ff 0%, #149bff 100%) !important;
    border-color: rgba(142, 231, 255, 0.90) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(72, 198, 255, 0.35) !important;
}


/* =========================================================
   OLD TAG AREAS
   ========================================================= */

.game-tags-grid a.bg-\[\#212233\],
.game-tags ul li a,
.game-dec .tags a {
    background: rgba(72, 198, 255, 0.13) !important;
    border: 1px solid rgba(72, 198, 255, 0.28) !important;
    color: #ffffff !important;
}

.game-tags-grid a.bg-\[\#212233\]:hover,
.game-tags ul li a:hover,
.game-dec .tags a:hover {
    background: rgba(72, 198, 255, 0.28) !important;
    border-color: rgba(20, 155, 255, 0.48) !important;
    color: #ffffff !important;
}


/* =========================================================
   TEXT
   ========================================================= */

.relategames,
.relategames li a,
.detail-infobox-detail,
.detail-infobox-detail h1,
.detail-infobox-detail h2,
.detail-infobox-detail p,
.play-game-bottom p,
.game-dec,
.game-dec .description,
.flex-side-desc,
.flex-side-desc .pl,
footer,
footer a,
main,
main a,
main p,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    color: #ffffff !important;
}


/* =========================================================
   GAME THUMBNAILS
   ========================================================= */

.relategames li img,
.common-game-style li a .gameicon,
.common-game-style li a img {
    border-color: rgba(72, 198, 255, 0.34) !important;
    background: rgba(8, 40, 79, 0.52) !important;
}

.relategames li a:hover img,
.common-game-style li a:hover .gameicon,
.common-game-style li a:hover img {
    border-color: #48C6FF !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.detail-infobox-btn,
.mobi-desc-play a,
.mobi-desc-more a,
.mobi-desc-walkbtn a,
.gamePlay-button,
.mobi-gamePlay-button,
.play-now-button {
    background: linear-gradient(180deg, #48C6FF 0%, #149BFF 100%) !important;
    border-color: rgba(255,255,255,0.76) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(45, 171, 255, 0.32) !important;
    font-weight: 700 !important;
}

.detail-infobox-btn:hover,
.mobi-desc-play a:hover,
.mobi-desc-more a:hover,
.mobi-desc-walkbtn a:hover,
.gamePlay-button:hover,
.mobi-gamePlay-button:hover,
.play-now-button:hover {
    background: linear-gradient(180deg, #78D7FF 0%, #2DABFF 100%) !important;
    color: #ffffff !important;
}


/* =========================================================
   HOMEPAGE DESCRIPTION BOX
   ========================================================= */

body .p-5.text-white.bg-\[\#212233\],
body div[class*="p-5"][class*="bg-[#212233]"],
body div[class*="lg:w-[464px]"][class*="bg-[#212233]"] {
    background: linear-gradient(180deg, rgba(8, 55, 105, 0.90) 0%, rgba(7, 38, 78, 0.96) 100%) !important;
    border: 1px solid rgba(72, 198, 255, 0.28) !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28), 0 0 24px rgba(72, 198, 255, 0.12) !important;
}

body .p-5.text-white.bg-\[\#212233\] h1,
body .p-5.text-white.bg-\[\#212233\] h2,
body .p-5.text-white.bg-\[\#212233\] h3,
body .p-5.text-white.bg-\[\#212233\] p,
body div[class*="lg:w-[464px]"][class*="bg-[#212233]"] h1,
body div[class*="lg:w-[464px]"][class*="bg-[#212233]"] p {
    color: #ffffff !important;
}

body .p-5.text-white.bg-\[\#212233\] a,
body div[class*="lg:w-[464px]"][class*="bg-[#212233]"] a {
    color: #8ee7ff !important;
    font-weight: 800 !important;
}

body .p-5.text-white.bg-\[\#212233\] a:hover,
body div[class*="lg:w-[464px]"][class*="bg-[#212233]"] a:hover {
    color: #48c6ff !important;
}


/* =========================================================
   BLOG LIST PAGE
   ========================================================= */

/* /blogs main box */
body div:has(> h1):has(a[href*="/blog"]),
body div:has(> h1):has(a[href*="/blogs"]) {
    background: linear-gradient(180deg, rgba(8, 55, 105, 0.88) 0%, rgba(7, 38, 78, 0.92) 100%) !important;
    border: 1px solid rgba(72, 198, 255, 0.32) !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28), 0 0 28px rgba(72, 198, 255, 0.12) !important;
}

/* Keep blog rows clean */
body div:has(> h1):has(a[href*="/blog"]) > div,
body div:has(> h1):has(a[href*="/blogs"]) > div {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Blog thumbnails */
body div:has(> h1):has(a[href*="/blog"]) img,
body div:has(> h1):has(a[href*="/blogs"]) img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-radius: 14px !important;
    object-fit: cover !important;
}

/* Blog list titles/text */
body div:has(> h1):has(a[href*="/blog"]) h1,
body div:has(> h1):has(a[href*="/blog"]) h2,
body div:has(> h1):has(a[href*="/blog"]) h3,
body div:has(> h1):has(a[href*="/blog"]) p,
body div:has(> h1):has(a[href*="/blogs"]) h1,
body div:has(> h1):has(a[href*="/blogs"]) h2,
body div:has(> h1):has(a[href*="/blogs"]) h3,
body div:has(> h1):has(a[href*="/blogs"]) p {
    color: #ffffff !important;
}

/* Blog list links */
body div:has(> h1):has(a[href*="/blog"]) a,
body div:has(> h1):has(a[href*="/blogs"]) a {
    color: #8ee7ff !important;
}

body div:has(> h1):has(a[href*="/blog"]) a:hover,
body div:has(> h1):has(a[href*="/blogs"]) a:hover {
    color: #48c6ff !important;
}


/* =========================================================
   SINGLE BLOG PAGE
   ========================================================= */

/* Best available selector for single blog article panel */
html:has(link[rel="canonical"][href*="/blog/"]) body .bg-\[\#1F1F30\],
html:has(link[rel="canonical"][href*="/blog/"]) body .bg-\[\#1f1f30\],
html:has(link[rel="canonical"][href*="/blog/"]) body .bg-\[\#1a1b28\],
html:has(link[rel="canonical"][href*="/blog/"]) body .bg-\[\#1A1B28\],
html:has(link[rel="canonical"][href*="/blog/"]) body .bg-\[\#212233\],
html:has(link[rel="canonical"][href*="/blog/"]) body .bg-\[\#181925\],
html:has(link[rel="canonical"][href*="/blog/"]) body article,
html:has(link[rel="canonical"][href*="/blog/"]) body .blog-content,
html:has(link[rel="canonical"][href*="/blog/"]) body .blog-details,
html:has(link[rel="canonical"][href*="/blog/"]) body .article-content {
    background: linear-gradient(180deg, rgba(8, 55, 105, 0.90) 0%, rgba(7, 38, 78, 0.96) 100%) !important;
    border: 1px solid rgba(72, 198, 255, 0.28) !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28), 0 0 28px rgba(72, 198, 255, 0.12) !important;
}

/* Single blog text */
html:has(link[rel="canonical"][href*="/blog/"]) body h1,
html:has(link[rel="canonical"][href*="/blog/"]) body h2,
html:has(link[rel="canonical"][href*="/blog/"]) body h3,
html:has(link[rel="canonical"][href*="/blog/"]) body p,
html:has(link[rel="canonical"][href*="/blog/"]) body time,
html:has(link[rel="canonical"][href*="/blog/"]) body small {
    color: #ffffff !important;
}

/* Single blog image */
html:has(link[rel="canonical"][href*="/blog/"]) body img {
    border-radius: 16px !important;
}

/* Single blog links */
html:has(link[rel="canonical"][href*="/blog/"]) body a {
    color: #8ee7ff !important;
}

html:has(link[rel="canonical"][href*="/blog/"]) body a:hover {
    color: #48c6ff !important;
}