/* ========================================
   Fresh Box - Comprehensive Responsive Enhancements
   Fixes for Mobile, Tablet, and Desktop
   ======================================== */

/* ========================================
   MOBILE FIRST - Base Styles
   ======================================== */

/* Container improvements for all devices */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   EXTRA SMALL MOBILE (320px - 480px)
   ======================================== */
@media (max-width: 480px) {
    /* Container */
    .container {
        padding: 0 15px;
    }
    
    /* Typography - Better readability */
    body {
        font-size: 14px;
        line-height: 1.6;
    }
    
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.25rem !important;
        line-height: 1.4;
    }
    
    p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    /* Navigation - Optimized for small screens */
    .logo-text {
        font-size: 1.1rem !important;
    }
    
    .navbar {
        padding: 10px 0 !important;
    }
    
    .mobile-menu-toggle span {
        width: 22px !important;
        height: 2.5px !important;
    }
    
    /* Buttons - Touch-friendly sizes */
    .btn-primary,
    .btn-secondary,
    .btn-shop-onetime,
    .btn-banner {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
        width: 100%;
        justify-content: center;
    }
    
    .btn-badge {
        font-size: 0.6rem !important;
        padding: 2px 4px !important;
    }
    
    /* Hero Banner - Mobile optimized */
    .hero-banner-fullwidth {
        min-height: 480px !important;
    }
    
    .banner-container-fullwidth {
        padding: 50px 15px !important;
    }
    
    .banner-content-centered {
        padding: 20px 15px !important;
        max-width: 100% !important;
    }
    
    .banner-headline-main {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    
    .banner-message-sub {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    
    .banner-background-overlay {
        background: radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.8) 30%,
            rgba(255, 255, 255, 0.6) 60%,
            rgba(255, 255, 255, 0.4) 100%
        ) !important;
    }
    
    /* CTA Groups */
    .banner-cta-group {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100%;
    }
    
    .banner-cta-group .btn-banner {
        width: 100% !important;
        padding: 14px 20px !important;
    }
    
    /* Trust Badges */
    .trust-badges {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center;
    }
    
    .badge-item {
        justify-content: center;
        font-size: 0.8rem !important;
    }
    
    /* Video Section */
    .video-card {
        max-width: 380px !important;
    }
    
    .video-tagline {
        padding: 20px 15px !important;
    }
    
    .tagline-text {
        font-size: 1.6rem !important;
    }
    
    /* Comparison Cards */
    .comparison-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .comparison-card {
        padding: 20px !important;
    }
    
    /* Product Cards */
    .product-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .product-card {
        padding: 15px !important;
    }
    
    /* Footer */
    .footer-content {
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center;
    }
    
    .footer-section {
        width: 100% !important;
        text-align: center;
    }
}

/* ========================================
   SMALL MOBILE (481px - 575px)
   ======================================== */
@media (min-width: 481px) and (max-width: 575px) {
    .container {
        padding: 0 20px;
    }
    
    h1 {
        font-size: 2rem !important;
    }
    
    h2 {
        font-size: 1.65rem !important;
    }
    
    .hero-banner-fullwidth {
        min-height: 520px !important;
    }
    
    .banner-headline-main {
        font-size: 1.6rem !important;
    }
    
    .banner-message-sub {
        font-size: 0.9rem !important;
    }
    
    .video-card {
        max-width: 450px !important;
    }
    
    .tagline-text {
        font-size: 1.8rem !important;
    }
    
    /* Product grid - 2 columns on larger mobiles */
    .product-grid-mobile-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

/* ========================================
   LANDSCAPE MOBILE / SMALL TABLET (576px - 767px)
   ======================================== */
@media (min-width: 576px) and (max-width: 767px) {
    .container {
        padding: 0 25px;
    }
    
    h1 {
        font-size: 2.2rem !important;
    }
    
    h2 {
        font-size: 1.85rem !important;
    }
    
    /* Hero Banner */
    .hero-banner-fullwidth {
        min-height: 540px !important;
    }
    
    .banner-container-fullwidth {
        padding: 70px 25px !important;
    }
    
    .banner-content-centered {
        max-width: 520px !important;
        padding: 30px 25px !important;
    }
    
    .banner-headline-main {
        font-size: 1.85rem !important;
        max-width: 480px !important;
    }
    
    .banner-message-sub {
        font-size: 0.95rem !important;
        max-width: 460px !important;
    }
    
    /* Video */
    .video-card {
        max-width: 520px !important;
    }
    
    .tagline-text {
        font-size: 2rem !important;
    }
    
    /* Two-column layouts */
    .comparison-container {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    /* Trust badges - 2 columns */
    .trust-badges {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

/* ========================================
   MEDIUM TABLET (768px - 991px)
   ======================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        padding: 0 30px;
    }
    
    h1 {
        font-size: 2.4rem !important;
    }
    
    h2 {
        font-size: 2rem !important;
    }
    
    /* Navigation - Tablet optimized */
    .nav-menu {
        gap: 20px !important;
    }
    
    .nav-menu a {
        font-size: 0.95rem !important;
    }
    
    .nav-cta {
        gap: 12px !important;
    }
    
    .btn-primary,
    .btn-shop-onetime {
        padding: 11px 18px !important;
        font-size: 0.95rem !important;
    }
    
    /* Hero Banner */
    .hero-banner-fullwidth {
        min-height: 600px !important;
    }
    
    .banner-container-fullwidth {
        padding: 85px 35px !important;
    }
    
    .banner-content-centered {
        max-width: 580px !important;
        padding: 40px 30px !important;
    }
    
    .banner-headline-main {
        font-size: 2.15rem !important;
        max-width: 560px !important;
    }
    
    .banner-message-sub {
        font-size: 1rem !important;
        max-width: 540px !important;
    }
    
    /* Video */
    .video-card {
        max-width: 650px !important;
    }
    
    .tagline-text {
        font-size: 2.3rem !important;
    }
    
    /* Comparison cards - Side by side */
    .comparison-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
    }
    
    .comparison-card {
        padding: 30px !important;
    }
    
    /* Product grid - 2-3 columns */
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }
    
    .product-grid-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
    
    /* Trust badges - Full width row */
    .trust-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px !important;
    }
    
    .badge-item {
        flex: 0 0 calc(50% - 10px);
        justify-content: center;
    }
}

/* ========================================
   LARGE TABLET (992px - 1024px)
   ======================================== */
@media (min-width: 992px) and (max-width: 1024px) {
    .container {
        padding: 0 40px;
    }
    
    h1 {
        font-size: 2.6rem !important;
    }
    
    h2 {
        font-size: 2.2rem !important;
    }
    
    /* Navigation */
    .nav-menu {
        gap: 25px !important;
    }
    
    .nav-menu a {
        font-size: 1rem !important;
    }
    
    .nav-cta {
        gap: 14px !important;
    }
    
    /* Hero Banner */
    .hero-banner-fullwidth {
        min-height: 640px !important;
    }
    
    .banner-container-fullwidth {
        padding: 100px 40px !important;
    }
    
    .banner-content-centered {
        max-width: 620px !important;
        padding: 45px 35px !important;
    }
    
    .banner-headline-main {
        font-size: 2.45rem !important;
        max-width: 600px !important;
    }
    
    .banner-message-sub {
        font-size: 1.05rem !important;
        max-width: 580px !important;
    }
    
    /* Video */
    .video-card {
        max-width: 750px !important;
    }
    
    .tagline-text {
        font-size: 2.5rem !important;
    }
    
    /* Comparison and product grids */
    .comparison-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 35px !important;
    }
    
    .product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 25px !important;
    }
    
    /* Trust badges - Full row */
    .trust-badges {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 15px !important;
    }
    
    .badge-item {
        flex: 1;
        justify-content: center;
    }
}

/* ========================================
   SMALL DESKTOP (1025px - 1440px)
   ======================================== */
@media (min-width: 1025px) and (max-width: 1440px) {
    .container {
        padding: 0 50px;
    }
    
    h1 {
        font-size: 2.8rem !important;
    }
    
    h2 {
        font-size: 2.4rem !important;
    }
    
    /* Navigation */
    .nav-menu {
        gap: 30px !important;
    }
    
    .nav-menu a {
        font-size: 1.05rem !important;
    }
    
    /* Hero Banner */
    .hero-banner-fullwidth {
        min-height: 680px !important;
    }
    
    .banner-container-fullwidth {
        padding: 120px 50px !important;
    }
    
    .banner-content-centered {
        max-width: 650px !important;
        padding: 50px 40px !important;
    }
    
    .banner-headline-main {
        font-size: 2.6rem !important;
        max-width: 620px !important;
    }
    
    .banner-message-sub {
        font-size: 1.05rem !important;
        max-width: 600px !important;
    }
    
    /* Video */
    .video-card {
        max-width: 850px !important;
    }
    
    .tagline-text {
        font-size: 2.8rem !important;
    }
    
    /* Grids - Optimal layout */
    .comparison-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px !important;
    }
    
    .product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
    }
    
    .product-grid-4 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 25px !important;
    }
}

/* ========================================
   LARGE DESKTOP (1441px and above)
   ======================================== */
@media (min-width: 1441px) {
    .container {
        padding: 0 60px;
    }
    
    h1 {
        font-size: 3.2rem !important;
    }
    
    h2 {
        font-size: 2.8rem !important;
    }
    
    /* Navigation - Extra spacing */
    .navbar {
        padding: 20px 0 !important;
    }
    
    .nav-menu {
        gap: 35px !important;
    }
    
    .nav-menu a {
        font-size: 1.1rem !important;
    }
    
    .nav-cta {
        gap: 18px !important;
    }
    
    /* Hero Banner - Full glory */
    .hero-banner-fullwidth {
        min-height: 750px !important;
    }
    
    .banner-container-fullwidth {
        padding: 140px 60px !important;
    }
    
    .banner-content-centered {
        max-width: 700px !important;
        padding: 60px 50px !important;
    }
    
    .banner-headline-main {
        font-size: 3rem !important;
        max-width: 680px !important;
    }
    
    .banner-message-sub {
        font-size: 1.15rem !important;
        max-width: 650px !important;
    }
    
    /* Video */
    .video-card {
        max-width: 950px !important;
    }
    
    .tagline-text {
        font-size: 3.2rem !important;
    }
    
    /* Grids - Maximum columns */
    .comparison-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 50px !important;
    }
    
    .product-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 35px !important;
    }
}

/* ========================================
   COMMON RESPONSIVE FIXES FOR ALL DEVICES
   ======================================== */

/* Images - Always responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Tables - Mobile scrollable */
@media (max-width: 767px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .discount-table {
        overflow-x: auto;
    }
    
    .discount-row {
        min-width: 500px;
    }
}

/* Forms - Touch-friendly */
@media (max-width: 767px) {
    input,
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px !important;
    }
    
    button,
    .btn-primary,
    .btn-secondary {
        min-height: 44px; /* Touch target size */
        min-width: 44px;
    }
}

/* Modals - Full screen on mobile */
@media (max-width: 767px) {
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 10px auto !important;
    }
}

/* Spacing adjustments */
@media (max-width: 767px) {
    section {
        padding: 40px 0 !important;
    }
    
    .section-title {
        margin-bottom: 30px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    section {
        padding: 60px 0 !important;
    }
}

@media (min-width: 1025px) {
    section {
        padding: 80px 0 !important;
    }
}

/* Accessibility - Focus states for all devices */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #4a7c59;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .navbar,
    .footer,
    .btn-primary,
    .btn-secondary,
    .banner-cta-group {
        display: none !important;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    body {
        font-size: 12pt !important;
        line-height: 1.5 !important;
    }
}

/* ========================================
   ORIENTATION-SPECIFIC FIXES
   ======================================== */

/* Landscape mode on phones */
@media (max-width: 767px) and (orientation: landscape) {
    .hero-banner-fullwidth {
        min-height: 400px !important;
    }
    
    .banner-container-fullwidth {
        padding: 40px 20px !important;
    }
    
    .banner-headline-main {
        font-size: 1.4rem !important;
    }
    
    .banner-message-sub {
        font-size: 0.85rem !important;
    }
    
    .video-card {
        max-width: 500px !important;
    }
}

/* Portrait mode on tablets */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .comparison-container {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ========================================
   HIGH DPI / RETINA DISPLAYS
   ======================================== */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    /* Sharper text rendering */
    body {
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
    }
}

/* ========================================
   DARK MODE SUPPORT (Optional)
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles if needed in future */
    /* Currently maintaining light theme across all devices */
}

/* ========================================
   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;
    }
}