/*
 * v3-mobile.css — رفع مشکلات ریسپانسیو صفحه نخست و فوتر
 * فاز ۲.۱ | 2026-07-11
 * تمام override‌ها با !important روی استایل‌های inline اعمال می‌شوند.
 */

/* ==========================================================
   1) صفحه نخست (layout-academy) — ریسپانسیو کامل
   ========================================================== */

/* شکستن همه‌ی گریدهای دو/چند ستونه به تک‌ستون در موبایل */
@media (max-width: 900px) {
    .pg-home section > div[style*="grid-template-columns"],
    .pg-home section > div > div[style*="grid-template-columns"],
    .pg-home > section > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* کانتینر بیرونی — پدینگ افقی کوچک‌تر و کنترل overflow */
    .pg-home,
    .pg-home section,
    .pg-home section > div[style*="max-width:1200px"],
    .pg-home section > div[style*="max-width: 1200px"] {
        max-width: 100% !important;
        overflow-x: hidden;
    }
    .pg-home section > div[style*="padding:66px 32px"],
    .pg-home section > div[style*="padding:82px 32px"],
    .pg-home section > div[style*="padding:38px 32px"],
    .pg-home section > div[style*="padding:9px 32px"],
    .pg-home > section > div {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .pg-home section {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }
}

@media (max-width: 768px) {
    /* هیرو H1 — فونت کوچک‌تر و شکست بهتر */
    .pg-home h1 {
        font-size: clamp(26px, 8vw, 34px) !important;
        line-height: 1.35 !important;
        letter-spacing: -0.5px !important;
    }
    .pg-home p[style*="font-size:16.5px"],
    .pg-home p[style*="font-size: 16.5px"] {
        font-size: 14.5px !important;
        line-height: 1.9 !important;
    }

    /* دکمه‌های CTA — full width و مرتب */
    .pg-home div[style*="flex-wrap:wrap"] > button {
        width: 100% !important;
        justify-content: center !important;
        padding: 13px 20px !important;
        font-size: 15px !important;
    }

    /* باکس جستجوی هیرو — به‌شکل عمودی نشکند، کامل داخل کارت */
    .pg-home div[style*="border-radius:16px"][style*="padding:8px"] {
        max-width: 100% !important;
        flex-wrap: wrap !important;
        padding: 8px !important;
    }
    .pg-home div[style*="border-radius:16px"][style*="padding:8px"] > div:first-child {
        border-left: none !important;
        border-bottom: 1px solid var(--border) !important;
        width: 100% !important;
        padding: 8px 6px !important;
    }
    .pg-home div[style*="border-radius:16px"][style*="padding:8px"] > input {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        width: auto !important;
    }

    /* لوگو تیم‌های مورد اعتماد — بهتر بسته شود */
    .pg-home div[style*="opacity:.55"] {
        gap: 14px !important;
        flex-wrap: wrap !important;
    }

    /* کارت‌های هیرو (تصویر سمت راست) — گرید تک‌ستون */
    .pg-home div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* هر گرید سایر بخش‌ها — ۱ ستون یا حداکثر ۲ */
    .pg-home div[style*="grid-template-columns:repeat(4"],
    .pg-home div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .pg-home div[style*="grid-template-columns:repeat(6"],
    .pg-home div[style*="grid-template-columns: repeat(6"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    .pg-home div[style*="grid-template-columns:repeat(3"],
    .pg-home div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }

    /* اطمینان از عدم بیرون‌زدگی هر بلوک */
    .pg-home * {
        max-width: 100%;
    }
    .pg-home img,
    .pg-home video {
        height: auto !important;
    }

    /* بنر announcement بالای صفحه */
    .pg-ann > div {
        padding: 9px 14px !important;
        gap: 8px !important;
    }
    .pg-ann span,
    .pg-ann a {
        font-size: 12px !important;
    }
    .pg-ann button[onclick] {
        left: 6px !important;
    }
}

/* ==========================================================
   2) فوتر — کارت خبرنامه فیکس داخل، بدون بیرون‌زدگی
   ========================================================== */

/* ردیف اول فوتر (کارت اعتماد + خبرنامه): دو ستونه در دسکتاپ/تبلت، تک‌ستون در موبایل */
@media (max-width: 1024px) { .pg-foot .pg-foot-toprow { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 680px)  { .pg-foot .pg-foot-toprow { grid-template-columns: 1fr !important; } }
@media (max-width: 430px)  { .pg-foot .pg-foot-trust { grid-template-columns: 1fr !important; } }

@media (max-width: 900px) {
    /* گرید ستون‌های فوتر — تک/دو ستون */
    .pg-foot .pg-foot-cols {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px !important;
    }
    .pg-foot .pg-foot-cols > div:first-child {
        grid-column: 1 / -1;
    }

    /* کارت ویژگی‌های اعتمادساز (۲×۲) */
    .pg-foot .pg-foot-trust {
        gap: 14px 16px !important;
        padding: 18px !important;
    }
}

@media (max-width: 640px) {
    /* ۲ ستون کنار هم مطابق طرح مرجع (نه خطی زیر هم) */
    .pg-foot .pg-foot-cols {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px 20px !important;
        padding: 28px 0 24px !important;
    }
    /* برند تمام‌عرض بالا */
    .pg-foot .pg-foot-cols > div:first-child {
        grid-column: 1 / -1;
    }
    /* مجوزها تمام‌عرض پایین */
    .pg-foot .pg-foot-cols > .pg-foot-badges {
        grid-column: 1 / -1;
    }
    /* عنوان‌های ستون‌ها یک‌سایز و منظم */
    .pg-foot .pg-foot-cols h5 {
        margin: 0 0 12px !important;
        font-size: 14px !important;
    }
    /* لینک‌ها فشرده‌تر */
    .pg-foot .pg-foot-cols > div > div[style*="flex-direction:column"] {
        gap: 9px !important;
    }
    /* بج‌های استور در ستون پشتیبانی → یک ردیف افقی، تمام‌عرض */
    .pg-foot .pg-foot-cols > div:nth-child(4) > div[style*="flex-direction:column"][style*="margin-top:18px"] {
        grid-column: 1 / -1;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-top: 14px !important;
    }
    /* مجوزها — دو نماد کنار هم */
    .pg-foot-badges > div,
    .pg-foot-badges [class*="widget"] > div {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .pg-foot-badges img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* پدینگ افقی کلی فوتر */
    .pg-foot > div {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* کارت خبرنامه — فیکس داخل، فرم عمودی */
    .pg-foot div[style*="linear-gradient(120deg"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        padding: 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .pg-foot div[style*="linear-gradient(120deg"] > div {
        max-width: 100% !important;
    }
    .pg-foot div[style*="linear-gradient(120deg"] form {
        flex-direction: column !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        gap: 10px !important;
    }
    .pg-foot div[style*="linear-gradient(120deg"] form input[type="email"] {
        width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }
    .pg-foot div[style*="linear-gradient(120deg"] form button {
        width: 100% !important;
        padding: 0 20px !important;
    }

    /* عنوان خبرنامه کوچک‌تر */
    .pg-foot div[style*="linear-gradient(120deg"] h3 {
        font-size: 17px !important;
    }
}

/* ==========================================================
   3) badge‌های فروشگاه (Google Play / Cafe Bazaar)
   حذف فضای سفید اضافی؛ نمایش کامل تصویر
   ========================================================== */

.pg-store-badge {
    padding: 3px !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.pg-store-badge img {
    height: 46px !important;
    max-height: 52px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 10px !important;
}

/* در موبایل: دو badge کنار هم به‌جای زیر هم (فضای بهینه‌تر) */
@media (max-width: 640px) {
    .pg-foot .pg-foot-cols > div div[style*="flex-direction:column"][style*="gap:9px"] {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .pg-foot .pg-store-badge {
        flex: 1 1 140px !important;
        min-width: 130px !important;
    }
}

/* ==========================================================
   4) کپی‌رایت — مرتب در موبایل
   ========================================================== */
@media (max-width: 640px) {
    .pg-foot div[style*="border-top:1px solid var(--border)"] {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
        padding: 18px 0 90px !important; /* فضای bottom-nav */
    }
}

/* ==========================================================
   5) اصلاحات hotfix — alpha.4
   ========================================================== */

/* 5.1) بخش اپلیکیشن — دکمه‌های استور نباید در موبایل بزرگ شوند
   (قانون کلی .pg-home img{height:auto} در بخش ۱ آنها را غول‌آسا می‌کرد) */
@media (max-width: 900px) {
    .pg-app .pg-app__store-btn img,
    .pg-home .pg-app__store-btn img {
        height: 30px !important;
        max-height: 34px !important;
        width: auto !important;
    }
    .pg-app .pg-app__store-btn {
        padding: 8px 14px !important;
        min-height: 48px !important;
    }
    .pg-app__stores {
        justify-content: flex-start !important;
        gap: 10px !important;
    }
    .pg-app__stores .pg-app__store-btn {
        flex: 1 1 auto !important;
        min-width: 140px !important;
    }
}

/* 5.2) کارت CTA پایانی «۷ روز دسترسی رایگان» — ریسپانسیو کامل */
@media (max-width: 768px) {
    /* section شامل کارت */
    .pg-home section[style*="padding:0 32px 82px"] {
        padding: 0 16px 60px !important;
    }
    /* خود کارت گرادیانی */
    .pg-home section[style*="padding:0 32px 82px"] > div[style*="linear-gradient(120deg"] {
        padding: 28px 20px !important;
        border-radius: 22px !important;
    }
    /* گرید دو ستونه اصلی درون کارت → تک ستون */
    .pg-home section[style*="padding:0 32px 82px"] div[style*="grid-template-columns:1.15fr"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    /* عنوان کوچک‌تر */
    .pg-home section[style*="padding:0 32px 82px"] h2 {
        font-size: 22px !important;
        line-height: 1.5 !important;
        letter-spacing: -0.4px !important;
    }
    .pg-home section[style*="padding:0 32px 82px"] p {
        font-size: 14px !important;
        line-height: 1.9 !important;
    }
    /* دکمه‌های CTA داخل کارت — full width */
    .pg-home section[style*="padding:0 32px 82px"] button {
        width: 100% !important;
        padding: 13px 20px !important;
        font-size: 14.5px !important;
    }
    /* تیک‌های زیر دکمه‌ها ریزتر */
    .pg-home section[style*="padding:0 32px 82px"] span[style*="inline-flex"] {
        font-size: 12px !important;
    }
    /* کارت آمار سمت راست — padding کمتر و ۲ ستون بمانند */
    .pg-home section[style*="padding:0 32px 82px"] > div[style*="linear-gradient(120deg"] > div[style*="rgba(255,255,255,.1)"][style*="backdrop-filter"] {
        padding: 18px !important;
        border-radius: 16px !important;
    }
    .pg-home section[style*="padding:0 32px 82px"] div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    /* اعداد آمار کوچک‌تر */
    .pg-home section[style*="padding:0 32px 82px"] div[style*="font-size:22px"] {
        font-size: 19px !important;
    }
    /* دایره‌های تزیینی بزرگ کوچک‌تر تا از کارت بیرون نزنند */
    .pg-home section[style*="padding:0 32px 82px"] div[style*="width:150px"] {
        width: 90px !important;
        height: 90px !important;
        top: -30px !important;
    }
    .pg-home section[style*="padding:0 32px 82px"] div[style*="width:110px"] {
        width: 70px !important;
        height: 70px !important;
        bottom: -25px !important;
    }
}

/* ==========================================================
   ۶) فاز ۲.۴ — hotfix های بازخورد کاربر
   ========================================================== */

/* 6.1) حذف فضای خالی زیر هیرو در موبایل — کاهش padding عمودی */
@media (max-width: 768px) {
    .pg-home > section:first-of-type > div[style*="padding:66px 32px"] {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
        gap: 24px !important;
    }
    /* هیرو ویژوال بدون min-height اضافه */
    .pg-home > section:first-of-type > div > div[style*="position:relative"] {
        min-height: 0 !important;
    }
}

/* 6.2) بنر ۷ روز دسترسی رایگان — چیدمان تمیز موبایل */
@media (max-width: 640px) {
    .pg-ann > div {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 12px 44px 12px 44px !important;
        text-align: center !important;
        justify-content: center !important;
    }
    .pg-ann > div > span {
        font-size: 12.5px !important;
        line-height: 1.7 !important;
        display: block !important;
        width: 100% !important;
    }
    .pg-ann > div > a {
        padding: 7px 22px !important;
        font-size: 12.5px !important;
        margin: 0 auto !important;
    }
    .pg-ann > div > button[onclick] {
        left: 8px !important;
        top: 10px !important;
        transform: none !important;
        width: 24px !important;
        height: 24px !important;
    }
}

/* 6.3) بخش اپلیکیشن — رفع بیرون‌زدگی chipها و phone در موبایل */
@media (max-width: 768px) {
    .pg-app {
        overflow-x: hidden !important;
    }
    .pg-app__wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 40px !important;
    }
    .pg-app__visual {
        min-height: 0 !important;
        width: 100% !important;
        overflow: visible !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .pg-app__halo {
        width: 260px !important;
        height: 260px !important;
    }
    .pg-app__phone {
        width: 240px !important;
        height: 520px !important;
        margin: 0 auto !important;
    }
    /* chipهای شناور — داخل ناحیه امن، بدون بیرون‌زدگی */
    .pg-app__chip {
        padding: 8px 11px !important;
        max-width: 160px !important;
        gap: 7px !important;
    }
    .pg-app__chip-title {
        font-size: 11.5px !important;
        line-height: 1.3 !important;
    }
    .pg-app__chip-sub {
        font-size: 9.5px !important;
    }
    .pg-app__chip-icon {
        width: 28px !important;
        height: 28px !important;
    }
    .pg-app__chip--installs {
        top: 4% !important;
        right: 4% !important;
        left: auto !important;
    }
    .pg-app__chip--medal {
        bottom: 6% !important;
        left: 4% !important;
        right: auto !important;
    }
    /* گلوها/بلورهای بزرگ اپ که فضا میگیرن */
    .pg-app__glow1, .pg-app__glow2 {
        display: none !important;
    }
}

/* 6.4) نمادها و مجوزها فوتر — کمی بزرگ‌تر و خواناتر در موبایل */
@media (max-width: 640px) {
    .pg-foot-badges .bm-badges,
    .pg-foot-badges > div:not(h5):not(p) {
        gap: 10px !important;
    }
    .pg-foot-badges img {
        width: 72px !important;
        height: 72px !important;
        max-width: 72px !important;
        object-fit: contain !important;
        padding: 6px !important;
        background: #fff !important;
        border-radius: 12px !important;
    }
    .pg-foot-badges a,
    .pg-foot-badges .bm-badge {
        min-width: 80px !important;
    }
    .pg-foot-badges h5 {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
}