/* ====== Responsive Styles ====== */

/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--gray-700);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius);
    transition: var(--transition);
}

.mobile-menu-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-lg);
    z-index: 999;
}

.mobile-menu.active {
    display: block;
}

.mobile-menu-content {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mobile-nav-link {
    padding: var(--space-3) var(--space-4);
    color: var(--gray-700);
    text-decoration: none;
    border-radius: var(--radius);
    transition: var(--transition);
    font-weight: 500;
}

.mobile-nav-link:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.mobile-nav-primary {
    background: var(--gradient-primary);
    color: white;
    text-align: center;
    margin-top: var(--space-2);
}

.mobile-nav-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), #4338ca);
    color: white;
    transform: translateY(-1px);
}

.mobile-auth-links {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--gray-200);
}

/* Tablet Styles */
@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
    
    .form-layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    .auth-header {
        padding: var(--space-3) var(--space-4);
    }

    .header-content {
        flex-direction: row;
        justify-content: space-between;
    }

    .nav-links {
        display: none;
    }
    
    .mobile-menu-btn {
        display: block;
    }

    .auth-main {
        padding: var(--space-4);
    }

    .auth-container {
        max-width: 100%;
    }

    .auth-card {
        padding: var(--space-6);
    }

    .account-type-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }
    
    .user-menu {
        display: none;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .auth-card {
        padding: var(--space-4);
    }

    .auth-title {
        font-size: var(--font-size-2xl);
    }

    .auth-subtitle {
        font-size: var(--font-size-base);
    }
    
    .mobile-menu {
        top: 70px;
    }
}