/* Responsive Styles - Mobile First Approach */
/* Best Practices 2025: Multiple breakpoints for optimal display across all devices */

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
    /* Typography */
    .hero-title {
        font-size: var(--size-32) !important;
        line-height: var(--line-compact);
    }

    .hero-subtitle {
        font-size: var(--font-sm) !important;
    }

    .section-title {
        font-size: var(--font-lg) !important;
    }

    /* Touch-Friendly Buttons - Minimum 48x48px */
    .btn {
        padding: var(--space-sm) !important;
        font-size: var(--font-sm) !important;
        width: 100%;
        min-height: var(--size-48);
    }

    .btn-large {
        padding: var(--space-md) var(--size-34) !important;
        font-size: var(--font-sm) !important;
        width: 100%;
        min-height: var(--size-48);
    }

    /* Hero Section */
    .hero {
        padding: var(--space-lg) var(--space-sm) !important;
    }

    .hero-gallery {
        grid-template-columns: 1fr !important;
        gap: var(--space-xs) !important;
    }

    .hero-stats {
        grid-template-columns: 1fr !important;
        gap: var(--space-sm) !important;
        margin-top: var(--space-lg) !important;
    }

    .stat-number {
        font-size: var(--size-36) !important;
    }

    .stat-label {
        font-size: var(--font-xs) !important;
    }

    /* Testimonial Bridge */
    .testimonial-bridge {
        padding: var(--space-lg) var(--space-sm) !important;
    }

    .quick-testimonial-hero {
        padding: var(--space-md) var(--space-sm) !important;
    }

    .quick-quote {
        font-size: var(--size-15) !important;
        line-height: var(--line-comfortable);
    }

    .quick-author {
        font-size: var(--font-xs) !important;
    }

    /* Problem Section */
    .problem-section {
        padding: var(--space-xl) var(--space-sm) !important;
    }

    .problem-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
    }

    .problem-card {
        padding: var(--space-sm) var(--space-sm) !important;
    }

    .problem-icon {
        font-size: var(--size-36) !important;
    }

    .problem-card h3 {
        font-size: var(--size-20) !important;
    }

    /* Solution Section */
    .solution-section {
        padding: var(--space-xl) var(--space-sm) !important;
    }

    .solution-content {
        grid-template-columns: 1fr !important;
        gap: var(--space-lg) !important;
    }

    .solution-text h2 {
        font-size: var(--font-lg) !important;
    }

    .lead {
        font-size: var(--font-md) !important;
    }

    .benefit-list strong {
        font-size: var(--font-sm) !important;
    }

    .benefit-list p {
        font-size: var(--font-sm) !important;
    }

    /* Before/After Comparison */
    .comparison-images {
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
    }

    .visual-box {
        padding: var(--space-md) var(--space-sm) !important;
    }

    .visual-label {
        font-size: var(--font-sm) !important;
    }

    .visual-caption {
        font-size: var(--font-xs) !important;
    }

    .visual-arrow {
        font-size: var(--size-36) !important;
    }

    /* Price Reveal */
    .price-reveal {
        padding: var(--space-xl) var(--space-sm) !important;
    }

    .value-stack {
        padding: var(--space-md) var(--space-sm) !important;
    }

    .value-name {
        font-size: var(--font-sm) !important;
    }

    .value-price {
        font-size: var(--font-sm) !important;
    }

    .total-label {
        font-size: var(--font-sm) !important;
    }

    .total-price {
        font-size: var(--font-lg) !important;
    }

    .price-reveal-box {
        padding: var(--space-lg) var(--space-md) !important;
    }

    .reveal-text {
        font-size: var(--font-sm) !important;
    }

    .reveal-highlight {
        font-size: var(--size-20) !important;
    }

    .reveal-strike {
        font-size: var(--font-md) !important;
    }

    .reveal-current {
        font-size: var(--size-48) !important;
    }

    .reveal-subtext {
        font-size: var(--font-sm) !important;
    }

    /* Features Section */
    .features-section {
        padding: var(--space-md) var(--space-sm) !important;
    }

    .features-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
    }

    .feature-card {
        padding: var(--space-sm) var(--space-sm) !important;
    }

    .feature-card h3 {
        font-size: var(--size-20) !important;
    }

    .feature-number {
        font-size: var(--font-xs) !important;
    }

    /* Results Gallery */
    .results-gallery {
        padding: var(--space-xs) var(--space-sm) var(--space-md) var(--space-sm) !important;
    }

    .section-subtitle {
        font-size: var(--font-sm) !important;
        margin-top: 0 !important;
        margin-bottom: var(--space-md) !important;
    }

    .results-gallery .section-title {
        margin-bottom: var(--space-md) !important;
    }

    .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
    }

    /* Social Proof */
    .social-proof {
        padding: var(--space-xl) var(--space-sm) !important;
    }

    .testimonials {
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
    }

    .testimonial {
        padding: var(--space-md) var(--space-sm) !important;
    }

    .quote {
        font-size: var(--size-15) !important;
    }

    .author {
        font-size: var(--font-sm) !important;
    }

    /* FAQ Section */
    .faq-section {
        padding: var(--space-xl) var(--space-sm) !important;
    }

    .faq-container {
        padding: 0 !important;
    }

    .faq-question-wrapper {
        padding: var(--space-md) !important;
    }

    .faq-question {
        font-size: var(--size-15) !important;
        padding-right: var(--space-xl) !important;
    }

    .faq-toggle {
        width: var(--size-48) !important;
        height: var(--size-48) !important;
        font-size: var(--font-md) !important;
    }

    .faq-answer {
        padding: 0 var(--space-sm) !important;
    }

    .faq-item.active .faq-answer {
        padding: 0 var(--space-sm) var(--space-md) var(--space-sm) !important;
    }

    .faq-answer p {
        font-size: var(--font-sm) !important;
    }

    /* Final CTA */
    .final-cta {
        padding: var(--space-xl) var(--space-sm) !important;
    }

    .cta-box {
        padding: var(--space-lg) var(--space-md) !important;
    }

    .cta-box h2 {
        font-size: var(--font-lg) !important;
    }

    .cta-subtitle {
        font-size: var(--font-md) !important;
    }

    .price-strike {
        font-size: var(--size-20) !important;
    }

    .cta-box .price-current {
        font-size: var(--font-2xl) !important;
    }

    .price-label {
        font-size: var(--font-sm) !important;
    }

    .warning-text {
        font-size: var(--font-xs) !important;
    }

    /* Modals */
    .modal {
        width: 98% !important;
        max-height: 95vh !important;
    }

    .modal-header {
        padding: var(--space-md) var(--space-md) !important;
    }

    .modal-header h2 {
        font-size: var(--size-20) !important;
    }

    .modal-close {
        width: var(--size-32) !important;
        height: var(--size-32) !important;
        font-size: var(--font-lg) !important;
    }

    .modal-body {
        padding: var(--space-md) !important;
    }

    .modal-body h3 {
        font-size: var(--font-md) !important;
    }

    .modal-body p,
    .modal-body ul li {
        font-size: var(--font-sm) !important;
    }

    .contact-method {
        padding: var(--space-md) var(--space-sm) !important;
    }

    .contact-method h3 {
        font-size: var(--font-md) !important;
    }

    .contact-description {
        font-size: var(--font-sm) !important;
    }

    .contact-email {
        font-size: var(--font-sm) !important;
        padding: var(--space-xs) var(--space-sm) !important;
        word-break: break-all;
    }

    .contact-intro {
        font-size: var(--size-15) !important;
    }

    .contact-note p {
        font-size: var(--font-xs) !important;
    }

    /* Footer */
    .footer {
        padding: var(--space-lg) var(--space-sm) !important;
    }

    .footer p {
        font-size: var(--font-sm) !important;
    }

    .footer-links {
        flex-direction: column;
        gap: var(--size-15) !important;
    }

    .footer-links a {
        font-size: var(--font-sm) !important;
    }
}

/* Mobile Landscape & Tablet Portrait (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    /* Hero Gallery - 2 columns */
    .hero-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--size-15) !important;
    }

    /* Comparison Images - 2 columns */
    .comparison-images {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--size-15) !important;
    }

    /* Hero Stats - 2 columns */
    .hero-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Buttons */
    .btn {
        width: auto !important;
    }

    .btn-large {
        width: auto !important;
    }

    /* Features Grid - 2 columns */
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Gallery Grid - 2 columns */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Testimonials - 2 columns */
    .testimonials {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Problem Grid - 2 columns */
    .problem-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Tablet & Small Desktop (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 var(--space-lg);
    }

    .solution-content {
        gap: var(--size-60) !important;
    }

    .hero-gallery {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .comparison-images {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .problem-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Large Desktop (1025px+) - Default styles apply */
@media (min-width: 1025px) {
    .container {
        max-width: var(--size-987);
    }
}

/* Performance Optimization - Reduce animations on mobile */
@media (max-width: 768px) {
    * {
        animation-duration: var(--duration-quick) !important;
    }

    .hero::before {
        display: none !important;  /* Hide background gradient on mobile for performance */
    }
}

/* Accessibility - Ensure touch targets are 48x48px minimum */
@media (max-width: 768px) {
    .faq-toggle,
    .modal-close,
    .btn,
    .btn-large {
        min-width: var(--size-48);
        min-height: var(--size-48);
    }
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Loading Spinner - Mobile Optimization */
@media (max-width: 480px) {
    .spinner-ring {
        width: var(--size-60) !important;
        height: var(--size-60) !important;
        border-width: 3px !important;
    }

    .spinner-text {
        font-size: var(--font-sm) !important;
    }
}

/* ============================================
   BLACK FRIDAY MOBILE RESPONSIVE STYLES
   ============================================ */

/* Small Mobile - Black Friday Adjustments */
@media (max-width: 480px) {
    .bf-banner {
        padding: var(--space-xs) var(--space-sm);
    }

    .bf-flash {
        font-size: var(--font-md) !important;
        letter-spacing: var(--letter-normal);
    }

    .bf-warning {
        font-size: var(--font-sm) !important;
    }

    .countdown-container {
        padding: var(--space-sm) !important;
    }

    .countdown-label {
        font-size: var(--font-sm) !important;
        margin-bottom: var(--space-sm);
    }

    .countdown-timer {
        gap: var(--space-xs) !important;
        flex-wrap: nowrap;
    }

    .countdown-unit {
        padding: var(--space-sm) var(--space-xs) !important;
        min-width: var(--size-48) !important;
    }

    .countdown-number {
        font-size: var(--font-lg) !important;
    }

    .countdown-label-small {
        font-size: var(--font-xxs) !important;
    }

    .countdown-separator {
        font-size: var(--font-lg) !important;
    }

    .bf-price-hero {
        padding: var(--space-md) var(--space-sm) !important;
    }

    .bf-price-old {
        font-size: var(--font-sm) !important;
    }

    .bf-price-new {
        font-size: var(--font-md) !important;
    }

    .bf-price-big {
        font-size: var(--size-48) !important;
    }

    .bf-price-save {
        font-size: var(--font-sm) !important;
    }

    .bf-deal-highlight {
        padding: var(--space-md) var(--space-sm) !important;
    }

    .bf-deal-highlight h3 {
        font-size: var(--size-21) !important;
    }

    .bf-never-again {
        font-size: var(--font-sm) !important;
    }

    .bf-ribbon {
        font-size: var(--font-sm) !important;
        padding: var(--space-xxs) var(--space-md) !important;
        top: calc(var(--space-sm) * -1);
    }

    .bf-current {
        font-size: var(--font-2xl) !important;
    }

    .bf-discount-badge {
        font-size: var(--font-sm) !important;
        padding: var(--space-xs) var(--space-md) !important;
    }

    .bf-urgency {
        font-size: var(--font-sm) !important;
    }

    .bf-final-banner {
        padding: var(--space-sm) !important;
    }

    .bf-final-flash {
        font-size: var(--font-md) !important;
    }

    .cta-box .bf-current-final {
        font-size: var(--size-48) !important;
    }

    .bf-label {
        font-size: var(--font-sm) !important;
    }

    .bf-warning-final {
        font-size: var(--font-sm) !important;
        padding: var(--space-sm) !important;
    }

    .btn-bf {
        font-size: var(--font-md) !important;
        padding: var(--space-md) var(--space-lg) !important;
    }

    .bf-highlight {
        font-size: 1.236em !important;
    }

    .bf-cta-subtitle {
        font-size: var(--font-sm) !important;
    }
}

/* Mobile Landscape & Tablet - Black Friday */
@media (min-width: 481px) and (max-width: 768px) {
    .bf-flash {
        font-size: var(--size-21);
    }

    .countdown-number {
        font-size: var(--size-36);
    }

    .countdown-unit {
        min-width: var(--space-xl);
        padding: var(--space-sm) var(--space-xs);
    }

    .bf-price-big {
        font-size: var(--size-60);
    }

    .bf-current {
        font-size: var(--font-xl) !important;
    }

    .bf-current-final {
        font-size: var(--size-80) !important;
    }
}

/* Tablet - Black Friday */
@media (min-width: 769px) and (max-width: 1024px) {
    .countdown-number {
        font-size: var(--font-lg);
    }

    .bf-price-big {
        font-size: var(--font-2xl);
    }
}

/* ============================================
   NEW ELEMENTS - MOBILE RESPONSIVE
   ============================================ */

/* Exit Intent Popup - Mobile */
@media (max-width: 480px) {
    .exit-intent-popup {
        padding: var(--space-md) var(--space-sm) !important;
        margin: var(--space-xs) !important;
        max-width: 95vw !important;
        width: 95vw !important;
    }

    .exit-title {
        font-size: var(--font-lg) !important;
        margin-bottom: var(--space-xs) !important;
    }

    .exit-subtitle {
        font-size: var(--font-sm) !important;
        margin-bottom: var(--space-sm) !important;
    }

    .exit-countdown {
        padding: var(--space-xs) !important;
        margin: var(--space-sm) 0 !important;
    }

    .exit-timer-label {
        font-size: var(--font-sm) !important;
        margin-bottom: var(--space-xxs) !important;
    }

    .exit-timer {
        font-size: var(--size-26) !important;
    }

    .exit-price {
        margin: var(--space-sm) 0 !important;
    }

    .exit-strike {
        font-size: var(--font-sm) !important;
        margin-bottom: var(--space-xxs) !important;
    }

    .exit-current {
        font-size: var(--size-32) !important;
        margin: var(--space-xs) 0 !important;
    }

    .exit-save {
        font-size: var(--font-xs) !important;
    }

    .btn-exit {
        font-size: var(--font-md) !important;
        padding: var(--space-sm) !important;
        margin: var(--space-sm) 0 !important;
        min-height: var(--size-48) !important;
    }

    .exit-warning {
        font-size: var(--font-xs) !important;
        margin-top: var(--space-xs) !important;
    }

    .exit-close {
        width: var(--size-34) !important;
        height: var(--size-34) !important;
        font-size: var(--font-md) !important;
        top: var(--space-xs) !important;
        right: var(--space-xs) !important;
    }
}

/* Exit Intent Popup - Tablet */
@media (min-width: 481px) and (max-width: 768px) {
    .exit-intent-popup {
        padding: var(--space-lg) var(--space-md) !important;
        max-width: 85vw !important;
    }

    .exit-title {
        font-size: var(--font-xl) !important;
    }

    .exit-subtitle {
        font-size: var(--font-md) !important;
    }

    .exit-timer {
        font-size: var(--size-36) !important;
    }

    .exit-current {
        font-size: var(--size-48) !important;
    }
}

/* Trust Badges - Mobile */
@media (max-width: 480px) {
    .trust-badges {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
        padding: var(--space-md) 0;
    }

    .trust-badge {
        padding: var(--space-xs);
    }

    .trust-icon {
        font-size: var(--font-md);
    }

    .trust-text {
        font-size: var(--font-xs);
    }
}

/* Guarantee Box - Mobile */
@media (max-width: 480px) {
    .guarantee-box {
        flex-direction: column;
        text-align: center;
        padding: var(--space-md);
    }

    .guarantee-badge {
        font-size: var(--size-48);
    }

    .guarantee-content h4 {
        font-size: var(--size-20);
    }

    .guarantee-content p {
        font-size: var(--font-sm);
    }
}

/* Sticky Header - Mobile */
@media (max-width: 480px) {
    .bf-sticky-header {
        padding: var(--space-xs) var(--space-sm);
    }

    .sticky-timer-compact {
        gap: var(--space-xs);
    }

    .sticky-label {
        font-size: var(--font-xs);
    }

    .sticky-time {
        font-size: var(--font-sm);
    }

    .btn-sticky-cta {
        padding: var(--space-xs) var(--space-sm);
        font-size: var(--font-xs);
        min-height: var(--size-48);
    }
}