/* ==========================
   Modal System - Core Styles
   ========================== */

:root {
    /* Color Variables */
    --primary-purple: #9333ea;
    --primary-blue: #3b82f6;
    --primary-orange: #fb923c;
    --primary-red: #ef4444;
    --primary-green: #10b981;

    /* Glass Effect Variables */
    --glass-bg-dark: rgba(15, 15, 35, 0.9);
    --glass-bg-light: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);

    /* Modal Dimensions */
    --modal-max-width: 28rem;
    --modal-min-height: 32rem;
    --modal-padding: 2rem;
    --modal-z-index: 99999;

    /* Animation Durations */
    --modal-enter-duration: 500ms;
    --modal-leave-duration: 300ms;
}

/* ==========================
   High Priority Modal Override
   Force all modals to appear above everything
   ========================== */

.modal-overlay.register-modal,
.modal-overlay.login-modal,
.modal-overlay.forgot-password-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important; /* Higher than any other element */
    isolation: isolate !important;
    contain: layout style paint !important;
}

/* Prevent body scrolling when modal is open */
body:has(.modal-overlay) {
    overflow: hidden !important;
}

/* ==========================
   Base Modal Overlay
   ========================== */

.modal-overlay {
    /* Positioning - اهم النقاط */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: var(--modal-z-index) !important;

    /* Centering */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;

    /* Background */
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;

    /* Prevent scroll issues */
    overflow: hidden !important;

    /* Isolation */
    isolation: isolate !important;

    /* Force modal to be on top */
    contain: layout style paint !important;
}

/* ==========================
   Base Modal Container
   ========================== */

.modal-container {
    /* Dimensions - تجاوب مع كل مقاسات الشاشات */
    width: 100% !important;
    max-width: var(--modal-max-width) !important;
    min-height: var(--modal-min-height) !important;
    max-height: 90vh !important;

    /* Glass Effect */
    background: linear-gradient(135deg,
        var(--glass-bg-dark),
        rgba(20, 20, 40, 0.95),
        var(--glass-bg-dark)
    ) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;

    /* Border and Shadow */
    border: 1px solid var(--glass-border) !important;
    border-radius: 1rem !important;

    /* Layout */
    padding: var(--modal-padding) !important;
    position: relative !important;
    overflow-y: auto !important;

    /* Prevent event bubbling */
    pointer-events: auto !important;

    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

/* ==========================
   Modal Responsive Design
   ========================== */

/* Mobile Phones */
@media (max-width: 480px) {
    .modal-overlay {
        padding: 0.5rem !important;
    }

    .modal-container {
        max-width: calc(100vw - 1rem) !important;
        min-height: auto !important;
        max-height: 95vh !important;
        padding: 1.5rem !important;
        border-radius: 0.75rem !important;
    }
}

/* Tablets */
@media (min-width: 481px) and (max-width: 768px) {
    .modal-container {
        max-width: 90vw !important;
        padding: 1.75rem !important;
    }
}

/* Desktop */
@media (min-width: 769px) {
    .modal-container {
        max-width: var(--modal-max-width) !important;
        padding: var(--modal-padding) !important;
    }
}

/* Large Screens */
@media (min-width: 1200px) {
    .modal-container {
        max-width: 30rem !important;
    }
}

/* ==========================
   Modal Close Button
   ========================== */

.modal-close {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 10 !important;

    /* Enhanced Glass Effect */
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1.125rem !important;

    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;

    width: 2.5rem !important;
    height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.5rem !important;

    /* Shadow Effects */
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.modal-close:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05) rotate(90deg) !important;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.modal-close:active {
    transform: scale(0.95) rotate(90deg) !important;
    transition: all 0.1s ease !important;
}

/* Close Button Content Styling */
.modal-close i {
    font-size: 1.25rem !important;
    line-height: 1 !important;
    display: block !important;
}

.modal-close .close-fallback {
    font-size: 1.75rem !important;
    line-height: 1 !important;
    font-weight: 300 !important;
    display: none !important;
}

/* Show fallback if FontAwesome fails to load */
.modal-close i.fas.fa-times:empty + .close-fallback,
.modal-close i:not([class*="fa"]) + .close-fallback {
    display: block !important;
}

.modal-close i.fas.fa-times:empty {
    display: none !important;
}

/* Fallback using CSS pseudo-element if all else fails */
.modal-close::before {
    content: "×" !important;
    font-size: 1.75rem !important;
    line-height: 1 !important;
    font-weight: 300 !important;
    display: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Show pseudo-element if no other content is visible */
.modal-close:empty::before {
    display: block !important;
}

/* RTL Support for Close Button */
[dir="rtl"] .modal-close {
    right: auto !important;
    left: 1rem !important;
}

/* Forgot Password Modal Close Button */
.forgot-password-modal .modal-close {
    background: rgba(251, 146, 60, 0.1) !important;
    border-color: rgba(251, 146, 60, 0.2) !important;
    color: rgba(251, 146, 60, 0.9) !important;
    box-shadow:
        0 4px 15px rgba(251, 146, 60, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.forgot-password-modal .modal-close:hover {
    background: rgba(251, 146, 60, 0.2) !important;
    border-color: rgba(251, 146, 60, 0.4) !important;
    color: white !important;
    box-shadow:
        0 6px 20px rgba(251, 146, 60, 0.4),
        0 0 25px rgba(251, 146, 60, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ==========================
   Modal Header Styles
   ========================== */

.modal-header {
    text-align: center !important;
    margin-bottom: 2rem !important;
}

.modal-icon {
    width: 4rem !important;
    height: 4rem !important;
    margin: 0 auto 1rem !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    color: white !important;
    position: relative !important;
    transform: rotate(3deg) !important;
}

.modal-title {
    font-size: 1.875rem !important;
    font-weight: bold !important;
    margin-bottom: 0.75rem !important;
    font-family: 'Orbitron', monospace !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    line-height: 1.2 !important;
}

.modal-subtitle {
    color: rgba(209, 213, 219, 1) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    max-width: 20rem !important;
    margin: 0 auto !important;
}

/* ==========================
   Form Styles
   ========================== */

.form-group {
    margin-bottom: 1.5rem !important;
}

.form-label {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: rgba(209, 213, 219, 1) !important;
    margin-bottom: 0.5rem !important;
}

[dir="rtl"] .form-label {
    text-align: right !important;
}

.glass-input {
    width: 100% !important;
    padding: 0.875rem 1rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.5rem !important;
    color: white !important;
    font-size: 0.875rem !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.glass-input:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 25px rgba(255, 255, 255, 0.1), 0 4px 25px rgba(0, 0, 0, 0.2) !important;
}

.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ==========================
   Button Styles
   ========================== */

.glass-button {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    border: none !important;
    border-radius: 0.5rem !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;

    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;

    position: relative !important;
    overflow: hidden !important;
}

.glass-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

.glass-button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ==========================
   Login Modal Specific Styles
   ========================== */

.login-modal-overlay {
    /* Specific positioning for login */
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--modal-z-index) !important;
}

.login-modal .modal-container {
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(147, 51, 234, 0.4),
        0 0 100px rgba(147, 51, 234, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.login-modal .modal-icon {
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-blue)) !important;
    box-shadow: 0 0 30px rgba(147, 51, 234, 0.6), 0 0 15px rgba(59, 130, 246, 0.4) !important;
    animation: pulse 2s infinite !important;
}

.login-modal .modal-title {
    background: linear-gradient(to right, rgba(168, 85, 247, 1), rgba(147, 197, 253, 1)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    text-shadow: 0 0 20px rgba(147, 51, 234, 0.3) !important;
}

.login-modal .glass-input:focus {
    border-color: rgba(147, 51, 234, 0.4) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 25px rgba(147, 51, 234, 0.4), 0 4px 25px rgba(0, 0, 0, 0.2) !important;
}

.login-modal .glass-button {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.8), rgba(59, 130, 246, 0.8)) !important;
    border: 1px solid rgba(147, 51, 234, 0.3) !important;
    box-shadow: 0 8px 25px rgba(147, 51, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.login-modal .glass-button:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(147, 51, 234, 0.9)) !important;
    box-shadow: 0 12px 35px rgba(147, 51, 234, 0.5), 0 0 40px rgba(147, 51, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Login Modal Close Button */
.login-modal .modal-close {
    background: rgba(147, 51, 234, 0.1) !important;
    border-color: rgba(147, 51, 234, 0.2) !important;
    color: rgba(147, 51, 234, 0.9) !important;
    box-shadow:
        0 4px 15px rgba(147, 51, 234, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.login-modal .modal-close:hover {
    background: rgba(147, 51, 234, 0.2) !important;
    border-color: rgba(147, 51, 234, 0.4) !important;
    color: white !important;
    box-shadow:
        0 6px 20px rgba(147, 51, 234, 0.4),
        0 0 25px rgba(147, 51, 234, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ==========================
   Register Modal Specific Styles
   ========================== */

.register-modal {
    /* Force correct positioning */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: var(--modal-z-index) !important;
    isolation: isolate !important;
}

.register-modal .modal-container {
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 100px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.register-modal .modal-icon {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-green)) !important;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.6), 0 0 15px rgba(16, 185, 129, 0.4) !important;
    animation: pulse 2s infinite !important;
}

.register-modal .modal-title {
    background: linear-gradient(to right, rgba(59, 130, 246, 1), rgba(16, 185, 129, 1)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.3) !important;
}

.register-modal .glass-input:focus {
    border-color: rgba(59, 130, 246, 0.4) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 25px rgba(59, 130, 246, 0.4), 0 4px 25px rgba(0, 0, 0, 0.2) !important;
}

.register-modal .glass-button {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(16, 185, 129, 0.8)) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.register-modal .glass-button:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(59, 130, 246, 0.9)) !important;
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4), 0 0 30px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Register Modal Close Button */
.register-modal .modal-close {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    color: rgba(59, 130, 246, 0.9) !important;
    box-shadow:
        0 4px 15px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.register-modal .modal-close:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: white !important;
    box-shadow:
        0 6px 20px rgba(59, 130, 246, 0.4),
        0 0 25px rgba(59, 130, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ==========================
   Forgot Password Modal Specific Styles
   ========================== */

.forgot-password-modal .modal-container {
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(251, 146, 60, 0.4),
        0 0 100px rgba(251, 146, 60, 0.3),
        0 0 150px rgba(239, 68, 68, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.forgot-password-modal .modal-icon {
    background: linear-gradient(135deg, var(--primary-orange), var(--primary-red)) !important;
    box-shadow: 0 0 30px rgba(251, 146, 60, 0.6), 0 0 15px rgba(239, 68, 68, 0.4) !important;
    animation: pulse 2s infinite !important;
}

.forgot-password-modal .modal-title {
    background: linear-gradient(to right, rgba(251, 146, 60, 1), rgba(239, 68, 68, 1)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    text-shadow: 0 0 20px rgba(251, 146, 60, 0.3) !important;
}

.forgot-password-modal .glass-input:focus {
    border-color: rgba(251, 146, 60, 0.4) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 25px rgba(251, 146, 60, 0.4), 0 4px 25px rgba(0, 0, 0, 0.2) !important;
}

.forgot-password-modal .glass-button {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.8), rgba(239, 68, 68, 0.8)) !important;
    border: 1px solid rgba(251, 146, 60, 0.3) !important;
    box-shadow: 0 8px 25px rgba(251, 146, 60, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.forgot-password-modal .glass-button:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(251, 146, 60, 0.9)) !important;
    box-shadow: 0 12px 35px rgba(251, 146, 60, 0.5), 0 0 40px rgba(251, 146, 60, 0.4), 0 0 30px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ==========================
   Animated Glass Orbs
   ========================== */

.glass-orb {
    position: absolute !important;
    border-radius: 50% !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    pointer-events: none !important;
}

.glass-orb-1 {
    width: 200px !important;
    height: 200px !important;
    top: -100px !important;
    left: -100px !important;
    animation: float-1 6s ease-in-out infinite !important;
}

.glass-orb-2 {
    width: 150px !important;
    height: 150px !important;
    top: 50% !important;
    right: -75px !important;
    animation: float-2 8s ease-in-out infinite reverse !important;
}

.glass-orb-3 {
    width: 120px !important;
    height: 120px !important;
    bottom: -60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    animation: float-3 7s ease-in-out infinite !important;
}

/* Login Modal Orbs */
.login-modal .glass-orb {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.15), rgba(59, 130, 246, 0.1)) !important;
    border-color: rgba(147, 51, 234, 0.2) !important;
    box-shadow: 0 0 40px rgba(147, 51, 234, 0.2) !important;
}

/* Register Modal Orbs */
.register-modal .glass-orb {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.1)) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.2) !important;
}

/* Forgot Password Modal Orbs */
.forgot-password-modal .glass-orb {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(239, 68, 68, 0.1)) !important;
    border-color: rgba(251, 146, 60, 0.2) !important;
    box-shadow: 0 0 40px rgba(251, 146, 60, 0.2) !important;
}

/* ==========================
   Animations
   ========================== */

@keyframes pulse {
    0%, 100% {
        transform: rotate(3deg) scale(1) !important;
    }
    50% {
        transform: rotate(3deg) scale(1.05) !important;
    }
}

@keyframes float-1 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) !important;
    }
    33% {
        transform: translate(30px, -30px) rotate(120deg) !important;
    }
    66% {
        transform: translate(-20px, 20px) rotate(240deg) !important;
    }
}

@keyframes float-2 {
    0%, 100% {
        transform: translate(0, 0) scale(1) !important;
    }
    50% {
        transform: translate(-40px, -20px) scale(1.1) !important;
    }
}

@keyframes float-3 {
    0%, 100% {
        transform: translateX(-50%) translateY(0) rotate(0deg) !important;
    }
    25% {
        transform: translateX(-50%) translateY(-15px) rotate(90deg) !important;
    }
    75% {
        transform: translateX(-50%) translateY(15px) rotate(270deg) !important;
    }
}

/* ==========================
   Success and Error States
   ========================== */

.success-message {
    animation: successFadeIn 0.5s ease-out !important;
    text-align: center !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.success-message .modal-icon {
    background: linear-gradient(135deg, var(--primary-green), #059669) !important;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.6) !important;
}

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

.error-notification {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9)) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    color: white !important;
    font-size: 0.875rem !important;
    animation: errorShake 0.5s ease-in-out !important;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0) !important; }
    25% { transform: translateX(-5px) !important; }
    75% { transform: translateX(5px) !important; }
}

/* ==========================
   Social Login Buttons
   ========================== */

.social-login {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
    margin-bottom: 2rem !important;
}

.social-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    color: white !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.social-btn:hover {
    transform: scale(1.05) !important;
}

.social-btn i {
    margin-right: 0.5rem !important;
    font-size: 1.125rem !important;
}

[dir="rtl"] .social-btn i {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* ==========================
   Form Footer and Dividers
   ========================== */

.form-divider {
    display: flex !important;
    align-items: center !important;
    margin: 2rem 0 !important;
}

.form-divider::before,
.form-divider::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: rgba(156, 163, 175, 0.5) !important;
}

.form-divider span {
    padding: 0 1rem !important;
    color: rgba(156, 163, 175, 1) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.form-footer {
    text-align: center !important;
    font-size: 0.875rem !important;
    color: rgba(209, 213, 219, 1) !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(156, 163, 175, 0.3) !important;
    margin-top: 2rem !important;
}

.form-footer a {
    color: rgba(168, 85, 247, 1) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.form-footer a:hover {
    color: rgba(147, 51, 234, 1) !important;
}

/* ==========================
   Utility Classes
   ========================== */

.font-orbitron {
    font-family: 'Orbitron', monospace !important;
}

.text-center {
    text-align: center !important;
}

[dir="rtl"] .text-center {
    text-align: center !important;
}

/* ==========================
   High Contrast Mode Support
   ========================== */

@media (prefers-contrast: high) {
    .modal-container {
        border: 2px solid white !important;
        background: rgba(0, 0, 0, 0.95) !important;
    }

    .glass-input {
        border: 2px solid rgba(255, 255, 255, 0.8) !important;
        background: rgba(0, 0, 0, 0.8) !important;
    }

    .glass-button {
        border: 2px solid white !important;
    }
}

/* ==========================
   Reduced Motion Support
   ========================== */

@media (prefers-reduced-motion: reduce) {
    .glass-orb,
    .modal-icon,
    .modal-container {
        animation: none !important;
    }

    .glass-button:hover,
    .social-btn:hover {
        transform: none !important;
    }
}

/* ==========================
   Print Styles
   ========================== */

@media print {
    .modal-overlay {
        display: none !important;
    }
}

/* ==========================
   Focus Management
   ========================== */

.modal-overlay:focus-within .modal-container {
    outline: 2px solid rgba(59, 130, 246, 0.8) !important;
    outline-offset: 2px !important;
}

/* ==========================
   Loading States
   ========================== */

.loading-spinner {
    display: inline-block !important;
    width: 1rem !important;
    height: 1rem !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    border-top-color: white !important;
    animation: spin 1s ease-in-out infinite !important;
}

@keyframes spin {
    to {
        transform: rotate(360deg) !important;
    }
}