body{
  font-family:'Tajawal',sans-serif;
  background:#fff;
  color:#003B71;
  line-height:1.6;
  margin:0;

  /* ✅ المسار الصح */
  background-image:url('../image/ready.png');
  background-repeat:repeat;
  background-size:150px auto;
}

/* ===== التصميم الجديد: خلفية تملأ كل الصفحة، وكل المحتوى فوقها ===== */
.comp-body-new{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  background:#fff;
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
  box-sizing:border-box;
}
.comp-body-new .container.main-content-wrap{
  width:100%;
  max-width:min(520px, 100%);
  margin-left:auto;
  margin-right:auto;
  padding-left:max(1rem, env(safe-area-inset-left));
  padding-right:max(1rem, env(safe-area-inset-right));
  box-sizing:border-box;
}

/* طبقة الخلفية (النقش) تملأ كل مكان بالصفحة وتكون تحت كل شيء */
.comp-body-new::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:#fff url('../image/ready.png') repeat;
  background-size:150px auto;
  pointer-events:none;
}

.hero-header{
  color:#fff;
  position:relative;
  z-index:1;
  padding:1rem 0.75rem 1rem;
  overflow:hidden;
  min-height:160px;
}

/* 1) الخلفية الرأسية: أزرق يمتد حتى نهاية الهيدر (أولاً) */
.hero-bg{
  position:absolute;
  inset:0;
  background:#1A4081;
  z-index:0;
}

/* النقاط على الخلفية (تتلاشى في أول ربع) */
.hero-dots{
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.45) 1.5px, transparent 1.5px);
  background-size:12px 12px;
  opacity:.9;
  pointer-events:none;
  z-index:0;
  mask-image:linear-gradient(to right, black 0%, rgba(0,0,0,.4) 15%, transparent 25%);
  -webkit-mask-image:linear-gradient(to right, black 0%, rgba(0,0,0,.4) 15%, transparent 25%);
  mask-size:100% 100%;
  -webkit-mask-size:100% 100%;
}

.hero-inner{
  position:relative;
  z-index:1;
}

.hero-banner{
  max-width:100%;
  width:auto;
  max-height:92px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}
.hero-logo-moci{
  max-height:80px;
  width:auto;
}

.hero-fallback .hero-logo{
  height:34px;
  width:auto;
  margin-bottom:.4rem;
  filter:brightness(0) invert(1);
}

/* النص تحت الشعار بالأبيض */
.hero-caption{
  margin-top:.35rem;
}

.hero-caption-title{
  font-size:1.05rem;
  font-weight:700;
  margin:0;
  color:#fff;
  display:block;
}

.hero-caption-subtitle{
  font-size:.75rem;
  color:rgba(255,255,255,.9);
  display:block;
  margin-top:.15rem;
}

/* التموج مرفوع على الخط الفاصل بين بلوك 1 و بلوك 2 */
.hero-wave{
  display:block;
  width:100%;
  height:100px;
  line-height:0;
  pointer-events:none;
  z-index:2;
  position:relative;
  background:transparent;
  margin-top:-50px;
}
.comp-body-new .steps{
  margin-top:-50px;
  position:relative;
  z-index:1;
}

/* التموج يعلو النقش دون حد: المحتوى يبدأ تحت الموجة والموجة فوق الخلفية */
.comp-body-new .main-content-wrap{
  margin-top:-1px;
  position:relative;
  z-index:1;
}

.compensation-logo-above-steps{
  padding:0.5rem 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(0.1rem, 0.8vw, 0.25rem);
}
/* شعار واحد (صورة تحتوي الوجه + النص معاً، مثل paci-logo-header.png) */
.compensation-logo-single{
  flex-direction:column;
  gap:0;
}
.compensation-logo-single .logo-header-full{
  width:100%;
  max-width:min(320px, 85vw);
  height:auto;
  max-height:140px;
  object-fit:contain;
  margin:0;
  align-self:center;
}
.compensation-hero-img{
  width:clamp(80px, 22vw, 120px);
  height:auto;
  max-height:clamp(80px, 22vw, 120px);
  object-fit:contain;
  margin-inline-start:0;
  margin-inline-end:-0.15em;
  margin-top:-0.35em;
  align-self:flex-start;
  flex-shrink:0;
}
.compensation-moci-text{
  direction:rtl;
  text-align:right;
  color:#003B71;
  font-weight:700;
  line-height:1.35;
}
.moci-text-ar{
  font-size:clamp(0.95rem, 2.2vw + 0.6rem, 1.2rem);
  margin-bottom:0.15rem;
}
.moci-text-en{
  font-size:clamp(0.8rem, 1.8vw + 0.5rem, 1rem);
  font-weight:600;
  margin-bottom:0.1rem;
  color:#1A4081;
}
.moci-text-state{
  font-size:clamp(0.7rem, 1.4vw + 0.4rem, 0.85rem);
  font-weight:500;
  color:#555;
}
.comp-body-new .page-heading{
  color:#1A4081;
  font-weight:800;
  font-size:1.35rem;
  margin-bottom:1.25rem;
  line-height:1.3;
}
/* زبط أبعاد النموذج */
.comp-body-new .main-content-wrap .mb-3{
  margin-bottom:1rem !important;
}
.comp-body-new .form-label{
  font-size:0.95rem;
  margin-bottom:0.4rem;
}
.comp-body-new .form-control.pill,
.comp-body-new .form-select.pill{
  font-size:1rem;
  line-height:1.5;
}
.comp-body-new .main-content-wrap{
  padding-top:1.25rem !important;
  padding-bottom:1.5rem !important;
}

/* ===== Header (للصفحات التي لا تستخدم التصميم الجديد) ===== */
.header{
  background:#003B71;
  color:#eaefec;
  position:relative;
  overflow:hidden;
}

.header::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px);
  background-size:10px 10px;
  opacity:.18;
  z-index:0;
}

.header *{
  position:relative;
  z-index:1;
}

.header h1{font-size:20px;font-weight:700;margin:0;}
.header small{font-size:14px;color:#dce3e0;}

/* ===== Steps ===== */
.steps .step-circle{
  width:40px;height:40px;border-radius:50%;
  background:#e0e0e0;color:#003B71;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:18px;
}
.steps .step-circle.active{background:#00509e;color:#fff;}
.steps .dots{font-size:24px;color:#999;line-height:1;}

/* ===== container ===== */
.container{max-width:520px;}
h2{color:#003B71;}
.form-label{color:#003B71;margin-right:5px;}

/* ===== Inputs ===== */
.pill,
.form-control.pill,
.form-select.pill{
  border:2px solid #003B71 !important;
  border-radius:999px !important;
  padding:12px 14px !important;
  width:100% !important;
  background:#fff !important;
  color:#003B71 !important;
  text-align:right !important;
  direction:rtl !important;
  min-height:46px !important;
}

/* التصميم الجديد: حقول بحد رفيع أزرق وزوايا مستديرة */
.comp-body-new .pill,
.comp-body-new .form-control.pill,
.comp-body-new .form-select.pill{
  border:1.5px solid #1A4081 !important;
  border-radius:12px !important;
  padding:12px 16px !important;
  min-height:48px !important;
}

.comp-body-new .form-label{
  color:#1A4081;
  font-weight:700;
  margin-bottom:6px;
}

/* textarea */
.textarea-pill{
  border:2px solid #003B71 !important;
  border-radius:18px !important;
  padding:12px 14px !important;
  width:100% !important;
  background:#fff !important;
  color:#003B71 !important;
  text-align:right !important;
  direction:rtl !important;
  min-height:120px !important;
}

.comp-body-new .textarea-pill{
  border:1.5px solid #1A4081 !important;
  border-radius:12px !important;
  padding:12px 16px !important;
  min-height:120px !important;
}

/* ===== Readonly ===== */
input.pill.report-readonly{
  background:#e6eaef !important;
  border-color:#c9d1da !important;
  color:#4b5563 !important;
  font-weight:800 !important;
  opacity:1 !important;
  -webkit-text-fill-color:#4b5563 !important;
}

.comp-body-new input.pill.report-readonly{
  border:1.5px solid #1A4081 !important;
  background:#f0f4f8 !important;
  border-radius:12px !important;
}

/* ===== Amount (نظيف بدون تضارب) ===== */
.amount-row{
  display:flex;
  align-items:center;
  gap:10px;
  direction:rtl;
}

.amount-input{
  border:2px solid #003B71 !important;
  border-radius:999px !important;
  background:#fff !important;
  padding:12px 14px !important;
  min-height:46px !important;
  width:110px !important;
  max-width:110px !important;
  flex:0 0 110px !important;
  text-align:right !important;
}

.comp-body-new .amount-input{
  border:1.5px solid #1A4081 !important;
  border-radius:12px !important;
  min-height:48px !important;
}

.amount-currency{
  font-weight:700;
  color:#003B71;
  white-space:nowrap;
  direction:ltr;
}

.comp-body-new .amount-currency{
  color:#1A4081;
}

.comp-body-new .steps .step-circle.active{
  background:#1A4081;
  color:#fff;
}

.comp-body-new .btn.pill-btn{
  background:#1A4081 !important;
}

.comp-body-new .btn.pill-btn:not(:disabled):hover{
  background:#0f2d5c !important;
}

/* ===== تنسيق أبعاد الصفحة: كمبيوتر | تابلت | موبايل ===== */
@media (max-width: 768px) {
  .hero-header{ min-height:130px; padding:0.65rem 0.75rem; }
  .hero-wave{ height:80px; margin-top:-40px; }
  .comp-body-new .steps{ margin-top:-40px; }
  .comp-body-new .container.main-content-wrap{ max-width:100%; padding-left:max(1rem, env(safe-area-inset-left)); padding-right:max(1rem, env(safe-area-inset-right)); }
  .compensation-logo-above-steps{ padding:0.5rem 0.75rem; gap:0.75rem; }
  .compensation-hero-img{ width:95px; max-height:95px; margin-inline-start:0; margin-inline-end:0.25rem; }
  .moci-text-ar{ font-size:1.05rem; }
  .moci-text-en{ font-size:0.88rem; }
  .moci-text-state{ font-size:0.75rem; }
  .comp-body-new .page-heading{ font-size:1.2rem; margin-bottom:1rem; }
  .comp-body-new .form-label{ font-size:0.9rem; }
  .comp-body-new .form-control.pill{ font-size:0.95rem; min-height:46px !important; }
  .comp-body-new .main-content-wrap .mb-3{ margin-bottom:0.9rem !important; }
}
@media (max-width: 576px) {
  .header h1{font-size:18px;}
  .hero-title{font-size:1rem;}
  .hero-fallback .hero-logo{height:34px;}
  .hero-banner{max-height:95px;}
  .hero-header{
    padding:0.5rem 0.6rem;
    min-height:110px;
  }
  .hero-wave{ height:70px; margin-top:-35px; }
  .comp-body-new .steps{ margin-top:-35px; margin-bottom:0.75rem !important; }
  .comp-body-new .container.main-content-wrap{ max-width:100%; padding-left:max(0.75rem, env(safe-area-inset-left)); padding-right:max(0.75rem, env(safe-area-inset-right)); }
  .compensation-logo-above-steps{
    flex-direction:column;
    padding:0.35rem 0.6rem;
    gap:0.5rem;
  }
  .compensation-hero-img{
    width:88px;
    max-height:88px;
    margin-inline-start:0;
  }
  .compensation-moci-text{ text-align:center; }
  .moci-text-ar{ font-size:0.98rem; }
  .moci-text-en{ font-size:0.82rem; }
  .moci-text-state{ font-size:0.7rem; }
  .comp-body-new .page-heading{ font-size:1.15rem; margin-bottom:0.9rem; }
  .comp-body-new .form-label{ font-size:0.9rem; margin-bottom:0.35rem; }
  .comp-body-new .form-control.pill,
  .comp-body-new .form-select.pill{
    font-size:0.95rem;
    min-height:46px !important;
    padding:10px 14px !important;
  }
  .comp-body-new .main-content-wrap{ padding-top:1rem !important; padding-bottom:1.25rem !important; }
  .comp-body-new .main-content-wrap .mb-3{ margin-bottom:0.85rem !important; }
  .steps .step-circle{width:36px;height:36px;font-size:16px;}
  .amount-input{
    width:90px !important;
    max-width:90px !important;
    flex:0 0 90px !important;
  }
  .comp-body-new .amount-input{
    width:90px !important;
    max-width:90px !important;
    flex:0 0 90px !important;
  }
}
@media (max-width: 380px) {
  .hero-header{ min-height:100px; padding:0.5rem; }
  .hero-wave{ height:60px; margin-top:-30px; }
  .comp-body-new .steps{ margin-top:-30px; }
  .compensation-hero-img{ width:76px; max-height:76px; }
  .moci-text-ar{ font-size:0.9rem; }
  .moci-text-en{ font-size:0.75rem; }
  .moci-text-state{ font-size:0.62rem; }
  .comp-body-new .page-heading{ font-size:1rem; }
  .comp-body-new .container.main-content-wrap{ max-width:100%; padding-left:max(0.6rem, env(safe-area-inset-left)); padding-right:max(0.6rem, env(safe-area-inset-right)); }
}
/* =========================
   ✅ Next Button (بيضاوي + طافي لما disabled)
========================= */
.pill-btn{
  border-radius:999px !important;
  padding:12px 14px !important;
  font-weight:800 !important;
  border:none !important;
}

/* افتراضي: زر Bootstrap بيكون أزرق، بس احنا نثبته على لون الهيئة */
.btn.pill-btn{
  background:#003B71 !important;
  color:#fff !important;
}

/* ✅ طافي لما disabled */
.btn.pill-btn:disabled{
  background:#003B71 !important;
  color:#fff !important;
  opacity:.45 !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
}

/* ✅ لما يفتح */
.btn.pill-btn:not(:disabled){
  opacity:1 !important;
  cursor:pointer !important;
}

.btn.pill-btn:not(:disabled):hover{
  background:#00509e !important;
}