/* CLEAN UIUX FIX — scoped only */

/* Header branding */
.site-header .brand-name,
header .brand-name,
.logo-title{
  font-size: clamp(15px,1.2vw,18px)!important;
  font-weight: 950!important;
  line-height:1!important;
}

.site-header .brand-subtitle,
header .brand-subtitle,
.logo-subtitle{
  display:block!important;
  font-size: clamp(9px,.7vw,11px)!important;
  margin-top:3px!important;
  color:#64746b!important;
  line-height:1.1!important;
  opacity:1!important;
}

/* Hero title only */
.tmk-hero-premium-title,
.tmk-hero-brand-title,
.hero h1{
  font-size: clamp(2rem,4vw,3.8rem)!important;
  line-height:1.14!important;
  max-width:720px!important;
  letter-spacing:-0.03em!important;
}

/* Mobile hero */
@media (max-width:760px){

  .tmk-hero-premium-title,
  .tmk-hero-brand-title,
  .hero h1{
    font-size: clamp(1.8rem,7vw,2.45rem)!important;
    line-height:1.2!important;
  }

  /* chips */
  .tmk-hero-benefits{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .tmk-hero-benefits span{
    min-height:38px!important;
    font-size:.69rem!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:nowrap!important;
  }

  /* CTA buttons horizontal */
  .hero .cta-group,
  .hero .hero-actions,
  .hero .hero-buttons,
  .hero .buttons{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
  }

  .hero .cta-group a,
  .hero .hero-actions a,
  .hero .hero-buttons a,
  .hero .buttons a,
  .hero .cta-group button,
  .hero .hero-actions button,
  .hero .hero-buttons button,
  .hero .buttons button{
    width:100%!important;
    min-height:48px!important;
    font-size:.8rem!important;
    max-width:none!important;
    white-space:nowrap!important;
  }
}

/* ════ FINAL OVERRIDE: nav-wordmark-sub always visible ════ */
.nav-wordmark-sub,
.navbar .nav-wordmark-sub,
header .nav-wordmark-sub {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
  overflow: visible !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--text-light, #8A8980) !important;
  white-space: nowrap !important;
}

/* ════════════════════════════════════════════
   PATH CARDS — Desktop: 3-col grid
   Mobile: vertical column + show description
   لا تغيير في المحتوى أو الأقسام
════════════════════════════════════════════ */

/* ── Desktop: شبكة 3 أعمدة ── */
@media (min-width: 640px) {
  .path-cards-v2 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* كل بطاقة تصبح عمودية بدل أفقية على الكمبيوتر */
  .pv2-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 20px !important;
  }

  /* [REMOVED - replaced by Sprint-15-clean] */

  /* الوصف يظهر كاملاً */
  .pv2-desc {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
    line-height: 1.55 !important;
  }

  /* الأيقونة أكبر قليلاً */
  .pv2-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
  }

  /* hover: رفع عمودي بدل أفقي */
  .pv2-card:hover {
    transform: translateY(-3px) !important;
  }
}

/* ── Mobile: عمودي + يظهر الشرح ── */
@media (max-width: 639px) {
  .path-cards-v2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-width: 100% !important;
  }

  /* أفقي على الجوال: أيقونة + عنوان + سهم */
  .pv2-card {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px !important;
  }

  /* body يحتوي العنوان والشرح */
  .pv2-body {
    flex: 1 !important;
  }

  /* الشرح يظهر على الجوال */
  .pv2-desc {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 12.5px !important;
    color: var(--text-muted) !important;
    line-height: 1.5 !important;
    margin-top: 3px !important;
  }

  /* [REMOVED - replaced by Sprint-15-clean] */

  /* الأيقونة حجم الجوال */
  .pv2-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
  }
}

/* ════ FIX: pv2-card ::before لا يغطي النصوص عند hover ════ */
.pv2-card { isolation: isolate; }
.pv2-card::before { z-index: 0; }
.pv2-icon, .pv2-body, .pv2-title, .pv2-desc, .pv2-arrow { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════
   LEARNING PATHS v2 — Compact Premium Cards
   Desktop: 2×2 grid | Mobile: full-width stack
   Chips أفقية بدل القائمة العمودية
════════════════════════════════════════════════════════ */

/* ── Grid: 2×2 على الكمبيوتر ── */
.lp-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* ── البطاقة الأساسية ── */
.lpv2-card {
  background: var(--white, #fff);
  border: 1.5px solid var(--border, rgba(0,0,0,.09));
  border-radius: 18px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow .2s ease, transform .2s ease;
  position: relative;
  overflow: hidden;
}
.lpv2-card:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,.10);
  transform: translateY(-2px);
}

/* ── ألوان البطاقات ── */
.lpv2-read  { border-color: rgba(26,95,165,.22); }
.lpv2-write { border-color: rgba(139,50,24,.22); }
.lpv2-math  { border-color: rgba(168,98,16,.22); }
.lpv2-cog   { border-color: rgba(77,68,170,.22); }

/* ── Header row: أيقونة + عنوان + badge ── */
.lpv2-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lpv2-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.lpv2-read  .lpv2-icon { background: var(--blue-light,  #E8F1FB); }
.lpv2-write .lpv2-icon { background: var(--coral-light, #FAE9E4); }
.lpv2-math  .lpv2-icon { background: var(--amber-light, #FDF3E0); }
.lpv2-cog   .lpv2-icon { background: var(--purple-light,#EEECFD); }

.lpv2-meta { flex: 1; min-width: 0; }
.lpv2-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary, #1A1A17);
  letter-spacing: -.2px;
  margin-bottom: 2px;
}
.lpv2-read  .lpv2-title { color: var(--blue,  #1A5FA5); }
.lpv2-write .lpv2-title { color: var(--coral, #8B3218); }
.lpv2-math  .lpv2-title { color: var(--amber, #A86210); }
.lpv2-cog   .lpv2-title { color: var(--purple,#4D44AA); }

.lpv2-desc {
  font-size: 12px;
  color: var(--text-muted, #5A5955);
  line-height: 1.5;
}

/* ── Badge عدد الخطوات ── */
.lpv2-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
}
.lpv2-read  .lpv2-badge { background: var(--blue-light,  #E8F1FB); color: var(--blue,  #1A5FA5); }
.lpv2-write .lpv2-badge { background: var(--coral-light, #FAE9E4); color: var(--coral, #8B3218); }
.lpv2-math  .lpv2-badge { background: var(--amber-light, #FDF3E0); color: var(--amber, #A86210); }
.lpv2-cog   .lpv2-badge { background: var(--purple-light,#EEECFD); color: var(--purple,#4D44AA); }

/* ── Chips: أفقية تكسر للصف التالي ── */
.lpv2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lpv2-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #1A1A17);
  background: var(--gray-50, #F7F6F2);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 100px;
  padding: 4px 10px 4px 6px;
  white-space: nowrap;
  transition: background .15s;
}
.lpv2-chip:hover { background: var(--gray-100, #EEEDE8); }

.lpv2-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}
.lpv2-read  .lpv2-num { background: var(--blue-light,  #E8F1FB); color: var(--blue,  #1A5FA5); }
.lpv2-write .lpv2-num { background: var(--coral-light, #FAE9E4); color: var(--coral, #8B3218); }
.lpv2-math  .lpv2-num { background: var(--amber-light, #FDF3E0); color: var(--amber, #A86210); }
.lpv2-cog   .lpv2-num { background: var(--purple-light,#EEECFD); color: var(--purple,#4D44AA); }

/* ── Dark Mode ── */
body.dark .lpv2-card {
  background: var(--white, #181815);
  border-color: var(--border, rgba(255,255,255,.09));
}
body.dark .lpv2-title { color: var(--text-primary, #EEECe4) !important; }
body.dark .lpv2-read  .lpv2-title { color: #60A5FA !important; }
body.dark .lpv2-write .lpv2-title { color: #FB7185 !important; }
body.dark .lpv2-math  .lpv2-title { color: #FBBF24 !important; }
body.dark .lpv2-cog   .lpv2-title { color: #A78BFA !important; }
body.dark .lpv2-desc  { color: var(--text-muted, #A8A79F); }
body.dark .lpv2-chip  { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); color: var(--text-primary, #EEECe4); }
body.dark .lpv2-chip:hover { background: rgba(255,255,255,.1); }
body.dark .lpv2-read  .lpv2-icon { background: rgba(26,95,165,.18); }
body.dark .lpv2-write .lpv2-icon { background: rgba(139,50,24,.18); }
body.dark .lpv2-math  .lpv2-icon { background: rgba(168,98,16,.18); }
body.dark .lpv2-cog   .lpv2-icon { background: rgba(77,68,170,.18); }
body.dark .lpv2-read  .lpv2-badge { background: rgba(26,95,165,.18);  color: #60A5FA; }
body.dark .lpv2-write .lpv2-badge { background: rgba(139,50,24,.18);  color: #FB7185; }
body.dark .lpv2-math  .lpv2-badge { background: rgba(168,98,16,.18);  color: #FBBF24; }
body.dark .lpv2-cog   .lpv2-badge { background: rgba(77,68,170,.18);  color: #A78BFA; }

/* ── Tablet: 2-col يبقى ── */
@media (max-width: 900px) {
  .lp-grid-v2 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ── Mobile: عمود واحد ── */
@media (max-width: 600px) {
  .lp-grid-v2 { grid-template-columns: 1fr; gap: 10px; }
  .lpv2-card { padding: 16px 18px; gap: 12px; }
  .lpv2-icon { width: 40px; height: 40px; font-size: 20px; border-radius: 10px; }
  .lpv2-title { font-size: 14px; }
  .lpv2-desc  { font-size: 11.5px; }
  .lpv2-chip  { font-size: 11.5px; padding: 4px 9px 4px 5px; }
  .lpv2-num   { width: 16px; height: 16px; font-size: 9px; }
}

/* ════════════════════════════════════════════════════════
   LP PREVIEW CARDS — Homepage (no chips, clean preview)
════════════════════════════════════════════════════════ */
.lp-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .lp-preview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .lp-preview-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }

.lp-preview-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  background: var(--white, #fff);
  border: 1.5px solid var(--border, rgba(0,0,0,.09));
  border-radius: 16px;
  text-decoration: none;
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
}
.lp-preview-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}

.lp-pc-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.lp-pc-title {
  font-size: 14px; font-weight: 800;
  letter-spacing: -.2px; margin-bottom: 4px;
}
.lp-pc-desc {
  font-size: 12px;
  color: var(--text-muted, #5A5955);
  line-height: 1.55;
  flex: 1;
}
.lp-pc-badge {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 800;
  padding: 3px 10px; border-radius: 100px;
  align-self: flex-start; margin-top: 4px;
}

/* Colours per path */
.lp-pc-read  { border-color: rgba(26,95,165,.22); }
.lp-pc-read  .lp-pc-icon  { background: var(--blue-light,  #E8F1FB); }
.lp-pc-read  .lp-pc-title { color: var(--blue,  #1A5FA5); }
.lp-pc-read  .lp-pc-badge { background: var(--blue-light,  #E8F1FB); color: var(--blue,  #1A5FA5); }
.lp-pc-read:hover          { border-color: rgba(26,95,165,.4); }

.lp-pc-write { border-color: rgba(139,50,24,.22); }
.lp-pc-write .lp-pc-icon  { background: var(--coral-light, #FAE9E4); }
.lp-pc-write .lp-pc-title { color: var(--coral, #8B3218); }
.lp-pc-write .lp-pc-badge { background: var(--coral-light, #FAE9E4); color: var(--coral, #8B3218); }
.lp-pc-write:hover         { border-color: rgba(139,50,24,.4); }

.lp-pc-math  { border-color: rgba(168,98,16,.22); }
.lp-pc-math  .lp-pc-icon  { background: var(--amber-light, #FDF3E0); }
.lp-pc-math  .lp-pc-title { color: var(--amber, #A86210); }
.lp-pc-math  .lp-pc-badge { background: var(--amber-light, #FDF3E0); color: var(--amber, #A86210); }
.lp-pc-math:hover          { border-color: rgba(168,98,16,.4); }

.lp-pc-cog   { border-color: rgba(77,68,170,.22); }
.lp-pc-cog   .lp-pc-icon  { background: var(--purple-light,#EEECFD); }
.lp-pc-cog   .lp-pc-title { color: var(--purple, #4D44AA); }
.lp-pc-cog   .lp-pc-badge { background: var(--purple-light,#EEECFD); color: var(--purple, #4D44AA); }
.lp-pc-cog:hover           { border-color: rgba(77,68,170,.4); }

/* Dark mode */
body.dark .lp-preview-card { background: var(--white,#181815); border-color: var(--border,rgba(255,255,255,.09)); }
body.dark .lp-pc-read  .lp-pc-title { color: #60A5FA; }
body.dark .lp-pc-write .lp-pc-title { color: #FB7185; }
body.dark .lp-pc-math  .lp-pc-title { color: #FBBF24; }
body.dark .lp-pc-cog   .lp-pc-title { color: #A78BFA; }
body.dark .lp-pc-read  .lp-pc-icon  { background: rgba(26,95,165,.18); }
body.dark .lp-pc-write .lp-pc-icon  { background: rgba(139,50,24,.18); }
body.dark .lp-pc-math  .lp-pc-icon  { background: rgba(168,98,16,.18); }
body.dark .lp-pc-cog   .lp-pc-icon  { background: rgba(77,68,170,.18); }
body.dark .lp-pc-read  .lp-pc-badge { background: rgba(26,95,165,.18); color: #60A5FA; }
body.dark .lp-pc-write .lp-pc-badge { background: rgba(139,50,24,.18); color: #FB7185; }
body.dark .lp-pc-math  .lp-pc-badge { background: rgba(168,98,16,.18); color: #FBBF24; }
body.dark .lp-pc-cog   .lp-pc-badge { background: rgba(77,68,170,.18); color: #A78BFA; }
body.dark .lp-pc-desc { color: var(--text-muted, #A8A79F); }

/* Mobile: 2-col compact */
@media (max-width: 520px) {
  .lp-preview-card { padding: 14px 13px; gap: 8px; }
  .lp-pc-icon  { width: 38px; height: 38px; font-size: 19px; border-radius: 10px; }
  .lp-pc-title { font-size: 13px; }
  .lp-pc-desc  { font-size: 11.5px; }
  .lp-pc-badge { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════
   MOBILE NAV DRAWER — Premium RTL Redesign
════════════════════════════════════════════════════════ */
.tmk-mobile-sheet .drawer-panel {
  background: var(--white, #fff) !important;
  border-radius: 20px 20px 0 0 !important;
  padding: 0 !important;
  max-height: 88vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.tmk-mobile-sheet .drawer-panel::-webkit-scrollbar { display: none; }

/* Header */
.tmk-mobile-sheet .drawer-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px 12px !important;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.09)) !important;
  position: sticky; top: 0;
  background: var(--white, #fff);
  z-index: 2;
}
.tmk-mobile-sheet .drawer-head strong {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--text-primary, #1A1A17) !important;
  display: block;
}
.tmk-mobile-sheet .drawer-head span {
  font-size: 11.5px !important;
  color: var(--text-muted, #5A5955) !important;
  display: block;
  margin-top: 2px;
}
.tmk-mobile-sheet .drawer-close {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  background: var(--gray-100, #EEEDE8) !important;
  border: none !important;
  font-size: 16px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  color: var(--text-muted) !important;
  transition: background .15s !important;
  flex-shrink: 0 !important;
}
.tmk-mobile-sheet .drawer-close:hover { background: var(--gray-200, #D4D2C9) !important; }

/* Section groups */
.tmk-mobile-sheet .drawer-section {
  padding: 10px 12px 6px !important;
}
.tmk-mobile-sheet .drawer-section-title {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: var(--green, #0F7B5F) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 6px 10px 4px !important;
  display: block !important;
}

/* Nav links — compact RTL pills */
.tmk-mobile-sheet .drawer-section a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--text-primary, #1A1A17) !important;
  text-decoration: none !important;
  transition: background .15s !important;
  margin-bottom: 2px !important;
  text-align: right !important;
  direction: rtl !important;
}
.tmk-mobile-sheet .drawer-section a::after {
  content: '←';
  font-size: 13px;
  color: var(--text-light, #8A8980);
  flex-shrink: 0;
  margin-right: auto;
  padding-right: 8px;
}
.tmk-mobile-sheet .drawer-section a:hover {
  background: var(--green-light, #E6F5EE) !important;
  color: var(--green, #0F7B5F) !important;
}
.tmk-mobile-sheet .drawer-section a:hover::after { color: var(--green, #0F7B5F); }

/* CTA button */
.tmk-mobile-sheet .nav-drawer-cta {
  display: block !important;
  margin: 10px 12px 16px !important;
  padding: 13px !important;
  background: var(--green, #0F7B5F) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background .18s !important;
}
body.dark .tmk-mobile-sheet .nav-drawer-cta { color: #07130B !important; }
.tmk-mobile-sheet .nav-drawer-cta:hover { background: var(--green-hover, #0A6048) !important; }

/* Dark mode drawer */
body.dark .tmk-mobile-sheet .drawer-panel { background: var(--white, #181815) !important; }
body.dark .tmk-mobile-sheet .drawer-head { background: var(--white, #181815) !important; border-bottom-color: var(--border, rgba(255,255,255,.09)) !important; }
body.dark .tmk-mobile-sheet .drawer-head strong { color: var(--text-primary, #EEECe4) !important; }
body.dark .tmk-mobile-sheet .drawer-section a { color: var(--text-primary, #EEECe4) !important; }
body.dark .tmk-mobile-sheet .drawer-section a:hover { background: rgba(34,197,94,.12) !important; color: var(--green, #22C55E) !important; }
body.dark .tmk-mobile-sheet .drawer-close { background: var(--gray-100, #272723) !important; color: var(--text-muted) !important; }

/* ════════════════════════════════════════════════════════
   LP PREVIEW CARDS v2 — inline CTA + unified design
════════════════════════════════════════════════════════ */

/* ── top row: icon + steps badge ── */
.lp-pc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.lp-pc-steps {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.lp-pc-read  .lp-pc-steps { background:var(--blue-light,#E8F1FB);  color:var(--blue,#1A5FA5); }
.lp-pc-write .lp-pc-steps { background:var(--coral-light,#FAE9E4); color:var(--coral,#8B3218); }
.lp-pc-math  .lp-pc-steps { background:var(--amber-light,#FDF3E0); color:var(--amber,#A86210); }
.lp-pc-cog   .lp-pc-steps { background:var(--purple-light,#EEECFD);color:var(--purple,#4D44AA); }

body.dark .lp-pc-read  .lp-pc-steps { background:rgba(26,95,165,.2);  color:#60A5FA; }
body.dark .lp-pc-write .lp-pc-steps { background:rgba(139,50,24,.2);  color:#FB7185; }
body.dark .lp-pc-math  .lp-pc-steps { background:rgba(168,98,16,.2);  color:#FBBF24; }
body.dark .lp-pc-cog   .lp-pc-steps { background:rgba(77,68,170,.2);  color:#A78BFA; }

/* ── inline CTA ── */
.lp-pc-cta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
  margin-top: 12px;
  opacity: .7;
  transition: opacity .18s, gap .18s;
}
.lp-pc-cta span { font-size: 14px; }
.lp-preview-card:hover .lp-pc-cta { opacity: 1; gap: 8px; }

.lp-pc-read  .lp-pc-cta { color: var(--blue,#1A5FA5); }
.lp-pc-write .lp-pc-cta { color: var(--coral,#8B3218); }
.lp-pc-math  .lp-pc-cta { color: var(--amber,#A86210); }
.lp-pc-cog   .lp-pc-cta { color: var(--purple,#4D44AA); }

body.dark .lp-pc-read  .lp-pc-cta { color:#60A5FA; }
body.dark .lp-pc-write .lp-pc-cta { color:#FB7185; }
body.dark .lp-pc-math  .lp-pc-cta { color:#FBBF24; }
body.dark .lp-pc-cog   .lp-pc-cta { color:#A78BFA; }

/* remove old lp-pc-badge if still present */
.lp-pc-badge { display: none !important; }

/* ════════════════════════════════════════════════════════
   UNIFIED DESIGN LANGUAGE — Section rhythm
════════════════════════════════════════════════════════ */

/* ── Alternating bg rhythm — light sections ── */
.hero               { background: linear-gradient(155deg, var(--green-xlight,#F2FAF6) 0%, var(--white,#fff) 55%); }
.assessment-focus-section { background: var(--gray-50, #F7F6F2); }
.about-section      { background: var(--white, #fff); }
.types-section      { background: var(--gray-50, #F7F6F2); }
.paths-section      { background: var(--white, #fff); }
.learning-section   { background: var(--gray-50, #F7F6F2); }
.activities-section { background: var(--white, #fff); }

/* dark mode backgrounds */
body.dark .assessment-focus-section,
body.dark .types-section,
body.dark .learning-section { background: var(--gray-50, #1E1E1B); }
body.dark .about-section,
body.dark .paths-section,
body.dark .activities-section { background: var(--white, #181815); }

/* ── section dividers — subtle ── */
.about-section,
.types-section,
.paths-section,
.learning-section,
.activities-section {
  border-top: 1px solid var(--border, rgba(0,0,0,.06));
}
body.dark .about-section,
body.dark .types-section,
body.dark .paths-section,
body.dark .learning-section,
body.dark .activities-section {
  border-top-color: var(--border, rgba(255,255,255,.06));
}

/* ── Consistent section padding ── */
.about-section, .types-section, .paths-section,
.learning-section, .activities-section,
.assessment-focus-section { padding: 36px 0; }
.faq-section, .ask-section { padding: 32px 0; }
.diagnostic-banner { padding: 32px 0; }

/* ════════════════════════════════════════════════════════
   ASSESSMENT SECTION — tighter & cleaner
════════════════════════════════════════════════════════ */
.assessment-focus-card {
  padding: 24px 28px !important;
  border-radius: 20px !important;
}
@media(max-width:640px){
  .assessment-focus-card { padding: 18px 18px !important; }
}

/* ════════════════════════════════════════════════════════
   ACTIVITIES SECTION — consistent grid
════════════════════════════════════════════════════════ */
.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) !important;
  gap: 10px !important;
}
.activity-card {
  padding: 14px 12px !important;
  border-radius: 14px !important;
  transition: transform .18s, box-shadow .18s, border-color .18s !important;
}
.activity-card:hover { transform: translateY(-2px) !important; }

/* ════════════════════════════════════════════════════════
   RESPONSIVE — global tightening
════════════════════════════════════════════════════════ */
@media(max-width:640px) {
  .lp-preview-grid { grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
  .lp-preview-card { padding: 14px 13px !important; }
  .lp-pc-top { margin-bottom: 7px !important; }
  .lp-pc-title { font-size: 13px !important; }
  .lp-pc-desc  { font-size: 11.5px !important; }
  .lp-pc-cta   { font-size: 11.5px !important; margin-top: 9px !important; }
  .activities-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .section-header { margin-bottom: 18px !important; }
}

/* ════════════════════════════════════════════════════════
   ERS — Educational Resources Strip
   يستبدل VIDEOS section — تصميم مدمج وأنيق
════════════════════════════════════════════════════════ */
.edu-resources-strip {
  padding: 28px 0;
  background: var(--white, #fff);
  border-top: 1px solid var(--border, rgba(0,0,0,.06));
  border-bottom: 1px solid var(--border, rgba(0,0,0,.06));
}
body.dark .edu-resources-strip {
  background: var(--white, #181815);
  border-color: var(--border, rgba(255,255,255,.07));
}

/* header row */
.ers-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ers-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary, #1A1A17);
  letter-spacing: -.2px;
}
body.dark .ers-title { color: var(--text-primary, #EEECe4); }

.ers-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green, #0F7B5F);
  text-decoration: none;
  padding: 7px 14px;
  border: 1.5px solid var(--green-light, #E6F5EE);
  border-radius: 100px;
  background: var(--green-xlight, #F2FAF6);
  transition: all .18s;
  white-space: nowrap;
}
.ers-cta-link:hover {
  background: var(--green-light, #E6F5EE);
  border-color: var(--green, #0F7B5F);
}
body.dark .ers-cta-link {
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.25);
  color: var(--green, #22C55E);
}
.ers-arrow {
  transition: transform .18s;
  display: inline-block;
}
.ers-cta-link:hover .ers-arrow { transform: translateX(-3px); }

/* tracks row */
.ers-tracks {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.ers-tracks::-webkit-scrollbar { display: none; }

.ers-track {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--border, rgba(0,0,0,.09));
  background: var(--gray-50, #F7F6F2);
  text-decoration: none;
  flex-shrink: 0;
  transition: all .18s;
  min-width: 0;
}
.ers-track:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.ers-track-icon { font-size: 20px; flex-shrink: 0; }
.ers-track-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #1A1A17);
  white-space: nowrap;
}
.ers-track-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #5A5955);
  margin-top: 1px;
}

/* track colours */
.ers-track-read  { border-color: rgba(26,95,165,.18); }
.ers-track-read:hover  { border-color: rgba(26,95,165,.4); background: var(--blue-light,  #E8F1FB); }
.ers-track-write { border-color: rgba(139,50,24,.18); }
.ers-track-write:hover { border-color: rgba(139,50,24,.4); background: var(--coral-light, #FAE9E4); }
.ers-track-math  { border-color: rgba(168,98,16,.18); }
.ers-track-math:hover  { border-color: rgba(168,98,16,.4); background: var(--amber-light, #FDF3E0); }
.ers-track-cog   { border-color: rgba(77,68,170,.18); }
.ers-track-cog:hover   { border-color: rgba(77,68,170,.4); background: var(--purple-light,#EEECFD); }
.ers-track-home  { border-color: rgba(15,123,95,.18); }
.ers-track-home:hover  { border-color: rgba(15,123,95,.4); background: var(--green-light, #E6F5EE); }

/* dark mode tracks */
body.dark .ers-track {
  background: var(--gray-50, #1E1E1B);
  border-color: var(--border, rgba(255,255,255,.09));
}
body.dark .ers-track-name { color: var(--text-primary, #EEECe4); }
body.dark .ers-track-count { color: var(--text-muted, #A8A79F); }
body.dark .ers-track-read:hover  { background: rgba(26,95,165,.15); border-color: rgba(26,95,165,.3); }
body.dark .ers-track-write:hover { background: rgba(139,50,24,.15); border-color: rgba(139,50,24,.3); }
body.dark .ers-track-math:hover  { background: rgba(168,98,16,.15); border-color: rgba(168,98,16,.3); }
body.dark .ers-track-cog:hover   { background: rgba(77,68,170,.15); border-color: rgba(77,68,170,.3); }
body.dark .ers-track-home:hover  { background: rgba(15,123,95,.15); border-color: rgba(15,123,95,.3); }

/* mobile */
@media(max-width:540px) {
  .ers-header { margin-bottom: 12px; }
  .ers-title  { font-size: 14px; }
  .ers-track  { padding: 9px 13px; }
  .ers-track-icon { font-size: 18px; }
  .ers-track-name { font-size: 12.5px; }
  .ers-track-count { font-size: 10.5px; }
  .ers-cta-link { font-size: 12.5px; padding: 6px 12px; }
}

/* ════════════════════════════════════════════════════════
   ERS v2 — Educational Resources Strip (redesigned)
   كل track بأيقونة محددة + arrow indicator + URL deep-link
════════════════════════════════════════════════════════ */

/* subtitle */
.ers-subtitle {
  font-size: 12.5px;
  color: var(--text-muted, #5A5955);
  margin-top: 3px;
  line-height: 1.5;
}
body.dark .ers-subtitle { color: var(--text-muted, #A8A79F); }

/* icon wrap per track */
.ers-track-icon-wrap {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  transition: transform .18s;
}
.ers-track:hover .ers-track-icon-wrap { transform: scale(1.1); }

.ers-icon-read  { background: var(--blue-light,  #E8F1FB); }
.ers-icon-write { background: var(--coral-light, #FAE9E4); }
.ers-icon-math  { background: var(--amber-light, #FDF3E0); }
.ers-icon-cog   { background: var(--purple-light,#EEECFD); }
.ers-icon-home  { background: var(--green-light, #E6F5EE); }

body.dark .ers-icon-read  { background: rgba(26,95,165,.18); }
body.dark .ers-icon-write { background: rgba(139,50,24,.18); }
body.dark .ers-icon-math  { background: rgba(168,98,16,.18); }
body.dark .ers-icon-cog   { background: rgba(77,68,170,.18); }
body.dark .ers-icon-home  { background: rgba(15,123,95,.18); }

/* track info */
.ers-track-info { flex: 1; min-width: 0; }

/* arrow indicator */
.ers-track-arrow {
  font-size: 13px;
  opacity: 0;
  color: var(--text-muted);
  flex-shrink: 0;
  transform: translateX(4px);
  transition: opacity .18s, transform .18s;
}
.ers-track:hover .ers-track-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Track border colours on hover */
.ers-track-read:hover  { border-color: rgba(26,95,165,.35) !important; background: var(--blue-light,  #E8F1FB) !important; }
.ers-track-write:hover { border-color: rgba(139,50,24,.35) !important; background: var(--coral-light, #FAE9E4) !important; }
.ers-track-math:hover  { border-color: rgba(168,98,16,.35) !important; background: var(--amber-light, #FDF3E0) !important; }
.ers-track-cog:hover   { border-color: rgba(77,68,170,.35)  !important; background: var(--purple-light,#EEECFD) !important; }
.ers-track-home:hover  { border-color: rgba(15,123,95,.35)  !important; background: var(--green-light, #E6F5EE) !important; }

/* title em */
.ers-title em { color: var(--green, #0F7B5F); font-style: normal; }
body.dark .ers-title em { color: var(--green, #22C55E); }

/* Mobile: slightly smaller */
@media(max-width:480px) {
  .ers-track-icon-wrap { width: 36px; height: 36px; font-size: 18px; border-radius: 9px; }
  .ers-subtitle { display: none; }
}

/* ════════════════════════════════════════════════════════
   Sprint-13 Micro-UX Improvements
   T2 · T3 · T4 · T5 — Cards, Icons, Hover, Alignment
════════════════════════════════════════════════════════ */

/* ── T2: ERS section-header centered (override flex) ── */
.edu-resources-strip .section-header {
  text-align: center !important;
  margin-bottom: 12px !important;
}
.ers-view-all-wrap {
  text-align: center;
  margin-bottom: 16px;
}

/* ── T3+T4+T5: activity-card — arrow on hover ── */
.activity-card { position: relative; overflow: hidden; }
.activity-card::after {
  content: '↗';
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 13px;
  color: var(--green, #0F7B5F);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s, transform .18s;
  line-height: 1;
}
.activity-card:hover::after {
  opacity: 1;
  transform: translateY(0);
}
/* path-specific hover colors for activity-cards */
.activity-card.path-read:hover  { border-color: var(--blue,  #1A5FA5) !important; background: var(--blue-light,  #E8F1FB) !important; }
.activity-card.path-write:hover { border-color: var(--coral, #8B3218) !important; background: var(--coral-light, #FAE9E4) !important; }
.activity-card.path-math:hover  { border-color: var(--amber, #A86210) !important; background: var(--amber-light, #FDF3E0) !important; }
.activity-card.path-cog:hover   { border-color: var(--purple,#4D44AA) !important; background: var(--purple-light,#EEECFD) !important; }

body.dark .activity-card.path-read:hover  { background: rgba(26,95,165,.12) !important; }
body.dark .activity-card.path-write:hover { background: rgba(139,50,24,.12) !important; }
body.dark .activity-card.path-math:hover  { background: rgba(168,98,16,.12) !important; }
body.dark .activity-card.path-cog:hover   { background: rgba(77,68,170,.12)  !important; }

/* ── T3+T4+T5: type-card — subtle path hover ── */
.type-card { position: relative; overflow: hidden; }
.type-card::after {
  content: '↗';
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 13px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s, transform .18s;
  line-height: 1;
}
.type-card:hover::after { opacity: 1; transform: translateY(0); }
.t-dev:hover  { background: rgba(26,95,165,.04) !important; }
.t-dev::after { color: var(--blue, #1A5FA5); }
.t-acad:hover { background: rgba(139,50,24,.04) !important; }
.t-acad::after{ color: var(--coral, #8B3218); }

/* ── T4+T5: info-card (about tabs) — arrow ── */
.info-card { position: relative; }
.info-card::after {
  content: '↗';
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 12px;
  color: var(--green, #0F7B5F);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .18s, transform .18s;
}
.info-card:hover::after { opacity: 1; transform: translateY(0); }
.info-card:hover { background: var(--green-xlight, #F2FAF6) !important; }
body.dark .info-card:hover { background: rgba(34,197,94,.07) !important; }

/* ── T5: kac-item hover — subtle ── */
.kac-item:not(.open):hover {
  border-color: rgba(15,123,95,.22) !important;
}
.kac-trigger:hover { background: var(--gray-50, #F7F6F2) !important; }

/* ── T5: assessment card hover ── */
.assessment-focus-card { transition: box-shadow .2s, transform .2s !important; }
.assessment-focus-card:hover {
  box-shadow: 0 8px 28px rgba(15,123,95,.12) !important;
  transform: translateY(-2px) !important;
}

/* ── T5: quick-card arrow ── */
.quick-card { position: relative; overflow: hidden; }
.quick-card::after {
  content: '↗';
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 12px;
  color: var(--green, #0F7B5F);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .18s, transform .18s;
}
.quick-card:hover::after { opacity: 1; transform: translateY(0); }

/* ── T3: pv2-card icons — add colored background if missing ── */
.pv2-icon {
  background: var(--green-light, #E6F5EE) !important; /* fallback */
  transition: transform .18s !important;
}
.pv2-card:hover .pv2-icon { transform: scale(1.08) !important; }
/* override per card */
.pv2-parent .pv2-icon { background: var(--green-light,  #E6F5EE) !important; }
.pv2-student .pv2-icon { background: var(--blue-light,   #E8F1FB) !important; }
.pv2-teacher .pv2-icon { background: var(--amber-light,  #FDF3E0) !important; }
.pv2-therapy .pv2-icon { background: var(--purple-light, #EEECFD) !important; }
.pv2-library .pv2-icon { background: var(--teal-light,   #E0F4F3) !important; }

body.dark .pv2-parent .pv2-icon { background: rgba(34,197,94,.14) !important; }
body.dark .pv2-student .pv2-icon { background: rgba(26,95,165,.18) !important; }
body.dark .pv2-teacher .pv2-icon { background: rgba(168,98,16,.18) !important; }
body.dark .pv2-therapy .pv2-icon { background: rgba(77,68,170,.18) !important; }
body.dark .pv2-library .pv2-icon { background: rgba(13,140,135,.18) !important; }

/* ── T4: lp-preview-card icon scale on hover ── */
.lp-preview-card:hover .lp-pc-icon { transform: scale(1.08); }
.lp-pc-icon { transition: transform .18s; }

/* ── RTL: arrows في RTL لا تحتاج mirror لأن ↗ موجّه صح ── */


/* ════════════════════════════════════════════════════════
   CARD SYSTEM v2 — Unified Professional Hover + Arrow
   تمكَّن — Sprint 14
   Clickable: smart hover + arrow ↗ (diagonal motion)
   Static: subtle hover only — NO arrow
════════════════════════════════════════════════════════ */

/* ── RESET: إلغاء السهم من type-card (ثابتة — غير قابلة للنقر) ── */
.type-card::after { content: none !important; display: none !important; }
.type-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.07) !important;
  border-color: var(--border, rgba(0,0,0,.12)) !important;
  background: var(--white, #fff) !important;
}
body.dark .type-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.35) !important; }

/* ── UNIFIED ARROW SYSTEM: بطاقات تفاعلية فقط ── */

/* مواصفات السهم الموحدة */
.activity-card::after,
.info-card::after,
.quick-card::after {
  content: '↗';
  position: absolute;
  top: 14px !important;    /* padding مناسب من الأعلى */
  left: 14px !important;   /* padding مناسب من اليسار */
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  /* حركة: من أسفل-يمين → أعلى-يسار (diagonal احترافي) */
  transform: translate(4px, 4px);
  transition: opacity .22s ease, transform .22s ease;
}

/* ظهور السهم عند hover */
.activity-card:hover::after,
.info-card:hover::after,
.quick-card:hover::after {
  opacity: 1;
  transform: translate(0, 0);
}

/* ألوان السهم حسب المسار */
.activity-card::after  { color: var(--green, #0F7B5F); }
.info-card::after      { color: var(--green, #0F7B5F); }
.quick-card::after     { color: var(--green, #0F7B5F); }

/* path-specific arrow colors */
.activity-card.path-read::after  { color: var(--blue,   #1A5FA5); }
.activity-card.path-write::after { color: var(--coral,  #8B3218); }
.activity-card.path-math::after  { color: var(--amber,  #A86210); }
.activity-card.path-cog::after   { color: var(--purple, #4D44AA); }

/* [REMOVED - replaced by Sprint-15-clean] */
/* [REMOVED - replaced by Sprint-15-clean] */

/* ── ers-track: السهم موجود في HTML (ers-track-arrow) — تحسين ── */
.ers-track-arrow {
  transition: opacity .22s ease, transform .22s ease !important;
  transform: translate(4px, -4px) !important; /* starts offset */
}
.ers-track:hover .ers-track-arrow {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* ── lp-pc-cta: سهم في النص (↗ مكتوب) — تحسين حركة البطاقة ── */
.lp-preview-card .lp-pc-cta span {
  display: inline-block;
  transition: transform .22s ease !important;
}
.lp-preview-card:hover .lp-pc-cta span {
  transform: translate(2px, -2px) !important;
}

/* ── HOVER STATES: بطاقات تفاعلية ── */

/* activity-card: hover حسب المسار */
.activity-card {
  transition: transform .2s ease, box-shadow .2s ease,
              border-color .2s ease, background .2s ease !important;
}
.activity-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.09) !important;
}
/* بدون تغيير لوني — اللون يأتي من path classes السابقة */
.activity-card.path-read:hover  { border-color: var(--blue,  #1A5FA5) !important; background: rgba(26,95,165,.05)  !important; }
.activity-card.path-write:hover { border-color: var(--coral, #8B3218) !important; background: rgba(139,50,24,.05)  !important; }
.activity-card.path-math:hover  { border-color: var(--amber, #A86210) !important; background: rgba(168,98,16,.05)  !important; }
.activity-card.path-cog:hover   { border-color: var(--purple,#4D44AA) !important; background: rgba(77,68,170,.05)  !important; }
body.dark .activity-card.path-read:hover  { background: rgba(26,95,165,.1) !important; }
body.dark .activity-card.path-write:hover { background: rgba(139,50,24,.1) !important; }
body.dark .activity-card.path-math:hover  { background: rgba(168,98,16,.1) !important; }
body.dark .activity-card.path-cog:hover   { background: rgba(77,68,170,.1) !important; }

/* pv2-card hover */
.pv2-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.pv2-card:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 22px rgba(0,0,0,.10) !important; }

/* ers-track hover */
.ers-track {
  transition: transform .2s ease, box-shadow .2s ease,
              border-color .2s ease, background .2s ease !important;
}
.ers-track:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 14px rgba(0,0,0,.09) !important; }

/* info-card hover */
.info-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease !important;
}
.info-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.08) !important;
  border-color: var(--green, #0F7B5F) !important;
  background: var(--green-xlight, #F2FAF6) !important;
}
body.dark .info-card:hover { background: rgba(34,197,94,.07) !important; }

/* quick-card hover */
.quick-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.quick-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.09) !important;
  border-color: rgba(15,123,95,.3) !important;
}

/* ── HOVER STATES: بطاقات ثابتة (subtle only) ── */
.type-card {
  transition: transform .2s ease, box-shadow .2s ease !important;
}
/* لا سهم، لا تغيير لون قوي — فقط رفع خفيف */
.t-dev:hover, .t-acad:hover {
  background: var(--white, #fff) !important;
  border-color: var(--border, rgba(0,0,0,.09)) !important;
}

/* kac-item: hover خفيف جداً — accordion فقط */
.kac-item { transition: border-color .18s ease !important; }
.kac-item:not(.open):hover { border-color: rgba(15,123,95,.2) !important; }

/* assessment-focus-card: تفاعلية (CTA) */
.assessment-focus-card {
  transition: transform .22s ease, box-shadow .22s ease !important;
  cursor: default;
}

/* ── GLOBAL: overflow hidden لكل البطاقات ذات ::after ── */
.activity-card, .info-card, .quick-card {
  overflow: hidden !important;
  position: relative !important;
}

/* ── Mobile: تعطيل بعض تأثيرات hover على الجوال (touch devices) ── */
@media (hover: none) {
  .activity-card:hover,
  .pv2-card:hover,
  .ers-track:hover,
  .info-card:hover,
  .quick-card:hover { transform: none !important; }
  .activity-card::after,
  .info-card::after,
  .quick-card::after { display: none !important; }
}

/* ════════════════════════════════════════════════════════
   Sprint 15 — pv2-card arrow refinement + type-card fix
   تمكَّن
════════════════════════════════════════════════════════ */

/* ── pv2-arrow: يظهر فقط عند hover بحركة diagonal ── */
.pv2-arrow {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  /* hidden by default */
  opacity: 0 !important;
  transform: translate(4px, 4px) !important;
  transition: opacity .22s ease, transform .22s ease, background .18s ease !important;
  position: relative;
  z-index: 1;
  margin-top: auto;
  align-self: flex-end;
}

/* Desktop: البطاقة عمودية — السهم يكون أسفل يمين */
@media (min-width: 640px) {
  .pv2-arrow {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    margin: 0 !important;
  }
}

/* Mobile: البطاقة أفقية — السهم على اليمين وسط */
@media (max-width: 639px) {
  .pv2-arrow {
    align-self: center !important;
    transform: translate(4px, 0) !important;
  }
}

/* ظهور عند hover */
.pv2-card:hover .pv2-arrow {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
  background: rgba(255,255,255,.2);
}

/* ألوان السهم حسب المسار */
.pv2-parent:hover .pv2-arrow  { color: var(--green,  #0F7B5F); }
.pv2-student:hover .pv2-arrow { color: var(--blue,   #1A5FA5); }
.pv2-teacher:hover .pv2-arrow { color: var(--amber,  #A86210); }
.pv2-therapy:hover .pv2-arrow { color: var(--purple, #4D44AA); }
.pv2-library:hover .pv2-arrow { color: var(--teal,   #0D8C87); }

body.dark .pv2-parent:hover .pv2-arrow  { color: var(--green,  #22C55E); }
body.dark .pv2-student:hover .pv2-arrow { color: #60A5FA; }
body.dark .pv2-teacher:hover .pv2-arrow { color: #FBBF24; }
body.dark .pv2-therapy:hover .pv2-arrow { color: #A78BFA; }
body.dark .pv2-library:hover .pv2-arrow { color: #22D3EE; }

/* ── pv2-card: position relative لدعم السهم absolute ── */
@media (min-width: 640px) {
  .pv2-card { position: relative !important; overflow: hidden !important; }
}

/* ── Mobile: لا hover arrows على touch ── */
@media (hover: none) {
  .pv2-arrow { display: none !important; }
}

/* ── type-card الثابتة: تأكيد بلا سهم ── */
.type-card::after { content: none !important; display: none !important; }
.type-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.06) !important;
  background: var(--white, #fff) !important;
  border-color: var(--border, rgba(0,0,0,.09)) !important;
}
body.dark .type-card:hover {
  background: var(--white, #181815) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.3) !important;
}

/* ── type-grid: 3 columns عندما البطاقات 3 فقط ── */
.tab-panel:last-child .type-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 640px) {
  .tab-panel:last-child .type-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  .tab-panel:last-child .type-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════
   Sprint-17 — Compact Card System + Mobile-first
   تمكَّن
════════════════════════════════════════════════════════ */

/* ── 1. type-card: compact horizontal header ── */
/* أيقونة + عنوان في نفس السطر → وصف في الأسفل */
.type-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 14px 16px !important;
  gap: 0 !important;
}
.type-icon {
  font-size: 22px !important;
  margin-bottom: 0 !important;
  display: inline !important;
  margin-left: 8px !important;
  vertical-align: middle;
}
.type-name {
  display: inline !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  vertical-align: middle;
  color: var(--text-primary, #1A1A17);
}
body.dark .type-name { color: var(--text-primary, #EEECe4); }

/* رأس البطاقة: أيقونة + عنوان في سطر واحد */
.type-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.type-card-head .type-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 18px !important;
  flex-shrink: 0;
  margin: 0 !important;
}
.type-card-head .type-name {
  display: block !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -.2px;
}
.type-desc {
  font-size: 12.5px !important;
  color: var(--text-muted, #5A5955) !important;
  line-height: 1.55 !important;
  margin-top: 0 !important;
}
body.dark .type-desc { color: var(--text-muted, #A8A79F) !important; }

/* icon bg per category */
.t-dev .type-card-head .type-icon  { background: rgba(15,123,95,.1); }
.t-acad .type-card-head .type-icon { background: rgba(26,95,165,.1); }
body.dark .t-dev .type-card-head .type-icon  { background: rgba(34,197,94,.1); }
body.dark .t-acad .type-card-head .type-icon { background: rgba(60,165,250,.1); }

/* hover: ثابتة — خفيف جداً */
.type-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.07) !important;
  border-color: var(--border, rgba(0,0,0,.09)) !important;
  background: var(--white, #fff) !important;
}
body.dark .type-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.3) !important; }

/* ── 2. activity-card: compact vertical → همزة وعنوان ── */
/* activity-cards صغيرة وعمودية → ممتازة، نُبقيها */
/* لكن نُضغط padding ونحسن الـ icon */
.activity-card {
  padding: 13px 10px !important;
  gap: 5px !important;
}
.ac-icon { font-size: 22px !important; }
.ac-path { font-size: 9.5px !important; font-weight: 700; }
.ac-name { font-size: 12.5px !important; font-weight: 800; }
.ac-desc { font-size: 11px !important; line-height: 1.4 !important; }

/* ── 3. info-card (about section) → compact horizontal ── */
.info-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  flex-direction: row !important; /* أفقي */
}
.info-card-icon {
  font-size: 22px !important;
  flex-shrink: 0;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: var(--green-light, #E6F5EE) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
}
body.dark .info-card-icon { background: rgba(34,197,94,.12) !important; }
.info-card-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  margin-bottom: 3px !important;
  color: var(--text-primary, #1A1A17) !important;
}
body.dark .info-card-title { color: var(--text-primary, #EEECe4) !important; }
.info-card-desc {
  font-size: 12px !important;
  color: var(--text-muted, #5A5955) !important;
  line-height: 1.5 !important;
}
body.dark .info-card-desc { color: var(--text-muted, #A8A79F) !important; }

/* الـ body داخل info-card */
.info-card-body { flex: 1; min-width: 0; }

/* ── 4. Mobile arrows on interactive cards ── */
/* على الجوال: activity-card لها مؤشر تفاعل خفيف دائم */
@media (hover: none) and (pointer: coarse) {
  .activity-card::after {
    content: '↗' !important;
    display: flex !important;
    opacity: 0.18 !important; /* خفيف جداً — مؤشر فقط */
    transform: none !important;
    font-size: 10px !important;
    position: absolute !important;
    top: 7px !important;
    left: 7px !important;
    color: var(--green, #0F7B5F) !important;
  }
  /* path-specific color */
  .activity-card.path-read::after  { color: var(--blue,  #1A5FA5) !important; }
  .activity-card.path-write::after { color: var(--coral, #8B3218) !important; }
  .activity-card.path-math::after  { color: var(--amber, #A86210) !important; }
  .activity-card.path-cog::after   { color: var(--purple,#4D44AA) !important; }
  /* type-cards: لا مؤشر على الجوال */
  .type-card::after { display: none !important; }
  /* pv2-arrow: مؤشر خفيف على الجوال */
  .pv2-arrow { opacity: 0.2 !important; display: flex !important; transform: none !important; }
}

/* ── 5. type-grid: 3 بطاقات أكاديمية في صف ── */
.tab-panel .type-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}
@media (max-width:520px) {
  .tab-panel .type-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .type-card { padding: 12px 14px !important; }
}

/* ── 6. info-card: mobile ── */
@media (max-width:480px) {
  .info-card { padding: 12px 14px !important; gap: 10px !important; }
  .info-card-icon { width: 34px !important; height: 34px !important; font-size: 18px !important; }
  .info-card-title { font-size: 13.5px !important; }
  .info-card-desc { font-size: 11.5px !important; }
}

/* ── 7. activity-grid: 4-col desktop, 2-col mobile ── */
.activities-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 9px !important;
}
@media (max-width:900px) {
  .activities-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width:600px) {
  .activities-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}


/* iOS Safari AI Assistant Zoom Fix */
.ai-assistant input,
.ai-assistant textarea,
.ai-chat-input,
.ai-assistant-panel textarea,
.ai-widget-panel textarea {
  font-size: 16px !important;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .ai-assistant-panel,
  .ai-chat-panel,
  .ai-widget-panel {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: auto !important;
    transform: none !important;
    overflow-x: hidden !important;
  }

  .ai-assistant-panel * {
    max-width: 100%;
    box-sizing: border-box;
  }
}