/* ============================================================
   المستشارية الطبية — نظام التصميم الموحّد
   هوية كحلية/ذهبية موحّدة مع سفارة جمهورية السودان بالقاهرة
   + رمادي محايد للنصوص + الذهبي كلمسة رفيعة. مطبّق على كل الصفحات.
   ============================================================ */

:root {
  /* الهوية الأساسية (أسماء متوافقة مع أنماط الصفحات) */
  --primary: #0e2133;          /* كحلي: العناوين والصناديق الداكنة */
  --primary-darker: #050a30;
  --secondary: #dba327;        /* الذهبي: لمسة رفيعة */
  --accent: #dba327;

  /* سلّم الكحلي/الأزرق الوسيط (بدل سلّم التركوازي) */
  --teal: #235583;
  --teal-light: #3f7aa8;
  --teal-dark: #0e2133;
  --teal-darker: #050a30;

  /* محايدات */
  --light: #ffffff;
  --dark: #222222;             /* نص أساسي داكن محايد */
  --gray: #6f6f6f;             /* نص ثانوي */
  --gray-dark: #4a4a4a;
  --light-gray: #f6f6f6;       /* خلفية أقسام محايدة */
  --light-border: #e6e6e6;
  --dark-border: #d0d0d0;

  --hero-accent: #3f7aa8;

  --radius: 16px;
  --radius-sm: 12px;
  --transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  --shadow: 0 6px 20px -8px rgba(14, 33, 51, 0.16);
  --shadow-hover: 0 22px 44px -18px rgba(14, 33, 51, 0.28);

  --gold-gradient: linear-gradient(145deg, #fdd757 0%, #dba327 100%);
  --grad-brand: linear-gradient(135deg, var(--teal-light) 0%, var(--teal) 100%);
  --grad-deep: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  --grad-dark: linear-gradient(135deg, #163a56 0%, #050a30 100%);

  --font-default: "Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-primary: var(--font-default);
  --font-secondary: var(--font-default);
}

/* ============================================================
   إعادة الضبط والأساسيات
   ============================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  direction: ltr;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(35, 85, 131, 0.42) rgba(35, 85, 131, 0.06);
}

html::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: rgba(35, 85, 131, 0.05);
}

html::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: rgba(35, 85, 131, 0.32);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: rgba(35, 85, 131, 0.52);
  background-clip: padding-box;
}

*,
textarea,
select {
  scrollbar-width: thin;
  scrollbar-color: rgba(35, 85, 131, 0.42) rgba(35, 85, 131, 0.06);
}

body {
  font-family: var(--font-default);
  background: var(--light);
  color: var(--dark);
  line-height: 1.8;
  overflow-x: hidden;
  direction: rtl;
}

body.modal-open,
body.sidebar-open {
  overflow: hidden;
}

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

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  color: var(--primary);
  line-height: 1.3;
}

button {
  font-family: inherit;
}

/* مؤشّر التحميل معطّل حالياً */
.page-loader {
  display: none !important;
}

/* ============================================================
   الحاويات والأقسام
   ============================================================ */
.container {
  width: 92%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 15px;
}

section,
.section {
  padding: 4.5rem 0;
  position: relative;
}

.section-title {
  text-align: center;
  margin-bottom: 2.5rem;
}

.section-title h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--teal-dark);
  margin-bottom: 0.75rem;
  position: relative;
  padding-bottom: 0.75rem;
}

.section-title h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--secondary);
  border-radius: 3px;
}

.section-title p {
  font-size: 1.05rem;
  color: var(--gray);
  max-width: 640px;
  margin: 0.5rem auto 0;
}

.section-title-centered {
  text-align: center;
}

.hide-on-small-screen {
  display: none;
}

@media (min-width: 768px) {
  .hide-on-small-screen {
    display: block;
  }
}

/* ============================================================
   الشريط العلوي الذهبي + الشريط الثانوي — بهوية السفارة
   ============================================================ */
.toptopbar {
  position: relative;
  z-index: 1011;
  height: 10px;
  background: var(--secondary);
}

.topbar {
  position: relative;
  z-index: 1010;
  height: 30px;
  background: var(--teal);
  color: #fff;
  font-size: 0.8rem;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.topbar-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.topbar-links a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  transition: var(--transition);
  white-space: nowrap;
}

.topbar-links a:hover {
  color: var(--secondary);
}

@media (max-width: 575px) {
  .topbar {
    font-size: 0.72rem;
  }
}

/* ============================================================
   الهيدر الرئيسي — كحلي صلب بنفس هوية السفارة
   ============================================================ */
body > header {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 14px 0;
  background: var(--primary);
  box-shadow: 0 4px 16px -10px rgba(0, 0, 0, 0.3);
  transition: top .3s ease, padding .3s ease, box-shadow .3s ease;
}

body > header.header-at-top {
  top: 0;
  padding: 8px 0;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.45);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
}

@media (min-width: 992px) {
  .header-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;
  }

  .logo {
    justify-self: start;
  }

  nav#main-nav {
    grid-column: 2;
    flex: none;
    justify-self: center;
  }

  nav#main-nav ul {
    justify-content: center;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
  }

  .header-portal-cta {
    grid-column: 3;
    justify-self: end;
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.logo img {
  height: 46px;
  transition: transform .35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.logo:hover img {
  transform: scale(1.06);
}

.logo-text h1 {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--secondary);
  margin: 0;
  letter-spacing: .2px;
  white-space: nowrap;
}

.logo-text p {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  white-space: nowrap;
}

nav#main-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

nav#main-nav ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  position: relative;
  flex: 0 0 auto;
  text-align: center;
}

.nav-item > a {
  position: relative;
  display: block;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  font-size: clamp(0.78rem, 0.55vw + 0.55rem, 0.92rem);
  padding: 8px clamp(4px, 0.45vw, 10px);
  border-radius: 10px;
  white-space: nowrap;
  transition: color .25s ease, background .25s ease;
}

.nav-item > a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--secondary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s ease;
}

.nav-item > a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--secondary);
}

.nav-item > a:hover::after,
.nav-item > a.active::after {
  transform: scaleX(1);
}

.nav-item > a.active {
  color: var(--secondary);
}

/* قائمة "المزيد" */
.more-dropdown {
  position: relative;
  display: none;
  flex: 0 0 auto;
  margin-inline-start: 6px;
  text-align: center;
}

.more-dropdown-toggle {
  border: 1px solid rgba(255, 255, 255, 0.32);
  padding-inline: 14px !important;
}

.more-dropdown.active .more-dropdown-toggle {
  background: rgba(255, 255, 255, 0.12);
  color: var(--secondary);
}

.more-dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: #fff;
  min-width: 280px;
  box-shadow: 0 12px 30px rgba(14, 33, 51, 0.16);
  border-radius: 15px;
  border: 1px solid var(--light-border);
  padding: 10px;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.more-dropdown.active .more-dropdown-content {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.more-dropdown-content a {
  color: var(--dark);
  font-weight: 600;
  padding: 12px 15px;
  font-size: 0.95rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
}

.more-dropdown-content a:hover {
  background: var(--light-gray);
  color: var(--teal-dark);
  transform: translateX(-3px);
}

.more-dropdown-content a i {
  width: 20px;
  text-align: center;
  color: var(--secondary);
  font-size: 1rem;
}

.more-dropdown-content hr,
.dropdown-divider {
  border: none;
  border-top: 1px solid var(--light-border);
  margin: 8px 5px;
  height: 1px;
  background: none;
}

.mobile-toggle {
  display: none;
  background: none;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 1.2rem;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, color .25s ease;
}

.mobile-toggle:hover {
  background: var(--secondary);
  color: #050a30;
  border-color: var(--secondary);
}

.header-portal-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  background: var(--gold-gradient);
  color: #050a30;
  font-weight: 800;
  font-size: 0.82rem;
  white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(219, 163, 39, 0.7);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.header-portal-cta:hover {
  transform: translateY(-1px);
  color: #050a30;
  box-shadow: 0 10px 22px -10px rgba(219, 163, 39, 0.85);
  filter: brightness(1.04);
}

.header-portal-cta i {
  font-size: 0.9rem;
}

.header-portal-cta-short {
  display: none;
}

@media (max-width: 1399px) {
  .header-portal-cta-full {
    display: none;
  }
  .header-portal-cta-short {
    display: inline;
  }
  .header-portal-cta {
    padding: 9px 12px;
  }
}

@media (max-width: 991px) {
  .header-portal-cta-full {
    display: inline;
  }
  .header-portal-cta-short {
    display: none;
  }
  .header-portal-cta {
    padding: 9px 14px;
  }
}

@media (max-width: 480px) {
  .header-portal-cta-full {
    display: none;
  }
  .header-portal-cta-short {
    display: inline;
  }
}

@media (max-width: 991px) {
  nav#main-nav {
    display: none;
  }
  .mobile-toggle {
    display: flex;
  }
  .header-portal-cta {
    display: none;
  }

  /* منع تمدّد الشعار خارج الهيدر على الشاشات الضيقة (سبب سكرول أفقي وتغطية زر القائمة) */
  .header-container {
    gap: 8px;
  }
  .logo {
    flex: 1 1 auto;
    min-width: 0;
  }
  .logo-text {
    min-width: 0;
  }
  .logo-text p {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 480px) {
  .logo-text p {
    display: none;
  }
}

@media (min-width: 992px) and (max-width: 1399px) {
  .header-container {
    gap: 10px;
  }

  .logo-text h1 {
    font-size: 1.08rem;
  }

  .logo-text p {
    font-size: 0.68rem;
  }

  .logo img {
    height: 40px;
  }

  .nav-item > a {
    font-size: 0.84rem;
    padding: 7px 6px;
  }

  .more-dropdown-toggle {
    padding-inline: 10px !important;
  }
}

/* ============================================================
   القائمة الجانبية (الجوال)
   ============================================================ */
.mobile-sidebar {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100%;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  background-color: #163a56;
  background-image:
    radial-gradient(620px 320px at 100% 0%, rgba(63, 122, 168, 0.22), transparent 62%),
    linear-gradient(180deg, #163a56 0%, #050a30 100%);
  box-shadow: -14px 0 44px -12px rgba(0, 0, 0, 0.45);
  transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mobile-sidebar.is-open {
  right: 0;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.sidebar-portal-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 16px 4px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--gold-gradient);
  color: #050a30;
  font-weight: 800;
  font-size: 0.92rem;
  flex-shrink: 0;
}

.sidebar-portal-cta:hover {
  color: #050a30;
  filter: brightness(1.05);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-logo img {
  height: 40px;
}

.sidebar-logo span {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}

.sidebar-close-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9px;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}

.sidebar-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

.sidebar-nav-container {
  overflow-y: auto;
  flex-grow: 1;
}

.sidebar-nav-container ul {
  padding: 14px 10px;
  margin: 0;
}

.sidebar-nav-container li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 3px 6px;
  padding: 13px 18px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  transition: var(--transition);
}

.sidebar-nav-container li a:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateX(-4px);
}

.sidebar-nav-container li a.active {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

.sidebar-nav-container li a.active::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 28%;
  bottom: 28%;
  width: 3px;
  border-radius: 3px;
  background: var(--secondary);
}

.sidebar-nav-container li a i {
  width: 20px;
  text-align: center;
  color: var(--secondary);
}

.sidebar-nav-container .divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 12px 20px;
}

.sidebar-more-toggle {
  cursor: pointer;
  justify-content: space-between;
}

.sidebar-more-toggle .chevron {
  transition: transform 0.3s ease-in-out;
}

.sidebar-more-toggle.active .chevron {
  transform: rotate(180deg);
}

.sidebar-more-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  background: rgba(0, 0, 0, 0.16);
  border-radius: 12px;
  margin: 4px 6px;
}

.sidebar-more-content h4 {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  padding: 15px 25px 5px;
  font-weight: 700;
}

.sidebar-more-content a {
  padding-right: 30px;
}

.sidebar-more-content a i {
  color: rgba(255, 255, 255, 0.85) !important;
}

.sidebar-footer {
  padding: 20px 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.sidebar-social-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.sidebar-social-icons a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.1rem;
  transition: var(--transition);
}

.sidebar-social-icons a:hover {
  background: var(--secondary);
  color: #050a30;
  transform: translateY(-3px);
}

.mobile-sidebar.is-open .sidebar-nav-container li {
  animation: slideInRight 0.5s ease-out forwards;
  opacity: 0;
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   بطل الصفحة (Hero) — خلفية شفقية فاتحة متحركة
   ============================================================ */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48vh;
  padding: calc(80px + 2.5rem) 0 6rem;
  overflow: hidden;
  background: linear-gradient(120deg, #ffffff, #eeeeee, #f2f2f2, #f3f3f3, #ffffff);
  background-size: 300% 300%;
  animation: heroAurora 18s ease infinite;
}

@keyframes heroAurora {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* موجة بيضاء ناعمة أسفل البطل */
.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 80px;
  width: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,45 C320,105 760,5 1080,45 C1260,68 1360,72 1440,55 L1440,100 L0,100 Z'/%3E%3C/svg%3E") no-repeat bottom center;
  background-size: 100% 100%;
  z-index: 2;
  pointer-events: none;
}

.page-hero-content {
  position: relative;
  z-index: 3;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
  animation: heroFadeIn 1s ease-out;
}

@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 800;
  margin-bottom: 1.1rem;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-hero h1 span {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-hero h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 1rem;
}

.page-hero p {
  font-size: 1.08rem;
  max-width: 760px;
  margin: 0 auto 1.5rem;
  color: var(--gray);
  line-height: 1.9;
}

/* وسوم داخل الهيرو الفاتح (شركاء / ملاحظات) */
.page-hero .partner-tag,
.page-hero .sponsor-tag,
.page-hero .hero-tag {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--teal-dark);
  background: rgba(35, 85, 131, 0.1);
  border: 1px solid rgba(35, 85, 131, 0.28);
  border-radius: 20px;
  padding: 9px 16px;
  line-height: 1.6;
}

.page-hero .sponsors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 1.25rem;
}

/* ============================================================
   HERO PREMIUM — الواجهة الرئيسية الجديدة
   ============================================================ */
.hero-main-premium {
  min-height: 600px;
  padding: 128px 0 0;
  display: flex;
  align-items: center;
  text-align: right;
  color: #fff;
  background-color: #050a30;
  background-image:
    radial-gradient(ellipse 90% 70% at 78% 8%, rgba(63, 122, 168, 0.22), transparent 55%),
    radial-gradient(ellipse 70% 55% at 12% 88%, rgba(219, 163, 39, 0.1), transparent 50%),
    linear-gradient(155deg, #050a30 0%, #163a56 42%, #235583 100%);
  animation: none;
  overflow: hidden;
  box-shadow: inset 0 4px 0 0 #dba327;
}

.hero-main-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left, rgba(5, 10, 48, 0.35) 0%, rgba(5, 10, 48, 0.12) 48%, rgba(5, 10, 48, 0.28) 100%),
    linear-gradient(180deg, rgba(5, 10, 48, 0.2) 0%, transparent 38%, rgba(5, 10, 48, 0.32) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-main-premium::after {
  height: 56px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 44 C300 5 520 62 780 38 C1030 14 1200 30 1440 8 L1440 70 L0 70 Z'/%3E%3C/svg%3E") no-repeat bottom center;
  background-size: 100% 100%;
  z-index: 4;
}

.hero-accent,
.hero-accent-line,
.hero-orb,
.hero-grid-pattern {
  display: none;
}

.hero-inner {
  min-height: 400px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
  gap: 32px;
  align-items: center;
  position: relative;
  z-index: 5;
}

.hero-copy {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 10px 36px 0;
  text-align: right;
  animation: heroPremiumIn 0.9s ease-out both;
}

@keyframes heroPremiumIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-main-premium h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.75rem);
  line-height: 1.12;
  margin-bottom: 0.85rem;
  letter-spacing: -0.5px;
  color: #fff;
  background: none;
  -webkit-text-fill-color: initial;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}

.hero-main-premium h2 {
  color: #fdd757;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  margin-bottom: 0.75rem;
  line-height: 1.65;
  font-weight: 700;
}

.hero-main-premium p {
  color: rgba(255, 255, 255, 0.78);
  max-width: 690px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
}

.hero-main-premium .hero-cta-buttons {
  justify-content: flex-start;
  margin-top: 1.35rem;
}

.hero-main-premium .hero-btn {
  padding: 14px 22px;
  border-radius: 13px;
}

.hero-main-premium .hero-btn-primary {
  background: linear-gradient(135deg, #3f7aa8, #235583);
  box-shadow: 0 16px 35px -14px rgba(0, 0, 0, 0.65);
}

.hero-main-premium .hero-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: none;
  backdrop-filter: blur(6px);
}

.hero-main-premium .hero-btn-secondary:hover {
  background: #fff;
  color: var(--teal-dark);
  border-color: #fff;
}

.hero-main-premium .hero-btn-gold {
  background: var(--gold-gradient);
  color: #050a30;
  box-shadow: 0 16px 35px -14px rgba(219, 163, 39, 0.55);
}

.hero-main-premium .hero-btn-gold:hover {
  filter: brightness(1.05);
  color: #050a30;
}

.hero-btn-arrow {
  font-size: 0.8rem;
  transition: transform 0.25s ease;
}

.hero-btn-primary:hover .hero-btn-arrow {
  transform: translateX(-4px);
}

.hero-seal-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  padding: 16px 10px 36px;
}

.hero-seal {
  width: 220px;
  height: 220px;
  border: 2px solid rgba(219, 163, 39, 0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  box-shadow: none;
}

.hero-seal::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px dashed rgba(219, 163, 39, 0.4);
  border-radius: 50%;
  animation: heroSealSpin 50s linear infinite;
}

.hero-seal::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(219, 163, 39, 0.14);
  border-radius: 50%;
}

@keyframes heroSealSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.seal-inner {
  width: 154px;
  height: 154px;
  border-radius: 50%;
  background: radial-gradient(circle, #fdf5e2 0%, #f2e2b8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 0 1px rgba(219, 163, 39, 0.5),
    0 10px 28px rgba(0, 0, 0, 0.3);
}

.seal-inner img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

@media (max-width: 991px) {
  .hero-main-premium {
    min-height: auto;
    padding-top: 112px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-seal-wrap {
    order: -1;
    padding: 0 10px 10px;
  }

  .hero-seal {
    width: 175px;
    height: 175px;
  }

  .seal-inner {
    width: 124px;
    height: 124px;
  }

  .seal-inner img {
    width: 78px;
    height: 78px;
  }

  .hero-copy {
    padding: 25px 10px 35px;
    text-align: center;
  }

  .hero-main-premium .hero-cta-buttons {
    justify-content: center;
  }
}

@media (max-width: 650px) {
  .hero-main-premium h1 {
    font-size: 2.35rem;
  }

  .hero-main-premium h2 {
    font-size: 1.05rem;
  }

  .hero-main-premium p {
    font-size: 0.93rem;
    line-height: 1.85;
  }
}

/* ============================================================
   خدمات سريعة
   ============================================================ */
.quick-services-section {
  padding-top: 3rem;
  background: #fff;
}

.quick-services-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

.quick-service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 1.5rem 1.35rem;
  background: linear-gradient(180deg, #ffffff 0%, var(--light-gray) 100%);
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.quick-service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(35, 85, 131, 0.35);
}

.quick-service-card.quick-service-urgent {
  border-color: rgba(185, 28, 28, 0.28);
  background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
}

.quick-service-card.quick-service-urgent .quick-service-icon {
  background: rgba(185, 28, 28, 0.1);
  color: #b91c1c;
}

.quick-service-card.quick-service-urgent:hover {
  border-color: rgba(185, 28, 28, 0.45);
}

.quick-service-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  font-size: 1.25rem;
  transition: background 0.3s ease, color 0.3s ease;
}

.quick-service-card:hover .quick-service-icon {
  background: var(--grad-brand);
  color: #fff;
}

.quick-service-card h3 {
  font-size: 1.05rem;
  color: var(--teal-dark);
  margin: 0;
}

.quick-service-card p {
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.65;
  margin: 0;
}

.about-brief {
  max-width: 820px;
  margin: 0 auto 2rem;
  text-align: center;
}

.about-brief p {
  color: var(--gray);
  font-size: 1.05rem;
  line-height: 1.9;
  margin-bottom: 1.5rem;
}

/* تعريف المستشارية — عرض تحريري */
.about-intro {
  max-width: 900px;
  margin: 0 auto 2.75rem;
  padding: 0 1.75rem;
  border-right: 3px solid var(--secondary);
  text-align: right;
}

.about-intro-lead {
  color: var(--teal-dark);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.85;
  margin: 0 0 0.85rem;
}

.about-intro-body {
  color: var(--gray);
  font-size: 1.05rem;
  line-height: 1.9;
  margin: 0;
}

@media (max-width: 767px) {
  .about-intro {
    padding: 0 0 0 0.5rem;
    margin-bottom: 2rem;
  }
}

/* الرؤية والرسالة — الصفحة الرئيسية */
.home-vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: 960px;
  margin: 0 auto;
}

.home-vm-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--secondary);
}

.home-vm-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.home-vm-card h3 {
  color: var(--primary);
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}

.home-vm-card p {
  color: var(--gray);
  font-size: 0.98rem;
  line-height: 1.85;
  margin: 0;
}

.home-objectives {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 960px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.home-objectives li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--light-border);
  color: var(--gray);
  font-size: 0.96rem;
  line-height: 1.75;
}

.home-objectives li strong {
  display: block;
  color: var(--teal-dark);
  font-size: 0.98rem;
  margin-bottom: 4px;
}

.home-objectives li span {
  display: block;
}

.home-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}

.home-value-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.35rem 1.25rem;
  box-shadow: var(--shadow);
  text-align: center;
}

.home-value-card > i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(35, 85, 131, 0.1);
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  margin-bottom: 0.85rem;
}

.home-value-card h4 {
  color: var(--primary);
  font-size: 0.95rem;
  margin-bottom: 0.55rem;
  line-height: 1.45;
}

.home-value-card p {
  color: var(--gray);
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0;
}

.home-mandate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}

.home-mandate-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.35rem 1.25rem;
  box-shadow: var(--shadow);
}

.home-mandate-card > i {
  color: var(--teal);
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
  display: block;
}

.home-mandate-card h4 {
  color: var(--primary);
  font-size: 0.95rem;
  margin-bottom: 0.55rem;
  line-height: 1.45;
}

.home-mandate-card p {
  color: var(--gray);
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 991px) {
  .home-vm-grid,
  .home-values-grid,
  .home-mandate-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .home-vm-grid,
  .home-objectives,
  .home-values-grid,
  .home-mandate-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1199px) {
  .quick-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .quick-services-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .quick-services-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   الأزرار
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.btn-primary {
  background: var(--grad-deep);
  color: #fff;
  box-shadow: 0 12px 26px -12px rgba(35, 85, 131, 0.5);
}

.btn-secondary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 12px 26px -12px rgba(35, 85, 131, 0.45);
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -12px rgba(35, 85, 131, 0.55);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--teal);
  color: var(--teal-dark);
}

.btn-outline:hover {
  background: var(--teal);
  color: #fff;
}

.media-cta-panel .btn-outline,
.blog-cta-panel .btn-outline,
.dc-cta-panel .btn-outline,
.rp-cta-panel .btn-outline,
.ex-cta-panel .btn-outline,
.ct-cta-panel .btn-outline,
.faq-cta-panel .btn-outline,
.partners-cta-panel .btn-outline,
.af-cta-panel .btn-outline {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.media-cta-panel .btn-outline:hover,
.blog-cta-panel .btn-outline:hover,
.dc-cta-panel .btn-outline:hover,
.rp-cta-panel .btn-outline:hover,
.ex-cta-panel .btn-outline:hover,
.ct-cta-panel .btn-outline:hover,
.faq-cta-panel .btn-outline:hover,
.partners-cta-panel .btn-outline:hover,
.af-cta-panel .btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(219, 163, 39, 0.65);
  color: #fff;
}

/* أزرار البطل */
.hero-cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 1.02rem;
  font-weight: 700;
  transition: var(--transition);
}

.hero-btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 14px 30px -10px rgba(35, 85, 131, 0.5);
}

.hero-btn-primary:hover {
  transform: translateY(-4px);
  background: var(--grad-deep);
}

.hero-btn-secondary {
  background: #ffffff;
  color: var(--teal-dark);
  border: 2px solid rgba(35, 85, 131, 0.3);
  box-shadow: 0 12px 26px -14px rgba(14, 33, 51, 0.35);
}

.hero-btn-secondary:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
  transform: translateY(-4px);
}

/* زر تفاصيل البطاقة */
.btn-details {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 25px;
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(35, 85, 131, 0.45);
  transition: var(--transition);
}

.btn-details:hover {
  transform: translateY(-2px);
  background: var(--grad-deep);
}

.show-more-container {
  text-align: center;
  margin-top: 2rem;
}

/* ============================================================
   البطاقات والشبكات
   ============================================================ */
.about-features,
.specializations-grid,
.protocols-grid,
.activities-grid,
.library-grid,
.university-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.transactions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.group-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 2.5rem 0 1.25rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary-darker);
}

.group-header:first-child {
  margin-top: 0;
}

.group-header::before {
  content: "";
  width: 4px;
  height: 42px;
  border-radius: 999px;
  background: var(--secondary);
  flex-shrink: 0;
}

.group-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, rgba(219, 163, 39, 0.35), transparent);
}

.feature-card,
.spec-card,
.transaction-card,
.protocol-card,
.activity-card,
.book-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.feature-card::before,
.spec-card::before,
.transaction-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s ease;
}

.feature-card:hover,
.spec-card:hover,
.transaction-card:hover,
.protocol-card:hover,
.activity-card:hover,
.book-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(35, 85, 131, 0.35);
}

.feature-card:hover::before,
.spec-card:hover::before,
.transaction-card:hover::before {
  transform: scaleX(1);
}

/* بطاقات الميزات والاختصاصات */
.feature-card,
.spec-card {
  padding: 2rem;
  text-align: center;
}

.feature-card .icon,
.spec-card .icon {
  width: 66px;
  height: 66px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  font-size: 1.55rem;
  margin: 0 auto 1rem;
  transition: transform 0.4s ease, background 0.4s ease, color 0.4s ease;
}

.feature-card .icon i,
.spec-card .icon i {
  color: var(--teal);
  transition: color 0.4s ease;
}

.feature-card:hover .icon,
.spec-card:hover .icon {
  background: var(--grad-brand);
  color: #fff;
  transform: rotate(-6deg) scale(1.08);
}

.feature-card:hover .icon i,
.spec-card:hover .icon i {
  color: #fff;
}

.feature-card h3,
.feature-card h4,
.spec-card h3 {
  color: var(--teal-dark);
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}

.feature-card p,
.spec-card p {
  color: var(--gray);
  font-size: 0.95rem;
}

/* بطاقات المعاملات/الأخبار */
.transaction-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--light-border);
}

.transaction-header .icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  font-size: 1.35rem;
}

.transaction-card:hover .transaction-header .icon {
  background: var(--grad-brand);
  color: #fff;
}

.transaction-header h3 {
  font-size: 1.15rem;
  color: var(--teal-dark);
  margin: 0;
  flex-grow: 1;
  line-height: 1.4;
}

.transaction-body {
  padding: 1.25rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.transaction-body p {
  color: var(--gray);
  flex-grow: 1;
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
  line-height: 1.7;
}

/* ============================================================
   بوابة المعاملات الإلكترونية
   ============================================================ */
.portal-info-banner {
  background: var(--light-gray);
  border: 1px solid var(--light-border);
  color: var(--teal-dark);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 0.95rem;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 2rem;
  line-height: 1.8;
}

.portal-info-banner i {
  font-size: 1.2rem;
  color: var(--secondary);
  margin-top: 3px;
  flex-shrink: 0;
}

a.portal-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.portal-card .btn-details {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.portal-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 10px;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal-dark);
}

.portal-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1.5rem;
}

.portal-switch-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--light-border);
  background: #fff;
  color: var(--gray);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.portal-switch-item i {
  color: var(--teal);
}

.portal-switch-item:hover {
  border-color: rgba(35, 85, 131, 0.35);
  color: var(--teal-dark);
  transform: translateY(-2px);
}

.portal-switch-item.is-active {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
}

.portal-switch-item.is-active i {
  color: #fff;
}

.portal-guidelines {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin-bottom: 1.5rem;
}

.portal-guidelines-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--light-border);
}

.portal-guidelines-head i {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(219, 163, 39, 0.15);
  color: #b8860b;
}

.portal-guidelines-head h3 {
  margin: 0;
  color: var(--primary);
  font-size: 1.15rem;
}

.portal-guidelines-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.portal-guide-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--teal-dark);
  font-size: 1rem;
}

.portal-guide-section h4 i {
  color: var(--secondary);
  font-size: 0.95rem;
}

.portal-guide-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.portal-guide-section li {
  position: relative;
  padding: 7px 22px 7px 0;
  font-size: 0.9rem;
  color: var(--gray);
  line-height: 1.7;
}

.portal-guide-section li::before {
  content: "\f06a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 0;
  top: 10px;
  color: var(--secondary);
  font-size: 0.8rem;
}

@media (max-width: 800px) {
  .portal-guidelines-grid {
    grid-template-columns: 1fr;
  }
}

.portal-form-card-head {
  margin-bottom: 8px;
}

.portal-form-wrap {
  max-width: 1100px;
}

.portal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal);
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  transition: color 0.25s ease;
}

.portal-back:hover {
  color: var(--teal-dark);
}

.portal-form-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.35fr;
  gap: 28px;
  align-items: start;
}

.portal-side-info {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
}

.portal-side-info h3 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.portal-side-info h3 i {
  color: var(--secondary);
}

.portal-side-info ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.portal-side-info li {
  position: relative;
  padding: 8px 22px 8px 0;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
}

.portal-side-info li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 0;
  color: var(--secondary);
  font-size: 0.75rem;
  top: 12px;
}

.portal-side-note {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 14px;
  margin: 0;
  line-height: 1.7;
}

.portal-form-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}

.portal-form-card h3 {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: var(--primary);
}

.portal-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.portal-form-full {
  margin-bottom: 14px;
}

.portal-form-card label {
  display: block;
  font-size: 0.85rem;
  color: var(--gray);
  margin-bottom: 6px;
}

.portal-form-card label span {
  color: #c0392b;
}

.portal-form-card input,
.portal-form-card select,
.portal-form-card textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--light-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--light-gray);
  color: var(--dark);
}

.portal-form-card input[type="file"].portal-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.portal-file-upload {
  width: 100%;
}

.portal-file-dropzone {
  display: block;
  width: 100%;
  padding: 18px 16px;
  border: 1.5px dashed rgba(14, 33, 51, 0.35);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(14, 33, 51, 0.04), rgba(255, 255, 255, 0.9)),
    #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.portal-file-dropzone:hover,
.portal-file-dropzone:focus-visible,
.portal-file-upload.is-dragover .portal-file-dropzone {
  border-color: var(--secondary);
  background:
    linear-gradient(180deg, rgba(219, 163, 39, 0.1), rgba(255, 255, 255, 0.95)),
    #fff;
  box-shadow: 0 0 0 3px rgba(219, 163, 39, 0.15);
}

.portal-file-upload.has-file .portal-file-dropzone {
  border-style: solid;
  border-color: rgba(14, 33, 51, 0.28);
  background: rgba(14, 33, 51, 0.05);
}

.portal-file-upload.has-error .portal-file-dropzone {
  border-color: #c0392b;
  background: #fff7f6;
}

.portal-file-empty,
.portal-file-selected {
  display: flex;
  align-items: center;
  gap: 14px;
}

.portal-file-empty {
  flex-direction: column;
  text-align: center;
  gap: 6px;
}

.portal-file-empty[hidden],
.portal-file-selected[hidden] {
  display: none !important;
}

.portal-file-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 33, 51, 0.1);
  color: var(--primary);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.portal-file-icon.is-done {
  background: rgba(219, 163, 39, 0.18);
  color: #9a6f10;
}

.portal-file-empty strong,
.portal-file-selected-info strong {
  display: block;
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.5;
}

.portal-file-types,
.portal-file-meta {
  display: block;
  color: var(--gray);
  font-size: 0.82rem;
  line-height: 1.5;
}

.portal-file-selected {
  justify-content: space-between;
  gap: 12px;
}

.portal-file-selected-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.portal-file-selected-info > div {
  min-width: 0;
}

.portal-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-file-selected-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.portal-file-change {
  border: 1px solid rgba(14, 33, 51, 0.25);
  background: #fff;
  color: var(--primary);
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.portal-file-change:hover {
  border-color: var(--secondary);
  color: #9a6f10;
}

.portal-file-clear {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(192, 57, 43, 0.1);
  color: #c0392b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.portal-file-clear:hover {
  background: rgba(192, 57, 43, 0.18);
}

@media (max-width: 640px) {
  .portal-file-selected {
    flex-direction: column;
    align-items: stretch;
  }

  .portal-file-selected-actions {
    justify-content: flex-end;
  }
}

.portal-form-card input:focus,
.portal-form-card select:focus,
.portal-form-card textarea:focus {
  outline: none;
  border-color: var(--secondary);
}

.portal-form-card textarea {
  resize: vertical;
  min-height: 100px;
}

.portal-field-hint {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--gray);
  line-height: 1.6;
}

.portal-section-title {
  margin: 8px 0 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(35, 85, 131, 0.12);
}

.portal-section-title h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary);
}

.portal-section-title h3 i {
  color: var(--secondary);
}

.portal-field-error {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: #c0392b;
  font-weight: 700;
  line-height: 1.6;
}

.portal-field-error[hidden] {
  display: none;
}

.portal-form-full.has-error input,
.portal-form-full.has-error select,
.portal-form-full.has-error textarea,
.portal-form-row > div.has-error input,
.portal-form-row > div.has-error select,
.portal-form-row > div.has-error textarea {
  border-color: #c0392b;
  background: #fff7f6;
}

.portal-ack-block {
  margin-top: 6px;
  margin-bottom: 18px;
}

.portal-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(219, 163, 39, 0.1);
  border: 1px solid rgba(219, 163, 39, 0.35);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  color: var(--teal-dark);
  font-size: 0.92rem;
  line-height: 1.8;
  font-weight: 700;
}

.portal-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 4px;
  accent-color: var(--teal);
  cursor: pointer;
  flex-shrink: 0;
}

.portal-check span {
  flex: 1;
}

.portal-multi-upload {
  border: 1px dashed rgba(35, 85, 131, 0.35);
  border-radius: 12px;
  background: #f7f7f7;
  padding: 14px;
}

.portal-multi-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(35, 85, 131, 0.1);
  border: 1px solid rgba(35, 85, 131, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.portal-multi-banner i {
  color: var(--teal);
  font-size: 1.35rem;
  margin-top: 2px;
}

.portal-multi-banner strong {
  display: block;
  color: var(--teal-dark);
  margin-bottom: 4px;
  font-size: 0.95rem;
}

.portal-multi-banner p {
  margin: 0;
  color: var(--gray);
  font-size: 0.85rem;
  line-height: 1.7;
}

.portal-multi-back-note {
  margin-top: 8px !important;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(219, 163, 39, 0.12);
  color: var(--teal-dark) !important;
}

.portal-multi-back-note i {
  color: var(--secondary);
  margin-left: 6px;
}

.portal-multi-banner b {
  color: var(--primary);
}

.portal-multi-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.portal-multi-count {
  font-size: 0.92rem;
  color: var(--gray);
  font-weight: 700;
}

.portal-multi-count-num {
  color: var(--primary);
  font-size: 1.1rem;
}

.portal-multi-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 0.9rem;
}

.portal-multi-add:disabled,
.portal-multi-add.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.portal-multi-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.portal-multi-empty {
  text-align: center;
  color: var(--gray);
  font-size: 0.9rem;
  padding: 18px 10px;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 10px;
}

.portal-multi-item,
.portal-multi-report {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 10px;
  padding: 10px 12px;
}

.portal-multi-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.portal-multi-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.portal-multi-item-info i {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  flex-shrink: 0;
}

.portal-multi-item-info strong {
  display: block;
  color: var(--teal-dark);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42vw;
}

.portal-multi-item-info span {
  font-size: 0.78rem;
  color: var(--gray);
}

.portal-multi-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.portal-multi-side {
  border: 1px solid var(--light-border);
  border-radius: 10px;
  padding: 10px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.portal-multi-side.is-empty {
  border-style: dashed;
  background: #fffdf7;
}

.portal-multi-side.is-optional {
  border-style: dashed;
  background: #fff;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
}

.portal-multi-optional-hint {
  font-size: 0.75rem;
  color: var(--gray);
  text-align: center;
}

.portal-multi-side-info {
  min-width: 0;
}

.portal-side-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
  background: rgba(219, 163, 39, 0.18);
  color: #8a6c2c;
}

.portal-side-badge.is-front {
  background: rgba(35, 85, 131, 0.14);
  color: var(--teal-dark);
}

.portal-multi-side-info strong {
  display: block;
  font-size: 0.84rem;
  color: var(--teal-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 28vw;
}

.portal-multi-side-info span {
  display: block;
  font-size: 0.75rem;
  color: var(--gray);
}

.portal-multi-side-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.portal-multi-add-back {
  background: var(--gold-gradient);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.portal-multi-replace-back {
  border: 1px solid var(--light-border);
  background: #fff;
  color: var(--teal-dark);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.portal-multi-remove,
.portal-multi-remove-back {
  border: none;
  background: rgba(192, 57, 43, 0.1);
  color: #c0392b;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
}

.portal-multi-remove:hover,
.portal-multi-remove-back:hover {
  background: #c0392b;
  color: #fff;
}

@media (max-width: 800px) {
  .portal-multi-sides {
    grid-template-columns: 1fr;
  }

  .portal-multi-side-info strong {
    max-width: 60vw;
  }
}

.portal-submit {
  width: 100%;
  margin-top: 8px;
}

.portal-success {
  display: none;
}

.portal-success-modal-content {
  width: min(480px, 94vw);
  text-align: center;
  padding: 2rem 1.75rem 1.75rem;
}

.portal-success-modal .modal-close {
  position: absolute;
  top: 12px;
  left: 12px;
  border: none;
  background: var(--light-gray);
  color: var(--gray);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.portal-success-modal .modal-close:hover {
  background: var(--primary);
  color: #fff;
}

.portal-success-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  font-size: 2rem;
}

.portal-success-modal-body h2 {
  margin: 0 0 10px;
  color: var(--primary);
  font-size: 1.35rem;
}

.portal-success-service {
  margin: 0 0 16px;
  color: var(--gray);
  font-size: 0.95rem;
}

.portal-success-service strong {
  color: var(--teal-dark);
}

.portal-success-ref {
  background: var(--light-gray);
  border: 1px solid var(--light-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.portal-success-ref span {
  display: block;
  font-size: 0.8rem;
  color: var(--gray);
  margin-bottom: 6px;
}

.portal-success-ref strong {
  display: block;
  font-size: 1.25rem;
  color: var(--primary);
  letter-spacing: 0.5px;
}

.portal-success-note {
  margin: 0 0 18px;
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.7;
}

.portal-success-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.portal-success-actions .btn {
  min-width: 140px;
}

@media (max-width: 800px) {
  .portal-form-layout,
  .portal-form-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   أقسام الصفحة الرئيسية
   ============================================================ */
#about-section:not(.about-section-premium),
#specializations-section,
#transactions-guide-section {
  background: linear-gradient(180deg, #ffffff 0%, var(--light-gray) 100%);
}

#counselor-section {
  display: none;
}

/* معرض الصور والمرئيات — مخفي مؤقتاً */
#media-gallery-section {
  display: none;
}

.cultural-counselor-section,
.news-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #ffffff 100%);
}

/* ============================================================
   برامج عافية
   ============================================================ */
.aafia-programs-section {
  background: linear-gradient(180deg, #ffffff 0%, var(--light-gray) 100%);
}

.programs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.35rem;
}

.program-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.program-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(35, 85, 131, 0.35);
}

.program-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  font-size: 1.45rem;
  margin-bottom: 1.1rem;
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.program-card:hover .program-icon {
  background: var(--grad-brand);
  color: #fff;
  transform: rotate(-4deg) scale(1.05);
}

.program-card h3 {
  font-size: 1.12rem;
  color: var(--teal-dark);
  margin-bottom: 0.65rem;
  line-height: 1.4;
}

.program-card p {
  color: var(--gray);
  font-size: 0.92rem;
  line-height: 1.75;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.program-card .btn-details {
  align-self: flex-start;
}

.program-soon-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--gold-gradient);
  color: #050a30;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

.program-card--soon {
  opacity: 0.92;
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
}

.program-card--soon:hover {
  transform: none;
  box-shadow: var(--shadow);
  border-color: var(--light-border);
}

.program-card--soon:hover .program-icon {
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  transform: none;
}

.btn-details--disabled {
  background: var(--light-gray) !important;
  color: var(--gray) !important;
  box-shadow: none !important;
  pointer-events: none;
  cursor: default;
}

@media (max-width: 1100px) {
  .programs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .programs-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   صفحة برامج عافية — page-hero-aafia / af-*
   ============================================================ */
.page-hero.page-hero-aafia {
  animation: none;
  background:
    radial-gradient(circle at 14% 22%, rgba(63, 122, 168, 0.24), transparent 42%),
    radial-gradient(circle at 86% 78%, rgba(219, 163, 39, 0.16), transparent 38%),
    linear-gradient(135deg, #050a30 0%, #123054 48%, #163a56 100%);
  box-shadow: inset 0 4px 0 0 var(--secondary);
  text-align: right;
  min-height: auto;
  padding: calc(38px + 88px + 2rem) 0 4.5rem;
  color: #fff;
  align-items: stretch;
}

.page-hero.page-hero-aafia::after {
  height: 72px;
}

.page-hero-aafia-inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 3;
  animation: heroFadeIn 0.9s ease-out;
}

.page-hero-aafia-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-hero-aafia-eyebrow i {
  color: var(--secondary);
}

.page-hero.page-hero-aafia h1 {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
}

.page-hero.page-hero-aafia p {
  margin-inline: 0;
  margin-left: 0;
  margin-right: 0;
}

.page-hero.page-hero-aafia .page-hero-aafia-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #f5dc8a;
  margin: 0 0 1rem;
  line-height: 1.65;
}

.page-hero.page-hero-aafia .page-hero-aafia-desc {
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.94);
  max-width: 720px;
  margin: 0 0 1rem;
  font-weight: 500;
}

.page-hero.page-hero-aafia .page-hero-aafia-partner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.88rem;
  line-height: 1.7;
  max-width: 720px;
  margin: 0 0 1.25rem;
  font-weight: 500;
}

.page-hero.page-hero-aafia .page-hero-aafia-partner img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
}

.page-hero-aafia-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-hero-aafia-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  transition: var(--transition);
}

.page-hero-aafia-nav a:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(219, 163, 39, 0.55);
  color: #fff;
}

.af-how-section {
  background: var(--light-gray);
  padding-top: 0;
}

.af-how-strip {
  background: var(--grad-dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 40px 34px;
  box-shadow: var(--shadow-hover);
}

.af-how-strip h2 {
  color: #fff;
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.af-how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.af-how-step {
  text-align: center;
}

.af-how-step-num {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid var(--secondary);
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 auto 14px;
}

.af-how-step h4 {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 6px;
}

.af-how-step p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.af-note {
  background: #fff;
  border: 1px solid var(--light-border);
  border-right: 4px solid var(--secondary);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-size: 0.95rem;
  color: var(--gray);
  box-shadow: var(--shadow);
  margin-top: 2rem;
}

.af-note b {
  color: var(--primary);
}

.af-note a {
  color: var(--secondary);
  font-weight: 700;
}

.af-cta-section {
  background: var(--light-gray);
  padding-top: 0;
  padding-bottom: 3rem;
}

.af-cta-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--grad-dark);
  color: #fff;
  box-shadow: var(--shadow-hover);
}

.af-cta-panel h3 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.af-cta-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  line-height: 1.8;
}

.af-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 991px) {
  .page-hero-aafia-inner {
    padding: 0 1.25rem;
  }

  .page-hero.page-hero-aafia {
    padding: calc(38px + 72px + 1.5rem) 0 3.5rem;
  }
}

@media (max-width: 800px) {
  .af-how-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .af-cta-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .af-cta-actions {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .af-how-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   بطاقات الأخبار (مع صور)
   ============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.news-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}

.news-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.news-image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--light-gray);
  border: none;
  padding: 0;
  width: 100%;
  cursor: pointer;
  font: inherit;
  text-align: right;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.5s ease;
}

.news-card:hover .news-image img {
  transform: scale(1.06);
}

.news-cover {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(63, 122, 168, 0.35), transparent 50%),
    linear-gradient(135deg, #163a56 0%, #050a30 100%);
}

.news-cover i {
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.9);
}

.news-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--grad-brand);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  box-shadow: 0 6px 14px -6px rgba(35, 85, 131, 0.55);
}

.news-body {
  padding: 1.25rem 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.news-date {
  display: block;
  font-size: 0.8rem;
  color: var(--gray);
  margin-bottom: 0.5rem;
}

.news-body h3 {
  font-size: 1.1rem;
  margin-bottom: 0.65rem;
  line-height: 1.45;
}

.news-body h3 a {
  color: var(--teal-dark);
  transition: color 0.25s ease;
}

.news-body h3 a:hover {
  color: var(--teal);
}

.news-body p {
  color: var(--gray);
  font-size: 0.92rem;
  line-height: 1.75;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.news-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal);
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: auto;
  transition: gap 0.25s ease, color 0.25s ease;
}

.news-link:hover {
  color: var(--teal-dark);
  gap: 12px;
}

.news-title-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
  text-align: right;
  line-height: inherit;
}

.news-title-btn:hover {
  color: var(--teal);
}

.news-body .news-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

/* نافذة تفاصيل الخبر */
.news-modal {
  padding: 1.25rem;
  align-items: center;
  justify-content: center;
}

.news-modal-content {
  position: relative;
  width: min(780px, 94vw);
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.news-modal .modal-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--teal-dark);
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: var(--transition);
}

.news-modal .modal-close:hover {
  background: var(--secondary);
  color: #050a30;
  transform: rotate(90deg);
}

#news-modal-body {
  overflow-y: auto;
  max-height: 90vh;
}

.news-modal-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--light-gray);
}

.news-modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.news-modal-media .news-cover {
  height: 100%;
  min-height: 220px;
}

.news-modal-info {
  padding: 1.5rem 1.6rem 1.75rem;
}

.news-modal-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.85rem;
}

.news-modal-meta .news-badge {
  position: static;
}

.news-modal-meta time {
  font-size: 0.85rem;
  color: var(--gray);
}

.news-modal-info h2 {
  font-size: 1.4rem;
  color: var(--teal-dark);
  margin-bottom: 1rem;
  line-height: 1.4;
}

.news-modal-info p {
  color: var(--gray);
  font-size: 0.98rem;
  line-height: 1.9;
  margin-bottom: 0.9rem;
}

@media (max-width: 991px) {
  .news-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .news-grid {
    grid-template-columns: 1fr;
  }

  .news-modal-info {
    padding: 1.2rem 1.15rem 1.4rem;
  }

  .news-modal-info h2 {
    font-size: 1.2rem;
  }
}

/* ============================================================
   أقسام الصفحة الرئيسية (تكملة)
   ============================================================ */
.about-grid {
  max-width: 1000px;
  margin: 0 auto;
}

.about-attache-section {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 2.5rem;
  color: var(--gray);
  font-size: 1.05rem;
}

.about-features {
  margin-top: 1rem;
}

/* قسم الكلمات */
.speech-toggle-buttons {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.speech-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 2px solid var(--teal);
  background: transparent;
  color: var(--teal-dark);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 50px;
  font-family: inherit;
  transition: var(--transition);
}

.speech-toggle-btn:hover {
  background: rgba(35, 85, 131, 0.1);
}

.speech-toggle-btn.active {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
}

.counselor-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .counselor-content {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }
}

.counselor-image {
  flex-shrink: 0;
  width: 280px;
  height: 340px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 3px solid var(--secondary);
  box-shadow: var(--shadow);
  cursor: pointer;
  background: #f3f3f3;
  align-self: flex-start;
  margin-top: -5.5rem;
}

@media (min-width: 768px) {
  .counselor-image {
    margin-top: -3.5rem;
  }
}

@media (max-width: 400px) {
  .counselor-image {
    width: 100%;
    max-width: 240px;
    height: 290px;
    margin-top: -3rem;
  }
}

.counselor-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}

.speech-text-container {
  flex-grow: 1;
  max-width: 640px;
}

.speech-content {
  display: none;
  animation: heroFadeIn 0.5s ease-in-out;
  width: 100%;
}

.speech-content.active {
  display: block;
}

.speech-content p {
  font-size: 0.98rem;
  line-height: 1.8;
  margin-bottom: 0.75rem;
  text-align: right;
  color: var(--dark);
}

.center-align {
  width: fit-content;
  margin: 0 auto;
  text-align: center !important;
}

.speech-signature {
  font-size: 1rem;
  font-weight: 700;
  color: var(--teal-dark);
  margin-top: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--secondary);
  width: fit-content;
  margin-right: auto;
  margin-left: 0;
  text-align: left;
}

/* ============================================================
   الفوتر — كحلي بحد ذهبي علوي، بنفس هوية السفارة
   ============================================================ */
footer {
  background: var(--primary);
  color: rgba(255, 255, 255, 0.75);
  padding: 4rem 0 2rem;
  border-top: 15px solid var(--secondary);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.25rem;
  text-decoration: none;
  color: inherit;
}

.footer-brand img {
  height: 56px;
  width: auto;
  flex-shrink: 0;
}

.footer-brand-text strong {
  display: block;
  color: var(--secondary);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
}

.footer-brand-text span {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2px;
}

.footer-brand-text em {
  font-style: normal;
  color: var(--secondary);
}

.footer-col h3 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.6rem;
}

.footer-col h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 3px;
  background: var(--secondary);
  border-radius: 3px;
}

.footer-col p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
}

.footer-col ul li {
  margin-bottom: 0.7rem;
}

.footer-col ul li a,
.footer-col ul li {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.92rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-col ul li a:hover {
  color: var(--secondary);
  padding-right: 4px;
}

.footer-col ul li a i,
.footer-col ul li i {
  color: var(--secondary);
  font-size: 0.85rem;
}

.social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.social-icons a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.2rem;
  transition: var(--transition);
}

.social-icons a:hover {
  background: var(--secondary);
  color: #050a30;
  transform: translateY(-3px);
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.88rem;
}

/* ============================================================
   نافذة الصور (Modal)
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 48, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.is-visible {
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* نافذة تفاصيل المعاملة */
.transaction-modal {
  padding: 1.25rem;
  align-items: center;
  justify-content: center;
}

.transaction-modal-content {
  position: relative;
  background: #fff;
  width: min(820px, 94vw);
  max-height: 90vh;
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.45);
  padding: 0;
  transform: scale(0.94);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.modal-content:not(.transaction-modal-content) {
  position: relative;
  background: #fff;
  width: min(720px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  border-radius: var(--radius);
  box-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.45);
  padding: 1.75rem 1.75rem 1.5rem;
  transform: scale(0.94);
  transition: transform 0.3s ease;
}

.modal-overlay.is-visible .transaction-modal-content,
.modal-overlay.is-visible .modal-content {
  transform: scale(1);
}

.transaction-modal .modal-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--teal-dark);
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.transaction-modal .modal-close:hover {
  background: var(--secondary);
  color: #050a30;
  transform: rotate(90deg);
}

#transaction-modal-body {
  overflow-y: auto;
  max-height: 90vh;
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 33, 51, 0.35) transparent;
}

.tx-detail {
  display: flex;
  flex-direction: column;
}

.tx-detail-hero {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem 1.75rem 1.35rem;
  padding-left: 3.25rem;
  background: linear-gradient(135deg, #050a30 0%, #0e2133 55%, #235583 100%);
  color: #fff;
}

.tx-detail-hero-icon {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  color: var(--secondary);
  font-size: 1.45rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.tx-detail-group {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  margin-bottom: 0.45rem;
}

.tx-detail-hero-copy h2 {
  font-size: 1.35rem;
  color: #fff;
  margin: 0 0 0.65rem;
  line-height: 1.4;
}

.tx-detail-hero .tx-chip {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.tx-detail-hero .tx-chip i {
  color: var(--secondary);
}

.tx-detail-purpose {
  margin: 0;
  padding: 1.15rem 1.75rem;
  color: var(--dark);
  font-size: 0.98rem;
  line-height: 1.9;
  background: #f7f7f7;
  border-bottom: 1px solid rgba(14, 33, 51, 0.08);
}

.tx-detail-more {
  display: block;
  margin-top: 0.65rem;
  color: var(--gray-dark);
}

.tx-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 1.15rem 1.75rem 0.25rem;
}

.tx-detail-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.85rem 0.95rem;
  border-radius: var(--radius-sm);
  background: var(--light-gray);
  border: 1px solid rgba(14, 33, 51, 0.07);
}

.tx-detail-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  font-size: 0.85rem;
}

.tx-detail-stat-label {
  font-size: 0.76rem;
  color: var(--gray);
  font-weight: 600;
}

.tx-detail-stat strong {
  color: var(--teal-dark);
  font-size: 0.92rem;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.tx-detail-sections {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.15rem 1.75rem 0.5rem;
}

.tx-detail-section {
  background: #fff;
  border: 1px solid rgba(14, 33, 51, 0.09);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
}

.tx-detail-section-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(14, 33, 51, 0.08);
}

.tx-detail-section-head i {
  color: var(--secondary);
  font-size: 0.95rem;
}

.tx-detail-section-head h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--teal-dark);
}

.tx-docs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.tx-docs li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--gray);
  font-size: 0.92rem;
  line-height: 1.75;
}

.tx-docs li i {
  color: var(--teal);
  margin-top: 0.2rem;
  font-size: 0.88rem;
  flex-shrink: 0;
}

.tx-docs--includes li i {
  color: var(--secondary);
}

.tx-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tx-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0.75rem;
  position: relative;
  padding-bottom: 1rem;
}

.tx-step:last-child {
  padding-bottom: 0;
}

.tx-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 36px;
  right: 17px;
  width: 2px;
  height: calc(100% - 28px);
  background: linear-gradient(to bottom, rgba(219, 163, 39, 0.55), rgba(35, 85, 131, 0.25));
}

.tx-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-brand);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(35, 85, 131, 0.28);
  position: relative;
  z-index: 1;
}

.tx-step-text {
  color: var(--gray);
  font-size: 0.93rem;
  line-height: 1.75;
  padding-top: 0.35rem;
}

.tx-detail-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0.35rem 1.75rem 0;
  background: #fdf6e3;
  border: 1px solid #e4d2a0;
  color: #8a6c2c;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
  line-height: 1.75;
}

.tx-detail-note a {
  color: var(--teal-dark);
  font-weight: 800;
  text-decoration: underline;
}

.tx-detail-note i {
  color: var(--secondary);
  margin-top: 0.15rem;
}

.tx-detail-footer {
  padding: 1rem 1.75rem 1.35rem;
  margin-top: 0.75rem;
  border-top: 1px solid rgba(14, 33, 51, 0.08);
  background: #fafafa;
}

.tx-detail-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  background: var(--grad-brand);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 8px 18px -6px rgba(35, 85, 131, 0.45);
  transition: var(--transition);
}

.tx-detail-cta:hover {
  background: var(--grad-deep);
  transform: translateY(-2px);
  color: #fff;
}

/* أنماط قديمة للبطاقات */
.tx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal-dark);
  background: var(--light-gray);
  padding: 5px 12px;
  border-radius: 20px;
}

.tx-chip i {
  color: var(--secondary);
  font-size: 0.75rem;
}

.tx-purpose {
  color: var(--gray);
  font-size: 0.98rem;
  line-height: 1.85;
  margin-bottom: 1.25rem;
}

.tx-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 1.25rem;
}

.tx-meta {
  background: var(--light-gray);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tx-meta-label {
  font-size: 0.8rem;
  color: var(--gray);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tx-meta-label i {
  color: var(--secondary);
}

.tx-meta strong {
  color: var(--teal-dark);
  font-size: 0.95rem;
}

.tx-block {
  margin-bottom: 1.15rem;
}

.tx-block h3 {
  font-size: 1rem;
  color: var(--teal-dark);
  margin-bottom: 0.65rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tx-block h3 i {
  color: var(--secondary);
  font-size: 0.9rem;
}

.tx-list {
  padding-right: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tx-list li {
  color: var(--gray);
  font-size: 0.92rem;
  line-height: 1.7;
}

.tx-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #FDF6E3;
  border: 1px solid #E4D2A0;
  color: #8A6C2C;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.7;
}

.tx-note i {
  color: var(--secondary);
  margin-top: 3px;
}

button.btn-details {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

@media (max-width: 700px) {
  .tx-detail-stats,
  .tx-meta-grid {
    grid-template-columns: 1fr;
  }

  .tx-detail-hero {
    padding: 1.25rem 1.15rem 1.1rem;
    padding-left: 2.85rem;
  }

  .tx-detail-purpose,
  .tx-detail-stats,
  .tx-detail-sections,
  .tx-detail-note,
  .tx-detail-footer {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .tx-detail-note {
    margin-left: 1.15rem;
    margin-right: 1.15rem;
  }

  .transaction-modal-content {
    width: min(820px, 96vw);
    max-height: 92vh;
  }

  .tx-detail-hero .tx-chips {
    flex-direction: column;
    align-items: stretch;
  }
}

.image-modal-content {
  position: relative;
  max-width: 92vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

#modal-image {
  max-width: 92vw;
  max-height: 72vh;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}

#image-modal .modal-close {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--secondary);
  color: #050a30;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 3;
  transition: var(--transition);
}

#image-modal .modal-close:hover {
  transform: rotate(90deg);
}

.image-controls-top {
  display: flex;
  gap: 10px;
}

.image-controls-top button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  transition: var(--transition);
}

.image-controls-top button:hover {
  background: var(--teal);
}

.image-counter {
  color: #fff;
  font-size: 0.9rem;
}

.image-thumbnails {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.image-thumbnail {
  width: 60px;
  height: 45px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.6;
  border: 2px solid transparent;
  transition: var(--transition);
}

.image-thumbnail.active,
.image-thumbnail:hover {
  opacity: 1;
  border-color: var(--secondary);
}

/* ============================================================
   أدوات مساعدة
   ============================================================ */
.shimmer-effect {
  position: relative;
  overflow: hidden;
}

/* ============================================================
   قسم النداء للإجراء (CTA) الداكن
   ============================================================ */
section[style*="background:var(--primary)"] {
  border-radius: 28px;
  margin: 0 auto 3rem;
  width: 92%;
  max-width: 1280px;
  border-top: 3px solid var(--secondary);
  background:
    radial-gradient(circle at 20% 20%, rgba(63, 122, 168, 0.28), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(35, 85, 131, 0.30), transparent 45%),
    linear-gradient(135deg, var(--teal-darker) 0%, var(--teal-dark) 100%) !important;
}

/* ============================================================
   استجابة للشاشات الصغيرة
   ============================================================ */
@media (max-width: 767px) {
  section,
  .section {
    padding: 3.25rem 0;
  }

  .page-hero:not(.hero-main-premium) {
    min-height: 42vh;
    padding: calc(78px + 1.5rem) 0 5rem;
  }

  .page-hero-content {
    padding: 0 1.25rem;
  }

  .transactions-grid,
  .specializations-grid,
  .about-features {
    grid-template-columns: 1fr;
  }

  .logo-text h1 {
    font-size: 1.15rem;
  }

  .logo-text p {
    font-size: 0.72rem;
  }

  /* منع تكبير Safari/iOS التلقائي عند التركيز على الحقول (يتطلب font-size >= 16px) */
  .ct-form input,
  .ct-form select,
  .ct-form textarea,
  .portal-form-card input,
  .portal-form-card select,
  .portal-form-card textarea,
  .volunteer-form-card input,
  .volunteer-form-card select,
  .volunteer-form-card textarea,
  .med-search-wrap input {
    font-size: 16px;
  }
}

/* ============================================================
   لوحة إدارة الطلبات (Admin Panel)
   ============================================================ */
.admin-login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(35, 85, 131, 0.18), transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(219, 163, 39, 0.16), transparent 35%),
    linear-gradient(160deg, #f5f5f5 0%, #f0f0f0 50%, #f7f3e8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.admin-login-wrap {
  width: min(460px, 100%);
}

.admin-login-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 32px 28px;
}

.admin-login-brand {
  text-align: center;
  margin-bottom: 20px;
}

.admin-login-brand img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 12px;
}

.admin-login-brand h1 {
  margin: 0 0 6px;
  color: var(--primary);
  font-size: 1.35rem;
}

.admin-login-brand p {
  margin: 0;
  color: var(--gray);
  font-size: 0.9rem;
}

.admin-login-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(35, 85, 131, 0.1);
  border: 1px solid rgba(35, 85, 131, 0.2);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
  color: var(--teal-dark);
  font-size: 0.88rem;
  line-height: 1.7;
}

.admin-login-banner i {
  color: var(--secondary);
  margin-top: 3px;
}

.admin-field {
  margin-bottom: 14px;
}

.admin-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--gray);
}

.admin-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--light-border);
  border-radius: 8px;
  background: var(--light-gray);
  font-family: inherit;
  font-size: 0.95rem;
}

.admin-field input:focus {
  outline: none;
  border-color: var(--secondary);
}

.admin-login-error {
  color: #c0392b;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 12px;
}

.admin-login-error[hidden] {
  display: none;
}

.admin-login-btn {
  width: 100%;
}

.admin-login-hint {
  text-align: center;
  margin: 14px 0 10px;
  font-size: 0.85rem;
  color: var(--gray);
}

.admin-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  width: 100%;
  justify-content: center;
}

.admin-body {
  background: #f4f4f4;
  min-height: 100vh;
}

/* عزل لوحة الإدارة عن هيدر/فوتر الموقع العام */
.admin-body > header,
.admin-login-page > header,
.admin-report-page > header,
.admin-body .toptopbar,
.admin-login-page .toptopbar,
.admin-report-page .toptopbar,
.admin-body .topbar,
.admin-login-page .topbar,
.admin-report-page .topbar,
.admin-body > footer,
.admin-login-page > footer,
.admin-report-page > footer,
.admin-body .mobile-sidebar,
.admin-body .sidebar-overlay {
  display: none !important;
}

.admin-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.admin-sidebar {
  background: var(--primary);
  color: #fff;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-sidebar-brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  padding: 4px;
}

.admin-sidebar-brand strong {
  display: block;
  font-size: 0.98rem;
}

.admin-sidebar-brand span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.admin-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.92rem;
}

.admin-nav a:hover,
.admin-nav a.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.admin-logout-btn {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.admin-logout-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.admin-main {
  padding: 14px 18px 28px;
  min-width: 0;
}

.admin-main > section {
  padding: 0;
}

.admin-topbar {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 12px;
  border-bottom: 1px solid var(--light-border);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.admin-topbar-text {
  min-width: 0;
}

.admin-topbar h1 {
  margin: 0 0 2px;
  color: var(--primary);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.3;
}

.admin-topbar p {
  margin: 0;
  color: var(--gray);
  font-size: 0.84rem;
  line-height: 1.5;
}

.admin-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--teal-dark);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--light-border);
  background: #fff;
  color: var(--gray);
  border-radius: 999px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.admin-tab i {
  color: var(--teal);
  font-size: 0.9rem;
}

.admin-tab-count {
  font-style: normal;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--light-gray);
  color: var(--teal-dark);
  font-size: 0.75rem;
  font-weight: 800;
}

.admin-tab:hover {
  border-color: rgba(35, 85, 131, 0.35);
  color: var(--teal-dark);
  transform: translateY(-1px);
}

.admin-tab.is-active {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
}

.admin-tab.is-active i,
.admin-tab.is-active .admin-tab-count {
  color: #fff;
}

.admin-tab.is-active .admin-tab-count {
  background: rgba(255, 255, 255, 0.22);
}

.admin-table.is-service-scoped .admin-col-service {
  display: none;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.admin-stat-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

.admin-stat-card span {
  display: block;
  color: var(--gray);
  font-size: 0.8rem;
  margin-bottom: 4px;
}

.admin-stat-card strong {
  font-size: 1.35rem;
  color: var(--primary);
}

.admin-stat-card.is-pending strong { color: #8a6c2c; }
.admin-stat-card.is-accepted strong { color: var(--teal); }
.admin-stat-card.is-rejected strong { color: #c0392b; }

.admin-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.admin-search {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.admin-search i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray);
}

.admin-search input,
.admin-toolbar select {
  width: 100%;
  padding: 10px 38px 10px 12px;
  border: 1px solid var(--light-border);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--dark);
}

.admin-toolbar select {
  width: auto;
  min-width: 170px;
  padding-right: 12px;
}

.admin-table-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

.admin-table th,
.admin-table td {
  padding: 14px 16px;
  text-align: right;
  border-bottom: 1px solid var(--light-border);
  font-size: 0.9rem;
}

.admin-table th {
  background: #f7f7f7;
  color: var(--teal-dark);
  font-weight: 800;
  white-space: nowrap;
}

.admin-table tbody tr:hover {
  background: #f9f9f9;
}

.admin-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--primary);
  background: var(--light-gray);
  padding: 3px 8px;
  border-radius: 6px;
}

.admin-empty {
  text-align: center !important;
  color: var(--gray);
  padding: 28px !important;
}

.admin-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
}

.admin-badge-pending {
  background: #fdf6e3;
  color: #8a6c2c;
}

.admin-badge-accepted {
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal-dark);
}

.admin-badge-rejected {
  background: rgba(192, 57, 43, 0.1);
  color: #c0392b;
}

.admin-badge-partial {
  background: rgba(219, 163, 39, 0.18);
  color: #8a6c2c;
}

.admin-view-btn {
  background: var(--light-gray);
  color: var(--teal-dark);
  border: 1px solid var(--light-border);
  padding: 8px 14px;
  font-size: 0.85rem;
}

.admin-view-btn:hover {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
}

.admin-detail-modal .admin-detail-content {
  width: min(640px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
}

.admin-detail-modal .modal-close {
  position: absolute;
  top: 12px;
  left: 12px;
  border: none;
  background: var(--light-gray);
  color: var(--gray);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
}

.admin-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--light-border);
}

.admin-detail-head h2 {
  margin: 0;
  color: var(--primary);
  font-size: 1.25rem;
}

.admin-detail-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.admin-detail-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  padding: 10px 12px;
  background: #f8f8f8;
  border-radius: 10px;
}

.admin-detail-row span {
  color: var(--gray);
  font-size: 0.85rem;
}

.admin-detail-row strong {
  color: var(--teal-dark);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.6;
  word-break: break-word;
}

.admin-detail-actions {
  border-top: 1px solid var(--light-border);
  padding-top: 16px;
}

.admin-reject-box {
  margin-bottom: 12px;
}

.admin-reject-box label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--gray);
}

.admin-reject-box input[type="text"] {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--light-border);
  border-radius: 8px;
  font-family: inherit;
  background: var(--light-gray);
}

.admin-reject-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--primary);
}

.admin-reject-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-reject-option {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 0 !important;
  padding: 10px 12px;
  border: 1px solid var(--light-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.admin-reject-option:hover {
  border-color: rgba(192, 57, 43, 0.28);
  background: rgba(192, 57, 43, 0.03);
}

.admin-reject-option input {
  margin-top: 3px;
  accent-color: #c0392b;
  flex-shrink: 0;
}

.admin-reject-option span {
  color: var(--teal-dark);
  font-size: 0.84rem;
  line-height: 1.5;
  font-weight: 600;
}

.admin-reject-option:has(input:checked) {
  border-color: rgba(192, 57, 43, 0.45);
  background: rgba(192, 57, 43, 0.07);
}

.admin-reject-box.is-invalid .admin-reject-label::after {
  content: " — اختر سبباً أو اكتبه يدوياً";
  color: #c0392b;
  font-weight: 700;
}

.admin-reject-box.is-invalid .admin-reject-option {
  border-color: rgba(192, 57, 43, 0.35);
}

.admin-reject-custom {
  margin-top: 8px;
}

.admin-reject-custom label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
}

.admin-reject-custom input[type="text"] {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--light-border);
  border-radius: 8px;
  font-family: inherit;
  background: #fff;
}

.admin-reject-custom[hidden] {
  display: none !important;
}

.admin-reject-box.is-invalid .admin-reject-custom input {
  border-color: rgba(192, 57, 43, 0.45);
}

.admin-detail-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-reject-btn {
  background: rgba(192, 57, 43, 0.1);
  color: #c0392b;
  border: 1px solid rgba(192, 57, 43, 0.25);
}

.admin-reject-btn:hover {
  background: #c0392b;
  color: #fff;
}

.admin-detail-locked,
.admin-detail-demo {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--gray);
  line-height: 1.7;
}

.admin-detail-demo {
  border-top: 1px dashed var(--light-border);
  padding-top: 12px;
}

@media (max-width: 992px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .admin-sidebar-brand {
    border-bottom: none;
    padding-bottom: 8px;
  }

  .admin-nav {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .admin-logout-btn {
    margin-right: auto;
  }

  .admin-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .admin-stats {
    grid-template-columns: 1fr;
  }

  .admin-detail-row {
    grid-template-columns: 1fr;
  }

  .admin-topbar {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   معاينة التقارير الطبية — صفحة كاملة (بيانات يمين / صورة يسار)
   ============================================================ */
body.admin-report-max-active {
  overflow: hidden;
}

.admin-report-page {
  background:
    radial-gradient(circle at 12% 0%, rgba(35, 85, 131, 0.12), transparent 42%),
    linear-gradient(180deg, #f2f2f2 0%, #eeeeee 100%);
  min-height: 100vh;
}

.admin-report-page section {
  padding: 0;
}

.admin-report-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.admin-report-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: linear-gradient(120deg, #0e2133 0%, #235583 100%);
  color: #fff;
  box-shadow: 0 10px 30px rgba(14, 33, 51, 0.25);
}

.admin-report-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 8px 14px;
}

.admin-report-back:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.admin-report-bar-title {
  text-align: center;
  min-width: 0;
  flex: 1;
}

.admin-report-kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 2px;
}

.admin-report-bar-title h1 {
  margin: 0;
  font-size: 1.15rem;
  color: #fff;
}

.admin-report-bar-title p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.admin-report-bar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.admin-report-rules-dropdown {
  position: relative;
}

.admin-report-rules-dropdown summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.84rem;
  font-weight: 800;
  user-select: none;
}

.admin-report-rules-dropdown summary::-webkit-details-marker {
  display: none;
}

.admin-report-rules-dropdown summary:hover {
  background: rgba(255, 255, 255, 0.22);
}

.admin-report-rules-dropdown summary::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.7rem;
  opacity: 0.85;
  transition: transform 0.2s ease;
}

.admin-report-rules-dropdown[open] summary::after {
  transform: rotate(180deg);
}

.admin-report-rules-panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 40;
  width: min(360px, 86vw);
  background: #fff;
  border: 1px solid rgba(219, 163, 39, 0.45);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(14, 33, 51, 0.22);
  padding: 12px;
}

.admin-report-rules-panel .admin-report-rules {
  margin: 0;
}

.admin-report-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px;
  min-height: 0;
  align-items: stretch;
}

.admin-report-side {
  position: sticky;
  top: 14px;
  max-height: calc(100vh - 88px);
  background: transparent;
  border: none;
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.admin-report-viewer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: calc(100vh - 88px);
  gap: 10px;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 12px;
}

.admin-report-file-card {
  padding: 12px 14px;
}

.admin-report-file-chip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.admin-report-file-chip .admin-report-current {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-report-decision-card {
  border-color: rgba(35, 85, 131, 0.25);
  box-shadow: 0 8px 24px rgba(14, 33, 51, 0.08);
}

.admin-report-meta-card {
  padding: 14px;
}

.admin-report-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.admin-report-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.admin-report-profile strong {
  display: block;
  color: var(--primary);
  font-size: 0.98rem;
}

.admin-report-profile span {
  display: block;
  color: var(--gray);
  font-size: 0.8rem;
  margin-top: 2px;
}

.admin-report-side-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.admin-report-side-card h2 {
  margin: 0 0 12px;
  font-size: 0.92rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-report-side-card h2 i {
  color: var(--secondary);
  font-size: 0.85rem;
}

.admin-report-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-report-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.admin-report-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f7f7;
  border: 1px solid rgba(35, 85, 131, 0.08);
  min-width: 0;
}

.admin-report-fact span {
  color: var(--gray);
  font-size: 0.72rem;
  font-weight: 600;
}

.admin-report-fact strong {
  color: var(--teal-dark);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.4;
  word-break: break-word;
  direction: ltr;
  unicode-bidi: plaintext;
  text-align: right;
}

.admin-report-textblock {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--light-border);
}

.admin-report-textblock span {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-report-textblock p {
  margin: 0;
  color: var(--teal-dark);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-report-textblock p.is-empty {
  color: var(--gray);
  font-weight: 400;
  font-style: italic;
}

.admin-side-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal-dark);
  white-space: nowrap;
}

.admin-side-pill.is-back {
  background: rgba(219, 163, 39, 0.18);
  color: #8a6c2c;
}

.admin-report-current {
  margin: 0;
  color: var(--teal-dark);
  font-weight: 700;
  font-size: 0.92rem;
}

.admin-report-counter {
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--gray);
}

.admin-decision-done {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(35, 85, 131, 0.08);
  border-radius: 12px;
  padding: 12px;
}

.admin-decision-done i {
  color: var(--teal);
  font-size: 1.2rem;
  margin-top: 2px;
}

.admin-decision-done strong {
  display: block;
  color: var(--primary);
  margin-bottom: 4px;
}

.admin-decision-done p {
  margin: 0;
  color: var(--gray);
  font-size: 0.85rem;
  line-height: 1.6;
}

.admin-report-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-report-rules li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f7f7;
  border: 1px solid var(--light-border);
}

.admin-report-rules li > i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(35, 85, 131, 0.1);
  color: var(--teal);
  font-size: 0.8rem;
  margin-top: 1px;
}

.admin-report-rules li.is-critical {
  border-color: rgba(219, 163, 39, 0.45);
  background: rgba(219, 163, 39, 0.08);
}

.admin-report-rules li.is-critical > i {
  background: rgba(219, 163, 39, 0.2);
  color: #8a6c2c;
}

.admin-report-rules strong {
  display: block;
  color: var(--primary);
  font-size: 0.86rem;
  margin-bottom: 2px;
}

.admin-report-rules span {
  display: block;
  color: var(--gray);
  font-size: 0.78rem;
  line-height: 1.55;
}

.admin-report-decisions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.admin-report-decision-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--light-border);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: right;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-report-decision-item:hover {
  border-color: rgba(35, 85, 131, 0.35);
}

.admin-report-decision-item.is-active {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(219, 163, 39, 0.16);
}

.admin-report-decision-item.is-accepted {
  background: rgba(35, 85, 131, 0.05);
}

.admin-report-decision-item.is-rejected {
  background: rgba(192, 57, 43, 0.04);
}

.admin-report-decision-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-report-decision-name strong {
  color: var(--primary);
  font-size: 0.88rem;
}

.admin-report-decision-name em {
  font-style: normal;
  color: var(--gray);
  font-size: 0.72rem;
}

.admin-report-decision-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.admin-report-decision-summary span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--gray);
  background: #f7f7f7;
  border: 1px solid var(--light-border);
  border-radius: 999px;
  padding: 4px 10px;
}

.admin-report-current-decision {
  margin-bottom: 8px;
}

.admin-report-current-decision strong {
  color: var(--primary);
  font-size: 0.9rem;
}

.admin-report-decision-hint {
  margin: 0 0 10px;
  color: var(--gray);
  font-size: 0.8rem;
  line-height: 1.5;
}

.admin-report-reopen-btn {
  width: 100%;
  margin-top: 10px;
  background: #f7f7f7;
  color: var(--teal-dark);
  border: 1px solid var(--light-border);
}

.admin-report-thumb.is-accepted {
  border-color: rgba(35, 85, 131, 0.45);
}

.admin-report-thumb.is-rejected {
  border-color: rgba(192, 57, 43, 0.4);
}

.admin-report-side .admin-detail-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-report-side .admin-detail-btns .btn {
  width: 100%;
}

.admin-report-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid var(--light-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.admin-report-toolbar-left {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-report-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-tool-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--light-border);
  border-radius: 50%;
  background: #fff;
  color: var(--teal-dark);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.admin-tool-btn:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

.admin-tool-btn.is-active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

.admin-report-filter-wrap {
  position: relative;
}

.admin-report-filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: 20;
  width: 240px;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(14, 33, 51, 0.18);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-report-filter-panel[hidden] {
  display: none !important;
}

.admin-report-filter-panel label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
}

.admin-report-filter-panel label span i {
  color: var(--secondary);
  margin-inline-end: 4px;
}

.admin-report-filter-panel input[type="range"] {
  width: 100%;
  accent-color: var(--teal);
}

.admin-filter-invert,
.admin-filter-reset {
  border: 1px solid var(--light-border);
  background: #f7f7f7;
  color: var(--teal-dark);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

.admin-filter-invert:hover,
.admin-filter-reset:hover {
  background: rgba(35, 85, 131, 0.1);
}

.admin-filter-invert.is-active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

.admin-report-zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f5f5f5;
  border: 1px solid var(--light-border);
  border-radius: 999px;
  padding: 4px 8px;
}

.admin-report-zoom button {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--teal-dark);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.admin-report-zoom button:hover {
  background: var(--teal);
  color: #fff;
}

.admin-report-zoom input[type="range"] {
  width: 90px;
  accent-color: var(--teal);
}

.admin-report-zoom span {
  min-width: 44px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gray);
}

.admin-report-stage {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, #f7f7f7 0%, #f2f2f2 100%);
  border: 1px dashed rgba(35, 85, 131, 0.2);
  border-radius: 14px;
  overflow: hidden;
  padding: 16px 52px;
  min-height: 0;
}

.admin-report-canvas {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  max-width: 100%;
  cursor: zoom-in;
  touch-action: none;
}

.admin-report-canvas.is-pannable {
  cursor: grab;
}

.admin-report-canvas.is-panning {
  cursor: grabbing;
}

.admin-report-canvas img {
  display: block;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(14, 33, 51, 0.18);
  background: #fff;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  will-change: transform;
}

.admin-report-canvas img.is-loading {
  opacity: 0;
}

.admin-report-canvas::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(35, 85, 131, 0.15);
  border-top-color: var(--teal);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 1;
}

.admin-report-canvas:has(img.is-loading)::after {
  opacity: 1;
  animation: admin-report-spin 0.8s linear infinite;
}

@keyframes admin-report-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.admin-report-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  font-size: 0.95rem;
  pointer-events: none;
}

.admin-report-empty[hidden] {
  display: none !important;
}

.admin-report-zoom-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14, 33, 51, 0.82);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 2;
  white-space: nowrap;
}

.admin-report-zoom-hint.is-hidden {
  opacity: 0;
}

.admin-viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--teal-dark);
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.admin-viewer-nav:hover:not(:disabled) {
  background: var(--teal);
  color: #fff;
}

.admin-viewer-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.admin-viewer-nav.is-prev { right: 10px; }
.admin-viewer-nav.is-next { left: 10px; }

.admin-report-viewer.is-max {
  position: fixed;
  inset: 14px;
  z-index: 999;
  height: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.admin-report-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
  flex-shrink: 0;
}

.admin-report-hint {
  margin: 0;
  text-align: center;
  color: var(--gray);
  font-size: 0.78rem;
  flex-shrink: 0;
}

.admin-report-thumb {
  flex: 0 0 auto;
  width: 108px;
  border: 2px solid var(--light-border);
  border-radius: 12px;
  background: #fff;
  color: var(--teal-dark);
  padding: 6px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.admin-report-thumb:hover {
  transform: translateY(-2px);
  border-color: rgba(35, 85, 131, 0.35);
}

.admin-report-thumb img {
  width: 100%;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin-bottom: 6px;
  background: #f5f5f5;
}

.admin-thumb-side {
  display: inline-block !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  color: var(--teal) !important;
  margin-bottom: 2px;
}

.admin-report-thumb span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-report-thumb.is-active {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(219, 163, 39, 0.18);
}

.admin-report-hint {
  margin: 0;
  text-align: center;
  color: var(--gray);
  font-size: 0.78rem;
}

.admin-report-hint i {
  color: var(--teal);
  margin-left: 4px;
}

@media (max-width: 992px) {
  .admin-report-layout {
    grid-template-columns: 1fr;
  }

  .admin-report-side {
    position: static;
    order: 2;
    max-height: none;
  }

  .admin-report-viewer {
    order: 1;
    height: auto;
    min-height: 60vh;
  }

  .admin-report-stage {
    min-height: 360px;
    padding: 12px 46px;
  }

  .admin-report-bar {
    flex-wrap: wrap;
  }

  .admin-report-bar-title {
    order: 3;
    flex: 1 1 100%;
  }
}

@media (max-width: 520px) {
  .admin-report-facts {
    grid-template-columns: 1fr;
  }

  .admin-report-toolbar {
    justify-content: flex-start;
  }

  .admin-report-toolbar-left {
    flex: 1 1 100%;
    white-space: normal;
  }

  .admin-report-zoom {
    flex: 1 1 auto;
  }

  .admin-report-zoom input[type="range"] {
    width: 60px;
  }

  .admin-report-filter-panel {
    width: 78vw;
    max-width: 260px;
  }

  .admin-report-viewer.is-max {
    inset: 6px;
  }
}

/* ===== ?????? ????? + ???? ??????? ?????? ===== */
.track-wrap {
  max-width: 860px;
  margin: 0 auto;
}

.track-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 18px;
}

.track-detail-modal .track-detail-content {
  width: min(760px, 94vw);
  max-height: min(88vh, 920px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 18px;
}

.track-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 52px 14px 20px;
  border-bottom: 1px solid var(--light-border);
  background: linear-gradient(180deg, #f7f7f7 0%, #fff 100%);
  flex-shrink: 0;
}

.track-detail-head h2 {
  margin: 0;
  color: var(--primary);
  font-size: 1.15rem;
}

.track-detail-body {
  padding: 16px 18px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.track-detail-body .track-status-card,
.track-detail-body .track-block {
  box-shadow: none;
}

.track-detail-body .track-status-card {
  margin-bottom: 12px;
}

.track-card h2 {
  margin: 0 0 16px;
  color: var(--primary);
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.track-form {
  display: grid;
  gap: 14px;
}

.track-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--teal-dark);
  font-size: 0.9rem;
}

.track-field label em {
  font-style: normal;
  color: var(--gray);
  font-weight: 500;
  font-size: 0.8rem;
}

.track-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--light-border);
  border-radius: 10px;
  font-family: inherit;
  background: var(--light-gray);
}

.track-error {
  margin: 12px 0 0;
  color: #c0392b;
  font-weight: 700;
  font-size: 0.9rem;
}

.track-demo-hint {
  margin: 14px 0 0;
  color: var(--gray);
  font-size: 0.82rem;
}

.track-demo-hint code {
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--teal-dark);
}

.track-status-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 16px;
}

.track-status-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.track-kicker {
  display: block;
  font-size: 0.75rem;
  color: var(--gray);
  font-weight: 700;
  margin-bottom: 4px;
}

.track-status-head h2 {
  margin: 0;
  color: var(--primary);
  font-size: 1.2rem;
}

.track-status-head p {
  margin: 6px 0 0;
  color: var(--gray);
  font-size: 0.9rem;
}

.track-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.track-facts > div {
  background: #f7f7f7;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(35, 85, 131, 0.08);
}

.track-facts span {
  display: block;
  font-size: 0.75rem;
  color: var(--gray);
  margin-bottom: 4px;
}

.track-facts strong {
  color: var(--teal-dark);
  font-size: 0.9rem;
  line-height: 1.45;
}

.track-block {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 14px;
}

.track-block h3 {
  margin: 0 0 12px;
  color: var(--primary);
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.track-pickup {
  position: relative;
  margin-bottom: 14px;
  padding: 22px 20px 20px;
  border-radius: 18px;
  text-align: center;
  border: 2px solid rgba(219, 163, 39, 0.4);
  background:
    radial-gradient(circle at 50% 0%, rgba(219, 163, 39, 0.18), transparent 55%),
    linear-gradient(180deg, #fffdf5 0%, #fff 100%);
  box-shadow: 0 12px 28px rgba(138, 108, 44, 0.12);
}

.track-pickup.is-empty {
  border-color: var(--light-border);
  background: linear-gradient(180deg, #f7f7f7 0%, #fff 100%);
  box-shadow: none;
}

.track-pickup.is-ready {
  border-color: rgba(35, 85, 131, 0.45);
  background:
    radial-gradient(circle at 50% 0%, rgba(35, 85, 131, 0.16), transparent 55%),
    linear-gradient(180deg, #f4f4f4 0%, #fff 100%);
  box-shadow: 0 12px 28px rgba(14, 33, 51, 0.12);
}

.track-pickup-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(219, 163, 39, 0.18);
  color: #8a6c2c;
  font-size: 0.84rem;
  font-weight: 800;
}

.track-pickup.is-ready .track-pickup-badge {
  background: rgba(35, 85, 131, 0.14);
  color: var(--teal-dark);
}

.track-pickup-label {
  margin: 0 0 8px;
  color: var(--gray);
  font-size: 0.86rem;
  line-height: 1.55;
}

.track-pickup-date {
  display: block;
  margin: 0 0 10px;
  color: #8a6c2c;
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  font-weight: 900;
  line-height: 1.45;
}

.track-pickup.is-ready .track-pickup-date {
  color: var(--teal-dark);
}

.track-pickup-waiting {
  display: block;
  margin: 4px 0 8px;
  color: var(--primary);
  font-size: 1.1rem;
}

.track-pickup-note {
  margin: 0;
  color: var(--gray);
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 34rem;
  margin-inline: auto;
}

.track-pickup-ready {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal-dark);
  font-size: 0.8rem;
  font-weight: 800;
}

.track-appointment.is-set {
  border-color: rgba(219, 163, 39, 0.45);
  background: linear-gradient(180deg, #fffdf7 0%, #fff 100%);
}

.track-appointment-body strong {
  display: block;
  color: #8a6c2c;
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.track-appointment-body p,
.track-appointment-empty {
  margin: 0;
  color: var(--gray);
  line-height: 1.6;
  font-size: 0.9rem;
}

.track-reports {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.track-report-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f7f7;
  border: 1px solid var(--light-border);
}

.track-report-reason {
  flex: 1 1 100%;
  color: #c0392b;
  font-size: 0.82rem;
}

.track-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.track-event {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  background: #f7f7f7;
  border: 1px solid var(--light-border);
}

.track-event > i {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  flex-shrink: 0;
}

.track-event.is-accepted > i { background: rgba(35, 85, 131, 0.15); color: var(--teal-dark); }
.track-event.is-rejected > i { background: rgba(192, 57, 43, 0.12); color: #c0392b; }
.track-event.is-appointment > i { background: rgba(219, 163, 39, 0.18); color: #8a6c2c; }

.track-event strong {
  display: block;
  color: var(--primary);
  margin-bottom: 2px;
}

.track-event time {
  display: block;
  color: var(--gray);
  font-size: 0.75rem;
  margin-bottom: 6px;
}

.track-event p {
  margin: 0;
  color: var(--teal-dark);
  font-size: 0.88rem;
  line-height: 1.55;
}

.admin-appointment-box,
.admin-reply-box {
  margin: 14px 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(219, 163, 39, 0.35);
  background: linear-gradient(180deg, #fffdf7 0%, #fff 100%);
}

.admin-reply-box {
  border-color: var(--light-border);
  background: #f7f7f7;
}

.admin-appointment-box h3,
.admin-reply-box h3 {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-appointment-hint {
  margin: 0 0 10px;
  color: var(--gray);
  font-size: 0.8rem;
  line-height: 1.5;
}

.admin-appointment-box label,
.admin-reply-box label {
  display: block;
  margin: 8px 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--teal-dark);
}

.admin-appointment-box input,
.admin-reply-box textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--light-border);
  border-radius: 8px;
  font-family: inherit;
  background: #fff;
}

.admin-appointment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.admin-appointment-current {
  margin: 10px 0 0;
  color: #8a6c2c;
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-reply-box .btn {
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--light-border);
  color: var(--teal-dark);
}

@media (max-width: 700px) {
  .track-facts {
    grid-template-columns: 1fr;
  }

  .track-status-head {
    flex-direction: column;
  }
}

/* ============================================================
   صفحة 404 — error-404
   ============================================================ */
.error-404-wrap {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem;
}

.error-404-box {
  max-width: 520px;
}

.error-404-code {
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 900;
  line-height: 1;
  background: var(--grad-deep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.5rem;
}

.error-404-box h1 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-bottom: 0.75rem;
}

.error-404-box p {
  color: var(--gray);
  margin-bottom: 1.5rem;
  line-height: 1.85;
}

.error-404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.error-404-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  font-size: 1.8rem;
}

/* ============================================================
   صفحة الطوارئ — emergency-*
   ============================================================ */
.page-hero.page-hero-emergency {
  animation: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(192, 57, 43, 0.28), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(219, 163, 39, 0.12), transparent 38%),
    linear-gradient(135deg, #4a1515 0%, #6b1f1f 42%, #0a1830 100%);
  box-shadow: inset 0 4px 0 0 #e74c3c;
  text-align: right;
  min-height: auto;
  padding: calc(38px + 88px + 2rem) 0 4.5rem;
  color: #fff;
  align-items: stretch;
}

.page-hero.page-hero-emergency::after {
  height: 72px;
}

.page-hero-emergency-inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 3;
  animation: heroFadeIn 0.9s ease-out;
}

.page-hero-emergency-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-hero-emergency-eyebrow i {
  color: #ff8a80;
}

.page-hero.page-hero-emergency h1 {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.2);
}

.page-hero.page-hero-emergency p {
  margin-inline: 0;
  margin-left: 0;
  margin-right: 0;
}

.page-hero.page-hero-emergency .page-hero-emergency-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #ffd4cc;
  margin: 0 0 1rem;
  line-height: 1.65;
}

.page-hero.page-hero-emergency .page-hero-emergency-desc {
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.94);
  max-width: 720px;
  margin: 0 0 1.5rem;
  font-weight: 500;
}

.page-hero-emergency-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-hero-emergency-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  transition: var(--transition);
}

.page-hero-emergency-nav a:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(231, 76, 60, 0.55);
  color: #fff;
}

.emergency-urgent-section {
  padding-top: 2.5rem;
  padding-bottom: 0;
}

.emergency-urgent-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #c0392b 0%, #922b21 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: 0 14px 40px -16px rgba(192, 57, 43, 0.55);
}

.emergency-urgent-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.emergency-urgent-banner h2 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 6px;
}

.emergency-urgent-banner p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  line-height: 1.8;
  flex: 1;
  min-width: 200px;
  margin: 0;
}

.emergency-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 50px;
  background: #fff;
  color: #c0392b;
  font-weight: 800;
  font-size: 1.05rem;
  white-space: nowrap;
  transition: var(--transition);
}

.emergency-call-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.35);
  color: #c0392b;
}

.emergency-numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.emergency-number-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 28px 20px;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.emergency-number-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(35, 85, 131, 0.35);
}

.emergency-number-primary {
  border-color: rgba(192, 57, 43, 0.3);
  background: linear-gradient(180deg, #fff 0%, #fdf4f3 100%);
}

.emergency-number-primary:hover {
  border-color: rgba(192, 57, 43, 0.5);
}

.emergency-number-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.emergency-number-primary .emergency-number-icon {
  background: rgba(192, 57, 43, 0.12);
  color: #c0392b;
}

.emergency-number-label {
  font-size: 0.9rem;
  color: var(--gray);
  font-weight: 600;
}

.emergency-number-value {
  font-size: 2rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  direction: ltr;
}

.emergency-number-primary .emergency-number-value {
  color: #c0392b;
}

.emergency-number-hint {
  font-size: 0.82rem;
  color: var(--gray);
  line-height: 1.6;
}

.emergency-steps {
  list-style: none;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.emergency-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.emergency-step:hover {
  border-color: rgba(35, 85, 131, 0.25);
  box-shadow: var(--shadow-hover);
}

.emergency-step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.emergency-step-body h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
  color: var(--primary);
}

.emergency-step-body p {
  font-size: 0.95rem;
  color: var(--gray);
  line-height: 1.85;
  margin: 0;
}

.emergency-chronic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.emergency-chronic-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: var(--transition);
}

.emergency-chronic-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(35, 85, 131, 0.28);
}

.emergency-chronic-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.emergency-chronic-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.emergency-chronic-head h3 {
  font-size: 1.05rem;
  margin: 0;
}

.emergency-chronic-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.emergency-chronic-card li {
  font-size: 0.92rem;
  color: var(--gray);
  line-height: 1.75;
  padding-right: 18px;
  position: relative;
}

.emergency-chronic-card li::before {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.35rem;
  position: absolute;
  right: 0;
  top: 0.65em;
  color: var(--secondary);
}

.emergency-note-box {
  background: var(--light-gray);
  border: 1px solid var(--light-border);
  border-right: 4px solid var(--secondary);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-size: 0.95rem;
  color: var(--gray);
  line-height: 1.9;
  margin-bottom: 0;
}

.emergency-note-box b {
  color: var(--primary);
}

.emergency-note-box a {
  color: var(--teal);
  font-weight: 700;
}

.emergency-footer-section {
  background: #fff;
}

.emergency-footer-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--grad-dark);
  color: #fff;
  box-shadow: var(--shadow-hover);
}

.emergency-footer-panel h3 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.emergency-footer-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  line-height: 1.8;
}

.emergency-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.emergency-footer-actions .btn {
  white-space: nowrap;
}

.emergency-alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
  border: 1px solid rgba(192, 57, 43, 0.25);
  border-right: 4px solid #c0392b;
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
}

.emergency-alert-banner > i {
  color: #c0392b;
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.emergency-alert-banner strong {
  display: block;
  color: #922b21;
  margin-bottom: 4px;
}

.emergency-alert-banner p {
  margin: 0;
  color: var(--gray);
  font-size: 0.92rem;
  line-height: 1.7;
}

.emergency-hotline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.emergency-hotline-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.emergency-hotline-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(192, 57, 43, 0.3);
}

.emergency-hotline-card i {
  font-size: 1.6rem;
  color: #c0392b;
  margin-bottom: 0.65rem;
}

.emergency-hotline-card h3 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

.emergency-hotline-card .emergency-number {
  display: block;
  font-size: 1.35rem;
  font-weight: 900;
  color: #922b21;
  direction: ltr;
  margin: 0.35rem 0;
}

.emergency-hotline-card p {
  font-size: 0.85rem;
  color: var(--gray);
  margin: 0;
}

.emergency-steps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.emergency-step-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.emergency-step-row .emergency-step-num {
  width: 36px;
  height: 36px;
  background: rgba(192, 57, 43, 0.12);
  color: #c0392b;
  font-size: 0.95rem;
}

.emergency-step-row h4 {
  font-size: 0.98rem;
  margin-bottom: 4px;
}

.emergency-step-row p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.65;
}

.emergency-cta-box {
  margin-top: 2rem;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--grad-dark);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.emergency-cta-box h3 {
  color: #fff;
  margin-bottom: 6px;
}

.emergency-cta-box p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
}

@media (max-width: 991px) {
  .page-hero-emergency-inner {
    padding: 0 1.25rem;
  }
}

@media (max-width: 900px) {
  .emergency-numbers-grid,
  .emergency-chronic-grid,
  .emergency-hotline-grid {
    grid-template-columns: 1fr;
  }

  .emergency-footer-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .emergency-footer-actions {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .page-hero.page-hero-emergency {
    padding: calc(38px + 78px + 1.25rem) 0 3.5rem;
  }
}

@media (max-width: 600px) {
  .emergency-urgent-banner {
    flex-direction: column;
    text-align: center;
  }

  .emergency-call-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   صفحة ملف الدواء — mf-*
   ============================================================ */
.page-hero.page-hero-medication {
  animation: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(63, 122, 168, 0.24), transparent 42%),
    radial-gradient(circle at 88% 72%, rgba(219, 163, 39, 0.14), transparent 38%),
    linear-gradient(135deg, #0a1830 0%, #123054 48%, #1a4468 100%);
  box-shadow: inset 0 4px 0 0 var(--secondary);
  text-align: right;
  min-height: auto;
  padding: calc(38px + 88px + 2rem) 0 4.5rem;
  color: #fff;
  align-items: stretch;
}

.page-hero.page-hero-medication::after {
  height: 72px;
}

.page-hero-medication-inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 3;
  animation: heroFadeIn 0.9s ease-out;
}

.page-hero-medication-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-hero-medication-eyebrow i {
  color: var(--secondary);
}

.page-hero.page-hero-medication h1 {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
}

.page-hero.page-hero-medication p {
  margin-inline: 0;
  margin-left: 0;
  margin-right: 0;
}

.page-hero.page-hero-medication .page-hero-medication-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #f5dc8a;
  margin: 0 0 1rem;
  line-height: 1.65;
}

.page-hero.page-hero-medication .page-hero-medication-desc {
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.94);
  max-width: 720px;
  margin: 0 0 1.5rem;
  font-weight: 500;
}

.page-hero-medication-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-hero-medication-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  transition: var(--transition);
}

.page-hero-medication-nav a:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(219, 163, 39, 0.55);
  color: #fff;
}

.mf-wrap {
  max-width: 920px;
  margin: 0 auto;
}

.mf-intro-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--secondary);
}

.mf-intro-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.mf-prose {
  line-height: 1.95;
}

.mf-prose p {
  color: var(--gray);
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
}

.mf-prose p:last-child {
  margin-bottom: 0;
}

.mf-duties-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.mf-duty-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.35rem 1.25rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.mf-duty-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(35, 85, 131, 0.28);
}

.mf-duty-card i {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(35, 85, 131, 0.1);
  color: var(--teal);
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.mf-duty-card p {
  margin: 0;
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.75;
}

.mf-section-alt {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.mf-partnerships {
  display: grid;
  gap: 1.5rem;
}

.mf-partner {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow);
  border-right: 3px solid var(--secondary);
  transition: var(--transition);
}

.mf-partner:hover {
  box-shadow: var(--shadow-hover);
}

.mf-partner h3 {
  color: var(--primary);
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mf-partner h3 i {
  color: var(--teal);
}

.mf-partner > p {
  color: var(--gray);
  font-size: 1rem;
  line-height: 1.85;
  margin: 0 0 1rem;
}

.mf-partner h4 {
  color: var(--teal-dark);
  font-size: 0.95rem;
  margin: 1.25rem 0 0.65rem;
}

.mf-facts {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  display: grid;
  gap: 8px;
}

.mf-facts li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.7;
}

.mf-facts li strong {
  color: var(--primary);
  min-width: 5.5rem;
  flex-shrink: 0;
}

.mf-tasks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 1.25rem;
}

.mf-tasks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.65;
}

.mf-tasks li i {
  color: var(--secondary);
  margin-top: 4px;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.mf-edu-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 1.25rem;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
  min-width: 0;
}

.mf-edu-nav {
  position: sticky;
  top: calc(38px + 88px + 12px);
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  min-width: 0;
}

.mf-edu-nav-label {
  margin: 0 0 0.75rem;
  padding: 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--teal-dark);
  letter-spacing: 0.2px;
}

.mf-edu-nav-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 4px 2px 2px;
  direction: ltr;
  scrollbar-width: thin;
  scrollbar-color: rgba(35, 85, 131, 0.45) rgba(35, 85, 131, 0.08);
}

.mf-edu-nav-list::-webkit-scrollbar {
  width: 5px;
}

.mf-edu-nav-list::-webkit-scrollbar-track {
  background: rgba(35, 85, 131, 0.07);
  border-radius: 999px;
  margin: 4px 0;
}

.mf-edu-nav-list::-webkit-scrollbar-thumb {
  background: rgba(35, 85, 131, 0.38);
  border-radius: 999px;
}

.mf-edu-nav-list::-webkit-scrollbar-thumb:hover {
  background: rgba(35, 85, 131, 0.58);
}

.mf-edu-tab {
  direction: rtl;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--gray);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: right;
  cursor: pointer;
  transition: var(--transition);
}

.mf-edu-tab i {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(35, 85, 131, 0.1);
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  transition: var(--transition);
}

.mf-edu-tab:hover {
  background: rgba(35, 85, 131, 0.06);
  color: var(--primary);
}

.mf-edu-tab.is-active {
  background: rgba(35, 85, 131, 0.1);
  border-color: rgba(35, 85, 131, 0.22);
  color: var(--teal-dark);
  box-shadow: inset 3px 0 0 var(--teal);
}

.mf-edu-tab.is-active i {
  background: var(--teal);
  color: #fff;
}

.mf-edu-viewport {
  min-height: 360px;
  min-width: 0;
  width: 100%;
}

.mf-edu-topic {
  display: none;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: mfEduFade 0.28s ease;
  min-width: 0;
  max-width: 100%;
}

.mf-edu-topic.is-active {
  display: block;
}

@keyframes mfEduFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.mf-edu-topic-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--light-border);
  background: linear-gradient(180deg, #f8f8f8 0%, #fff 100%);
}

.mf-edu-topic-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.mf-edu-topic-tag {
  display: inline-block;
  margin-bottom: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(219, 163, 39, 0.12);
  border: 1px solid rgba(219, 163, 39, 0.28);
  color: var(--teal-dark);
  font-size: 0.75rem;
  font-weight: 700;
}

.mf-edu-topic-head h3 {
  margin: 0;
  color: var(--primary);
  font-size: 1.15rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mf-edu-topic-head > div {
  min-width: 0;
  flex: 1;
}

.mf-edu-topic-body {
  padding: 1.5rem 1.75rem 1.75rem;
  color: var(--gray);
  font-size: 0.98rem;
  line-height: 1.9;
}

.mf-edu-topic-body p {
  margin: 0 0 0.85rem;
}

.mf-edu-topic-body p:last-child {
  margin-bottom: 0;
}

.mf-edu-topic-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.mf-edu-topic-body ul li {
  position: relative;
  padding: 12px 14px 12px 0;
  border-right: 3px solid rgba(35, 85, 131, 0.35);
  background: var(--light-gray);
  border-radius: 0 10px 10px 0;
  line-height: 1.75;
}

.mf-channels {
  text-align: center;
  color: var(--gray);
  font-size: 0.98rem;
  line-height: 1.8;
  max-width: 720px;
  margin: 1.5rem auto 0;
  padding: 1rem 1.25rem;
  background: var(--light-gray);
  border-radius: var(--radius-sm);
}

.mf-alt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.mf-alt-item {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius-sm);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.mf-alt-item:hover {
  border-color: rgba(35, 85, 131, 0.28);
  box-shadow: var(--shadow-hover);
}

.mf-alt-item h4 {
  color: var(--primary);
  font-size: 0.98rem;
  margin-bottom: 8px;
}

.mf-alt-item p {
  color: var(--gray);
  font-size: 0.92rem;
  line-height: 1.75;
  margin: 0;
}

.mf-examples {
  margin-top: 1.25rem;
  background: var(--light-gray);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
}

.mf-examples h4 {
  color: var(--primary);
  font-size: 1rem;
  margin-bottom: 0.85rem;
}

.mf-examples ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.mf-examples li {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.7;
  padding: 0 18px 0 0;
  position: relative;
}

.mf-examples li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 0;
  top: 2px;
  color: var(--teal);
  font-size: 0.8rem;
}

.mf-faq-wrap {
  max-width: 920px;
  margin: 0 auto;
}

.mf-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.mf-service {
  text-align: center;
  padding: 1.35rem 1rem;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mf-service:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.mf-service i {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(35, 85, 131, 0.1);
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 0.85rem;
}

.mf-service h3 {
  color: var(--primary);
  font-size: 0.98rem;
  margin: 0;
  line-height: 1.5;
}

.mf-footer-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  margin-top: 2rem;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--grad-dark);
  color: #fff;
  box-shadow: var(--shadow-hover);
}

.mf-footer-panel h3 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.mf-footer-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  line-height: 1.8;
}

.mf-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 991px) {
  .page-hero-medication-inner {
    padding: 0 1.25rem;
  }

  .mf-duties-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .mf-tasks,
  .mf-alt-grid,
  .mf-services {
    grid-template-columns: 1fr 1fr;
  }

  .mf-edu-shell {
    grid-template-columns: 1fr;
  }

  .mf-edu-nav {
    position: static;
    padding: 0.85rem;
    overflow: hidden;
    max-width: 100%;
  }

  .mf-edu-nav-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    width: 100%;
    max-width: 100%;
    padding: 0 2px 6px;
    direction: rtl;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(35, 85, 131, 0.45) rgba(35, 85, 131, 0.08);
  }

  .mf-edu-nav-list::-webkit-scrollbar {
    width: auto;
    height: 4px;
  }

  .mf-edu-tab {
    direction: rtl;
    flex: 0 0 auto;
    width: auto;
    min-width: 170px;
    max-width: 240px;
    white-space: normal;
  }

  .mf-edu-tab.is-active {
    box-shadow: inset 0 -3px 0 var(--teal);
  }

  .mf-edu-topic-head {
    padding: 1.15rem 1.1rem;
  }

  .mf-edu-topic-body {
    padding: 1.15rem 1.1rem 1.25rem;
    font-size: 0.94rem;
  }

  .mf-footer-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .mf-footer-actions {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .page-hero.page-hero-medication {
    padding: calc(38px + 78px + 1.25rem) 0 3.5rem;
  }

  .mf-intro-panel {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }

  .mf-duties-grid,
  .mf-tasks,
  .mf-alt-grid,
  .mf-services {
    grid-template-columns: 1fr;
  }

  .mf-partner {
    padding: 1.35rem 1.15rem;
  }

  /* التثقيف الدوائي — عمودي على الهاتف لتجنّب السكرول الأفقي */
  .mf-edu-nav-list {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 280px;
    direction: ltr;
    padding: 2px 4px 2px 2px;
  }

  .mf-edu-tab {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .mf-edu-tab.is-active {
    box-shadow: inset 3px 0 0 var(--teal);
  }

  .mf-edu-topic-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 1rem;
  }

  .mf-edu-topic-head h3 {
    font-size: 1.05rem;
  }

  .mf-edu-topic-body {
    padding: 1rem;
  }
}

/* ============================================================
   صفحة المركز الإعلامي — media-*
   ============================================================ */
.page-hero.page-hero-media {
  animation: none;
  background:
    radial-gradient(circle at 14% 22%, rgba(63, 122, 168, 0.22), transparent 42%),
    radial-gradient(circle at 86% 78%, rgba(219, 163, 39, 0.14), transparent 38%),
    linear-gradient(135deg, #0a1830 0%, #123054 46%, #1a4468 100%);
  box-shadow: inset 0 4px 0 0 var(--secondary);
  text-align: right;
  min-height: auto;
  padding: calc(38px + 88px + 2rem) 0 4.5rem;
  color: #fff;
  align-items: stretch;
}

.page-hero.page-hero-media::after {
  height: 72px;
}

.page-hero-media-inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 3;
  animation: heroFadeIn 0.9s ease-out;
}

.page-hero-media-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-hero-media-eyebrow i {
  color: var(--secondary);
}

.page-hero.page-hero-media h1 {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
}

.page-hero.page-hero-media p {
  margin-inline: 0;
  margin-left: 0;
  margin-right: 0;
}

.page-hero.page-hero-media .page-hero-media-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #f5dc8a;
  margin: 0 0 1rem;
  line-height: 1.65;
}

.page-hero.page-hero-media .page-hero-media-desc {
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.94);
  max-width: 720px;
  margin: 0 0 1.5rem;
  font-weight: 500;
}

.page-hero-media-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-hero-media-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  transition: var(--transition);
}

.page-hero-media-nav a:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(219, 163, 39, 0.55);
  color: #fff;
}

.media-news-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.media-toolbar {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.75rem;
}

.media-toolbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.media-toolbar-head h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--primary);
}

.media-toolbar-head p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--gray);
}

.media-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.media-chip {
  padding: 9px 18px;
  border: 1px solid var(--light-border);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gray);
  cursor: pointer;
  transition: var(--transition);
  background: #fff;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.media-chip:hover {
  border-color: rgba(35, 85, 131, 0.35);
  color: var(--teal-dark);
  background: rgba(35, 85, 131, 0.06);
}

.media-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(14, 33, 51, 0.45);
}

.media-gallery-section {
  background: #fff;
}

.media-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.media-gallery-tile {
  aspect-ratio: 4 / 3;
  background: var(--light-gray);
  border-radius: 12px;
  border: 1px solid var(--light-border);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.media-gallery-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(35, 85, 131, 0.28);
}

.media-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  cursor: pointer;
}

.media-gallery-tile:hover img {
  transform: scale(1.05);
}

.media-cta-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--grad-dark);
  color: #fff;
  box-shadow: var(--shadow-hover);
}

.media-cta-panel h3 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.media-cta-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  line-height: 1.8;
}

.media-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 991px) {
  .page-hero-media-inner {
    padding: 0 1.25rem;
  }
}

@media (max-width: 900px) {
  .media-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .media-cta-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .media-cta-actions {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .media-gallery-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .page-hero.page-hero-media {
    padding: calc(38px + 78px + 1.25rem) 0 3.5rem;
  }

  .media-toolbar-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .media-filter-row {
    justify-content: flex-start;
  }
}

/* ============================================================
   صفحة المنتدى الصحي — blog page
   ============================================================ */
.page-hero.page-hero-blog {
  animation: none;
  background:
    radial-gradient(circle at 12% 24%, rgba(63, 122, 168, 0.24), transparent 44%),
    radial-gradient(circle at 88% 72%, rgba(219, 163, 39, 0.16), transparent 40%),
    linear-gradient(135deg, #050a30 0%, #123054 48%, #163a56 100%);
  box-shadow: inset 0 4px 0 0 var(--secondary);
  text-align: right;
  min-height: auto;
  padding: calc(38px + 88px + 2rem) 0 4.5rem;
  color: #fff;
  align-items: stretch;
}

.page-hero.page-hero-blog::after {
  height: 72px;
}

.page-hero-blog-inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 3;
  animation: heroFadeIn 0.9s ease-out;
}

.page-hero-blog-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-hero-blog-eyebrow i {
  color: var(--secondary);
}

.page-hero.page-hero-blog h1 {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
}

.page-hero.page-hero-blog p {
  margin-inline: 0;
  margin-left: 0;
  margin-right: 0;
}

.page-hero.page-hero-blog .page-hero-blog-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #f5dc8a;
  margin: 0 0 1rem;
  line-height: 1.65;
}

.page-hero.page-hero-blog .page-hero-blog-desc {
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.94);
  max-width: 720px;
  margin: 0 0 1.5rem;
  font-weight: 500;
}

.page-hero-blog-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-hero-blog-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  transition: var(--transition);
}

.page-hero-blog-nav a:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(219, 163, 39, 0.55);
  color: #fff;
}

.blog-posts-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.blog-toolbar {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.75rem;
}

.blog-toolbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.blog-toolbar-head h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--primary);
}

.blog-toolbar-head p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--gray);
}

.blog-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(35, 85, 131, 0.08);
  border: 1px solid rgba(35, 85, 131, 0.18);
  color: var(--teal-dark);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.blog-count-badge i {
  color: var(--teal);
}

.blog-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  direction: ltr;
  scrollbar-width: thin;
  scrollbar-color: rgba(35, 85, 131, 0.45) transparent;
}

.blog-filter-row .blog-chip {
  direction: rtl;
  flex-shrink: 0;
}

.blog-filter-row::-webkit-scrollbar {
  height: 5px;
}

.blog-filter-row::-webkit-scrollbar-thumb {
  background: rgba(35, 85, 131, 0.45);
  border-radius: 999px;
}

.blog-featured-wrap:not([hidden]) {
  margin-bottom: 1.75rem;
}

.blog-cta-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--grad-dark);
  color: #fff;
  box-shadow: var(--shadow-hover);
}

.blog-cta-panel h3 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.blog-cta-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  line-height: 1.8;
}

@media (max-width: 991px) {
  .page-hero-blog-inner {
    padding: 0 1.25rem;
  }
}

@media (max-width: 900px) {
  .blog-cta-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .blog-cta-actions {
    justify-content: center;
  }

  .blog-featured {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .blog-featured-media,
  .blog-featured-media img {
    min-height: 220px;
  }

  .blog-featured-body {
    padding: 1.5rem 1.25rem;
  }
}

@media (max-width: 767px) {
  .page-hero.page-hero-blog {
    padding: calc(38px + 78px + 1.25rem) 0 3.5rem;
  }

  .blog-toolbar-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   صفحة المقال — blog-article page
   ============================================================ */
.page-hero.page-hero-article {
  animation: none;
  background:
    radial-gradient(circle at 10% 20%, rgba(63, 122, 168, 0.22), transparent 42%),
    radial-gradient(circle at 90% 80%, rgba(219, 163, 39, 0.14), transparent 38%),
    linear-gradient(135deg, #050a30 0%, #123054 50%, #163a56 100%);
  box-shadow: inset 0 4px 0 0 var(--secondary);
  text-align: right;
  min-height: auto;
  padding: calc(38px + 88px + 1.5rem) 0 3.5rem;
  color: #fff;
  align-items: stretch;
}

.page-hero.page-hero-article::after {
  height: 56px;
}

.page-hero-article-inner {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 3;
  animation: heroFadeIn 0.9s ease-out;
}

.blog-hero-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1rem;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.86rem;
  font-weight: 700;
  transition: var(--transition);
}

.blog-hero-back:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(219, 163, 39, 0.55);
  color: #fff;
}

.page-hero-article-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
}

.page-hero-article-cat i {
  color: var(--secondary);
}

.page-hero.page-hero-article h1 {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: clamp(1.55rem, 3.2vw, 2.35rem);
  margin-bottom: 0.85rem;
  line-height: 1.35;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
}

.page-hero.page-hero-article p {
  margin-inline: 0;
  margin-left: 0;
  margin-right: 0;
}

.page-hero.page-hero-article .page-hero-article-desc {
  font-size: 1.02rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.94);
  max-width: 760px;
  margin: 0 0 1rem;
  font-weight: 500;
}

.page-hero-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.88);
}

.page-hero-article-meta span,
.page-hero-article-meta time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.page-hero-article-meta i {
  color: var(--secondary);
}

.blog-article-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
  padding-top: 2rem;
}

.blog-article-container {
  max-width: 1180px;
}

.blog-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1.5rem;
  align-items: start;
}

.blog-article-aside {
  position: sticky;
  top: calc(88px + 1rem);
  display: grid;
  gap: 1rem;
}

.blog-aside-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.2rem;
}

.blog-aside-author {
  display: grid;
  gap: 8px;
}

.blog-aside-label {
  display: inline-block;
  width: fit-content;
  font-size: 0.72rem;
  font-weight: 800;
  color: #8a6a16;
  background: linear-gradient(145deg, #f8e7b8 0%, #fdd757 55%, #dba327 100%);
  border-radius: 999px;
  padding: 4px 12px;
}

.blog-aside-author strong {
  font-size: 1rem;
  color: var(--primary);
  line-height: 1.5;
}

.blog-aside-cat,
.blog-aside-author time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  color: var(--gray);
}

.blog-aside-cat i,
.blog-aside-author time i {
  color: var(--teal);
}

.blog-toc h3,
.blog-aside-help h3 {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  color: var(--primary);
}

.blog-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  direction: ltr;
  scrollbar-width: thin;
  scrollbar-color: rgba(35, 85, 131, 0.45) transparent;
}

.blog-toc ol li {
  direction: rtl;
}

.blog-toc ol::-webkit-scrollbar {
  width: 5px;
}

.blog-toc ol::-webkit-scrollbar-thumb {
  background: rgba(35, 85, 131, 0.45);
  border-radius: 999px;
}

.blog-toc a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--gray-dark);
  font-size: 0.86rem;
  line-height: 1.55;
  transition: var(--transition);
}

.blog-toc a:hover {
  background: rgba(35, 85, 131, 0.08);
  color: var(--teal-dark);
}

.blog-aside-help {
  display: grid;
  gap: 8px;
}

.blog-aside-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--light-border);
  background: var(--light-gray);
  color: var(--primary);
  font-size: 0.88rem;
  font-weight: 700;
  transition: var(--transition);
}

.blog-aside-link i {
  color: var(--teal);
}

.blog-aside-link:hover {
  border-color: rgba(35, 85, 131, 0.28);
  background: rgba(35, 85, 131, 0.06);
  color: var(--teal-dark);
}

.blog-related-full {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--light-border);
}

.blog-related-full h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-related-full h3 i {
  color: var(--teal);
}

@media (max-width: 991px) {
  .page-hero-article-inner {
    padding: 0 1.25rem;
  }

  .blog-article-layout {
    grid-template-columns: 1fr;
  }

  .blog-article-aside {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-aside-help {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .page-hero.page-hero-article {
    padding: calc(38px + 78px + 1rem) 0 2.75rem;
  }

  .blog-article-aside {
    grid-template-columns: 1fr;
  }

  .blog-article-content {
    padding: 1.5rem 1.25rem 1.25rem;
  }

  .blog-article-foot {
    padding: 0 1.25rem 1.5rem;
  }
}

/* ============================================================
   صفحة بطاقة الخصم — dc-*
   ============================================================ */
.page-hero.page-hero-aafia-card {
  animation: none;
  background:
    radial-gradient(circle at 14% 22%, rgba(63, 122, 168, 0.24), transparent 42%),
    radial-gradient(circle at 86% 78%, rgba(219, 163, 39, 0.16), transparent 38%),
    linear-gradient(135deg, #050a30 0%, #123054 48%, #163a56 100%);
  box-shadow: inset 0 4px 0 0 var(--secondary);
  text-align: right;
  min-height: auto;
  padding: calc(38px + 88px + 2rem) 0 4.5rem;
  color: #fff;
  align-items: stretch;
}

.page-hero.page-hero-aafia-card::after {
  height: 72px;
}

.page-hero-aafia-card-inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 3;
  animation: heroFadeIn 0.9s ease-out;
}

.page-hero-aafia-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-hero-aafia-card-eyebrow i {
  color: var(--secondary);
}

.page-hero.page-hero-aafia-card h1 {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
}

.page-hero.page-hero-aafia-card p {
  margin-inline: 0;
  margin-left: 0;
  margin-right: 0;
}

.page-hero.page-hero-aafia-card .page-hero-aafia-card-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #f5dc8a;
  margin: 0 0 1rem;
  line-height: 1.65;
}

.page-hero.page-hero-aafia-card .page-hero-aafia-card-desc {
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.94);
  max-width: 720px;
  margin: 0 0 1rem;
  font-weight: 500;
}

.page-hero.page-hero-aafia-card .page-hero-aafia-card-partner {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.88rem;
  line-height: 1.7;
  max-width: 720px;
  margin: 0 0 1.25rem;
  font-weight: 500;
}

.page-hero.page-hero-aafia-card .page-hero-aafia-card-partner i {
  color: var(--secondary);
  margin-top: 3px;
}

.page-hero-aafia-card-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-hero-aafia-card-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  transition: var(--transition);
}

.page-hero-aafia-card-nav a:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(219, 163, 39, 0.55);
  color: #fff;
}

.dc-benefits-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.dc-tracks-section {
  background: #fff;
}

.dc-tracks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.dc-track-card {
  background: var(--light-gray);
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.35rem 1.35rem 1.15rem;
  box-shadow: var(--shadow);
}

.dc-track-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 1.25rem;
}

.dc-track-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold-gradient);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 8px 18px -10px rgba(219, 163, 39, 0.55);
}

.dc-track-head h3 {
  font-size: 1.12rem;
  color: var(--primary);
  margin-bottom: 6px;
}

.dc-track-head p {
  font-size: 0.9rem;
  color: var(--gray);
  line-height: 1.75;
  margin: 0;
}

.dc-timeline {
  position: relative;
  padding-right: 8px;
}

.dc-timeline::before {
  content: "";
  position: absolute;
  right: 19px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--secondary), rgba(35, 85, 131, 0.2));
}

.dc-step {
  position: relative;
  padding-right: 56px;
  margin-bottom: 12px;
}

.dc-step:last-child {
  margin-bottom: 0;
}

.dc-step-num {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--secondary);
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  z-index: 2;
}

.dc-step-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.92rem;
  color: var(--dark);
  line-height: 1.65;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.dc-step-card:hover {
  border-color: rgba(35, 85, 131, 0.28);
  transform: translateX(-2px);
}

.dc-post-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.dc-post-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.dc-post-item {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.35rem 1rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.dc-post-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(35, 85, 131, 0.28);
}

.dc-post-item .icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  background: rgba(35, 85, 131, 0.1);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.dc-post-item h3 {
  font-size: 0.92rem;
  color: var(--primary);
  line-height: 1.55;
  margin: 0;
}

.dc-guidelines-section {
  background: #fff;
}

.dc-guidelines-box {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  box-shadow: var(--shadow);
  border-right: 4px solid var(--secondary);
}

.dc-guidelines-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.dc-guidelines-box li {
  font-size: 0.95rem;
  color: var(--gray-dark);
  padding: 8px 28px 8px 0;
  position: relative;
  line-height: 1.75;
}

.dc-guidelines-box li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 0;
  top: 10px;
  color: var(--secondary);
}

.dc-portal-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.dc-portal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}

.dc-portal-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.dc-portal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(35, 85, 131, 0.1);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 4px;
}

.dc-portal-card h3 {
  font-size: 1.05rem;
  color: var(--primary);
  margin: 0;
}

.dc-portal-card p {
  font-size: 0.92rem;
  color: var(--gray);
  line-height: 1.75;
  margin: 0 0 0.5rem;
  max-width: 32ch;
}

.dc-cta-section {
  background: var(--light-gray);
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.dc-cta-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--grad-dark);
  color: #fff;
  box-shadow: var(--shadow-hover);
}

.dc-cta-panel h3 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.dc-cta-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  line-height: 1.8;
}

.dc-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 1100px) {
  .dc-post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .page-hero-aafia-card-inner {
    padding: 0 1.25rem;
  }

  .dc-tracks-grid,
  .dc-portal-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .page-hero.page-hero-aafia-card {
    padding: calc(38px + 78px + 1.25rem) 0 3.5rem;
  }

  .dc-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dc-cta-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .dc-cta-actions {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .dc-post-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   صفحة برنامج الكلى — rp-*
   ============================================================ */
.page-hero.page-hero-renal {
  animation: none;
  background:
    radial-gradient(circle at 12% 20%, rgba(63, 122, 168, 0.22), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(219, 163, 39, 0.14), transparent 38%),
    linear-gradient(135deg, #050a30 0%, #123054 48%, #14385a 100%);
  box-shadow: inset 0 4px 0 0 var(--secondary);
  text-align: right;
  min-height: auto;
  padding: calc(38px + 88px + 2rem) 0 4.5rem;
  color: #fff;
  align-items: stretch;
}

.page-hero.page-hero-renal::after {
  height: 72px;
}

.page-hero-renal-inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 3;
  animation: heroFadeIn 0.9s ease-out;
}

.page-hero-renal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-hero-renal-eyebrow i {
  color: var(--secondary);
}

.page-hero.page-hero-renal h1 {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
}

.page-hero.page-hero-renal p {
  margin-inline: 0;
  margin-left: 0;
  margin-right: 0;
}

.page-hero.page-hero-renal .page-hero-renal-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #f5dc8a;
  margin: 0 0 1rem;
  line-height: 1.65;
}

.page-hero.page-hero-renal .page-hero-renal-desc {
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.94);
  max-width: 720px;
  margin: 0 0 1.25rem;
  font-weight: 500;
}

.rp-hero-sponsors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.25rem;
}

.rp-hero-sponsor {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 600;
}

.rp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1.25rem;
}

.page-hero.page-hero-renal .btn-outline {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.page-hero.page-hero-renal .btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(219, 163, 39, 0.65);
  color: #fff;
}

.page-hero-renal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-hero-renal-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  transition: var(--transition);
}

.page-hero-renal-nav a:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(219, 163, 39, 0.55);
  color: #fff;
}

.rp-about-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.rp-prose {
  max-width: 820px;
  margin: 0 auto 1.75rem;
  line-height: 1.9;
  text-align: center;
}

.rp-prose p {
  color: var(--gray);
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.rp-goal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}

.rp-goal-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.75rem 1.4rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.rp-goal-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(35, 85, 131, 0.28);
}

.rp-goal-card .icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 33, 51, 0.08);
  color: var(--teal);
  font-size: 1.35rem;
}

.rp-goal-card p {
  margin: 0;
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.75;
}

.rp-partners-section {
  background: #fff;
}

.rp-partners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.rp-partner-role {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--secondary);
}

.rp-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.rp-stat-box {
  background: var(--light-gray);
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--secondary);
}

.rp-stat-box .v {
  font-size: 1.75rem;
  color: var(--primary);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 6px;
}

.rp-stat-box .l {
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.5;
}

.rp-howto-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.rp-howto-toolbar {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.15rem;
  margin-bottom: 1.75rem;
}

.rp-howto-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rp-howto-tab {
  appearance: none;
  border: 1px solid var(--light-border);
  background: #fff;
  color: var(--gray);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rp-howto-tab:hover {
  border-color: rgba(35, 85, 131, 0.35);
  color: var(--teal-dark);
  background: rgba(35, 85, 131, 0.06);
}

.rp-howto-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 8px 20px -10px rgba(14, 33, 51, 0.45);
}

.rp-howto-panel {
  display: none;
}

.rp-howto-panel.active {
  display: block;
}

.rp-howto-intro {
  text-align: center;
  color: var(--gray);
  font-size: 0.95rem;
  margin: 0 auto 1.75rem;
  max-width: 620px;
  line-height: 1.7;
}

.rp-howto-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 860px;
  display: grid;
  gap: 12px;
}

.rp-howto-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.rp-howto-item:hover {
  border-color: rgba(35, 85, 131, 0.28);
  transform: translateX(-2px);
}

.rp-howto-num {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(14, 33, 51, 0.08);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
}

.rp-howto-body h3 {
  font-size: 1.05rem;
  color: var(--primary);
  margin: 0 0 6px;
}

.rp-howto-body p {
  margin: 0 0 8px;
  font-size: 0.94rem;
  color: var(--gray);
  line-height: 1.7;
}

.rp-howto-body p:last-child {
  margin-bottom: 0;
}

.rp-howto-docs {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.rp-howto-docs li {
  font-size: 0.9rem;
  color: var(--gray);
  padding: 3px 16px 3px 0;
  position: relative;
  line-height: 1.6;
}

.rp-howto-docs li::before {
  content: "";
  position: absolute;
  right: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--secondary);
}

.rp-howto-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--secondary);
  font-weight: 700;
  text-decoration: none;
}

.rp-howto-link:hover {
  color: var(--primary);
}

.rp-alert-section {
  background: #fff;
}

.rp-alert-box {
  background: var(--grad-dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: var(--shadow-hover);
}

.rp-alert-box h2 {
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rp-alert-box h2 i {
  color: var(--secondary);
}

.rp-alert-box > p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  line-height: 1.75;
}

.rp-alert-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.rp-alert-box li {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.94);
  padding: 0 22px 0 0;
  position: relative;
  line-height: 1.7;
}

.rp-alert-box li::before {
  content: "\f071";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 0;
  color: var(--secondary);
  font-size: 0.8rem;
  top: 3px;
}

.rp-faq-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.rp-contact-section {
  background: #fff;
}

.rp-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.rp-contact-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rp-contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(35, 85, 131, 0.28);
}

.rp-contact-card .icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 33, 51, 0.08);
  color: var(--teal);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.rp-contact-card h3 {
  font-size: 1.1rem;
  color: var(--primary);
  margin-bottom: 8px;
}

.rp-contact-card p {
  font-size: 0.9rem;
  color: var(--gray);
  line-height: 1.7;
  margin-bottom: 1.1rem;
  flex: 1;
}

.rp-note-box {
  background: #fff;
  border: 1px solid var(--light-border);
  border-right: 4px solid var(--secondary);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 1.75rem auto 0;
  max-width: 900px;
  font-size: 0.95rem;
  color: var(--gray);
  box-shadow: var(--shadow);
  line-height: 1.85;
}

.rp-note-box b {
  color: var(--primary);
}

.rp-closing-note {
  max-width: 820px;
  margin: 2rem auto 0;
  text-align: center;
  color: var(--gray);
  font-size: 0.98rem;
  line-height: 1.9;
}

.rp-cta-section {
  background: var(--light-gray);
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.rp-cta-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--grad-dark);
  color: #fff;
  box-shadow: var(--shadow-hover);
}

.rp-cta-panel h3 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.rp-cta-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  line-height: 1.8;
}

.rp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 1000px) {
  .rp-goal-grid,
  .rp-stats-strip,
  .rp-partners-grid,
  .rp-contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .page-hero-renal-inner {
    padding: 0 1.25rem;
  }
}

@media (max-width: 700px) {
  .rp-goal-grid,
  .rp-stats-strip,
  .rp-partners-grid,
  .rp-contact-grid {
    grid-template-columns: 1fr;
  }

  .rp-howto-item {
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 16px;
  }

  .rp-howto-num {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1rem;
  }

  .rp-howto-tab {
    width: 100%;
    justify-content: center;
  }

  .rp-alert-box {
    padding: 1.75rem 1.25rem;
  }

  .rp-cta-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .rp-cta-actions {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .page-hero.page-hero-renal {
    padding: calc(38px + 78px + 1.25rem) 0 3.5rem;
  }
}

/* ============================================================
   صفحة التغطية الطبية للامتحانات — ex-*
   ============================================================ */
.page-hero.page-hero-exam {
  animation: none;
  background:
    radial-gradient(circle at 14% 22%, rgba(63, 122, 168, 0.22), transparent 42%),
    radial-gradient(circle at 86% 78%, rgba(219, 163, 39, 0.14), transparent 38%),
    linear-gradient(135deg, #050a30 0%, #123054 50%, #163a56 100%);
  box-shadow: inset 0 4px 0 0 var(--secondary);
  text-align: right;
  min-height: auto;
  padding: calc(38px + 88px + 2rem) 0 4.5rem;
  color: #fff;
  align-items: stretch;
}

.page-hero.page-hero-exam::after {
  height: 72px;
}

.page-hero-exam-inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 3;
  animation: heroFadeIn 0.9s ease-out;
}

.page-hero-exam-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-hero-exam-eyebrow i {
  color: var(--secondary);
}

.page-hero.page-hero-exam h1 {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: clamp(1.75rem, 3.8vw, 2.65rem);
  margin-bottom: 0.75rem;
  line-height: 1.35;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
}

.page-hero.page-hero-exam p {
  margin-inline: 0;
  margin-left: 0;
  margin-right: 0;
}

.page-hero.page-hero-exam .page-hero-exam-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #f5dc8a;
  margin: 0 0 1rem;
  line-height: 1.65;
}

.page-hero.page-hero-exam .page-hero-exam-desc {
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.94);
  max-width: 720px;
  margin: 0 0 1.25rem;
  font-weight: 500;
}

.ex-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1.25rem;
}

.page-hero.page-hero-exam .btn-outline {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.page-hero.page-hero-exam .btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(219, 163, 39, 0.65);
  color: #fff;
}

.page-hero-exam-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-hero-exam-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  transition: var(--transition);
}

.page-hero-exam-nav a:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(219, 163, 39, 0.55);
  color: #fff;
}

.ex-about-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.ex-wrap {
  max-width: 920px;
  margin: 0 auto;
}

.ex-prose {
  line-height: 1.95;
}

.ex-prose p {
  color: var(--gray);
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
}

.ex-prose p:last-child {
  margin-bottom: 0;
}

.ex-goals-section {
  background: #fff;
}

.ex-goals {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}

.ex-goals li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--light-border);
  color: var(--gray);
  font-size: 0.98rem;
  line-height: 1.7;
}

.ex-goals li i {
  color: var(--teal);
  margin-top: 5px;
  flex-shrink: 0;
}

.ex-phases-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.ex-phases {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.ex-phase {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.ex-phase:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(35, 85, 131, 0.28);
}

.ex-phase .n {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin: 0 auto 12px;
}

.ex-phase h4 {
  font-size: 0.98rem;
  color: var(--primary);
  margin-bottom: 6px;
}

.ex-phase p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gray);
  line-height: 1.6;
}

.ex-prep-section {
  background: #fff;
}

.ex-prep-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 820px;
  display: grid;
  gap: 12px;
}

.ex-prep-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.ex-prep-item:hover {
  border-color: rgba(35, 85, 131, 0.28);
  transform: translateX(-2px);
}

.ex-prep-item .icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(14, 33, 51, 0.08);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.ex-prep-item p {
  margin: 0;
  color: var(--gray);
  font-size: 0.96rem;
  line-height: 1.75;
}

.ex-prep-item b {
  color: var(--primary);
}

.ex-field-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.ex-field-box {
  background: var(--grad-dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  max-width: 920px;
  margin: 0 auto;
  box-shadow: var(--shadow-hover);
}

.ex-field-box h2 {
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ex-field-box h2 i {
  color: var(--secondary);
}

.ex-field-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.ex-field-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
}

.ex-field-item i {
  color: var(--secondary);
  font-size: 1.2rem;
  margin-bottom: 10px;
  display: block;
}

.ex-field-item h4 {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.ex-field-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
  line-height: 1.65;
}

.ex-stats-section {
  background: #fff;
}

.ex-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.ex-stat-box {
  background: var(--light-gray);
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--secondary);
}

.ex-stat-box--total {
  background: rgba(35, 85, 131, 0.08);
  border-color: rgba(35, 85, 131, 0.22);
}

.ex-stat-box .v {
  font-size: 1.75rem;
  color: var(--primary);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 6px;
}

.ex-stat-box .l {
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.5;
}

.ex-services-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.ex-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.ex-service {
  text-align: center;
  padding: 1.25rem 10px;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.ex-service:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(35, 85, 131, 0.28);
}

.ex-service .icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(35, 85, 131, 0.1);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 1rem;
  transition: all 0.25s ease;
}

.ex-service:hover .icon {
  background: var(--primary);
  color: #fff;
}

.ex-service h3 {
  color: var(--primary);
  font-size: 1rem;
  margin-bottom: 8px;
}

.ex-service p {
  color: var(--gray);
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 0;
}

.ex-results-section {
  background: #fff;
}

.ex-results {
  background: var(--grad-dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  max-width: 920px;
  margin: 0 auto;
  box-shadow: var(--shadow-hover);
}

.ex-results h2 {
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.45;
}

.ex-results h2 i {
  color: var(--secondary);
  flex-shrink: 0;
}

.ex-results > p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  line-height: 1.75;
}

.ex-results ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ex-results li {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.94);
  padding: 0 26px 0 0;
  position: relative;
  line-height: 1.7;
}

.ex-results li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 0;
  top: 2px;
  color: var(--secondary);
  font-size: 0.85rem;
}

.ex-partners-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.ex-partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 960px;
  margin: 0 auto;
}

.ex-partner-role {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--secondary);
}

.ex-closing-note {
  max-width: 820px;
  margin: 2rem auto 0;
  text-align: center;
  color: var(--gray);
  font-size: 0.98rem;
  line-height: 1.9;
}

.ex-cta-section {
  background: var(--light-gray);
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.ex-cta-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--grad-dark);
  color: #fff;
  box-shadow: var(--shadow-hover);
}

.ex-cta-panel h3 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.ex-cta-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  line-height: 1.8;
}

.ex-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 1000px) {
  .ex-phases,
  .ex-field-grid,
  .ex-services,
  .ex-stats-strip {
    grid-template-columns: 1fr 1fr;
  }

  .ex-partners-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 991px) {
  .page-hero-exam-inner {
    padding: 0 1.25rem;
  }
}

@media (max-width: 640px) {
  .ex-goals,
  .ex-results ul,
  .ex-phases,
  .ex-field-grid,
  .ex-services,
  .ex-stats-strip,
  .ex-partners-grid {
    grid-template-columns: 1fr;
  }

  .ex-field-box,
  .ex-results {
    padding: 1.75rem 1.25rem;
  }

  .ex-cta-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ex-cta-actions {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .page-hero.page-hero-exam {
    padding: calc(38px + 78px + 1.25rem) 0 3.5rem;
  }
}

/* ============================================================
   صفحة التواصل — ct-*
   ============================================================ */
.page-hero.page-hero-contact {
  animation: none;
  background:
    radial-gradient(circle at 12% 22%, rgba(63, 122, 168, 0.22), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(219, 163, 39, 0.14), transparent 38%),
    linear-gradient(135deg, #050a30 0%, #123054 50%, #163a56 100%);
  box-shadow: inset 0 4px 0 0 var(--secondary);
  text-align: right;
  min-height: auto;
  padding: calc(38px + 88px + 2rem) 0 4.5rem;
  color: #fff;
  align-items: stretch;
}

.page-hero.page-hero-contact::after {
  height: 72px;
}

.page-hero-contact-inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 3;
  animation: heroFadeIn 0.9s ease-out;
}

.page-hero-contact-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-hero-contact-eyebrow i {
  color: var(--secondary);
}

.page-hero.page-hero-contact h1 {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
}

.page-hero.page-hero-contact p {
  margin-inline: 0;
  margin-left: 0;
  margin-right: 0;
}

.page-hero.page-hero-contact .page-hero-contact-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #f5dc8a;
  margin: 0 0 1rem;
  line-height: 1.65;
}

.page-hero.page-hero-contact .page-hero-contact-desc {
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.94);
  max-width: 720px;
  margin: 0 0 1.5rem;
  font-weight: 500;
}

.page-hero-contact-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-hero-contact-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  transition: var(--transition);
}

.page-hero-contact-nav a:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(219, 163, 39, 0.55);
  color: #fff;
}

.ct-main-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.ct-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2rem;
  align-items: start;
}

.ct-info-col .section-title {
  text-align: right;
  margin-bottom: 1.25rem;
}

.ct-info-col .section-title p {
  margin-bottom: 0;
}

.ct-info-grid {
  display: grid;
  gap: 12px;
}

.ct-info-item {
  display: flex;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.ct-info-item:hover {
  border-color: rgba(35, 85, 131, 0.28);
  transform: translateX(-2px);
}

.ct-info-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--gold-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ct-info-icon i {
  color: #fff;
  font-size: 1.15rem;
}

.ct-info-item h4 {
  font-size: 0.98rem;
  margin-bottom: 5px;
  color: var(--primary);
}

.ct-info-item p {
  font-size: 0.92rem;
  color: var(--gray);
  line-height: 1.7;
  margin: 0;
}

.ct-info-item a {
  color: var(--teal-dark);
  font-weight: 600;
}

.ct-info-item a:hover {
  color: var(--secondary);
}

.ct-form-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: var(--shadow-hover);
}

.ct-form-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 1.35rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--light-border);
}

.ct-form-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(35, 85, 131, 0.1);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.ct-form-head h3 {
  font-size: 1.15rem;
  margin-bottom: 4px;
  color: var(--primary);
}

.ct-form-head p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--gray);
  line-height: 1.65;
}

.ct-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.ct-form label {
  display: block;
  font-size: 0.85rem;
  color: var(--gray-dark);
  font-weight: 600;
  margin-bottom: 6px;
}

.ct-form input,
.ct-form select,
.ct-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--light-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--light-gray);
  color: var(--dark);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ct-form input:focus,
.ct-form select:focus,
.ct-form textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(35, 85, 131, 0.12);
  background: #fff;
}

.ct-form textarea {
  resize: vertical;
  min-height: 120px;
}

.ct-form-full {
  margin-bottom: 14px;
}

.ct-form-submit {
  width: 100%;
  margin-top: 4px;
}

.ct-form-note {
  font-size: 0.85rem;
  color: var(--teal-dark);
  background: rgba(35, 85, 131, 0.08);
  border: 1px solid rgba(35, 85, 131, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 12px;
  text-align: center;
  line-height: 1.65;
}

.ct-rights-section {
  background: #fff;
}

.ct-rights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.ct-rights-col {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.65rem 1.5rem;
  box-shadow: var(--shadow);
}

.ct-rights-col h4 {
  font-size: 1.05rem;
  color: var(--primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ct-rights-col h4 i {
  color: var(--secondary);
}

.ct-rights-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.ct-rights-col li {
  font-size: 0.9rem;
  color: var(--gray);
  padding: 6px 24px 6px 0;
  position: relative;
  line-height: 1.65;
}

.ct-rights-col li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 0;
  top: 8px;
  color: var(--secondary);
  font-size: 0.8rem;
}

.ct-complaints-box {
  background: var(--grad-dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.75rem 1.65rem;
  margin-top: 1.75rem;
  box-shadow: var(--shadow-hover);
}

.ct-complaints-box h3 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ct-complaints-box h3 i {
  color: var(--secondary);
}

.ct-complaints-box p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  margin-bottom: 1.1rem;
  line-height: 1.85;
}

.ct-faq-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.ct-faq-promo {
  background: #fff;
  border: 1px solid var(--light-border);
  border-right: 4px solid var(--secondary);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: var(--shadow);
}

.ct-faq-promo-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 16px;
}

.ct-faq-promo h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: var(--primary);
}

.ct-faq-promo p {
  font-size: 0.95rem;
  color: var(--gray);
  margin-bottom: 20px;
  line-height: 1.85;
}

.ct-cta-section {
  background: var(--light-gray);
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.ct-cta-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--grad-dark);
  color: #fff;
  box-shadow: var(--shadow-hover);
}

.ct-cta-panel h3 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.ct-cta-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  line-height: 1.8;
}

.ct-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 991px) {
  .page-hero-contact-inner {
    padding: 0 1.25rem;
  }
}

@media (max-width: 800px) {
  .ct-layout,
  .ct-form-row,
  .ct-rights-grid {
    grid-template-columns: 1fr;
  }

  .ct-cta-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ct-cta-actions {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .page-hero.page-hero-contact {
    padding: calc(38px + 78px + 1.25rem) 0 3.5rem;
  }
}

/* ============================================================
   الأسئلة الشائعة — faq-*
   ============================================================ */
.faq-container {
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.faq-q {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  width: 100%;
  background: none;
  border: none;
  font-family: inherit;
  text-align: right;
}

.faq-q i {
  color: var(--gray);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.faq-item.open .faq-q i {
  transform: rotate(180deg);
  color: var(--secondary);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-a-inner {
  padding: 0 22px 18px;
  font-size: 0.95rem;
  color: var(--gray);
  border-top: 1px solid var(--light-border);
  padding-top: 14px;
  line-height: 1.8;
}

.faq-note {
  background: #fff;
  border: 1px solid var(--light-border);
  border-right: 4px solid var(--secondary);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-size: 0.95rem;
  color: var(--gray);
  box-shadow: var(--shadow);
  margin-top: 2rem;
}

.faq-note b {
  color: var(--primary);
}

.faq-note a {
  color: var(--secondary);
  font-weight: 700;
}

.faq-section-alt {
  background: var(--light-gray);
}

.faq-item.hidden {
  display: none;
}

.faq-a-inner a {
  color: var(--secondary);
  font-weight: 700;
}

.faq-a-inner a:hover {
  color: var(--primary);
}

/* صفحة الأسئلة الشائعة — faq page */
.page-hero.page-hero-faq {
  animation: none;
  background:
    radial-gradient(circle at 14% 22%, rgba(63, 122, 168, 0.22), transparent 42%),
    radial-gradient(circle at 86% 78%, rgba(219, 163, 39, 0.14), transparent 38%),
    linear-gradient(135deg, #050a30 0%, #123054 50%, #163a56 100%);
  box-shadow: inset 0 4px 0 0 var(--secondary);
  text-align: right;
  min-height: auto;
  padding: calc(38px + 88px + 2rem) 0 4.5rem;
  color: #fff;
  align-items: stretch;
}

.page-hero.page-hero-faq::after {
  height: 72px;
}

.page-hero-faq-inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 3;
  animation: heroFadeIn 0.9s ease-out;
}

.page-hero-faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-hero-faq-eyebrow i {
  color: var(--secondary);
}

.page-hero.page-hero-faq h1 {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
}

.page-hero.page-hero-faq p {
  margin-inline: 0;
  margin-left: 0;
  margin-right: 0;
}

.page-hero.page-hero-faq .page-hero-faq-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #f5dc8a;
  margin: 0 0 1rem;
  line-height: 1.65;
}

.page-hero.page-hero-faq .page-hero-faq-desc {
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.94);
  max-width: 720px;
  margin: 0 0 1.5rem;
  font-weight: 500;
}

.page-hero-faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-hero-faq-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  transition: var(--transition);
}

.page-hero-faq-nav a:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(219, 163, 39, 0.55);
  color: #fff;
}

.faq-page-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.faq-toolbar {
  max-width: 900px;
  margin: 0 auto 1.75rem;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.25rem;
}

.faq-toolbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.faq-toolbar-head h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--primary);
}

.faq-toolbar-head p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--gray);
}

.faq-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(35, 85, 131, 0.08);
  border: 1px solid rgba(35, 85, 131, 0.18);
  color: var(--teal-dark);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.faq-count-badge i {
  color: var(--teal);
}

.faq-search-wrap {
  position: relative;
  margin-bottom: 1rem;
}

.faq-search-wrap i {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray);
}

.faq-search {
  width: 100%;
  padding: 14px 48px 14px 16px;
  border: 1px solid var(--light-border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--light-gray);
  color: var(--dark);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.faq-search:focus {
  outline: none;
  border-color: var(--teal);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(35, 85, 131, 0.12);
}

.faq-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  direction: ltr;
  scrollbar-width: thin;
  scrollbar-color: rgba(35, 85, 131, 0.45) transparent;
}

.faq-chips .faq-chip {
  direction: rtl;
  flex-shrink: 0;
}

.faq-chips::-webkit-scrollbar {
  height: 5px;
}

.faq-chips::-webkit-scrollbar-thumb {
  background: rgba(35, 85, 131, 0.45);
  border-radius: 999px;
}

.faq-chip {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--light-border);
  background: #fff;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gray);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.faq-chip:hover {
  border-color: rgba(35, 85, 131, 0.35);
  color: var(--teal-dark);
  background: rgba(35, 85, 131, 0.06);
}

.faq-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 8px 20px -10px rgba(14, 33, 51, 0.45);
}

.faq-list-wrap {
  max-width: 900px;
  margin: 0 auto;
}

.faq-empty {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 3rem 2rem;
  background: #fff;
  border: 1px dashed var(--light-border);
  border-radius: var(--radius);
  color: var(--gray);
}

.faq-empty i {
  display: block;
  font-size: 2rem;
  color: rgba(35, 85, 131, 0.45);
  margin-bottom: 0.75rem;
}

.faq-empty strong {
  display: block;
  color: var(--primary);
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.faq-cta-section {
  background: var(--light-gray);
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.faq-cta-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--grad-dark);
  color: #fff;
  box-shadow: var(--shadow-hover);
  max-width: 900px;
  margin: 0 auto;
}

.faq-cta-panel h3 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.faq-cta-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  line-height: 1.8;
}

.faq-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 991px) {
  .page-hero-faq-inner {
    padding: 0 1.25rem;
  }
}

@media (max-width: 767px) {
  .page-hero.page-hero-faq {
    padding: calc(38px + 78px + 1.25rem) 0 3.5rem;
  }

  .faq-toolbar-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .faq-cta-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .faq-cta-actions {
    justify-content: center;
  }
}

/* ============================================================
   المدونة — blog-*
   ============================================================ */
.page-hero-compact {
  min-height: 0;
  padding: calc(80px + 1.5rem) 0 3.5rem;
}

.page-hero-compact .page-hero-content {
  padding: 1.25rem 1rem 0;
}

.page-hero-compact h1 {
  margin-bottom: 0.65rem;
}

.page-hero-compact p {
  margin-bottom: 0;
}

/* ============================================================
   صفحة البحوث والمبادرات — هيرو وأقسام
   ============================================================ */
.page-hero.page-hero-research {
  animation: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(63, 122, 168, 0.22), transparent 42%),
    radial-gradient(circle at 88% 72%, rgba(219, 163, 39, 0.14), transparent 38%),
    linear-gradient(135deg, #0a1830 0%, #123054 48%, #1a4468 100%);
  box-shadow: inset 0 4px 0 0 var(--secondary);
  text-align: right;
  min-height: auto;
  padding: calc(38px + 88px + 2rem) 0 4.5rem;
  color: #fff;
  align-items: stretch;
}

.page-hero.page-hero-research::after {
  height: 72px;
}

.page-hero-research-inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 3;
}

.page-hero-research-copy {
  animation: heroFadeIn 0.9s ease-out;
}

.page-hero-research-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-hero-research-eyebrow i {
  color: var(--secondary);
}

.page-hero.page-hero-research h1 {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
}

.page-hero.page-hero-research p {
  margin-inline: 0;
  margin-left: 0;
  margin-right: 0;
}

.page-hero.page-hero-research .page-hero-research-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #f5dc8a;
  margin: 0 0 1rem;
  line-height: 1.65;
}

.page-hero.page-hero-research .page-hero-research-desc {
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.94);
  max-width: 720px;
  margin: 0 0 1.5rem;
  font-weight: 500;
}

.page-hero-research-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-hero-research-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  transition: var(--transition);
}

.page-hero-research-nav a:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(219, 163, 39, 0.55);
  color: #fff;
}

.ir-wrap {
  max-width: 920px;
  margin: 0 auto;
}

.ir-intro-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--secondary);
}

.ir-intro-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.ir-prose {
  line-height: 1.95;
}

.ir-prose p {
  color: var(--gray);
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
}

.ir-prose p:last-child {
  margin-bottom: 0;
}

.ir-goals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.ir-goal-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.35rem 1.25rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.ir-goal-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(35, 85, 131, 0.28);
}

.ir-goal-card i {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(35, 85, 131, 0.1);
  color: var(--teal);
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.ir-goal-card p {
  margin: 0;
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.75;
}

.ir-riu-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(35, 85, 131, 0.1);
  border: 1px solid rgba(35, 85, 131, 0.22);
  color: var(--teal-dark);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.ir-section-gap {
  margin-top: 2.5rem;
}

@media (max-width: 991px) {
  .page-hero-research-inner {
    padding: 0 1.25rem;
  }

  .ir-goals-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .page-hero.page-hero-research {
    padding: calc(38px + 78px + 1.25rem) 0 3.5rem;
  }

  .ir-intro-panel {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }

  .ir-goals-grid {
    grid-template-columns: 1fr;
  }
}

.blog-featured-container {
  max-width: 1400px;
}

.blog-featured-wrap {
  margin-bottom: 0.5rem;
}

.blog-featured {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 380px;
  gap: 0;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-hover);
}

.blog-featured-media {
  position: relative;
  display: block;
  min-height: 380px;
  overflow: hidden;
  background: var(--light-gray);
}

.blog-featured-media img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
}

.blog-featured-media .blog-cover i {
  font-size: 2.5rem;
}

.blog-cover {
  width: 100%;
  height: 100%;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(63, 122, 168, 0.35), transparent 50%),
    linear-gradient(135deg, #163a56 0%, #050a30 100%);
}

.blog-cover i {
  font-size: 3.5rem;
  color: rgba(255, 255, 255, 0.9);
}

.blog-featured-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--gold-gradient);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-featured-body {
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-featured-body h2 {
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.blog-featured-body h2 a {
  color: var(--primary);
  transition: color 0.25s;
}

.blog-featured-body h2 a:hover {
  color: var(--teal);
}

.blog-featured-body p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--gray);
  max-width: 36ch;
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  color: var(--gray);
}

.blog-meta-lg {
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

.blog-cat {
  background: rgba(14, 33, 51, 0.1);
  color: var(--teal-dark);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}

.blog-cat-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: var(--teal-dark);
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(14, 33, 51, 0.28);
}

.blog-read-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 0.75rem;
  color: var(--secondary);
  font-weight: 700;
  font-size: 0.92rem;
}

.blog-read-link:hover {
  color: var(--teal-dark);
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 1.75rem;
}

.blog-chip {
  padding: 9px 18px;
  border: 1px solid var(--light-border);
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gray);
  cursor: pointer;
  transition: var(--transition);
  background: #fff;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-chip:hover {
  border-color: rgba(35, 85, 131, 0.35);
  color: var(--teal-dark);
  background: rgba(35, 85, 131, 0.06);
}

.blog-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(14, 33, 51, 0.45);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.blog-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.blog-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--light-gray);
}

.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.blog-card:hover .blog-card-media img {
  transform: scale(1.05);
}

.blog-card-body {
  padding: 1.2rem 1.3rem 1.35rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-card-body h3 {
  font-size: 1.05rem;
  margin-bottom: 0.55rem;
  line-height: 1.45;
}

.blog-card-body h3 a {
  color: var(--teal-dark);
}

.blog-card-body h3 a:hover {
  color: var(--teal);
}

.blog-card-body p {
  color: var(--gray);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.blog-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--gray);
  padding: 3rem 2rem;
  background: #fff;
  border: 1px dashed var(--light-border);
  border-radius: var(--radius);
}

.blog-empty i {
  display: block;
  font-size: 2.25rem;
  color: rgba(35, 85, 131, 0.45);
  margin-bottom: 0.75rem;
}

.blog-empty strong {
  display: block;
  color: var(--primary);
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.blog-cta-section {
  background: var(--light-gray);
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.blog-cta-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 32px;
  border-radius: var(--radius);
  background: var(--grad-dark);
  color: #fff;
}

.blog-cta-box h3 {
  color: #fff;
  margin-bottom: 6px;
}

.blog-cta-box p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
}

.blog-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-article {
  max-width: none;
  margin: 0;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.blog-article-content {
  padding: 2rem 2.25rem 1.5rem;
}

.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.blog-back:hover {
  color: var(--secondary);
}

.blog-article-head h1 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  margin-bottom: 0.65rem;
  line-height: 1.35;
}

.blog-article-subtitle {
  color: var(--teal-dark);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.7;
  margin: 0 0 1rem;
}

.blog-article-content .blog-refs {
  background: var(--light-gray);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-top: 0.5rem;
}

.blog-article-content .blog-refs li {
  font-size: 0.92rem;
  color: var(--gray-dark);
}

.blog-article-content .blog-refs li::before {
  background: var(--secondary);
}

.blog-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0.35rem 0 0.9rem;
}

.blog-byline-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #8a6a16;
  background: linear-gradient(145deg, #f8e7b8 0%, #fdd757 55%, #dba327 100%);
  border-radius: 999px;
  padding: 4px 12px;
}

.blog-byline-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--teal-dark);
  position: relative;
  padding-right: 12px;
}

.blog-byline-name::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0.35em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--secondary);
}

.blog-byline-lg {
  margin: 0.5rem 0 1.35rem;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(219, 163, 39, 0.12) 0%, transparent 70%);
  border-right: 3px solid var(--secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.blog-byline-lg .blog-byline-name {
  font-size: 1.12rem;
}

.blog-article-media {
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 0;
  box-shadow: none;
}

.blog-article-media img,
.blog-article-media .blog-cover {
  min-height: 220px;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
}

.blog-article-foot {
  padding: 0 2.25rem 2rem;
}

.blog-article-content p {
  color: var(--dark);
  font-size: 1.02rem;
  line-height: 1.95;
  margin-bottom: 1.1rem;
}

.blog-article-content .blog-lead {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--teal-dark);
  line-height: 1.8;
}

.blog-article-content h2 {
  font-size: 1.12rem;
  color: var(--primary);
  margin: 1.75rem 0 0.75rem;
  padding-right: 12px;
  border-right: 3px solid var(--secondary);
}

.blog-article-content ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 8px;
}

.blog-article-content ul li {
  position: relative;
  padding: 0 1.35rem 0 0;
  color: var(--dark);
  font-size: 1.02rem;
  line-height: 1.8;
}

.blog-article-content ul li::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0.7em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.blog-article-content .blog-warn {
  background: #fdf6e3;
  border: 1px solid #e4d2a0;
  border-right: 4px solid var(--secondary);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  color: #6d5420;
  font-size: 1rem;
  line-height: 1.85;
  margin: 1.5rem 0 1.1rem;
}

.blog-article-content .blog-close {
  color: var(--gray-dark);
  font-weight: 600;
}

.blog-article-content .blog-quote {
  margin: 0 0 1.5rem;
  padding: 1.15rem 1.35rem;
  background: linear-gradient(90deg, rgba(35, 85, 131, 0.1) 0%, transparent 85%);
  border-right: 4px solid var(--teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--teal-dark);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.85;
}

.blog-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.5rem;
  padding: 14px 22px;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, filter 0.25s ease;
}

.blog-download:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  color: #fff;
}

.blog-share-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px;
  background: #fdf6e3;
  border: 1px solid #e4d2a0;
  border-radius: var(--radius-sm);
  color: #8a6c2c;
  font-size: 0.9rem;
  margin-top: 0;
}

.blog-related {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--light-border);
}

.blog-related h3 {
  margin-bottom: 1.25rem;
  font-size: 1.2rem;
}

.blog-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.blog-article-missing {
  text-align: center;
  padding: 3.5rem 2rem;
  background: #fff;
  border: 1px dashed var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.blog-article-missing i {
  font-size: 3rem;
  color: var(--gray);
  margin-bottom: 1rem;
}

.blog-article-missing h2 {
  margin-bottom: 0.5rem;
}

.blog-article-missing p {
  color: var(--gray);
  margin-bottom: 1.25rem;
}

/* ============================================================
   دليل الأدوية — med-*
   ============================================================ */
.med-page {
  background: linear-gradient(180deg, #f7f7f7 0%, #ffffff 18%, #f7f7f7 100%);
  padding-top: 2.5rem;
}

.med-guide {
  max-width: 1180px;
}

.med-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: #fff9eb;
  border: 1px solid #e8d7a8;
  border-right: 4px solid var(--secondary);
  margin-bottom: 1.5rem;
}

.med-disclaimer > i {
  color: #8a6c2c;
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.med-disclaimer strong {
  display: block;
  color: var(--primary);
  margin-bottom: 4px;
  font-size: 1rem;
}

.med-disclaimer p {
  margin: 0;
  max-width: 860px;
  color: var(--gray);
  font-size: 0.92rem;
  line-height: 1.75;
}

.med-guide-intro {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}

.med-guide-intro h2 {
  color: var(--primary);
  font-size: 1.25rem;
  margin-bottom: 0.7rem;
}

.med-guide-intro p {
  color: var(--gray);
  font-size: 0.98rem;
  line-height: 1.95;
  max-width: 860px;
  margin: 0;
}

.med-guide-intro em {
  color: var(--teal-dark);
  font-style: normal;
  font-weight: 700;
}

/* التخطيط: فهرس جانبي + محتوى */
.med-layout {
  display: block;
}

.med-sidebar {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.2rem;
  margin-bottom: 1.75rem;
}

/* البحث الفوري */
.med-search-wrap {
  position: relative;
  margin-bottom: 0.9rem;
}

.med-search-wrap > i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray);
  font-size: 0.85rem;
  pointer-events: none;
}

.med-search-wrap input {
  width: 100%;
  padding: 11px 40px 11px 36px;
  border: 1px solid var(--light-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--light-gray);
  color: var(--dark);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.med-search-wrap input:focus {
  outline: none;
  border-color: var(--teal);
  background: #fff;
}

.med-search-clear {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.med-search-clear:hover {
  background: var(--light-gray);
  color: var(--primary);
}

.med-search-status {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--teal-dark);
  margin: -0.15rem 0 0.9rem;
  padding: 7px 11px;
  background: rgba(35, 85, 131, 0.08);
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

.med-toc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 0.9rem;
  border-top: 1px solid var(--light-border);
}

.med-toc-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--teal);
  letter-spacing: 0.02em;
}

.med-toc-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.med-toc a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--gray-dark);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.4;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.med-toc a:hover,
.med-toc a:focus-visible {
  background: var(--light-gray);
  color: var(--teal-dark);
  outline: none;
}

.med-toc a i {
  font-size: 0.8rem;
  color: var(--secondary);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.med-toc a.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.med-toc a.is-active i {
  color: #fff;
}

.med-content {
  min-width: 0;
}

.med-chapter {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
  scroll-margin-top: 110px;
}

.med-chapter-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid rgba(219, 163, 39, 0.55);
  cursor: pointer;
}

.med-chapter-head:hover .med-chapter-title h2 {
  color: var(--teal);
}

.med-chapter-num {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--grad-deep);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}

.med-chapter-title {
  flex: 1 1 auto;
  min-width: 0;
}

.med-chapter-head h2 {
  color: var(--primary);
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  margin: 0 0 6px;
  line-height: 1.45;
  transition: color 0.2s ease;
}

.med-chapter-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--light-border);
  background: #fff;
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.med-chapter-toggle:hover {
  background: var(--light-gray);
}

.med-chapter-toggle i {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.med-chapter.is-collapsed .med-chapter-toggle i {
  transform: rotate(0deg);
}

.med-chapter-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s ease;
}

.med-chapter-body-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 1;
  transition: opacity 0.25s ease 0.05s;
}

.med-chapter.is-collapsed .med-chapter-body {
  grid-template-rows: 0fr;
}

.med-chapter.is-collapsed .med-chapter-body-inner {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* أثناء البحث: توسيع كل الفصول تلقائياً لإظهار النتائج المطابقة */
#medContent.med-searching .med-chapter.is-collapsed .med-chapter-body {
  grid-template-rows: 1fr;
}

#medContent.med-searching .med-chapter.is-collapsed .med-chapter-body-inner {
  opacity: 1;
}

.med-en {
  display: block;
  margin: 0.2rem 0 0;
  color: var(--gray);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.45;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

.med-section h3 .med-en {
  margin-top: 0.35rem;
  font-weight: 500;
  color: var(--gray);
}

.med-chapter-body-inner > p,
.med-section > p {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.9;
  margin: 0 0 1rem;
}

.med-section {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--light-border);
  scroll-margin-top: 110px;
}

.med-chapter-body-inner > .med-section:first-of-type {
  margin-top: 0.35rem;
}

.med-section h3 {
  color: var(--teal-dark);
  font-size: 1.05rem;
  margin: 0 0 0.7rem;
  line-height: 1.55;
}

.med-table-wrap {
  margin: 1rem 0 0.25rem;
  border: 1px solid var(--light-border);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.med-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.med-table th,
.med-table td {
  padding: 11px 12px;
  text-align: right;
  vertical-align: top;
  border-bottom: 1px solid var(--light-border);
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.med-table th {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: normal;
}

.med-table tbody tr:nth-child(even) {
  background: rgba(246, 246, 246, 0.7);
}

.med-table tbody tr:last-child td {
  border-bottom: none;
}

.med-table td:first-child {
  font-weight: 700;
  color: var(--primary);
}

.med-table .is-row-hidden {
  display: none !important;
}

/* شارات ملوّنة لتوضيح مستوى الخطورة في جداول الكلى والكبد */
.med-badge-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0.75rem 0 1rem;
}

.med-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.med-badge i {
  font-size: 0.68rem;
}

.med-badge-caution {
  background: rgba(219, 163, 39, 0.16);
  color: #8a6c2c;
}

.med-badge-danger {
  background: rgba(192, 57, 43, 0.12);
  color: #922b21;
}

.med-cell-value {
  display: block;
}

.med-cell-value .med-badge {
  margin-bottom: 6px;
}

.med-badge-detail {
  display: block;
  color: var(--gray);
}

.med-table-dash {
  color: var(--gray);
  opacity: 0.65;
  font-size: 0.85rem;
}

.med-risk-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.med-risk-list li {
  position: relative;
  padding: 12px 28px 12px 0;
  border-bottom: 1px solid var(--light-border);
  color: var(--gray);
  font-size: 0.93rem;
  line-height: 1.8;
}

.med-risk-list li:last-child {
  border-bottom: none;
}

.med-risk-list li::before {
  content: "";
  position: absolute;
  right: 0;
  top: 1.15em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.med-risk-list strong {
  color: var(--primary);
}

.med-callout {
  padding: 15px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 0.85rem;
  border: 1px solid var(--light-border);
}

.med-callout strong {
  display: block;
  color: var(--primary);
  margin-bottom: 6px;
}

.med-callout p,
.med-callout ul {
  margin: 0;
  color: var(--gray);
  font-size: 0.92rem;
  line-height: 1.8;
}

.med-callout ul {
  padding-right: 1.1rem;
}

.med-callout li {
  margin-bottom: 6px;
}

.med-callout-ok {
  background: rgba(35, 85, 131, 0.08);
  border-color: rgba(35, 85, 131, 0.22);
}

.med-callout-warn {
  background: #fff9eb;
  border-color: #e8d7a8;
}

.med-role-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}

.med-role-card {
  background: var(--light-gray);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-sm);
  padding: 1.15rem 0.9rem;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.med-role-card:hover {
  background: #fff;
  border-color: rgba(35, 85, 131, 0.35);
}

.med-role-card i {
  display: block;
  font-size: 1.25rem;
  color: var(--teal);
  margin-bottom: 0.65rem;
}

.med-role-card h4 {
  color: var(--primary);
  font-size: 0.92rem;
  margin: 0 0 6px;
}

.med-role-card p {
  margin: 0;
  color: var(--gray);
  font-size: 0.84rem;
  line-height: 1.65;
}

.med-source {
  text-align: center;
  color: var(--gray);
  font-size: 0.86rem;
  margin: 0.5rem 0 0;
  padding: 1.25rem 1rem 0;
  line-height: 1.7;
}

.med-source em {
  color: var(--teal-dark);
  font-style: normal;
  font-weight: 700;
}

/* من عرض 993px: فهرس جانبي ثابت (Sticky) بجانب المحتوى */
@media (min-width: 993px) {
  .med-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1.75rem;
    align-items: start;
  }

  .med-sidebar {
    position: sticky;
    top: 122px;
    max-height: calc(100vh - 145px);
    overflow-y: auto;
    margin-bottom: 0;
  }
}

@media (max-width: 992px) {
  .med-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .med-table {
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .med-page {
    padding-top: 1.5rem;
  }

  .med-guide-intro,
  .med-chapter,
  .med-sidebar {
    padding: 1.15rem 1rem;
  }

  .med-chapter-head {
    gap: 10px;
  }

  .med-chapter-num {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 0.9rem;
  }

  /* جداول متجاوبة: بطاقات صفوف بدل التمرير الأفقي */
  .med-table-wrap {
    border: none;
    background: transparent;
    overflow: visible;
  }

  .med-table,
  .med-table thead,
  .med-table tbody,
  .med-table tr,
  .med-table th,
  .med-table td {
    display: block;
    width: 100% !important;
  }

  .med-table {
    table-layout: auto;
  }

  .med-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .med-table tr {
    background: var(--light-gray);
    border: 1px solid var(--light-border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.85rem;
    padding: 0.35rem 0;
    overflow: hidden;
  }

  .med-table tbody tr:nth-child(even) {
    background: #fff;
  }

  .med-table td {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--light-border);
    text-align: right;
  }

  .med-table td:last-child {
    border-bottom: none;
  }

  .med-table td::before {
    content: attr(data-label);
    font-weight: 800;
    color: var(--primary);
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .med-table td:first-child {
    background: rgba(14, 33, 51, 0.06);
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .med-role-grid {
    grid-template-columns: 1fr;
  }

  .med-table td {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ============================================================
   التطوع — volunteer-*
   ============================================================ */
.volunteer-section-alt {
  background: var(--light-gray);
}

.aafia-home-banner {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--light-border);
  margin-bottom: 2.5rem;
}

.aafia-home-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.volunteer-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

.volunteer-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--light-border);
  box-shadow: var(--shadow);
}

.volunteer-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.volunteer-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.volunteer-benefit-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

.volunteer-benefit-card i {
  font-size: 1.4rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.volunteer-benefit-card h4 {
  font-size: 0.98rem;
  margin-bottom: 0.35rem;
}

.volunteer-benefit-card p {
  font-size: 0.85rem;
  color: var(--gray);
  margin: 0;
  line-height: 1.65;
}

.volunteer-who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.volunteer-who-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-weight: 600;
  color: var(--teal-dark);
}

.volunteer-who-item i {
  color: var(--secondary);
  font-size: 1.2rem;
}

.volunteer-req-list {
  list-style: none;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
}

.volunteer-req-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--light-border);
  color: var(--gray);
  font-size: 0.95rem;
}

.volunteer-req-list li i {
  color: var(--teal);
  margin-top: 4px;
}

.volunteer-fields-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.volunteer-field-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.35rem;
  box-shadow: var(--shadow);
  text-align: center;
  transition: var(--transition);
}

.volunteer-field-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.volunteer-field-card i {
  font-size: 1.6rem;
  color: var(--teal);
  margin-bottom: 0.65rem;
}

.volunteer-field-card h4 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.volunteer-field-card p {
  font-size: 0.85rem;
  color: var(--gray);
  margin: 0;
}

.volunteer-steps-strip {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
}

.volunteer-steps-strip h2 {
  color: #fff;
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.35rem;
}

.volunteer-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.volunteer-step {
  text-align: center;
}

.volunteer-step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid var(--secondary);
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 auto 12px;
}

.volunteer-step h4 {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.volunteer-step p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.volunteer-form-card {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.volunteer-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.volunteer-form-full {
  margin-bottom: 14px;
}

.volunteer-form-card label {
  display: block;
  font-size: 0.85rem;
  color: var(--gray);
  margin-bottom: 6px;
  font-weight: 600;
}

.volunteer-form-card input,
.volunteer-form-card select,
.volunteer-form-card textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--light-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--light-gray);
}

.volunteer-form-card input:focus,
.volunteer-form-card select:focus,
.volunteer-form-card textarea:focus {
  outline: none;
  border-color: var(--secondary);
  background: #fff;
}

.volunteer-form-card textarea {
  min-height: 110px;
  resize: vertical;
}

.volunteer-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--gray);
  margin: 1rem 0;
  cursor: pointer;
}

.volunteer-check input {
  margin-top: 4px;
  accent-color: var(--teal);
}

.volunteer-submit {
  width: 100%;
}

.volunteer-success {
  text-align: center;
  padding: 2rem 1rem;
}

.volunteer-success i {
  font-size: 3rem;
  color: var(--teal);
  margin-bottom: 0.75rem;
}

.volunteer-success h3 {
  margin-bottom: 0.5rem;
}

.volunteer-success-note {
  color: var(--gray);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* ============================================================
   الشركاء — partners-* / partners-home-strip
   ============================================================ */
.page-hero.page-hero-partners {
  animation: none;
  background:
    radial-gradient(circle at 12% 22%, rgba(63, 122, 168, 0.22), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(219, 163, 39, 0.14), transparent 38%),
    linear-gradient(135deg, #050a30 0%, #123054 50%, #163a56 100%);
  box-shadow: inset 0 4px 0 0 var(--secondary);
  text-align: right;
  min-height: auto;
  padding: calc(38px + 88px + 2rem) 0 4.5rem;
  color: #fff;
  align-items: stretch;
}

.page-hero.page-hero-partners::after {
  height: 72px;
}

.page-hero-partners-inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 3;
  animation: heroFadeIn 0.9s ease-out;
}

.page-hero-partners-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-hero-partners-eyebrow i {
  color: var(--secondary);
}

.page-hero.page-hero-partners h1 {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
}

.page-hero.page-hero-partners p {
  margin-inline: 0;
  margin-left: 0;
  margin-right: 0;
}

.page-hero.page-hero-partners .page-hero-partners-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #f5dc8a;
  margin: 0 0 1rem;
  line-height: 1.65;
}

.page-hero.page-hero-partners .page-hero-partners-desc {
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.94);
  max-width: 720px;
  margin: 0 0 1.5rem;
  font-weight: 500;
}

.page-hero-partners-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-hero-partners-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  transition: var(--transition);
}

.page-hero-partners-nav a:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(219, 163, 39, 0.55);
  color: #fff;
}

@media (max-width: 991px) {
  .page-hero-partners-inner {
    padding: 0 1.25rem;
  }
}

@media (max-width: 767px) {
  .page-hero.page-hero-partners {
    padding: calc(38px + 78px + 1.25rem) 0 3.5rem;
  }
}

.pt-network-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, #fff 100%);
}

.pt-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.pt-focus-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.pt-focus-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(35, 85, 131, 0.28);
}

.pt-focus-card .icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  background: rgba(35, 85, 131, 0.1);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.pt-focus-card h3 {
  font-size: 1rem;
  color: var(--primary);
  margin-bottom: 6px;
}

.pt-focus-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.65;
}

.pt-partners-grid {
  max-width: 1100px;
  margin: 0 auto;
}

.pt-partner-role {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--secondary);
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.partner-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow);
  text-align: center;
  transition: var(--transition);
}

.partner-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(14, 33, 51, 0.25);
}

.partner-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 33, 51, 0.08);
  color: var(--teal);
  font-size: 1.5rem;
}

.partner-logo {
  width: 92px;
  height: 92px;
  margin: 0 auto 1rem;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--light-border);
  padding: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.partner-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.partner-logo--dark {
  background: #111;
  border-color: rgba(255, 255, 255, 0.08);
}

.partner-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.65rem;
  line-height: 1.45;
}

.partner-card p {
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.7;
  margin: 0;
}

.partners-cta-section {
  background: var(--light-gray);
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.partners-cta-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--grad-dark);
  color: #fff;
  box-shadow: var(--shadow-hover);
}

.partners-cta-panel h3 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.partners-cta-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  line-height: 1.8;
}

.partners-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.partners-cta-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 32px;
  border-radius: var(--radius);
  background: var(--grad-dark);
  color: #fff;
}

.partners-cta-box h3 {
  color: #fff;
  margin-bottom: 6px;
}

.partners-cta-box p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
}

.partners-home-strip {
  background: #fff;
  border-top: 1px solid var(--light-border);
  border-bottom: 1px solid var(--light-border);
  padding: 2.5rem 0;
}

.partners-home-strip .section-title {
  margin-bottom: 1.5rem;
}

.partners-home-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2rem;
}

.partners-home-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--light-border);
  border-radius: 999px;
  background: var(--light-gray);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--teal-dark);
  transition: var(--transition);
}

.partners-home-logo img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
  background: #fff;
  padding: 3px;
}

.partners-home-logo:hover {
  border-color: var(--secondary);
  background: #fff;
}

.partners-home-logo i {
  color: var(--secondary);
}

.partners-home-strip .partners-strip-link {
  display: block;
  text-align: center;
  margin-top: 1.25rem;
  color: var(--teal);
  font-weight: 700;
  font-size: 0.92rem;
}

.partners-home-strip .partners-strip-link:hover {
  color: var(--secondary);
}

/* ============================================================
   استجابة — blog / med / volunteer / partners / emergency
   ============================================================ */
@media (max-width: 992px) {
  .blog-featured {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .blog-featured-media,
  .blog-featured-media img {
    min-height: 220px;
  }

  .blog-featured-body {
    padding: 1.5rem 1.25rem 1.75rem;
  }

  .blog-featured-body h2 {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
  }

  .blog-featured-body p {
    max-width: none;
    font-size: 0.95rem;
  }

  .blog-grid,
  .partners-grid,
  .pt-focus-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .emergency-hotline-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .volunteer-intro-grid {
    grid-template-columns: 1fr;
  }

  .volunteer-fields-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .volunteer-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .blog-grid,
  .partners-grid,
  .blog-related-grid,
  .volunteer-who-grid,
  .volunteer-benefits {
    grid-template-columns: 1fr;
  }

  .volunteer-form-row,
  .volunteer-fields-grid,
  .volunteer-steps-grid,
  .emergency-hotline-grid {
    grid-template-columns: 1fr;
  }

  .blog-cta-box,
  .partners-cta-box,
  .partners-cta-panel,
  .emergency-cta-box {
    flex-direction: column;
    text-align: center;
  }

  .partners-cta-panel {
    grid-template-columns: 1fr;
  }

  .partners-cta-actions {
    justify-content: center;
  }

  .pt-focus-grid {
    grid-template-columns: 1fr;
  }

  .blog-cta-actions {
    justify-content: center;
    width: 100%;
  }
}

/* ============================================================
   الأخبار — تخطيط الصفحة الرئيسية + صفحة المقال
   ============================================================ */
.news-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 2rem;
}

.news-section-head .section-title {
  margin-bottom: 0;
  text-align: right;
}

.news-section-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}

.news-section-more:hover {
  color: var(--secondary);
}

.news-section-head .news-card--featured {
  max-width: 100%;
}

.news-media-empty {
  text-align: center;
  color: var(--gray);
  padding: 3rem 1.5rem;
  font-weight: 600;
  background: #fff;
  border: 1px dashed var(--light-border);
  border-radius: var(--radius);
}

#media-news-grid .news-media-featured {
  margin-bottom: 1.75rem;
}

#media-news-grid .news-card--media-lead {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: auto;
}

#media-news-grid .news-card--media-lead .news-image {
  width: min(320px, 36%);
  min-width: 200px;
  max-width: 320px;
  aspect-ratio: auto;
  min-height: 0;
  max-height: 210px;
  flex-shrink: 0;
  align-self: stretch;
}

#media-news-grid .news-card--media-lead .news-image img,
#media-news-grid .news-card--media-lead .news-cover {
  height: 100%;
  min-height: 180px;
  max-height: 210px;
  object-fit: cover;
}

#media-news-grid .news-card--media-lead .news-body {
  padding: 1.1rem 1.25rem;
  justify-content: center;
}

#media-news-grid .news-card--media-lead .news-body h3 {
  font-size: 1.1rem;
  line-height: 1.45;
  margin-bottom: 0.5rem;
}

#media-news-grid .news-card--media-lead .news-body p {
  font-size: 0.92rem;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 768px) {
  #media-news-grid .news-card--media-lead {
    flex-direction: column;
  }

  #media-news-grid .news-card--media-lead .news-image {
    width: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: 16 / 10;
  }

  #media-news-grid .news-card--media-lead .news-image img,
  #media-news-grid .news-card--media-lead .news-cover {
    min-height: 0;
    max-height: none;
    height: 100%;
  }
}

.news-home-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

.news-home-featured {
  min-width: 0;
}

.news-home-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.news-card--featured {
  height: 100%;
}

.news-card--featured .news-image {
  aspect-ratio: 16 / 9;
}

.news-card--featured .news-body h3 {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.news-card--compact {
  flex-direction: row;
  align-items: stretch;
}

.news-card--compact .news-image {
  width: 38%;
  min-width: 120px;
  max-width: 200px;
  aspect-ratio: auto;
  flex-shrink: 0;
  align-self: stretch;
}

.news-card--compact .news-image img,
.news-card--compact .news-cover {
  height: 100%;
  min-height: 100%;
}

.news-card--compact .news-body {
  padding: 1rem 1.1rem;
  justify-content: center;
}

.news-card--compact .news-body h3 {
  font-size: 0.98rem;
  margin-bottom: 0.35rem;
  line-height: 1.4;
}

.news-card--compact .news-body p {
  display: none;
}

.news-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 0.45rem;
}

.news-source,
.news-article-source {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
}

.news-read {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray);
}

.news-read i {
  color: var(--secondary);
  font-size: 0.72rem;
}

.news-badge--inline {
  position: static;
  box-shadow: none;
}

.news-grid--related {
  margin-top: 0.5rem;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.news-grid--related .news-card--compact .news-image {
  width: 34%;
  max-width: 260px;
  min-height: 150px;
}

.news-grid--related .news-card--compact .news-body h3 {
  font-size: 1.05rem;
}

/* صفحة المقال الإخباري */
.news-article {
  max-width: 820px;
  margin: 0 auto;
}

.news-article-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.news-article-back:hover {
  color: var(--secondary);
}

.news-article-head h1 {
  font-size: clamp(1.45rem, 3.5vw, 2rem);
  color: var(--teal-dark);
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.news-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 1rem;
  font-size: 0.88rem;
  color: var(--gray);
}

.news-article-media {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow);
  background: var(--light-gray);
}

.news-article-media img:not(.gallery-thumbnail) {
  width: 100%;
  display: block;
  max-height: 420px;
  object-fit: cover;
}

.news-article-media .news-cover {
  min-height: 260px;
}

/* معرض صور الخبر */
.news-gallery-container {
  width: 100%;
}

.news-image-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: #f5f5f5;
}

.gallery-stage {
  position: relative;
  overflow: hidden;
  background: #050a30;
  aspect-ratio: 16 / 9;
  min-height: 280px;
}

.gallery-main-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  cursor: zoom-in;
  transition: opacity 0.35s ease, transform 0.5s ease;
}

.gallery-main-image.is-changing {
  opacity: 0.55;
  transform: scale(1.015);
}

.gallery-controls {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.65rem;
  pointer-events: none;
}

.gallery-control {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary-darker);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  transition: var(--transition);
}

.gallery-control:hover {
  background: var(--secondary);
  color: var(--primary-darker);
  transform: scale(1.06);
}

.gallery-stage-footer {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(to top, rgba(14, 33, 51, 0.88), transparent);
}

.gallery-counter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  backdrop-filter: blur(6px);
}

.gallery-counter i {
  color: var(--secondary);
  font-size: 0.78rem;
}

.gallery-counter-sep {
  opacity: 0.7;
}

.gallery-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: var(--transition);
}

.gallery-expand-btn:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--primary-darker);
}

.gallery-thumbnails {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  padding: 0 0.15rem 0.15rem;
}

.gallery-thumbnail-btn {
  position: relative;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  transition: var(--transition);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.gallery-thumbnail-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(14, 33, 51, 0);
  transition: background 0.25s ease;
}

.gallery-thumbnail-btn:hover::after {
  background: rgba(14, 33, 51, 0.12);
}

.gallery-thumbnail-btn.active {
  border-color: var(--secondary);
  box-shadow: 0 0 0 2px rgba(219, 163, 39, 0.25);
}

.gallery-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .gallery-stage {
    aspect-ratio: 4 / 3;
    min-height: 220px;
  }

  .gallery-control {
    width: 38px;
    height: 38px;
  }

  .gallery-expand-btn span {
    display: none;
  }

  .gallery-thumbnails {
    gap: 0.45rem;
  }
}

.news-article-content p {
  color: var(--dark);
  font-size: 1.02rem;
  line-height: 1.95;
  margin-bottom: 1.1rem;
}

.news-article-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.news-article-list li {
  position: relative;
  padding: 6px 18px 6px 0;
  color: var(--dark);
  font-size: 1.02rem;
  line-height: 1.85;
}

.news-article-list li::before {
  content: "—";
  position: absolute;
  right: 0;
  color: var(--secondary);
}

.news-article-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px;
  background: #fdf6e3;
  border: 1px solid #e4d2a0;
  border-radius: var(--radius-sm);
  color: #8a6c2c;
  font-size: 0.9rem;
  margin-top: 1.5rem;
}

.news-article-note i {
  color: var(--secondary);
  margin-top: 2px;
}

.news-article-related {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--light-border);
}

.news-article-related h3 {
  margin-bottom: 1.25rem;
  font-size: 1.2rem;
  color: var(--teal-dark);
}

.news-article-missing {
  text-align: center;
  padding: 3rem 1rem;
}

.news-article-missing i {
  font-size: 3rem;
  color: var(--gray);
  margin-bottom: 1rem;
}

.news-article-missing h2 {
  margin-bottom: 0.5rem;
}

.news-article-missing p {
  color: var(--gray);
  margin-bottom: 1.25rem;
}

@media (max-width: 991px) {
  .news-home-layout {
    grid-template-columns: 1fr;
  }

  .news-card--compact {
    flex-direction: column;
  }

  .news-card--compact .news-image {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 640px) {
  .news-grid--related .news-card--compact .news-image {
    width: 100%;
    max-width: none;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

/* ============================================================
   ????? ???? � ??? ?? ?????????? ??????
   ============================================================ */
#about-section.about-section-premium,
.about-section-premium {
  background: linear-gradient(180deg, #fff 0%, #f7f7f7 52%, #fff 100%);
  overflow: hidden;
}

.about-premium-header {
  text-align: center;
  max-width: 850px;
  margin: 0 auto 3rem;
  position: relative;
}

.about-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--secondary);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 0.65rem;
}

.about-kicker span {
  width: 34px;
  height: 1px;
  background: var(--secondary);
  display: block;
}

.about-premium-header h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 0.65rem;
  color: var(--primary-darker);
}

.about-premium-header p {
  color: var(--gray);
  font-size: 1.05rem;
  margin: auto;
  max-width: 700px;
}

.about-identity-panel {
  display: grid;
  grid-template-columns: 1.7fr 0.65fr;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 24px;
  box-shadow: 0 20px 55px rgba(14, 33, 51, 0.09);
  overflow: hidden;
  margin-bottom: 4rem;
  position: relative;
}

.about-identity-main {
  padding: 2.8rem 3rem;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 1.3rem;
  align-items: center;
  position: relative;
}

.about-identity-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0, rgba(63, 122, 168, 0.11), transparent 45%);
  pointer-events: none;
}

.about-number {
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(35, 85, 131, 0.1);
  line-height: 1;
  align-self: start;
  position: relative;
}

.about-icon-large {
  width: 78px;
  height: 78px;
  border-radius: 22px;
  background: var(--grad-deep);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 14px 28px rgba(14, 33, 51, 0.2);
  position: relative;
}

.about-identity-main h3 {
  font-size: 1.45rem;
  margin-bottom: 0.65rem;
  color: var(--primary-darker);
}

.about-identity-main p {
  color: var(--gray);
  font-size: 0.98rem;
  line-height: 1.85;
  margin-bottom: 0.35rem;
}

.about-identity-side {
  background: linear-gradient(145deg, var(--primary-darker), var(--primary));
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  color: #fff;
  position: relative;
}

.about-identity-side::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  left: -80px;
  bottom: -70px;
}

.about-identity-side div {
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  position: relative;
  z-index: 1;
}

.about-identity-side div:last-child {
  border-bottom: 0;
}

.about-identity-side strong {
  font-size: 1.05rem;
  color: #fff;
}

.about-identity-side span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
}

.about-subheading {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 3.6rem 0 1.8rem;
}

.about-subheading-line {
  width: 4px;
  height: 52px;
  background: var(--secondary);
  border-radius: 5px;
  flex: 0 0 auto;
}

.about-subheading small {
  display: block;
  color: var(--secondary);
  font-size: 0.76rem;
  font-weight: 800;
  margin-bottom: 0.15rem;
}

.about-subheading h3 {
  margin: 0;
  color: var(--primary-darker);
  font-size: 1.65rem;
}

.about-vm-premium {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}

.about-vm-premium .home-vm-card {
  border-radius: 20px;
  padding: 1.8rem;
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  background: #fff;
  border: 1px solid var(--light-border);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  border-top: none;
}

.about-vm-premium .home-vm-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--gold-gradient);
  transform: scaleX(0);
  transform-origin: right;
  transition: 0.35s;
}

.about-vm-premium .home-vm-card:hover::after {
  transform: scaleX(1);
}

.about-vm-premium .home-vm-icon {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.card-label {
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  color: var(--secondary);
  font-weight: 900;
}

.about-vm-premium h3 {
  margin: 0.2rem 0 0.5rem;
}

.about-vm-premium p {
  margin: 0;
  color: var(--gray);
  font-size: 0.92rem;
  line-height: 1.8;
}

.about-objectives-premium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
}

.about-objectives-premium article {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: 0.75rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: 17px;
  box-shadow: var(--shadow);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.about-objectives-premium article:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(35, 85, 131, 0.3);
}

.about-objectives-premium article > span {
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--secondary);
  padding-top: 0.2rem;
}

.about-objectives-premium article > i {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(35, 85, 131, 0.1);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-objectives-premium strong {
  display: block;
  color: var(--primary);
  font-size: 0.98rem;
  margin-bottom: 0.25rem;
}

.about-objectives-premium p {
  font-size: 0.8rem;
  color: var(--gray);
  line-height: 1.65;
  margin: 0;
}

.about-values-premium {
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.about-values-premium .home-value-card {
  min-height: 205px;
  padding: 1.45rem;
  border-radius: 18px;
}

.about-values-premium .home-value-card:first-child {
  grid-column: span 2;
}

.about-values-premium .home-value-card i {
  font-size: 1.35rem;
}

.about-values-premium .home-value-card h4 {
  font-size: 1rem;
}

.about-values-premium .home-value-card p {
  font-size: 0.82rem;
  line-height: 1.7;
}

.about-mandate-heading {
  margin-top: 4rem;
}

.about-mandate-premium {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.about-mandate-premium .home-mandate-card {
  min-height: 205px;
  border-radius: 18px;
  padding: 1.5rem;
}

.about-mandate-premium .home-mandate-card i {
  font-size: 1.3rem;
}

.about-mandate-premium .home-mandate-card h4 {
  font-size: 1rem;
}

.about-mandate-premium .home-mandate-card p {
  font-size: 0.82rem;
  line-height: 1.7;
}

@media (max-width: 991px) {
  .about-identity-panel {
    grid-template-columns: 1fr;
  }

  .about-identity-side {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
  }

  .about-identity-side div {
    border-bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.13);
    padding: 0 0.8rem;
  }

  .about-identity-side div:last-child {
    border-left: 0;
  }

  .about-objectives-premium {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-values-premium {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-values-premium .home-value-card:first-child {
    grid-column: span 1;
  }

  .about-mandate-premium {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .about-identity-main {
    grid-template-columns: auto 1fr;
    padding: 2rem 1.4rem;
  }

  .about-number {
    display: none;
  }

  .about-identity-main > div:last-child {
    grid-column: 1 / -1;
  }

  .about-icon-large {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  .about-identity-main h3 {
    font-size: 1.15rem;
  }

  .about-identity-side {
    grid-template-columns: 1fr;
    padding: 1.2rem 1.5rem;
  }

  .about-identity-side div {
    border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-left: 0 !important;
    padding: 0.8rem 0;
  }

  .about-vm-premium,
  .about-objectives-premium,
  .about-values-premium,
  .about-mandate-premium {
    grid-template-columns: 1fr;
  }

  .about-vm-premium .home-vm-card {
    padding: 1.35rem;
  }

  .about-subheading {
    margin-top: 2.8rem;
  }

  .about-premium-header {
    margin-bottom: 2rem;
  }
}

/* ============================================================
   صفحة المجالس التخصصية — page-hero-councils / council-*
   ============================================================ */
.page-hero.page-hero-councils {
  animation: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(63, 122, 168, 0.24), transparent 42%),
    radial-gradient(circle at 88% 72%, rgba(219, 163, 39, 0.14), transparent 38%),
    linear-gradient(135deg, #0a1830 0%, #123054 48%, #1a4468 100%);
  box-shadow: inset 0 4px 0 0 var(--secondary);
  text-align: right;
  min-height: auto;
  padding: calc(38px + 88px + 2rem) 0 4.5rem;
  color: #fff;
  align-items: stretch;
}

.page-hero.page-hero-councils::after {
  height: 72px;
}

.page-hero-councils-inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 3;
  animation: heroFadeIn 0.9s ease-out;
}

.page-hero-councils-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-hero-councils-eyebrow i {
  color: var(--secondary);
}

.page-hero.page-hero-councils h1 {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
}

.page-hero.page-hero-councils p {
  margin-inline: 0;
  margin-left: 0;
  margin-right: 0;
}

.page-hero.page-hero-councils .page-hero-councils-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #f5dc8a;
  margin: 0 0 1rem;
  line-height: 1.65;
}

.page-hero.page-hero-councils .page-hero-councils-desc {
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.94);
  max-width: 720px;
  margin: 0 0 1.5rem;
  font-weight: 500;
}

.page-hero-councils-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-hero-councils-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  transition: var(--transition);
}

.page-hero-councils-nav a:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(219, 163, 39, 0.55);
  color: #fff;
}

.councils-intro {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.councils-intro-card {
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.4rem;
  border-top: 3px solid var(--secondary);
  transition: var(--transition);
}

.councils-intro-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 85, 131, 0.12);
  color: var(--teal);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.councils-intro-card h3 {
  color: var(--teal-dark);
  font-size: 1.08rem;
  margin-bottom: 0.5rem;
}

.councils-intro-card p {
  color: var(--gray);
  font-size: 0.94rem;
  line-height: 1.8;
  margin: 0;
}

.councils-intro-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(35, 85, 131, 0.3);
}

.councils-section-alt {
  background: var(--light-gray);
}

.councils-section-alt .about-identity-panel {
  margin-bottom: 1.75rem;
}

.council-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.25rem;
}

.council-jump a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--light-border);
  color: var(--teal-dark);
  font-size: 0.86rem;
  font-weight: 700;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.council-jump a i {
  color: var(--teal);
  font-size: 0.82rem;
}

.council-jump a:hover {
  border-color: rgba(35, 85, 131, 0.4);
  background: rgba(35, 85, 131, 0.08);
  color: var(--teal-dark);
}

#council-services-panel .tx-chip {
  max-width: 100%;
  white-space: normal;
  line-height: 1.55;
}

#council-services .mf-footer-panel .btn-primary {
  background: var(--gold-gradient);
  color: #050a30;
  box-shadow: 0 10px 22px -10px rgba(219, 163, 39, 0.65);
}

#council-services .mf-footer-panel .btn-secondary {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

@media (max-width: 991px) {
  .page-hero-councils-inner {
    padding: 0 1.25rem;
  }

  .councils-intro {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .page-hero.page-hero-councils {
    padding: calc(38px + 78px + 1.25rem) 0 3.5rem;
  }

  #council-services-panel .tx-chips {
    flex-direction: column;
    align-items: stretch;
  }
}