/* ==========================================================================
   حساب کاربری، ورود/ثبت‌نام، و فرم دیدگاه.

   همه‌چیز روی مارک‌آپ خودِ ووکامرس و خودِ وردپرس سوار شده. هیچ قالبی کپی
   نشده — هر فایلی که از woocommerce/templates برداشته شود، یک بدهی است
   که در به‌روزرسانی بعدی سررسید می‌شود.

   ویژگی انتخابگرها عمداً با `html body.kh-site` بالا برده شده: استایل‌های
   kh-core با `[data-kh-skin="x"] body.kh-site` یعنی (0,2,1) می‌نویسند و
   قاعده‌ی تک‌کلاسه بی‌صدا زیرشان گم می‌شود.
   ========================================================================== */

/* ═══════════════ ورود و ثبت‌نام ═══════════════ */

html body.kh-site.woocommerce-account:not(.logged-in) .woocommerce {
  max-width: 520px;
  margin-inline: auto;
}

/* kh-woo.css به ظرف بیرونی هم کارت سفید می‌داد. حالا که خودِ فرم کارت
   است، آن یکی به کارتِ داخل کارت تبدیل می‌شد — دو قاب تودرتو با دو
   سایه. ظرف بیرونی شفاف می‌شود. */
html body.kh-site.woocommerce-account:not(.logged-in) .woocommerce > .u-columns,
html body.kh-site.woocommerce-account:not(.logged-in) .woocommerce > .u-columns > div {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  margin: 0;
}

/* ── نوار تب ── */

.kh-auth__head { margin-block-end: 18px; }

.kh-auth__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--kh-bg, #F4F6FA);
  border: 1px solid var(--kh-line, #E3E9F0);
  border-radius: 999px;

  /* رنگ تب خاموش توکن خودش را دارد و از `--kh-muted` استفاده نمی‌کند.
     آن توکن روی این پس‌زمینه‌ی روشن نسبت کنتراست ۲.۷ می‌داد — یعنی رد
     شدن از حداقل ۴.۵. این مقدار ۶.۴ می‌دهد و در حالت تیره قرینه دارد،
     پس رنگ ثابت، سوراخِ دارک‌مود نمی‌سازد. */
  --kh-tab-off: #475569;
}
html[data-theme="dark"] .kh-auth__tabs { --kh-tab-off: #CBD5E1; }

html body.kh-site .kh-auth__tab {
  display: grid;
  place-items: center;
  padding: 11px 12px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.9;
  color: var(--kh-tab-off);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

html body.kh-site .kh-auth__tab:hover { color: var(--kh-ink, #0F172A); }

html body.kh-site .kh-auth__tab[aria-selected="true"] {
  background: var(--kh-card, #fff);
  color: var(--kh-gold, #6D28D9);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .10);
}

.kh-auth__tab:focus-visible {
  outline: 2px solid var(--kh-gold, #6D28D9);
  outline-offset: 2px;
}

.kh-auth__welcome {
  margin: 16px 0 0;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  line-height: 2;
  color: var(--kh-ink, #0F172A);
}

/* ── پنهان کردن فرمِ تب غیرفعال ──
   با کلاس بدنه انجام می‌شود، نه با جاوااسکریپت: تا وقتی JS بیاید فرم
   درست از همان اولین رنگ‌آمیزی سر جایش است و چیزی نمی‌پرد. */

body.kh-auth .woocommerce > .u-columns > .u-column1,
body.kh-auth .woocommerce > .u-columns > .u-column2 { width: 100%; float: none; }

body.kh-auth--login    .woocommerce form.register,
body.kh-auth--register .woocommerce form.login { display: none; }

/* عنوان «ورود» و «عضویت» بالای هر فرم، وقتی تب داریم، تکراری است. */
body.kh-auth .woocommerce > .u-columns > div > h2,
body.kh-auth .woocommerce > h2 { display: none; }

/* ── کارت فرم ── */

html body.kh-site .woocommerce form.login,
html body.kh-site .woocommerce form.register {
  background: var(--kh-card, #fff);
  border: 1px solid var(--kh-line, #E3E9F0);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 28px);
  margin: 0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}

html body.kh-site .woocommerce form .form-row { padding: 0; margin: 0 0 14px; }

html body.kh-site .woocommerce form .form-row label {
  display: block;
  margin-block-end: 6px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 2;
  color: var(--kh-ink, #0F172A);
}

html body.kh-site .woocommerce form .form-row input.input-text,
html body.kh-site .woocommerce form .form-row input[type="text"],
html body.kh-site .woocommerce form .form-row input[type="email"],
html body.kh-site .woocommerce form .form-row input[type="tel"],
html body.kh-site .woocommerce form .form-row input[type="password"] {
  inline-size: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  color: var(--kh-ink, #0F172A);
  background: var(--kh-bg, #F4F6FA);
  border: 1px solid var(--kh-line, #E3E9F0);
  border-radius: 11px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

html body.kh-site .woocommerce form .form-row input:focus {
  outline: none;
  background: var(--kh-card, #fff);
  border-color: var(--kh-gold, #6D28D9);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, .16);
}

/* ایمیل، شماره و گذرواژه همیشه لاتین‌اند؛ بدون این، مکان‌نما در فیلد
   راست‌به‌چپ سر خط می‌پرد و شماره وارونه دیده می‌شود. */
html body.kh-site .woocommerce form .form-row input[type="email"],
html body.kh-site .woocommerce form .form-row input[type="tel"],
html body.kh-site .woocommerce form .form-row input[type="password"] {
  direction: ltr;
  text-align: left;
}

/* ── دکمه‌ی نمایش گذرواژه ──
   ووکامرس یک <span> با آیکن روی فیلد می‌گذارد که بدون جای‌دهی، به شکل
   یک مستطیل کوچک زیر فیلد می‌افتاد — همان چیزی که در صفحه دیده می‌شد. */
html body.kh-site .woocommerce form .form-row .password-input {
  position: relative;
  display: block;
}
html body.kh-site .woocommerce form .show-password-input {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 12px;
  transform: translateY(-50%);
  inline-size: 22px;
  block-size: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--kh-muted, #5B6478);
}
html body.kh-site .woocommerce form .password-input input { padding-inline-end: 42px; }

/* ووکامرس این‌ها را به‌صورت <label class="…rememberme"><input><span>متن
   قالب می‌زند. قاعده‌ی عمومیِ `.form-row label{display:block}` بالاتر،
   برچسب را بلوکی می‌کرد و چک‌باکس بالای متن می‌افتاد — همان بی‌قوارگی
   که در صفحه دیده می‌شد. اینجا صریح به ردیف برمی‌گردد. */
html body.kh-site .woocommerce form .woocommerce-form-login__rememberme,
html body.kh-site .woocommerce form .woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin-block: 4px 16px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 2;
  color: var(--kh-muted, #5B6478);
  cursor: pointer;
}
html body.kh-site .woocommerce form .woocommerce-form-login__rememberme input,
html body.kh-site .woocommerce form .woocommerce-form__label-for-checkbox input {
  inline-size: auto;
  margin: 0;
  flex: none;
  accent-color: var(--kh-gold, #6D28D9);
}
/* متن داخل یک span بدون کلاس است؛ نباید کش بیاید یا بشکند. */
html body.kh-site .woocommerce form .woocommerce-form-login__rememberme span { min-inline-size: 0; }

html body.kh-site .woocommerce form button[type="submit"],
html body.kh-site .woocommerce form .woocommerce-form-login__submit,
html body.kh-site .woocommerce form .woocommerce-form-register__submit {
  inline-size: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.7;
  color: #fff;
  background: linear-gradient(140deg, var(--kh-gold, #6D28D9), var(--kh-gold-2, #5B21B6));
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(109, 40, 217, .28);
  transition: transform .18s ease, box-shadow .18s ease;
}
html body.kh-site .woocommerce form button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(109, 40, 217, .36);
}

html body.kh-site .woocommerce-LostPassword {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13.5px;
}
html body.kh-site .woocommerce-LostPassword a { color: var(--kh-gold, #6D28D9); }

html body.kh-site .woocommerce-privacy-policy-text p {
  font-size: 12.5px;
  line-height: 2;
  color: var(--kh-muted, #5B6478);
  margin-block: 0 14px;
}

/* ═══════════════ حساب کاربری (وارد شده) ═══════════════ */

html body.kh-site.woocommerce-account.logged-in .woocommerce {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
}

html body.kh-site.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

html body.kh-site .woocommerce-MyAccount-navigation {
  background: var(--kh-card, #fff);
  border: 1px solid var(--kh-line, #E3E9F0);
  border-radius: 16px;
  padding: 8px;
  position: sticky;
  top: 18px;
}

html body.kh-site .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body.kh-site .woocommerce-MyAccount-navigation li { margin: 0; }

html body.kh-site .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.9;
  color: var(--kh-muted, #5B6478);
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
html body.kh-site .woocommerce-MyAccount-navigation li a:hover {
  background: var(--kh-bg, #F4F6FA);
  color: var(--kh-ink, #0F172A);
}
html body.kh-site .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--kh-gold, #6D28D9);
  color: #fff;
}
html body.kh-site .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: #DC2626;
}

html body.kh-site .woocommerce-MyAccount-content {
  background: var(--kh-card, #fff);
  border: 1px solid var(--kh-line, #E3E9F0);
  border-radius: 16px;
  padding: clamp(18px, 2.6vw, 28px);
  min-inline-size: 0;   /* وگرنه جدول سفارش‌ها ستون را می‌کشد و صفحه افقی می‌شود */
}

html body.kh-site .woocommerce-MyAccount-content > *:first-child { margin-block-start: 0; }
html body.kh-site .woocommerce-MyAccount-content p { line-height: 2; }

html body.kh-site .woocommerce-MyAccount-content .woocommerce-table,
html body.kh-site .woocommerce-MyAccount-content table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
html body.kh-site .woocommerce-MyAccount-content table th,
html body.kh-site .woocommerce-MyAccount-content table td {
  padding: 12px 10px;
  border-block-end: 1px solid var(--kh-line, #E3E9F0);
  text-align: start;
}
html body.kh-site .woocommerce-MyAccount-content table th {
  font-size: 13px;
  font-weight: 700;
  color: var(--kh-muted, #5B6478);
}
/* عددها در ستون باید هم‌عرض باشند وگرنه ردیف‌ها می‌لرزند. */
html body.kh-site .woocommerce-MyAccount-content table td { font-variant-numeric: tabular-nums; }

html body.kh-site .woocommerce-EditAccountForm fieldset {
  margin-block-start: 22px;
  padding: 18px;
  border: 1px solid var(--kh-line, #E3E9F0);
  border-radius: 13px;
}
html body.kh-site .woocommerce-EditAccountForm legend {
  padding-inline: 8px;
  font-size: 14px;
  font-weight: 800;
}

/* ═══════════════ فرم دیدگاه ═══════════════ */

html body.kh-site .kh-commentform {
  margin-block-start: 26px;
  padding: clamp(18px, 2.6vw, 26px);
  background: var(--kh-card, #fff);
  border: 1px solid var(--kh-line, #E3E9F0);
  border-radius: 16px;
}

/* فرم پیش‌فرض دو ستونه می‌افتاد و متن دیدگاه نصف عرض می‌شد، در حالی که
   یادداشت بالای فرم خانه‌ی کناری‌اش را می‌گرفت. */
html body.kh-site .kh-commentform form.comment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
html body.kh-site .kh-commentform form.comment-form > * { grid-column: 1 / -1; }
/* انتخابگر فرزندی لازم است، نه نوادگی: قاعده‌ی بالا (0,3,3) است و یک
   انتخابگر نوادگیِ (0,3,2) بی‌صدا زیرش گم می‌شد — هر دو فیلد تمام‌عرض
   می‌ماندند. این‌ها (0,4,3) هستند. */
html body.kh-site .kh-commentform form.comment-form > .comment-form-author { grid-column: 1 / 2; }
html body.kh-site .kh-commentform form.comment-form > .comment-form-email  { grid-column: 2 / 3; }

html body.kh-site .kh-commentform .field { display: block; margin-block-end: 14px; }
html body.kh-site .kh-commentform .field label {
  display: block;
  margin-block-end: 6px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 2;
}
html body.kh-site .kh-commentform .inp {
  inline-size: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  line-height: 2;
  color: var(--kh-ink, #0F172A);
  background: var(--kh-bg, #F4F6FA);
  border: 1px solid var(--kh-line, #E3E9F0);
  border-radius: 11px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
html body.kh-site .kh-commentform textarea.inp { min-block-size: 140px; resize: vertical; }
html body.kh-site .kh-commentform .inp:focus {
  outline: none;
  background: var(--kh-card, #fff);
  border-color: var(--kh-gold, #6D28D9);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, .16);
}
html body.kh-site .kh-commentform .inp[type="email"] { direction: ltr; text-align: left; }

html body.kh-site .kh-commentform .req { color: #DC2626; }

html body.kh-site .kh-commentform .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-block-end: 14px;
  font-size: 13px;
  line-height: 2;
  color: var(--kh-muted, #5B6478);
}
html body.kh-site .kh-commentform .comment-form-cookies-consent input { flex: none; margin: 0; }

/* دکمه‌ی ارسال یک <input> است، پس شبه‌عنصرها روی آن رندر نمی‌شوند و
   قاعده‌ی عمومی .btn--cta رنگش را نمی‌داد — به نظر می‌رسید دکمه نیست. */
html body.kh-site .kh-commentform .form-submit { margin: 4px 0 0; }
html body.kh-site .kh-commentform input#submit,
html body.kh-site .kh-commentform .form-submit input[type="submit"] {
  inline-size: auto;
  min-inline-size: 190px;
  padding: 13px 26px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.7;
  color: #fff;
  background: linear-gradient(140deg, var(--kh-gold, #6D28D9), var(--kh-gold-2, #5B21B6));
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(109, 40, 217, .28);
  transition: transform .18s ease, box-shadow .18s ease;
}
html body.kh-site .kh-commentform input#submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(109, 40, 217, .36);
}

html body.kh-site .kh-commentlist { list-style: none; margin: 0 0 24px; padding: 0; }
html body.kh-site .kh-commentlist .comment-body {
  padding: 16px 18px;
  margin-block-end: 12px;
  background: var(--kh-card, #fff);
  border: 1px solid var(--kh-line, #E3E9F0);
  border-radius: 14px;
}
html body.kh-site .kh-commentlist .children { list-style: none; margin: 0; padding-inline-start: clamp(12px, 3vw, 32px); }
html body.kh-site .kh-commentlist .avatar { border-radius: 50%; vertical-align: middle; margin-inline-end: 9px; }
html body.kh-site .kh-commentlist .comment-meta { font-size: 13px; color: var(--kh-muted, #5B6478); line-height: 2; }
html body.kh-site .kh-commentlist p { line-height: 2; }

/* ═══════════════ موبایل ═══════════════ */

@media (max-width: 860px) {
  html body.kh-site.woocommerce-account.logged-in .woocommerce {
    grid-template-columns: minmax(0, 1fr);
  }

  /* منوی حساب در موبایل به نوار افقی اسکرول‌شونده تبدیل می‌شود؛ ستون
     ۲۶۰ پیکسلی روی صفحه‌ی باریک نصف ارتفاع را می‌خورد. */
  html body.kh-site .woocommerce-MyAccount-navigation {
    position: static;
    padding: 6px;
  }
  html body.kh-site .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  html body.kh-site .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  html body.kh-site .woocommerce-MyAccount-navigation li a { white-space: nowrap; }

  html body.kh-site .kh-commentform form.comment-form {
    grid-template-columns: minmax(0, 1fr);
  }
  html body.kh-site .kh-commentform form.comment-form > .comment-form-author,
  html body.kh-site .kh-commentform form.comment-form > .comment-form-email { grid-column: 1 / -1; }

  html body.kh-site .kh-commentform input#submit { inline-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html body.kh-site .woocommerce form button[type="submit"],
  html body.kh-site .kh-commentform input#submit { transition: none; }
  html body.kh-site .woocommerce form button[type="submit"]:hover,
  html body.kh-site .kh-commentform input#submit:hover { transform: none; }
}