/* =========================
   TERMINAL-X RESPONSIVE
   iOS + Cyberpunk Mobile Style
   ========================= */

/* iOS Breakpoints */
@media (max-width: 480px) {
    /* Extra Small Devices - iPhone SE */
    .container {
        padding: 0 16px;
        max-width: 100%;
    }
    
    .hero-section {
        padding: 60px 0 40px;
        text-align: center;
    }
    
    .hero-section h1 {
        font-size: 28px;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 16px;
    }
    
    .hero-section p {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 24px;
    }
    
    .btn {
        width: 100%;
        padding: 16px 24px;
        font-size: 18px;
        border-radius: 16px;
        margin-bottom: 12px;
    }
    
    .card {
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 16px;
    }
    
        
    .navbar {
        padding: 12px 16px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    
    .navbar-brand {
        font-size: 20px;
        font-weight: 800;
    }
    
    .nav-link {
        padding: 12px;
        font-size: 14px;
    }
    
    .dropdown-menu {
        border-radius: 16px;
        margin: 8px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }
    
    /* iPhone Keyboard Support */
    .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 16px 20px;
        border-radius: 16px;
    }
    
    /* iPhone Safe Area */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* iPhone Notch Support */
    .navbar {
        padding-top: calc(12px + env(safe-area-inset-top));
    }
    
    /* Cyberpunk Mobile Enhancements */
    .cyber-glow {
        animation: cyberGlow 3s ease-in-out infinite;
    }
    
    }

@media (min-width: 481px) and (max-width: 768px) {
    /* Small Devices - iPhone 12/13/14 */
    .container {
        padding: 0 24px;
    }
    
    .hero-section h1 {
        font-size: 32px;
    }
    
    .hero-section p {
        font-size: 18px;
    }
    
    .btn {
        padding: 14px 28px;
        font-size: 17px;
        border-radius: 14px;
    }
    
    .card {
        padding: 24px;
        border-radius: 18px;
    }
    
        
    .navbar {
        padding: 14px 24px;
    }
    
    .navbar-brand {
        font-size: 22px;
    }
    
    /* Grid Layout for Small Tablets */
    #ads-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .ad-card {
        border-radius: 16px;
        overflow: hidden;
    }
    
    /* Sidebar Layout */
    .sidebar-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    /* Form Layout */
    .form-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Medium Devices - iPad/Tablet */
    .container {
        padding: 0 32px;
        max-width: 768px;
    }
    
    .hero-section h1 {
        font-size: 40px;
    }
    
    .hero-section p {
        font-size: 20px;
    }
    
    .btn {
        padding: 16px 32px;
        font-size: 18px;
    }
    
    .card {
        padding: 28px;
        border-radius: 20px;
    }
    
        
    /* Grid Layout for Tablets */
    #ads-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    /* Sidebar Layout */
    .sidebar-layout {
        grid-template-columns: 1fr 280px;
        gap: 32px;
    }
    
    /* Form Layout */
    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .form-row .form-group:last-child {
        grid-column: 1 / -1;
    }
    
    /* Navigation */
    .navbar-nav {
        display: flex;
        flex-direction: row;
        gap: 8px;
    }
    
    .dropdown-menu {
        min-width: 280px;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    /* Large Devices - Desktop */
    .container {
        padding: 0 40px;
        max-width: 1024px;
    }
    
    .hero-section h1 {
        font-size: 48px;
    }
    
    .hero-section p {
        font-size: 22px;
    }
    
    /* Grid Layout for Desktop */
    #ads-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
    
    /* Sidebar Layout */
    .sidebar-layout {
        grid-template-columns: 1fr 320px;
        gap: 40px;
    }
    
    /* Form Layout */
    .form-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    
    .form-row .form-group:last-child {
        grid-column: 1 / -1;
    }
    
    /* Navigation */
    .navbar {
        padding: 16px 40px;
    }
    
    .navbar-brand {
        font-size: 24px;
    }
    
    .dropdown-menu {
        min-width: 320px;
    }
}

@media (min-width: 1441px) {
    /* Extra Large Devices - Large Desktop */
    .container {
        padding: 0 48px;
        max-width: 1200px;
    }
    
    .hero-section h1 {
        font-size: 56px;
    }
    
    .hero-section p {
        font-size: 24px;
    }
    
    /* Grid Layout for Large Desktop */
    #ads-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 28px;
    }
    
    /* Sidebar Layout */
    .sidebar-layout {
        grid-template-columns: 1fr 360px;
        gap: 48px;
    }
    
    /* Form Layout */
    .form-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 28px;
    }
    
    .form-row .form-group:last-child {
        grid-column: 1 / -1;
    }
}

/* Landscape Orientation */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-section {
        padding: 40px 0 30px;
    }
    
    .hero-section h1 {
        font-size: 24px;
    }
    
    .hero-section p {
        font-size: 16px;
    }
    
    .navbar {
        padding: 8px 16px;
    }
    
        
    /* Compact Layout for Landscape */
    .card {
        padding: 16px;
    }
    
    .btn {
        padding: 12px 20px;
        font-size: 16px;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .card-img-wrapper img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    .navbar-brand img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* Sharper shadows for high DPI */
    .card {
        box-shadow: 0 20px 80px rgba(0, 0, 0, 0.12);
    }
    
    .btn {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
    }
}

            
/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn:hover {
        transform: none;
    }
    
    .card:hover {
        transform: none;
    }
    
    .hover-lift:hover {
        transform: none;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    }
    
    /* Larger touch targets */
    .btn {
        min-height: 48px;
        min-width: 48px;
    }
    
    .nav-link {
        padding: 16px;
        min-height: 48px;
    }
    
    .dropdown-item {
        padding: 16px 20px;
        min-height: 48px;
    }
    
    .form-control {
        min-height: 48px;
        font-size: 16px;
    }
    
    /* Touch-friendly spacing */
    .card {
        margin-bottom: 20px;
    }
    
    .modal-content {
        margin: 20px;
    }
    
    /* Cyberpunk touch effects */
    .cyber-glow:active {
        transform: scale(0.98);
        box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
    }
}

/* Print Styles */
@media print {
    .navbar,
    .footer,
    .btn,
    .modal,
    .dropdown {
        display: none !important;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
    
    .card {
        break-inside: avoid;
        border: 1px solid #000;
        margin-bottom: 20px;
        box-shadow: none;
    }
    
    .hero-section {
        background: none !important;
        color: #000 !important;
        padding: 20px 0;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000;
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: #000;
        page-break-after: avoid;
    }
    
    p, .card-text {
        orphans: 3;
        widows: 3;
    }
    
    /* Remove animations for print */
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .hover-lift:hover {
        transform: none !important;
    }
    
    .hover-scale:hover {
        transform: none !important;
    }
    
    .floating {
        animation: none !important;
    }
    
    .cyber-glow {
        animation: none !important;
        box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
    }
}

/* iOS Specific Fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari only */
    @media (max-width: 768px) {
        .navbar {
            position: sticky;
            top: 0;
            z-index: var(--z-fixed);
        }

        /* Prevent zoom on input focus */
        .form-control {
            font-size: 16px;
            transform-origin: left top;
        }

        /* Fix iOS scrolling */
        body {
            -webkit-overflow-scrolling: touch;
        }

        /* iOS safe area */
        .container {
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }
    }
    
    /* Fix iOS scrolling */
    body {
        -webkit-overflow-scrolling: touch;
    }
    
    /* iOS safe area */
    .container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}

/* Android Specific Fixes */
@supports (-webkit-appearance: none) {
    /* Android Chrome only */
    .form-control {
        -webkit-appearance: none;
        appearance: none;
    }
    
    .btn {
        -webkit-tap-highlight-color: transparent;
    }
}