/* ============================================================
   MANGAXO — Premium Overlay v1.2
   Loaded AFTER styles.css + home-modern.css.
   Fixes:
   - v1.0: block_area opacity:0 trap (removed, CSS-only fade now)
   - v1.1: dropped dead Zoro-naming selectors, scoped to darkmode
   - v1.2: clamp .tick-rate size (fixes black bar on search/list),
            light-mode header + trending overrides,
            auth-modal gold Sign-in, chapter link contrast
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    --mx-gold: #ffd702;
    --mx-gold-deep: #ffb700;
    --mx-gradient-gold: linear-gradient(135deg, #ffe066 0%, #ffd702 45%, #ffb700 100%);
    --mx-border-d: rgba(255, 255, 255, 0.08);
    --mx-border-gold: rgba(255, 215, 2, 0.35);
    --mx-text-d: #f6f1ff;
    --mx-muted-d: rgba(246, 241, 255, 0.62);
    --mx-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
    --mx-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
    --mx-shadow-gold: 0 10px 30px rgba(255, 215, 2, 0.28);
    --mx-radius-lg: 16px;
    --mx-radius-xl: 20px;
    --mx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Premium typography ---------- */
body {
    font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}
h1, h2, h3, h4,
.cat-heading,
.manga-name,
.post-title {
    font-family: 'Space Grotesk', 'Inter', 'Poppins', sans-serif;
    font-weight: 700;
    letter-spacing: -0.022em;
}
::selection { background: var(--mx-gold); color: #111; }

/* ============================================================
   ENTRANCE ANIMATION — CSS-only, self-terminating
   ============================================================ */
@keyframes mx-fade-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.block_area { animation: mx-fade-in 0.55s var(--mx-ease) both; }

/* ============================================================
   SECTION HEADINGS — gradient accent bar
   ============================================================ */
.block_area .block_area-header .cat-heading {
    position: relative;
    padding-bottom: 12px;
    font-weight: 700;
}
.block_area .block_area-header .cat-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3.5px;
    background: var(--mx-gradient-gold);
    border-radius: 3px;
    box-shadow: 0 2px 10px rgba(255, 215, 2, 0.35);
}

/* ============================================================
   CRITICAL FIX — .tick-rate sizing (was 47x187 black bar)
   The original styles.css stretches .tick-rate to card-height on
   list layouts. Clamp it to a small corner pill, gold-themed.
   ============================================================ */
.tick,
.tick-item,
.tick-lang,
.tick-rate {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-height: 26px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.02em;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
}
.tick-rate {
    background: var(--mx-gradient-gold) !important;
    color: #1a0f3a !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(255, 215, 2, 0.35) !important;
}
.tick-rate i,
.tick-rate .fa-star { color: #1a0f3a !important; }
.tick-lang {
    background: rgba(11, 6, 23, 0.75) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--mx-border-d) !important;
    color: #fff !important;
}

/* Corner-positioning convention for badges inside poster */
.manga-poster .tick,
.manga-poster .tick-item,
.manga-poster .tick-rate,
.manga-poster .tick-lang {
    position: absolute !important;
    z-index: 3;
}
.manga-poster .tick-lang { top: 6px; left: 6px; }
.manga-poster .tick-rate { top: 6px; right: 6px; }

/* ============================================================
   FOCUS (a11y)
   ============================================================ */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--mx-gold);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ============================================================
   MANGA CARDS — hover polish (uses .manga-poster, 112 instances)
   ============================================================ */
.manga-poster {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.4s var(--mx-ease), box-shadow 0.4s var(--mx-ease);
    isolation: isolate;
}
.manga-poster:hover { transform: translateY(-4px); }
body.darkmode .manga-poster:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--mx-border-gold);
}
body:not(.darkmode) .manga-poster:hover {
    box-shadow: 0 20px 50px rgba(39, 17, 75, 0.22), 0 0 0 1px var(--mx-border-gold);
}
.manga-poster img {
    transition: transform 0.7s var(--mx-ease), filter 0.5s var(--mx-ease);
}
.manga-poster:hover img {
    transform: scale(1.05);
    filter: saturate(1.12) contrast(1.02);
}
.manga-poster::after {
    content: '';
    position: absolute;
    inset: -40% -40%;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 1s var(--mx-ease), opacity 0.3s var(--mx-ease);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
}
.manga-poster:hover::after {
    transform: translateX(100%);
    opacity: 1;
}

/* Card progress bar (JS injected) */
.card-progress-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.14);
    z-index: 4;
    overflow: hidden;
}
.card-progress-fill {
    height: 100%;
    background: var(--mx-gradient-gold);
    box-shadow: 0 0 10px rgba(255, 215, 2, 0.55);
}

/* Member pill (specific, 1 instance) */
.btn-login {
    background: var(--mx-gradient-gold) !important;
    color: #1a0f3a !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    box-shadow: var(--mx-shadow-gold) !important;
    transition: transform 0.3s var(--mx-ease), box-shadow 0.3s var(--mx-ease), filter 0.3s var(--mx-ease) !important;
}
.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(255, 215, 2, 0.45) !important;
    filter: brightness(1.05);
}

/* ============================================================
   CHAPTER LIST — readable links, row hover
   ============================================================ */
a[href*="/chapter-"],
.chapter-list a,
.chapter-item a,
.chapters .chap-item a {
    color: #b89aff !important;
    transition: color 0.2s var(--mx-ease);
}
body.darkmode a[href*="/chapter-"]:hover,
body.darkmode .chapter-list a:hover,
body.darkmode .chapter-item a:hover {
    color: var(--mx-gold) !important;
}

/* ============================================================
   DARK MODE — header glass, nav underlines, search, scrollbar
   ============================================================ */
body.darkmode #header {
    transition: background 0.35s var(--mx-ease),
                box-shadow 0.35s var(--mx-ease),
                backdrop-filter 0.35s var(--mx-ease);
    background: rgba(11, 6, 23, 0.55);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border-bottom: 1px solid var(--mx-border-d);
}
body.darkmode #header.header-scrolled {
    background: rgba(11, 6, 23, 0.88);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    border-bottom-color: rgba(255, 215, 2, 0.18);
}
body.darkmode #sub-header {
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--mx-border-d);
}

body.darkmode #header_menu .nav-item > a {
    position: relative;
    transition: color 0.25s var(--mx-ease);
}
body.darkmode #header_menu .nav-item > a::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 10px;
    height: 2px;
    background: var(--mx-gradient-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s var(--mx-ease);
    border-radius: 2px;
}
body.darkmode #header_menu .nav-item > a:hover { color: var(--mx-gold) !important; }
body.darkmode #header_menu .nav-item > a:hover::after { transform: scaleX(1); }

body.darkmode #search .search-content {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--mx-border-d);
    border-radius: 999px;
    transition: border-color 0.3s var(--mx-ease), box-shadow 0.3s var(--mx-ease), background 0.3s var(--mx-ease);
}
body.darkmode #search .search-content:focus-within {
    border-color: var(--mx-gold);
    box-shadow: 0 0 0 4px rgba(255, 215, 2, 0.15), var(--mx-shadow-md);
    background: rgba(255, 255, 255, 0.09);
}
body.darkmode #search .search-input {
    background: transparent !important;
    color: var(--mx-text-d) !important;
    border: none !important;
    box-shadow: none !important;
}
body.darkmode #search .search-input::placeholder { color: rgba(255, 255, 255, 0.45); }

body.darkmode::-webkit-scrollbar { width: 10px; height: 10px; }
body.darkmode::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
body.darkmode::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--mx-gold), var(--mx-gold-deep));
    border-radius: 10px;
}
body.darkmode::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }

/* ============================================================
   LIGHT MODE — fix dark header/trending bleed
   The original styles.css hardcoded dark colors on these elements,
   so we override cleanly when body DOESN'T have .darkmode.
   ============================================================ */
body:not(.darkmode) {
    background: linear-gradient(180deg, #fbf8ff 0%, #f4ecff 100%) !important;
    color: #27114b;
}

body:not(.darkmode) #sub-header {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(39, 17, 75, 0.08) !important;
    color: #27114b !important;
}
body:not(.darkmode) #sub-header a,
body:not(.darkmode) #sub-header .sh-item,
body:not(.darkmode) #sub-header .sh-item strong { color: #27114b !important; }
body:not(.darkmode) #sub-header .sh-item:hover { color: #7c3aed !important; }

body:not(.darkmode) #header {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border-bottom: 1px solid rgba(39, 17, 75, 0.08) !important;
    box-shadow: 0 1px 0 rgba(39, 17, 75, 0.04);
}
body:not(.darkmode) #header.header-scrolled {
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 10px 32px rgba(39, 17, 75, 0.1);
}
body:not(.darkmode) #header #logo,
body:not(.darkmode) #header #header_menu a,
body:not(.darkmode) #header #mobile_menu,
body:not(.darkmode) #header #mobile_search { color: #27114b !important; }
body:not(.darkmode) #header #header_menu a:hover { color: #7c3aed !important; }

body:not(.darkmode) #search .search-content {
    background: rgba(39, 17, 75, 0.05);
    border: 1px solid rgba(39, 17, 75, 0.1);
    border-radius: 999px;
}
body:not(.darkmode) #search .search-input {
    background: transparent !important;
    color: #27114b !important;
    border: none !important;
    box-shadow: none !important;
}
body:not(.darkmode) #search .search-input::placeholder { color: rgba(39, 17, 75, 0.4); }
body:not(.darkmode) #search .search-content:focus-within {
    border-color: var(--mx-gold);
    box-shadow: 0 0 0 4px rgba(255, 215, 2, 0.2);
    background: #fff;
}

/* Light-mode scrollbar */
body:not(.darkmode)::-webkit-scrollbar { width: 10px; height: 10px; }
body:not(.darkmode)::-webkit-scrollbar-track { background: rgba(39, 17, 75, 0.04); }
body:not(.darkmode)::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7c3aed, #27114b);
    border-radius: 10px;
}

/* Trending section dark band fix (light mode) — styles.css hardcodes purple */
body:not(.darkmode) .block_area_trending {
    background: linear-gradient(180deg, #f4ecff 0%, #ffffff 100%) !important;
}
body:not(.darkmode) .block_area_trending .cat-heading { color: #27114b !important; }
body:not(.darkmode) .block_area_trending .item-spot,
body:not(.darkmode) .block_area_trending .number { color: var(--mx-gold-deep) !important; }

/* Hero carousel wrapper — original has hardcoded dark gradient.
   In light mode, soften to a lavender/cream gradient that matches body. */
body:not(.darkmode) .deslide-wrap,
body:not(.darkmode) .swiper-slide.deslide-item::before {
    background-image: linear-gradient(135deg, #f4ecff 0%, #ffffff 40%, #fbf8ff 70%, #ece3ff 100%) !important;
}
body:not(.darkmode) .deslide-cover .deslide-cover-img::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.6) 40%, transparent 70%) !important;
}
body:not(.darkmode) .desi-head-title,
body:not(.darkmode) .desi-description { color: #27114b !important; }
body:not(.darkmode) .scd-item,
body:not(.darkmode) .scd-item a { color: #27114b !important; }

/* Dark-mode keeps the cinematic hero but we add a subtle gold aura */
body.darkmode .deslide-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(800px 300px at 80% 20%, rgba(255, 215, 2, 0.10), transparent 60%);
    z-index: 1;
}

/* ============================================================
   AUTH MODAL — dark glass, gold Sign-in button
   ============================================================ */
body.darkmode #modal-auth .modal-content {
    background: radial-gradient(900px 500px at 30% 0%, rgba(124, 58, 237, 0.25), transparent 60%),
                linear-gradient(180deg, #0b0617 0%, #16003b 100%) !important;
    border: 1px solid var(--mx-border-gold);
    border-radius: var(--mx-radius-xl);
    box-shadow: var(--mx-shadow-lg);
}
body.darkmode #modal-auth .form-control {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--mx-border-d) !important;
    color: var(--mx-text-d) !important;
    border-radius: 10px !important;
    transition: border-color 0.3s var(--mx-ease), box-shadow 0.3s var(--mx-ease) !important;
}
body.darkmode #modal-auth .form-control:focus {
    border-color: var(--mx-gold) !important;
    box-shadow: 0 0 0 3px rgba(255, 215, 2, 0.18) !important;
}

/* Auth modal primary button — gold, scoped strictly */
#modal-auth .btn-primary,
#modal-auth button[type="submit"].btn,
#modal-auth input[type="submit"].btn {
    background: var(--mx-gradient-gold) !important;
    background-color: var(--mx-gold) !important;
    color: #1a0f3a !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    box-shadow: var(--mx-shadow-gold) !important;
    transition: transform 0.25s var(--mx-ease), box-shadow 0.25s var(--mx-ease), filter 0.25s var(--mx-ease) !important;
}
#modal-auth .btn-primary:hover,
#modal-auth button[type="submit"].btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(255, 215, 2, 0.45) !important;
    filter: brightness(1.05);
}

/* ============================================================
   v1.4 POLISH — H1 contrast, hero chips, sub-header text
   ============================================================ */

/* Dark-mode H1 section — brighten dusty lavender text for contrast */
body.darkmode #wrapper h1,
body.darkmode .home-intro h1,
body.darkmode .seo-intro h1,
body.darkmode section h1,
body.darkmode .container > h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 20px rgba(124, 58, 237, 0.3);
}
body.darkmode .home-intro p,
body.darkmode .seo-intro p,
body.darkmode #wrapper > .container > p {
    color: rgba(246, 241, 255, 0.82) !important;
}

/* Hero description text (readable in both modes) */
body.darkmode .desi-description,
body.darkmode .desi-sub-text { color: rgba(255, 255, 255, 0.85) !important; }
body:not(.darkmode) .desi-description,
body:not(.darkmode) .desi-sub-text { color: #4a2b80 !important; }

/* Hero genre chips — light-mode re-theme */
body:not(.darkmode) .scd-genres a,
body:not(.darkmode) .desi-genres a,
body:not(.darkmode) .deslide-item .scd-item {
    background: rgba(39, 17, 75, 0.08) !important;
    border: 1px solid rgba(39, 17, 75, 0.15) !important;
    color: #27114b !important;
}
body:not(.darkmode) .scd-genres a:hover,
body:not(.darkmode) .desi-genres a:hover {
    background: rgba(255, 215, 2, 0.15) !important;
    border-color: var(--mx-gold) !important;
    color: #7c3aed !important;
}

/* Hero "View Info" secondary button — light mode contrast */
body:not(.darkmode) .btn-secondary,
body:not(.darkmode) .deslide-item .btn-outline {
    background: rgba(39, 17, 75, 0.06) !important;
    border: 1px solid rgba(39, 17, 75, 0.2) !important;
    color: #27114b !important;
}
body:not(.darkmode) .btn-secondary:hover,
body:not(.darkmode) .deslide-item .btn-outline:hover {
    background: rgba(255, 215, 2, 0.12) !important;
    border-color: var(--mx-gold) !important;
    color: #7c3aed !important;
    transform: translateY(-1px);
}

/* Dark-mode secondary button: subtle glass */
body.darkmode .btn-secondary,
body.darkmode .deslide-item .btn-outline {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body.darkmode .btn-secondary:hover,
body.darkmode .deslide-item .btn-outline:hover {
    background: rgba(255, 215, 2, 0.12) !important;
    border-color: var(--mx-gold) !important;
    color: var(--mx-gold) !important;
}

/* Sub-header (Read Random, Follow us) — light mode text */
body:not(.darkmode) #sub-header,
body:not(.darkmode) #sub-header .sh-item,
body:not(.darkmode) #sub-header a,
body:not(.darkmode) #sub-header .sh-left a,
body:not(.darkmode) #sub-header .sh-right a,
body:not(.darkmode) #sub-header strong,
body:not(.darkmode) #sub-header .text-dm,
body:not(.darkmode) #sub-header .text-lm { color: #27114b !important; }

body:not(.darkmode) #sub-header .sh-item:hover,
body:not(.darkmode) #sub-header a:hover { color: #7c3aed !important; }

/* Hero banner decorative purple/dark — on light mode switch to subtle */
body:not(.darkmode) .home-header::before,
body:not(.darkmode) .home-header::after {
    background: none !important;
}

/* ============================================================
   v1.5 POLISH — text-home light, hero scrim, trending hover-buttons
   ============================================================ */

/* #text-home — the SEO-intro section below the hero.
   Original has hardcoded dark gradient. Flip it in light mode. */
body:not(.darkmode) #text-home {
    background: transparent !important;
    background-image: none !important;
}
body:not(.darkmode) #text-home h1,
body:not(.darkmode) #text-home h2,
body:not(.darkmode) #text-home p,
body:not(.darkmode) #text-home * { color: #27114b !important; }
body:not(.darkmode) #text-home strong,
body:not(.darkmode) #text-home b { color: #7c3aed !important; }
body:not(.darkmode) #text-home a { color: #7c3aed !important; }
body:not(.darkmode) #text-home .btn { color: #fff !important; }

/* Dark-mode hero text readability scrim — adds a subtle dark gradient
   under hero text so captions stay legible over any cover art. */
body.darkmode .deslide-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(11, 6, 23, 0.85) 0%,
        rgba(11, 6, 23, 0.55) 40%,
        rgba(11, 6, 23, 0.15) 65%,
        transparent 80%);
    z-index: 1;
    pointer-events: none;
}
body.darkmode .desi-head-title,
body.darkmode .desi-sub-text,
body.darkmode .desi-description,
body.darkmode .desi-buttons { position: relative; z-index: 2; }

body.darkmode .desi-head-title {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

/* Trending carousel — Read Now / Info buttons hover-only.
   Keeps clean card aesthetic; buttons slide up on hover. */
.block_area_trending .mpd-buttons {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s var(--mx-ease), transform 0.35s var(--mx-ease);
    pointer-events: none;
}
.block_area_trending .item-spot:hover .mpd-buttons,
.block_area_trending .flw-item:hover .mpd-buttons,
.block_area_trending .manga-poster:hover ~ * .mpd-buttons,
.block_area_trending .prw-item:hover .mpd-buttons,
.block_area_trending .splide__slide:hover .mpd-buttons,
.block_area_trending > div:hover .mpd-buttons {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Keyboard focus — show buttons when any focusable inside card gets focus */
.block_area_trending .mpd-buttons:focus-within,
.block_area_trending *:focus-within > .mpd-buttons {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Mobile — keep buttons always visible (no hover on touch) */
@media (hover: none) {
    .block_area_trending .mpd-buttons {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   MOBILE POLISH
   ============================================================ */
@media (max-width: 767px) {
    .block_area .block_area-header .cat-heading { font-size: 1.2rem; }
    body.darkmode #search .search-content { border-radius: 12px; }
    .tick, .tick-item, .tick-lang, .tick-rate {
        font-size: 10px !important;
        padding: 2px 6px !important;
        max-height: 22px !important;
    }
}