/* ============================================================
   MOSTBET-LIKE GLOBAL CSS (Elementor + Urdu/RTL) — FULL
   Safe for Hello Elementor child theme / Additional CSS
   Scope:
   - UI wrappers: .mb-ui / .mb-topbar / .mb-header / .mb-navpill / .mb-page-strip / .mb-footer
   - Content: .mb-article / .mbpk-article / .mbpk-page .mb-article
   Includes: smart rows, hero, CTA, grids/cards, lists, FAQ, tables (mobile scroll)
   ============================================================ */

/* ---------------------------
   Design tokens (safe globals)
---------------------------- */
:root{
  --mb-bg:#ffffff;
  --mb-surface:#ffffff;
  --mb-text:#101828;
  --mb-muted:#475467;

  --mb-heading:#023974;
  --mb-primary:#023974;
  --mb-primary-2:#1d5bbf;
  --mb-accent:#ef6a22;

  --mb-nav:#071526;
  --mb-nav-2:#0b2342;

  --mb-border:rgba(16,24,40,.14);
  --mb-soft:rgba(2,57,116,.06);

  --mb-radius-xs:10px;
  --mb-radius-sm:14px;
  --mb-radius:18px;
  --mb-radius-lg:24px;

  --mb-shadow-sm:0 10px 18px rgba(16,24,40,.06);
  --mb-shadow:0 16px 36px rgba(16,24,40,.10);

  --mb-container:1160px;

  --mb-gap-1:10px;
  --mb-gap-2:14px;
  --mb-gap-3:18px;
  --mb-gap-4:24px;
  --mb-gap-5:32px;

  --mb-pad-1:12px;
  --mb-pad-2:16px;
  --mb-pad-3:20px;
  --mb-pad-4:26px;
  --mb-pad-5:34px;

  --mb-ease:cubic-bezier(.2,.8,.2,1);
  --mb-speed:180ms;

  --mb-focus:rgba(29,91,191,.28);
}

/* ---------------------------
   Helpers
---------------------------- */
.mb-sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

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

.mb-ui a:focus-visible,
.mb-ui button:focus-visible,
.mb-ui summary:focus-visible,
.mb-ui [tabindex]:focus-visible{
  outline:3px solid var(--mb-focus);
  outline-offset:3px;
  border-radius:12px;
}

/* ============================================================
   UI (Header / Topbar / Nav Pill / Page Strip / Footer)
   Use these classes in your header/footer templates for styling.
   ============================================================ */

/* Topbar */
.mb-topbar{
  background:linear-gradient(90deg, var(--mb-nav), var(--mb-nav-2));
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.mb-topbar__inner{
  max-width:var(--mb-container);
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.mb-topbar__left,
.mb-topbar__right{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.mb-topbar a{
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:600;
  font-size:13px;
}
.mb-topbar a:hover{ color:#fff; }
.mb-topbar__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  font-size:12px;
  white-space:nowrap;
}

/* Header */
.mb-header{
  background:#fff;
  border-bottom:1px solid var(--mb-border);
}
.mb-header__inner{
  max-width:var(--mb-container);
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.mb-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.mb-brand__logo{
  display:block;
  width:auto;
  height:34px;
}
.mb-brand__title{
  font-weight:900;
  letter-spacing:.2px;
  color:var(--mb-heading);
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mb-header__actions{
  display:flex;
  gap:10px;
  align-items:center;
}

/* Nav pill */
.mb-navpill{
  max-width:var(--mb-container);
  margin:0 auto;
  padding:0 16px 16px;
}
.mb-navpill__wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  padding:12px;
  background:linear-gradient(180deg, rgba(2,57,116,.06), rgba(2,57,116,.03));
  border:1px solid var(--mb-border);
  border-radius:999px;
  box-shadow:var(--mb-shadow-sm);
}
.mb-navpill a{
  text-decoration:none;
  color:var(--mb-heading);
  font-weight:800;
  font-size:13px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  transition:transform var(--mb-speed) var(--mb-ease), background var(--mb-speed) var(--mb-ease), border-color var(--mb-speed) var(--mb-ease);
  white-space:nowrap;
}
.mb-navpill a:hover{
  background:rgba(2,57,116,.08);
  border-color:rgba(2,57,116,.12);
  transform:translateY(-1px);
}
.mb-navpill a.is-active{
  background:linear-gradient(180deg, rgba(2,57,116,.12), rgba(2,57,116,.08));
  border-color:rgba(2,57,116,.18);
}

/* Page title strip */
.mb-page-strip{
  background:linear-gradient(90deg, rgba(2,57,116,.08), rgba(239,106,34,.06));
  border-top:1px solid var(--mb-border);
  border-bottom:1px solid var(--mb-border);
}
.mb-page-strip__inner{
  max-width:var(--mb-container);
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.mb-page-strip__title{
  margin:0;
  font-weight:1000;
  color:var(--mb-heading);
  font-size:18px;
  letter-spacing:.2px;
}
.mb-breadcrumbs{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--mb-muted);
}
.mb-breadcrumbs a{
  color:var(--mb-muted);
  text-decoration:none;
  font-weight:700;
}
.mb-breadcrumbs a:hover{ color:var(--mb-heading); }

/* Footer */
.mb-footer{
  background:linear-gradient(180deg, rgba(7,21,38,1), rgba(11,35,66,1));
  color:rgba(255,255,255,.86);
  margin-top:28px;
}
.mb-footer__inner{
  max-width:var(--mb-container);
  margin:0 auto;
  padding:24px 16px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
}
.mb-footer__title{
  margin:0 0 8px;
  color:#fff;
  font-weight:950;
  font-size:16px;
}
.mb-footer p{
  margin:0;
  line-height:1.75;
  font-size:13px;
}
.mb-footer a{
  color:rgba(255,255,255,.90);
  text-decoration:none;
  font-weight:800;
}
.mb-footer a:hover{ color:#fff; }

.mb-footer-nav{
  max-width:var(--mb-container);
  margin:0 auto;
  padding:0 16px 22px;
}
.mb-footer-nav__wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
}
.mb-footer-nav a{
  padding:10px 14px;
  border-radius:999px;
  background:transparent;
  border:1px solid transparent;
  transition:background var(--mb-speed) var(--mb-ease), border-color var(--mb-speed) var(--mb-ease), transform var(--mb-speed) var(--mb-ease);
  font-size:13px;
  white-space:nowrap;
}
.mb-footer-nav a:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.14);
  transform:translateY(-1px);
}

/* UI responsive */
@media (max-width:980px){
  .mb-header__inner{ flex-wrap:wrap; }
  .mb-navpill__wrap{ border-radius:var(--mb-radius-lg); }
  .mb-page-strip__inner{ flex-wrap:wrap; }
  .mb-footer__inner{ grid-template-columns:1fr; }
}
@media (max-width:767px){
  .mb-topbar__inner{ padding:10px 12px; }
  .mb-header__inner{ padding:12px; }
  .mb-navpill{ padding:0 12px 14px; }
  .mb-page-strip__inner{ padding:12px; }
  .mb-footer__inner{ padding:20px 12px; }
  .mb-footer-nav{ padding:0 12px 18px; }
}

/* ============================================================
   Content base (Elementor HTML widget)
   ============================================================ */

/* Root container */
.mb-article,
.mbpk-article,
.mbpk-page .mb-article{
  box-sizing:border-box;
  max-width:var(--mb-container);
  margin:0 auto;
  padding:22px 16px 30px;
  direction:rtl;
  text-align:right;
  color:var(--mb-text);
  background:transparent;
  font-family:
    "Noto Nastaliq Urdu",
    "Noto Naskh Arabic",
    "Noto Sans Arabic",
    system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
  font-size:16px;
  line-height:1.85;
  letter-spacing:0;
  word-break:normal;
  overflow-wrap:anywhere;
}

/* Safe box sizing within content scope */
.mb-article *,
.mbpk-article *,
.mbpk-page .mb-article *{
  box-sizing:border-box;
}

/* Selection */
.mb-article ::selection,
.mbpk-article ::selection,
.mbpk-page .mb-article ::selection{
  background:rgba(239,106,34,.22);
}

/* Links & focus */
.mb-article a,
.mbpk-article a,
.mbpk-page .mb-article a{
  color:var(--mb-primary);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  font-weight:800;
}
.mb-article a:hover,
.mbpk-article a:hover,
.mbpk-page .mb-article a:hover{
  color:var(--mb-primary-2);
}
.mb-article a:focus-visible,
.mbpk-article a:focus-visible,
.mbpk-page .mb-article a:focus-visible,
.mb-article button:focus-visible,
.mbpk-article button:focus-visible,
.mbpk-page .mb-article button:focus-visible,
.mb-article summary:focus-visible,
.mbpk-article summary:focus-visible,
.mbpk-page .mb-article summary:focus-visible,
.mb-article [tabindex]:focus-visible,
.mbpk-article [tabindex]:focus-visible,
.mbpk-page .mb-article [tabindex]:focus-visible{
  outline:3px solid var(--mb-focus);
  outline-offset:3px;
  border-radius:12px;
}

/* Typography */
.mb-article h1,
.mb-article h2,
.mb-article h3,
.mb-article h4,
.mbpk-article h1,
.mbpk-article h2,
.mbpk-article h3,
.mbpk-article h4,
.mbpk-page .mb-article h1,
.mbpk-page .mb-article h2,
.mbpk-page .mb-article h3,
.mbpk-page .mb-article h4{
  color:var(--mb-heading);
  margin:0 0 12px;
  line-height:1.25;
  letter-spacing:.2px;
  font-weight:1000;
}
.mb-article h1,
.mbpk-article h1,
.mbpk-page .mb-article h1{
  font-size:34px;
}
.mb-article h2,
.mbpk-article h2,
.mbpk-page .mb-article h2{
  font-size:26px;
  margin-top:18px;
}
.mb-article h3,
.mbpk-article h3,
.mbpk-page .mb-article h3{
  font-size:20px;
  margin-top:14px;
}
.mb-article h4,
.mbpk-article h4,
.mbpk-page .mb-article h4{
  font-size:18px;
  margin-top:12px;
}
.mb-article p,
.mbpk-article p,
.mbpk-page .mb-article p{
  margin:0 0 12px;
  color:var(--mb-text);
}
.mb-article .mb-muted,
.mbpk-article .mb-muted,
.mbpk-page .mb-article .mb-muted{
  color:var(--mb-muted);
}
.mb-article strong,
.mbpk-article strong,
.mbpk-page .mb-article strong{
  font-weight:950;
}

/* Inline code */
.mb-article code,
.mbpk-article code,
.mbpk-page .mb-article code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.92em;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(2,57,116,.06);
  border:1px solid rgba(2,57,116,.12);
}

/* Divider */
.mb-article .mb-divider,
.mbpk-article .mb-divider,
.mbpk-page .mb-article .mb-divider{
  height:1px;
  background:var(--mb-border);
  margin:18px 0;
}

/* Media & images */
.mb-article img,
.mbpk-article img,
.mbpk-page .mb-article img{
  max-width:100%;
  height:auto;
  display:block;
}
.mb-article .mb-media img,
.mbpk-article .mb-media img,
.mbpk-page .mb-article .mb-media img{
  width:100%;
  border-radius:var(--mb-radius);
  box-shadow:var(--mb-shadow-sm);
  border:1px solid rgba(16,24,40,.10);
}

/* Section cards */
.mb-article .mb-section,
.mbpk-article .mb-section,
.mbpk-page .mb-article .mb-section{
  background:var(--mb-surface);
  border:1px solid var(--mb-border);
  border-radius:var(--mb-radius-lg);
  box-shadow:var(--mb-shadow-sm);
  padding:var(--mb-pad-4);
  margin:0 0 18px;
  position:relative;
  overflow:hidden;
}
.mb-article .mb-section:before,
.mbpk-article .mb-section:before,
.mbpk-page .mb-article .mb-section:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 240px at 10% -10%, rgba(239,106,34,.10), transparent 55%),
    radial-gradient(900px 240px at 90% 110%, rgba(2,57,116,.10), transparent 55%);
  opacity:.9;
}

/* Smart row layout */
.mb-article .mb-row,
.mbpk-article .mb-row,
.mbpk-page .mb-article .mb-row{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:var(--mb-gap-4);
  align-items:center; /* vertical centering for short sections */
  margin-top:12px;
}
.mb-article .mb-row > *,
.mbpk-article .mb-row > *,
.mbpk-page .mb-article .mb-row > *{
  min-width:0; /* overflow fix for grid/flex children */
}

.mb-article .mb-copy,
.mbpk-article .mb-copy,
.mbpk-page .mb-article .mb-copy{
  align-self:center;
}

.mb-article .mb-row--reverse,
.mbpk-article .mb-row--reverse,
.mbpk-page .mb-article .mb-row--reverse{
  grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);
}
.mb-article .mb-row--reverse .mb-copy,
.mbpk-article .mb-row--reverse .mb-copy,
.mbpk-page .mb-article .mb-row--reverse .mb-copy{
  order:2;
}
.mb-article .mb-row--reverse .mb-media,
.mbpk-article .mb-row--reverse .mb-media,
.mbpk-page .mb-article .mb-row--reverse .mb-media{
  order:1;
}

.mb-article .mb-row--stack,
.mb-article .mb-row--long,
.mbpk-article .mb-row--stack,
.mbpk-article .mb-row--long,
.mbpk-page .mb-article .mb-row--stack,
.mbpk-page .mb-article .mb-row--long{
  grid-template-columns:minmax(0,1fr);
}
.mb-article .mb-row--stack .mb-media,
.mb-article .mb-row--long .mb-media,
.mbpk-article .mb-row--stack .mb-media,
.mbpk-article .mb-row--long .mb-media,
.mbpk-page .mb-article .mb-row--stack .mb-media,
.mbpk-page .mb-article .mb-row--long .mb-media{
  order:-1; /* image on top for long sections */
}

/* Hero */
.mb-article .mb-hero,
.mbpk-article .mb-hero,
.mbpk-page .mb-article .mb-hero{
  background:linear-gradient(180deg, rgba(2,57,116,.08), rgba(255,255,255,0));
  border:1px solid rgba(2,57,116,.16);
  border-radius:var(--mb-radius-lg);
  box-shadow:var(--mb-shadow);
  padding:var(--mb-pad-5);
  overflow:hidden;
  position:relative;
  margin:0 0 18px;
}
.mb-article .mb-hero:after,
.mbpk-article .mb-hero:after,
.mbpk-page .mb-article .mb-hero:after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(900px 300px at 10% -10%, rgba(239,106,34,.14), transparent 55%),
    radial-gradient(900px 280px at 90% 110%, rgba(2,57,116,.16), transparent 55%);
  opacity:.95;
}

.mb-article .mb-hero__row,
.mbpk-article .mb-hero__row,
.mbpk-page .mb-article .mb-hero__row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
  gap:var(--mb-gap-5);
  align-items:center;
}
.mb-article .mb-hero__row > *,
.mbpk-article .mb-hero__row > *,
.mbpk-page .mb-article .mb-hero__row > *{
  min-width:0;
}

.mb-article .mb-badge,
.mbpk-article .mb-badge,
.mbpk-page .mb-article .mb-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(2,57,116,.18);
  background:rgba(255,255,255,.78);
  color:var(--mb-heading);
  font-weight:950;
  font-size:13px;
  box-shadow:var(--mb-shadow-sm);
}
.mb-article .mb-hero__title,
.mbpk-article .mb-hero__title,
.mbpk-page .mb-article .mb-hero__title{
  margin:12px 0 10px;
  font-size:38px;
}
.mb-article .mb-hero__lead,
.mbpk-article .mb-hero__lead,
.mbpk-page .mb-article .mb-hero__lead{
  margin:0 0 14px;
  color:var(--mb-muted);
  font-size:16px;
  line-height:1.95;
}

/* CTA blocks */
.mb-article .mb-cta,
.mbpk-article .mb-cta,
.mbpk-page .mb-article .mb-cta{
  margin:14px 0 18px;
  border-radius:var(--mb-radius-lg);
  padding:var(--mb-pad-4);
  border:1px solid rgba(239,106,34,.22);
  background:
    radial-gradient(900px 280px at 10% 20%, rgba(239,106,34,.14), transparent 60%),
    radial-gradient(900px 280px at 90% 80%, rgba(2,57,116,.12), transparent 60%),
    #ffffff;
  box-shadow:var(--mb-shadow-sm);
}
.mb-article .mb-cta__inner,
.mbpk-article .mb-cta__inner,
.mbpk-page .mb-article .mb-cta__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.mb-article .mb-cta__title,
.mbpk-article .mb-cta__title,
.mbpk-page .mb-article .mb-cta__title{
  margin:0;
  font-size:18px;
  font-weight:1000;
  color:var(--mb-heading);
}
.mb-article .mb-cta__text,
.mbpk-article .mb-cta__text,
.mbpk-page .mb-article .mb-cta__text{
  margin:6px 0 0;
  color:var(--mb-muted);
  font-size:14px;
}
.mb-article .mb-cta__actions,
.mbpk-article .mb-cta__actions,
.mbpk-page .mb-article .mb-cta__actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Buttons */
.mb-article .mb-btn,
.mbpk-article .mb-btn,
.mbpk-page .mb-article .mb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid transparent;
  text-decoration:none;
  font-weight:1000;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;
  transition:transform var(--mb-speed) var(--mb-ease),
            box-shadow var(--mb-speed) var(--mb-ease),
            background var(--mb-speed) var(--mb-ease),
            border-color var(--mb-speed) var(--mb-ease),
            color var(--mb-speed) var(--mb-ease);
  white-space:nowrap;
}
.mb-article .mb-btn:active,
.mbpk-article .mb-btn:active,
.mbpk-page .mb-article .mb-btn:active{
  transform:translateY(0);
}

.mb-article .mb-btn--primary,
.mbpk-article .mb-btn--primary,
.mbpk-page .mb-article .mb-btn--primary{
  color:#fff;
  background:linear-gradient(180deg, var(--mb-primary), var(--mb-primary-2));
  box-shadow:0 14px 28px rgba(2,57,116,.18);
}
.mb-article .mb-btn--primary:hover,
.mbpk-article .mb-btn--primary:hover,
.mbpk-page .mb-article .mb-btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(2,57,116,.22);
}

.mb-article .mb-btn--secondary,
.mbpk-article .mb-btn--secondary,
.mbpk-page .mb-article .mb-btn--secondary{
  color:var(--mb-heading);
  background:#fff;
  border-color:rgba(2,57,116,.18);
  box-shadow:var(--mb-shadow-sm);
}
.mb-article .mb-btn--secondary:hover,
.mbpk-article .mb-btn--secondary:hover,
.mbpk-page .mb-article .mb-btn--secondary:hover{
  transform:translateY(-1px);
  border-color:rgba(2,57,116,.26);
}

/* Cards & grids */
.mb-article .mb-grid,
.mbpk-article .mb-grid,
.mbpk-page .mb-article .mb-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--mb-gap-3);
  margin-top:12px;
}
.mb-article .mb-grid--3,
.mbpk-article .mb-grid--3,
.mbpk-page .mb-article .mb-grid--3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.mb-article .mb-slot-grid,
.mbpk-article .mb-slot-grid,
.mbpk-page .mb-article .mb-slot-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--mb-gap-3);
  margin-top:12px;
}
.mb-article .mb-grid > *,
.mbpk-article .mb-grid > *,
.mbpk-page .mb-article .mb-grid > *,
.mb-article .mb-slot-grid > *,
.mbpk-article .mb-slot-grid > *,
.mbpk-page .mb-article .mb-slot-grid > *{
  min-width:0; /* overflow fix */
}

.mb-article .mb-card,
.mbpk-article .mb-card,
.mbpk-page .mb-article .mb-card{
  background:#fff;
  border:1px solid var(--mb-border);
  border-radius:var(--mb-radius);
  box-shadow:var(--mb-shadow-sm);
  padding:var(--mb-pad-3);
  position:relative;
  overflow:hidden;
  transition:transform var(--mb-speed) var(--mb-ease), box-shadow var(--mb-speed) var(--mb-ease), border-color var(--mb-speed) var(--mb-ease);
}
.mb-article .mb-card:hover,
.mbpk-article .mb-card:hover,
.mbpk-page .mb-article .mb-card:hover{
  transform:translateY(-2px);
  border-color:rgba(2,57,116,.20);
  box-shadow:var(--mb-shadow);
}
.mb-article .mb-card__title,
.mbpk-article .mb-card__title,
.mbpk-page .mb-article .mb-card__title{
  margin:0 0 6px;
  font-size:16px;
  font-weight:1000;
  color:var(--mb-heading);
}
.mb-article .mb-card__text,
.mbpk-article .mb-card__text,
.mbpk-page .mb-article .mb-card__text{
  margin:0;
  color:var(--mb-muted);
  font-size:14px;
  line-height:1.85;
}

/* Orphan card fix for 2-column grids */
@media (min-width:981px){
  .mb-article .mb-grid:not(.mb-grid--3) > :last-child:nth-child(odd),
  .mbpk-article .mb-grid:not(.mb-grid--3) > :last-child:nth-child(odd),
  .mbpk-page .mb-article .mb-grid:not(.mb-grid--3) > :last-child:nth-child(odd){
    grid-column:1 / -1;
    max-width:720px;
    justify-self:center;
  }
}

/* Lists (RTL friendly) */
.mb-article ul,
.mb-article ol,
.mbpk-article ul,
.mbpk-article ol,
.mbpk-page .mb-article ul,
.mbpk-page .mb-article ol{
  margin:10px 0 14px;
  padding-right:22px;
  padding-left:0;
}
.mb-article li,
.mbpk-article li,
.mbpk-page .mb-article li{
  margin:6px 0;
}
.mb-article ul li::marker,
.mbpk-article ul li::marker,
.mbpk-page .mb-article ul li::marker{
  color:var(--mb-accent);
}
.mb-article ol li::marker,
.mbpk-article ol li::marker,
.mbpk-page .mb-article ol li::marker{
  color:var(--mb-heading);
  font-weight:900;
}

/* TOC block (optional) */
.mb-article .mb-toc,
.mbpk-article .mb-toc,
.mbpk-page .mb-article .mb-toc{
  border:1px solid rgba(2,57,116,.16);
  background:rgba(2,57,116,.05);
  border-radius:var(--mb-radius-lg);
  padding:var(--mb-pad-3);
  margin:12px 0 18px;
}
.mb-article .mb-toc__title,
.mbpk-article .mb-toc__title,
.mbpk-page .mb-article .mb-toc__title{
  margin:0 0 10px;
  font-weight:1000;
  color:var(--mb-heading);
  font-size:16px;
}
.mb-article .mb-toc a,
.mbpk-article .mb-toc a,
.mbpk-page .mb-article .mb-toc a{
  text-decoration:none;
  font-weight:900;
}
.mb-article .mb-toc a:hover,
.mbpk-article .mb-toc a:hover,
.mbpk-page .mb-article .mb-toc a:hover{
  text-decoration:underline;
}

/* ============================================================
   Tables (MANDATORY mobile horizontal scroll)
   ============================================================ */
.mb-article .mb-table-wrap,
.mbpk-article .mb-table-wrap,
.mbpk-page .mb-article .mb-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  display:block;
  direction:ltr;
  touch-action:pan-x;
  margin:18px 0 22px;
  border-radius:var(--mb-radius);
  border:1px solid var(--mb-border);
  background:#fff;
  box-shadow:var(--mb-shadow-sm);
}

.mb-article .mb-table-wrap > table.mb-table,
.mbpk-article .mb-table-wrap > table.mb-table,
.mbpk-page .mb-article .mb-table-wrap > table.mb-table{
  width:100%;
  min-width:560px;
  border-collapse:separate;
  border-spacing:0;
  direction:rtl;
}

.mb-article table.mb-table th,
.mb-article table.mb-table td,
.mbpk-article table.mb-table th,
.mbpk-article table.mb-table td,
.mbpk-page .mb-article table.mb-table th,
.mbpk-page .mb-article table.mb-table td{
  padding:12px 12px;
  border-bottom:1px solid var(--mb-border);
  border-left:1px solid rgba(16,24,40,.08);
  text-align:right;
  vertical-align:top;
  font-size:14px;
  line-height:1.7;
}
.mb-article table.mb-table th:last-child,
.mb-article table.mb-table td:last-child,
.mbpk-article table.mb-table th:last-child,
.mbpk-article table.mb-table td:last-child,
.mbpk-page .mb-article table.mb-table th:last-child,
.mbpk-page .mb-article table.mb-table td:last-child{
  border-left:none;
}

.mb-article table.mb-table thead th,
.mbpk-article table.mb-table thead th,
.mbpk-page .mb-article table.mb-table thead th{
  position:sticky;
  top:0;
  background:linear-gradient(180deg, rgba(2,57,116,.10), rgba(2,57,116,.06));
  color:var(--mb-heading);
  font-weight:1000;
  z-index:1;
}

.mb-article table.mb-table tbody tr:nth-child(even) td,
.mbpk-article table.mb-table tbody tr:nth-child(even) td,
.mbpk-page .mb-article table.mb-table tbody tr:nth-child(even) td{
  background:rgba(2,57,116,.03);
}

.mb-article table.mb-table tbody tr:last-child td,
.mbpk-article table.mb-table tbody tr:last-child td,
.mbpk-page .mb-article table.mb-table tbody tr:last-child td{
  border-bottom:none;
}

/* Mobile: keep scroll + prevent wrapping */
@media (max-width:980px){
  .mb-article .mb-table-wrap > table.mb-table,
  .mbpk-article .mb-table-wrap > table.mb-table,
  .mbpk-page .mb-article .mb-table-wrap > table.mb-table{
    min-width:520px;
  }
}
@media (max-width:767px){
  .mb-article .mb-table-wrap > table.mb-table,
  .mbpk-article .mb-table-wrap > table.mb-table,
  .mbpk-page .mb-article .mb-table-wrap > table.mb-table{
    min-width:560px;
  }
  .mb-article .mb-table-wrap th,
  .mb-article .mb-table-wrap td,
  .mbpk-article .mb-table-wrap th,
  .mbpk-article .mb-table-wrap td,
  .mbpk-page .mb-article .mb-table-wrap th,
  .mbpk-page .mb-article .mb-table-wrap td{
    white-space:nowrap;
  }
}

/* Make adjacent paragraphs look good around table wrappers */
.mb-article p + .mb-table-wrap,
.mbpk-article p + .mb-table-wrap,
.mbpk-page .mb-article p + .mb-table-wrap{
  margin-top:14px;
}
.mb-article .mb-table-wrap + p,
.mbpk-article .mb-table-wrap + p,
.mbpk-page .mb-article .mb-table-wrap + p{
  margin-top:14px;
}

/* ============================================================
   FAQ (details/summary)
   ============================================================ */
.mb-article .mb-faq,
.mbpk-article .mb-faq,
.mbpk-page .mb-article .mb-faq{
  margin-top:10px;
}
.mb-article .mb-faq details,
.mbpk-article .mb-faq details,
.mbpk-page .mb-article .mb-faq details{
  border:1px solid var(--mb-border);
  background:#fff;
  border-radius:var(--mb-radius-lg);
  box-shadow:var(--mb-shadow-sm);
  overflow:hidden;
  margin:0 0 12px;
}
.mb-article .mb-faq summary,
.mbpk-article .mb-faq summary,
.mbpk-page .mb-article .mb-faq summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  font-weight:1000;
  color:var(--mb-heading);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.mb-article .mb-faq summary::-webkit-details-marker,
.mbpk-article .mb-faq summary::-webkit-details-marker,
.mbpk-page .mb-article .mb-faq summary::-webkit-details-marker{
  display:none;
}
.mb-article .mb-faq summary:after,
.mbpk-article .mb-faq summary:after,
.mbpk-page .mb-article .mb-faq summary:after{
  content:"▾";
  font-size:16px;
  line-height:1;
  color:var(--mb-accent);
  transition:transform var(--mb-speed) var(--mb-ease);
  flex:0 0 auto;
}
.mb-article .mb-faq details[open] summary:after,
.mbpk-article .mb-faq details[open] summary:after,
.mbpk-page .mb-article .mb-faq details[open] summary:after{
  transform:rotate(180deg);
}
.mb-article .mb-faq .mb-faq__content,
.mbpk-article .mb-faq .mb-faq__content,
.mbpk-page .mb-article .mb-faq .mb-faq__content{
  padding:0 16px 14px;
  color:var(--mb-muted);
  font-size:14px;
  line-height:1.9;
}
.mb-article .mb-faq .mb-faq__content p,
.mbpk-article .mb-faq .mb-faq__content p,
.mbpk-page .mb-article .mb-faq .mb-faq__content p{
  margin:0 0 10px;
}

/* ============================================================
   Responsive rules for content (SMART LAYOUT / HERO / CTA)
   ============================================================ */
@media (max-width:980px){
  .mb-article,
  .mbpk-article,
  .mbpk-page .mb-article{
    padding:18px 14px 26px;
  }

  .mb-article .mb-hero__row,
  .mbpk-article .mb-hero__row,
  .mbpk-page .mb-article .mb-hero__row{
    grid-template-columns:minmax(0,1fr);
  }

  .mb-article .mb-row,
  .mbpk-article .mb-row,
  .mbpk-page .mb-article .mb-row{
    grid-template-columns:minmax(0,1fr);
  }

  .mb-article .mb-row .mb-media,
  .mbpk-article .mb-row .mb-media,
  .mbpk-page .mb-article .mb-row .mb-media{
    order:-1; /* image on top on tablets too */
  }

  .mb-article .mb-grid--3,
  .mbpk-article .mb-grid--3,
  .mbpk-page .mb-article .mb-grid--3,
  .mb-article .mb-slot-grid,
  .mbpk-article .mb-slot-grid,
  .mbpk-page .mb-article .mb-slot-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:767px){
  .mb-article h1,
  .mbpk-article h1,
  .mbpk-page .mb-article h1{
    font-size:30px;
  }
  .mb-article h2,
  .mbpk-article h2,
  .mbpk-page .mb-article h2{
    font-size:23px;
  }

  .mb-article .mb-hero,
  .mbpk-article .mb-hero,
  .mbpk-page .mb-article .mb-hero{
    padding:22px 16px;
  }

  .mb-article .mb-cta__inner,
  .mbpk-article .mb-cta__inner,
  .mbpk-page .mb-article .mb-cta__inner{
    flex-direction:column;
    align-items:stretch;
  }

  .mb-article .mb-cta__actions,
  .mbpk-article .mb-cta__actions,
  .mbpk-page .mb-article .mb-cta__actions{
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }

  .mb-article .mb-btn,
  .mbpk-article .mb-btn,
  .mbpk-page .mb-article .mb-btn{
    width:100%;
    justify-content:center;
  }

  .mb-article .mb-grid,
  .mbpk-article .mb-grid,
  .mbpk-page .mb-article .mb-grid,
  .mb-article .mb-slot-grid,
  .mbpk-article .mb-slot-grid,
  .mbpk-page .mb-article .mb-slot-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .mb-article .mb-btn,
  .mbpk-article .mb-btn,
  .mbpk-page .mb-article .mb-btn,
  .mb-article .mb-card,
  .mbpk-article .mb-card,
  .mbpk-page .mb-article .mb-card,
  .mb-navpill a,
  .mb-footer-nav a{
    transition:none !important;
  }
}
:root{
  --mb-accent:#DE054D;
  --mb-accent-2:#B9043E;
}

/* Optional: make primary CTA use the accent color too */
.mb-article .mb-btn--primary,
.mbpk-article .mb-btn--primary,
.mbpk-page .mb-article .mb-btn--primary{
  background:linear-gradient(180deg, var(--mb-accent), var(--mb-accent-2));
  box-shadow:0 14px 28px rgba(222,5,77,.22);
}

.mb-article .mb-btn--primary:hover,
.mbpk-article .mb-btn--primary:hover,
.mbpk-page .mb-article .mb-btn--primary:hover{
  box-shadow:0 18px 34px rgba(222,5,77,.26);
}

/* Optional: tint badges/FAQ chevron with new accent */
.mb-article .mb-badge,
.mbpk-article .mb-badge,
.mbpk-page .mb-article .mb-badge{
  border-color:rgba(222,5,77,.22);
}

.mb-article .mb-faq summary:after,
.mbpk-article .mb-faq summary:after,
.mbpk-page .mb-article .mb-faq summary:after{
  color:var(--mb-accent);
}
/* ============================================================
   FIX: HERO LONG STACK on DESKTOP
   Problem: .mb-hero__row sets 2 columns later in CSS and overrides mb-row--stack/--long
   Paste this at the VERY END of your GLOBAL CSS
   ============================================================ */

.mb-article .mb-hero__row.mb-row--stack,
.mb-article .mb-hero__row.mb-row--long,
.mbpk-article .mb-hero__row.mb-row--stack,
.mbpk-article .mb-hero__row.mb-row--long,
.mbpk-page .mb-article .mb-hero__row.mb-row--stack,
.mbpk-page .mb-article .mb-hero__row.mb-row--long{
  grid-template-columns:minmax(0,1fr) !important;
  align-items:stretch !important;
}

.mb-article .mb-hero__row.mb-row--stack .mb-media,
.mb-article .mb-hero__row.mb-row--long .mb-media,
.mbpk-article .mb-hero__row.mb-row--stack .mb-media,
.mbpk-article .mb-hero__row.mb-row--long .mb-media,
.mbpk-page .mb-article .mb-hero__row.mb-row--stack .mb-media,
.mbpk-page .mb-article .mb-hero__row.mb-row--long .mb-media{
  order:-1 !important; /* image always on top */
}

.mb-article .mb-hero__row.mb-row--stack .mb-copy,
.mb-article .mb-hero__row.mb-row--long .mb-copy,
.mbpk-article .mb-hero__row.mb-row--stack .mb-copy,
.mbpk-article .mb-hero__row.mb-row--long .mb-copy,
.mbpk-page .mb-article .mb-hero__row.mb-row--stack .mb-copy,
.mbpk-page .mb-article .mb-hero__row.mb-row--long .mb-copy{
  order:1 !important;
}