/**
 * 📱 Nawader Responsive Design
 * يدعم: موبايل + تابلت + لابتوب + ديسكتوب + تلفزيون
 */

/* Mobile Phones - Portrait (320px - 480px) */
@media (max-width: 480px) {
    body { font-size: 15px; }
    .container, .wrap { padding: 12px !important; }
    .grid, .cards, .modules { grid-template-columns: 1fr !important; }
    .stats { grid-template-columns: repeat(2, 1fr) !important; }
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.1rem !important; }
    .btn, button { padding: 10px 18px !important; font-size: 14px !important; }
    .modal-content, .mc { padding: 20px !important; max-height: 85vh !important; }
    table { font-size: 0.85rem !important; }
    .sidebar { transform: translateX(100%); }
    .sidebar.open { transform: translateX(0); }
    .main { max-width: 100vw !important; padding: 15px !important; }
}

/* Mobile Phones - Landscape (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .container, .wrap { padding: 18px !important; }
    .grid, .cards, .modules { grid-template-columns: repeat(2, 1fr) !important; }
    .stats { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .container, .wrap { max-width: 95% !important; padding: 25px !important; }
    .grid, .cards, .modules { grid-template-columns: repeat(2, 1fr) !important; }
    .stats { grid-template-columns: repeat(4, 1fr) !important; }
    .sidebar { width: 240px; }
}

/* Laptops (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .container, .wrap { max-width: 1200px !important; margin: 0 auto !important; }
    .grid, .cards, .modules { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Desktop (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
    .container, .wrap { max-width: 1400px !important; }
    h1 { font-size: 2.5rem !important; }
}

/* Large Desktop & 4K (1920px+) */
@media (min-width: 1920px) {
    body { font-size: 18px !important; }
    .container, .wrap { max-width: 1600px !important; }
    h1 { font-size: 3rem !important; }
    h2 { font-size: 2.5rem !important; }
}

/* TV & Large Screens (2560px+) */
@media (min-width: 2560px) {
    body { font-size: 20px !important; }
    .container, .wrap { max-width: 2000px !important; }
    h1 { font-size: 3.5rem !important; }
    .btn, button { padding: 16px 35px !important; font-size: 18px !important; }
}

/* Print */
@media print {
    .sidebar, header, footer, .btn, button, video, audio { display: none !important; }
    body { color: #000 !important; background: #fff !important; }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    button, .btn, a { min-height: 44px; min-width: 44px; }
    input, select, textarea { font-size: 16px !important; }
}

/* High DPI / Retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body { -webkit-font-smoothing: subpixel-antialiased; }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
    /* الموقع أصلاً dark mode */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Landscape orientation */
@media (orientation: landscape) and (max-height: 500px) {
    .pay-header .icon, .icon-big { width: 60px !important; height: 60px !important; font-size: 1.8rem !important; }
    h1 { font-size: 1.4rem !important; }
}