/* ============================================================
   mobile-fixes.css — اصلاحات جامع موبایل و تبلت
   این فایل آخر از همه بارگذاری می‌شود تا مشکلات ظاهری موبایل
   را به‌صورت سراسری اصلاح کند.
   ============================================================ */

/* ۱) جلوگیری از سرریز افقی و زوم ناخواسته در کل سایت */
html {
    -webkit-text-size-adjust: 100%;  /* جلوگیری از بزرگ‌نمایی خودکار متن در iOS */
    text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html, body {
    max-width: 100%;
    overflow-x: hidden;  /* حذف اسکرول افقی ناخواسته */
}

/* ۲) همه‌ی تصاویر و ویدیوها نسبی شوند */
img, video, iframe, svg, canvas {
    max-width: 100%;
    height: auto;
}

/* ۳) جدول‌های عریض اسکرول‌پذیر شوند، نه سرریز */
table {
    max-width: 100%;
}

/* ============================================================
   تبلت (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .container { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   موبایل بزرگ و تبلت کوچک (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* عرض‌های ثابت را نسبی کن */
    .hero-floating-card,
    .info-card,
    .booking-form,
    .booking-form-page,
    .detail-box,
    .service-card,
    .doctor-card { max-width: 100% !important; width: 100% !important; }

    /* فرم‌ها: فیلدها تمام‌عرض و قابل لمس */
    input, select, textarea, .btn {
        font-size: 16px !important;  /* جلوگیری از زوم خودکار iOS هنگام focus */
    }
    .form-row { grid-template-columns: 1fr !important; gap: 12px !important; }

    /* دکمه‌های کنار هم → ستونی */
    .hero-actions, .doctor-actions, .header-actions { flex-wrap: wrap; }

    /* فاصله‌گذاری منطقی */
    section { padding-top: 40px; padding-bottom: 40px; }
}

/* ============================================================
   موبایل (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {
    /* تیترها کوچک‌تر و خوانا */
    h1 { font-size: 26px !important; line-height: 1.35 !important; }
    h2 { font-size: 22px !important; line-height: 1.4 !important; }
    h3 { font-size: 18px !important; }
    p, li, a, span, label { line-height: 1.7; }

    /* container تنگ‌تر */
    .container { padding-left: 16px; padding-right: 16px; }

    /* دکمه‌ها تمام‌عرض و قابل لمس (حداقل 44px ارتفاع) */
    .btn, .btn-lg {
        min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    }
    .hero-actions .btn, .booking-form .btn, .cta .btn { width: 100%; }

    /* گریدها تک‌ستونی */
    .services-grid, .gallery-grid, .doctors-grid, .testimonials-grid,
    .blog-grid, .values-grid, .stats-grid, .footer-grid, .doctor-details {
        grid-template-columns: 1fr !important; gap: 16px !important;
    }

    /* کارت‌ها padding متعادل */
    .service-card, .doctor-card, .testimonial-card, .detail-box,
    .booking-form, .booking-form-page, .info-card, .post-card {
        padding: 20px 16px !important;
    }

    /* فاصله‌ی فیلدهای فرم */
    input, select, textarea {
        padding: 12px 14px !important; margin-bottom: 4px;
    }

    /* جلوگیری از چسبیدن متن‌ها */
    .hero-stats { gap: 16px 20px !important; }
    .trust-bar-inner { gap: 12px 18px !important; }

    /* فوتر مرتب */
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

    /* whatsapp شناور کوچک‌تر و بدون تداخل */
    .whatsapp-float { width: 50px !important; height: 50px !important; bottom: 14px !important; left: 14px !important; }

    /* جدول‌ها اسکرول افقی نرم */
    .table-wrap, .responsive-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   موبایل خیلی کوچک (≤ 380px)
   ============================================================ */
@media (max-width: 380px) {
    h1 { font-size: 23px !important; }
    h2 { font-size: 20px !important; }
    .container { padding-left: 12px; padding-right: 12px; }
    .logo-text { font-size: 16px; }
}

/* ============================================================
   Sprint F — اصلاح دقیق header موبایل (جلوگیری از overlap)
   ============================================================ */
@media (max-width: 820px) {
    .header-inner {
        display: flex !important; align-items: center !important;
        justify-content: space-between !important; gap: 8px !important;
        flex-wrap: nowrap !important; padding: 10px 14px !important;
    }
    /* لوگو: کوچک‌تر، بدون شکستن */
    .logo { flex-shrink: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
    .logo-img { width: 38px !important; height: auto !important; }
    .logo-text { font-size: 15px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* اکشن‌ها: فشرده و هم‌تراز */
    .header-actions { display: flex !important; align-items: center; gap: 6px !important; flex-shrink: 0; }

    /* دکمه‌ی ورود/حساب: فقط آیکن در موبایل */
    .btn-account .btn-account__text { display: none !important; }
    .btn-account { padding: 9px 11px !important; }

    /* دکمه‌ی رزرو: فشرده */
    .btn-booking { padding: 9px 12px !important; font-size: 13px !important; }
    .btn-booking i { display: none; }

    .theme-toggle { width: 38px; height: 38px; }
    .menu-toggle { display: flex !important; width: 40px; height: 40px; align-items: center; justify-content: center; }
}

@media (max-width: 480px) {
    .logo-text { font-size: 13px !important; max-width: 110px; }
    .logo-img { width: 32px !important; }
    /* در خیلی کوچک، دکمه‌ی رزرو متنش کوتاه‌تر */
    .btn-booking { padding: 8px 10px !important; font-size: 12px !important; }
    .theme-toggle { display: none; } /* صرفه‌جویی فضا */
    .header-actions { gap: 4px !important; }
}

@media (max-width: 360px) {
    .logo-text { max-width: 80px; font-size: 12px !important; }
    .btn-account { padding: 8px 9px !important; }
}