/* =========================================================
   MB GLOBAL CSS (RTL / Urdu)
   Rules:
   - Hero image always on top on mobile
   - Short text: side-by-side layout
   - Long text: add .mb-row--long (or .mb-row--stacked) => image top, text bottom
   - Grid blocks are not affected
   - Mobile table scroll is mandatory via .mb-table-wrap
========================================================= */

.mb-article{
  --mb-bg:#ffffff;
  --mb-text:#101828;
  --mb-muted:#475467;
  --mb-heading:#023974;
  --mb-blue:#2A5BE8;
  --mb-blue-hover:#1F49C3;
  --mb-orange:#EF6A22;
  --mb-orange-hover:#CF5518;
  --mb-grad-dark:#0f0b0a;
  --mb-grad-red:#8f1e00;
  --mb-grad-orange:#f24a11;
  --mb-border:#d9e0ea;
  --mb-shadow:0 10px 24px rgba(2,24,58,.08);
  --mb-radius:18px;
  --mb-gap:24px;
  --mb-max:1240px;

  max-width:var(--mb-max);
  margin:0 auto;
  padding:18px;
  background:var(--mb-bg);
  color:var(--mb-text);
  font-family:"Noto Naskh Arabic","Noto Nastaliq Urdu","Segoe UI",Tahoma,Arial,sans-serif;
  font-size:16px;
  line-height:1.9;
  text-align:right;
  direction:rtl;
}

.mb-article,
.mb-article *{
  box-sizing:border-box;
}

.mb-article h1,
.mb-article h2,
.mb-article h3,
.mb-article h4,
.mb-article h5,
.mb-article h6{
  margin:0 0 12px;
  color:var(--mb-heading);
  font-weight:800;
  line-height:1.38;
}

.mb-article h1{ font-size:clamp(1.75rem,2.6vw,2.45rem); }
.mb-article h2{ font-size:clamp(1.42rem,2.1vw,1.95rem); }
.mb-article h3{ font-size:clamp(1.2rem,1.85vw,1.56rem); }
.mb-article h4{ font-size:clamp(1.06rem,1.5vw,1.26rem); }
.mb-article h5{ font-size:1.04rem; }
.mb-article h6{ font-size:1rem; }

.mb-article p{ margin:0 0 12px; }
.mb-article ol,
.mb-article ul{
  margin:0 0 10px;
  padding-inline-start:24px;
}
.mb-article li{ margin:0 0 8px; }

.mb-article .mb-row > *,
.mb-article .mb-copy,
.mb-article .mb-media,
.mb-article .mb-cta,
.mb-article .mb-slot,
.mb-article .mb-mini{
  min-width:0;
}

/* Main content row */
.mb-article .mb-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:center;
  gap:var(--mb-gap);
  margin:0 0 22px;
  padding:18px;
  background:#fff;
  border:1px solid var(--mb-border);
  border-radius:var(--mb-radius);
  box-shadow:var(--mb-shadow);
  overflow:hidden;
}

.mb-article .mb-row::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:5px;
  background:linear-gradient(90deg,var(--mb-grad-dark) 0%, var(--mb-grad-red) 45%, var(--mb-grad-orange) 100%);
}

/* Reverse layout (desktop only) */
.mb-article .mb-row--reverse .mb-media,
.mb-article .mb-row.reverse .mb-media{
  order:1;
}
.mb-article .mb-row--reverse .mb-copy,
.mb-article .mb-row.reverse .mb-copy{
  order:2;
}

/* Long text helper: image top, text bottom */
.mb-article .mb-row--long,
.mb-article .mb-row--stacked,
.mb-article .mb-row.is-long,
.mb-article .mb-row.stacked{
  grid-template-columns:1fr;
  gap:16px;
}
.mb-article .mb-row--long .mb-media,
.mb-article .mb-row--stacked .mb-media,
.mb-article .mb-row.is-long .mb-media,
.mb-article .mb-row.stacked .mb-media{
  order:1;
}
.mb-article .mb-row--long .mb-copy,
.mb-article .mb-row--stacked .mb-copy,
.mb-article .mb-row.is-long .mb-copy,
.mb-article .mb-row.stacked .mb-copy{
  order:2;
}

/* Hero block */
.mb-article .mb-hero{
  border-color:#d9e5ff;
  background:linear-gradient(180deg,#fff 0%,#f7faff 100%);
}

.mb-article .mb-media{
  position:relative;
}

.mb-article .mb-image-link{
  display:block;
  border-radius:var(--mb-radius);
  overflow:hidden;
  text-decoration:none;
  background:#fff;
  border:1px solid #dfe6f1;
  box-shadow:
    0 14px 32px rgba(2,24,58,.14),
    0 4px 12px rgba(2,24,58,.08);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.mb-article .mb-image-link:hover{
  transform:translateY(-2px);
  box-shadow:
    0 18px 36px rgba(2,24,58,.18),
    0 6px 14px rgba(2,24,58,.10);
  filter:brightness(.995);
}

.mb-article .mb-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:inherit;
}

.mb-article .mb-note{
  margin-top:8px;
  border-inline-start:4px solid var(--mb-orange);
  background:#fff7f2;
  color:#7a2e0f;
  border-radius:10px;
  padding:10px 12px;
}

/* CTA */
.mb-article .mb-cta-wrap{
  margin:8px 0 22px;
}

.mb-article .mb-cta{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  padding:16px 18px;
  border-radius:16px;
  border:1px solid #d7def0;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(239,106,34,.22) 0%, rgba(239,106,34,0) 45%),
    linear-gradient(90deg, rgba(15,11,10,.96) 0%, rgba(143,30,0,.94) 55%, rgba(242,74,17,.92) 100%);
  box-shadow:0 12px 30px rgba(16,10,8,.22);
}

.mb-article .mb-cta::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 15%,rgba(255,255,255,.14) 50%,transparent 85%);
  transform:translateX(-120%);
  animation:mbCtaSweep 3.8s linear infinite;
  pointer-events:none;
}

@keyframes mbCtaSweep{
  100%{ transform:translateX(130%); }
}

.mb-article .mb-cta-title{
  margin:0;
  color:#fff;
  font-size:1.05rem;
  font-weight:800;
}

.mb-article .mb-btn{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  white-space:nowrap;
  color:#fff;
  font-weight:800;
  border-radius:12px;
  padding:12px 18px;
  background:linear-gradient(135deg,var(--mb-blue) 0%, #3e75ff 48%, var(--mb-blue) 100%);
  box-shadow:0 10px 24px rgba(42,91,232,.45);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.mb-article .mb-btn::before{
  content:"";
  position:absolute;
  top:-2px;
  bottom:-2px;
  left:-42%;
  width:34%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:mbBtnShine 2.9s linear infinite;
  z-index:-1;
}

@keyframes mbBtnShine{
  100%{ left:135%; }
}

.mb-article .mb-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(42,91,232,.52);
  filter:brightness(.96);
}

/* Slots / cards grid */
.mb-article .mb-slot-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;
  margin:8px 0 22px;
}

.mb-article .mb-slot{
  grid-column:span 4;
  border:1px solid var(--mb-border);
  border-radius:14px;
  background:#fff;
  padding:12px;
  box-shadow:0 8px 22px rgba(2,57,116,.06);
}

.mb-article .mb-slot h4{
  margin:10px 0 8px;
  color:var(--mb-heading);
}
.mb-article .mb-slot p{ margin:0; }

.mb-article .mb-mini-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:8px;
}

.mb-article .mb-mini{
  border:1px solid var(--mb-border);
  border-radius:12px;
  background:#fff;
  padding:12px;
}

.mb-article .mb-mini h6{ margin:0 0 8px; }
.mb-article .mb-mini p{ margin:0; }

/* FAQ */
.mb-article .mb-faq{
  border:1px solid var(--mb-border);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  margin-top:8px;
}

.mb-article .mb-faq details{
  border-bottom:1px solid var(--mb-border);
  background:#fff;
}

.mb-article .mb-faq details:last-child{
  border-bottom:0;
}

.mb-article .mb-faq summary{
  position:relative;
  display:block;
  width:100%;
  cursor:pointer;
  list-style:none !important;
  text-align:right;
  color:var(--mb-heading);
  font-weight:800;
  line-height:1.55;
  padding:16px 58px 16px 16px;
  outline:none;
  user-select:none;
}

.mb-article .mb-faq summary::-webkit-details-marker{ display:none !important; }
.mb-article .mb-faq summary::marker{ content:"" !important; }
.mb-article .mb-faq summary::before,
.mb-article .mb-faq summary::after{ content:none !important; }

.mb-article .mb-faq-icon{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid #cfe0ff;
  background:#eaf1ff;
  display:grid;
  place-items:center;
  color:var(--mb-heading);
  font-size:18px;
  line-height:1;
  font-weight:900;
  pointer-events:none;
}

.mb-article .mb-faq-icon::before{ content:"+"; }
.mb-article .mb-faq details[open] > summary .mb-faq-icon::before{ content:"−"; }

.mb-article .mb-answer{
  padding:0 16px 14px 16px;
  color:var(--mb-text);
  line-height:1.85;
}

/* FAQ order fix */
.mb-article #faq{
  display:grid;
  grid-template-columns:1fr;
}
.mb-article #faq .mb-copy,
.mb-article #faq .mb-media,
.mb-article #faq .mb-faq{
  grid-column:1 / -1;
}
.mb-article #faq .mb-copy{ order:1; }
.mb-article #faq .mb-media{ order:2; }
.mb-article #faq .mb-faq{ order:3; }

/* Tables (wrap every table in .mb-table-wrap) */
.mb-article .mb-table-wrap{
  margin:18px 0 22px;
  max-width:100%;
}

.mb-article .mb-table-wrap > table.mb-table,
.mb-article .mb-table-wrap > table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  color:var(--mb-text);
  border:1px solid var(--mb-border);
  border-radius:14px;
  overflow:hidden;
}

.mb-article .mb-table-wrap > table caption{
  caption-side:top;
  text-align:right;
  color:var(--mb-heading);
  font-weight:800;
  padding:10px 12px 8px;
}

.mb-article .mb-table-wrap > table th,
.mb-article .mb-table-wrap > table td{
  padding:10px 12px;
  border-bottom:1px solid var(--mb-border);
  border-inline-start:1px solid var(--mb-border);
  vertical-align:top;
  text-align:right;
  line-height:1.65;
  background:#fff;
}

.mb-article .mb-table-wrap > table th:first-child,
.mb-article .mb-table-wrap > table td:first-child{
  border-inline-start:0;
}

.mb-article .mb-table-wrap > table thead th{
  background:#f7faff;
  color:var(--mb-heading);
  font-weight:800;
}

.mb-article .mb-table-wrap > table tr:last-child td{
  border-bottom:0;
}

/* Responsive */
@media (max-width:1100px){
  .mb-article .mb-row{
    grid-template-columns:1fr;
    gap:16px;
  }

  .mb-article .mb-row .mb-media{
    order:1 !important;
  }
  .mb-article .mb-row .mb-copy{
    order:2 !important;
  }

  .mb-article #faq .mb-copy{ order:1 !important; }
  .mb-article #faq .mb-media{ order:2 !important; }
  .mb-article #faq .mb-faq{ order:3 !important; }

  .mb-article .mb-slot-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .mb-article .mb-slot{
    grid-column:span 1 !important;
  }

  .mb-article .mb-mini-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:767px){
  .mb-article{
    padding:12px;
    font-size:16px;
    line-height:1.82;
  }

  .mb-article .mb-row{
    padding:12px;
    margin-bottom:16px;
    border-radius:14px;
  }

  /* Hero image always on top */
  .mb-article .mb-hero .mb-media{
    order:1 !important;
  }
  .mb-article .mb-hero .mb-copy{
    order:2 !important;
  }

  .mb-article .mb-cta{
    flex-direction:column;
    align-items:stretch;
  }
  .mb-article .mb-btn{
    width:100%;
  }

  .mb-article .mb-slot-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .mb-article .mb-faq summary{
    padding:14px 52px 14px 14px;
    font-size:1.02rem;
  }

  .mb-article .mb-faq-icon{
    right:12px;
    width:22px;
    height:22px;
    font-size:16px;
  }

  .mb-article .mb-image-link{
    box-shadow:
      0 10px 24px rgba(2,24,58,.13),
      0 3px 9px rgba(2,24,58,.08);
  }

  .mb-article .mb-image-link:hover{
    transform:none;
    box-shadow:
      0 12px 26px rgba(2,24,58,.15),
      0 4px 10px rgba(2,24,58,.09);
  }

  /* Mandatory horizontal scroll for tables */
  .mb-article .mb-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:14px;
  }

  .mb-article .mb-table-wrap > table.mb-table,
  .mb-article .mb-table-wrap > table{
    min-width:560px;
    margin:0;
  }

  .mb-article .mb-table-wrap > table th,
  .mb-article .mb-table-wrap > table td{
    white-space:nowrap;
  }
}

/* Smart layout fallback aliases + center copy */
.mb-article .mb-row--stack{
  grid-template-columns:1fr;
  gap:16px;
}
.mb-article .mb-row--stack .mb-media{ order:1; }
.mb-article .mb-row--stack .mb-copy{ order:2; }
.mb-article .mb-row .mb-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Optional auto-stack for content-heavy rows (does not affect hero) */
@supports selector(.mb-row:has(.mb-copy p:nth-of-type(4))){
  .mb-article .mb-row:not(.mb-hero):not(.mb-row--long):not(.mb-row--stacked):not(.mb-row--stack):has(.mb-copy .mb-table-wrap),
  .mb-article .mb-row:not(.mb-hero):not(.mb-row--long):not(.mb-row--stacked):not(.mb-row--stack):has(.mb-copy ol li:nth-child(4)),
  .mb-article .mb-row:not(.mb-hero):not(.mb-row--long):not(.mb-row--stacked):not(.mb-row--stack):has(.mb-copy ul li:nth-child(5)),
  .mb-article .mb-row:not(.mb-hero):not(.mb-row--long):not(.mb-row--stacked):not(.mb-row--stack):has(.mb-copy p:nth-of-type(4)){
    grid-template-columns:1fr;
    gap:16px;
  }
  .mb-article .mb-row:not(.mb-hero):not(.mb-row--long):not(.mb-row--stacked):not(.mb-row--stack):has(.mb-copy .mb-table-wrap) .mb-media,
  .mb-article .mb-row:not(.mb-hero):not(.mb-row--long):not(.mb-row--stacked):not(.mb-row--stack):has(.mb-copy ol li:nth-child(4)) .mb-media,
  .mb-article .mb-row:not(.mb-hero):not(.mb-row--long):not(.mb-row--stacked):not(.mb-row--stack):has(.mb-copy ul li:nth-child(5)) .mb-media,
  .mb-article .mb-row:not(.mb-hero):not(.mb-row--long):not(.mb-row--stacked):not(.mb-row--stack):has(.mb-copy p:nth-of-type(4)) .mb-media{
    order:1;
  }
  .mb-article .mb-row:not(.mb-hero):not(.mb-row--long):not(.mb-row--stacked):not(.mb-row--stack):has(.mb-copy .mb-table-wrap) .mb-copy,
  .mb-article .mb-row:not(.mb-hero):not(.mb-row--long):not(.mb-row--stacked):not(.mb-row--stack):has(.mb-copy ol li:nth-child(4)) .mb-copy,
  .mb-article .mb-row:not(.mb-hero):not(.mb-row--long):not(.mb-row--stacked):not(.mb-row--stack):has(.mb-copy ul li:nth-child(5)) .mb-copy,
  .mb-article .mb-row:not(.mb-hero):not(.mb-row--long):not(.mb-row--stacked):not(.mb-row--stack):has(.mb-copy p:nth-of-type(4)) .mb-copy{
    order:2;
  }
}

/* Grid orphan-card polish */
.mb-article .mb-slot-grid > .mb-slot:last-child:nth-child(3n+1){
  grid-column:1 / -1;
}
.mb-article .mb-slot-grid > .mb-slot:nth-last-child(2):nth-child(3n+1),
.mb-article .mb-slot-grid > .mb-slot:last-child:nth-child(3n+2){
  grid-column:span 6;
}
.mb-article .mb-mini-grid > .mb-mini:last-child:nth-child(odd){
  grid-column:1 / -1;
}
@media (max-width:1100px){
  .mb-article .mb-slot-grid > .mb-slot:last-child:nth-child(odd){
    grid-column:1 / -1 !important;
  }
  .mb-article .mb-mini-grid > .mb-mini:last-child:nth-child(odd){
    grid-column:1 / -1;
  }
}