/*! UpSEO Tool Kit 1.0 — یک زبان بصری برای همه‌ی صفحه‌های ابزار
 *
 * بعد از custom.css در header.php بارگذاری می‌شود.
 * همه‌ی انتخاب‌گرها با :where() نوشته شده‌اند (ویژگی = صفر)، پس:
 *   - روی صفحه‌های عادی (قالب قدیمی h5 + .form-control) اعمال می‌شود،
 *   - استایل اختصاصی صفحه‌هایی مثل ai-content / reviewer / word / excel که بعد از این فایل
 *     لود می‌شوند همچنان برنده‌اند و خراب نمی‌شوند.
 * رنگ، شعاع و فونت فقط از توکن‌های up-ui.css (بخش ۱) خوانده می‌شود.
 */

:root {
  --up-r-ctl: 10px;            /* فیلد و دکمه */
  --up-r-card: 14px;           /* کارت و پنل */
  --up-tap: 44px;              /* حداقل ناحیه‌ی لمس */
  --up-card-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 16px rgba(15, 23, 42, .04);
}

/* ---------- ۱. فوکوس قابل‌دیدن برای کیبورد (یکسان در همه‌ی صفحه‌ها) ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--up-primary, #4f46e5);
  outline-offset: 2px;
}

/* ---------- ۲. سربرگ صفحه‌ی ابزار: عنوان + توضیح کوتاه ---------- */
:where(.upseo-main-panel .main-index) > .header-h1-title {
  font-family: var(--up-font-strong, inherit);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--up-ink, #0f172a);
  text-align: start;
  margin: 0 0 4px;
}
:where(.upseo-main-panel .main-index) > h2#title {
  font-family: var(--up-font, inherit);
  font-size: var(--up-fs-md, 15px);
  font-weight: 400;
  line-height: 1.8;
  color: var(--up-muted, #64748b);
  text-align: start;
  margin: 0 0 var(--up-s5, 24px);
}

/* ---------- ۳. فرم: برچسب فیلد، فیلد، راهنما ---------- */
/* قالب‌های قدیمی برچسب را با <h5> می‌نویسند؛ ظاهرش مثل یک برچسب واقعی می‌شود */
:where(.upseo-main-panel .main-index) form h5,
:where(.upseo-main-panel .main-index) .form-group > h5 {
  font-family: var(--up-font-strong, inherit);
  font-size: var(--up-fs-sm, 13px);
  font-weight: 700;
  color: var(--up-text, #1e293b);
  margin: 0 0 var(--up-s2, 8px);
}
:where(.upseo-main-panel .main-index) h5 small {
  font-family: var(--up-font, inherit);
  font-weight: 400;
  color: var(--up-muted, #64748b);
}
:where(.upseo-main-panel) .form-control,
:where(.upseo-main-panel) .form-select {
  border-radius: var(--up-r-ctl);
  border-color: var(--up-line-strong, #cbd5e1);
  background-color: var(--up-surface, #fff);
  color: var(--up-text, #1e293b);
}
:where(.upseo-main-panel) .form-control:focus,
:where(.upseo-main-panel) .form-select:focus {
  border-color: var(--up-primary, #4f46e5);
  box-shadow: 0 0 0 3px var(--up-ring, rgba(79, 70, 229, .28));
  outline: none;
}

/* ---------- ۴. کارت ورودی و کارت نتیجه ---------- */
:where(.upseo-main-panel .main-index) :is(.panel, .well, .box) {
  background: var(--up-surface, #fff);
  border: 1px solid var(--up-line, #e2e8f0);
  border-radius: var(--up-r-card);
  box-shadow: var(--up-card-shadow);
}
:where(.upseo-main-panel .main-index) .panel > .panel-heading:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
:where(.upseo-main-panel .main-index) .panel > .panel-footer:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* ---------- ۵. جدول‌ها: سرستون آرام، اسکرول افقی داخل خودش ---------- */
:where(.upseo-main-panel .main-index) .table > thead > tr > th {
  background: var(--up-canvas, #f8fafc);
  color: var(--up-muted, #64748b);
  font-size: var(--up-fs-sm, 13px);
  font-weight: 700;
  border-bottom: 1px solid var(--up-line, #e2e8f0);
}
:where(.upseo-main-panel .main-index) .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- ۶. موبایل و تبلت ---------- */
@media (max-width: 1150px) {
  .upseo-main-panel .main-index {
    border-radius: var(--up-r-card);
    padding: 16px 14px 18px !important;
  }
  /* ۱۶px جلوی زوم خودکار iOS هنگام فوکوس را می‌گیرد؛ ۴۴px ناحیه‌ی لمس استاندارد است */
  :where(.upseo-main-panel) .form-control,
  :where(.upseo-main-panel) .form-select {
    font-size: 16px;
  }
  :where(.upseo-main-panel) :is(input.form-control, select.form-control, .form-select) {
    min-height: var(--up-tap);
  }
  :where(.upseo-main-panel .main-index) .btn {
    min-height: var(--up-tap);
  }
}
/* روی گوشی دکمه‌ی ارسال فرم تمام‌عرض است (به‌جز دکمه‌ی داخل input-group) */
@media (max-width: 640px) {
  :where(.upseo-main-panel .main-index form) .btn[type="submit"]:not(.input-group .btn) {
    display: block;
    width: 100%;
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.upseo-main-panel, .up-tabbar) * { scroll-behavior: auto; transition-duration: .01ms !important; }
}