/* ============================
   MgBEE extra styles
   Logo glow + theme toggle
   Universal for all pages
   ============================ */

/* Logo wrapper */
.mgbee-logo-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Logo image size */
.mgbee-logo-wrap img {
    height: 42px;
    width: auto;
    display: block;
}

/* Glowing SVG logo */
.mgbee-logo-glow {
    filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.8))
            drop-shadow(0 0 16px rgba(37, 99, 235, 0.9));
    animation: mgbeeLogoPulse 2.4s ease-in-out infinite;
}

@keyframes mgbeeLogoPulse {
    0% {
        filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.4))
                drop-shadow(0 0 8px rgba(37, 99, 235, 0.5));
        transform: translateY(0);
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(96, 165, 250, 1))
                drop-shadow(0 0 26px rgba(37, 99, 235, 1));
        transform: translateY(-1px);
    }
    100% {
        filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.4))
                drop-shadow(0 0 8px rgba(37, 99, 235, 0.5));
        transform: translateY(0);
    }
}

/* ============================
   Theme toggle button
   ============================ */

.theme-toggle {
    margin-left: auto;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #1f2933;
    background: #020617;
    color: #e5e7eb;
    cursor: pointer;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.theme-toggle:hover {
    background: #0b1220;
}

/* ============================
   Light theme overrides
   (Base theme from style.css is dark)
   We only override important parts
   ============================ */

/* Default is dark: html[data-theme="dark"] uses your existing style.css */

html[data-theme="light"] body {
    background: #f9fafb;
    color: #0f172a;
}

/* Header in light mode */
html[data-theme="light"] .header {
    background: #f9fafb;
    border-bottom-color: #e5e7eb;
}

/* Top filter bar in light mode */
html[data-theme="light"] .top-filter-bar {
    background: #f9fafb;
    border-bottom-color: #e5e7eb;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

/* Cards and main content */
html[data-theme="light"] .post-card,
html[data-theme="light"] .page-box {
    background: #ffffff;
    border-color: #e5e7eb;
}

html[data-theme="light"] .post-title {
    color: #0f172a;
}

html[data-theme="light"] .post-desc {
    color: #111827;
}

/* Links or buttons that use .btn-link */
html[data-theme="light"] .btn-link {
    background: #1d4ed8;
    color: #ffffff;
}

/* Theme toggle in light mode */
html[data-theme="light"] .theme-toggle {
    background: #e5e7eb;
    color: #0f172a;
    border-color: #cbd5e1;
}

/* PREMIUM NEON FOOTER */
.footer {
    padding: 18px 20px;
    text-align: center;
    font-size: 12.5px;
    color: #dbeafe;

    background: #020617;
    border-top: 1px solid rgba(148,163,184,0.25);

    position: relative;
    overflow: visible;

    /* Neon text glow */
    text-shadow:
        0 0 4px #3b82f6,
        0 0 8px #60a5fa,
        0 0 14px rgba(59,130,246,0.75);

    /* Fade & float animation */
    opacity: 0;
    animation: neonFooterFade 1.2s ease-out forwards;
}

/* NEON UNDERGLOW BAR */
.footer::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 55%;
    height: 3px;
    border-radius: 999px;

    background: radial-gradient(circle at center,
        rgba(96,165,250,0.85),
        rgba(37,99,235,0.4),
        transparent 70%
    );
    filter: blur(6px);

    opacity: 0;
    animation: neonFooterGlow 2.6s ease-in-out infinite 1.2s;
}

/* fade + slight upwards movement */
@keyframes neonFooterFade {
    0% {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* pulsing glow bar */
@keyframes neonFooterGlow {
    0%, 100% {
        opacity: 0.25;
        transform: translateX(-50%) scaleX(1);
    }
    50% {
        opacity: 0.75;
        transform: translateX(-50%) scaleX(1.25);
    }
}

/* Neon MEGA button glow upgrade */
.btn-link {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

/* outer neon aura */
.btn-link::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 0% 0%, rgba(251,191,36,0.4), transparent 55%),
        radial-gradient(circle at 100% 0%, rgba(248,113,113,0.4), transparent 55%),
        radial-gradient(circle at 50% 100%, rgba(59,130,246,0.45), transparent 60%);
    opacity: 0;
    filter: blur(8px);
    z-index: -1;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* diagonal shine bar */
.btn-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent,
        rgba(255,255,255,0.7),
        transparent
    );
    opacity: 0;
    transform: skewX(-20deg);
}

/* hover state - neon */
.btn-link:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow:
        0 0 20px rgba(251,191,36,0.65),
        0 0 40px rgba(248,113,113,0.4),
        0 0 0 1px rgba(15,23,42,0.95);
}

.btn-link:hover::before {
    opacity: 1;
    filter: blur(10px);
}

/* trigger the shine sweep only on hover */
.btn-link:hover::after {
    opacity: 1;
    animation: megaButtonShine 0.9s linear forwards;
}

@keyframes megaButtonShine {
    0% {
        transform: translateX(0) skewX(-20deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateX(260%) skewX(-20deg);
        opacity: 0;
    }
}

/* Neon shimmer overlay on post cards */
.post-card {
    position: relative; /* already set, but safe */
    overflow: hidden;
}

/* vertical shimmer line */
.post-card::after {
    content: "";
    position: absolute;
    top: -120%;
    left: 0;
    width: 100%;
    height: 120%;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(248,250,252,0.12) 40%,
        rgba(191,219,254,0.3) 50%,
        rgba(248,250,252,0.12) 60%,
        transparent 100%
    );
    opacity: 0;
}

/* run shimmer only on hover */
.post-card:hover::after {
    opacity: 1;
    animation: cardNeonShimmer 0.9s ease-out forwards;
}

@keyframes cardNeonShimmer {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* NSFW auto blur wrapper */
.post-image-wrapper.nsfw-blur {
    position: relative;
    cursor: pointer;
}

/* blurred image by default */
.post-image-wrapper.nsfw-blur img {
    filter: blur(16px) saturate(0.6);
    transform: scale(1.06);
    transition: filter 0.35s ease, transform 0.35s ease;
}

/* overlay label */
.post-image-wrapper.nsfw-blur::before {
    content: "NSFW - Tap to reveal";
    position: absolute;
    inset: auto 12px 14px 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15,23,42,0.9);
    color: #e5e7eb;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    box-shadow:
        0 0 10px rgba(59,130,246,0.8),
        0 0 20px rgba(248,113,113,0.6);
    border: 1px solid rgba(59,130,246,0.9);
    pointer-events: none;
    opacity: 0.95;
}

/* neon border hint */
.post-image-wrapper.nsfw-blur {
    box-shadow:
        0 0 14px rgba(59,130,246,0.6),
        0 0 28px rgba(24,24,27,1);
}

/* revealed state */
.post-image-wrapper.nsfw-blur.revealed img {
    filter: none;
    transform: scale(1.0);
}

.post-image-wrapper.nsfw-blur.revealed::before {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* neon pulse for meta badge and tag cloud badges */
.post-meta-badge,
.tag-cloud a {
    position: relative;
    overflow: hidden;
}

/* outer ring glow */
.post-meta-badge::after,
.tag-cloud a::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: radial-gradient(circle at center, rgba(59,130,246,0.8), transparent 70%);
    opacity: 0;
    filter: blur(6px);
    z-index: -1;
    transition: opacity 0.3s ease;
}

/* subtle idle animation for the main tag on cards */
.post-meta-badge {
    animation: tagNeonPulse 3.4s ease-in-out infinite;
}

/* stronger glow on hover */
.tag-cloud a:hover::after {
    opacity: 1;
}

/* pulse for card tag badge */
@keyframes tagNeonPulse {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(37,99,235,0.65), 0 0 0 1px rgba(15,23,42,0.9);
    }
    50% {
        transform: translateY(-1px);
        box-shadow: 0 0 14px rgba(59,130,246,0.9), 0 0 0 1px rgba(15,23,42,0.9);
    }
}

/* Clean neon header: compact, no giant band behind search bar */
.header {
    padding: 16px 20px;
    background: linear-gradient(
        90deg,
        rgba(15,23,42,1) 0%,
        rgba(15,23,42,0.96) 25%,
        rgba(15,23,42,0.94) 50%,
        rgba(30,27,75,0.96) 75%,
        rgba(46,16,101,0.98) 100%
    );
    box-shadow:
        0 10px 26px rgba(0,0,0,0.9),
        0 0 0 1px rgba(15,23,42,0.9);
    border-bottom: 1px solid rgba(51,65,85,0.8);

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: sticky;
    top: 0;
    z-index: 200;
    height: 70px;
    box-sizing: border-box;
}

/* subtle bottom glow line, thinner and tighter */
.header::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 78%;
    height: 2px;
    border-radius: 999px;
    background: radial-gradient(circle at center, rgba(96,165,250,0.7), transparent 70%);
    filter: blur(4px);
    opacity: 0.5;
    pointer-events: none;
}

/* logo already has glow in your CSS - we just enhance hover */
.mgbee-logo-glow {
    will-change: transform, filter;
}

.mgbee-logo-glow:hover {
    filter:
        drop-shadow(0 0 14px rgba(248,113,113,0.9))
        drop-shadow(0 0 22px rgba(59,130,246,0.9));
}

/* neon sweep around search bar */
.filter-search {
    position: relative;
    overflow: hidden;
}

/* animated border layer */
.filter-search::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from 180deg,
        rgba(59,130,246,0.0),
        rgba(59,130,246,0.7),
        rgba(236,72,153,0.7),
        rgba(56,189,248,0.7),
        rgba(59,130,246,0.0)
    );
    opacity: 0;
    filter: blur(4px);
    pointer-events: none;
}

/* active state when search has focus */
.filter-search:focus-within::before {
    opacity: 0.75;
    animation: searchBorderSweep 4s linear infinite;
}

@keyframes searchBorderSweep {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* slight lift/glow for grid area when any card is hovered */
.post-grid:hover {
    transform: translateY(-2px);
    transition: transform 0.25s ease;
}

/* glassy top filter bar under header */
.top-filter-bar {
    position: sticky;
    top: 70px; /* same as .header height */
    z-index: 150;

    background: rgba(2,6,23,0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    padding: 10px 20px 12px;
    border-bottom: 1px solid rgba(30,41,59,0.7);
    box-shadow: 0 10px 25px rgba(0,0,0,0.9);
}

/* if you use particles with ::before on post-grid, higher opacity when hovered */
.post-grid:hover::before {
    opacity: 0.85;
}
/* FIX MOBILE SEARCH BLOCKING */
.filter-search {
    position: relative;
    z-index: 10;
}

.filter-search::before {
    pointer-events: none !important; /* neon ring no longer blocks taps */
}

.filter-search input[type="text"] {
    position: relative;
    z-index: 20;
}

/* iOS Safari fix */
@supports (-webkit-touch-callout: none) {
    .filter-search {
        overflow: visible !important;
    }
}