/* Base */
body{margin:0;font-family:'Jost',Arial,sans-serif;overflow:hidden}
.auth-wrapper{width:100%;transition:transform .5s ease}
.auth-part{display:flex;height:100vh;width:100%;overflow:auto}

/* Position helpers */
.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{position:relative}
.auth-banner-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;width:100%;
}

/* Logo */
.auth-logo img{height:110px;width:auto;margin-bottom:20px}
.auth-logo .logo-container{
  height:110px;width:110px;background:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;
  overflow:hidden;box-shadow:0 0 10px rgba(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,.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)}

/* Form */
.auth-form-content{
  width:100%;max-width:400px;padding:20px;border-radius:8px;overflow:hidden;max-height:80vh;text-align:left
}
html[dir="rtl"] .auth-form-content{ text-align:right }
.auth-form-title{font-size:1.5em;margin-bottom:1em;text-align:center}
.form-group{margin-bottom:1em}
.form-control{padding:10px;font-size:1em;border-radius:4px;width:100%;text-align:left;direction:ltr}
html[dir="rtl"] .form-control{ text-align:right; direction:rtl }

/* Buttons */
.btn-block{display:block;width:100%;padding:10px;font-size:1em;color:#fff;border:none;border-radius:4px;background:rgba(10,9,48,.9);text-align:center}

/* 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;
  transition:all .3s ease;box-shadow:0 2px 4px rgba(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,.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}

/* Tabs */
.login-tabs{display:flex;justify-content:center;gap:15px;margin-bottom:15px}
.login-tab{
  cursor:pointer;padding:10px 20px;border:1px solid #ccc;border-radius:30px;background:#f0f0f0;font-weight:700;color:#333;
  transition:all .3s ease
}
.login-tab.active{background:rgba(10,9,48,.9);color:#fff;border-color:#007bff}

/* Responsive */
@media (max-width:768px){
  .auth-banner{display:none}
  .auth-form{flex:none;width:100%;height:100vh;padding:10px}
  .auth-part{width:100%}
  .auth-wrapper{width:100%;transform:none!important}
  .auth-form-content{width:90%;max-width:100%}
  .auth-form-title{font-size:1.3em}
  .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%}
  .auth-form-title{font-size:1.2em}
  .form-group{margin-bottom:10px}
  .btn-block{padding:8px;font-size:.9em}
  .auth-logo .logo-container{height:90px;width:90px}
  .auth-logo img{height:90px}
  .login-tab{font-size:12px;padding:6px 10px}
}