:root {
  /* === الألوان الرئيسية === */
  --color-primary: #c9a84c;
  --color-primary-light: #c9a84c20;
  --color-primary-border: #c9a84c;

  /* === لون الـ Accent (الحالة النشطة / اللون الأخضر) === */
  --color-accent: #3d9e6b;

  /* === الخلفيات === */
  --color-bg: #0f0f0f;
  --color-surface: rgba(30, 27, 20, 0.9);

  /* === النصوص === */
  --color-text: #f0e6cc;
  --color-subtext: #8a7a5a;

  /* === ألوان الحالات === */
  --color-danger: #e40411;
  --color-warning: #c9a84c;
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Hide Edge-specific password reveal and clear buttons */
input::-ms-reveal,
input::-ms-clear,
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #0f0f0f inset !important;
  box-shadow: 0 0 0 1000px #222020 inset !important;
  -webkit-text-fill-color: #f0e6cc !important;
  caret-color: #f0e6cc;
  transition: background-color 9999s ease-in-out 0s;
}
/* password wrapper يحتوي الـ input والعين */
.password_container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.input_wrapper {
  position: relative;
  width: 100%;
}
.input_wrapper input {
  width: 100%;
  padding-left: 44px !important; /* مكان العين */
  box-sizing: border-box;
}
.eye_toggle {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  color: #8a7a5a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.eye_toggle:hover {
  color: #c9a84c;
}
.eye_toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* validation */
input.input_error {
  border: 1.5px solid #e74c3c !important;
  background: rgba(231, 76, 60, 0.05);
}
input.input_success {
  border: 1.5px solid #2ecc71 !important;
  background: rgba(46, 204, 113, 0.05);
}

/* hints تحت الـ input مباشرة مش تحت الزرار */
.field_hint {
  display: block;
  font-size: 0.78rem;
  margin-top: 4px;
  text-align: right;
}
.hint_error {
  color: #e74c3c;
}
.hint_success {
  color: #2ecc71;
}

/* رسالة API error فوق الزرار */
.form_error {
  color: #e74c3c;
  font-size: 0.85rem;
  text-align: center;
  background: rgba(231, 76, 60, 0.08);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(231, 76, 60, 0.25);
  margin: 0;
}
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
body {
  background-image: url("/assets/Gemini_Generated_Image_hsee73hsee73hsee.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: "Cairo", sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 1px 20px 40px;
}
header h1 {
  font-size: 36px;
  color: var(--color-primary);
  text-align: center;
  margin-top: 50px;
  margin-bottom: 0px;
}
.container {
  width: min(100%, 588px);

  display: flex;

  flex-direction: column;
  gap: 35px;
  align-items: center;
  padding: 25px 20px;
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid var(--color-primary-border);
  margin: 70px auto 0 auto;
}
.logo_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.logo_title img {
  width: 112px;
  height: 112px;
  object-fit: contain;
}
.logo_title h1 {
  font-size: 27px;
  color: var(--color-primary);
  margin-top: 0px;
}
.signup_form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(100%, 494px);
}
.signup_form input {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--color-primary-border);
  font-size: 20px;
  font-style: normal;
  color: var(--color-text);
  background-color: transparent;
  justify-content: end;
  width: 100%;
  text-align: end;
}
.password_container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.forget_password {
  font-size: 16px;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  text-align: end;
}
.login_btn {
  padding: 10px;
  border-radius: 40px;
  border: none;
  font-size: 24px;
  font-weight: bold;
  color: var(--color-text);
  background-color: var(--color-primary);

  cursor: pointer;
}
.login_btn:hover {
  background-color: var(--color-bg--);
  border: 1px solid var(--color-primary-border);
}
/* ===== Validation States ===== */

/* input wrapper للعين */
.input_wrapper {
  position: relative;
  width: 100%;
}
.input_wrapper input {
  width: 100%;
  padding-left: 44px !important;
  box-sizing: border-box;
}

/* حقل خطأ */
input.input_error {
  border: 1.5px solid #e74c3c !important;
  background-color: rgba(231, 76, 60, 0.05);
  outline: none;
}

/* حقل صح */
input.input_success {
  border: 1.5px solid #2ecc71 !important;
  background-color: rgba(46, 204, 113, 0.05);
  outline: none;
}

/* حاوية الـ input + hint معاً */
.field_group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

/* رسالة تحت الـ input مباشرة */
.field_hint {
  display: block;
  font-size: 0.78rem;
  padding-right: 4px;
  text-align: right;
}
.hint_error {
  
  color: #e74c3c;
}
.hint_success {
  color: #2ecc71;
}

/* رسالة خطأ الـ API — فوق زرار الدخول */
.form_error {
  color: #e74c3c;
  font-size: 0.82rem;
  text-align: center;
  background: rgba(231, 76, 60, 0.08);
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid rgba(231, 76, 60, 0.25);
  margin: 0;
}

/* زرار disabled */
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* تابلت: تصغير متدرج يحافظ على الفورم كاملاً داخل الشاشة */
@media (min-width: 601px) and (max-width: 1280px) {
  body {
    padding-inline: clamp(18px, 4vw, 48px);
    padding-bottom: 24px;
  }

  header h1 {
    font-size: clamp(24px, 3vw, 31px);
    margin-top: clamp(20px, 4vh, 36px);
  }

  .container {
    width: min(74vw, 500px);
    gap: clamp(18px, 3vh, 28px);
    padding: clamp(18px, 3vh, 24px) clamp(20px, 3vw, 30px);
    margin-top: clamp(24px, 6vh, 48px);
  }

  .logo_title {
    gap: 12px;
  }

  .logo_title img {
    width: clamp(70px, 10vh, 92px);
    height: clamp(70px, 10vh, 92px);
  }

  .logo_title h1 {
    font-size: clamp(22px, 2.8vw, 25px);
    margin-bottom: 0;
  }

  .signup_form {
    gap: 13px;
  }

  .signup_form input {
    min-height: 44px;
    padding: 8px 12px;
    font-size: clamp(16px, 2vw, 18px);
  }

  .forget_password {
    font-size: 14px;
  }

  .login_btn {
    min-height: 44px;
    padding: 7px 12px;
    font-size: 20px;
  }
}

/* التابلت الأفقي والشاشات القصيرة */
@media (min-width: 601px) and (max-width: 1280px) and (max-height: 700px) {
  body {
    padding-bottom: 14px;
  }

  header h1 {
    font-size: 23px;
    margin-top: 12px;
  }

  .container {
    width: min(68vw, 460px);
    gap: 12px;
    padding: 14px 22px 16px;
    margin-top: 14px;
  }

  .logo_title {
    gap: 5px;
  }

  .logo_title img {
    width: 58px;
    height: 58px;
  }

  .logo_title h1 {
    font-size: 20px;
  }

  .signup_form {
    gap: 9px;
  }

  .password_container {
    gap: 4px;
  }

  .signup_form input,
  .login_btn {
    min-height: 40px;
  }

  .forget_password {
    font-size: 12px;
  }

  .login_btn {
    font-size: 18px;
  }
}

@media (max-width: 600px) {
  body {
    padding-inline: 14px;
  }

  header h1 {
    font-size: clamp(23px, 7vw, 30px);
    margin-top: 28px;
  }

  .container {
    width: 100%;
    gap: 24px;
    margin-top: 38px;
  }

  .logo_title img {
    width: 88px;
    height: 88px;
  }

  .signup_form input {
    font-size: 17px;
  }
}

.forgot_password_button{padding:0;border:0;background:transparent;color:#fff;font-family:inherit;cursor:pointer}.forgot_password_button:hover{color:#e8ca70}.password_reset_form{display:flex;width:100%;flex-direction:column;gap:12px;direction:rtl}.password_reset_form[hidden],#resetCodeFields[hidden]{display:none}.password_reset_form h2{margin:0;color:#fff}.password_reset_form p{margin:0;color:rgba(255,255,255,.62);font-size:13px;line-height:1.7}.reset_field{display:flex;flex-direction:column;gap:7px;color:#f4e8cb;font-size:13px;font-weight:700}.reset_field span{padding-inline:3px}.password_reset_form input{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid rgba(201,162,67,.42);border-radius:9px;background:rgba(8,7,5,.42);color:#fff;font-family:inherit;font-size:14px;text-align:right;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}.password_reset_form input::placeholder{color:rgba(255,255,255,.38)}.password_reset_form input:focus{border-color:#d6b451;background:rgba(8,7,5,.62);box-shadow:0 0 0 3px rgba(201,162,67,.14)}.password_reset_form button{min-height:42px;border:0;border-radius:8px;background:#c9a243;color:#171208;font-family:inherit;font-weight:800;cursor:pointer}#resetCodeFields{display:flex;flex-direction:column;gap:10px}.password_reset_form .reset_back{background:transparent;color:#d7b75c}.reset_notice{padding:9px;border-radius:7px}.reset_notice.success{background:rgba(46,204,113,.12);color:#70dda3}.reset_notice.error{background:rgba(231,76,60,.12);color:#ef928d}
.signup_form[hidden]{display:none!important}