/* ================================================
   COMPLETE SUN THEME OVERRIDE - AGGRESSIVE MODE
   ================================================ */

/* FORCE MAIN BACKGROUND - BROWN/ORANGE GRADIENT */
body,
html,
#root,
main,
div[class*="bg-"],
.bg-first {
    background: linear-gradient(180deg, #1a0d00 0%, #2d1a00 50%, #4a2800 100%) !important;
    background-color: #2d1a00 !important;
}

/* FORCE ALL WHITE SECTIONS TO BROWN */
div[style*="background-color: rgb(255, 255, 255)"],
div[style*="background-color:#fff"],
div[style*="background: white"],
div[style*="background:white"],
div[style*="background-color: white"],
section,
.section {
    background: #2d1a00 !important;
    background-color: #2d1a00 !important;
}

/* SUN DECORATION - REPLACE MOON */
.moon {
    width: 200px !important;
    height: 200px !important;
    background: radial-gradient(circle, #ffffff 0%, #ffd700 30%, #ff8c00 60%, rgba(255, 140, 0, 0) 100%) !important;
    box-shadow: 
        0 0 60px rgba(255, 215, 0, 0.8),
        0 0 120px rgba(255, 140, 0, 0.6),
        0 0 180px rgba(255, 140, 0, 0.4) !important;
    border-radius: 50% !important;
    animation: pulseSun 4s ease-in-out infinite !important;
}

/* Sun rays */
.moon::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 120% !important;
    height: 120% !important;
    transform: translate(-50%, -50%) !important;
    background: repeating-conic-gradient(
        from 0deg,
        transparent 0deg 8deg,
        rgba(255, 215, 0, 0.3) 8deg 10deg
    ) !important;
    border-radius: 50% !important;
    animation: rotateSun 30s linear infinite !important;
}

@keyframes pulseSun {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.9;
        box-shadow: 
            0 0 60px rgba(255, 215, 0, 0.8),
            0 0 120px rgba(255, 140, 0, 0.6);
    }
    50% { 
        transform: scale(1.1); 
        opacity: 1;
        box-shadow: 
            0 0 80px rgba(255, 215, 0, 1),
            0 0 160px rgba(255, 140, 0, 0.8);
    }
}

@keyframes rotateSun {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* STARS BACKGROUND */
body::before,
#root::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 80% 10%, white, transparent),
        radial-gradient(2px 2px at 90% 60%, white, transparent),
        radial-gradient(1px 1px at 33% 90%, white, transparent),
        radial-gradient(2px 2px at 15% 80%, white, transparent) !important;
    background-size: 200% 200% !important;
    background-position: 0 0, 40% 60%, 130% 270%, 70% 100% !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* ENSURE CONTENT IS ABOVE BACKGROUND */
header,
main > *,
section,
div[class*="container"],
.logo,
nav {
    position: relative !important;
    z-index: 10 !important;
}

/* CARD/MODAL BACKGROUNDS */
div[class*="bg-[#ffffff"],
div[class*="backdrop-blur"],
.form-card,
.feature-card {
    background: rgba(74, 40, 0, 0.4) !important;
    backdrop-filter: blur(15px) !important;
    border-color: rgba(255, 140, 0, 0.3) !important;
}

/* HIDE TELEGRAM */
.telegram-icon,
[class*="telegram"],
a[href*="t.me"],
a[href*="telegram"] {
    display: none !important;
    visibility: hidden !important;
}

/* WALLET ADAPTER - WORKING + SUN THEME */
.wallet-adapter-modal-wrapper {
    background: linear-gradient(135deg, #2d1a00 0%, #4a2800 100%) !important;
    border: 2px solid rgba(255, 140, 0, 0.3) !important;
}

.wallet-adapter-button,
.wallet-adapter-modal-list .wallet-adapter-button {
    pointer-events: auto !important;
    cursor: pointer !important;
    background-color: rgba(255, 140, 0, 0.1) !important;
}

.wallet-adapter-button:hover {
    background-color: rgba(255, 140, 0, 0.2) !important;
}