/* ==========================================================================
   InvestShop theme — چسبِ صفحه های حساب کاربری
   --------------------------------------------------------------------------
   login.css همان فایلِ طرح است و دست نخورده می ماند. آنچه فروشگاه لازم دارد
   و در طرح استاتیک نبود، اینجا نوشته می شود و بعد از آن بار می شود:

     ۱. کد امنیتی (captcha) — سرور برای ثبت‌نام و ارسال کد لازمش دارد؛
     ۲. کلاس `has-error` — فرم های ساده از shop.js استفاده می کنند و آنجا
        خطای سرور با همین کلاس نشان داده می شود، در حالی که طرح
        `is-invalid` را می شناسد؛
     ۳. چند فاصله برای کارتی که نه زبانه دارد نه سوییچ روش.
   ========================================================================== */

/* ------------------------------------------------------------ ۱ · captcha */

.captcha-row {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm, 0.5rem);
}

.captcha-row .field__control {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.captcha-row .captcha-image {
  flex: none;
  block-size: var(--input-height, 2.75rem);
  inline-size: auto;
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--input-radius, 0.65rem);
  background: #fff;
}

.captcha-row .icon-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--input-height, 2.75rem);
  block-size: var(--input-height, 2.75rem);
  border: var(--border-thin) solid var(--input-border);
  border-radius: var(--input-radius, 0.65rem);
  background: var(--input-bg);
  color: var(--fg-muted);
  cursor: pointer;
  transition: var(--transition-colors);
}

.captcha-row .icon-btn:hover {
  border-color: var(--border-brand);
  color: var(--brand);
}

.captcha-row .icon-btn:focus-visible {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--ring);
}

/* --------------------------------------------------- ۲ · خطاهای سمت سرور */

/* shop.js فقط `has-error` را می شناسد و طرح فقط `is-invalid`؛ هر دو باید
   یک چیز را نشان بدهند، وگرنه متن خطا نوشته می شود و پنهان می ماند. */
.field.has-error .field__control {
  border-color: var(--danger, #d92d20);
}

.field.has-error .field__error,
.field.is-invalid .field__error {
  display: flex;
}

.field.has-error .field__ok {
  opacity: 0;
}

/* یک پیام خطای خالی نباید جای خودش را باز کند. */
.field__error:not(.is-shown) .field__error-text:empty {
  display: none;
}

/* ------------------------------------------------- ۳ · کارت های تک‌مرحله‌ای */

/* فراموشی رمز، تغییر شماره و مانند آن نه زبانه دارند نه سوییچ روش، پس فرم
   بی‌واسطه زیر عنوان می نشیند و به فاصله بالای پنل نیازی نیست. */
.auth-card > .auth-form {
  margin-block-start: var(--space-6);
}

.auth-card__foot .btn {
  inline-size: 100%;
}