/* Base layout */
body { margin: 0; padding: 0; overflow: hidden; }
.iti.iti--allow-dropdown {
    width: 100%;
}

.auth-wrapper { width: 100%; }
.auth-part { display: flex; height: 100vh; width: 100%; overflow: hidden; }

/* Position classes (kept for parity) */
.position-arabic .auth-wrapper,
.position-english .auth-wrapper { transform: none; }
.position-english .auth-form { order: -1; }

/* Banner & form */
.auth-banner, .auth-form {
  flex: 1; display: flex; align-items: center; justify-content: center; background-size: cover;
}
.auth-banner-overlay { text-align: center; padding: 20px; width: 100%; }

/* Form content */
.auth-form-content {
  width: 100%; max-width: 400px; padding: 20px; max-height: 100vh; overflow-y: auto; text-align: left;
}
html[dir="rtl"] .auth-form-content { text-align: right; }

/* Headings and helpers */
.login-instruction { font-size: 14px; color: #333; margin-bottom: 10px; font-weight: bold; }

/* Continue list (SSO) */
.auth-form-continue { list-style: none; padding: 0; margin: 0; }
.auth-form-continue li { margin-bottom: 10px; }
.auth-form-continue a {
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  padding: 10px; border-radius: 5px; color: #fff; font-weight: 500; width: 100%;
}
.auth-form-continue a.google { background-color: #8f0f03; }
.auth-form-continue a img.google-logo {
  width: 24px; height: 24px; vertical-align: middle; margin-right: 10px; margin-left: 0;
}
html[dir="rtl"] .auth-form-continue a img.google-logo { margin-right: 0; margin-left: 10px; }

/* Tabs */
.login-tabs { display: flex; gap: 10px; margin-bottom: 15px; position: relative; flex-direction: row; }
html[dir="rtl"] .login-tabs { flex-direction: row-reverse; }
.login-tab {
  flex: 1; padding: 8px 15px; text-align: center; border-radius: 20px;
  background-color: #e0e0e0; color: #666; cursor: pointer; font-size: 14px; font-weight: 500; z-index: 1;
}
.login-tab.active { background-color: rgba(10, 9, 48, 0.9); color: #fff; }
.login-tab:hover:not(.active) { background-color: #d0d0d0; }

/* Inputs visibility + alignment */
.form-group { margin-bottom: 15px; }
#email_input, #phone_input { display: none; }
#email_input.active, #phone_input.active { display: block; }

.form-control[type="password"],
#email_input, #phone_input { text-align: left; direction: ltr; }
html[dir="rtl"] .form-control[type="password"],
html[dir="rtl"] #email_input, html[dir="rtl"] #phone_input { text-align: right; direction: rtl; }

/* Remember / forgot row */
.form-group-content {
  display: flex; justify-content: space-between; align-items: center; flex-direction: row;
}
html[dir="rtl"] .form-group-content { flex-direction: row-reverse; }
.form-check-label { margin-left: 10px; }
html[dir="rtl"] .form-check-label { margin-left: 0; margin-right: 10px; }
.auth-forgot { text-align: right; }
html[dir="rtl"] .auth-forgot { text-align: left; }

/* Submit + bottom text */
.form-btn { width: 100%; text-align: center; }
.auth-form-text { text-align: center; direction: ltr; }
html[dir="rtl"] .auth-form-text { text-align: right; direction: rtl; }

/* Language toggler */
.language-toggler {
  position: absolute; top: 20px; left: 20px; display: flex; gap: 10px; z-index: 1000; flex-direction: row;
}
html[dir="rtl"] .language-toggler { left: auto; right: 20px; flex-direction: row-reverse; }

.language-toggler a {
  display: inline-block; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  border: 2px solid transparent; box-shadow: 0 2px 4px rgba(0,0,0,0.1); line-height: 0; padding: 0;
}
.language-toggler a.active { border-color: #007bff; box-shadow: 0 2px 8px rgba(0,123,255,0.3); }
.language-toggler a:hover { transform: scale(1.1); }
.language-toggler .flag-icon { width: 100%; height: 100%; background-size: cover; background-position: center; display: block; }

/* Logo */
.auth-logo img { height: 110px; width: auto; }
.auth-logo .logo-container {
  height: 110px; width: 110px; background-color: #fff; border-radius: 50%;
  display: flex; justify-content: center; align-items: center; overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.1); transition: transform .3s ease, box-shadow .3s ease; cursor: pointer;
}
.auth-logo .logo-container:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(0,0,0,0.2); }
.auth-logo .logo-container img { height: 75%; width: auto; object-fit: contain; transition: transform .3s ease; }
.auth-logo .logo-container:hover img { transform: rotate(3deg); }

/* Responsive */
@media (max-width: 768px) {
  .auth-banner { display: none; }
  .auth-form { flex: none; width: 100%; height: 100vh; }
  .auth-part { width: 100%; }
  .auth-wrapper { width: 100%; transform: none !important; }
  .language-toggler { position: fixed; left: 20px; }
  html[dir="rtl"] .language-toggler { left: auto; right: 20px; }
}
@media (max-width: 576px) {
  .auth-form-content { padding: 15px; max-width: 100%; }
  .login-tab { font-size: 12px; padding: 6px 10px; }
  .auth-form-title { font-size: 20px; }
  .login-instruction { font-size: 12px; }
  .form-group { margin-bottom: 10px; }
  .auth-logo .logo-container { height: 90px; width: 90px; }
  .auth-logo img { height: 90px; }
}


html[dir="rtl"] .form-check{
  display:flex;
  flex-direction: row-reverse;
  align-items:center;
  gap:8px;
}
html[dir="rtl"] .form-check-input{ margin:0; }
html[dir="rtl"] .form-check-label{ margin:0 8px 0 0; }