:root{--red:#b50b13;--ink:#151515;--muted:#686868;--line:#dedede}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:"Segoe UI",Tahoma,Arial,sans-serif}body.login-page{overflow:hidden;color:var(--ink);background:#f6f6f6 url('../img/login-background.jpg') center center/cover no-repeat}
.login-layout{height:100vh;position:relative;overflow:hidden;direction:ltr}
.login-intro{position:absolute;z-index:2;right:5.5%;top:50%;transform:translateY(-50%);width:30%;direction:rtl;text-align:right}.intro-copy{width:100%}.mega-word{font:800 58px/1 Arial,sans-serif;color:#a30a10;letter-spacing:-2px}.mega-word span{color:#a30a10}.mega-tag{margin-top:15px;font-size:17px;color:#444;font-weight:500}.intro-copy h1{font-size:43px;line-height:1.35;margin:30px 0 16px;font-weight:800}.intro-copy h1 em{display:block;font-style:normal;color:#b31921}.intro-text{font-size:17px;line-height:1.9;color:#5e5e5e;margin:0 0 22px}.intro-line{display:block;width:65px;height:2px;background:#9d2027;margin:0 0 27px auto}
.feature-row{height:91px;margin:0 0 10px;padding:14px 16px;display:flex;flex-direction:row-reverse;align-items:center;gap:16px;background:rgba(255,255,255,.83);border:1px solid rgba(255,255,255,.88);border-radius:14px;box-shadow:0 7px 20px rgba(0,0,0,.07);backdrop-filter:blur(4px)}.feature-box{width:54px;height:54px;flex:0 0 54px;border-radius:10px;background:rgba(255,255,255,.9);display:grid;place-items:center;color:#c31a23;font-size:25px}.feature-row div{flex:1}.feature-row b{display:block;font-size:17px;margin-bottom:6px}.feature-row small{display:block;color:#666;font-size:13px;line-height:1.55}
.login-card{position:absolute;z-index:3;left:8.5%;top:50%;transform:translateY(-50%);direction:rtl;width:375px;padding:22px 34px 20px;border-radius:29px;background:rgba(255,255,255,.83);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 50px rgba(0,0,0,.10);backdrop-filter:blur(5px)}.login-mark{width:78px;height:78px;margin:0 auto 18px}.login-mark img{width:100%;height:100%;object-fit:contain}.login-card h2{text-align:center;margin:0;font-size:24px;font-weight:800}.login-subtitle{text-align:center;color:#747474;font-size:12px;margin:7px 0 26px}.login-alert{display:flex;gap:8px;margin:-14px 0 12px;padding:8px 10px;border:1px solid #ffd0d6;border-radius:9px;background:#fff3f5;color:#a60017;font-size:11px}.login-form{display:flex;flex-direction:column}.login-form>label{font-weight:800;font-size:13px;margin:0 0 8px}.input-wrap{height:55px;border:1px solid #d5d5d5;border-radius:11px;display:flex;align-items:center;padding:0 11px;gap:10px;margin-bottom:15px;background:rgba(255,255,255,.68)}.input-wrap:focus-within{border-color:#bd1a22;box-shadow:0 0 0 3px rgba(189,26,34,.06)}.input-wrap>i{order:3;color:#c21b24;font-size:18px}.input-wrap input{order:2;border:0;outline:0;background:transparent;flex:1;min-width:0;height:100%;font-size:11px;color:#222;text-align:right;direction:rtl!important}.input-wrap input::placeholder{color:#8b8b8b}.password-toggle{order:1;border:0;background:none;padding:4px;color:#626262;font-size:18px;cursor:pointer}.form-options{display:flex;justify-content:space-between;align-items:center;margin:0 0 17px;font-size:11px}.remember{display:flex!important;align-items:center;gap:6px!important;margin:0!important;font-weight:400!important}.remember input{width:17px;height:17px;accent-color:#b70d15}.forgot{color:#a81920;text-decoration:none;font-weight:600}.login-submit{height:59px;border:0;border-radius:10px;background:linear-gradient(90deg,#b70b12,#9e0a10);color:#fff;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:26px;cursor:pointer;box-shadow:0 6px 14px rgba(160,0,10,.16)}.login-submit i{font-size:20px}
.login-card:after,.login-card:before{content:none!important;display:none!important}
@media(max-height:760px) and (min-width:901px){.login-card{transform:translateY(-50%) scale(.88);transform-origin:center}.login-intro{transform:translateY(-50%) scale(.88);transform-origin:right center}}
@media(max-width:900px){body.login-page{overflow:auto;background-position:center}.login-layout{min-height:100vh;height:auto;display:flex;align-items:center;justify-content:center;padding:20px}.login-intro{display:none}.login-card{position:relative;left:auto;top:auto;transform:none;width:min(390px,100%);background:rgba(255,255,255,.94)}}

/* ===== ضبط نهائي حسب الصورة المرجعية ===== */
@media (min-width:901px){
  /* تكبير الفورم فقط مع إبقائه في الجهة اليسرى */
  .login-card{
    left:8.2%;
    width:430px;
    padding:28px 38px 24px;
    border-radius:32px;
  }
  .login-mark{width:86px;height:86px;margin-bottom:20px}
  .login-card h2{font-size:27px}
  .login-subtitle{font-size:13px;margin-bottom:28px}
  .login-form>label{font-size:14px;margin-bottom:9px}
  .input-wrap{height:61px;margin-bottom:17px}
  .input-wrap input{font-size:12px}
  .form-options{font-size:12px;margin-bottom:19px}
  .login-submit{height:64px;font-size:19px}

  /* إنزال كروت الخدمات الثلاثة لأسفل مثل الصورة */
  .intro-line{margin-bottom:50px}
  .feature-row{height:91px;margin-bottom:10px}
}

/* لا نصغّر التصميم على شاشات اللابتوب العادية */
@media(max-height:760px) and (min-width:901px){
  .login-card{transform:translateY(-50%) scale(.94);transform-origin:center}
  .login-intro{transform:translateY(-50%) scale(.94);transform-origin:right center}
}

/* ===== مطابقة أحجام الصورة المرجعية ===== */
@media (min-width:901px){
  .login-card{
    left:8.5%;
    width:375px;
    padding:22px 34px 20px;
    border-radius:29px;
    transform:translateY(-50%) !important;
  }
  .login-mark{width:78px;height:78px;margin-bottom:18px}
  .login-card h2{font-size:24px}
  .login-subtitle{font-size:12px;margin:7px 0 26px}
  .login-form>label{font-size:13px;margin-bottom:8px}
  .input-wrap{height:55px;margin-bottom:15px}
  .input-wrap input{font-size:11px}
  .form-options{font-size:11px;margin-bottom:17px}
  .login-submit{height:59px;font-size:18px}

  .login-intro{
    right:5.5%;
    width:30%;
    transform:translateY(-50%) !important;
  }
  .mega-word{font-size:58px}
  .mega-tag{font-size:17px;margin-top:15px}
  .intro-copy h1{font-size:43px;margin:30px 0 16px}
  .intro-text{font-size:17px;margin-bottom:22px}
  .intro-line{margin:0 0 27px auto}
  .feature-row{height:91px;margin-bottom:10px;padding:14px 16px}
  .feature-row b{font-size:17px}
  .feature-row small{font-size:13px}
}

/* ===== تكبير وترتيب الفورم - التعديل الأخير ===== */
@media (min-width:901px){
  .login-card{
    left:7.2%;
    width:430px;
    padding:26px 38px 23px;
    border-radius:32px;
    transform:translateY(-50%) !important;
  }
  .login-mark{width:84px;height:84px;margin-bottom:17px}
  .login-card h2{font-size:27px;line-height:1.35}
  .login-subtitle{font-size:13px;margin:7px 0 23px}
  .login-form>label{font-size:14px;margin-bottom:8px}
  .input-wrap{height:60px;margin-bottom:14px;padding:0 14px;border-radius:12px}
  .input-wrap input{font-size:12px}
  .form-options{font-size:12px;margin-bottom:16px}
  .login-submit{height:63px;font-size:20px;border-radius:11px}
  .login-card:before{left:38px;right:38px}
  .login-card:after{font-size:12px;line-height:2.25;margin-top:12px}
}
@media(max-height:760px) and (min-width:901px){
  .login-card{transform:translateY(-50%) scale(.90) !important;transform-origin:center left}
}

/* ===== فورم متوازن ومناسب للشاشة ===== */
@media (min-width:901px){
  .login-card{
    left:6.8%;
    width:410px;
    padding:24px 36px 21px;
    border-radius:30px;
    transform:translateY(-50%) !important;
  }
  .login-mark{width:80px;height:80px;margin-bottom:14px}
  .login-card h2{font-size:25px;line-height:1.35}
  .login-subtitle{font-size:12.5px;margin:6px 0 21px}
  .login-form>label{font-size:13.5px;margin-bottom:7px}
  .input-wrap{height:57px;margin-bottom:13px;padding:0 13px;border-radius:11px}
  .input-wrap input{font-size:12px}
  .form-options{font-size:11.5px;margin-bottom:15px}
  .login-submit{height:60px;font-size:19px;border-radius:11px}
  .login-card:before{left:36px;right:36px;bottom:71px}
  .login-card:after{font-size:11.5px;line-height:2.2;margin-top:10px}
}
@media(max-height:760px) and (min-width:901px){
  .login-card{transform:translateY(-50%) scale(.94) !important;transform-origin:center left}
}

/* ===== تكبير الفورم والنصوص - طلب المستخدم ===== */
@media (min-width:901px){
  .login-card{left:6.2%;width:455px;padding:28px 40px 25px;border-radius:32px;transform:translateY(-50%) !important}
  .login-mark{width:88px;height:88px;margin-bottom:16px}
  .login-card h2{font-size:29px;line-height:1.35}
  .login-subtitle{font-size:14px;margin:8px 0 24px;line-height:1.7}
  .login-form>label{font-size:15px;margin-bottom:9px}
  .input-wrap{height:63px;margin-bottom:16px;padding:0 14px;border-radius:12px}
  .input-wrap>i{font-size:20px}
  .input-wrap input{font-size:14px}
  .password-toggle{font-size:20px}
  .form-options{font-size:13px;margin-bottom:18px}
  .remember input{width:19px;height:19px}
  .login-submit{height:66px;font-size:21px;border-radius:12px}
  .login-submit i{font-size:22px}
  .login-card:before{left:40px;right:40px;bottom:78px}
  .login-card:after{font-size:13px;line-height:2.25;margin-top:12px}
}
@media(max-height:760px) and (min-width:901px){
  .login-card{transform:translateY(-50%) scale(.92) !important;transform-origin:center left}
}

/* ===== تكبير إضافي بسيط للفورم والنصوص ===== */
@media (min-width:901px){
  .login-card{left:5.8%;width:480px;padding:30px 42px 27px;border-radius:34px;transform:translateY(-50%) !important}
  .login-mark{width:92px;height:92px;margin-bottom:17px}
  .login-card h2{font-size:31px}
  .login-subtitle{font-size:15px;margin:8px 0 25px}
  .login-form>label{font-size:16px;margin-bottom:9px}
  .input-wrap{height:66px;margin-bottom:17px;padding:0 15px;border-radius:13px}
  .input-wrap>i,.password-toggle{font-size:21px}
  .input-wrap input{font-size:15px}
  .form-options{font-size:14px;margin-bottom:19px}
  .login-submit{height:69px;font-size:22px;border-radius:13px}
  .login-card:before{left:42px;right:42px;bottom:81px}
  .login-card:after{font-size:13.5px}
}
@media(max-height:760px) and (min-width:901px){
  .login-card{transform:translateY(-50%) scale(.94) !important;transform-origin:center left}
}


/* ===== تحسين خط صفحة تسجيل الدخول ===== */
html,body,.login-card,.login-form,.login-submit,.feature-row,.mega-tag,.intro-copy{
  font-family:"Cairo",Tahoma,Arial,sans-serif !important;
}
.login-card h2{font-weight:800;letter-spacing:-.35px}
.login-subtitle{font-weight:500;line-height:1.8}
.login-form>label{font-weight:700;line-height:1.7}
.input-wrap input{font-family:"Cairo",Tahoma,Arial,sans-serif !important;font-weight:500}
.input-wrap input::placeholder{font-family:"Cairo",Tahoma,Arial,sans-serif !important;font-weight:400}
.form-options,.remember,.forgot{font-family:"Cairo",Tahoma,Arial,sans-serif !important}
.login-submit{font-family:"Cairo",Tahoma,Arial,sans-serif !important;font-weight:700}
.mega-tag{font-weight:600}
.intro-copy h1{font-family:"Cairo",Tahoma,Arial,sans-serif !important;font-weight:800;letter-spacing:-.6px}
.intro-text{font-weight:500}
.feature-row b{font-family:"Cairo",Tahoma,Arial,sans-serif !important;font-weight:800}
.feature-row small{font-family:"Cairo",Tahoma,Arial,sans-serif !important;font-weight:500}
\n\n/* ===== تعديل الأيقونات فقط حسب الصورة المرجعية - بدون تغيير الأحجام أو المسافات ===== */
/* بطاقات الخدمات: الأيقونة في اليسار والنص في اليمين */
.feature-row{direction:rtl;flex-direction:row-reverse}
.feature-row .feature-box{
  background:rgba(244,247,249,.96);
  color:#c9151e;
  box-shadow:none;
}
.feature-row .feature-box i{display:block;line-height:1;color:#c9151e}
.feature-row div{text-align:right;direction:rtl}

/* حقول الدخول: البريد/القفل في اليمين، وأيقونة العين في اليسار */
.input-wrap{direction:rtl}
.input-wrap>.input-leading-icon{order:1;color:#c9151e;flex:0 0 auto}
.input-wrap input{order:2}
.input-wrap .password-toggle{order:3;margin:0;padding:4px;color:#34434d;flex:0 0 auto}
.input-wrap .password-toggle i{display:block;line-height:1}

/* ===== مطابقة ترتيب وأشكال الأيقونات مع الصورة المرجعية فقط ===== */
/* لا تغييرات على المقاسات أو المسافات الأساسية */
.feature-row{
  direction:ltr !important;
  flex-direction:row !important;
}
.feature-row .feature-box{
  order:1 !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(247,249,250,.96) !important;
  color:#c71922 !important;
}
.feature-row>div{
  order:2 !important;
  direction:rtl !important;
  text-align:right !important;
}
.feature-row .feature-box i{
  color:#c71922 !important;
  line-height:1 !important;
}

/* الحقول: أيقونة البريد/القفل يمين، العين يسار كما في المرجع */
.input-wrap{
  position:relative !important;
  direction:rtl !important;
}
.input-wrap>.input-leading-icon{
  position:absolute !important;
  right:14px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
  z-index:2 !important;
  color:#c71922 !important;
}
.input-wrap input{
  order:initial !important;
  padding-right:30px !important;
  padding-left:30px !important;
}
.input-wrap .password-toggle{
  position:absolute !important;
  left:10px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
  z-index:2 !important;
  color:#52616a !important;
}

/* أيقونة إدارة الكفالات: مطابقة المرجع مع ظل خفيف، بدون تغيير المقاسات أو المسافات */
.warranty-feature-icon{filter:drop-shadow(0 3px 3px rgba(125,0,8,.28)) !important;}

/* أيقونة تقارير وإحصائيات ذكية: نفس طابع المرجع مع وضوح وظل خفيف، دون تغيير التخطيط */
.reports-feature-icon{font-size:28px !important;filter:drop-shadow(0 3px 3px rgba(125,0,8,.28)) !important;}

/* ظلال أيقونات مزايا صفحة الدخول — مطابقة لطابع الصورة المرجعية فقط */
.feature-row .feature-box{
  box-shadow: 0 5px 12px rgba(105, 18, 24, .18), 0 2px 5px rgba(0, 0, 0, .08) !important;
}
.feature-row .feature-box i{
  filter: drop-shadow(0 3px 3px rgba(125, 0, 8, .28)) !important;
}


/* أيقونتا البريد وكلمة المرور — مطابقة للصورة المرجعية فقط */
.input-wrap>.login-email-icon,
.input-wrap>.login-password-icon{
  color:#cf1018 !important;
  filter:drop-shadow(0 2px 2px rgba(120,0,8,.30)) !important;
  -webkit-text-stroke:.15px currentColor;
}


/* ===== قسم المساعدة فقط: مطابق للصورة المرجعية بدون تغيير بقية أحجام الصفحة ===== */
.support-divider{display:flex;align-items:center;gap:13px;margin:13px 0 11px;color:#222;font-size:13px;font-weight:700;text-align:center}
.support-divider::before,.support-divider::after{content:"";height:1px;background:#d9dee2;flex:1}
.support-divider span{flex:0 0 auto;line-height:1}
.support-contact{height:55px;border:1px solid #d5dbe0;border-radius:11px;background:rgba(255,255,255,.52);display:flex;align-items:center;justify-content:center;gap:9px;padding:0 15px;color:#5e6870;text-decoration:none;font-family:"Cairo",Tahoma,Arial,sans-serif;font-size:11px;font-weight:500;transition:border-color .15s ease,background .15s ease}
.support-contact:hover,.support-contact:focus-visible{border-color:#c8cfd5;background:rgba(255,255,255,.72);outline:none}
.support-contact .support-text{direction:rtl;text-align:center;white-space:nowrap}
.support-contact .support-text strong{color:#c71922;font-weight:800}
.support-contact>i{font-size:22px;line-height:1;color:#263640;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12));flex:0 0 auto}

/* منع ظهور أيقونة إظهار كلمة المرور الافتراضية من المتصفح؛ نُبقي زر العين المخصص فقط */
#login-password::-ms-reveal,
#login-password::-ms-clear {
  display: none;
}