/* =========================================================
   mulhim-core.css
   Requires wrapper: <div class="mulhim …" lang="…" dir="…">
   Load after Rocket; before page-specific CSS.
   ========================================================= */
@layer mulhim {

   /* 0) Namespace + tokens */
   .mulhim {
      /* Brand palette */
      --teal: #007B83;
      --navy: #1B263B;
      --sky: #E5F4F9;
      --indigo: #0D1B2A;

      /* Neutrals */
      --slate-900: #0f172a;
      --slate-800: #1f2937;
      --slate-700: #334155;
      --slate-600: #475569;
      --slate-500: #64748b;
      --slate-400: #94a3b8;
      --slate-300: #cbd5e1;
      --slate-200: #e2e8f0;
      --slate-100: #f1f5f9;
      --slate-50: #f8fafc;

      /* Accents */
      --blue-600: #0284c7;
      --blue-500: #0ea5e9;
      --blue-300: #bae6fd;
      --blue-200: #e0f2fe;
      --green-700: #15803d;
      --green-600: #16a34a;
      --green-300: #bbf7d0;
      --green-100: #dcfce7;
      --violet-600: #7c3aed;
      --violet-200: #e9d5ff;
      --violet-100: #f3e8ff;
      --amber-800: #92400e;
      --amber-50: #fffbeb;
      --red-700: #c62828;
      --rose-100: #ffebee;

      /* Radii / shadows / motion */
      --r-sm: 8px;
      --r-md: 12px;
      --r-lg: 16px;
      --r-xl: 20px;
      --shadow-1: 0 3px 8px rgba(0, 0, 0, .08);
      --shadow-2: 0 12px 24px rgba(2, 8, 23, .08);
      --ease-1: .2s ease;
      --ease-2: .3s ease;

      color: var(--slate-900);
      line-height: 1.85;
   }

   /* 1) Bilingual fonts */
   .mulhim[lang="en"] {
      font-family: 'Inter', 'Roboto', Arial, sans-serif;
   }

   .mulhim[lang="ar"] {
      font-family: 'Tajawal', 'Cairo', 'Almarai', system-ui, sans-serif;
   }

   .mulhim[lang="ar"] p,
   .mulhim[lang="ar"] li {
      line-height: 2
   }

   /* 2) Layout helpers */
   .mulhim .section {
      background: var(--slate-50);
      padding: 52px 16px
   }

   .mulhim .section-alt {
      background: #fff;
      padding: 52px 16px
   }

   .mulhim .container {
      max-width: 1100px;
      margin: 0 auto
   }

   .mulhim .center {
      text-align: center
   }

   .mulhim[dir="rtl"] .text-start {
      text-align: right
   }

   .mulhim[dir="ltr"] .text-start {
      text-align: left
   }

   /* 2.1) Shared hero section (centralized) */
   .mulhim .section-hero {
      background: var(--slate-50);
      padding: 52px 16px
   }

   /* 2.2) Shared eligibility base (centralized) */
   .mulhim .eligible-wrap {
      background: #c5eded;
      border: 1px solid #b2e2e2;
      border-radius: var(--r-lg)
   }

   .mulhim .eligible-title {
      text-align: center;
      font-size: 22px;
   }

   /* 3) Typography */
   .mulhim .h1 {
      margin: 0 0 10px;
      font-size: clamp(28px, 4vw, 32px);
      font-weight: 900
   }

   .mulhim .h2 {
      margin: 0 0 10px;
      font-size: clamp(20px, 3vw, 22px);
      font-weight: 800
   }

   .mulhim .h3 {
      margin: 0 0 12px;
      font-size: clamp(18px, 2.5vw, 20px);
      font-weight: 800
   }

   .mulhim .lead {
      margin: 0 auto;
      max-width: 900px;
      font-size: 18px;
      color: var(--slate-700)
   }

   .mulhim p {
      margin: 0 0 10px;
      color: var(--slate-600)
   }

   .mulhim a {
      color: inherit;
      text-decoration: none
   }

   .mulhim a:hover {
      text-decoration: none
   }

   /* 4) Chips */
   .mulhim .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center
   }

   .mulhim .chip {
      font-size: 14.5px;
      border: 1px solid;
      border-radius: 999px;
      padding: 7px 12px
   }

   .mulhim .chip-blue {
      color: #0369a1;
      background: var(--blue-200);
      border-color: var(--blue-300)
   }

   .mulhim .chip-green {
      color: #047857;
      background: var(--green-100);
      border-color: var(--green-300)
   }

   .mulhim .chip-violet {
      color: #6b21a8;
      background: var(--violet-100);
      border-color: var(--violet-200)
   }

   .mulhim .chip-slate {
      color: var(--slate-700);
      background: var(--slate-100);
      border-color: var(--slate-200)
   }

   /* 5) Cards / Notes / Alerts */
   .mulhim .card {
      background: #fff;
      border: 1px solid var(--slate-200);
      border-radius: var(--r-lg);
      padding: 20px
   }

   .mulhim .note-box {
      background: #c5eded;
      border: 1px solid #b2e2e2;
      border-radius: var(--r-lg);
      padding: 18px
   }

   .mulhim .alert,
   .mulhim .notice {
      margin-top: 14px;
      background: var(--amber-50);
      color: var(--amber-800);
      font-weight: 700;
      padding: 12px 14px;
      border-radius: 10px;
      text-align: center;
      font-size: 16px
   }

   .mulhim .alert-danger {
      background: var(--rose-100);
      color: var(--red-700)
   }

   /* 6) Buttons */
   .mulhim .btn-row,
   .mulhim .cta-row {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 22px
   }

   .mulhim .btn {
      display: inline-grid;
      place-items: center;
      height: 50px;
      min-width: 220px;
      padding: 0 22px;
      border-radius: 12px;
      color: #fff;
      font-weight: 800;
      font-size: 17px;
      transition: transform var(--ease-1), box-shadow var(--ease-1);
      box-shadow: var(--shadow-1)
   }

   .mulhim .btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-2)
   }

   .mulhim .btn-blue {
      background: var(--blue-500)
   }

   .mulhim .btn-green {
      background: var(--green-600)
   }

   .mulhim .btn-teal {
      background: var(--teal)
   }

   /* 7) Tables */
   .mulhim .table-wrap {
      overflow: auto;
      border: 1px solid var(--slate-200);
      border-radius: 12px
   }

   .mulhim .table {
      width: 100%;
      min-width: 600px;
      table-layout: fixed;
      border-collapse: collapse
   }

   .mulhim .table th,
   .mulhim .table td {
      padding: 12px
   }

   .mulhim .table thead tr {
      background: var(--sky);
      color: var(--indigo)
   }

   .mulhim .table tbody tr:nth-child(odd) {
      background: #fff
   }

   .mulhim .table tbody tr:nth-child(even) {
      background: #fafafa
   }

   .mulhim[dir="rtl"] .table th:first-child,
   .mulhim[dir="rtl"] .table td:first-child {
      text-align: right
   }

   .mulhim[dir="ltr"] .table th:first-child,
   .mulhim[dir="ltr"] .table td:first-child {
      text-align: left
   }

   /* 8) Soft divider */
   .mulhim .soft-divider {
      height: 12px;
      border-radius: 999px;
      background: linear-gradient(90deg, #eff6ff 0%, #ecfeff 50%, #f0fdfa 100%);
      margin: 18px 0
   }

   /* 9) Effects (unique names to avoid collisions) */
   @keyframes mh-fade-in-up {
      from {
         opacity: 0;
         transform: translateY(10px)
      }

      to {
         opacity: 1;
         transform: translateY(0)
      }
   }

   .mulhim .fade-in {
      opacity: 0;
      transform: translateY(10px);
      animation: mh-fade-in-up .5s var(--ease-2) forwards
   }

   .mulhim .hover-lift {
      transition: transform var(--ease-1), box-shadow var(--ease-1);
      box-shadow: var(--shadow-1)
   }

   .mulhim .hover-lift:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-2)
   }

   .mulhim .wrap-anywhere {
      overflow-wrap: anywhere;
      word-break: break-word
   }

   /* 10) Responsive / motion / print */
   @media (max-width:768px) {
      .mulhim .container {
         padding: 0 10px
      }

      .mulhim .btn {
         min-width: 180px;
         height: 48px
      }
   }

   @media (prefers-reduced-motion:reduce) {
      .mulhim * {
         animation: none !important;
         transition: none !important
      }
   }

   @media print {

      .mulhim .btn,
      .mulhim .chips {
         display: none !important
      }

      .mulhim .card {
         box-shadow: none !important;
         border: 1px solid #ddd
      }
   }

}

/* end @layer mulhim */