/* ===========================================================
   HeroZad — طبقة التحديث العصري (Modern UI Layer)
   تُحمّل بعد herozad.css فتطوّر المظهر دون كسر الوظائف
   =========================================================== */

:root{
  --hz-r-lg: 20px;
  --hz-r-md: 14px;
  --hz-r-sm: 10px;
  --hz-shadow-sm: 0 1px 3px rgba(0,54,92,.06), 0 1px 2px rgba(0,54,92,.04);
  --hz-shadow-md: 0 4px 16px rgba(0,54,92,.08);
  --hz-shadow-lg: 0 12px 32px rgba(0,54,92,.12);
  --hz-blue-grad: linear-gradient(135deg, #0060A8 0%, #004878 100%);
  --hz-gold-grad: linear-gradient(135deg, #FBC24D 0%, #E08A00 100%);
}

/* ---------- تحسينات عامة ---------- */
body.herozad{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.herozad .hz-container{ padding-inline: 18px; }
body.herozad .hz-main{ padding-top: 20px; }
body.herozad ::selection{ background: var(--hz-sun-light); color: var(--hz-ink); }

/* ---------- الوصول السريع: أنعم وأصغر ---------- */
body.herozad .hz-quick{ gap: 12px; }
body.herozad .hz-quick-item{ border-radius: var(--hz-r-lg); border-width: 1px; box-shadow: var(--hz-shadow-sm); padding: 16px 12px 14px; }
body.herozad .hz-quick-item:hover{ box-shadow: var(--hz-shadow-md); transform: translateY(-4px); }
body.herozad .hz-quick-ico{ border-radius: 16px; box-shadow: var(--hz-shadow-sm); }

/* ---------- البطاقات: عصرية وأنيقة ---------- */
body.herozad .hz-card{ border-radius: var(--hz-r-lg); border: 1px solid var(--hz-line); box-shadow: var(--hz-shadow-sm); }
body.herozad .hz-card:hover{ box-shadow: var(--hz-shadow-lg); transform: translateY(-4px); border-color: transparent; }
body.herozad .hz-card-media{ aspect-ratio: 16 / 10; }
body.herozad .hz-card-title{ font-size: 17px; letter-spacing: -.01em; }
body.herozad .hz-badge{ backdrop-filter: saturate(1.2); }

/* ---------- الأزرار: أنعم مع تدرّج ---------- */
body.herozad .hz-btn{ border-radius: 12px; transition: transform .12s, box-shadow .15s, filter .15s; }
body.herozad .hz-btn-primary{ background: var(--hz-blue-grad); box-shadow: 0 2px 8px rgba(0,96,168,.25); }
body.herozad .hz-btn-primary:hover{ filter: brightness(1.06); box-shadow: 0 4px 14px rgba(0,96,168,.32); }
body.herozad .hz-btn-sun{ background: var(--hz-gold-grad); box-shadow: 0 2px 8px rgba(224,138,0,.25); }
body.herozad .hz-btn-lg{ border-radius: 14px; }

/* ---------- العناوين ---------- */
body.herozad .hz-h1{ letter-spacing: -.02em; }
body.herozad .hz-h2{ letter-spacing: -.01em; }
body.herozad .hz-section{ margin-top: 34px; }

/* ---------- الهيرو ---------- */
body.herozad .hz-slides{ border-radius: 24px; box-shadow: var(--hz-shadow-md); }
body.herozad .hz-slide.is-image-only{ border-radius: 24px; }

/* ============================================================
   الفلاتر: درج منسدل على الموبايل، شبكة على الديسكتوب
   ============================================================ */
body.herozad .hz-filters{ border-radius: var(--hz-r-lg); box-shadow: var(--hz-shadow-sm); }
body.herozad .hz-filters-toggle{ display: none; }

@media (max-width: 760px){
  /* زر يفتح/يغلق الفلاتر */
  body.herozad .hz-filters-toggle{
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; background: #fff; border: 1px solid var(--hz-line); border-radius: 14px;
    padding: 13px 16px; font-family: var(--hz-font-head); font-weight: 700; font-size: 15px;
    color: var(--hz-teal-dark); cursor: pointer; box-shadow: var(--hz-shadow-sm);
  }
  body.herozad .hz-filters-toggle .hz-ico{ width: 20px; height: 20px; color: var(--hz-sun); transition: transform .2s; }
  body.herozad .hz-filters[data-open="false"] .hz-filters-form{ display: none; }
  body.herozad .hz-filters{ background: transparent; border: 0; box-shadow: none; padding: 0; margin: 14px 0; }
  body.herozad .hz-filters[data-open="true"] .hz-filters-form{ display: block; margin-top: 12px; }
  body.herozad .hz-filters[data-open="true"] .hz-filters-row{
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0;
    background: #fff; border: 1px solid var(--hz-line); border-radius: var(--hz-r-lg);
    padding: 16px; box-shadow: var(--hz-shadow-md);
  }
  body.herozad .hz-filters[data-open="true"] .hz-filter-search,
  body.herozad .hz-filters[data-open="true"] .hz-filters-row > .hz-btn{ grid-column: 1 / -1; }
  body.herozad .hz-filters[data-open="true"] .hz-btn-ghost{ grid-column: 1 / -1; }
}

/* ============================================================
   شريط تنقّل سفلي ثابت للموبايل (Bottom Nav)
   ============================================================ */
body.herozad .hz-bottomnav{ display: none; }

@media (max-width: 760px){
  body.herozad .hz-bottomnav{
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
    background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
    border-top: 1px solid var(--hz-line); box-shadow: 0 -4px 20px rgba(0,54,92,.08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  body.herozad .hz-bottomnav a{
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-decoration: none; color: var(--hz-ink-soft); font-size: 11px; font-weight: 700;
    padding: 4px 2px; border-radius: 12px; transition: color .15s, background .15s;
  }
  body.herozad .hz-bottomnav a .hz-ico{ width: 22px; height: 22px; }
  body.herozad .hz-bottomnav a.is-active, body.herozad .hz-bottomnav a:active{ color: var(--hz-teal); background: var(--hz-teal-soft); }
  /* مساحة أسفل الصفحة حتى لا يغطّي الشريط المحتوى */
  body.herozad.hz-page{ padding-bottom: 76px; }
  body.herozad .hz-footer-bar{ margin-bottom: 64px; }
}

/* ============================================================
   تحسينات موبايل عامة
   ============================================================ */
@media (max-width: 760px){
  body.herozad .hz-container{ padding-inline: 14px; }
  body.herozad .hz-h1{ font-size: 25px; }
  body.herozad .hz-h2{ font-size: 20px; }
  body.herozad .hz-lead{ font-size: 15.5px; }

  /* الوصول السريع: صف من 3 أيقونات مضغوطة أفقيًا */
  body.herozad .hz-quick{ grid-template-columns: repeat(3, 1fr); gap: 10px; }
  body.herozad .hz-quick-item{ padding: 14px 8px 12px; }
  body.herozad .hz-quick-ico{ width: 44px; height: 44px; }
  body.herozad .hz-quick-ico .hz-ico{ width: 22px; height: 22px; }
  body.herozad .hz-quick-title{ font-size: 13.5px; }
  body.herozad .hz-quick-sub{ display: none; }

  /* البطاقات: بطاقتان في الصف على الموبايل */
  body.herozad .hz-grid, body.herozad .hz-grid-3, body.herozad .hz-grid-4{ grid-template-columns: 1fr 1fr; gap: 12px; }
  body.herozad .hz-card-body{ padding: 10px 12px 12px; gap: 5px; }
  body.herozad .hz-card-title{ font-size: 14.5px; line-height: 1.35; }
  body.herozad .hz-card-meta{ font-size: 12px; }
  body.herozad .hz-card-excerpt{ display: none; }
  body.herozad .hz-card .hz-rating .hz-rating-meta small{ display: none; }
  body.herozad .hz-card-media .hz-card-ph .hz-ico{ width: 34px; height: 34px; }

  /* البحث في الرئيسية */
  body.herozad .hz-home-search{ position: sticky; top: 8px; z-index: 20; }

  /* أدوات التقييم/المشاركة: مرتبة عموديًا */
  body.herozad .hz-single-tools{ flex-direction: column; align-items: stretch; gap: 14px; }
  body.herozad .hz-share{ justify-content: flex-start; }
  body.herozad .hz-share-btn{ flex: 1; text-align: center; min-width: 0; }

  /* شريط السوشيال في الفوتر */
  body.herozad .hz-footer-bar .hz-container{ flex-direction: column; text-align: center; gap: 10px; }

  /* الحصص والأيام: أوضح باللمس */
  body.herozad .hz-lesson-num{ width: 34px; height: 34px; font-size: 16px; }
  body.herozad .hz-days{ grid-template-columns: 1fr 1fr; }

  /* التبويبات: تمرير أفقي بدل الالتفاف */
  body.herozad .hz-tabs{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  body.herozad .hz-tabs::-webkit-scrollbar{ display: none; }
  body.herozad .hz-tab{ white-space: nowrap; flex: none; }

  /* رقائق التصنيفات: تمرير أفقي */
  body.herozad .hz-cat-group{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  body.herozad .hz-cat-group::-webkit-scrollbar{ display: none; }
  body.herozad .hz-chip-link{ white-space: nowrap; flex: none; }

  /* أهداف اللعبة/الحقائق */
  body.herozad .hz-facts{ grid-template-columns: 1fr 1fr; }

  /* اللمس: مساحات أكبر */
  body.herozad .hz-btn{ min-height: 44px; }
  body.herozad .hz-fav{ padding: 6px; }
}

/* شاشات صغيرة جدًا */
@media (max-width: 380px){
  body.herozad .hz-quick{ grid-template-columns: repeat(3, 1fr); gap: 8px; }
  body.herozad .hz-grid, body.herozad .hz-grid-3, body.herozad .hz-grid-4{ gap: 10px; }
}

/* لمسة عصرية: حركة ظهور خفيفة للبطاقات */
@media (prefers-reduced-motion: no-preference){
  body.herozad .hz-card{ animation: hz-fade-up .4s ease both; }
  @keyframes hz-fade-up{ from{ opacity: 0; transform: translateY(8px);} to{ opacity: 1; transform: none;} }
}

/* ---------- ملخصات المكتبة (صوت/فيديو) ---------- */
body.herozad .hz-media-summary .hz-h3{ font-family: var(--hz-font-head); font-size: 17px; color: var(--hz-teal-dark); margin: 16px 0 8px; }
body.herozad .hz-media-summary audio{ width: 100%; border-radius: 12px; }
body.herozad .hz-audio, body.herozad .hz-video-summary{ margin-top: 14px; }

/* ---------- الأغلفة التلقائية ---------- */
body.herozad .hz-card-cover{ display: block; width: 100%; height: 100%; }
body.herozad .hz-card-cover svg, body.herozad .hz-auto-cover{ display: block; width: 100%; height: 100%; object-fit: cover; }
body.herozad .hz-cover-auto{ padding: 0; border: 0; overflow: hidden; border-radius: var(--hz-r-lg); background: none; }
body.herozad .hz-cover-auto svg{ display: block; width: 100%; height: auto; }

/* ---------- زر «تصفّح الكتاب كاملًا» في صفحة الكتاب ---------- */
body.herozad .hz-book-cta{ margin: 18px 0 20px; }
body.herozad .hz-book-btn{ width: 100%; justify-content: center; font-size: 18px; padding: 16px 24px; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,96,168,.28); }
body.herozad .hz-book-btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,96,168,.34); }
body.herozad .hz-book-btn .hz-ico{ width: 24px; height: 24px; }
body.herozad .hz-book-cta-note{ margin: 8px 0 0; font-size: 13px; color: var(--hz-ink-soft); text-align: center; }
@media (min-width: 800px){ body.herozad .hz-book-btn{ width: auto; } body.herozad .hz-book-cta-note{ text-align: start; } }

/* ===== أقسام الحصة: الأهداف والميديا والمادة المساعدة (1.8.0) ===== */
body.herozad .hz-lesson-sec{margin:28px 0;padding:22px 24px;border-radius:18px;
  background:var(--hz-teal-soft);border:1px solid rgba(0,96,168,.14)}
body.herozad .hz-lesson-sec .hz-h2{display:flex;align-items:center;gap:10px;
  margin:0 0 14px;font-size:1.22rem;color:var(--hz-teal-dark)}
body.herozad .hz-lesson-sec .hz-h2 svg{width:22px;height:22px;flex:none}
body.herozad .hz-lesson-sec .hz-content{line-height:1.95}
body.herozad .hz-lesson-sec .hz-content p{margin:0 0 10px}
body.herozad .hz-lesson-material{background:var(--hz-sun-pale);border-color:rgba(224,138,0,.22)}
body.herozad .hz-lesson-material .hz-h2{color:#8A5200}
body.herozad .hz-media-note{margin:-6px 0 16px;font-size:.93rem;opacity:.8}
body.herozad .hz-media-grid{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
body.herozad .hz-media-item{display:flex;flex-direction:column;gap:9px;
  text-decoration:none;color:inherit;background:#fff;border-radius:14px;overflow:hidden;
  border:1px solid rgba(21,42,56,.10);transition:transform .18s ease,box-shadow .18s ease}
body.herozad .hz-media-item:hover{transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,72,120,.16)}
body.herozad .hz-media-thumb{display:block;aspect-ratio:16/9;background:var(--hz-teal-dark)}
body.herozad .hz-media-thumb img{width:100%;height:100%;object-fit:cover;display:block}
body.herozad .hz-media-thumb.is-blank{display:flex;align-items:center;justify-content:center}
body.herozad .hz-media-thumb.is-blank svg{width:34px;height:34px;stroke:#fff;opacity:.85}
body.herozad .hz-media-title{padding:0 12px 14px;font-weight:700;font-size:.97rem;line-height:1.5}
@media (max-width:600px){
  body.herozad .hz-lesson-sec{padding:18px 16px;border-radius:14px}
  body.herozad .hz-media-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
}