.xt-login-container {
  background: #fff;
  padding: 30px;
  max-width: 500px;
  margin: 40px auto;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* اللوجو */
.xt-logo-container {
  text-align: center;
  margin: 60px 0 30px;
  height: 160px;
}
.xt-logo-container img {
  max-height: 100%;
  width: auto;
}

/* التاب */

.xt-tabs {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
  padding: 0; /* مهم عشان ميزقش التاب يمين */
  box-sizing: border-box;
}


.xt-tabs li {
  list-style: none;
  flex: 1;
}

.xt-tabs li a {
  display: block;
  padding: 12px 0;
  text-align: center;
  background: #f9f9f9;
  font-weight: bold;
  font-size: 18px;
  color: #000;
  text-decoration: none;
  border: 1px solid #ddd;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  box-sizing: border-box;
}


.xt-tabs li.active a {
  background: #fff;
  border-bottom: 3px solid #000;
  color: #000;
  position: relative;
  z-index: 2;
}




/* تسجيل السوشيال */
.xt-social-login {
  text-align: center;
  margin-bottom: 20px;
}
.xt-social-login button {
  margin: 5px;
  padding: 12px 28px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: 16px;
}
.xt-facebook-btn {
  background: #3b5998;
  color: #fff;
}
.xt-facebook-btn i {
  margin-right: 5px;
}
.xt-google-btn {
  background: #db4437;
  color: #fff;
}
.xt-google-btn i {
  margin-right: 5px;
}

/* فواصل */
.xt-divider {
  text-align: center;
  margin: 15px 0;
  font-weight: bold;
}

/* الفورم */
.xt-login-container form input,
.xt-login-container form select,
.xt-login-container form button {
  width: 100%;
  margin: 8px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.xt-login-container form button {
  background-color: #000;
  color: #fff;
  font-weight: bold;
  border: none;
  cursor: pointer;
}

/* OTP input */
.xt-otp {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  align-items: center;
}

.xt-otp select {
  flex: 0 0 80px; /* ثابت 80 بكسل لكود الدولة */
  padding: 8px;
  font-size: 14px;
}

.xt-otp input {
  flex: 1; /* ياخد كل المساحة الباقية */
  padding: 10px;
}

.xt-otp button {
  flex: 0 0 80px; /* ثابت 80 بكسل للزرار */
  padding: 9px 0;
  font-size: 13px;
}



/* لينكات تحت */
.xt-footer-links {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 14px;
}
.xt-footer-links a {
  background: #f1f1f1;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: background 0.2s ease;
}
.xt-footer-links a:hover {
  background: #ddd;
}

/* الفوتر */
.xt-footer-bar {
  margin-top: 60px;
  padding: 20px;
  font-size: 14px;
  text-align: right;
  color: #555;
}
.xt-footer-bar i {
  margin-left: 5px; /* بدل ما كان يمين */
  color: #000;
  transform: scaleX(-1); /* لف الايقونة */
}

.xt-checkbox {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 14px;
  color: #333;
  vertical-align: middle;
}

.xt-checkbox input[type="checkbox"] {
  margin-right: 6px;
  vertical-align: middle;
}

.xt-checkbox a {
  font-weight: bold;
  color: #000;
  text-decoration: none;
}
.xt-checkbox a:hover {
  text-decoration: underline;
}

.xt-submit-btn {
  background: #000;
  color: #fff;
  border: none;
  padding: 12px;
  width: 100%;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}
.xt-submit-btn:hover {
  opacity: 0.9;
}

.xt-links-row {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.xt-link-button {
  background-color: #f3f3f3;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.3s ease;
}

.xt-link-button:hover {
  background-color: #e0e0e0;
}

@media (max-width: 600px) {
  .xt-links-row {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}

.xt-link-button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #f5f5f5;
  color: #000;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.xt-link-button:hover {
  background-color: #e0e0e0;
}

.xt-submit-btn {
  display: block;
  margin: 20px auto 0 auto;
  text-align: center;
}


/* ============== Mobile-only (<=768px) — لا يغيّر الديسكتوب ============== */
@media (max-width: 768px){

  /* تقليل المسافة واللوجو */
  .xt-logo-container{margin:16px 0 8px !important; height:auto;}
  .xt-logo-container img{max-height:64px; width:auto; height:auto;}
  .xt-login-container{margin:16px 12px; padding:16px; box-sizing:border-box;}

  /* سوشيال: زي الديسكتوب لكن متناسق على الموبايل */
  .xt-social-login{display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:stretch;}
  .xt-social-login p{flex:0 0 100%; margin:0; text-align:center;}
  .xt-social-login .xt-facebook-btn,
  .xt-social-login .xt-google-btn{
    flex:1 1 calc(50% - 5px);
    width:auto !important;           /* من غير ما تملا العرض كله */
    display:flex; align-items:center; justify-content:center;
    padding:12px 0;
  }

  /* Login: حقول الإيميل/الباس كاملة العرض بدون خروج */
  .xt-form input, .xt-form select, .xt-form button{max-width:100%;}

/* Login: كود الدولة + رقم الموبايل في صف واحد، والزرار تحتهم فول وِدث */
#form-otp .xt-otp{
  display:flex;
  flex-wrap:wrap;           /* عشان نقدر ننزل الزرار سطر تاني */
  gap:10px;
  align-items:center;
}

/* كود الدولة ثابت العرض */
#form-otp .xt-otp select{
  flex:0 0 90px !important; /* عرض ثابت تقريبًا */
  max-width:90px;
  padding:8px 6px;
}

/* حقل الموبايل ياخد باقي الصف */
#form-otp .xt-otp input[type="tel"]{
  flex:1 1 calc(100% - 90px - 10px) !important; /* باقي العرض ناقص الـ gap */
}

/* زرار الإرسال تحتهم وبعرض الكرت كله */
#form-otp #btn-send-otp{
  flex:1 1 100% !important;
  width:100% !important;
  padding:10px 0 !important;
  box-sizing:border-box;
  order:2;                  /* يتأكد إنه بعد الحقول */
}

/* شاشات أضيق جدًا */
@media (max-width: 380px){
  #form-otp .xt-otp select{ flex:0 0 84px !important; max-width:84px; }
  #form-otp .xt-otp input[type="tel"]{ flex:1 1 calc(100% - 84px - 10px) !important; }
}


  /* روابط Forgotten/Create جنب بعض ومتساويين */
  #login-links{display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap;}
  #login-links a{flex:1 1 calc(50% - 5px); text-align:center;}

  /* Register: كود الدولة + التليفون يفضلوا جنب بعض زي الديسكتوب */
  #form-register select[name="country_code"]{flex:0 0 96px; width:96px;}
  #form-register #ph-tel{flex:1 1 auto;}

  /* Register: CONTINUE و LOGIN نفس الحجم/الشكل وداخل الإطار */
  #form-register{display:flex; flex-wrap:wrap; gap:10px;}
  #form-register > *{flex:1 1 100%;}
  #btn-continue2, #btn-login2{
    flex:1 1 calc(50% - 5px);
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:12px !important;
    box-sizing:border-box;
  }
  #txt-have{order:99; width:100%; text-align:center;}
}