@charset "UTF-8";
/* ==========================================================================
   صفحات الحساب (دخول / تسجيل / استعادة)
   ========================================================================== */

.auth {
  min-height: 72vh;
  display: grid;
  place-items: center;
  padding-block: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  position: relative;
}
.auth::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: -5%;
  width: 46vw;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(234, 188, 138, .22), transparent 62%);
  pointer-events: none;
}

.auth__card {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
}
.auth__card--wide { max-width: 620px; }

.auth__head { text-align: center; margin-block-end: var(--sp-6); }
.auth__mark { height: 58px; width: auto; margin: 0 auto var(--sp-4); }
.auth__icon {
  width: 58px; height: 58px;
  margin: 0 auto var(--sp-4);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sand);
  color: var(--brand);
}
.auth__icon svg { width: 26px; height: 26px; }
.auth__head h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-block-end: var(--sp-2); }
.auth__head p { color: var(--text-2); font-size: .92rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

.auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-block: var(--sp-2) var(--sp-5);
  font-size: .85rem;
}

.auth__alt {
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-5);
  border-top: 1px solid var(--line-2);
  text-align: center;
  font-size: .9rem;
  color: var(--text-2);
}
.auth__alt a { color: var(--brand); font-weight: 500; border-bottom: 1px solid transparent; }
.auth__alt a:hover { border-color: currentColor; }

.auth__note {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin-block-start: var(--sp-5);
  font-size: .8rem;
  color: var(--text-3);
}
.auth__note svg { width: 15px; height: 15px; }

/* ── إظهار كلمة المرور ────────────────────────────────────────────────── */

.password-wrap { position: relative; display: block; }
.password-wrap .input { padding-inline-end: 44px; }
.password-toggle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 8px;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text-3);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.password-toggle:hover { color: var(--brand); background: var(--sand); }
.password-toggle svg { width: 17px; height: 17px; }

/* ── مقياس قوة كلمة المرور ────────────────────────────────────────────── */

.strength { display: flex; align-items: center; gap: var(--sp-2); margin-block-start: .45rem; }
.strength__bar {
  flex: 1;
  height: 5px;
  background: var(--sand-2);
  border-radius: var(--r-full);
  overflow: hidden;
}
.strength__bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-full);
  transition: width .3s var(--ease), background-color .3s var(--ease);
}
.strength__label { font-size: .72rem; color: var(--text-3); min-width: 62px; }
.strength[data-level="1"] .strength__bar > span { width: 25%;  background: #C9503F; }
.strength[data-level="2"] .strength__bar > span { width: 50%;  background: #D9922F; }
.strength[data-level="3"] .strength__bar > span { width: 75%;  background: #7A9A5B; }
.strength[data-level="4"] .strength__bar > span { width: 100%; background: var(--sage); }