@font-face {
  font-family: "Farhang";
  src: url("../fonts/Farhang2-Thin.woff2") format("woff2"), url("../fonts/Farhang2-Thin.woff") format("woff");
  font-weight: 100;
}

@font-face {
  font-family: "Farhang";
  src: url("../fonts/Farhang2-ExtraLight.woff2") format("woff2"), url("../fonts/Farhang2-ExtraLight.woff") format("woff");
  font-weight: 200;
}

@font-face {
  font-family: "Farhang";
  src: url("../fonts/Farhang2-Light.woff2") format("woff2"), url("../fonts/Farhang2-Light.woff") format("woff");
  font-weight: 300;
}

@font-face {
  font-family: "Farhang";
  src: url("../fonts/Farhang2-Regular.woff2") format("woff2"), url("../fonts/Farhang2-Regular.woff") format("woff");
  font-weight: 400;
}

@font-face {
  font-family: "Farhang";
  src: url("../fonts/Farhang2-Medium.woff2") format("woff2"), url("../fonts/Farhang2-Medium.woff") format("woff");
  font-weight: 500;
}

@font-face {
  font-family: "Farhang";
  src: url("../fonts/Farhang2-DemiBold.woff2") format("woff2"), url("../fonts/Farhang2-DemiBold.woff") format("woff");
  font-weight: 600;
}

@font-face {
  font-family: "Farhang";
  src: url("../fonts/Farhang2-Bold.woff2") format("woff2"), url("../fonts/Farhang2-Bold.woff") format("woff");
  font-weight: 700;
}

@font-face {
  font-family: "Farhang";
  src: url("../fonts/Farhang2-ExtraBold.woff2") format("woff2"), url("../fonts/Farhang2-ExtraBold.woff") format("woff");
  font-weight: 800;
}

@font-face {
  font-family: "Farhang";
  src: url("../fonts/Farhang2-Black.woff2") format("woff2"), url("../fonts/Farhang2-Black.woff") format("woff");
  font-weight: 900;
}

.auth-overlay,
.auth-overlay * { box-sizing: border-box; }

.auth-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.auth-overlay.active { display: flex; }

.auth-modal { width: min(460px, 100%); min-height: auto; max-height: calc(100vh - 40px); overflow-y: auto; background: radial-gradient(circle at top center, rgba(255,255,255,.055), transparent 45%), #181818; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 22px 60px rgba(0,0,0,.68), 0 0 0 18px rgba(255,255,255,.025); position: relative; padding: 42px 54px 44px; color: #fff; font-family: "Farhang", Tahoma, sans-serif; }
.auth-close { position: absolute; top: 0; right: 0; width: 30px; height: 30px; border: none; background: #ed0000; color: #fff; font-size: 28px; line-height: 24px; cursor: pointer; }
.auth-logo { display: flex; justify-content: center; margin-bottom: 34px; }
.auth-logo img { width: 190px; height: auto; }
.auth-step { display: none; }
.auth-step.active { display: block; }
.auth-step h2 { color: #fff; font-size: 25px; line-height: 1.4; font-weight: 700; text-align: center; margin-bottom: 16px; }
.auth-desc { color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.8; text-align: center; margin-bottom: 18px; font-weight: 700; }
.auth-divider { height: 1px; background: rgba(255,255,255,.08); margin-bottom: 22px; }
.auth-label { display: block; color: #c9ad64; font-size: 18px; font-weight: 700; margin-bottom: 10px; text-align: right; }
.auth-input { width: 100%; height: 50px; background: #242424; border: 1px solid rgba(255,255,255,.16); color: #fff; padding: 0 16px; font-family: inherit; font-size: 18px; outline: none; margin-bottom: 18px; }
.auth-input::placeholder { color: rgba(255,255,255,.18); }
.auth-rules { color: rgba(255,255,255,.72); text-align: center; font-size: 13px; line-height: 1.8; margin-bottom: 26px; }
.auth-rules a { color: #c9ad64; }
.auth-submit { width: 100%; height: 54px; border: none; background: #c9ad64; color: #fff; font-family: inherit; font-size: 20px; font-weight: 700; cursor: pointer; }
.edit-mobile { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 22px; border: none; background: transparent; color: #c9ad64; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.edit-mobile span { font-size: 20px; }
.otp-row { display: flex; justify-content: center; gap: 12px; margin-bottom: 22px; }
.otp-row input { width: 48px; height: 50px; background: #242424; border: 1px solid rgba(255,255,255,.16); color: #fff; text-align: center; font-size: 24px; outline: none; }
.resend-text { color: rgba(255,255,255,.75); text-align: center; font-size: 15px; margin-bottom: 28px; }
.resend-text[data-type="success"] { color: #c9ad64; }
.resend-text[data-type="error"] { color: #ff6b6b; }
.auth-submit:disabled { opacity: .7; cursor: wait; }

@media (max-width: 700px) {
  .auth-overlay { padding: 14px; }
  .auth-modal { width: 100%; padding: 38px 20px 30px; }
  .auth-logo { margin-bottom: 28px; }
  .auth-logo img { width: 170px; }
  .otp-row { gap: 8px; }
  .otp-row input { width: 42px; height: 48px; }
}