/* Mobile Overflow Fix - Prevents white spaces on mobile */

/* Prevent horizontal overflow on root elements */
html {
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
    position: relative;
}

/* Ensure main containers don't overflow */
.page {
    overflow-x: hidden !important;
}

.main-content {
    overflow-x: hidden !important;
}

/* Fix container widths */
.container,
.container-fluid {
    max-width: 100% !important;
}

/* Fix sections */
section {
    overflow-x: hidden !important;
}

/* Fix navbar to prevent overflow */
.navbar {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
}

.navbar-container {
    max-width: 100% !important;
}

/* Ensure navbar dropdown is visible and properly styled */
.navbar-nav.show {
    display: flex !important;
    z-index: 1001 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Mobile specific fixes */
@media (max-width: 991.98px) {

    /* Ensure navbar container doesn't overflow */
    .navbar-container {
        padding-left: 15px;
        padding-right: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Position navbar toggler on the right (before logo in RTL) */
    .navbar-toggler {
        order: 1;
        margin-left: 0;
        margin-right: auto;
    }

    /* Logo in the center */
    .navbar-brand {
        order: 2;
        margin: 0 auto;
    }

    /* Auth buttons on the left */
    .navbar-auth,
    .simple-dropdown {
        order: 3;
        margin-right: 0;
        margin-left: auto;
    }

    /* Mobile menu styles moved to mobile-menu.css */

    /* Fix user dropdown on mobile */
    .simple-dropdown {
        position: static !important;
    }

    #userDropdownContent {
        position: fixed !important;
        top: 70px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        min-width: auto !important;
        max-width: calc(100vw - 20px) !important;
        z-index: 1050 !important;
        margin-top: 0 !important;
    }

    /* Ensure navbar auth buttons are visible on mobile */
    .navbar-auth {
        display: flex !important;
        gap: 0.5rem;
    }

    .navbar-auth .btn {
        font-size: 0.85rem !important;
        padding: 0.4rem 0.8rem !important;
    }
}

@media (max-width: 767.98px) {

    /* Fix main content padding on mobile */
    .main-content {
        padding-top: 84px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        padding-bottom: 0px !important;
    }

    /* Fix rows to prevent overflow - remove negative margins on mobile */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Fix columns - adjust padding to compensate for removed row margins */
    [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Fix hero section */
    .hero {
        padding: 4rem 0 3rem !important;
        margin-top: 0 !important;
    }

    .hero h1 {
        font-size: 1.75rem !important;
        margin-bottom: 1rem !important;
    }

    .hero p {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Hide or constrain hero shapes on mobile */
    .hero-shape {
        display: none !important;
    }

    /* Fix feature sections - reduce padding */
    .features-section,
    .about-section {
        padding: 3rem 0 !important;
    }

    .section-title {
        margin-bottom: 2rem !important;
    }

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

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

    /* Fix feature cards */
    .feature-card {
        padding: 2rem 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .feature-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 24px !important;
    }

    .feature-title {
        font-size: 1.25rem !important;
    }

    /* Fix about section */
    .about-content h2 {
        font-size: 1.75rem !important;
    }

    .about-content p {
        font-size: 1rem !important;
    }

    /* Fix pricing and contact sections */
    .pricing-section,
    .contact-section,
    .contact-pricing-section,
    .cta-section {
        padding: 3rem 0 !important;
    }

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

    /* Fix navbar */
    .navbar,
    .navbar-container {
        overflow-x: hidden !important;
    }

    /* Fix footer */
    .footer {
        overflow-x: hidden !important;
        padding: 2rem 0 1rem !important;
    }

    .footer .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .footer [class*="col-"] {
        margin-bottom: 2rem !important;
    }
}

/* Extra small devices */
@media (max-width: 575.98px) {
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Further reduce padding on very small screens */
    .hero {
        padding: 3rem 0 2rem !important;
        transform: translateY(-22px);
    }

    .features-section,
    .about-section,
    .pricing-section,
    .contact-section,
    .contact-pricing-section,
    .cta-section {
        padding: 2rem 0 !important;
    }

    .hero h1 {
        font-size: 1.5rem !important;
    }

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