/* ============================================================
   AVIXY.IN — DARK PURPLE THEME
   Drop this file AFTER style.css and home.css in your HTML.
   It overrides backgrounds, accents, and badge colours.
   ============================================================ */

/* ----------------------------------------------------------
   1. DEEP PURPLE BASE – fix landing page & all pages
   ---------------------------------------------------------- */
body {
    background: #0a0612 !important;
    color: #e0e0e0 !important;
}

/* landing-page hero overlay used the old grey colour – fix it */
#mw-top:before {
    background: #0a0612 !important;
    background: -webkit-linear-gradient(180deg, #0a0612 0%, rgba(10,6,18,0) 64%) !important;
    background:         linear-gradient(180deg, #0a0612 0%, rgba(10,6,18,0) 64%) !important;
}

/* ----------------------------------------------------------
   2. ACCENT COLOUR  →  Deep Violet  (#7c3aed / #a78bfa)
   ---------------------------------------------------------- */
:root {
    --accent:       #7c3aed;
    --accent-light: #a78bfa;
    --accent-glow:  rgba(124, 58, 237, 0.28);
}

/* Global link hover */
a:hover { color: var(--accent-light) !important; }

/* Nav underline */
.hm_nav           { border-bottom-color: var(--accent) !important; }
.hm_nav:hover     { border-bottom-color: #555 !important; }

/* Primary buttons / active tabs */
.btn-focus,
.btn-primary,
.btn-tab.active {
    background:   var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff   !important;
}
.btn-focus:hover,
.btn-primary:hover,
.btn-tab.active:hover {
    background:   var(--accent-light) !important;
    border-color: var(--accent-light) !important;
}

/* Secondary / inactive buttons */
.btn-secondary,
.btn-tab {
    background:   #120a1e !important;
    border-color: #120a1e !important;
    color: #ddd   !important;
}
.btn-secondary:hover,
.btn-tab:hover {
    background:   #1e1030 !important;
    border-color: #1e1030 !important;
}

/* Home-page search submit button */
#xsearch.home-search .search-content .search-submit,
.search-submit {
    background: var(--accent) !important;
}

/* Accent dots, bullets, brand colours */
.hm_nav,
#mw-top .mw-heading-second:before,
#mw-top .mw-sitename,
#xheader #xlogo span,
.btn-highlight,
a:hover {
    color: var(--accent-light) !important;
}
#mw-top .mw-heading-second:before {
    background: var(--accent) !important;
}

/* Action button (Watch Now) */
#action-button .btn-primary,
.btn-play,
.film-watch .fw-btn {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* ----------------------------------------------------------
   3. CARD & SECTION BACKGROUNDS  (AMOLED-friendly darks)
   ---------------------------------------------------------- */
#xmain-wrapper,
.xmain-wrapper,
.share-buttons,
.mw-keywords .mwk-item,
.connecting-list .item {
    background-color: #0f0a1a !important;
}

.mw-keywords .mwk-item:hover {
    background: #1e1030 !important;
    color: #fff !important;
}

/* Side/news list gradient */
.zr-news.zr-news-list {
    background: linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(8,0,20,1) 30%,
        rgba(8,0,20,1) 70%,
        rgba(0,0,0,0) 100%) !important;
}

.zr-news.zr-news-list .item.item-more .btn-sm {
    background: #2a1050 !important;
}

/* Mobile nav overlay */
#xheader_menu {
    background: rgba(8, 0, 20, 0.98) !important;
}

/* ----------------------------------------------------------
   4. SUB / DUB BADGES  — bigger & bolder
   ---------------------------------------------------------- */

/* SUB badge — bright cyan, same feel, kept */
.tick-item-sub {
    background: #00d4d4 !important;
    color: #000 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    letter-spacing: 0.5px !important;
}

/* DUB badge — accent purple */
.tick-item-dub {
    background: var(--accent-light) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 0 6px rgba(167, 139, 250, 0.7) !important;
}

/* Ticket container — lift it a touch */
.tick {
    bottom: 6px !important;
}

/* ----------------------------------------------------------
   5. NAVBAR / HEADER
   ---------------------------------------------------------- */
#xheader_menu,
#header,
.nav-menu,
.navbar,
.site-header {
    background: #050008 !important;
}

/* Active server / episode buttons */
.btn-server.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 0 8px var(--accent-glow) !important;
}

/* Episode active item */
.ep-item.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

/* ----------------------------------------------------------
   6. FOOTER
   ---------------------------------------------------------- */
#xfooter-about,
footer,
.site-footer {
    background: #050008 !important;
}

/* ----------------------------------------------------------
   7. RESUME TOAST — accent border matches purple
   ---------------------------------------------------------- */
#resume-toast {
    border-color: var(--accent) !important;
}
#resume-toast b { color: var(--accent-light) !important; }
#resume-restart:hover { border-color: var(--accent) !important; }

/* ----------------------------------------------------------
   8. NEXT EP ETA BANNER
   ---------------------------------------------------------- */
#next-ep-eta {
    background: linear-gradient(90deg, #120a1e 0%, #1e1030 100%) !important;
    border-color: var(--accent) !important;
    color: var(--accent-light) !important;
}

/* ----------------------------------------------------------
   9. AUTO-NEXT OVERLAY
   ---------------------------------------------------------- */
#autonext-overlay .an-progress-ring circle {
    stroke: var(--accent) !important;
}

/* ----------------------------------------------------------
   10. FIX — Prevent Bootstrap 4 user dropdown flash on page load
   ---------------------------------------------------------- */
#user_menu.dropdown-menu:not(.show) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
#user_menu.dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}