/* ==========================================================
   ریدیزاین باکس ورود/ثبت‌نام وردمارت + ووکامرس
   فقط CSS — روی همون مارک‌آپ اصلی وردمارت اجرا میشه
   محل قرارگیری: Theme Settings > Custom CSS  یا  style.css چایلدتم
   ========================================================== */

:root{
  --auth-accent:#FF5A1F;
  --auth-accent-dark:#E8480F;
  --auth-accent-soft:#FFF0E8;
  --auth-ink:#161616;
  --auth-ink-soft:#6B6B70;
  --auth-line:#EAEAEC;
  --auth-bg:#F5F5F7;
  --auth-radius:16px;
}

/* ===== کادر اصلی ===== */
.login-form-side.woocommerce{
  background:#fff;
  border-radius:0 var(--auth-radius) var(--auth-radius) 0 !important; /* اگه درور از سمت راست باز میشه این رو برعکس کن: var(--auth-radius) 0 0 var(--auth-radius) */
  padding:0;
  box-shadow:0 24px 60px -20px rgba(22,22,22,.18);
  display:flex !important;
  flex-direction:column;
}

/* پرکردن فضای خالی پایین درور با یه گرادینت ظریف به‌جای سفید خالی */
.login-form-side.woocommerce::after{
  content:"";
  flex:1 1 auto;
  background:linear-gradient(180deg,#fff, var(--auth-bg) 260%);
}

/* ===== هدر ===== */
.login-form-side .wd-heading{
  padding:24px 26px 18px;
  border-bottom:1px solid var(--auth-line);
  margin-bottom:0;
}
.login-form-side .wd-heading .title{
  font-size:19px;
  font-weight:800;
  color:var(--auth-ink);
}
.login-form-side .close-side-widget a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  border-radius:50%;
  color:var(--auth-ink-soft);
  transition:.2s;
}
.login-form-side .close-side-widget a:hover{
  color:var(--auth-ink);
}

/* ===== فرم ===== */
.login-form-side .woocommerce-form-login{
  padding:24px 26px 6px !important;
  box-sizing:border-box;
  flex:0 0 auto;
}

.login-form-side .form-row{
  padding:0 !important;
  margin:0 0 14px !important;
}

.login-form-side .form-row label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--auth-ink);
  margin-bottom:7px;
}
.login-form-side .form-row label .required{
  color:var(--auth-accent);
}

.login-form-side .input-text{
  width:100% !important;
  box-sizing:border-box !important;
  background:var(--auth-bg) !important;
  border:1.5px solid transparent !important;
  border-radius:10px !important;
  padding:13px 16px !important;
  font-size:14px;
  color:var(--auth-ink);
  transition:.2s;
}
.login-form-side .input-text:focus{
  background:#fff !important;
  border-color:var(--auth-accent) !important;
  box-shadow:0 0 0 4px var(--auth-accent-soft) !important;
  outline:none;
}

/* ===== چشم نمایش رمز عبور ===== */
.login-form-side .password-input{
  position:relative;
  display:block;
}
.login-form-side .password-input .input-text{
  padding-left:44px !important;
  padding-right:16px !important;
}
.login-form-side .show-password-input{
  position:absolute;
  left:12px !important;
  right:auto !important;
  top:50%;
  transform:translateY(-50%);
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  color:#B7B7BE;
  opacity:1;
}
.login-form-side .show-password-input:hover{
  color:var(--auth-accent);
}

.login-form-side .show-password-input,
.login-form-side .show-password-input:before,
.login-form-side .show-password-input:after{
  background-color:transparent !important;
}

/* ===== ردیف فراموشی رمز + مرا به خاطر بسپار =====
   این ردیف تو مارک‌آپ اصلی ووکامرس داخل .login-form-footer
   قرار داره (بیرون از فرم، بعد از فرم). چون تم وردمارت این
   عنصر رو با استایل‌های !important خودش block می‌کنه،
   همه‌چیز رو با !important دوباره override می‌کنیم. */
.login-form-side .login-form-footer{
  direction:rtl !important;
  display:flex !important;
  flex-direction:row !important;   /* به‌جای row-reverse */
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin:2px 0 22px !important;
  padding:0 26px !important;
  box-sizing:border-box;
}

.login-form-side .login-form-footer > * {
  margin:0 !important;
}

.login-form-side .woocommerce-form-login__rememberme,
.login-form-side .woocommerce-form-login__rememberme label{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  font-size:12.5px !important;
  color:var(--auth-ink-soft) !important;
  cursor:pointer;
}
.login-form-side .woocommerce-form-login__rememberme input{
  width:16px !important;
  height:16px !important;
  accent-color:var(--auth-accent);
  margin:0 !important;
}
.login-form-side .lost_password{
  font-size:12.5px !important;
  font-weight:600 !important;
  color:var(--auth-accent-dark) !important;
  text-decoration:none !important;
  text-align:left !important;
  white-space:nowrap;
}
.login-form-side .lost_password:hover{
  text-decoration:underline !important;
}

/* ===== دکمه ورود =====
   نکته مهم: تم وردمارت استایل دکمه رو معمولاً با !important
   ست می‌کنه (رنگ، رادیوس، عرض). برای همین باید هر پراپرتی
   حیاتی رو با !important بازنویسی کنیم وگرنه استایل ما اصلاً
   اعمال نمیشه (همون چیزی که تو اسکرین‌شاتت افتاده بود:
   دکمه چسبیده به لبه‌ها و بدون گردی). */
.login-form-side button.woocommerce-form-login__submit,
.login-form-side .login .button[name="login"]{
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
  margin:0 !important;
  border:none !important;
  border-radius:10px !important;
  background:linear-gradient(135deg,var(--auth-accent),var(--auth-accent-dark)) !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:700 !important;
  padding:14px 0 !important;
  cursor:pointer;
  box-shadow:0 12px 24px -10px rgba(255,90,31,.55) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.login-form-side button.woocommerce-form-login__submit:hover,
.login-form-side .login .button[name="login"]:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 28px -10px rgba(255,90,31,.65) !important;
}

/* چون دکمه داخل .form-row با پدینگ 0 هست (بالاتر ریست کردیم)،
   خودِ form-row یی که دکمه توشه رو یه پدینگ پایین میدیم */
.login-form-side .form-row:last-of-type{
  margin-bottom:22px !important;
}

/* ===== بخش «هنوز حساب کاربری ندارید؟» ===== */
.login-form-side .create-account-question{
  text-align:center;
  padding:20px 26px 26px;
  border-top:1px solid var(--auth-line);
  margin-top:6px;
}
.login-form-side .create-account-question p{
  margin:0 0 12px;
  font-size:13px;
  color:var(--auth-ink-soft);
}
.login-form-side .create-account-button{
  display:inline-block;
  width:100%;
  box-sizing:border-box;
  text-align:center;
  padding:13px 0;
  border-radius:10px;
  border:1.5px solid var(--auth-accent) !important;
  background:var(--auth-accent-soft) !important;
  color:var(--auth-accent-dark) !important;
  font-weight:700;
  font-size:14.5px;
  text-decoration:none;
  transition:.2s;
}
.login-form-side .create-account-button:hover{
  background:var(--auth-accent) !important;
  color:#fff !important;
  border-color:var(--auth-accent) !important;
}

/* ===== نوتیس‌های خطا/موفقیت ووکامرس ===== */
.login-form-side .woocommerce-notices-wrapper .woocommerce-error,
.login-form-side .woocommerce-notices-wrapper .woocommerce-message{
  border-radius:10px;
  margin:0 26px 16px;
  font-size:13px;
}