/*
 * نستلي — تصميم صفحات الدخول/التسجيل/الاستعادة (OTP).
 */

.nestly-auth-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 16px 40px;
}

.nestly-auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--White);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(24, 24, 24, 0.07);
  padding: 36px 34px;
}

/* ---------- الرأس ---------- */
.auth-head {
  text-align: center;
  margin-bottom: 24px;
}

.auth-logo img {
  max-height: 46px;
  width: auto;
  margin-bottom: 16px;
}

.auth-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.auth-sub {
  color: var(--Secondary);
  font-size: 14px;
  line-height: 1.8;
}

/* ---------- التابات ---------- */
.auth-tabs {
  display: flex;
  background: var(--Surface);
  border-radius: 99px;
  padding: 5px;
  margin-bottom: 26px;
  gap: 4px;
}

.auth-tab {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 99px;
  padding: 11px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--Secondary);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.auth-tab.active {
  background: var(--main);
  color: var(--White);
  box-shadow: 0 6px 14px rgba(40, 43, 87, 0.25);
}

/* ---------- البانلات والخطوات ---------- */
.auth-panel,
.auth-step {
  display: none;
}

.auth-panel.active,
.auth-step.active {
  display: block;
  animation: nestly-auth-in 0.3s ease;
}

@keyframes nestly-auth-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- الحقول ---------- */
.auth-field {
  margin-bottom: 16px;
}

.auth-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--Onsurface);
  margin-bottom: 7px;
}

.auth-input {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input > .icon {
  position: absolute;
  inset-inline-start: 16px;
  font-size: 17px;
  color: var(--Secondary2);
  pointer-events: none;
}

.auth-input input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 46px;
  font-size: 14px;
  background: var(--White);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.auth-input input:focus {
  border-color: var(--main);
  box-shadow: 0 0 0 3px rgba(40, 43, 87, 0.08);
}

.pass-toggle {
  position: absolute;
  inset-inline-end: 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--Secondary2);
  font-size: 17px;
  padding: 6px;
  line-height: 1;
}

.pass-toggle:hover {
  color: var(--main);
}

/* ---------- صف تذكرني/نسيت ---------- */
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 18px;
}

.auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--Secondary);
  cursor: pointer;
}

.auth-remember input {
  accent-color: var(--main);
  width: 16px;
  height: 16px;
}

.auth-forgot {
  font-size: 13px;
  font-weight: 600;
  color: var(--main);
}

.auth-forgot:hover {
  text-decoration: underline;
  color: var(--main);
}

/* ---------- الأزرار ---------- */
.auth-submit {
  width: 100%;
  justify-content: center;
  background: var(--main);
  color: var(--White);
  border-radius: 99px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  border: 0;
  transition: background-color 0.25s ease, opacity 0.25s ease;
}

.auth-submit:hover {
  background: var(--Onsurface);
  color: var(--White);
}

.auth-submit.loading {
  opacity: 0.65;
  pointer-events: none;
}

.auth-alt {
  width: 100%;
  justify-content: center;
  gap: 10px;
  background: var(--White);
  color: var(--main);
  border: 1.5px solid var(--main);
  border-radius: 99px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.auth-alt:hover {
  background: var(--main);
  color: var(--White);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  color: var(--Secondary2);
  font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-back {
  display: block;
  width: 100%;
  text-align: center;
  background: transparent;
  border: 0;
  color: var(--Secondary);
  font-size: 13px;
  margin-top: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.auth-back:hover {
  color: var(--main);
}

.auth-terms {
  font-size: 12px;
  color: var(--Secondary2);
  text-align: center;
  margin-top: 14px;
  line-height: 1.9;
}

.auth-terms a {
  color: var(--main);
  font-weight: 600;
}

/* ---------- خانات OTP ---------- */
.otp-block {
  text-align: center;
  margin-bottom: 18px;
}

.otp-hint {
  font-size: 13px;
  color: var(--Secondary);
  margin-bottom: 16px;
  line-height: 1.9;
}

.otp-hint b {
  color: var(--Onsurface);
}

.otp-inputs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.otp-digit {
  width: 52px;
  height: 58px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--main);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--Surface);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.otp-digit:focus {
  border-color: var(--main);
  background: var(--White);
  box-shadow: 0 0 0 3px rgba(40, 43, 87, 0.1);
  outline: 0;
}

.otp-expiry {
  font-size: 12px;
  color: var(--Secondary2);
  margin: 0;
}

/* ---------- إعادة الإرسال ---------- */
.auth-resend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
}

.resend-btn {
  border: 0;
  background: transparent;
  color: var(--main);
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}

.resend-btn:disabled {
  color: var(--Secondary2);
  cursor: not-allowed;
}

.resend-timer {
  background: var(--Surface);
  border-radius: 99px;
  min-width: 34px;
  text-align: center;
  padding: 3px 8px;
  font-size: 12px;
  color: var(--Secondary);
}

/* ---------- شريط الخطوات (الاستعادة) ---------- */
.auth-steps-bar {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 26px;
}

.auth-steps-bar .bar-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--Secondary2);
  position: relative;
}

.auth-steps-bar .bar-step i {
  font-style: normal;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--Surface);
  border: 1.5px solid var(--line);
  font-weight: 700;
  font-size: 13px;
  transition: all 0.25s ease;
}

.auth-steps-bar .bar-step.active {
  color: var(--main);
  font-weight: 600;
}

.auth-steps-bar .bar-step.active i {
  background: var(--main);
  border-color: var(--main);
  color: var(--White);
}

/* ---------- رسالة الحالة ---------- */
.nestly-auth-card .nestly-form-msg {
  margin-top: 18px;
  text-align: center;
}

/* ---------- أيقونتا lock / mail (مش موجودين في خط icomoon) ---------- */
.icon-lock,
.icon-mail {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  font-family: inherit !important;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-lock {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 1 1 6 0v3H9zm3 4a2 2 0 0 1 1 3.73V19a1 1 0 1 1-2 0v-1.27A2 2 0 0 1 12 14z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 1 1 6 0v3H9zm3 4a2 2 0 0 1 1 3.73V19a1 1 0 1 1-2 0v-1.27A2 2 0 0 1 12 14z'/%3E%3C/svg%3E");
}

.icon-mail {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm-.4 2L12 11.25 4.4 6h15.2zM4 18V7.85l7.47 5.16a1 1 0 0 0 1.06 0L20 7.85V18H4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm-.4 2L12 11.25 4.4 6h15.2zM4 18V7.85l7.47 5.16a1 1 0 0 0 1.06 0L20 7.85V18H4z'/%3E%3C/svg%3E");
}

/* ---------- موبايل ---------- */
@media (max-width: 575px) {
  .nestly-auth-card {
    padding: 28px 20px;
    border-radius: 16px;
  }

  .otp-digit {
    width: 44px;
    height: 52px;
    font-size: 20px;
  }

  .auth-steps-bar {
    gap: 18px;
  }
}