/**
 * G Tech Group - Blacklist Checker
 * Ultimate Responsive Stylesheet
 * Version: 2.0.0
 * 
 * Device Compatibility:
 * - Desktop: 4K, QHD, FHD, HD
 * - Laptop: All sizes
 * - Tablet: iPad Pro, iPad, Android tablets
 * - Mobile: All iPhone models, Android phones
 * - Foldable: Galaxy Fold, Surface Duo
 * - TV: Smart TV, Apple TV
 * - Watch: Apple Watch, WearOS
 * - Special: Retina, High DPI displays
 */

/* ========================================
   Device Breakpoint Reference
   ======================================== */

/* 
   Breakpoints Strategy:
   - 320px: Small phones (iPhone SE, older Android)
   - 375px: Standard phones (iPhone 12/13/14)
   - 414px: Large phones (iPhone Plus/Pro Max)
   - 768px: Tablets portrait
   - 1024px: Tablets landscape, small laptops
   - 1366px: Standard laptops
   - 1920px: Desktop FHD
   - 2560px: Desktop QHD
   - 3840px: Desktop 4K
*/

/* ========================================
   4K & Ultra Wide Displays (3840px+)
   ======================================== */

@media (min-width: 3840px) {
    .container {
        max-width: 2560px;
        padding: 0 4rem;
    }
    
    .hero-title {
        font-size: 6rem;
        line-height: 1.1;
    }
    
    .hero-subtitle {
        font-size: 2rem;
    }
    
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 3rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .tool-card {
        padding: 4rem;
        max-width: 1200px;
    }
    
    .input-group input {
        font-size: 1.5rem;
        padding: 1.5rem 2rem;
    }
    
    .btn-check {
        font-size: 1.5rem;
        padding: 1.5rem 3rem;
    }
}

/* ========================================
   QHD Displays (2560px - 3839px)
   ======================================== */

@media (min-width: 2560px) and (max-width: 3839px) {
    .container {
        max-width: 2048px;
        padding: 0 3rem;
    }
    
    .hero-title {
        font-size: 5rem;
    }
    
    .hero-subtitle {
        font-size: 1.75rem;
    }
    
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.5rem;
    }
    
    .tool-card {
        padding: 3.5rem;
        max-width: 1000px;
    }
}

/* ========================================
   Full HD Desktop (1920px - 2559px)
   ======================================== */

@media (min-width: 1920px) and (max-width: 2559px) {
    .container {
        max-width: 1640px;
    }
    
    .hero-title {
        font-size: 4.5rem;
    }
    
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========================================
   Standard Desktop (1440px - 1919px)
   ======================================== */

@media (min-width: 1440px) and (max-width: 1919px) {
    .container {
        max-width: 1320px;
    }
    
    .hero-title {
        font-size: 4rem;
    }
    
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   Small Desktop / Large Laptop (1366px - 1439px)
   ======================================== */

@media (min-width: 1366px) and (max-width: 1439px) {
    .container {
        max-width: 1280px;
    }
    
    .hero-title {
        font-size: 3.75rem;
    }
}

/* ========================================
   Laptop (1024px - 1365px)
   ======================================== */

@media (min-width: 1024px) and (max-width: 1365px) {
    .container {
        max-width: 960px;
    }
    
    .hero-title {
        font-size: 3.5rem;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   iPad Pro 12.9" Landscape (1366x1024)
   ======================================== */

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .container {
        max-width: 1200px;
    }
    
    .hero {
        padding: 3rem 0;
    }
    
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   iPad Pro 11" / iPad Air Landscape (1194x834)
   ======================================== */

@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1194px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .container {
        max-width: 1100px;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   Tablet Landscape (768px - 1023px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        max-width: 900px;
        padding: 0 2rem;
    }
    
    /* Navigation */
    nav ul {
        gap: 1rem;
    }
    
    /* Hero */
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
    }
    
    /* Features */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Info Cards */
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   iPad Mini Portrait (744x1133)
   ======================================== */

@media only screen 
  and (min-device-width: 744px) 
  and (max-device-width: 1133px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .hero-title {
        font-size: 2.75rem;
    }
    
    .features-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Tablet Portrait (600px - 767px)
   ======================================== */

@media (min-width: 600px) and (max-width: 767px) {
    .container {
        max-width: 100%;
        padding: 0 1.5rem;
    }
    
    /* Header */
    .header-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Hero */
    .hero {
        padding: 3rem 0;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    /* Tool Card */
    .tool-card {
        padding: 2rem;
    }
    
    /* All Grids Single Column */
    .features-grid,
    .stats-grid,
    .info-grid,
    .steps-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Large Phones (414px - 599px)
   ======================================== */

@media (min-width: 414px) and (max-width: 599px) {
    .container {
        padding: 0 1.25rem;
    }
    
    /* Hero */
    .hero-title {
        font-size: 2.25rem;
        margin-bottom: 1rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    /* Trust Badges */
    .trust-badges {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .trust-badge {
        font-size: 0.85rem;
        padding: 0.5rem;
    }
    
    /* Tool Card */
    .tool-card {
        padding: 1.75rem;
        border-radius: 12px;
    }
    
    /* Input Group */
    .input-group {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .input-group input {
        padding: 1rem;
        font-size: 1rem;
    }
    
    .btn-check {
        width: 100%;
        padding: 1rem;
        font-size: 1rem;
    }
    
    /* Results */
    .results-summary {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .summary-card {
        padding: 1rem;
    }
    
    /* Features */
    .feature-card {
        padding: 1.75rem;
    }
    
    .feature-icon {
        width: 70px;
        height: 70px;
    }
}

/* ========================================
   iPhone 14/13/12 Pro Max (428px)
   ======================================== */

@media only screen 
  and (device-width: 428px) 
  and (-webkit-device-pixel-ratio: 3) {
    .hero-title {
        font-size: 2.3rem;
    }
    
    .tool-card {
        margin: 0 0.5rem;
    }
}

/* ========================================
   iPhone 14/13/12 Pro (390px)
   ======================================== */

@media only screen 
  and (device-width: 390px) 
  and (-webkit-device-pixel-ratio: 3) {
    .hero-title {
        font-size: 2.2rem;
    }
    
    .trust-badge {
        font-size: 0.8rem;
    }
}

/* ========================================
   Standard Phones (375px - 413px)
   ======================================== */

@media (min-width: 375px) and (max-width: 413px) {
    .container {
        padding: 0 1rem;
    }
    
    /* Header */
    .logo img {
        height: 45px;
    }
    
    .logo-text {
        font-size: 1.3rem;
    }
    
    /* Hero */
    .hero {
        padding: 2.5rem 0 3rem;
    }
    
    .hero-title {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    /* Trust Badges */
    .trust-badges {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .trust-badge {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
    }
    
    /* Tool Card */
    .tool-card {
        padding: 1.5rem;
        margin: 0 0.5rem;
    }
    
    /* Buttons */
    .btn-check {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }
    
    /* Results */
    .results-details {
        max-height: 400px;
    }
    
    /* Features */
    .features {
        padding: 2.5rem 0;
    }
    
    .feature-card {
        padding: 1.5rem;
    }
    
    .feature-icon {
        width: 60px;
        height: 60px;
    }
    
    /* Stats */
    .stat-card {
        padding: 1.5rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
}

/* ========================================
   iPhone SE / Small Phones (320px - 374px)
   ======================================== */

@media (min-width: 320px) and (max-width: 374px) {
    .container {
        padding: 0 0.75rem;
    }
    
    /* Header */
    .header-content {
        padding: 0.75rem 0;
    }
    
    .logo img {
        height: 40px;
    }
    
    .logo-text {
        font-size: 1.1rem;
    }
    
    nav ul {
        gap: 0.25rem;
    }
    
    nav a {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }
    
    /* Hero */
    .hero {
        padding: 2rem 0;
    }
    
    .hero-title {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    /* Trust Badges */
    .trust-badges {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .trust-badge {
        font-size: 0.75rem;
        padding: 0.4rem;
        justify-content: center;
    }
    
    /* Tool Card */
    .tool-card {
        padding: 1.25rem;
        margin: 0 0.25rem;
        border-radius: 8px;
    }
    
    .input-group input {
        padding: 0.875rem;
        font-size: 0.95rem;
    }
    
    .btn-check {
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
        letter-spacing: 0;
    }
    
    /* Loading State */
    .spinner {
        width: 40px;
        height: 40px;
    }
    
    /* Results */
    .summary-card {
        padding: 0.875rem;
    }
    
    .summary-icon {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
    
    .summary-count {
        font-size: 1.5rem;
    }
    
    .results-details {
        max-height: 300px;
        padding: 0.75rem;
    }
    
    /* Percentage Indicator */
    .percentage-value {
        font-size: 2.5rem;
    }
    
    /* Features */
    .features {
        padding: 2rem 0;
        margin: 1rem 0;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .section-subtitle {
        font-size: 0.9rem;
    }
    
    .feature-card {
        padding: 1.25rem;
    }
    
    .feature-icon {
        width: 50px;
        height: 50px;
    }
    
    .feature-card h3 {
        font-size: 1.1rem;
    }
    
    .feature-card p {
        font-size: 0.875rem;
    }
    
    /* Stats */
    .stat-card {
        padding: 1.25rem;
    }
    
    .stat-number {
        font-size: 1.75rem;
    }
    
    .stat-label {
        font-size: 0.8rem;
    }
    
    /* Info Cards */
    .info-card {
        padding: 1.25rem;
    }
    
    .info-card h3 {
        font-size: 1.1rem;
    }
    
    /* FAQ */
    .faq-question {
        font-size: 0.95rem;
    }
    
    .faq-answer {
        font-size: 0.875rem;
    }
    
    /* Footer */
    footer {
        padding: 1.5rem 0 1rem;
    }
    
    .footer-section h3 {
        font-size: 1rem;
    }
    
    .footer-section a {
        font-size: 0.875rem;
    }
}

/* ========================================
   Galaxy Fold (280px)
   ======================================== */

@media (max-width: 280px) {
    .container {
        padding: 0 0.5rem;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 0.85rem;
    }
    
    .tool-card {
        padding: 1rem;
    }
    
    .btn-check {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    
    nav {
        display: none;
    }
}

/* ========================================
   Surface Duo (540px dual screen)
   ======================================== */

@media (min-width: 540px) and (max-width: 720px) and (min-aspect-ratio: 8/5) {
    .container {
        max-width: 100%;
        padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: env(fold-width, 2rem);
    }
}

/* ========================================
   Smartwatch Support
   ======================================== */

@media (max-width: 200px) {
    body {
        font-size: 12px;
    }
    
    .container {
        padding: 0.25rem;
    }
    
    header,
    .hero-shapes,
    .trust-badges,
    .features,
    .info-section,
    .faq-section,
    .cta-section,
    footer {
        display: none;
    }
    
    .hero {
        padding: 0.5rem 0;
    }
    
    .hero-title {
        font-size: 1rem;
    }
    
    .hero-subtitle {
        display: none;
    }
    
    .tool-card {
        padding: 0.5rem;
        border-radius: 4px;
    }
    
    .input-group input {
        padding: 0.5rem;
        font-size: 0.75rem;
    }
    
    .btn-check {
        padding: 0.5rem;
        font-size: 0.75rem;
    }
    
    .results-summary {
        display: flex;
        justify-content: space-around;
    }
    
    .summary-card {
        padding: 0.25rem;
    }
    
    .summary-count {
        font-size: 1rem;
    }
}

/* ========================================
   TV & Large Displays
   ======================================== */

@media (min-width: 1920px) and (min-height: 1080px) and (min-aspect-ratio: 16/9) {
    body {
        font-size: 20px;
    }
    
    .container {
        max-width: 90%;
    }
    
    .hero-title {
        font-size: 5rem;
    }
    
    .btn-check {
        font-size: 1.5rem;
        padding: 2rem 4rem;
    }
    
    .input-group input {
        font-size: 1.5rem;
        padding: 2rem;
    }
}

/* ========================================
   Orientation Specific Styles
   ======================================== */

/* Landscape Phones */
@media (max-width: 926px) and (orientation: landscape) {
    .hero {
        padding: 1.5rem 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        margin-bottom: 1rem;
    }
    
    .tool-card {
        padding: 1.5rem;
    }
    
    .trust-badges {
        display: none;
    }
}

/* Portrait Tablets */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   High DPI / Retina Displays
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi),
       (min-resolution: 2dppx) {
    /* Crisp images and text */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .logo img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* Thinner borders on high DPI */
    .tool-card,
    .feature-card,
    .info-card {
        border-width: 0.5px;
    }
}

/* 3x Retina (iPhone Plus/Pro Max) */
@media (-webkit-min-device-pixel-ratio: 3),
       (min-resolution: 288dpi),
       (min-resolution: 3dppx) {
    .input-group input,
    .btn-check {
        border-width: 0.33px;
    }
}

/* ========================================
   Accessibility & User Preferences
   ======================================== */

/* Reduced Motion */
@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;
    }
    
    .shape {
        animation: none;
    }
    
    .progress-fill::after {
        animation: none;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .tool-card,
    .feature-card,
    .info-card {
        border: 2px solid currentColor;
    }
    
    .btn-check {
        border: 2px solid currentColor;
    }
    
    .input-group input {
        border-width: 2px;
    }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #4DA3FF;
        --secondary-color: #1E3A5F;
        --accent-color: #FF8A65;
        --text-primary: #E0E0E0;
        --text-secondary: #B0B0B0;
        --light-bg: #1A1A1A;
        --white: #2A2A2A;
        --gray-100: #333333;
    }
    
    body {
        background: linear-gradient(135deg, #0D1117 0%, #1E3A5F 100%);
    }
    
    .tool-card,
    .feature-card,
    .info-card,
    .stat-card,
    .faq-item {
        background: rgba(30, 30, 30, 0.95);
        color: var(--text-primary);
    }
    
    .input-group input {
        background: #1A1A1A;
        color: #E0E0E0;
        border-color: #444;
    }
    
    .results-details {
        background: rgba(30, 30, 30, 0.5);
    }
    
    header {
        background: rgba(13, 17, 23, 0.98);
    }
    
    footer {
        background: linear-gradient(135deg, #0D1117 0%, #1E3A5F 100%);
    }
    
    .summary-card {
        background: rgba(30, 30, 30, 0.95);
    }
    
    .filter-controls {
        background: rgba(30, 30, 30, 0.95);
    }
}

/* Light Mode Preference */
@media (prefers-color-scheme: light) {
    /* Already default, but can override dark mode if needed */
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    /* Remove unnecessary elements */
    header,
    footer,
    .hero-background,
    .hero-shapes,
    .trust-badges,
    .features,
    .info-section,
    .faq-section,
    .cta-section,
    nav {
        display: none !important;
    }
    
    /* Optimize for print */
    body {
        background: white;
        color: black;
        font-size: 12pt;
        line-height: 1.5;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
    
    .hero {
        padding: 0.5in 0;
    }
    
    .hero-title {
        font-size: 24pt;
        color: black;
    }
    
    .tool-card {
        box-shadow: none;
        border: 1pt solid #000;
        padding: 0.25in;
    }
    
    .results-details {
        max-height: none;
        page-break-inside: avoid;
    }
    
    .result-card {
        page-break-inside: avoid;
        border: 1pt solid #ddd;
        margin-bottom: 0.125in;
    }
    
    /* Show URLs for links */
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    /* Page breaks */
    .results-section {
        page-break-before: always;
    }
}

/* ========================================
   Hover Support Detection
   ======================================== */

/* Devices with hover capability */
@media (hover: hover) and (pointer: fine) {
    /* Enable all hover effects */
    .btn-check:hover,
    .feature-card:hover,
    .info-card:hover,
    .stat-card:hover,
    .faq-item:hover {
        transform: translateY(-5px);
    }
}

/* Touch devices without hover */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects, use tap feedback */
    .btn-check:active,
    .feature-card:active,
    .info-card:active {
        transform: scale(0.98);
    }
    
    /* Larger touch targets */
    .btn-check,
    .input-group input {
        min-height: 44px;
    }
    
    .filter-checkbox input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }
}

/* ========================================
   Safe Area Support (iPhone X+, etc.)
   ======================================== */

@supports (padding: env(safe-area-inset-top)) {
    header {
        padding-top: env(safe-area-inset-top);
    }
    
    .container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    
    footer {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ========================================
   Foldable Device Support
   ======================================== */

@media (screen-spanning: single-fold-vertical) {
    .features-grid {
        grid-template-columns: repeat(2, calc(50% - env(fold-width) / 2));
        gap: env(fold-width);
    }
}

@media (screen-spanning: single-fold-horizontal) {
    .tool-card {
        margin-bottom: env(fold-height);
    }
}

/* ========================================
   Performance Optimizations
   ======================================== */

/* Reduce animations on low-end devices */
@media (max-width: 768px) and (max-resolution: 1dppx) {
    .shape {
        animation: none;
        opacity: 0.1;
    }
    
    * {
        transition-duration: 0.1s !important;
    }
}

/* ========================================
   Custom Scrollbar for Different Devices
   ======================================== */

/* Desktop scrollbar */
@media (min-width: 1024px) {
    ::-webkit-scrollbar {
        width: 12px;
    }
    
    ::-webkit-scrollbar-thumb {
        border-radius: 6px;
    }
}

/* Mobile scrollbar */
@media (max-width: 1023px) {
    ::-webkit-scrollbar {
        width: 4px;
    }
    
    ::-webkit-scrollbar-thumb {
        border-radius: 2px;
    }
}

/* ========================================
   Browser Specific Fixes
   ======================================== */

/* Safari iOS */
@supports (-webkit-touch-callout: none) {
    /* Fix for Safari's 100vh issue */
    .hero {
        min-height: -webkit-fill-available;
    }
    
    /* Smooth scrolling */
    .results-details {
        -webkit-overflow-scrolling: touch;
    }
}

/* Firefox */
@-moz-document url-prefix() {
    /* Firefox specific adjustments */
    .input-group input {
        line-height: normal;
    }
}

/* Edge */
@supports (-ms-ime-align: auto) {
    /* Edge specific adjustments */
    .tool-card {
        backdrop-filter: none;
        background: rgba(255, 255, 255, 0.98);
    }
}

/* ========================================
   Future-Proof: Container Queries
   ======================================== */

@supports (container-type: inline-size) {
    .tool-card {
        container-type: inline-size;
    }
    
    @container (max-width: 500px) {
        .input-group {
            flex-direction: column;
        }
    }
}

/* ========================================
   Variable Font Support
   ======================================== */

@supports (font-variation-settings: normal) {
    body {
        font-variation-settings: "wght" 400;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-variation-settings: "wght" 700;
    }
}

/* ========================================
   Notch Support
   ======================================== */

/* Devices with notch */
@media (display-cutout: auto) {
    header {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ========================================
   Loading Performance
   ======================================== */

/* Defer non-critical animations on slow connections */
@media (prefers-reduced-data: reduce) {
    .shape,
    .hero-shapes {
        display: none;
    }
    
    * {
        animation: none !important;
    }
}