/* Dark Mode Login Page Overrides */
body {
    background-color: #201A1A !important;
    /* Material Surface Lowest */
    background-image:
        radial-gradient(circle at 10% 10%, rgba(92, 10, 10, 0.45) 0%, transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(255, 222, 165, 0.2) 0%, transparent 40%) !important;
    color: #f8fafc !important;
    /* Slate 50 */
}

.login-card-shadow {
    box-shadow:
        0 20px 40px -5px rgba(0, 0, 0, 0.5),
        0 10px 20px -5px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    /* Thin border ring */
}

.blob-custom {
    mix-blend-mode: screen;
    /* Changed from multiply */
    filter: blur(80px);
    opacity: 0.5;
}

/* Premium Form Styles */
.form-input-premium {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: all 0.3s ease;
}

.form-input-premium::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.form-input-premium:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.1);
}

/* Fix for Select Options in Dark Mode */
.form-input-premium option {
    background-color: #0f172a;
    /* Dark Slate */
    color: #f1f5f9;
    /* Light Text */
    padding: 10px;
}

/* Force modern appearance on selects */
select.form-input-premium {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: none !important;
    /* Remove native arrow */
}

/* Fix Autofill styling to match dark theme */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px #1e293b inset !important;
    /* Slate 800 */
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: white;
}

.btn-premium {
    background: linear-gradient(135deg, #d32f2f 0%, #ff8f00 100%);
    /* Red to Gold Gradient */
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.btn-premium:hover::before {
    left: 100%;
}

.btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(255, 215, 0, 0.3);
}

/* Specific text overrides */
.text-gray-900 {
    color: #f1f5f9 !important;
    /* Slate 100 */
}

.text-gray-700 {
    color: #cbd5e1 !important;
    /* Slate 300 */
}

.text-gray-600 {
    color: #94a3b8 !important;
    /* Slate 400 */
}

.text-gray-500 {
    color: #64748b !important;
    /* Slate 500 */
}

.bg-white {
    background-color: rgba(32, 26, 26, 0.8) !important;
    /* Material Surface Lowest with opacity */
}

.border-gray-100 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.bg-red-50 {
    background-color: rgba(220, 38, 38, 0.1) !important;
}

.text-red-600 {
    color: #f87171 !important;
    /* Red 400 */
}