/* ================================================================
   MOBILE OVERFLOW FIX - SENIOR FRONTEND ENGINEER SOLUTION
   ================================================================
   PURPOSE: Eliminate horizontal overflow on mobile caused by:
   - Images/SVGs with transforms extending beyond viewport
   - Absolute/fixed elements with negative positions
   - Animations affecting layout bounds
   - VW-based widths causing overflow
   
   MUST WORK FOR:
   - English (LTR)
   - Arabic (RTL)
   - All screen sizes below 768px
   ================================================================ */

/* ================================================================
   1) GLOBAL HARD BLOCK - HORIZONTAL OVERFLOW PROTECTION
   ================================================================ */
html {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

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

/* Universal box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ================================================================
   2) IMAGE & SVG CONTAINMENT - GLOBAL
   ================================================================ */
img,
svg,
video,
canvas,
picture,
iframe {
    max-width: 100%;
    height: auto;
}

/* ================================================================
   3) RTL SAFETY - LOGICAL PROPERTIES & OVERFLOW
   ================================================================ */
html[dir="rtl"],
html[dir="rtl"] body {
    overflow-x: hidden !important;
}

/* ================================================================
   4) MOBILE-SPECIFIC OVERRIDES (≤768px) - CRITICAL
   ================================================================ */
@media (max-width: 768px) {

    /* ============================================================
       4.1) DISABLE ALL TRANSFORMS ON MOBILE
       Only allow safe properties: opacity, translateY
       ============================================================ */

    /* Hero section - disable all transforms */
    .hosting-hero *,
    .banner-sec *,
    .inner-banner-sec *,
    [class*="hero"] *,
    [class*="banner"] * {
        transform: translateY(0) !important;
        animation-name: none !important;
    }

    /* Decorative images & shapes - completely neutralize */
    .hero-shape-1,
    .hero-shape-2,
    .hero-shape-3,
    .hero-img-shape-1,
    .hero-img-shape-2,
    .hero-img-shape-3,
    .shape-img,
    .banner-shape,
    .floating-shape,
    [class*="shape-"],
    [class*="floating-"] {
        transform: none !important;
        animation: none !important;
        position: static !important;
        display: none !important;
    }

    /* ============================================================
       4.2) HERO SECTION CONTAINMENT
       ============================================================ */
    .hosting-hero,
    .banner-sec,
    .inner-banner-sec,
    [class*="hero-section"],
    [class*="banner-section"] {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative;
    }

    /* Hero content and illustrations */
    .hero-content,
    .hero-illustration,
    .banner-content,
    .banner-img,
    .banner-content-img {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Hero images - constrain to viewport */
    .hosting-hero img,
    .hosting-hero svg,
    .banner-sec img,
    .banner-sec svg,
    .hero-img,
    .banner-img img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        animation: none !important;
    }

    /* ============================================================
       4.3) CONTAINER & ROW SAFETY
       ============================================================ */
    .container,
    .container-fluid {
        max-width: 100% !important;
        padding-inline: 15px !important;
        overflow-x: hidden !important;
    }

    .row {
        margin-inline: 0 !important;
        max-width: 100% !important;
    }

    [class*="col-"] {
        padding-inline: 15px !important;
        max-width: 100% !important;
    }

    /* ============================================================
       4.4) ABSOLUTE/FIXED ELEMENTS CONTAINMENT
       ============================================================ */

    /* Contain pseudo-elements that may overflow */
    .hosting-hero::before,
    .hosting-hero::after,
    .banner-sec::before,
    .banner-sec::after,
    [class*="hero"]::before,
    [class*="hero"]::after {
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    /* ============================================================
       4.5) AOS ANIMATION LIBRARY OVERRIDE
       ============================================================ */
    [data-aos] {
        transform: none !important;
        opacity: 1 !important;
        transition: opacity 0.4s ease !important;
    }

    [data-aos].aos-animate {
        transform: none !important;
        opacity: 1 !important;
    }

    /* ============================================================
       4.6) SWIPER/SLIDER CONTAINMENT
       ============================================================ */
    .swiper,
    .swiper-container,
    .swiper-wrapper,
    .swiper-slide {
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    /* ============================================================
       4.7) SECTION CONTAINMENT
       ============================================================ */
    section,
    .section-pad {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* ================================================================
   5) RTL-SPECIFIC MOBILE FIXES
   ================================================================ */
@media (max-width: 768px) {

    html[dir="rtl"] .hosting-hero,
    html[dir="rtl"] .banner-sec,
    html[dir="rtl"] .hero-content,
    html[dir="rtl"] .hero-illustration,
    html[dir="rtl"] .banner-content,
    html[dir="rtl"] .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* RTL-safe positioning */
    html[dir="rtl"] .hero-shape-1,
    html[dir="rtl"] .hero-shape-2,
    html[dir="rtl"] .hero-shape-3,
    html[dir="rtl"] [class*="shape-"] {
        inset-inline-start: auto !important;
        inset-inline-end: auto !important;
        display: none !important;
    }
}

/* ================================================================
   6) SAFE ANIMATION KEYFRAMES OVERRIDE
   ================================================================
   On mobile, if animations must run, only allow opacity changes
   ================================================================ */
@media (max-width: 768px) {
    @keyframes floatBg {

        0%,
        100% {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes float {

        0%,
        100% {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes bounce {

        0%,
        100% {
            opacity: 1;
            transform: none;
        }
    }
}

/* ================================================================
   7) DROPDOWN EXCEPTION - MUST REMAIN VISIBLE
   ================================================================
   The pricing dropdown needs special handling to remain functional
   ================================================================ */
@media (max-width: 768px) {
    .pricing-dropdown-wrapper {
        overflow: visible !important;
        transform: none !important;
    }

    .pricing-dropdown-menu {
        /* Fixed position is allowed for mobile bottom sheet */
        max-width: 100vw !important;
    }
}