/**
 * ACC Portal Mobile Polish — readable, clean phone UI across all portals.
 * Loaded after portal-tabbar.css. Breakpoint: ≤720px (matches Digikala tabbar).
 */
@media (max-width: 720px) {
  :root {
    --acc-m-text: 17px;
    --acc-m-small: 14px;
    --acc-m-tiny: 14px;
    --acc-m-title: 1.35rem;
    --acc-m-lead: 1.05rem;
    --acc-m-pad: 14px;
    --acc-tabbar-h: 62px;
  }

  html {
    font-size: 17px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.sp-body,
  body.svc-body,
  body.melk-body,
  body.edu-body,
  body.el-body,
  body.election-body,
  body.ws-body,
  body.wholesale-body,
  body.growth-body,
  body.erp-applied-body,
  body.mk-body,
  body.acc-body,
  body.erp-shop-body,
  body.sacct-body,
  body.mz-body,
  body.pl-body,
  body.dev-body,
  body {
    font-size: var(--acc-m-text);
    line-height: 1.65;
  }

  /* ── Base readability bumps ── */
  p, li, label, td, th, .hl-portal__go,
  .ba-portal__go, .ha-portal__go, .ma-portal__go,
  .ea-portal__go, .ga-portal__go {
    font-size: max(1em, var(--acc-m-small));
  }

  small, .muted, .hl-portal small, .ba-pillar span,
  .ha-portal small, .ma-portal small, .ea-portal small {
    font-size: var(--acc-m-tiny) !important;
    line-height: 1.55 !important;
  }

  /* Headings */
  h1, .hl-hero h1, .ba-hero h1, .ha-hero h1, .ma-hero h1,
  .ea-hero h1, .ga-hero h1, .ws-hero h1 {
    font-size: clamp(1.55rem, 6.2vw, 2rem) !important;
    line-height: 1.25 !important;
  }

  h2, .hl-section h2, .ba-section h2, .ha-section h2,
  .ma-section h2, .ea-section h2, .ga-section h2 {
    font-size: clamp(1.2rem, 4.8vw, 1.45rem) !important;
  }

  .hl-hero__lead, .ba-hero__lead, .ha-hero__lead,
  .ma-hero__lead, .ea-hero__lead, .ga-hero__lead,
  .ws-hero p, .hl-hero__lead {
    font-size: var(--acc-m-lead) !important;
    line-height: 1.7 !important;
  }

  /* Sticky headers — roomier */
  .ba-header, .ha-header, .ma-header, .ea-header,
  .ga-header, .hl-header, .ws-header,
  .svc-header--app, .melk-header--app, .el-header--app,
  .edu-header, .ga-ws-header, .acc-header, .mk-top {
    min-height: 56px;
  }

  .ba-brand__name, .ha-brand__name, .ma-brand__name,
  .ea-brand__name, .ga-brand__name, .hl-brand__name {
    font-size: 1rem !important;
  }

  .ba-brand__sub, .ha-brand__sub, .ma-brand__sub,
  .ea-brand__sub, .ga-brand__sub, .hl-brand__sub {
    font-size: 11px !important;
  }

  /* Icon buttons / CTAs — thumb friendly */
  .ba-icon-btn, .ba-header__cta, .ha-header__cta,
  .hl-header__cta, .hl-btn, .ha-btn, .ma-btn, .ea-btn,
  .ga-btn, .ws-btn, .svc-btn, .edu-btn, .el-btn, .mk-btn,
  .acc-btn, .lp-btn {
    min-height: 44px;
    font-size: 15px !important;
    padding-block: 10px;
  }

  .ba-icon-btn .label {
    font-size: 12px !important;
  }

  /* Portal cards */
  .hl-portal, .ha-portal, .ma-portal, .ea-portal,
  .ba-portal, .ga-portal {
    padding: 16px 14px !important;
  }

  .hl-portal strong, .ha-portal strong, .ma-portal strong,
  .ea-portal strong, .ga-portal strong {
    font-size: 1.05rem !important;
  }

  .hl-portal__tag, .ha-portal__tag, .ma-portal__tag,
  .ea-portal__tag, .ga-portal__tag {
    font-size: 12px !important;
  }

  /* Sections padding */
  .hl-section, .ha-section, .ma-section, .ea-section,
  .ga-section, .ba-section, .ws-section {
    padding-inline: var(--acc-m-pad) !important;
  }

  .hl-wrap, .sp-wrap, .svc-app, .melk-app, .edu-app,
  .el-app, .ws-app, .growth-app, .mk-app, .acc-layout {
    padding-inline: max(0px, env(safe-area-inset-left));
  }

  /* Workspace tabs (when still visible) */
  .svc-ws-tab, .em-main-tab, .el-tab, .ws-tab,
  .edu-header__nav button, .ga-ws-nav button {
    font-size: 14px !important;
    min-height: 42px;
    padding: 8px 12px !important;
  }

  /* Forms */
  input, select, textarea, .acc-input, .lp-field input,
  .sp-search__input, .mk-input {
    font-size: 16px !important; /* prevents iOS zoom */
    min-height: 44px;
  }

  /* Tables / lists denser but readable */
  .tabulator, .tabulator .tabulator-cell,
  .tabulator .tabulator-col-content {
    font-size: 14px !important;
  }

  /* Shop specifics */
  .sp-tile__title, .sp-catalog h3, .sp-pdp__title {
    font-size: 1.1rem !important;
  }

  .sp-tile__price, .sp-price, .sp-pdp__price {
    font-size: 1.05rem !important;
  }

  .sp-footer, .ha-footer, .hl-footer, .ma-footer, .ea-footer {
    font-size: 14px !important;
    padding: 18px var(--acc-m-pad) !important;
  }

  .sp-footer__nav a, .hl-footer a {
    font-size: 14px !important;
  }

  /* Track float */
  #sp-track-float {
    font-size: 18px !important;
    width: 52px;
    height: 52px;
  }

  /* Auth panels */
  .lp-form__title, .acc-login-box h2, .svc-login h1,
  .edu-login h1, .mk-auth h1 {
    font-size: 1.25rem !important;
  }

  .lp-msg, .acc-msg, .svc-msg, .svc-demo-hint,
  .edu-demo-row__user, code {
    font-size: 13px !important;
  }

  /* KPI / chips */
  .mk-kpi__val, .ha-kpi__val, .ga-kpi__val {
    font-size: 1.25rem !important;
  }

  .mk-kpi__lbl, .ha-kpi__lbl, .mk-chip {
    font-size: 13px !important;
  }

  /* Account sidebar as horizontal strip */
  .acc-nav a, .acc-sidebar a {
    font-size: 14px !important;
    min-height: 42px;
  }

  /* Admin / ERP shop / accounting */
  .sp-admin__head, .erp-header, .sacct-nav a, .sacct-nav button,
  .erp-sidebar a, .erp-sidebar button, .sp-admin__tabs button {
    font-size: 15px !important;
    min-height: 44px;
  }
  .sacct-nav, .erp-sidebar { font-size: 15px !important; }
  .sp-admin table, .erp-shop-body table, .sacct-body table,
  .sacct-body td, .sacct-body th, .erp-shop-body td, .erp-shop-body th {
    font-size: 14px !important;
  }

  /* Mizaj */
  .mz-header, .mz-card, .mz-q, .mz-opt, .mz-result { font-size: 16px !important; }
  .mz-opt { min-height: 48px; padding: 12px 14px !important; }

  /* Platform + API docs */
  .pl-header, .pl-nav a, .pl-btn, .pl-hero p, .pl-card, .pl-feature, .pl-price,
  .docs, .docs table, .docs td, .docs th {
    font-size: 15px !important;
  }
  .pl-hero h1, .docs h1 { font-size: clamp(1.55rem, 6vw, 2rem) !important; }
  .docs code, .docs pre { font-size: 13px !important; }
  .pl-nav { display: none !important; }

  /* Dev portal */
  .dev-login h1, .dev-brand__name, .dev-header, .dev-tabs button, .dev-doc, .dev-card {
    font-size: 15px !important;
  }
  .dev-input { min-height: 44px; font-size: 16px !important; }

  /* Deploy portal */
  .wrap h1 { font-size: 1.5rem !important; }
  .wrap .lead, .wrap .meta, .wrap label { font-size: 15px !important; }
  .wrap .btn { font-size: 16px !important; min-height: 48px; }

  /* Util bars */
  .ba-util, .ha-util, .ma-util, .ea-util, .hl-util, .ga-util {
    font-size: 13px !important;
  }

  /* Mobile tabbar labels a bit larger */
  .acc-portal-tabbar__item {
    font-size: 13px !important;
  }
  .acc-portal-tabbar__icon svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Extra-small phones */
@media (max-width: 390px) {
  html { font-size: 16px; }
  :root {
    --acc-m-text: 16px;
    --acc-m-small: 13.5px;
    --acc-m-tiny: 13.5px;
  }
}

/* Chat widget — force larger type on all phones (overrides residual tiny rules) */
@media (max-width: 720px) {
  #acc-chat-window,
  #acc-chat-window * {
    -webkit-text-size-adjust: 100%;
  }
  #acc-chat-launcher .cw-launcher-label { font-size: 15px !important; }
  #acc-chat-window .cw-tab { font-size: 15px !important; }
  #acc-chat-window .cw-tab-icon { font-size: 26px !important; }
  #acc-chat-window .cw-header-name { font-size: 18px !important; }
  #acc-chat-window .cw-welcome-title { font-size: 19px !important; }
  #acc-chat-window .cw-welcome-sub { font-size: 16px !important; }
  #acc-chat-window .cw-msg,
  #acc-chat-window .cw-msg-bubble,
  #acc-chat-window .cw-bubble,
  #acc-chat-window .cw-message,
  #acc-chat-window p {
    font-size: 17px !important;
    line-height: 1.65 !important;
  }
  #acc-chat-window .cw-qa-item,
  #acc-chat-window .cw-service-label,
  #acc-chat-window .cw-contact-label,
  #acc-chat-window button:not(.cw-tab) {
    font-size: 16px !important;
  }
  #acc-chat-window textarea,
  #acc-chat-window input {
    font-size: 17px !important;
  }
  #acc-chat-window .shop-ai,
  #acc-chat-window .ws-ai,
  #acc-chat-window .shop-ai-sug,
  #acc-chat-window .shop-ai__chips button,
  #acc-chat-window .ws-ai__chips button {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   کف لمسی و خوانایی — مشترک بین همهٔ پورتال‌ها
   ═══════════════════════════════════════════════════════════════════

   اندازه‌گیری روی ۳۷۵ پیکسل (نه حدس) روی index / service / growth /
   education / election نشان داد هر شش صفحه دقیقاً دو نقص یکسان دارند،
   چون همه از یک قالب با پیشوند کلاسِ متفاوت ساخته شده‌اند:

     • لینک‌های فوتر و ناوبری بین ۲۰ تا ۲۲ پیکسل ارتفاع دارند، در حالی
       که کف توصیه‌شدهٔ اپل و گوگل ۴۴ است. این لینک‌ها کنار هم‌اند، پس
       خطای لمس روی گوشی واقعاً رخ می‌دهد.
     • «kicker» و «brand__sub» و برچسب‌ها بین ۹٫۵ تا ۱۱٫۵ پیکسل‌اند —
       زیر آستانه‌ای که روی گوشی بدون نزدیک‌کردن خوانده شود.

   به‌جای تکرار در پنج شیوه‌نامه، اینجا با انتخابگر صفت روی الگوی مشترک
   نوشته شده تا هر پورتالِ تازه هم خودبه‌خود پوشش بگیرد. پیشوندها فرق
   دارند (ha-, ga-, ea-, hl-, el-, ma-, edu-)، الگو نه.

   پیشوند `html` عمدی است و تزئینی نیست: این فایل **پیش از** شیوه‌نامهٔ
   اختصاصی هر پورتال بارگذاری می‌شود، و `[class*="-kicker"]` با `.ha-kicker`
   ویژگیِ برابر دارد — یعنی ترتیب برنده می‌شد و قاعده اثر نمی‌کرد. اولین
   استقرار دقیقاً همین را نشان داد: هدف‌های لمسی درست شدند ولی اندازهٔ قلم
   تکان نخورد. `html` یک واحد ویژگی اضافه می‌کند و مسئله را حل می‌کند.
   ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ */
@media (max-width: 720px) {
  /* ── هدف لمسی ─────────────────────────────────────────────── */
  html [class*="-footer"] a,
  html [class*="-footer"] button,
  html [class*="footer__"] a,
  html [class*="foot"] a,
  html nav a,
  html [class*="linkbtn"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 4px;
  }

  html [class*="header__cta"],
  html [class*="header__live"],
  html [class*="-header"] button {
    min-height: 44px;
    max-width: 100%;          /* روی election این دکمه از عرض هدر بیرون می‌زد */
  }

  html [class*="-brand"] { min-height: 44px; }
  html .cw-header-close   { min-width: 44px; min-height: 44px; }

  /* ── خوانایی: هیچ متنی زیر ۱۲٫۵ پیکسل ─────────────────────── */
  html [class*="brand__sub"],
  html [class*="-kicker"],
  html [class*="__badge"],
  html [class*="__tag"],
  html [class*="-chip"],
  html [class*="-hint"],
  html [class*="cw-tab"],
  html dl dt {
    font-size: 12.5px;
  }
  html [class*="-kicker"] { letter-spacing: .04em; }
}

/* ─────────────────────────────────────────────────────────────────
   کفِ خوانایی و لمس — دور دوم، بر پایهٔ اندازه‌گیری دقیقِ باقی‌مانده‌ها

   دور اول بیشتر هدف‌های لمسی را درست کرد ولی اندازهٔ قلم تکان نخورد،
   چون قاعده‌های تزئینیِ هر پورتال ویژگیِ بالاتری دارند (مثل
   `.ha-brand .ha-brand__sub`) و بعد از این فایل می‌نشینند.

   اینجا `!important` عمدی است و دقیقاً همان موردی است که برایش ساخته
   شده: یک **کف دسترس‌پذیری** که هیچ قاعدهٔ ظاهریِ بعدی نباید بشکندش.
   دامنه‌اش هم تنگ است — فقط زیر ۷۲۰ پیکسل، و فقط روی همان الگوهایی که
   اندازه‌گیری نشانشان داد، نه روی `*`.

   اندازه‌های ریز تقریباً همه از rem می‌آیند (با html{font-size:17px}
   موبایل، ‎.64rem‎ می‌شود ۱۰٫۹px) و در ده‌ها فایل پخش‌اند؛ برای همین
   کف اینجا نوشته شده نه در تک‌تک آن‌ها.
   ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ */
@media (max-width: 720px) {
  html [class*="brand__sub"],
  html [class*="-kicker"],
  html [class*="__badge"],
  html [class*="__tag"],
  html [class*="-chip"],
  html [class*="-hint"],
  html [class*="cw-tab"],
  html [class*="lp-link"],
  html [class*="lp-form__desc"],
  html [class*="lp-field"] label,
  html [class*="footer__bar"] span,
  html dt {
    font-size: 12.5px !important;
  }

  /* هدف‌های لمسیِ باقی‌مانده — همه از اندازه‌گیری روی shop و index آمدند */
  html [class*="ba-btn"],
  html [class*="drawer__close"],
  html [class*="__qv"],
  html [class*="-util"] a,
  html .cw-header-close {
    min-height: 44px !important;
  }
  html [class*="drawer__close"],
  html .cw-header-close {
    min-width: 44px !important;
  }
}

/* بلوک‌های «اعتماد» پورتال خدمات: span بدون کلاس داخل *-trust__item،
   ۱۱٫۸px. با کلاسِ والد هدف‌گیری می‌شود چون خودِ span کلاسی ندارد. */
@media (max-width: 720px) {
  html [class*="trust__item"] span { font-size: 12.5px !important; }
}

/* دو مورد آخر که اندازه‌گیری روی هاست نشان داد:
   ‎.elder-chip‎ (۳۸px) و لینک داخل ‎.ma-jitsi-note‎ (۱۱٫۸px). */
@media (max-width: 720px) {
  html [class*="-chip"]        { min-height: 44px !important; }
  html [class*="jitsi-note"],
  html [class*="jitsi-note"] a { font-size: 12.5px !important; }
}