/* Responsive Design */

/* Large Desktop */
@media (min-width: 1400px) {
    .nav-container,
    .hero-content,
    .section {
        max-width: 1600px;
    }
    
    .hero h1 {
        font-size: 3.2rem;
    }
    
    .section-title {
        font-size: 2.4rem;
    }
}

/* Desktop */
@media (max-width: 1200px) {
    .nav-container {
        padding: 0 var(--space-6);
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .nav-links {
        display: none;
    }
     
    .mobile-menu {
        display: flex;
    }

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

    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .process-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .section {
        padding: var(--space-24) var(--space-6);
    }
    
    .section-title {
        font-size: 3rem;
    }
    
    .hero h1 {
        font-size: 4rem;
    }
}

/* Mobile Large */
@media (max-width: 768px) {
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 300px;
    }

    .upload-zone {
        padding: var(--space-12) var(--space-6);
        margin: 0 auto;
    }

    .footer-links {
        flex-direction: column;
        gap: var(--space-4);
    }

    .social-links {
        gap: var(--space-3);
    }

    .social-link {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    .section-description {
        font-size: 1.1rem;
    }
    
    .feature-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .step-number {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
}

/* Mobile Medium */
@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .nav-container {
        padding: 0 var(--space-4);
    }

    .hero,
    .section {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
    
    .section {
        padding-top: var(--space-20);
        padding-bottom: var(--space-20);
    }
    
    .hero h1 {
        font-size: 1.8rem;
        line-height: 1.2;
    }
    
    .section-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .cta-section {
        padding: var(--space-12);
    }
    
    .upload-zone {
        padding: var(--space-8) var(--space-4);
    }
    
    .upload-icon {
        font-size: 3rem;
    }
    
    .supported-formats {
        gap: var(--space-1);
    }
    
    .format-tag {
        font-size: 0.7rem;
        padding: var(--space-1) var(--space-2);
    }
}

/* Mobile Small */
@media (max-width: 480px) {
    .hero-badge {
        padding: var(--space-2) var(--space-4);
        font-size: 0.8rem;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .section-description {
        font-size: 1rem;
    }
    
    .btn {
        padding: var(--space-3) var(--space-6);
        font-size: 0.9rem;
    }
    
    .logo {
        font-size: 1.2rem;
    }
    
    .logo-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    
    .feature-card,
    .stat-card {
        padding: var(--space-6);
    }
    
    .feature-card h3 {
        font-size: 1.3rem;
    }
    
    .process-step h3 {
        font-size: 1.3rem;
    }
    
    .footer-logo {
        font-size: 1.5rem;
    }
    
    .footer-description {
        font-size: 1rem;
    }
}

/* Mobile Extra Small */
@media (max-width: 360px) {
    .hero {
        padding: var(--space-4) var(--space-3);
    }
    
    .section {
        padding: var(--space-16) var(--space-3);
    }
    
    .nav-container {
        padding: 0 var(--space-3);
    }
    
    .hero h1 {
        font-size: 1.3rem;
    }
    
    .section-title {
        font-size: 1.2rem;
    }
    
    .upload-zone {
        padding: var(--space-6) var(--space-3);
    }
    
    .upload-zone h3 {
        font-size: 1.2rem;
    }
    
    .cta-section {
        padding: var(--space-8);
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .step-number {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* Landscape Mobile */
@media (max-width: 896px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: var(--space-12) var(--space-8);
    }
    
    .navbar {
        padding: var(--space-3) 0;
    }
    
    .navbar.scrolled {
        padding: var(--space-2) 0;
    }
    
    .hero h1 {
        font-size: 2.5rem;
        margin-bottom: var(--space-4);
    }
    
    .hero p {
        margin-bottom: var(--space-6);
    }
    
    .hero-actions {
        margin-bottom: var(--space-8);
    }
    
    .upload-zone {
        padding: var(--space-8) var(--space-6);
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .logo-icon,
    .feature-icon,
    .step-number {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Hover Support */
@media (hover: hover) {
    .hover-effects {
        transition: all 0.3s var(--ease-out-expo);
    }
    
    .hover-effects:hover {
        transform: translateY(-4px);
    }
}

/* No Hover Support (Touch Devices) */
@media (hover: none) {
    .upload-zone:hover {
        transform: none;
        border-color: var(--border-primary);
        box-shadow: none;
    }
    
    .btn:hover {
        transform: none;
    }
    
    .feature-card:hover,
    .stat-card:hover,
    .process-step:hover .step-number {
        transform: none;
    }
}

/* Print Styles */
@media print {
    .navbar,
    .floating-elements,
    .bg-system,
    .hero-actions,
    .upload-zone,
    .social-links {
        display: none !important;
    }
    
    .hero,
    .section {
        padding: var(--space-4);
    }
    
    .hero h1,
    .section-title {
        color: #000 !important;
        background: none !important;
        -webkit-text-fill-color: #000 !important;
    }
    
    .feature-card,
    .stat-card {
        border: 1px solid #ccc;
        background: #fff;
        break-inside: avoid;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    /* Already using dark theme by default */
}

/* Light Mode Override (if needed) */
@media (prefers-color-scheme: light) {
    /* Keep dark theme as it's the design intention */
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .floating-orb,
    .upload-icon,
    .pulse-dot,
    .step-number::before {
        animation: none !important;
    }
    
    .bg-primary-layer {
        animation: none !important;
    }
}

/* High Contrast */
@media (prefers-contrast: high) {
    :root {
        --border-primary: rgba(255, 255, 255, 0.3);
        --border-secondary: rgba(255, 255, 255, 0.2);
        --text-tertiary: rgba(255, 255, 255, 0.8);
        --text-quaternary: rgba(255, 255, 255, 0.6);
    }
}

/* Container Queries (for modern browsers) */
@container (max-width: 600px) {
    .feature-card {
        padding: var(--space-6);
    }
    
    .feature-icon {
        width: 60px;
        height: 60px;
    }
}

/* Flexbox Fallbacks */
.features-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.features-grid > * {
    flex: 1 1 380px;
}

/* Grid Fallbacks */
@supports not (display: grid) {
    .stats-grid,
    .process-grid {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-8);
    }
    
    .stats-grid > *,
    .process-grid > * {
        flex: 1 1 280px;
    }
}


/* === Login page — mobile fixes === */
@media (max-width: 768px) {
  .auth-section { padding: var(--space-12) var(--space-4); }

  .auth-grid { grid-template-columns: 1fr; gap: var(--space-6); }

  /* ألغِ التحويلات التي تسبب القطع */
  .auth-card {
    transform: none !important;
    max-width: 100% !important;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
  }
  .auth-side {
    transform: none !important;
    order: -1; /* اختياري: خلي المزايا فوق الفورم */
    margin-bottom: var(--space-6);
    padding-inline: 0;
  }

  /* محاذاة أجمل على الشاشات الصغيرة */
  .auth-head { text-align: center; }
  .auth-title { font-size: 1.35rem; }
  .auth-actions .btn,
  .oauth-btn { width: 100%; max-width: 420px; margin-inline: auto; }
  .help-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }

  /* ألغِ أي إزاحات أُضيفت inline في login.html */
  #login .section-header,
  #login .section-header .section-badge,
  .auth-side .auth-highlight {
    transform: none !important;
  }

  /* لو النافبار ثابتة وتغطي المحتوى */
  body.auth-plain-bg .auth-section { padding-top: calc(var(--space-20) + 56px); }
}

@media (max-width: 480px) {
  .auth-section { padding: var(--space-8) var(--space-4); }
  .auth-title { font-size: 1.2rem; }
  .input { padding: var(--space-4) var(--space-5); }
}
/* ========== توسيط شعار Stream AI على الشاشات الصغيرة ========== */
@media (max-width: 768px) {
  .logo {
    margin-right: 0 !important;      /* إلغاء الدفع لليمين */
    transform: none !important;      /* إلغاء أي تحويلات سابقة */
    justify-content: center;         /* توسيط المحتوى الداخلي */
    width: 100%;                     /* أخذ العرض الكامل ليتمركز */
  }

  /* لو الأيقونة والنص داخلين في span أو i تقدر تضيف */
  .logo i {
    margin-left: 0.25rem;            /* مسافة صغيرة بس بين الأيقونة والنص */
  }
}