/* Sheen Marketing — shared mobile resilience layer
   Loaded last so every public page follows one responsive contract. */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

img,
video,
iframe,
svg,
canvas {
    max-width: 100%;
}

table {
    max-width: 100%;
}

.table-responsive,
.topic-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

.eng-hero > .hero-breadcrumb {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 22px;
    left: 0;
    width: 100%;
    padding-inline: 1rem;
}

.eng-hero > .hero-breadcrumb .breadcrumb {
    margin: 0;
}

@media (max-width: 991.98px) {
    .navbar .container {
        flex-wrap: wrap;
    }

    .navbar-collapse {
        max-height: calc(100dvh - 118px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .navbar-nav .nav-link,
    .navbar-nav .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .navbar-nav .dropdown-menu {
        width: 100%;
        max-height: none;
        margin: 0 0 .5rem;
    }

    [data-gsap="fade-left"],
    [data-gsap="fade-right"] {
        transform: translateX(0) !important;
    }

    .row > [class*="col-"],
    .eng-hero .container,
    .eng-hero .row > [class*="col-"] {
        min-width: 0;
    }

    .eng-hero {
        min-height: auto !important;
        height: auto !important;
        padding-top: 112px !important;
        padding-bottom: 72px !important;
        background-position: center center !important;
    }

    .eng-hero h1 {
        font-size: clamp(1.85rem, 8vw, 2.65rem) !important;
        overflow-wrap: anywhere;
    }

    .eng-hero .subline {
        max-width: 100%;
        font-size: .96rem !important;
    }

    .eng-eyebrow,
    .prc-eyebrow,
    .hero-badge,
    .eyebrow {
        max-width: 100%;
        white-space: normal;
        letter-spacing: .08em !important;
        line-height: 1.45;
    }

    .eng-hero .btn,
    .prc-hero .btn {
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        white-space: normal;
        text-align: center;
    }

    .eng-hero [style*="display:flex"],
    .prc-hero [style*="display:flex"] {
        max-width: 100%;
    }

    .eng-form-card {
        padding: 1.5rem !important;
        border-radius: 18px !important;
    }

    .section-padding,
    .eng-problems,
    .eng-package,
    .eng-why,
    .eng-sectors,
    .faq-section,
    .eng-form-section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    .site-footer {
        padding-top: 3.5rem;
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }
}

@media (max-width: 575.98px) {
    .container,
    .container-fluid {
        --bs-gutter-x: 1.5rem;
    }

    .navbar {
        padding-block: .55rem !important;
    }

    .navbar-brand {
        min-width: 0;
        max-width: calc(100% - 58px);
    }

    .navbar-brand img {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px;
    }

    .navbar-brand-text .brand-en {
        font-size: .9rem !important;
    }

    .navbar-brand-text .brand-ar {
        font-size: .66rem !important;
    }

    .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
    }

    #sheen-announce-bar {
        min-height: 44px !important;
        padding: 6px 38px 6px 10px !important;
        gap: 6px !important;
        font-size: .72rem !important;
        line-height: 1.3 !important;
    }

    html[dir="rtl"] #sheen-announce-bar {
        padding-right: 10px !important;
        padding-left: 38px !important;
    }

    #sheen-bar-text {
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
    }

    #sheen-bar-text .sheen-bar-message {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #sheen-bar-text .sheen-countdown {
        display: none !important;
    }

    #sheen-bar-close {
        right: 8px !important;
        min-width: 32px;
        min-height: 32px;
    }

    html[dir="rtl"] #sheen-bar-close {
        right: auto !important;
        left: 8px !important;
    }

    .eng-hero {
        padding-top: 104px !important;
        padding-bottom: 72px !important;
    }

    .eng-hero br {
        display: none;
    }

    .eng-hero > .hero-breadcrumb {
        bottom: 10px;
        font-size: .74rem;
    }

    .eng-hero .breadcrumb {
        justify-content: flex-start !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .eng-hero .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .eng-hero [style*="gap:2rem"] {
        gap: 1rem !important;
    }

    .problem-card,
    .package-pillar,
    .sector-card {
        padding: 1.35rem !important;
    }

    .timeline-step {
        gap: 14px !important;
    }

    .timeline-num {
        width: 40px !important;
        height: 40px !important;
    }

    .accordion-button {
        padding: 1rem !important;
        font-size: .92rem;
    }

    #sheen-sticky-cta {
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        left: 8px !important;
        padding: 8px !important;
        gap: 8px !important;
        border: 1px solid rgba(220,62,8,.28) !important;
        border-top-width: 2px !important;
        border-radius: 14px !important;
    }

    #sheen-sticky-cta .sticky-text {
        display: none !important;
    }

    #sheen-sticky-cta a.sticky-btn {
        flex: 1 1 auto !important;
        min-height: 44px;
        padding: 10px 14px !important;
        text-align: center;
    }

    #sheen-sticky-close {
        width: 36px;
        height: 44px;
    }

    .wa-float {
        right: 14px !important;
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        left: auto !important;
        width: 52px !important;
        height: 52px !important;
    }

    html[dir="rtl"] .wa-float {
        right: auto !important;
        left: 14px !important;
    }

    .wa-float .wa-tooltip,
    #sheen-social-proof {
        display: none !important;
    }

    #sheen-mid-popup,
    #sheen-exit-overlay {
        padding: 12px !important;
    }

    #sheen-mid-popup-card,
    #sheen-exit-card {
        width: 100% !important;
        max-height: calc(100dvh - 24px);
        overflow-y: auto !important;
        border-radius: 18px !important;
    }

    #sheen-popup-header,
    #sheen-popup-body,
    #sheen-exit-card {
        padding: 1.35rem !important;
    }

    #sheen-exit-card .exit-emoji {
        font-size: 2rem !important;
        margin-bottom: .5rem !important;
    }

    #sheen-exit-card h3 {
        font-size: 1.25rem !important;
    }

    #sheen-exit-cta {
        width: 100%;
        padding: 12px 18px !important;
    }

    .sheen-section-cta-strip {
        padding: 1rem !important;
        align-items: flex-start !important;
    }

    .sheen-section-cta-strip .scs-text {
        flex-basis: calc(100% - 48px);
        min-width: 0;
    }

    .sheen-section-cta-strip .scs-btn {
        width: 100%;
        text-align: center;
        white-space: normal !important;
    }
}

@media (max-width: 359.98px) {
    .navbar-brand-text .brand-ar {
        display: none;
    }

    #sheen-bar-text .sheen-bar-message {
        max-width: 145px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}