/**
 * استایل‌های سفارشی — منتقل‌شده از «CSS اضافی» پنل سفارشی‌سازی وردپرس.
 *
 * این فایل بعد از style.css و article.css لود می‌شود تا ترتیب اولویت
 * همان چیزی باشد که در Customizer بود.
 *
 * قواعد مرده حذف و چند باگ اصلاح شده — جزئیات در کامنت هر بخش.
 */

/* =========================================================================
   جدول‌های داخل محتوا (کلاس .table-responsive روی جدول‌های ادیتور)
   ========================================================================= */

.table-responsive {
  font-family: 'IRANYekanXVF' !important;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin: 1rem 0;
  padding: 0;
}

.table-responsive table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  color: #333;
  /*
   * قبلاً min-width: 700px بود که جدول‌های دو-سه ستونه را هم بی‌دلیل
   * روی موبایل اسکرول‌دار می‌کرد. چون سلول‌ها nowrap هستند، عرض واقعی
   * جدول خودش تعیین می‌شود: جدول کم‌ستون جا می‌شود، جدول پهن اسکرول می‌گیرد.
   */
  min-width: 100%;
}

.table-responsive th,
.table-responsive td {
  padding: 12px 15px;
  text-align: center;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  white-space: nowrap;
}

.table-responsive thead {
  /* مشکی روی این قرمز کنتراست 5.4:1 دارد و از سفید (3.9:1) خواناتر است */
  background-color: #ec3d4f;
  color: #000;
  font-weight: 700;
}

.table-responsive tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.table-responsive tbody tr:hover {
  background-color: #fff2f4;
}

.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background-color: #ec3d4f;
  border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 10px;
}

/* =========================================================================
   لودینگ تمام‌صفحه
   ========================================================================= */

.main-loading {
  /*
   * قبلاً position: absolute با width: 100vw / height: 100vh بود.
   * 100vw عرض اسکرول‌بار را هم حساب می‌کند و اسکرول افقی می‌ساخت،
   * و 100vh در سافاری موبایل زیر نوار آدرس می‌رفت. fixed + inset هر دو را حل می‌کند.
   */
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #fff;
}

.loader {
  width: 60px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side, #000 90%, #0000);
  background:
    var(--_g) 0% 50%,
    var(--_g) 50% 50%,
    var(--_g) 100% 50%;
  background-size: calc(100% / 3) 50%;
  animation: l3 1s infinite linear;
}

@keyframes l3 {
  20% { background-position: 0% 0%, 50% 50%, 100% 50%; }
  40% { background-position: 0% 100%, 50% 0%, 100% 50%; }
  60% { background-position: 0% 50%, 50% 100%, 100% 0%; }
  80% { background-position: 0% 50%, 50% 50%, 100% 100%; }
}

/* =========================================================================
   کارت بلاگ قدیمی (صفحه اصلی و لوپ‌های AJAX — .blog-card)
   کارت‌های آرشیو و مجله از .ia-card در article.css استفاده می‌کنند.
   ========================================================================= */

.blog-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.blog-card_img {
  height: 200px;
}

.blog-card img {
  width: 100%;
  height: auto;
}

.blog-card-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-card-title {
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.blog-card-excerpt {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-meta {
  margin-top: auto;
  font-size: 0.8rem;
}

/* =========================================================================
   مودال دست‌ساز صفحه اصلی (#myModal در partials/index/hero.php)
   ========================================================================= */

/*
 * قبلاً این قواعد روی کلاس عمومی .modal بودند و به مودال‌های بوت‌استرپ
 * (مثل «پاسخ به دیدگاه») هم سرریز می‌کردند: پس‌زمینه تاریک روی .modal-backdrop
 * دوباره اعمال می‌شد و margin-top: 57vh با width: 400px مودال پاسخ را
 * روی موبایل از کادر بیرون می‌انداخت. حالا فقط مودال‌های غیر بوت‌استرپ
 * (بدون کلاس fade) را هدف می‌گیرند.
 */
.modal:not(.fade) {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
}

.modal:not(.fade) > .modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  margin: 57vh auto 0;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 0.5rem;
  outline: 0;
}

/* مودال‌های بوت‌استرپ به‌صورت پیش‌فرض بالای صفحه می‌چسبند؛ عمودی وسط‌چین می‌شوند */
.modal.fade .modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin, 0.5rem) * 2);
}

/* =========================================================================
   متن آوسبیلدونگ و اجزای پراکنده
   ========================================================================= */

.content-ausbildung {
  font-size: 1rem;
  line-height: 1.9;
}

.content-ausbildung p {
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: 1em;
}

.content-ausbildung h1 {
  font-size: 1.8rem;
  line-height: 1.35;
}

.content-ausbildung h2 {
  font-size: 1.5rem;
  line-height: 1.4;
}

.content-ausbildung h3 {
  font-size: 1.3rem;
  line-height: 1.45;
}

.content-ausbildung h4 {
  font-size: 1.15rem;
  line-height: 1.5;
}

.content-ausbildung h5 {
  font-size: 1.05rem;
  line-height: 1.55;
}

.content-ausbildung h6 {
  font-size: 1rem;
  line-height: 1.6;
}

.custom-toc {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}

.scroll-to-top {
  background-color: var(--brand);
  color: #fff;
  width: 3rem;
  height: 3rem;
  border-radius: 16px;
  box-shadow: 4px 8px 33px #86868627;
}

.wp-caption {
  width: auto !important;
  max-width: 100%;
}

.title_pro_aus {
  text-align: right;
}

.font-filter {
  font-size: 13px !important;
}

.ia-mega-panel {
  margin-top: 6px;
}

.form-moshavere-pro > label {
  padding-top: 10px;
  padding-bottom: 15px;
}

select#phone_country_ausbildung {
  width: 20%;
  position: relative;
  top: 4px;
}

/* =========================================================================
   دکمه‌ها
   ========================================================================= */

/*
 * قبلاً برای هر دکمه یک سلکتور زنجیره‌ای مثل
 * button.py-2.px-2.rounded-2.bg-brand.text-white.w-100 نوشته شده بود؛
 * با تغییر یک کلاس یوتیلیتی در مارک‌آپ، استایل می‌شکست.
 */
button.bg-brand,
button.shareButton,
button#load-more-bt,
button#submit-payment,
.ausbildung-tab-btn {
  border: 0;
}

.btn-step-next {
  background: #ec3c4e !important;
  border-color: #ec3c4e !important;
}

input[type="submit"][name="submit_consult"] {
  background: #dc3445;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(220, 52, 69, 0.25);
}

input[type="submit"][name="submit_consult"]:hover {
  background: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(220, 52, 69, 0.35);
}

input[type="submit"][name="submit_consult"]:active {
  transform: translateY(0);
}

input[type="submit"][name="submit_consult"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================================================================
   باکس مشاوره داخل محتوا (شورتکد/HTML ادیتور)
   ========================================================================= */

.irAusb_consultBox {
  width: 100% !important;
  max-width: 500px !important;
  margin: 20px auto !important;
  padding: 25px 20px !important;
  text-align: center !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
  box-sizing: border-box !important;
}

.irAusb_consultText {
  font-size: 18px !important;
  margin-bottom: 10px !important;
  line-height: 1.7 !important;
}

.irAusb_consultWarning {
  color: #e11d48 !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
  font-size: 15px !important;
}

.irAusb_consultBtn {
  display: block !important;
  width: 100% !important;
  padding: 10px;
  border-radius: 12px !important;
  background: #ec3c4e !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  transition: 0.3s ease !important;
}

.irAusb_consultBtn:hover {
  background: #d92f40 !important;
  transform: translateY(-2px) !important;
}

/* =========================================================================
   باکس‌های تأکید و هشدار داخل محتوا
   ------------------------------------------------------------------------
   نویسنده محتوا این کلاس‌ها را در ادیتور روی یک div/p می‌گذارد.
   برای هر رنگ یک نام کوتاه (.blue) و یک نام پیشوندی (.box-blue) هست؛
   نام پیشوندی برای محتوای جدید توصیه می‌شود چون احتمال تداخلش با
   کلاس‌های پلاگین‌ها و پیج‌بیلدرها در آینده تقریباً صفر است.
   ========================================================================= */

.blue, .box-blue,
.green, .box-green,
.purple, .box-purple,
.red, .box-red,
.yellow, .box-yellow,
.grey, .box-grey,
.bg, .box-grey {
  padding: 16px;
  border: 1px solid;
  border-radius: 8px;
  /* جلوگیری از سرریز باکس و لینک‌های بلند از کادر روی موبایل */
  max-width: 100%;
  overflow-wrap: break-word;
}

.blue, .box-blue {
  border-color: #96deff;
  background-color: #e1f5fe;
}

.green, .box-green {
  border-color: #6ac371;
  background-color: #e8f5e9;
}

.purple, .box-purple {
  border-color: #af8fde;
  background-color: #ede7f6;
}

.red, .box-red {
  border-color: #e196a1;
  background-color: #ffebee;
}

.yellow, .box-yellow {
  border-color: #dcd8a7;
  background-color: #fffde7;
}

/* .grey در نسخه اولیه در سلکتورهای li و div ذکر شده بود ولی هرگز تعریف نشد */
.grey, .box-grey,
.bg {
  border-color: #cbd4e3;
  background-color: #edf0f5;
}

div.blue, div.green, div.purple, div.red, div.yellow, div.grey, div.bg,
div.box-blue, div.box-green, div.box-purple, div.box-red, div.box-yellow, div.box-grey {
  margin-bottom: 1em;
}

/* margin-inline-start به‌جای margin-right: اگر لیست محتوای آلمانی/LTR باشد
   هم تورفتگی از سمت درست اعمال می‌شود */
.blue li, .green li, .purple li, .red li, .yellow li, .grey li, .bg li,
.box-blue li, .box-green li, .box-purple li, .box-red li, .box-yellow li, .box-grey li {
  margin-inline-start: 15px;
}

.blue > :last-child, .green > :last-child, .purple > :last-child,
.red > :last-child, .yellow > :last-child, .grey > :last-child, .bg > :last-child,
.box-blue > :last-child, .box-green > :last-child, .box-purple > :last-child,
.box-red > :last-child, .box-yellow > :last-child, .box-grey > :last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   دکمه CTA وسط‌چین داخل محتوا
   ------------------------------------------------------------------------
   نام درست .cta است. کلاس .link به‌عنوان سازگاری با مقالات منتشرشده
   نگه داشته شده، اما فقط روی div/p — چون .link در styles/style.css یک
   utility برای رنگ hover لینک‌هاست و روی ۸ تگ <a> در فوتر استفاده می‌شود.
   ---------------------------------------------------------------------- */

.cta,
div.link,
p.link {
  text-align: center;
}

.cta a,
div.link a,
p.link a {
  display: inline-block;
  /* پدینگ 3px×5px قبلی ارتفاع لمسی حدود ۲۰px می‌داد؛ حداقل توصیه‌شده ۴۴px است */
  padding: 12px 22px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.cta a:hover,
div.link a:hover,
p.link a:hover {
  background: var(--c-brand-dark);
  color: #fff;
}

/*
 * داخل بدنه مقاله، قاعده prose در article.css رنگ برند و آندرلاین را به
 * لینک‌ها می‌دهد و با specificity بالاتر رنگ سفید دکمه را می‌خورد
 * (متن قرمز روی پس‌زمینه قرمز = نامرئی). این قاعده آن را برمی‌گرداند.
 */
.ia-article__content div.cta a,
.ia-article__content p.cta a,
.ia-article__content div.link a,
.ia-article__content p.link a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/* بدنه مقاله پاراگراف‌ها را justify می‌کند؛ جعبه CTA باید وسط‌چین بماند */
.ia-article__content .cta,
.ia-article__content .cta p,
.ia-article__content div.link,
.ia-article__content div.link p,
.ia-article__content p.link {
  text-align: center;
}

/* =========================================================================
   بریک‌پوینت‌ها
   ========================================================================= */

@media (max-width: 768px) {
  .blog-card {
    max-width: 100%;
  }

  .title_pro_aus {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .irAusb_consultBox {
    padding: 20px 15px !important;
  }

  .irAusb_consultText {
    font-size: 16px !important;
  }

  .irAusb_consultBtn {
    font-size: 16px !important;
    padding: 12px !important;
  }
}