/* --- GRUNDINSTÄLLNINGAR --- */

/* Behåll din befintliga dölj-funktion */
.hide-me {
    display: none !important;
}

/* Ge hela sajten en modern Mello-bakgrund */
body {
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e) fixed !important;
    color: #ffffff !important;
    font-family: 'Poppins', 'Montserrat', sans-serif !important;
}

/* --- MENY & HEADER --- */

/* Gör menyn genomskinlig och modern */
#masthead, .site-header {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gör menyvalen vita/lila vid hover */
.main-navigation a {
    color: #fff !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.main-navigation a:hover {
    color: #9132f0 !important;
}

/* --- MELLO-KORT (PORTAL & MINA RÖSTER) --- */

/* Alla vita kort ska nu kännas som svävande element */
.mello-card, .mello-row, .vote-card, .dt-section {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    color: white !important;
}

/* Snygga till texter inuti korten */
.mello-card h3, .mello-info h3, .mello-card em {
    color: #fff !important;
}

.score-item {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.score-item strong {
    color: #9132f0 !important;
}

/* --- KNAPPAR (GLOW EFFECT) --- */

.btn-vote, .save-btn, .um-button, .dt-btn.active {
    background: linear-gradient(135deg, #6200ee, #9132f0) !important;
    box-shadow: 0 0 20px rgba(145, 50, 240, 0.4) !important;
    border: none !important;
    transition: 0.3s all ease !important;
}

.btn-vote:hover, .save-btn:hover {
    box-shadow: 0 0 35px rgba(145, 50, 240, 0.6) !important;
    transform: translateY(-3px);
}

/* --- ULTIMATE MEMBER (LOGIN/PROFIL) --- */

.um-form {
    background: rgba(15, 12, 41, 0.8) !important;
    border: 1px solid rgba(145, 50, 240, 0.3) !important;
    border-radius: 30px !important;
}

.um-field-label {
    color: #e0e0e0 !important;
}

.um-field-area input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border-radius: 12px !important;
}

/* --- EXTRA MELLO-DETALJER --- */

/* Gör rubriker lite extra festliga (Globalt) */
h1, h2 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(to right, #fff, #9132f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900 !important;
}

/* Scrollbar i lila */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0f0c29; }
::-webkit-scrollbar-thumb { background: #6200ee; border-radius: 5px; }


/* --- FIX FÖR SYNLIGHET I MELLO-PORTAL (VAL-KORT) --- */

/* Tvinga texten i bild-boxarna att vara vit och inte transparent */
.mello-portal .card-inner h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 2px 2px 10px rgba(0,0,0,1), -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 10px 15px !important;
    border-radius: 15px !important;
    display: inline-block !important;
    font-size: 1.8rem !important;
    letter-spacing: 0 !important;
}

.mello-portal .card-inner small {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 1px 1px 5px rgba(0,0,0,1) !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    display: block !important;
    margin-top: 10px !important;
}

.mello-portal .mello-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5) !important;
}

.mello-portal .breadcrumb a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 1px 1px 4px #000 !important;
}