/* =========================================
   USER & AUTH STYLES
   ========================================= */

/* --- LOGIN MODAL --- */
.auth-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px);
    z-index: 999999; /* Top of everything */
    display: none; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s ease;
    padding: 20px; /* Prevent edge touching on mobile */
    box-sizing: border-box;
}
.auth-modal-overlay.active { display: flex; opacity: 1; }

.auth-box {
    background: #09090b;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 40px;
    border-radius: 24px;
    width: 100%; max-width: 400px;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    transform: translateY(20px); transition: transform 0.3s ease;
    
    /* Mobile Landscape Scroll */
    max-height: 90vh;
    overflow-y: auto;
}
.auth-modal-overlay.active .auth-box { transform: translateY(0); }

.close-auth {
    position: absolute; top: 15px; right: 15px;
    background: transparent; border: none; color: #666; font-size: 1.5rem; cursor: pointer;
    z-index: 10;
}

.auth-box h2 { font-size: 2rem; margin-bottom: 10px; color: #fff; font-weight: 800; }
.auth-box p { color: #888; margin-bottom: 30px; font-size: 0.9rem; }

.auth-field { margin-bottom: 15px; }
.auth-field input {
    width: 100%; padding: 15px; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1); color: #fff; border-radius: 8px;
    font-size: 1rem; outline: none; transition: all 0.2s ease;
    box-sizing: border-box;
}

/* Focus State */
.auth-field input:focus { 
    border-color: #bef264; 
    background: var(--bg-input-focus, rgba(255,255,255,0.1));
}

.auth-btn {
    width: 100%; padding: 15px; background: #bef264; color: #000;
    font-weight: 800; border: none; border-radius: 50px; cursor: pointer;
    font-size: 1rem; margin-top: 10px; transition: transform 0.2s;
}
.auth-btn:hover { transform: scale(1.02); }
.auth-btn:disabled { opacity: 0.7; cursor: wait; }

.auth-footer { margin-top: 20px; font-size: 0.8rem; color: #666; }
.auth-footer u { color: #fff; cursor: pointer; text-decoration: none; border-bottom: 1px solid #fff; }

#auth-msg { margin-top: 15px; font-size: 0.85rem; min-height: 1.2em; font-weight: 600; }

/* --- [NEW] SETTINGS PAGE COMPONENTS --- */

/* Toggle Switch (Email Opt-in) */
.tkr-toggle-switch {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.tkr-toggle-switch input { display: none; } /* Hide default checkbox */

/* [FIX] Added position: relative to container so the ::after (dot) stays inside */
.tkr-toggle-switch input + span {
    position: relative;
    display: flex;
    align-items: center;
}

.tkr-toggle-switch input + span::before {
    content: '';
    display: inline-block;
    width: 40px; height: 20px;
    background: #333;
    border-radius: 20px;
    margin-right: 10px;
    transition: background 0.3s;
    vertical-align: middle;
}

.tkr-toggle-switch input + span::after {
    content: '';
    position: absolute;
    left: 2px; 
    top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

/* Checked State */
.tkr-toggle-switch input:checked + span::before { background: #bef264; }
.tkr-toggle-switch input:checked + span::after { transform: translate(20px, -50%); }

/* Settings Inputs (Standardized) */
.tkr-settings-wrapper input[type="text"],
.tkr-settings-wrapper input[type="number"],
.tkr-settings-wrapper input[type="date"],
.tkr-settings-wrapper input[type="password"],
.tkr-settings-wrapper select {
    transition: border-color 0.2s, background 0.2s;
}

.tkr-settings-wrapper input:focus,
.tkr-settings-wrapper select:focus {
    border-color: #bef264 !important;
    background: rgba(255,255,255,0.05) !important;
    outline: none;
}

/* [FIX] FORCE DARK DROPDOWN OPTIONS */
.tkr-settings-wrapper select option {
    background-color: #09090b;
    color: #ffffff;
    padding: 10px;
}