/*
 * ADATASK_HOMEPAGE_MOBILE_RESPONSIVE_V3373
 * Scope:
 * - / homepage-v110
 * - installed PWA landing start_url /?home=1&pwa=2
 * No auth/backend/application runtime changes.
 */

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

body.adatask-landing-page {
    overflow-x:hidden;
}

.adatask-landing {
    width:100%;
    max-width:100%;
    overflow-x:clip;
}

.adatask-landing *,
.adatask-landing *::before,
.adatask-landing *::after {
    box-sizing:border-box;
}

.adatask-landing img,
.adatask-landing svg {
    max-width:100%;
}

/* =========================================================
   HEADER / TABLET
   ========================================================= */

@media (max-width:1100px) {

    .adatask-landing > header {
        position:relative !important;
        top:auto !important;
    }

    .adatask-landing > header > div {
        width:100% !important;
        max-width:none !important;
        min-height:0 !important;
        padding:10px 16px !important;

        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        align-items:center !important;

        gap:10px !important;
    }

    .adatask-landing > header .ada-brand-header-link {
        max-width:100% !important;
        min-width:0 !important;
        justify-self:start;
    }

    .adatask-landing > header nav {
        order:2;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        display:flex !important;
        align-items:center !important;

        gap:16px !important;
        padding:4px 0 7px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        white-space:nowrap !important;

        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .adatask-landing > header nav::-webkit-scrollbar {
        display:none;
    }

    /*
     * Spacer قدیمی میان nav و actions
     */
    .adatask-landing > header > div > div[style*="flex:1"] {
        display:none !important;
    }

    /*
     * Wrapper واقعی تلفن + چهار دکمه تجاری.
     * این wrapper در نسخه قبل Responsive نبود و عامل اصلی overflow بود.
     */
    .ada-header-mobile-actions-v3373 {
        order:3;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        display:grid !important;
        grid-template-columns:auto minmax(0,1fr) !important;

        align-items:stretch !important;

        gap:8px !important;
    }

    .ada-header-mobile-actions-v3373 > a[href^="tel:"] {
        min-width:0 !important;
        min-height:44px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        padding:8px 12px !important;
    }

    .ada-header-commerce-v3364b {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin:0 !important;

        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;

        gap:7px !important;
    }

    .ada-header-commerce-v3364b__button,
    .ada-header-commerce-v3364b__login,
    .ada-header-commerce-v3364b__register,
    .ada-header-commerce-v3364b__webinar,
    .ada-header-commerce-v3364b__superapp {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }
}

/* =========================================================
   PAGE TABLET / MOBILE
   ========================================================= */

@media (max-width:900px) {

    .adatask-landing > section {
        width:100% !important;
        max-width:100% !important;

        padding-left:18px !important;
        padding-right:18px !important;
    }

    /* HERO */
    #top {
        grid-template-columns:minmax(0,1fr) !important;

        gap:30px !important;

        padding-top:34px !important;
        padding-bottom:24px !important;

        overflow:clip;
    }

    #top > * {
        min-width:0 !important;
        max-width:100% !important;
    }

    #top h1 {
        font-size:clamp(32px,8vw,46px) !important;
        line-height:1.28 !important;
        letter-spacing:-1px !important;
    }

    #top p {
        max-width:100% !important;
    }

    /* STATS */
    #ada-stats > div {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    /* HIGHLIGHTS */
    #highlights > div[style*="grid-template-columns"] {
        grid-template-columns:minmax(0,1fr) !important;
    }

    /* MODULES */
    #modules > div[style*="grid-template-columns"] {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    /* INDUSTRIES */
    #industries [style*="grid-template-columns"] {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    /* SECURITY */
    #security [style*="grid-template-columns"] {
        grid-template-columns:minmax(0,1fr) !important;
    }

    /* CUSTOMER VOICES */
    #voices [style*="grid-template-columns"] {
        grid-template-columns:minmax(0,1fr) !important;
    }

    /* PRICING CARDS */
    #pricing > div[style*="grid-template-columns:repeat(4"] {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    /*
     * مقایسه پلن‌ها جدول واقعی پنج ستونه است.
     * در موبایل به جای له‌کردن محتوا، scroll افقی کنترل‌شده دارد.
     */
    #compare {
        max-width:100% !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        -webkit-overflow-scrolling:touch;
    }

    #ada-compare-grid {
        min-width:720px !important;
    }

    /* WEBINAR */
    #webinar > div,
    #webinar [style*="grid-template-columns"] {
        grid-template-columns:minmax(0,1fr) !important;
    }

    /* FINAL REGISTER CTA */
    #register > div {
        padding:36px 28px !important;
    }

    /* FOOTER */
    footer > div:first-child {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:26px !important;

        padding-left:20px !important;
        padding-right:20px !important;
    }

    footer > div {
        max-width:100% !important;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:680px) {

    .adatask-landing > header > div {
        padding:9px 12px !important;
    }

    .adatask-landing > header nav {
        gap:14px !important;
        font-size:11.5px !important;
    }

    /*
     * شماره تماس یک ردیف مستقل،
     * چهار CTA در Grid دو ستونه.
     */
    .ada-header-mobile-actions-v3373 {
        grid-template-columns:minmax(0,1fr) !important;
    }

    .ada-header-mobile-actions-v3373 > a[href^="tel:"] {
        width:100% !important;
    }

    .ada-header-commerce-v3364b {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:7px !important;
    }

    .ada-header-commerce-v3364b__button {
        min-height:42px !important;

        padding:7px 8px !important;

        font-size:10.7px !important;

        gap:5px !important;
    }

    .ada-header-commerce-v3364b__icon {
        width:23px !important;
        height:23px !important;
        min-width:23px !important;
        flex-basis:23px !important;
    }

    .ada-header-commerce-v3364b__icon svg {
        width:14px !important;
        height:14px !important;
    }

    .ada-header-commerce-v3364b__label {
        min-width:0 !important;
        max-width:100% !important;

        overflow:hidden !important;
        text-overflow:ellipsis;
    }

    .adatask-landing > section {
        padding-left:14px !important;
        padding-right:14px !important;
    }

    #top {
        padding-top:28px !important;
        gap:24px !important;
    }

    #top h1 {
        margin-top:16px !important;

        font-size:clamp(29px,9.2vw,38px) !important;
        line-height:1.32 !important;
    }

    #top p {
        margin-top:15px !important;

        font-size:14.5px !important;
        line-height:1.95 !important;
    }

    #top > div[style*="left:-120px"],
    #top > div[style*="right:-140px"] {
        display:none !important;
    }

    /*
     * دو badge شناور Hero روی گوشی‌های باریک
     * نباید از viewport خارج شوند.
     */
    #top [style*="left:-34px"] {
        left:8px !important;
    }

    #top [style*="bottom:-24px"] {
        right:8px !important;
        bottom:-14px !important;
    }

    #highlights,
    #modules,
    #industries,
    #security,
    #voices,
    #pricing,
    #webinar,
    #register {
        padding-top:42px !important;
    }

    #pricing > div[style*="grid-template-columns:repeat(4"] {
        grid-template-columns:minmax(0,1fr) !important;
    }

    #webinar > div {
        padding:24px 18px !important;
    }

    #register > div {
        padding:30px 18px !important;
        border-radius:22px !important;
    }

    footer {
        margin-top:40px !important;
    }

    footer > div:first-child {
        grid-template-columns:minmax(0,1fr) !important;

        padding:38px 18px 22px !important;

        gap:26px !important;
    }

    footer > div {
        padding-left:18px !important;
        padding-right:18px !important;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:420px) {

    .adatask-landing > header nav {
        gap:12px !important;
        font-size:11px !important;
    }

    .ada-header-commerce-v3364b__button {
        padding-inline:6px !important;
        font-size:10.2px !important;
    }

    .ada-header-commerce-v3364b__icon {
        width:21px !important;
        height:21px !important;
        min-width:21px !important;
        flex-basis:21px !important;
    }

    #top h1 {
        font-size:29px !important;
    }

    #ada-stats > div {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    #modules > div[style*="grid-template-columns"],
    #industries [style*="grid-template-columns"] {
        grid-template-columns:minmax(0,1fr) !important;
    }

    #ada-compare-grid {
        min-width:680px !important;
    }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:340px) {

    .ada-header-commerce-v3364b {
        grid-template-columns:minmax(0,1fr) !important;
    }

    .ada-header-commerce-v3364b__button {
        font-size:10.5px !important;
    }

    #top h1 {
        font-size:27px !important;
    }
}