/* VegaWear Auth — بر اساس طرح HTML ارسالی، با متغیرهای CSS قابل تنظیم */

.vwa-root,
.vwa-root *,
.vwa-root *::before,
.vwa-root *::after { box-sizing: border-box; }

.vwa-root [hidden] { display: none !important; }

.vwa-root {
  font-family: var(--vwa-font, Vazirmatn, Tahoma, sans-serif);
  color: var(--vwa-text, #171717);
}

body.vwa-fullpage {
  margin: 0;
  min-height: 100%;
  background: var(--vwa-page-bg, #f8f8f7);
  color: var(--vwa-text, #171717);
  font-family: var(--vwa-font, Vazirmatn, Tahoma, sans-serif);
}

/* ---------- چیدمان اصلی ---------- */
.vwa-login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--vwa-visual-w, 42%) 1fr;
  direction: ltr;
  overflow: hidden;
  background: var(--vwa-page-bg, #f8f8f7);
}
.vwa-login-page.vwa-visual-right { direction: rtl; }
.vwa-login-page.vwa-no-visual { grid-template-columns: 1fr; }

/* وقتی داخل قالب (غیر تمام‌صفحه) قرار می‌گیرد، تمام عرض را بگیرد */
.vwa-login-page.vwa-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ---------- پنل تصویر ---------- */
.vwa-visual {
  position: relative;
  min-height: 100vh;
  background: var(--vwa-visual-bg, #171717) center center / cover no-repeat;
  direction: rtl;
}
.vwa-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,var(--vwa-overlay-top, .08)), rgba(0,0,0,var(--vwa-overlay-bottom, .18)));
  pointer-events: none;
}

/* ---------- بخش فرم ---------- */
.vwa-form-side {
  background: var(--vwa-form-bg, #fbfbfa);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 7vw;
}
.vwa-form-wrap {
  width: min(var(--vwa-form-width, 530px), 100%);
  text-align: center;
}

.vwa-logo {
  width: var(--vwa-logo-width, 180px);
  height: auto;
  margin: 0 auto 42px;
  display: block;
  object-fit: contain;
}
.vwa-logo-fallback {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -3px;
  margin-bottom: 40px;
  direction: ltr;
  color: var(--vwa-text, #171717);
}
.vwa-logo-fallback span {
  display: block;
  font-size: 19px;
  letter-spacing: 0;
  margin-top: -7px;
  font-weight: 700;
}

.vwa-root h1 {
  font-size: var(--vwa-title-size, 30px);
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--vwa-text, #171717);
  line-height: 1.5;
}
.vwa-subtitle {
  color: var(--vwa-muted, #999);
  font-size: 15px;
  line-height: 2;
  margin: 0 0 35px;
}

/* ---------- پیام‌ها ---------- */
.vwa-alert {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.9;
  text-align: start;
  border: 1px solid transparent;
}
.vwa-alert.is-error {
  color: var(--vwa-error, #b42318);
  background: rgba(180, 35, 24, .07);
  border-color: rgba(180, 35, 24, .25);
}
.vwa-alert.is-success {
  color: var(--vwa-success, #067647);
  background: rgba(6, 118, 71, .07);
  border-color: rgba(6, 118, 71, .25);
}

/* ---------- فیلدها ---------- */
.vwa-field {
  position: relative;
  margin-bottom: 18px;
}
.vwa-field input {
  width: 100%;
  height: var(--vwa-input-height, 62px);
  border: 1px solid var(--vwa-input-border, #dedede);
  border-radius: var(--vwa-input-radius, 11px);
  background: var(--vwa-input-bg, #fff);
  padding: 0;
  padding-inline-start: 55px;
  padding-inline-end: 52px;
  outline: none;
  font: inherit;
  font-size: 15px;
  color: #222;
  transition: .2s;
  box-shadow: none;
  margin: 0;
}
.vwa-field input:focus {
  border-color: var(--vwa-accent, #c9a34c);
  box-shadow: 0 0 0 3px rgba(201, 163, 76, .10);
}
.vwa-field label {
  position: absolute;
  inset-inline-start: 55px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  pointer-events: none;
  transition: .2s;
  font-size: 15px;
  margin: 0;
  line-height: 1.4;
}
.vwa-field input:focus + label,
.vwa-field input:not(:placeholder-shown) + label {
  top: 0;
  inset-inline-start: 48px;
  padding: 0 7px;
  background: var(--vwa-input-bg, #fff);
  font-size: 11px;
  color: var(--vwa-accent-text, #b48b32);
}
.vwa-icon {
  position: absolute;
  inset-inline-start: 19px;
  top: 50%;
  transform: translateY(-50%);
  color: #777;
  display: flex;
  align-items: center;
  line-height: 0;
  pointer-events: none;
}
.vwa-password-toggle {
  position: absolute;
  inset-inline-end: 19px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: #777;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  box-shadow: none;
}
.vwa-password-toggle:hover { color: var(--vwa-accent-text, #b48b32); background: none; }

/* ---------- گزینه‌ها ---------- */
.vwa-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0 24px;
  font-size: 13px;
}
.vwa-remember {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #777;
  cursor: pointer;
}
.vwa-remember input {
  accent-color: #b9923c;
  width: 17px;
  height: 17px;
  margin: 0;
}
.vwa-forgot {
  color: var(--vwa-accent-text, #b48b32);
  text-decoration: none;
}

/* ---------- دکمه‌ها ---------- */
.vwa-submit {
  width: 100%;
  height: var(--vwa-input-height, 62px);
  border: 0;
  border-radius: var(--vwa-button-radius, 10px);
  background: var(--vwa-accent, #c8a04a);
  color: #fff;
  font: 600 16px var(--vwa-font, Vazirmatn, Tahoma, sans-serif);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(174, 132, 47, .16);
  transition: .2s;
  display: block;
  text-align: center;
}
.vwa-submit:hover {
  background: var(--vwa-accent-hover, #b78d37);
  transform: translateY(-1px);
  color: #fff;
}
.vwa-submit:disabled,
.vwa-submit.is-loading { opacity: .65; cursor: progress; transform: none; }

.vwa-btn-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vwa-alt {
  width: 100%;
  height: 50px;
  margin-top: 12px;
  border: 1px solid var(--vwa-input-border, #dedede);
  border-radius: var(--vwa-button-radius, 10px);
  background: transparent;
  color: var(--vwa-accent-text, #b48b32);
  font: 500 14px var(--vwa-font, Vazirmatn, Tahoma, sans-serif);
  cursor: pointer;
  transition: .2s;
  display: block;
}
.vwa-alt:hover:not(:disabled) { background: rgba(201, 163, 76, .08); color: var(--vwa-accent-text, #b48b32); }
.vwa-alt:disabled { color: #aaa; cursor: default; }

.vwa-divider {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #aaa;
  margin: 31px 0;
  font-size: 13px;
}
.vwa-divider::before,
.vwa-divider::after {
  content: "";
  height: 1px;
  background: var(--vwa-input-border, #dedede);
  flex: 1;
}

.vwa-google {
  width: 100%;
  height: 57px;
  border: 1px solid #d7d7d7;
  border-radius: var(--vwa-button-radius, 10px);
  background: #fff;
  color: #555;
  font: 500 14px var(--vwa-font, Vazirmatn, Tahoma, sans-serif);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.vwa-google:hover { color: #555; background: #fafafa; }
.vwa-google b {
  font-family: Arial, sans-serif;
  font-size: 19px;
  margin-inline-end: 9px;
  color: #333;
}

.vwa-register {
  margin-top: 30px;
  color: #888;
  font-size: 14px;
}
.vwa-register a {
  color: var(--vwa-accent-text, #b48b32);
  text-decoration: none;
  font-weight: 600;
  margin-inline-start: 5px;
}

/* ---------- لینک ورود/خروج ---------- */
.vwa-auth-link { text-decoration: none; }

/* ---------- دکمه ورود/خروج (ویجت المنتور) ---------- */
.vwa-auth-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vwa-auth-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px; border-radius: 10px; border: 1px solid transparent;
  background: var(--vwa-accent, #c8a04a); color: #fff;
  font: 600 14px var(--vwa-font, Vazirmatn, Tahoma, sans-serif);
  text-decoration: none; transition: .2s; cursor: pointer; line-height: 1.4;
}
.vwa-auth-btn:hover { background: var(--vwa-accent-hover, #b78d37); color: #fff; }
.vwa-auth-btn.vwa-btn-out {
  background: transparent; color: var(--vwa-accent-text, #b48b32);
  border-color: var(--vwa-input-border, #dedede);
}
.vwa-auth-btn.vwa-btn-out:hover { background: rgba(201, 163, 76, .08); color: var(--vwa-accent-text, #b48b32); }

/* ---------- حساب کاربری ---------- */
.vwa-account {
  max-width: 760px;
  margin: 30px auto;
  padding: 0 16px;
}
.vwa-card {
  background: var(--vwa-form-bg, #fbfbfa);
  border: 1px solid var(--vwa-input-border, #dedede);
  border-radius: 18px;
  padding: 30px;
}
.vwa-card h2 { margin: 0 0 4px; font-size: 22px; color: var(--vwa-text, #171717); }
.vwa-card h3 { margin: 28px 0 16px; font-size: 17px; color: var(--vwa-text, #171717); }
.vwa-card p { margin: 0; color: var(--vwa-muted, #999); font-size: 14px; }
.vwa-card-guest { text-align: center; }
.vwa-card-guest .vwa-submit { margin: 22px auto 0; max-width: 260px; }
.vwa-acc-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vwa-acc-hello { flex: 1; min-width: 160px; }
.vwa-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--vwa-accent, #c8a04a); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
}
.vwa-acc-logout { width: auto; margin: 0; padding: 0 22px; height: 44px; }
.vwa-acc-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.vwa-acc-nav a {
  padding: 9px 16px; border: 1px solid var(--vwa-input-border, #dedede);
  border-radius: 999px; font-size: 13px; text-decoration: none;
  color: var(--vwa-text, #171717); transition: .2s;
}
.vwa-acc-nav a:hover { border-color: var(--vwa-accent, #c8a04a); color: var(--vwa-accent-text, #b48b32); }
.vwa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.vwa-profile-form .vwa-alert { margin-bottom: 16px; }

/* ---------- موبایل ---------- */
@media (max-width: 900px) {
  .vwa-login-page { grid-template-columns: 1fr; }
  .vwa-visual {
    min-height: 260px;
    max-height: 300px;
    background-position: center 55%;
  }
  .vwa-form-side { padding: 45px 25px; }
  .vwa-form-wrap { max-width: 520px; }
  .vwa-logo { margin-bottom: 30px; }
}

@media (max-width: 520px) {
  .vwa-visual { display: none; }
  .vwa-form-side { min-height: 100vh; padding: 35px 20px; }
  .vwa-root h1 { font-size: 25px; }
  .vwa-subtitle { font-size: 13px; margin-bottom: 28px; }
  .vwa-field input,
  .vwa-submit { height: 57px; }
  .vwa-grid { grid-template-columns: 1fr; }
  .vwa-card { padding: 22px 18px; }
}