/* --- base --- */
*{ box-sizing: border-box; font-family: 'Cairo', sans-serif; }

/* modal */
.modal.fade{ direction: rtl; }

/* container */
.sign {
  position: relative;
  width: 100%;
  background-color: #fff;
  min-height: 100vh;
  overflow: hidden;
  /* direction is set on html element; do not force here */
  
}

/* forms */
.forms-container { position: absolute; width: 100%; height: 100%; top: 0; right: 0; }

.signin-signup {
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
  right: 75%;
  width: 50%;
  transition: 1s 0.7s ease-in-out;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 5;
}

form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0rem 5rem;
  transition: all 0.2s 0.7s;
  overflow: hidden;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

form.sign-in-form { z-index: 2; }

.title { font-size: 2.2rem; color: #444; margin-bottom: 10px; }

/* --- input field: responsive + direction-aware --- */
.input-field {
  width: 100%;
  background-color: #f5f5f5;
  margin: 10px 0;
  height: 55px;
  border-radius: 5px;
  display: grid;
  /* default template (will be overridden by dir-specific rules) */
  grid-template-columns: 1fr auto;
  padding: 0 0.4rem;
  position: relative;
  align-items: center;
}

/* icon */
.input-field i {
  text-align: center;
  line-height: 55px;
  color: #acacac;
  transition: 0.5s;
  font-size: 1.1rem;
  padding: 0 8px;
}

/* input: use full width and be fluid */
.input-field input {
  background: none;
  outline: none;
  border: none;
  line-height: 1;
  font-weight: 600;
  font-size: 1.1rem;
  color: #333;
  width: 100%;
  /* default alignment for RTL pages (your site default) */
  text-align: right;
  direction: rtl;
  padding: 0 8px;
}

/* placeholder styling */
.input-field input::placeholder {
  color: #aaa;
  font-weight: 500;
  opacity: 1;
  /* placeholder alignment will follow input alignment */
}

/* button */
.btn.signup {
  width: 100%;
  background-color: #295a85;
  border: none;
  outline: none;
  height: 49px;
  border-radius: 4px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  margin: 10px 0;
  cursor: pointer;
  transition: 0.5s;
}
.btn.signup:hover { background-color: #f98c39; }

/* panels */
.panels-container {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* decorative circle */
.sign:before {
  content: "";
  position: absolute;
  height: 2000px;
  width: 2000px;
  top: -10%;
  left: 48%;
  transform: translateY(-50%);
  background-color:#295a85;
  transition: 1.8s ease-in-out;
  border-radius: 50%;
  z-index: 6;
}

.image { width: 100%; transition: transform 1.1s ease-in-out; transition-delay: 0.4s; }

.panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-around;
  text-align: center;
  z-index: 6;
}
.left-panel { pointer-events: all; padding: 3rem 12% 2rem 17%; }
.panel .content { color: #fff; transition: transform 0.9s ease-in-out; transition-delay: 0.6s; }
.panel h3 { font-weight: 600; line-height: 1; font-size: 1.5rem; }
.panel p { font-size: 0.95rem; padding: 0.7rem 0; }

/* transparent button */
.btn.transparent {
  margin: 0;
  background: #fff;
  color: black;
  border: 2px solid #fff;
  width: 130px;
  height: 41px;
  font-weight: 600;
  font-size: 0.8rem;
}
.btn.transparent:hover{ color: white; background-color: black; }
.btn.transparent a:hover { text-decoration: none; color: white; }

/* ===== Direction-specific rules ===== */
/* Arabic / RTL (your site default) */
html[dir="rtl"] .input-field { grid-template-columns: 1fr auto; }
html[dir="rtl"] .input-field i { order: 2; /* icon after input */ }
html[dir="rtl"] .input-field input { text-align: right; direction: rtl; }

/* French/English / LTR */
html[dir="ltr"] .input-field { grid-template-columns: auto 1fr; }
html[dir="ltr"] .input-field i { order: 1; /* icon before input */ }
html[dir="ltr"] .input-field input { text-align: left; direction: ltr; }

/* ===== Responsive ===== */
@media (max-width: 870px) {
  .sign { min-height: 800px; height: 100vh; }
  .signin-signup { width: 100%; top: 95%; transform: translate(50%, -100%); transition: 1s 0.8s ease-in-out; }
  .signin-signup, .sign.sign-up-mode .signin-signup { right: 50%; }
  .panels-container { grid-template-columns: 1fr; grid-template-rows: 1fr 2fr 1fr; }
  .panel { flex-direction: row; justify-content: space-around; align-items: center; padding: 2.5rem 8%; grid-column: 1 / 2; }
  .left-panel { grid-row: 1 / 2; }
  .image { width: 200px; transition: transform 0.9s ease-in-out; transition-delay: 0.6s; }
  .panel .content { padding-left: 15%; transition: transform 0.9s ease-in-out; transition-delay: 0.8s; }
  .panel h3 { font-size: 1.2rem; }
  .panel p { font-size: 0.7rem; padding: 0.5rem 0; }
  .btn.transparent { width: 110px; height: 35px; font-size: 0.7rem; }
  .sign:before { width: 1500px; height: 1500px; transform: translateX(50%); right: 30%; bottom: 68%; left: initial; top: initial; transition: 2s ease-in-out; }
  .sign.sign-up-mode:before { transform: translate(50%, 100%); bottom: 32%; left: initial; }
  .sign.sign-up-mode .left-panel .image, .sign.sign-up-mode .left-panel .content { transform: translateY(-300px); }
}

@media (max-width: 570px) {
  form { padding: 0 1.5rem; }
  .image { display: none; }
  .panel .content { padding: 0.5rem 1rem; }
  .sign { padding: 1.5rem; }
  .sign:before { bottom: 72%; right: 50%; }
  .sign.sign-up-mode:before { bottom: 28%; right: 50%; }
}
/* ===== Fix for LTR pages (e.g. French / English) ===== */
html[dir="ltr"] {
  /* panels container should stick to left in LTR */
}
html[dir="ltr"] .forms-container {
  right: auto;
  left: 0;
}

/* موضع النموذج: بدلًا من right:75% نضع left:75% مع تصحيح التحويل */
html[dir="ltr"] .signin-signup {
  right: auto;
  left: 75%;
  transform: translate(-50%, -50%);
}

/* الحقل والايقونة تعاملته سابقاً */
/* نثبت أن الصورة تكون في الجهة اليمنى (المنطقة البصرية اليمنى) */
html[dir="ltr"] .image {
  order: 2; /* عند استخدام flex/grid هذا يضمن أنها تظهر في الجهة المقصودة */
}

/* محاذاة المحتوى في الـ panel عند LTR */
html[dir="ltr"] .panel {
  align-items: flex-start; /* اجعل عناصر اللوحة تبدأ من اليسار (لـ LTR) */
  text-align: center;      /* محتوى اللوحة يبقى في الوسط داخلها */
}

/* بدل padding الخاص بـ left-panel (نقلب المسافات) */
html[dir="ltr"] .left-panel {
  padding: 3rem 17% 2rem 12%; /* swap left/right padding */
}

/* نقلب موضع الدائرة الكبيرة خلفية (.sign:before) */
html[dir="ltr"] .sign:before {
  left: auto;
  right: 48%;
  transform: translateY(-50%);
}

/* ضبط responsive أيضاً عند الشاشات الصغيرة */
@media (max-width: 870px) {
  html[dir="ltr"] .signin-signup,
  html[dir="ltr"] .sign.sign-up-mode .signin-signup {
    right: auto;
    left: 50%;
    transform: translate(-50%, -100%);
  }

  html[dir="ltr"] .sign:before {
    right: 30%;
    left: initial;
    transform: translateX(50%);
  }

  html[dir="ltr"] .panel .content {
    /* لو كنت تريد المحتوى يظهر بنفس طريقة LTR على الموبايل */
    padding-left: 0;
    padding-right: 15%;
  }
}

/* صغيرة: إن أردت أن تبقى أيقونة الحقل قبل/بعد الإدخال (معالجنا سابقاً) */
html[dir="ltr"] .input-field { grid-template-columns: auto 1fr; }
html[dir="ltr"] .input-field i { order: 1; }
html[dir="ltr"] .input-field input { text-align: left; direction: ltr; }