/* ============================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ============================================ */

/* ============================================
   SMALL PHONES (320px - 479px)
   ============================================ */

@media (max-width: 479px) {
    /* Prevent horizontal scroll - CRITICAL FIX */
    html, body, main, section {
        width: 100%;
        overflow-x: hidden;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Typography */
    html {
        font-size: 14px;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    p {
        font-size: 0.9rem;
    }

    /* Container */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }

    /* All Grids - Fix text cutoff */
    .trust-grid,
    .reviews-grid,
    .ingredients-grid,
    .science-grid,
    .benefit-row,
    .pricing-grid,
    .what-is-content,
    .final-cta-content,
    .guarantee-content,
    .footer-content {
        padding: 0 1rem;
        box-sizing: border-box;
    }

    /* Text wrapping - prevent cutoff */
    p, h1, h2, h3, h4, h5, h6 {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Navigation */
    .navbar-container {
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }

    .navbar-brand .brand-logo {
        font-size: 1.25rem;
    }

    .navbar-menu {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .nav-cta-btn {
        display: none;
    }

    /* Hero Section */
    .hero-container {
        flex-direction: column;
        gap: 2rem;
        padding: 0 1rem;
        box-sizing: border-box;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-description {
        font-size: 0.9rem;
    }

    .btn-large {
        font-size: 1rem;
        padding: 1rem 1.5rem;
        min-height: 3rem;
    }

    /* Why Choose Grid */
    .trust-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .trust-card {
        padding: 1.5rem 1rem;
    }

    /* What Is Section */
    .what-is-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Pricing Grid */
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .pricing-card-featured {
        transform: scale(1);
    }

    .pricing-card-featured:hover {
        transform: scale(1) translateY(-15px);
    }

    /* Ingredients Grid */
    .ingredients-grid {
        grid-template-columns: 1fr;
    }

    .ingredient-card {
        padding: 1.5rem 1rem;
    }

    /* Science Grid */
    .science-grid {
        grid-template-columns: 1fr;
    }

    /* Guarantee Section */
    .guarantee-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Benefits */
    .benefit-row {
        grid-template-columns: 1fr;
    }

    /* Reviews Grid */
    .reviews-grid {
        grid-template-columns: 1fr;
    }

    /* Final CTA */
    .final-cta-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .final-cta-text h2 {
        font-size: 1.75rem;
    }

    .final-new-price span {
        font-size: 2rem;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0;
    }

    .footer-column {
        text-align: center;
    }

    .footer-column h4 {
        text-align: center;
    }

    .footer-column ul {
        text-align: center;
    }

    .footer-column ul li {
        margin-bottom: 0.5rem;
    }

    .footer-column p {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .social-links {
        justify-content: center;
        gap: 1rem;
    }

    .footer-bottom {
        padding: 1.5rem 0 0;
    }

    .disclaimer-text {
        font-size: 0.8rem;
        padding: 0 0.5rem;
    }

    .copyright {
        font-size: 0.85rem;
        padding: 0 0.5rem;
    }

    /* Buttons */
    .btn {
        min-height: 2.75rem;
        font-size: 0.95rem;
    }

    .btn-block {
        width: 100%;
    }

    /* Section Padding */
    section {
        padding: 2rem 0;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .section-subtitle {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    /* Mobile Menu */
    .mobile-menu {
        padding-top: 5rem;
    }

    /* Scroll To Top */
    .scroll-top-btn {
        width: 3rem;
        height: 3rem;
        bottom: 1rem;
        right: 1rem;
        font-size: 1.25rem;
    }

    /* Notification */
    .notification-popup {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        max-width: none;
    }

    /* Timer */
    .timer-text {
        font-size: 2rem;
    }

    .timer-box {
        padding: 1.5rem;
    }

    /* Accordion */
    .accordion-header {
        padding: 1.25rem;
        font-size: 1rem;
    }

    .accordion-content p {
        padding: 1rem;
    }

    /* Input focus */
    input, select, textarea {
        font-size: 16px;
    }
}

/* ============================================
   PHONES (480px - 575px)
   ============================================ */

@media (min-width: 480px) and (max-width: 575px) {
    /* Typography */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.35rem;
    }

    /* Navigation */
    .navbar-menu {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .nav-cta-btn {
        display: none;
    }

    /* Hero Section */
    .hero-container {
        flex-direction: column;
        gap: 2rem;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 1.125rem;
    }

    /* Pricing Grid */
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card-featured {
        transform: scale(1);
    }

    /* Ingredients */
    .ingredients-grid {
        grid-template-columns: 1fr;
    }

    /* Science */
    .science-grid {
        grid-template-columns: 1fr;
    }

    /* Guarantee */
    .guarantee-content {
        grid-template-columns: 1fr;
    }

    /* Reviews */
    .reviews-grid {
        grid-template-columns: 1fr;
    }

    /* Benefits */
    .benefit-row {
        grid-template-columns: 1fr;
    }

    /* Final CTA */
    .final-cta-content {
        grid-template-columns: 1fr;
    }

    /* Trust Grid */
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   LARGE PHONES (576px - 767px)
   ============================================ */

@media (min-width: 576px) and (max-width: 767px) {
    /* Typography */
    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.875rem;
    }

    /* Container */
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Navigation */
    .navbar-menu {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .nav-cta-btn {
        display: none;
    }

    /* Hero */
    .hero-container {
        flex-direction: column;
    }

    .hero-image-wrapper {
        min-height: 350px;
    }

    /* Pricing Grid */
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-card-featured {
        grid-column: 1 / -1;
        transform: scale(1);
    }

    /* Ingredients */
    .ingredients-grid {
        grid-template-columns: 1fr;
    }

    /* Science */
    .science-grid {
        grid-template-columns: 1fr;
    }

    /* Guarantee */
    .guarantee-content {
        grid-template-columns: 1fr;
    }

    /* Reviews */
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Benefits */
    .benefit-row {
        grid-template-columns: 1fr;
    }

    /* Final CTA */
    .final-cta-content {
        grid-template-columns: 1fr;
    }

    /* Trust Grid */
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* What Is */
    .what-is-content {
        grid-template-columns: 1fr;
    }

    /* Buttons */
    .btn {
        min-height: 3rem;
        padding: 0.875rem 1.5rem;
    }

    .btn-large {
        padding: 1.125rem 2rem;
    }

    /* Section */
    section {
        padding: 3rem 0;
    }
}

/* ============================================
   TABLETS (768px - 1023px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Container */
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Navigation */
    .navbar-menu {
        gap: 1.5rem;
        flex: 0;
    }

    .nav-link {
        font-size: 0.9rem;
    }

    .hamburger {
        display: none;
    }

    .nav-cta-btn {
        display: flex;
        padding: 0.625rem 1.25rem;
        font-size: 0.9rem;
    }

    /* Hero */
    .hero-container {
        gap: 3rem;
    }

    .hero-image-wrapper {
        min-height: 450px;
    }

    .hero-title {
        font-size: 2.25rem;
    }

    /* Pricing */
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pricing-card-featured {
        transform: scale(1.05);
    }

    /* Ingredients */
    .ingredients-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Science */
    .science-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Guarantee */
    .guarantee-content {
        grid-template-columns: 1fr 1fr;
    }

    /* Reviews */
    .reviews-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Benefits */
    .benefit-row {
        grid-template-columns: 1fr 1fr;
    }

    /* Final CTA */
    .final-cta-content {
        grid-template-columns: 1fr 1fr;
    }

    /* Trust Grid */
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* What Is */
    .what-is-content {
        grid-template-columns: 1fr 1fr;
    }

    /* Section */
    section {
        padding: 3.5rem 0;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   LAPTOPS (1024px - 1439px)
   ============================================ */

@media (min-width: 1024px) and (max-width: 1439px) {
    /* Container */
    .container {
        max-width: 1100px;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    /* Hero */
    .hero-container {
        gap: 3.5rem;
    }

    /* Section */
    section {
        padding: 4rem 0;
    }

    /* Buttons */
    .btn-large {
        font-size: 1.125rem;
        padding: 1.25rem 2.5rem;
    }
}

/* ============================================
   DESKTOP (1440px+)
   ============================================ */

@media (min-width: 1440px) {
    /* Container */
    .container {
        max-width: 1280px;
    }

    /* Section */
    section {
        padding: 5rem 0;
    }

    /* Buttons */
    .btn-large {
        font-size: 1.25rem;
        padding: 1.5rem 3rem;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION (max-height)
   ============================================ */

@media (orientation: landscape) and (max-height: 600px) {
    /* Reduce section padding */
    section {
        padding: 2rem 0;
    }

    /* Reduce navigation height */
    .navbar-container {
        padding: 0.5rem 1rem;
    }

    /* Reduce hero spacing */
    .hero-section {
        padding: 2rem 0;
    }

    .hero-container {
        gap: 2rem;
    }

    /* Reduce button height */
    .btn {
        min-height: 2.5rem;
        padding: 0.75rem 1.5rem;
    }

    .btn-large {
        min-height: 2.75rem;
    }
}

/* ============================================
   PRINT MEDIA
   ============================================ */

@media print {
    /* Hide interactive elements */
    .navbar,
    .hamburger,
    .mobile-menu,
    .scroll-top-btn,
    .notification-popup,
    .btn {
        display: none !important;
    }

    /* Adjust for print */
    body {
        background: white;
        color: black;
    }

    section {
        page-break-inside: avoid;
    }

    a {
        text-decoration: underline;
    }
}

/* ============================================
   HIGH DPI SCREENS (Retina)
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Thinner borders on retina displays */
    button,
    .trust-card,
    .ingredient-card,
    .science-card,
    .benefit-box {
        border-width: 1px;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --light: #1a1f2e;
        --light-dark: #242d3d;
    }

    body {
        background-color: #0f1117;
        color: #e0e6ed;
    }

    .navbar {
        background: #0f1117;
    }

    .navbar-link {
        color: #e0e6ed;
    }

    .trust-card,
    .ingredient-card,
    .science-card,
    .benefit-box,
    .review-card,
    .pricing-card {
        background: #1a1f2e;
        border-color: #242d3d;
        color: #e0e6ed;
    }

    .accordion-header {
        background: #1a1f2e;
    }

    .accordion-content {
        background: #0f1117;
    }

    .accordion-item {
        border-color: #242d3d;
    }

    p, span {
        color: #b5bcc7;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

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

/* High contrast mode */
@media (prefers-contrast: more) {
    .btn-primary {
        border: 2px solid white;
    }

    a {
        text-decoration: underline;
    }
}

/* Focus visible for accessibility */
*:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* ============================================
   SPECIFIC FIXES FOR COMMON ISSUES
   ============================================ */

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Ensure full viewport */
html {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* Text readability */
p {
    max-width: none;
}

/* Image responsiveness */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Form inputs */
input,
select,
textarea {
    font-size: 16px;
    border-radius: 0.5rem;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Touch target minimum size */
.btn,
button,
a[role="button"],
[role="button"] {
    min-width: 44px;
    min-height: 44px;
}

/* Safe area for notch devices */
@supports (padding: max(0px)) {
    .navbar-container,
    .container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}