/**
 * Mobile Overflow & Centering Fix
 * Исправляет горизонтальный скролл и центрирует контент на мобильных
 */

/* ===== ГЛОБАЛЬНЫЕ ПРАВИЛА ===== */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative !important;
}

/* ===== МОБИЛЬНЫЕ ИСПРАВЛЕНИЯ (до 768px) ===== */
@media (max-width: 768px) {

    /* Предотвращение overflow на всех элементах */
    *,
    *::before,
    *::after {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Контейнеры */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        overflow-x: hidden !important;
    }

    /* Секции */
    section,
    .section {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
    }

    /* About Section - проблемная секция */
    .about-section,
    .about-layout,
    .about-left,
    .about-right {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: hidden !important;
    }

    .modern-video-card,
    .video-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .video-wrapper iframe {
        width: 100% !important;
        max-width: 100% !important;
    }

    .company-story,
    .experience-stats,
    .service-features {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Testimonials Section */
    .testimonials-modern,
    .testimonials-modern-grid {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .testimonial-card,
    .testimonial-video-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    .testimonial-video-wrapper iframe {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Grids */
    .services-grid,
    .benefits-grid,
    .areas-grid,
    .testimonials-grid {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Cards */
    .service-card,
    .benefit-card,
    .area-item,
    .testimonial-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Images */
    img,
    picture,
    video,
    iframe {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Hero Section */
    .hero-section,
    .hero-content,
    .hero-text,
    .hero-image {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .hero-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Floating icons - скрыть на мобильных если вызывают overflow */
    .hero-bg-animation,
    .floating-icon {
        display: none !important;
    }

    /* Buttons & CTAs */
    .hero-cta-group,
    .services-cta {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    .cta-primary,
    .cta-secondary,
    .countdown-cta,
    .call-btn,
    .book-btn {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* ЦЕНТРИРОВАНИЕ СЕКЦИЙ */

    /* About Section */
    .about-section {
        text-align: center !important;
    }

    .about-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .about-left,
    .about-right {
        text-align: center !important;
    }

    .company-story,
    .service-features {
        text-align: left !important; /* Текст читаемее слева */
    }

    .experience-stats {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .stat-item {
        width: 100% !important;
        max-width: 300px !important;
        text-align: center !important;
    }

    /* Video Section */
    .modern-video-card {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .video-info {
        text-align: center !important;
    }

    /* Certifications */
    .certifications {
        display: flex !important;
        justify-content: center !important;
        gap: 1rem !important;
        flex-wrap: wrap !important;
    }

    .cert-badge {
        flex: 0 1 auto !important;
    }

    /* Testimonials */
    .testimonials-header {
        text-align: center !important;
    }

    .testimonials-modern-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .testimonial-card {
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Customer Counter */
    .customer-counter {
        text-align: center !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Brands Section */
    .brand-logos-showcase {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
    }

    .logo-item {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 0.85rem !important;
        padding: 0.75rem 0.5rem !important;
    }

    /* FAQ Section */
    .faq-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .faq-grid {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
    }

    .faq-item {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Footer */
    .main-footer {
        overflow-x: hidden !important;
    }

    .footer-content {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center !important;
    }

    .footer-column {
        width: 100% !important;
        max-width: 100% !important;
    }

    .social-links,
    .payment-methods {
        justify-content: center !important;
    }

    /* Countdown Section */
    .countdown-section {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .countdown-timer {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .timer-box {
        width: auto !important;
        min-width: 100px !important;
        max-width: 45% !important;
        flex: 0 1 auto !important;
    }

    /* Areas Section */
    .areas-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .area-item {
        font-size: 0.875rem !important;
        padding: 0.75rem 0.5rem !important;
    }

    .areas-features {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Booking Form */
    .booking-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .booking-form,
    .booking-info {
        width: 100% !important;
        max-width: 100% !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }

    /* How It Works */
    .steps-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2rem !important;
    }

    .step-item {
        width: 100% !important;
        max-width: 400px !important;
        text-align: center !important;
    }

    /* Исправление для specific проблемных элементов */

    /* Если есть таблицы */
    table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
    }

    /* Если есть pre/code blocks */
    pre,
    code {
        max-width: 100% !important;
        overflow-x: auto !important;
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
    }

    /* Absolute/Fixed позиционирование */
    .fixed,
    .absolute,
    [style*="position: fixed"],
    [style*="position: absolute"] {
        max-width: 100vw !important;
    }

    /* Back to top button */
    #backToTop {
        right: 15px !important;
        bottom: 15px !important;
    }
}

/* ===== EXTRA SMALL DEVICES (до 480px) ===== */
@media (max-width: 480px) {

    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .brand-logos-showcase {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    .logo-item {
        font-size: 0.9rem !important;
    }

    .countdown-timer {
        flex-direction: column !important;
        align-items: center !important;
    }

    .timer-box {
        max-width: 200px !important;
        width: 100% !important;
    }

    .hero-title {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }

    .section-title {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    .cta-primary,
    .cta-secondary {
        font-size: 1rem !important;
        padding: 1rem 1.5rem !important;
    }

    .areas-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== DEBUG MODE (раскомментировать для отладки) ===== */
/*
@media (max-width: 768px) {
    * {
        outline: 1px solid red !important;
    }

    *:hover {
        outline: 2px solid blue !important;
    }
}
*/