/* =========================================
   MOBILE CRITICAL FIXES
   This file MUST be loaded LAST to ensure overrides
   Production-ready - DO NOT MODIFY without testing
   ========================================= */

/* =========================================
   A. HORIZONTAL OVERFLOW ELIMINATION
   Prevent ALL horizontal scrolling
   ========================================= */
@media screen and (max-width: 768px) {

    /* Nuclear option - lock viewport */
    html {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

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

    /* Disable AOS opacity/transform transitions that might hide content */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Remove transforms from cards to prevent clipping */
    .feature-card,
    .use-case-card,
    .pricing-bx,
    .blog-bx {
        transform: none !important;
        transition: none !important;
    }

    /* All containers locked to viewport */
    .container,
    .container-fluid,
    section,
    main,
    header,
    footer,
    .row {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* EXCEPTIONS for SLIDERS - They need to scroll/overflow internally */
    .swiper,
    .swiper-container,
    .swiper-wrapper {
        overflow: visible !important;
        max-width: none !important;
        width: 100% !important;
    }

    /* All images contained */
    img,
    svg,
    video,
    iframe,
    canvas {
        max-width: 100% !important;
        height: auto !important;
        /* Ensure no transforms push them out */
        transform: none !important;
    }

    /* Fix specific hero images that might be absolutely positioned */
    .hero-img,
    .banner-img img {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 auto !important;
    }
}

/* =========================================
   B. HERO SECTION - FIXED HEIGHT
   Dropdown must NOT affect hero height
   ========================================= */
@media screen and (max-width: 768px) {

    .hosting-hero,
    .banner-sec,
    [class*="hero"] {
        position: relative !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Hero content stays in place */
    .hero-content,
    .banner-content {
        position: relative !important;
        z-index: 1 !important;
    }

    /* Hero illustration HIDDEN on mobile as per request */
    .hero-illustration,
    .banner-content-img,
    .banner-img {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }
}

/* =========================================
   C. DROPDOWN - OVERLAY ONLY
   Must NOT affect document flow
   ========================================= */

/* Desktop dropdown - absolute overlay */
.has-dropdown .dropdown-menu,
.mega-menu-acme,
.dropdown-menu {
    position: absolute !important;
    z-index: 99999 !important;
}

/* Mobile dropdown - accordion in sidebar */
@media screen and (max-width: 991px) {

    /* Mobile menu is fixed position overlay */
    .header-nav {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 320px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #fff !important;
        z-index: 999999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transition: right 0.3s ease !important;
    }

    .header-nav.active {
        right: 0 !important;
    }

    /* RTL - slide from left */
    [dir="rtl"] .header-nav {
        right: auto !important;
        left: -100% !important;
        transition: left 0.3s ease !important;
    }

    [dir="rtl"] .header-nav.active {
        left: 0 !important;
        right: auto !important;
    }

    /* Mega menu inside sidebar - static, not absolute */
    .header-nav .mega-menu-acme,
    .header-nav .dropdown-menu {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        box-shadow: none !important;
        display: none;
    }

    .nav-item.active .mega-menu-acme,
    .nav-item.active .dropdown-menu {
        display: block !important;
    }
}

/* =========================================
   D. TESTIMONIALS - MUST BE VISIBLE
   Fix slider visibility on mobile
   ========================================= */
@media screen and (max-width: 768px) {

    /* Section must be visible */
    .testimonial-section,
    section.testimonial-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 400px !important;
        padding: 40px 15px !important;
        overflow: hidden !important;
    }

    /* Swiper container */
    .testimonial-section .swiper,
    .testimonial-slider {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 300px !important;
        overflow: visible !important;
        width: 100% !important;
    }

    /* Swiper wrapper - horizontal flex */
    .testimonial-section .swiper-wrapper,
    .testimonial-slider .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Individual slides */
    .testimonial-section .swiper-slide,
    .testimonial-slider .swiper-slide {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        min-width: 280px !important;
    }

    /* Review cards visible */
    .google-review-card {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 250px !important;
        padding: 20px !important;
        background: #fff !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
}

/* =========================================
   E. IMAGES - ALL VISIBLE
   No images should be hidden
   ========================================= */
@media screen and (max-width: 768px) {

    /* Show all images */
    .selling-point-bx-img img,
    .home-tab-2-content-img img,
    .home-tab-2-content-img svg,
    .why-choose-img img,
    .why-choose-img svg {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* Decorative shapes - hide only the overflow-causing ones */
    .hero-shape-1,
    .hero-shape-2,
    .hero-shape-3,
    .shape-img {
        display: none !important;
    }

    /* But keep main content images */
    .hero-img,
    .features-box img,
    .icon img {
        display: block !important;
        visibility: visible !important;
    }
}

/* =========================================
   F. HOSTING CARDS SLIDER
   ========================================= */
@media screen and (max-width: 768px) {
    .tailor-hosting-slider {
        display: block !important;
        visibility: visible !important;
        min-height: 350px !important;
        overflow: visible !important;
    }

    .tailor-hosting-slider .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .tailor-hosting-slider .swiper-slide {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        flex-shrink: 0 !important;
    }

    .home-2-feature-bx {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 280px !important;
    }
}

/* =========================================
   G. RTL (ARABIC) SUPPORT
   ========================================= */
@media screen and (max-width: 768px) {

    [dir="rtl"] .testimonial-section,
    [dir="rtl"] .testimonial-slider,
    [dir="rtl"] .tailor-hosting-slider {
        direction: rtl;
    }

    [dir="rtl"] .google-review-card,
    [dir="rtl"] .home-2-feature-bx {
        text-align: right;
    }

    [dir="rtl"] .hero-content {
        text-align: center !important;
    }
}

/* =========================================
   H. PREVENT BODY SCROLL WHEN MENU OPEN
   ========================================= */
body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* =========================================
   TABLET FIXES (768px - 1024px)
   ========================================= */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .has-dropdown .dropdown-menu {
        max-width: calc(100vw - 40px) !important;
    }

    .testimonial-section .swiper-slide {
        width: 50% !important;
    }
}

/* =========================================
   I. GLOBAL SPACING & PADDING NORMALIZATION
   Fix inconsistent spacing on mobile
   ========================================= */
@media screen and (max-width: 768px) {

    /* Normalize section padding */
    section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* Ensure no negative margin side-effects */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* Restore column padding for alignment */
    .col,
    [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Fix container padding */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* =========================================
   J. FINAL IMAGE POLISH
   Prevent cropping and distortion
   ========================================= */
@media screen and (max-width: 768px) {
    img {
        object-fit: contain !important;
        height: auto !important;
    }

    /* Exception for cover backgrounds if used as img */
    .bg-img {
        object-fit: cover !important;
    }
}

/* =========================================
   K. COMPONENT MICRO-FIXES
   Buttons, Pricing, Badges
   ========================================= */
@media screen and (max-width: 768px) {

    /* Hero Buttons - Center and stack */
    .hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .hero-buttons a,
    .hero-buttons button {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Pricing Cards - Fix overflow */
    .pricing-bx {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
        padding: 20px !important;
    }

    /* Badges/Floating Elements - Constrain */
    .badge,
    .floating-badge {
        max-width: 90% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
    }

    /* Ensure no text overflow */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    span {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        max-width: 100% !important;
    }
}

/* =========================================
   L. NAVIGATION PILLS MOBILE FIX
   Horizontal scroll for tabs
   ========================================= */
@media screen and (max-width: 768px) {
    .nav-pills {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        /* Override center alignment */
        padding-bottom: 10px !important;
        scrollbar-width: none !important;
        /* Firefox */
        -ms-overflow-style: none !important;
        /* IE */
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 30px !important;
        padding-left: 5px !important;
        /* Slight padding for start */
        padding-right: 5px !important;
    }

    /* Hide scrollbar for clean look */
    .nav-pills::-webkit-scrollbar {
        display: none !important;
    }

    .nav-pills .nav-item {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .nav-pills .nav-link {
        white-space: nowrap !important;
        font-size: 14px !important;
        padding: 8px 16px !important;
    }
}

/* =========================================
   M. FEATURE PILLS OVERLAP FIX
   Specifically for home-2-tab in screenshot
   ========================================= */
@media screen and (max-width: 768px) {
    .home-2-tab .nav-pills {
        display: flex !important;
        flex-direction: column !important;
        /* Stack them for "Perfect Design" */
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        gap: 15px !important;
        white-space: normal !important;
    }

    .home-2-tab .nav-item {
        width: 100% !important;
        margin: 0 !important;
    }

    .home-2-tab .nav-link {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        white-space: normal !important;
        /* Allow text wrapping in stacked mode */
        padding: 12px 20px !important;
        height: auto !important;
        border-radius: 50px !important;
    }
}

/* =========================================
   N. ADVANCED SPACING & PADDING AUDIT
   Normalize all sections to consistent mobile spacing
   ========================================= */
@media screen and (max-width: 768px) {

    /* 1. SECTIONS: Consistent vertical breathing room */
    section,
    .section-pad,
    .banner-sec {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* 2. CONTAINERS: Safe horizontal edges */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* 3. COLOURED BOXES: Internal padding fix & Vertical Spacing */
    .selling-point-bx,
    .home-2-feature-bx,
    .testimonial-bx,
    .wordpress-hosting-feature,
    .support-box-two,
    .hosting-plan-bx {
        padding: 40px 30px !important;
        /* Generous internal breathing room */
        margin-bottom: 30px !important;
        /* Ensure vertical separation */
        border-radius: 16px !important;
    }

    /* SPECIFIC FIX: Pricing Boxes need more breathing room */
    .pricing-bx {
        padding: 40px 30px !important;
        margin-bottom: 30px !important;
        border-radius: 16px !important;
    }

    /* 4. FOOTER: Spacing fix */
    .footer-top {
        padding: 40px 20px !important;
    }

    .footer-bottom {
        padding: 30px 0 !important;
    }

    /* 5. HERO: Specific adjustment */
    .banner-sec {
        padding-top: 120px !important;
        /* Account for fixed header */
        padding-bottom: 40px !important;
    }
}

/* =========================================
   O. ALIGNMENT & TEXT BALANCE
   Ensure readability on small screens
   ========================================= */
@media screen and (max-width: 768px) {

    /* Center Major Headings */
    .section-header,
    .banner-content {
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    .section-header p,
    .banner-content p {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Center Footer Text */
    .footer-content,
    .footer-bx {
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    /* Center Features with Images (Stack order fix done, now align) */
    .selling-point-bx-content {
        text-align: center !important;
        padding-top: 20px !important;
    }

    /* Ensure Icons are centered above text */
    .home-2-feature-bx .icon {
        margin: 0 auto 20px auto !important;
    }

    /* Flex alignment fixes */
    .banner-content ul li {
        justify-content: center !important;
    }
}

/* =========================================
   P. DOMAIN SEARCH RESULT STABILITY
   Ensure AJAX results don't break layout
   ========================================= */
.domain-alert {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 8px !important;
    padding: 15px 20px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    margin-top: 15px !important;
    border: 1px solid #e2e8f0 !important;
}

.domain-status {
    display: flex;
    align-items: center;
    font-size: 15px;
}

@media screen and (max-width: 480px) {
    .domain-alert {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 15px !important;
    }

    .domain-status {
        justify-content: center !important;
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .domain-alert .btn {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* RTL Support for Domain Alert */
[dir="rtl"] .domain-alert {
    text-align: right;
}

[dir="rtl"] .domain-status i {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
    /* Bootstrap me-2 equivalent flip */
}