/* Mobile Device Specific Fixes for PiyVpn.ru */

/* Critical Mobile Fixes - Load First */
@media screen and (max-width: 768px) {
    /* Force proper background rendering */
    html {
        height: 100%;
        height: -webkit-fill-available;
        background: var(--color-bg-primary);
    }
    
    body {
        height: 100%;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        background: 
            linear-gradient(rgba(42, 140, 255, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(42, 140, 255, 0.1) 1px, transparent 1px),
            linear-gradient(135deg, #0a0c15 0%, #0f1419 50%, #1a1f35 100%) !important;
        background-size: 25px 25px, 25px 25px, 100% 100% !important;
        background-attachment: scroll, scroll, scroll !important;
        background-repeat: repeat, repeat, no-repeat !important;
        background-position: 0 0, 0 0, center center !important;
        position: relative;
        overflow-x: hidden;
    }
    
    /* Ensure background overlay works on mobile */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(circle at 20% 80%, rgba(0, 242, 254, 0.05) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(79, 172, 254, 0.05) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(168, 85, 247, 0.03) 0%, transparent 50%);
        pointer-events: none;
        z-index: -1;
    }
}

/* iOS Safari Specific Fixes */
@supports (-webkit-touch-callout: none) {
    html {
        height: -webkit-fill-available !important;
        background: #0a0c15 !important;
    }
    
    body {
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
        background: 
            linear-gradient(rgba(42, 140, 255, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(42, 140, 255, 0.1) 1px, transparent 1px),
            linear-gradient(135deg, #0a0c15 0%, #0f1419 50%, #1a1f35 100%) !important;
        background-size: 20px 20px, 20px 20px, 100% 100% !important;
        background-attachment: scroll !important;
    }
    
    /* Fix for iOS Safari viewport issues */
    .auth-section,
    .profile-container {
        min-height: 100vh;
        min-height: -webkit-fill-available;
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Android Chrome Fixes */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 1) {
    body {
        background: 
            linear-gradient(rgba(42, 140, 255, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(42, 140, 255, 0.1) 1px, transparent 1px),
            linear-gradient(135deg, #0a0c15 0%, #0f1419 50%, #1a1f35 100%) !important;
        background-size: 30px 30px, 30px 30px, 100% 100% !important;
    }
}

/* High DPI Mobile Displays */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    body {
        background: 
            linear-gradient(rgba(42, 140, 255, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(42, 140, 255, 0.1) 1px, transparent 1px),
            linear-gradient(135deg, #0a0c15 0%, #0f1419 50%, #1a1f35 100%) !important;
        background-size: 15px 15px, 15px 15px, 100% 100% !important;
    }
}

/* Mobile Card Fixes */
@media screen and (max-width: 768px) {
    .auth-card,
    .profile-card,
    .pricing-card {
        background: rgba(21, 26, 46, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(42, 140, 255, 0.2) !important;
        box-shadow: 
            0 16px 64px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(42, 140, 255, 0.1) !important;
        position: relative;
        z-index: 1;
    }
    
    /* Ensure cards have proper contrast */
    .auth-card::before,
    .profile-card::before,
    .pricing-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(21, 26, 46, 0.1);
        border-radius: inherit;
        z-index: -1;
    }
}

/* Mobile Form Fixes */
@media screen and (max-width: 768px) {
    .form-input {
        background: rgba(26, 31, 53, 0.8) !important;
        border: 2px solid rgba(42, 140, 255, 0.3) !important;
        color: #ffffff !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        -webkit-appearance: none !important;
        appearance: none !important;
        border-radius: 12px !important;
    }
    
    .form-input:focus {
        background: rgba(15, 20, 25, 0.9) !important;
        border-color: #2a8cff !important;
        box-shadow: 
            0 0 0 3px rgba(42, 140, 255, 0.1),
            0 0 20px rgba(42, 140, 255, 0.3) !important;
    }
    
    .form-input::placeholder {
        color: rgba(136, 153, 170, 0.7) !important;
    }
}

/* Mobile Button Fixes */
@media screen and (max-width: 768px) {
    .btn {
        -webkit-appearance: none !important;
        appearance: none !important;
        border-radius: 12px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        min-height: 48px !important; /* Touch-friendly */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #4facfe, #00f2fe) !important;
        border: 1px solid rgba(79, 172, 254, 0.3) !important;
        color: white !important;
        box-shadow: 0 8px 24px rgba(79, 172, 254, 0.4) !important;
    }
    
    .btn-secondary {
        background: transparent !important;
        border: 2px solid #2a8cff !important;
        color: #2a8cff !important;
    }
    
    .btn:active {
        transform: scale(0.98) !important;
    }
}

/* Mobile Navigation Fixes */
@media screen and (max-width: 768px) {
    .navbar {
        background: rgba(10, 12, 21, 0.95) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-bottom: 1px solid rgba(42, 140, 255, 0.2) !important;
    }
    
    .nav-menu {
        background: rgba(10, 12, 21, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(42, 140, 255, 0.2) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    }
}

/* Mobile Text Fixes */
@media screen and (max-width: 768px) {
    .auth-title,
    .profile-title,
    .section-title {
        color: #ffffff !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .auth-description,
    .profile-subtitle,
    .section-description {
        color: rgba(224, 231, 255, 0.8) !important;
    }
    
    .info-label {
        color: rgba(136, 153, 170, 0.9) !important;
    }
    
    .info-value {
        color: #ffffff !important;
    }
}

/* Mobile Pricing Fixes */
@media screen and (max-width: 768px) {
    .pricing-card.popular {
        border-color: #2a8cff !important;
        box-shadow: 
            0 0 40px rgba(42, 140, 255, 0.2),
            0 16px 64px rgba(0, 0, 0, 0.6) !important;
        transform: none !important; /* Remove scale on mobile */
    }
    
    .price-amount {
        color: #ffffff !important;
    }
    
    .plan-name {
        color: #ffffff !important;
    }
}

/* Mobile Notification Fixes */
@media screen and (max-width: 768px) {
    .notification {
        background: rgba(21, 26, 46, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(42, 140, 255, 0.2) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    }
    
    .notification-message {
        color: #ffffff !important;
    }
}

/* Prevent horizontal scroll on mobile */
@media screen and (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    * {
        max-width: 100% !important;
    }
}

/* Touch improvements */
@media screen and (max-width: 768px) {
    /* Larger touch targets */
    .password-toggle,
    .btn-copy,
    .modal-close,
    .flash-close {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Better touch feedback */
    .btn:active,
    .nav-link:active,
    .password-toggle:active {
        background-color: rgba(42, 140, 255, 0.1) !important;
    }
}