/* =========================================================================
   مدى التسهيل للتجارة — تحسينات الواجهة
   1) نافذة التحويل إلى واتساب
   2) تباعد وتنسيق الاستمارات
   3) مسافات الأقسام والفيديوهات والصور والتذييل
   4) تجميل القائمة الجانبية
   يُحمَّل بعد style.css و pages.css و mt-video.css
   ========================================================================= */

/* =========================================================================
   1) نافذة التحويل إلى واتساب
   ========================================================================= */
html.mtwa-lock{overflow:hidden}

.mtwa-overlay{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(6,17,32,.72);
  backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility 0s linear .35s;
}
.mtwa-overlay.is-open{opacity:1;visibility:visible;transition-delay:0s,0s}

.mtwa-box{
  width:min(420px,100%);
  background:linear-gradient(170deg,#ffffff 0%,#f4f9ff 100%);
  border-radius:26px;
  padding:38px 30px 30px;
  text-align:center;
  box-shadow:0 30px 70px rgba(6,17,32,.4);
  transform:translateY(26px) scale(.94);
  transition:transform .45s cubic-bezier(.2,.8,.25,1);
}
.mtwa-overlay.is-open .mtwa-box{transform:none}

/* الأيقونة داخل حلقة العدّ */
.mtwa-ring{
  position:relative;width:128px;height:128px;margin:0 auto 24px;
}
.mtwa-ring-svg{width:100%;height:100%;transform:rotate(-90deg)}
.mtwa-track{fill:none;stroke:rgba(37,211,102,.16);stroke-width:8}
.mtwa-fill{
  fill:none;stroke:#25D366;stroke-width:8;stroke-linecap:round;
  stroke-dasharray:327;stroke-dashoffset:327;
  filter:drop-shadow(0 0 8px rgba(37,211,102,.55));
}
.mtwa-icon{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#25D366;
}
.mtwa-icon svg{width:56px;height:56px;animation:mtwaBeat 1.6s ease-in-out infinite}
@keyframes mtwaBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

/* موجة تتوسّع خلف الأيقونة */
.mtwa-ring::before,
.mtwa-ring::after{
  content:"";position:absolute;inset:14px;border-radius:50%;
  border:2px solid rgba(37,211,102,.4);
  animation:mtwaWave 2.4s ease-out infinite;
}
.mtwa-ring::after{animation-delay:1.2s}
@keyframes mtwaWave{
  0%{opacity:.8;transform:scale(.7)}
  100%{opacity:0;transform:scale(1.35)}
}

.mtwa-title{
  font-size:1.12rem;font-weight:800;color:#0B1C33;
  margin:0 0 10px;line-height:1.55;
}
.mtwa-sub{
  font-size:.92rem;color:#5b6b82;margin:0 0 22px;line-height:1.8;
}
.mtwa-count{
  display:inline-flex;align-items:baseline;gap:7px;
  padding:9px 22px;border-radius:999px;
  background:rgba(37,211,102,.1);
  border:1px solid rgba(37,211,102,.26);
  margin-bottom:22px;
}
.mtwa-num{font-size:1.6rem;font-weight:800;color:#1a9e4e;line-height:1;font-variant-numeric:tabular-nums}
.mtwa-unit{font-size:.82rem;font-weight:700;color:#1a9e4e}

.mtwa-skip{
  display:block;width:100%;
  padding:14px 20px;border:0;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:.98rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#25D366,#12a44f);
  box-shadow:0 12px 26px rgba(37,211,102,.34);
  transition:transform .25s ease,box-shadow .25s ease;
}
.mtwa-skip:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(37,211,102,.42)}
.mtwa-skip:active{transform:translateY(0)}

@media (max-width:480px){
  .mtwa-box{padding:30px 22px 24px;border-radius:22px}
  .mtwa-ring{width:112px;height:112px;margin-bottom:20px}
  .mtwa-icon svg{width:48px;height:48px}
  .mtwa-title{font-size:1.02rem}
}
@media (prefers-reduced-motion:reduce){
  .mtwa-ring::before,.mtwa-ring::after,.mtwa-icon svg{animation:none}
}

/* =========================================================================
   2) الاستمارات — تباعد أوضح ومربعات نصوص أريح
   ========================================================================= */
.modal-box{max-width:580px;border-radius:26px}
.modal-body{padding:28px 26px 26px}
.modal-header{padding:20px 26px 16px}

/* مسافة حقيقية بين الحقول تمنع التداخل */
.form-group{margin-bottom:22px}
.form-group:last-of-type{margin-bottom:8px}

.form-group label{
  font-size:.86rem;font-weight:700;margin-bottom:9px;
  letter-spacing:.01em;line-height:1.5;
}
.form-group input,
.form-group select,
.form-group textarea{
  padding:14px 16px;
  font-size:.95rem;
  line-height:1.7;
  border-radius:14px;
  border-width:1.5px;
}
.form-group textarea{min-height:96px;padding:14px 16px}
.form-group textarea.textarea-lg{min-height:140px}
.form-group select{padding-inline-end:40px}

/* الحقول ذات الأيقونة */
.input-wrap input,
.input-wrap select,
.input-wrap textarea{padding-right:48px}

/* صفوف الحقول المتجاورة */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
.form-row .form-group{margin-bottom:0}
@media (max-width:560px){.form-row{grid-template-columns:1fr;gap:0}
.form-row .form-group{margin-bottom:22px}}

/* رسالة الخطأ لا تلتصق بالحقل */
.form-group .field-error-msg{margin-top:7px;font-size:.8rem;line-height:1.6}

/* أزرار الإجراءات تأخذ مساحتها */
.modal-actions{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(11,28,51,.09);
}
.modal-actions .btn{flex:1 1 160px;padding-block:14px}

/* عرض التأكيد */
.confirm-view{padding:10px 0}
.confirm-view p{font-size:1rem;line-height:1.9;margin-bottom:6px}

/* معالج الأهلية المدمج في الصفحة */
.elig-inline-wizard .modal-body{padding:30px 28px}
.elig-inline-wizard .form-group{margin-bottom:24px}

/* مجموعات الأسئلة داخل المعالج */
.wizard-stage,.elig-stage{padding-block:6px}
.wizard-stage + .wizard-stage{margin-top:26px}

/* شريط المراحل */
.stage-head,.wizard-head{margin-bottom:22px}

@media (max-width:768px){
  .modal-body{padding:22px 18px}
  .modal-header{padding:18px 18px 14px}
  .form-group{margin-bottom:20px}
  .form-group input,.form-group select,.form-group textarea{font-size:16px;padding:14px 15px}
  .elig-inline-wizard .modal-body{padding:22px 18px}
  .modal-actions{margin-top:22px;padding-top:18px}
  .modal-actions .btn{flex:1 1 100%}
}

/* =========================================================================
   3) مسافات الأقسام والفيديوهات والصور والتذييل
   ========================================================================= */
main > .section,
main > section.section{padding-block:clamp(64px,7vw,110px)}

/* فاصل بين شرائح الصور وما حولها */
main > .mt-slider{
  margin-block:clamp(48px,6vw,86px);
}
/* لا نجمع مسافتين متتاليتين بين سلايدر وفيديو */
main > .mt-slider + .mtv-section{padding-top:clamp(28px,3.5vw,54px)}
main > .mtv-section + .mt-slider{margin-top:clamp(24px,3vw,46px)}

/* مسافة قبل التذييل */
main > *:last-child{margin-bottom:clamp(56px,7vw,104px)}
footer{padding-top:clamp(56px,6vw,92px)}

/* القسم الرئيسي والأهلية بعد التبديل */
#home{padding-block:clamp(64px,7vw,110px)}
#eligibility{scroll-margin-top:96px}

@media (max-width:768px){
  main > .section,main > section.section{padding-block:clamp(48px,9vw,72px)}
  main > .mt-slider{margin-block:clamp(36px,8vw,56px)}
  main > *:last-child{margin-bottom:clamp(44px,9vw,68px)}
  footer{padding-top:clamp(44px,8vw,64px)}
}

/* =========================================================================
   4) القائمة الجانبية — تجميل وتنظيم
   ========================================================================= */
#sidebar{
  background:linear-gradient(165deg,#0B1C33 0%,#0d2542 46%,#071527 100%);
  box-shadow:-24px 0 60px rgba(6,17,32,.42);
}
#sidebar::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 42% at 100% 0%,rgba(38,198,245,.16),transparent 62%);
}
.sidebar-head,#sidebar .sidebar-head{
  position:relative;padding:26px 22px 20px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
#sidebar .sidebar-close{
  width:38px;height:38px;border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;font-size:20px;line-height:1;
  transition:background .25s ease,transform .25s ease;
}
#sidebar .sidebar-close:hover{background:rgba(255,255,255,.16);transform:rotate(90deg)}

#sidebar .nav-list{position:relative;padding:16px 14px 28px;display:flex;flex-direction:column;gap:7px}
#sidebar .nav-item{margin:0}
#sidebar .nav-link{
  display:flex;align-items:center;gap:13px;
  padding:13px 15px;border-radius:14px;
  color:rgba(255,255,255,.9);font-weight:600;font-size:.96rem;
  border:1px solid transparent;
  background:rgba(255,255,255,.03);
  transition:background .28s ease,border-color .28s ease,transform .28s ease,color .28s ease;
}
#sidebar .nav-link:hover,
#sidebar .nav-link:focus-visible{
  background:rgba(38,198,245,.13);
  border-color:rgba(38,198,245,.32);
  color:#fff;transform:translateX(-4px);
}
#sidebar .nav-link .icon-3d{
  width:36px;height:36px;flex:0 0 36px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(38,198,245,.22),rgba(29,111,224,.16));
  border:1px solid rgba(38,198,245,.26);
  color:#26C6F5;
  transition:background .28s ease,color .28s ease;
}
#sidebar .nav-link:hover .icon-3d{
  background:linear-gradient(140deg,#26C6F5,#1D6FE0);color:#04121f;
}
#sidebar .nav-link .icon-3d svg{width:19px;height:19px}

/* بطاقة أوقات العمل داخل القائمة */
.sidebar-hours{
  position:relative;margin:6px 14px 22px;padding:16px 16px 14px;
  border-radius:16px;
  background:linear-gradient(150deg,rgba(38,198,245,.12),rgba(11,28,51,.5));
  border:1px solid rgba(38,198,245,.24);
}
.sidebar-hours-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sidebar-hours-head .icon-3d{
  width:34px;height:34px;flex:0 0 34px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#26C6F5,#1D6FE0);color:#04121f;
}
.sidebar-hours-head .icon-3d svg{width:18px;height:18px}
.sidebar-hours-head h4{margin:0;font-size:.95rem;font-weight:800;color:#fff}
.sidebar-hours-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 0;font-size:.83rem;line-height:1.6;
  border-top:1px dashed rgba(255,255,255,.12);
}
.sidebar-hours-row:first-of-type{border-top:0}
.sidebar-hours-row span:first-child{color:rgba(255,255,255,.72);font-weight:600}
.sidebar-hours-row span:last-child{color:#26C6F5;font-weight:700;white-space:nowrap}
.sidebar-hours-row.off span:last-child{color:#FFB4A8}

@media (max-width:480px){
  #sidebar .nav-link{padding:12px 13px;font-size:.92rem}
  #sidebar .nav-link .icon-3d{width:33px;height:33px;flex-basis:33px}
}