/* ==========================================================
   Star Wars Day Theme (4 Мая / May the 4th Be With You)
   Colors: Jedi Cyan (#00d4ff) + Sith Crimson (#ef4444)
   Wallpaper: Hyperspace Starfield + Dual Lightsabers
   ========================================================== */

body[data-theme="may4th"] {
    --cnp-bg: #020408;
    --cnp-header: #080d16;
    --cnp-surface: #0c1422;
    --cnp-surface2: #141f33;
    --cnp-card-hover: #16243b;
    --cnp-text: #f0f9ff;
    --cnp-secondary: #94a3b8;
    --cnp-muted: #64748b;
    --cnp-yellow: #00d4ff; /* Jedi Cyan */
    --cnp-yellow-hover: #38bdf8;
    --cnp-accent: #ef4444; /* Sith Crimson */
    --cnp-accent-hover: #f87171;
    --cnp-border: rgba(0, 212, 255, 0.25);
    --cnp-border-hover: rgba(239, 68, 68, 0.55);
}

/* Real Character Artwork Side Wallpaper (Darth Vader) */
body[data-theme="may4th"] .cnp-theme-bg {
    background-color: #020408;
    background-image: 
        linear-gradient(90deg, #020408 0%, rgba(2,4,8,0.85) 45%, rgba(2,4,8,0.15) 75%, transparent 100%),
        url('/static/images/themes/may4th_vader.webp');
    background-position: right top;
    background-repeat: no-repeat;
    background-size: auto 100vh;
    opacity: 0.95;
}

body[data-theme="may4th"] .cnp-header {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #00d4ff 0%, #38bdf8 50%, #ef4444 100%) 1;
    box-shadow: 0 4px 25px rgba(0, 212, 255, 0.25);
}

body[data-theme="may4th"] .cnp-brand {
    position: relative;
    display: inline-flex;
    align-items: center;
}
body[data-theme="may4th"] .cnp-brand::after {
    content: "⚔️";
    font-size: 20px;
    position: absolute;
    top: -10px;
    right: -24px;
    filter: drop-shadow(0 0 8px #00d4ff);
    pointer-events: none;
}

body[data-theme="may4th"] .cnp-badge,
body[data-theme="may4th"] .cnp-btn-primary {
    background: linear-gradient(135deg, #00d4ff 0%, #ef4444 100%) !important;
    color: #ffffff !important;
    border: none;
    box-shadow: 0 2px 14px rgba(0, 212, 255, 0.45);
}

body[data-theme="may4th"] .cnp-theme-event-banner {
    background: linear-gradient(90deg, #0369a1 0%, #00d4ff 50%, #991b1b 100%) !important;
    color: #ffffff !important;
}
body[data-theme="may4th"] .cnp-theme-event-banner span::before { content: "🌌 [MAY THE 4TH BE WITH YOU] "; }

body[data-theme="may4th"],
body[data-theme="may4th"] * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cline x1='4' y1='22' x2='22' y2='4' stroke='%2300d4ff' stroke-width='4' stroke-linecap='round' filter='drop-shadow(0 0 6px %2300d4ff)'/%3E%3C/svg%3E") 22 4, auto;
}
body[data-theme="may4th"] a,
body[data-theme="may4th"] a *,
body[data-theme="may4th"] button,
body[data-theme="may4th"] button * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cline x1='4' y1='22' x2='22' y2='4' stroke='%23ef4444' stroke-width='4' stroke-linecap='round' filter='drop-shadow(0 0 6px %23ef4444)'/%3E%3C/svg%3E") 22 4, pointer !important;
}