/* ===== PREMIUM DARK THEME FOR AUTH PAGES ===== */

/* Base Auth Layout - Higher Specificity */
html, body {
    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #1a1a1a 100%) !important;
    background-attachment: fixed !important;
    color: #f5f5f5 !important;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove any default spacing from all elements */
* {
    box-sizing: border-box !important;
}

/* Fix the main container */
.d-flex.flex-column.flex-column-fluid.bgi-position-y-bottom.position-x-center.bgi-no-repeat.bgi-size-contain.bgi-attachment-fixed.authImage {
    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #1a1a1a 100%) !important;
    background-image: none !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Override any background images */
.d-flex.flex-column.flex-column-fluid.bgi-position-y-bottom.position-x-center.bgi-no-repeat.bgi-size-contain.bgi-attachment-fixed.authImage {
    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #1a1a1a 100%) !important;
    background-image: none !important;
    min-height: 100vh !important;
}

/* Auth Container - Higher Specificity */
.login-section,
.login-section.bg-white,
div.login-section.bg-white.overflow-hidden.position-relative.h-100 {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    background-color: transparent !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Fix row and column spacing */
.row {
    margin: 0 !important;
    padding: 0 !important;
}

/* Add proper spacing for form rows */
.row:not(:last-child) {
    margin-bottom: 20px !important;
}

/* Ensure proper gap between form fields in rows */
.row .form-group {
    margin-bottom: 25px !important;
}

/* Add spacing between adjacent columns */
.row > [class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Specific spacing for name fields row */
.row .col-md-6:first-of-type {
    padding-right: 15px !important;
}

.row .col-md-6:last-of-type {
    padding-left: 15px !important;
}

.col-md-6,
.col-12,
.col-xl-6 {
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix any Bootstrap spacing */
.p-0 {
    padding: 0 !important;
}

.m-0 {
    margin: 0 !important;
}

/* Fix the dropdown positioning */
.dropdown.ms-auto.z-index-9 {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1000 !important;
    margin: 0 !important;
}

/* Remove any unwanted lists */
ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Remove old background vectors and replace with modern gradient */
.login-section .top-vector,
.login-section .bottom-vector {
    display: none !important;
}

/* Modern gradient overlay */
.login-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 68, 68, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(255, 68, 68, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* Left Image Section */
.login-img {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    overflow: hidden;
}

.login-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 68, 68, 0.1) 0%, transparent 50%);
    z-index: 1;
}

.login-img img {
    border-radius: 0 !important;
    opacity: 0.8;
    filter: brightness(0.7) contrast(1.2);
    transition: all 0.3s ease;
}

/* Login Form Container */
.login-form {
    background: transparent !important;
    position: relative;
    z-index: 2;
    padding: 20px 20px !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .login-form {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* Logo and App Name Section - Professional Clean Design */
.login-app-name {
    margin-bottom: 40px !important;
    padding: 20px !important;
}

.login-app-name .image img {
    max-width: 50px !important;
    max-height: 50px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    filter: brightness(1.2) contrast(1.1) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 4px !important;
}

.login-app-name .image:hover img {
    transform: scale(1.02) !important;
    filter: brightness(1.4) contrast(1.2) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Logo Only - Remove Title */
.login-app-name span,
.login-app-name .text-gray-900,
.text-gray-900.fs-1.fw-bold {
    display: none !important;
}

/* Logo Styling - 50% Larger and Clean */
.login-app-name .image img {
    max-width: 180px !important;
    max-height: 180px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 24px !important;
    transition: all 0.3s ease !important;
    filter: brightness(1.2) contrast(1.1) !important;
    background: transparent !important;
    padding: 0 !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.login-app-name .image:hover img {
    transform: scale(1.02) !important;
    filter: brightness(1.3) contrast(1.1) !important;
    background: transparent !important;
}

/* Logo Container - Center Only Logo */
.login-app-name {
    margin-bottom: 15px !important;
    padding: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.login-app-name .image {
    margin: 0 auto 10px auto !important;
    display: block !important;
}

/* Add Descriptive Text Below Logo - Dynamic based on page */
.login-app-name::after {
    content: "Sign in with your email and password to access your account" !important;
    display: block !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-top: 10px !important;
    line-height: 1.4 !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Register page specific text */
body[data-page="register"] .login-app-name::after,
.login-section[data-page="register"] .login-app-name::after,
.register-section .login-app-name::after {
    content: "Create your account to get started with KP Cards" !important;
}

/* Register Page Specific Styling */
.register-section,
.register-section.bg-white {
    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #1a1a1a 100%) !important;
    background-color: transparent !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Add the same gradient overlay as login page */
.register-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 68, 68, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(255, 68, 68, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.register-form {
    background: transparent !important;
    position: relative;
    z-index: 2;
    padding: 20px 20px !important;
    margin: 0 !important;
}

/* Fix the white background container */
.register-section .bg-white {
    background: transparent !important;
    color: #ffffff !important;
}

/* Fix all text in register page */
.register-section h1,
.register-section h2,
.register-section h3,
.register-section h4,
.register-section h5,
.register-section h6,
.register-section p,
.register-section label,
.register-section .form-label,
.register-section .text-center,
.register-section .fw-bold,
.register-section .fs-4 {
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.2) !important;
}

/* Fix logo and title on register page */
.register-section .text-gray-900,
.register-section .fs-1.fw-bold {
    display: none !important;
}

.register-section .image img {
    max-width: 180px !important;
    max-height: 180px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 24px !important;
    transition: all 0.3s ease !important;
    filter: brightness(1.2) contrast(1.1) !important;
    background: transparent !important;
    padding: 0 !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Remove any old background vectors on register page */
.register-section .top-vector,
.register-section .bottom-vector {
    display: none !important;
}

/* Forgot password page specific text */
body[data-page="forgot-password"] .login-app-name::after,
.login-section[data-page="forgot-password"] .login-app-name::after {
    content: "Enter your email to reset your password" !important;
}

/* Reset password page specific text */
body[data-page="reset-password"] .login-app-name::after,
.login-section[data-page="reset-password"] .login-app-name::after {
    content: "Set your new password to continue" !important;
}

@media (max-width: 767px) {
    .login-app-name span,
    .login-app-name .text-gray-900 {
        font-size: 1.75rem !important;
    }
    
    .login-app-name {
        padding: 15px !important;
        margin-bottom: 30px !important;
    }
    
    .login-app-name .image img {
        max-width: 150px !important;
        max-height: 150px !important;
    }
}

@media (max-width: 575px) {
    .login-app-name span,
    .login-app-name .text-gray-900 {
        font-size: 1.5rem !important;
    }
    
    .login-app-name .image img {
        max-width: 135px !important;
        max-height: 135px !important;
    }
}

/* Form Heading */
.login-section h1 {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.8rem !important;
    margin: 12px 0 15px 0 !important;
    text-align: center !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 767px) {
    .login-section h1 {
        font-size: 1.75rem !important;
        margin-bottom: 1.5rem !important;
    }
}

/* Form Labels */
.form-label {
    color: #f5f5f5 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.3px;
}

.required::after {
    content: " *";
    color: #ff4444 !important;
    font-weight: bold;
}

/* Form Controls */
.form-control,
.form-select {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
    border: 1px solid #444444 !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    padding: 12px 18px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 48px !important;
}

.form-control:focus,
.form-select:focus {
    background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%) !important;
    border-color: #ff4444 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.2) !important;
    transform: translateY(-1px);
}

.form-control::placeholder {
    color: #999999 !important;
    font-weight: 400;
}

/* Phone Number Field Layout Fixes - Enhanced */
.input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0 !important;
    position: relative !important;
}

.input-group .form-select {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 140px !important;
    max-width: 160px !important;
    border-radius: 12px 0 0 12px !important;
    border-right: none !important;
    padding-right: 12px !important;
    font-size: 14px !important;
    text-align: center !important;
}

.input-group .form-control {
    flex: 1 !important;
    border-radius: 0 12px 12px 0 !important;
    border-left: none !important;
    padding-left: 20px !important;
    padding-right: 16px !important;
}

.input-group .form-select:focus {
    border-right: 1px solid #ff4444 !important;
    z-index: 2 !important;
}

.input-group .form-control:focus {
    border-left: 1px solid #ff4444 !important;
    z-index: 2 !important;
}

/* Phone Code Picker Specific Styling */
.input-group-text {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
    border: 1px solid #444444 !important;
    color: #ffffff !important;
    border-radius: 12px 0 0 12px !important;
    padding: 16px 12px !important;
    font-size: 14px !important;
    min-width: 140px !important;
    max-width: 160px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    text-align: center !important;
}

/* Fix phone input placeholder spacing */
.input-group .form-control::placeholder {
    color: #999999 !important;
    font-weight: 400 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Ensure proper spacing for phone number input */
.input-group .form-control[type="tel"],
.input-group .form-control[type="text"][placeholder*="Number"],
.input-group .form-control[placeholder*="Phone"] {
    padding-left: 20px !important;
    padding-right: 16px !important;
    text-indent: 0 !important;
}

/* Fix international phone input library spacing */
.iti {
    width: 100% !important;
    position: relative !important;
}

.iti__flag-container {
    padding-left: 12px !important;
    padding-right: 8px !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
    border-radius: 12px 0 0 12px !important;
    border: 1px solid #444444 !important;
    border-right: none !important;
    min-width: 140px !important;
    max-width: 160px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.iti__selected-flag {
    padding-left: 12px !important;
    padding-right: 8px !important;
    min-width: 140px !important;
    max-width: 160px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.iti__country-name {
    margin-left: 8px !important;
    display: none !important;
}

.iti__dial-code {
    margin-left: 4px !important;
    margin-right: 8px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

/* Fix phone input field spacing */
.iti__tel-input {
    padding-left: 170px !important;
    padding-right: 16px !important;
    border-radius: 12px !important;
    border: 1px solid #444444 !important;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
    color: #ffffff !important;
    width: 100% !important;
    height: 56px !important;
    font-size: 15px !important;
}

.iti__tel-input:focus {
    border-color: #ff4444 !important;
    box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.2) !important;
    outline: none !important;
}

/* Ensure proper gap between country code and number */
.iti + input,
input[type="tel"] {
    padding-left: 170px !important;
    margin-left: 0 !important;
}

/* Fix any phone input with intl-tel-input */
input[type="tel"][data-intl-tel-input],
input[type="tel"].iti__tel-input {
    padding-left: 170px !important;
    text-indent: 0 !important;
}

/* Override any conflicting styles */
.iti__tel-input::placeholder {
    color: #999999 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Fix form spacing and layout */
.element {
    margin-bottom: 12px !important;
}

.mb-sm-7,
.mb-4 {
    margin-bottom: 12px !important;
}

.mb-5 {
    margin-bottom: 15px !important;
}

.mb-10 {
    margin-bottom: 18px !important;
}

.mt-4 {
    margin-top: 12px !important;
}

.mt-5 {
    margin-top: 15px !important;
}

/* Improve form field spacing */
.form-group {
    margin-bottom: 12px !important;
}

/* Better row spacing for side-by-side fields */
.row .col-md-6,
.row .col-sm-6 {
    margin-bottom: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Specific spacing for name fields */
.row .col-md-6:first-child {
    padding-right: 15px !important;
}

.row .col-md-6:last-child {
    padding-left: 15px !important;
}

/* Ensure proper gap between side-by-side form fields */
.row .col-md-6 .form-group,
.row .col-sm-6 .form-group {
    margin-bottom: 25px !important;
    padding: 0 5px !important;
}

/* Add gap between adjacent form fields */
.row .col-md-6 + .col-md-6,
.row .col-sm-6 + .col-sm-6 {
    margin-left: 0 !important;
}

/* Specific fix for name fields spacing */
.row .col-md-6 .form-label,
.row .col-sm-6 .form-label {
    margin-bottom: 10px !important;
    display: block !important;
}

/* Improve button spacing */
.btn-section {
    margin-top: 15px !important;
    gap: 12px !important;
}

/* Fix form width and centering */
.width-540 {
    max-width: 540px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* Fix checkbox alignment */
.form-check {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.form-check-input {
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

.form-check-label {
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Fix for overlapping hints and labels */
.form-label,
label {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    display: block !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.2) !important;
}

.form-text,
small,
.hint {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 12px !important;
    margin-top: 6px !important;
    display: block !important;
    line-height: 1.4 !important;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.1) !important;
}

/* Fix All Text Visibility - More Comprehensive */
.login-section .text-gray-900,
.login-section .text-gray-700,
.login-section .text-gray-600,
.login-section .text-gray-500,
.login-section .text-gray-400,
.login-section .text-gray-300,
.login-section .text-gray-200,
.login-section .text-gray-100,
.login-section h1,
.login-section h2,
.login-section h3,
.login-section h4,
.login-section h5,
.login-section h6,
.login-section p,
.login-section label,
.login-section .form-label {
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.2) !important;
    font-weight: 600 !important;
}

/* Specific fix for headings and form labels */
.login-section .fs-1,
.login-section .fs-2,
.login-section .fs-3,
.login-section .fs-4,
.login-section .fs-5,
.login-section .fs-6 {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
    font-weight: 700 !important;
}

/* Fix black text that's hard to read */
.login-section .text-dark,
.login-section .text-black,
.login-section [style*="color: black"],
.login-section [style*="color: #000"],
.login-section h1.text-center,
.login-section h1.mb-7,
.login-section .text-center.mb-7,
.login-section h1[class*="text-center"],
.login-section h1[class*="mb-7"] {
    color: #ffffff !important;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.2) !important;
}

/* Specific fix for "Forgot Password?" heading */
.login-section h1.text-center.mb-7,
.login-section h1.mb-7.text-center,
.login-section h1:contains("Forgot Password"),
.login-section h1 {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
    font-weight: 700 !important;
}

/* Forgot Password Page Specific Styling */
.forget-password-section,
.forget-password-section.bg-white {
    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #1a1a1a 100%) !important;
    background-color: transparent !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Add the same gradient overlay as login page */
.forget-password-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 68, 68, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(255, 68, 68, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.forget-password-form {
    background: transparent !important;
    position: relative;
    z-index: 2;
    padding: 20px 20px !important;
    margin: 0 !important;
}

/* Fix the white background container */
.forget-password-section .bg-white {
    background: transparent !important;
    color: #ffffff !important;
}

/* Ensure forgot password page uses same background as login */
.forget-password-section,
.forget-password-section .d-flex.flex-column.flex-column-fluid.bgi-position-y-bottom.position-x-center.bgi-no-repeat.bgi-size-contain.bgi-attachment-fixed.authImage {
    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #1a1a1a 100%) !important;
    background-image: none !important;
    background-attachment: fixed !important;
}

/* Remove any old background vectors on forgot password page */
.forget-password-section .top-vector,
.forget-password-section .bottom-vector {
    display: none !important;
}

/* Fix all text in forgot password page */
.forget-password-section h1,
.forget-password-section h2,
.forget-password-section h3,
.forget-password-section h4,
.forget-password-section h5,
.forget-password-section h6,
.forget-password-section p,
.forget-password-section label,
.forget-password-section .form-label,
.forget-password-section .text-center,
.forget-password-section .fw-bold,
.forget-password-section .fs-4 {
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.2) !important;
}

/* Specific fix for "Forgot Password?" heading on forgot password page */
.forget-password-section h1.text-center.mb-7,
.forget-password-section .bg-white h1,
.forget-password-section .bg-white .text-center.mb-7 {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
}

/* Fix logo and title on forgot password page */
.forget-password-section .text-gray-900,
.forget-password-section .fs-1.fw-bold {
    display: none !important;
}

.forget-password-section .image img {
    max-width: 180px !important;
    max-height: 180px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 24px !important;
    transition: all 0.3s ease !important;
    filter: brightness(1.2) contrast(1.1) !important;
    background: transparent !important;
    padding: 0 !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Password Input Icon */
.input-password-hide {
    color: #cccccc !important;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.input-password-hide:hover {
    color: #ff4444 !important;
}

/* Checkbox Styling */
.form-check-input {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
    border: 1px solid #444444 !important;
    border-radius: 6px !important;
    width: 18px !important;
    height: 18px !important;
    transition: all 0.3s ease;
}

.form-check-input:checked {
    background: linear-gradient(135deg, #ff4444 0%, #cc3333 100%) !important;
    border-color: #ff4444 !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 2px rgba(255, 68, 68, 0.2) !important;
}

.form-check-label {
    color: #cccccc !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    margin-left: 8px !important;
    cursor: pointer;
}

/* Login Button - Higher Specificity */
.login-btn,
.btn-primary,
button.btn.login-btn,
button[type="submit"].btn.login-btn,
.btn.btn-primary,
button.btn.btn-primary {
    background: linear-gradient(135deg, #ff4444 0%, #cc3333 100%) !important;
    background-color: #ff4444 !important;
    color: #ffffff !important;
    border: none !important;
    border-color: transparent !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-size: 15px !important;
    padding: 16px 32px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    min-height: 56px !important;
}

.login-btn:hover,
.btn-primary:hover,
button.btn.login-btn:hover,
button[type="submit"].btn.login-btn:hover,
.btn.btn-primary:hover,
button.btn.btn-primary:hover {
    background: linear-gradient(135deg, #ff6666 0%, #ff4444 100%) !important;
    background-color: #ff6666 !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.login-btn:focus,
.btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.3) !important;
}

/* Social Login Buttons */
.btn-danger {
    background: linear-gradient(135deg, #db4437 0%, #c23321 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 14px 24px !important;
    transition: all 0.3s ease !important;
    min-height: 52px !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #e57368 0%, #db4437 100%) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.btn-info {
    background: linear-gradient(135deg, #4267B2 0%, #365899 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 14px 24px !important;
    transition: all 0.3s ease !important;
    min-height: 52px !important;
}

.btn-info:hover {
    background: linear-gradient(135deg, #5578c4 0%, #4267B2 100%) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

/* Links */
.link-info,
a.link-info {
    color: #ff4444 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.3s ease;
    border-radius: 4px !important;
    padding: 2px 4px !important;
}

.link-info:hover,
a.link-info:hover {
    color: #ff6666 !important;
    background: rgba(255, 68, 68, 0.1) !important;
    text-decoration: none !important;
}

/* Text Colors */
.text-gray-700,
.text-gray-900 {
    color: #cccccc !important;
}

.text-muted {
    color: #999999 !important;
}

/* Language Dropdown */
.dropdown-toggle {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
    border: 1px solid #444444 !important;
    border-radius: 8px !important;
    color: #f5f5f5 !important;
    font-weight: 500 !important;
    transition: all 0.3s ease;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
    background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%) !important;
    border-color: #ff4444 !important;
    color: #ff4444 !important;
    box-shadow: none !important;
}

.dropdown-menu {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
    border: 1px solid #444444 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
}

.dropdown-item {
    color: #f5f5f5 !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    margin: 2px 8px !important;
}

.dropdown-item:hover,
.dropdown-item.active {
    background: rgba(255, 68, 68, 0.1) !important;
    color: #ff4444 !important;
}

/* Footer */
footer {
    background: transparent !important;
    border-top: 1px solid #333333;
    padding: 20px 0 !important;
}

.copyright {
    color: #999999 !important;
    font-size: 14px !important;
}

.copyright a {
    color: #ff4444 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease;
}

.copyright a:hover {
    color: #ff6666 !important;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .login-section {
        padding: 20px 0 !important;
    }
    
    .login-section .element {
        max-width: 100% !important;
        padding: 0 20px !important;
    }
    
    .px-6 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    .login-img {
        max-height: 300px !important;
        min-height: 300px !important;
    }
}

@media (max-width: 575px) {
    .login-section .element {
        padding: 0 15px !important;
    }
    
    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .form-control {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
    
    .login-btn {
        padding: 14px 24px !important;
        font-size: 14px !important;
        min-height: 50px !important;
    }
}

/* Flash Messages */
.alert {
    background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%) !important;
    border: 1px solid #444444 !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
}

.alert-success {
    background: linear-gradient(135deg, #1a3a1a 0%, #2a4a2a 100%) !important;
    border-color: #44ff44 !important;
    color: #aaffaa !important;
}

.alert-danger {
    background: linear-gradient(135deg, #3a1a1a 0%, #4a2a2a 100%) !important;
    border-color: #ff4444 !important;
    color: #ffaaaa !important;
}

.alert-warning {
    background: linear-gradient(135deg, #3a3a1a 0%, #4a4a2a 100%) !important;
    border-color: #ffaa44 !important;
    color: #ffffaa !important;
}

.alert-info {
    background: linear-gradient(135deg, #1a1a3a 0%, #2a2a4a 100%) !important;
    border-color: #4444ff !important;
    color: #aaaaff !important;
}

/* Smooth Animations */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Focus States for Accessibility */
*:focus {
    outline: 2px solid #ff4444 !important;
    outline-offset: 2px !important;
}

/* Smooth Page Transitions */
.login-section {
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Professional Loading States */
.form-control:disabled,
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* RTL Support */
.login-section[dir="rtl"] .me-3 {
    margin-left: 0.75rem !important;
    margin-right: 0 !important;
}

.login-section[dir="rtl"] .end-0 {
    left: 0 !important;
    right: auto !important;
}

.login-section[dir="rtl"] .me-4 {
    margin-left: 1rem !important;
    margin-right: 0 !important;
}

.login-section[dir="rtl"] .form-check-input {
    float: right !important;
    margin-left: 0.937em !important;
    margin-right: 0 !important;
}

/* Dark Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #444444;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff4444;
}

/* Additional Overrides for Stubborn Elements */
.bg-white {
    background-color: transparent !important;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
}

/* Override any purple/violet button colors */
.btn {
    background-color: #ff4444 !important;
}

.btn:not(.btn-danger):not(.btn-info):not(.btn-success):not(.btn-warning) {
    background: linear-gradient(135deg, #ff4444 0%, #cc3333 100%) !important;
    background-color: #ff4444 !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.btn:not(.btn-danger):not(.btn-info):not(.btn-success):not(.btn-warning):hover {
    background: linear-gradient(135deg, #ff6666 0%, #ff4444 100%) !important;
    background-color: #ff6666 !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* Force dark theme on all auth-related containers */
.d-flex.flex-column,
.container-fluid,
.row,
.col-md-6,
.col-12 {
    background: transparent !important;
    background-color: transparent !important;
}

/* Override any existing button styling */
button[type="submit"] {
    background: linear-gradient(135deg, #ff4444 0%, #cc3333 100%) !important;
    background-color: #ff4444 !important;
    color: #ffffff !important;
    border: none !important;
    border-color: transparent !important;
}

button[type="submit"]:hover {
    background: linear-gradient(135deg, #ff6666 0%, #ff4444 100%) !important;
    background-color: #ff6666 !important;
    color: #ffffff !important;
    border-color: transparent !important;
}