/* Mobile Authentication Pages Styles - Bafalılar E-Commerce */
/* Primary Color: #2563eb, Hover: #1d4ed8 */

/* ============================================
   Authentication Pages Layout - Mobile
   ============================================ */
@media (max-width: 767.98px) {
    .auth-page {
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px 15px !important;
        background: linear-gradient(135deg, #f0f7ff 0%, #f8f9fa 100%) !important;
    }
    
    .auth-container {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   Login Page - Mobile
   ============================================ */
@media (max-width: 767.98px) {
    .login-card {
        background: #fff !important;
        border-radius: 16px !important;
        padding: 30px 20px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
    }
    
    .auth-logo {
        text-align: center !important;
        margin-bottom: 30px !important;
    }
    
    .auth-logo img {
        max-width: 150px !important;
        height: auto !important;
    }
    
    .auth-logo svg {
        max-width: 150px !important;
        height: auto !important;
    }
    
    .auth-header {
        text-align: center !important;
        margin-bottom: 30px !important;
    }
    
    .auth-title {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #333 !important;
        margin-bottom: 8px !important;
    }
    
    .auth-subtitle {
        font-size: 14px !important;
        color: #666 !important;
    }
    
    /* Form groups */
    .auth-form-group {
        margin-bottom: 20px !important;
    }
    
    .auth-label {
        display: block !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin-bottom: 8px !important;
    }
    
    .auth-input {
        width: 100% !important;
        padding: 14px 16px !important;
        border: 2px solid #e5e7eb !important;
        border-radius: 10px !important;
        font-size: 16px !important;
        color: #333 !important;
        background: #fff !important;
        transition: all 0.3s !important;
        min-height: 50px !important;
    }
    
    .auth-input:focus {
        outline: none !important;
        border-color: #2563eb !important;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
    }
    
    .auth-input::placeholder {
        color: #9ca3af !important;
    }
    
    /* Input with icon */
    .auth-input-wrapper {
        position: relative !important;
    }
    
    .auth-input-icon {
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #9ca3af !important;
        font-size: 18px !important;
    }
    
    .auth-input-wrapper .auth-input {
        padding-left: 48px !important;
    }
    
    /* Password toggle */
    .password-toggle {
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: 40px !important;
        background: none !important;
        border: none !important;
        color: #9ca3af !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
    }
    
    .password-toggle:active {
        color: #2563eb !important;
    }
    
    /* Remember me checkbox */
    .auth-remember {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 20px !important;
    }
    
    .remember-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .remember-checkbox {
        width: 20px !important;
        height: 20px !important;
        cursor: pointer !important;
    }
    
    .remember-label {
        font-size: 14px !important;
        color: #666 !important;
        cursor: pointer !important;
    }
    
    .forgot-password-link {
        font-size: 14px !important;
        color: #2563eb !important;
        text-decoration: none !important;
        font-weight: 600 !important;
    }
    
    .forgot-password-link:active {
        color: #1d4ed8 !important;
    }
    
    /* Submit button */
    .auth-submit-btn {
        width: 100% !important;
        min-height: 52px !important;
        padding: 16px !important;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        transition: all 0.3s !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
    }
    
    .auth-submit-btn:active {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important;
    }
    
    .auth-submit-btn:disabled {
        background: #9ca3af !important;
        cursor: not-allowed !important;
        transform: none !important;
        box-shadow: none !important;
    }
    
    /* Social login */
    .auth-divider {
        display: flex !important;
        align-items: center !important;
        text-align: center !important;
        margin: 25px 0 !important;
    }
    
    .auth-divider::before,
    .auth-divider::after {
        content: '' !important;
        flex: 1 !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    .auth-divider-text {
        padding: 0 15px !important;
        font-size: 13px !important;
        color: #9ca3af !important;
        font-weight: 600 !important;
    }
    
    .social-login-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 25px !important;
    }
    
    .social-login-btn {
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        border: 2px solid #e5e7eb !important;
        border-radius: 10px !important;
        background: #fff !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        transition: all 0.3s !important;
    }
    
    .social-login-btn:active {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    }
    
    .social-login-btn i {
        font-size: 20px !important;
    }
    
    .social-login-btn.google {
        color: #db4437 !important;
        border-color: #db4437 !important;
    }
    
    .social-login-btn.facebook {
        color: #4267B2 !important;
        border-color: #4267B2 !important;
    }
    
    .social-login-btn.twitter {
        color: #1DA1F2 !important;
        border-color: #1DA1F2 !important;
    }
    
    /* Auth footer */
    .auth-footer {
        text-align: center !important;
        margin-top: 25px !important;
        padding-top: 25px !important;
        border-top: 1px solid #e5e7eb !important;
    }
    
    .auth-footer-text {
        font-size: 14px !important;
        color: #666 !important;
    }
    
    .auth-footer-link {
        color: #2563eb !important;
        text-decoration: none !important;
        font-weight: 700 !important;
    }
    
    .auth-footer-link:active {
        color: #1d4ed8 !important;
    }
    
    /* Error messages */
    .auth-error {
        background: #fee2e2 !important;
        color: #dc2626 !important;
        padding: 12px 16px !important;
        border-radius: 8px !important;
        margin-bottom: 20px !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .auth-error i {
        font-size: 18px !important;
    }
    
    .auth-success {
        background: #dcfce7 !important;
        color: #16a34a !important;
        padding: 12px 16px !important;
        border-radius: 8px !important;
        margin-bottom: 20px !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .auth-success i {
        font-size: 18px !important;
    }
}

/* ============================================
   Register Page - Mobile
   ============================================ */
@media (max-width: 767.98px) {
    .register-card {
        background: #fff !important;
        border-radius: 16px !important;
        padding: 30px 20px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
    }
    
    /* Two column layout for name fields */
    .auth-form-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }
    
    .auth-form-row .auth-form-group {
        margin-bottom: 0 !important;
    }
    
    /* Terms checkbox */
    .auth-terms {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }
    
    .terms-checkbox {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
        margin-top: 2px !important;
        cursor: pointer !important;
    }
    
    .terms-label {
        font-size: 13px !important;
        color: #666 !important;
        line-height: 1.5 !important;
    }
    
    .terms-label a {
        color: #2563eb !important;
        text-decoration: none !important;
        font-weight: 600 !important;
    }
}

/* ============================================
   Forgot Password Page - Mobile
   ============================================ */
@media (max-width: 767.98px) {
    .forgot-password-card {
        background: #fff !important;
        border-radius: 16px !important;
        padding: 30px 20px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
        text-align: center !important;
    }
    
    .forgot-password-icon {
        width: 80px !important;
        height: 80px !important;
        background: #f0f7ff !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 20px !important;
        color: #2563eb !important;
        font-size: 36px !important;
    }
    
    .forgot-password-description {
        font-size: 14px !important;
        color: #666 !important;
        margin-bottom: 25px !important;
        line-height: 1.6 !important;
    }
    
    .back-to-login {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 20px !important;
        color: #2563eb !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    
    .back-to-login:active {
        color: #1d4ed8 !important;
    }
}

/* ============================================
   Reset Password Page - Mobile
   ============================================ */
@media (max-width: 767.98px) {
    .reset-password-card {
        background: #fff !important;
        border-radius: 16px !important;
        padding: 30px 20px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
    }
    
    /* Password strength indicator */
    .password-strength {
        margin-top: 10px !important;
    }
    
    .password-strength-label {
        font-size: 13px !important;
        color: #666 !important;
        margin-bottom: 6px !important;
    }
    
    .password-strength-bar {
        height: 4px !important;
        background: #e5e7eb !important;
        border-radius: 2px !important;
        overflow: hidden !important;
    }
    
    .password-strength-fill {
        height: 100% !important;
        background: #9ca3af !important;
        transition: all 0.3s !important;
        width: 0% !important;
    }
    
    .password-strength-fill.weak {
        width: 33% !important;
        background: #dc2626 !important;
    }
    
    .password-strength-fill.medium {
        width: 66% !important;
        background: #f59e0b !important;
    }
    
    .password-strength-fill.strong {
        width: 100% !important;
        background: #16a34a !important;
    }
    
    .password-requirements {
        margin-top: 12px !important;
        padding: 12px !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
    }
    
    .password-requirements-title {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin-bottom: 8px !important;
    }
    
    .password-requirements-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .password-requirements-list li {
        font-size: 12px !important;
        color: #666 !important;
        margin-bottom: 4px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .password-requirements-list li i {
        color: #9ca3af !important;
        font-size: 14px !important;
    }
    
    .password-requirements-list li.valid i {
        color: #16a34a !important;
    }
}

/* ============================================
   Email Verification Page - Mobile
   ============================================ */
@media (max-width: 767.98px) {
    .email-verification-card {
        background: #fff !important;
        border-radius: 16px !important;
        padding: 30px 20px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
        text-align: center !important;
    }
    
    .verification-icon {
        width: 100px !important;
        height: 100px !important;
        background: #dcfce7 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 20px !important;
        color: #16a34a !important;
        font-size: 48px !important;
    }
    
    .verification-message {
        font-size: 15px !important;
        color: #666 !important;
        margin-bottom: 25px !important;
        line-height: 1.6 !important;
    }
    
    .verification-email {
        display: inline-block !important;
        padding: 8px 16px !important;
        background: #f0f7ff !important;
        color: #2563eb !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
        margin-bottom: 25px !important;
    }
    
    .resend-verification {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px 24px !important;
        background: #f8f9fa !important;
        color: #666 !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }
    
    .resend-verification:active {
        background: #e9ecef !important;
    }
}

/* ============================================
   Loading States - Mobile
   ============================================ */
@media (max-width: 767.98px) {
    .auth-submit-btn.loading {
        position: relative !important;
        color: transparent !important;
    }
    
    .auth-submit-btn.loading::after {
        content: '' !important;
        position: absolute !important;
        width: 20px !important;
        height: 20px !important;
        top: 50% !important;
        left: 50% !important;
        margin-left: -10px !important;
        margin-top: -10px !important;
        border: 3px solid rgba(255,255,255,0.3) !important;
        border-top-color: #fff !important;
        border-radius: 50% !important;
        animation: auth-spinner 0.6s linear infinite !important;
    }
    
    @keyframes auth-spinner {
        to { transform: rotate(360deg); }
    }
}

/* ============================================
   Tablet Adjustments (768px - 991px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .auth-container {
        max-width: 500px !important;
        margin: 0 auto !important;
    }
    
    .login-card,
    .register-card,
    .forgot-password-card,
    .reset-password-card,
    .email-verification-card {
        padding: 40px 30px !important;
    }
}