/* ============================================================
   Dermosa — استایل فرم ورود و عضویت OTP
   پیشوند کلاس‌ها: dermosa-  | RTL | رنگ اصلی #6A1510
   ============================================================ */

.dermosa-auth-wrapper {
  /* تمام‌صفحه، بک‌گراند سفید — با dvh برای سازگاری با نوار سافاری آیفون */
  /* فونت از قالب فعال وردپرس به ارث می‌رسد؛ هیچ فونت اختصاصی افزونه‌ای بارگذاری نمی‌شود. */
  font-family: inherit;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  direction: rtl;
  text-align: right;
  box-sizing: border-box;
  padding: 24px 20px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 24px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  z-index: 999990;
  overflow: hidden;
}

.dermosa-auth-wrapper *,
.dermosa-auth-wrapper *::before,
.dermosa-auth-wrapper *::after { box-sizing: border-box; }

/* حذف کامل خط‌چین فوکوس مرورگر (فوکوس با border رنگی نشان داده می‌شود) */
.dermosa-auth-wrapper input,
.dermosa-auth-wrapper button,
.dermosa-auth-wrapper textarea,
.dermosa-auth-wrapper select,
.dermosa-auth-wrapper a,
.dermosa-auth-wrapper [tabindex] {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.dermosa-auth-wrapper input:focus,
.dermosa-auth-wrapper input:focus-visible,
.dermosa-auth-wrapper button:focus,
.dermosa-auth-wrapper button:focus-visible,
.dermosa-auth-wrapper a:focus,
.dermosa-auth-wrapper a:focus-visible { outline: none !important; box-shadow: none; }
/* بازگرداندن سایه فوکوس فقط برای فیلدهای متنی (نه خط‌چین) */
.dermosa-auth-wrapper .dermosa-input:focus { box-shadow: 0 0 0 3px rgba(106,21,16,.10); }

/* اندازه متن فیلدها هماهنگ با رابط فشرده‌تر Dermosa است. */
.dermosa-auth-wrapper input,
.dermosa-auth-wrapper textarea,
.dermosa-auth-wrapper select {
  font-family: inherit;
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* دکمه‌ها نیز فونت قالب فعال را به ارث می‌برند. */
.dermosa-auth-wrapper button { font-family: inherit; }
.dermosa-auth-wrapper input { -webkit-appearance: none; appearance: none; }

.dermosa-auth-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-height: 100%;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  font-weight: 400;
  color: #1E293B;
}
.dermosa-auth-card::-webkit-scrollbar { display: none; }

/* ===== سربرگ ===== */
.dermosa-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  text-align: right; margin-bottom: 22px;
}
.dermosa-title { font-size: 19px; font-weight: 700; margin: 0; color: #0F172A; white-space: nowrap; }
.dermosa-subtitle { font-size: 10.5px; font-weight: 400; margin: 0; color: #94A3B8; text-align: left; }
/* دکمه بازگشت در هدر (مراحل ۳ و ۴) */
.dermosa-head-back {
  background: none; border: 0; cursor: pointer; padding: 4px 0;
  font: inherit; font-size: 10.5px; font-weight: 500; color: #6A1510;
  white-space: nowrap;
}
.dermosa-head-back:hover { color: #4E0F0B; text-decoration: underline; }
.dermosa-head-back[hidden] { display: none; }

/* ===== نوار پیشرفت (زیر دکمه‌ها) ===== */
.dermosa-progress { display: flex; justify-content: center; gap: 8px; margin: 24px 0 4px; }
.dermosa-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #CBD5E1; transition: all .3s ease;
}
.dermosa-dot.is-active { background: #6A1510; width: 22px; border-radius: 999px; }
.dermosa-dot.is-done { background: #6A1510; }

/* ===== پیام‌ها ===== */
.dermosa-alert {
  font-size: 11px; font-weight: 500;
  padding: 11px 14px; border-radius: 12px; margin-bottom: 14px;
  line-height: 1.6;
}
.dermosa-alert.is-error   { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.dermosa-alert.is-success { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.dermosa-alert.is-info    { background: #ECFEFF; color: #0E7490; border: 1px solid #A5F3FC; }
.dermosa-alert.is-test-code,
.dermosa-alert.is-welcome { background: #FBECE5; color: #6A1510; border: 1px solid #EFCFC3; }

/* ===== مراحل ===== */
.dermosa-step { display: none; animation: dermosa-fade .3s ease; }
.dermosa-step.is-active { display: block; }
@keyframes dermosa-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===== فیلدها ===== */
.dermosa-field { margin-bottom: 14px; }
.dermosa-label { display: block; font-size: 11px; font-weight: 500; margin-bottom: 7px; color: #334155; }

.dermosa-input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  padding: 13px 14px;
  border: 1.5px solid #E2E8F0;
  border-radius: 13px;
  background: #F8FAFC;
  color: #0F172A;
  transition: border-color .2s, background .2s, box-shadow .2s;
  text-align: right;
  direction: rtl;
}
.dermosa-input::placeholder { color: #94A3B8; font-weight: 400; }
.dermosa-input:focus {
  outline: none;
  border-color: #6A1510;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(106,21,16,.10);
}

/* ===== باکس شماره موبایل ===== */
.dermosa-phone-box {
  display: flex; align-items: center;
  border: 1.5px solid #E2E8F0;
  border-radius: 13px;
  background: #F8FAFC;
  overflow: hidden;
  transition: border-color .2s, background .2s, box-shadow .2s;
  direction: rtl;
}
.dermosa-phone-box:focus-within {
  border-color: #6A1510; background: #fff;
  box-shadow: 0 0 0 3px rgba(106,21,16,.10);
}
.dermosa-flag {
  width: 22px; height: 22px; border-radius: 50%;
  margin-inline-start: 12px; flex: none; object-fit: cover;
}
.dermosa-cc {
  font-size: 12px; font-weight: 600; color: #475569;
  padding-inline-end: 10px; margin-inline-end: 8px;
  border-inline-end: 1.5px solid #E2E8F0;
  direction: ltr;
}
.dermosa-phone-input {
  flex: 1; border: 0; background: transparent;
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 13px 8px 13px 14px;
  color: #0F172A;
  direction: ltr; text-align: left;
}
.dermosa-phone-input:focus { outline: none; }
/* placeholder فارسی: کوچک‌تر، راست‌چین و بدون فاصله حروف */
.dermosa-phone-input::placeholder {
  color: #94A3B8; font-weight: 400; font-size: 9px;
  letter-spacing: 0; direction: rtl; text-align: right;
}

/* ===== دکمه‌ها ===== */
.dermosa-btn {
  width: 100%;
  font: inherit; font-size: 13px; font-weight: 600;
  color: #fff; background: #6A1510;
  border: 0; border-radius: 13px;
  padding: 14px; cursor: pointer;
  transition: background .2s, transform .1s, opacity .2s;
  margin-top: 4px;
}
.dermosa-btn:hover:not(:disabled) { background: #4E0F0B; }
.dermosa-btn:active:not(:disabled) { transform: scale(.985); }
.dermosa-btn:disabled { background: #CBD5E1; color: #fff; cursor: not-allowed; }
.dermosa-btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.dermosa-btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: dermosa-spin .7s linear infinite;
}
@keyframes dermosa-spin { to { transform: rotate(360deg); } }

.dermosa-btn-sm { width: auto; padding: 9px 16px; font-size: 11px; border-radius: 11px; }
.dermosa-btn-ghost { background: #fff; color: #6A1510; border: 1.5px solid #6A1510; }
.dermosa-btn-ghost:hover:not(:disabled) { background: #F9ECEB; }
.dermosa-btn-danger { background: #fff; color: #DC2626; border: 1.5px solid #FCA5A5; }
.dermosa-btn-danger:hover:not(:disabled) { background: #FEF2F2; }

/* ===== لینک‌های متنی ===== */
.dermosa-link {
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 500;
  color: #6A1510; padding: 4px 0;
  display: inline-flex; align-items: center; gap: 4px;
}
.dermosa-link:hover { color: #4E0F0B; text-decoration: underline; }
.dermosa-link:disabled { color: #94A3B8; cursor: not-allowed; text-decoration: none; }
.dermosa-back { color: #64748B; }

/* ردیف پایین کد: ارسال مجدد+تایمر (راست) — تغییر شماره (چپ) */
.dermosa-code-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 16px;
}

/* ===== کد OTP ===== */
.dermosa-code-hint { font-size: 11px; color: #64748B; text-align: center; margin: 0 0 16px; line-height: 1.7; }
.dermosa-code-hint bdi { font-weight: 700; color: #0F172A; direction: ltr; }
.dermosa-otp { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; }
.dermosa-otp input {
  width: 52px; height: 58px;
  font: inherit; font-size: 22px; font-weight: 700;
  text-align: center;
  border: 1.5px solid #E2E8F0;
  border-radius: 13px;
  background: #F8FAFC;
  color: #0F172A;
  transition: all .15s ease;
  direction: ltr;
}
.dermosa-otp input:focus {
  outline: none; border-color: #6A1510; background: #fff;
  box-shadow: 0 0 0 3px rgba(106,21,16,.10);
}
.dermosa-otp input.is-filled { border-color: #6A1510; background: #F9ECEB; color: #6A1510; }

/* ===== ارسال مجدد + تایمر (کنار هم، فاصله کم) ===== */
.dermosa-resend-row {
  display: flex; align-items: center;
  gap: 4px;
}
.dermosa-resend-sep { color: #94A3B8; font-weight: 600; font-size: 11px; }
.dermosa-timer {
  font-size: 11px; font-weight: 600; color: #64748B;
  direction: ltr; min-width: 42px; text-align: left;
}

/* ===== قدرت رمز ===== */
.dermosa-pass-box { position: relative; }
.dermosa-pass-box .dermosa-input { padding-inline-start: 44px; }
.dermosa-eye {
  position: absolute; inset-inline-start: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; color: #94A3B8;
  padding: 6px; display: flex; align-items: center;
}
.dermosa-eye:hover { color: #6A1510; }
.dermosa-strength { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.dermosa-strength-bar { flex: 1; height: 6px; background: #E2E8F0; border-radius: 999px; overflow: hidden; }
.dermosa-strength-bar span {
  display: block; height: 100%; width: 0;
  border-radius: 999px; transition: width .3s ease, background .3s ease;
}
.dermosa-strength-label { font-size: 9.5px; font-weight: 600; min-width: 56px; text-align: left; }
.dermosa-strength.s-weak   #dermosa-strength-fill { width: 33%; background: #EF4444; }
.dermosa-strength.s-medium #dermosa-strength-fill { width: 66%; background: #F59E0B; }
.dermosa-strength.s-strong #dermosa-strength-fill { width: 100%; background: #10B981; }
.dermosa-strength.s-weak   .dermosa-strength-label { color: #EF4444; }
.dermosa-strength.s-medium .dermosa-strength-label { color: #F59E0B; }
.dermosa-strength.s-strong .dermosa-strength-label { color: #10B981; }

/* ===== تصویر پروفایل ===== */
.dermosa-avatar-area {
  display: flex; align-items: center; gap: 16px;
  padding: 14px; background: #F8FAFC; border-radius: 16px; margin-bottom: 16px;
}
.dermosa-avatar-preview {
  width: 78px; height: 78px; border-radius: 50%; flex: none;
  background: #FFF2EB; color: #6A1510;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(106,21,16,.12);
}
.dermosa-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.dermosa-avatar-actions { display: flex; flex-direction: row; gap: 8px; flex-wrap: wrap; }
.dermosa-or { text-align: center; font-size: 10.5px; color: #94A3B8; margin: 0 0 12px; }
.dermosa-presets { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; }
.dermosa-preset {
  background: #F8FAFC; border: 2px solid #E2E8F0; border-radius: 16px;
  padding: 6px; cursor: pointer; transition: all .15s ease; line-height: 0;
}
.dermosa-preset img { width: 54px; height: 54px; border-radius: 12px; }
.dermosa-preset:hover { border-color: #B0635E; }
.dermosa-preset.is-selected { border-color: #6A1510; background: #F9ECEB; box-shadow: 0 0 0 3px rgba(106,21,16,.10); }
.dermosa-profile-buttons { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.dermosa-profile-buttons .dermosa-btn { margin-top: 0; }

/* ===== فوتر (زیر باکس شماره، قبل از دکمه) ===== */
.dermosa-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin: 14px 0 20px; gap: 10px;
}
.dermosa-foot-left { color: #64748B; }

/* ===== حالت ورود قبلی ===== */
.dermosa-already { text-align: center; padding: 30px 10px; }
.dermosa-already-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: #ECFDF5; color: #10B981; font-size: 28px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.dermosa-already p { font-size: 13px; margin: 0 0 18px; color: #334155; }

/* ===== مودال راهنما ===== */
.dermosa-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dermosa-modal[hidden] { display: none; }
.dermosa-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: dermosa-fade .25s ease;
}
.dermosa-modal-box {
  position: relative; background: #fff; border-radius: 20px;
  max-width: 380px; width: 100%; padding: 24px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: dermosa-pop .3s cubic-bezier(.2,.9,.3,1.2);
  direction: rtl; text-align: right;
}
@keyframes dermosa-pop { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: none; } }
.dermosa-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.dermosa-modal-close {
  flex: none;
  background: #F1F5F9; border: 0; width: 32px; height: 32px; border-radius: 50%;
  font-size: 18px; line-height: 1; color: #64748B; cursor: pointer;
}
.dermosa-modal-close:hover { background: #E2E8F0; color: #0F172A; }
.dermosa-modal-box h3 { font-size: 15px; font-weight: 700; margin: 0; color: #0F172A; }
.dermosa-help-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 13px; }
.dermosa-help-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: #6A1510; color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.dermosa-help-step p { margin: 2px 0 0; font-size: 11.5px; line-height: 1.7; color: #475569; }
.dermosa-help-note {
  margin: 16px 0 0; padding: 12px 14px; background: #F9ECEB;
  border-radius: 12px; font-size: 10.5px; color: #6A1510; line-height: 1.8;
}

/* ============================================================
   ریسپانسیو — موبایل
   ============================================================ */
@media (max-width: 767px) {
  .dermosa-auth-wrapper { padding: 12px; }
  .dermosa-auth-card { max-width: 100%; border-radius: 20px; padding: 22px 18px 16px; }
  .dermosa-otp { gap: 8px; }
  .dermosa-otp input { width: 48px; height: 54px; font-size: 20px; }
  .dermosa-title { font-size: 17px; }
}

@media (max-width: 360px) {
  .dermosa-otp input { width: 44px; height: 50px; font-size: 18px; }
  .dermosa-presets { gap: 8px; }
  .dermosa-preset img { width: 48px; height: 48px; }
}

/* تبلت */
@media (min-width: 768px) and (max-width: 1024px) {
  .dermosa-auth-card { max-width: 440px; }
}

/* احترام به کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
  .dermosa-step, .dermosa-modal-backdrop, .dermosa-modal-box, .dermosa-btn.is-loading::after { animation: none !important; }
  .dermosa-dot, .dermosa-input, .dermosa-otp input { transition: none !important; }
}