/* =====================================================================
   LICENSE HOME — صفحة كتاب الرخصة المهنية (/computer-license)
   يعتمد توكنات premium-theme.css (--brand / --pt-* / --glass-*).
   نُقلت الأنماط من داخل الـblade إلى هنا. RTL-first، بلا تغيير منطق.
   ===================================================================== */

.lh-wrap { scroll-padding-top: 100px; }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.lh-hero {
  position: relative; overflow: hidden;
  padding: 6.5rem 0 3rem;
  background:
    radial-gradient(1100px 360px at 70% -6%, rgba(212, 110, 42, .10), transparent 70%),
    linear-gradient(180deg, #FDFEFF 0%, var(--pt-bg, #FAFCFE) 100%);
}

.lh-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .9rem; border-radius: 999px;
  background: var(--brand-soft, rgba(212, 110, 42, .1)); color: var(--brand-hover);
  font-weight: 700; font-size: .85rem;
}
.lh-title { font-weight: 800; color: var(--pt-text); letter-spacing: -.2px; line-height: 1.5; }
.lh-title .g {
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lh-lead { color: var(--pt-text-2); line-height: 1.9; }

/* أزرار */
.lh-btn-gold, .lh-btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.4rem; border-radius: 12px; font-weight: 700; text-decoration: none;
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease, background .22s ease;
}
.lh-btn-gold {
  background: linear-gradient(135deg, #E8A05F 0%, #D46E2A 45%, #B85B21 100%);
  color: #fff !important; box-shadow: 0 8px 20px rgba(212, 110, 42, .35), inset 0 1px 0 rgba(255,255,255,.25);
}
.lh-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(212, 110, 42, .48); color: #fff !important; }
.lh-btn-ghost {
  background: #fff; color: var(--brand-hover) !important; border: 1.5px solid rgba(212, 110, 42, .4);
}
.lh-btn-ghost:hover { background: var(--brand-soft, rgba(212,110,42,.1)); border-color: var(--brand); transform: translateY(-2px); }
.lh-btn-gold:active,
.lh-btn-ghost:active { transform: translateY(0) scale(.985); }
.lh-btn-ghost.is-slate { color: #2b3a5b !important; border-color: rgba(43, 58, 91, .3); }
.lh-btn-ghost.is-slate:hover { background: rgba(43, 58, 91, .06); border-color: #2b3a5b; }

/* مقاس أكبر — لزرّ تحميل الكتاب، فهو الإجراء الأول في الصفحة */
.lh-btn-ghost.is-lg, .lh-btn-gold.is-lg {
  padding: .95rem 1.9rem; font-size: 1.06rem; border-radius: 14px;
}
.lh-btn-ghost.is-lg i, .lh-btn-gold.is-lg i { font-size: 1.45rem; }

/* زرّ تحميل الـPDF بالأحمر المتعارف عليه — النص والحدّ والأيقونة معاً.
   الأيقونة تَرِث لون الزرّ عمداً (لا قاعدة لون خاصة بها)، وإلا تجمّدت على
   أحمر الوضع النهاري بينما يرتفع النص إلى الأحمر الفاتح في الداكن. */
.lh-btn-ghost.is-pdf {
  color: #E5252A !important; border-color: rgba(229, 37, 42, .45);
}
.lh-btn-ghost.is-pdf:hover {
  background: rgba(229, 37, 42, .08); border-color: #E5252A;
}
/* في الداكن يذوب #E5252A في الأرضية السوداء — نرفعه درجة، كما فُعل بالنحاسي.
   والتحويم يكرّر الكلاس ليغلب طبقة الخلفية الشفافة المشتركة. */
html.dark-style .lh-btn-ghost.is-pdf {
  color: #FF6B6E !important; border-color: rgba(255, 107, 110, .42);
}
html.dark-style.dark-style.dark-style .lh-btn-ghost.is-pdf:hover {
  background: rgba(229, 37, 42, .18) !important; border-color: #FF6B6E;
}

/* سطر توضيحي تحت الأزرار — نسختا الكتاب */
.lh-note {
  display: flex; align-items: flex-start; gap: .45rem;
  font-size: .88rem; line-height: 1.75; color: var(--pt-text-2);
}
.lh-note i { color: var(--brand); margin-top: .18rem; flex: 0 0 auto; }
@media (max-width: 991.98px) { .lh-note { justify-content: center; text-align: center; } }

/* رقاقات المعلومات */
.lh-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.lh-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: #fff; border: 1px solid var(--pt-border); color: var(--pt-text-2);
}
.lh-chip i { color: var(--brand); }

/* بطاقة غلاف الكتاب — لمسة زجاجية فاخرة بألوان الكتاب (فحمي دافئ + نحاسي + فضّي) */
.lh-book {
  position: relative; border-radius: 26px; padding: 1.6rem 1.6rem 1.1rem;
  /* سطح زجاجي بنّي نحاسي دافئ + حدّ متدرّج نحاسي/شمبانيا */
  background:
    linear-gradient(160deg, rgba(64, 44, 31, .78) 0%, rgba(30, 20, 13, .86) 100%) padding-box,
    linear-gradient(135deg, rgba(232, 160, 95, .7), rgba(220, 214, 205, .42), rgba(212, 110, 42, .6)) border-box;
  border: 1.5px solid transparent;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 30px 60px rgba(24, 16, 8, .38), inset 0 1px 0 rgba(255, 255, 255, .14);
}
/* توهّج نحاسي خلف الكتاب — يعكس شعلة الغلاف */
.lh-book::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 52% at 50% 40%, rgba(232, 140, 70, .38), rgba(212, 110, 42, .12) 45%, transparent 66%);
}
/* بريق فضّي علوي خفيف */
.lh-book::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 42%; border-radius: 26px 26px 60% 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), transparent); pointer-events: none;
}
.lh-book .carousel { position: relative; z-index: 1; }

.img-fixed {
  width: 100%; max-width: 320px; height: 340px; object-fit: contain;
  margin: auto; display: block;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .5));
  animation: lh-float 7s ease-in-out infinite;
}
@keyframes lh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .img-fixed { animation: none; } }

/* --- أزرار السلايدر: دوائر زجاجية (مواضع فيزيائية صريحة لتفادي لبس RTL) --- */
.lh-book .carousel-control-prev,
.lh-book .carousel-control-next {
  width: 42px; height: 42px; top: 50%; bottom: auto; transform: translateY(-50%);
  border-radius: 50%; opacity: 1; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30, 20, 13, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
  transition: background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.lh-book .carousel-control-prev { left: .6rem; right: auto; }
.lh-book .carousel-control-next { right: .6rem; left: auto; }
.lh-book .carousel-control-prev:hover,
.lh-book .carousel-control-next:hover {
  background: linear-gradient(135deg, var(--brand), var(--brand-hover));
  border-color: transparent; transform: translateY(-50%) scale(1.1);
  box-shadow: 0 10px 22px rgba(212, 110, 42, .45);
}
.lh-book .carousel-control-prev-icon,
.lh-book .carousel-control-next-icon { width: 1rem; height: 1rem; }

/* --- مؤشّرات السلايدر: نقاط زجاجية --- */
.lh-book .carousel-indicators { margin-bottom: -.2rem; z-index: 3; }
.lh-book .carousel-indicators [data-bs-target] {
  width: 8px; height: 8px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .35); opacity: 1; transition: all .25s ease;
}
.lh-book .carousel-indicators .active {
  width: 22px; border-radius: 999px; background: linear-gradient(90deg, var(--brand-light), var(--brand));
}

/* ---------------------------------------------------------------------
   أقسام المحتوى + البطاقات
   --------------------------------------------------------------------- */
.lh-section { padding: 2.75rem 0; }
.lh-sec-head { margin-bottom: 1.6rem; }
.lh-sec-title { font-weight: 800; color: var(--pt-text); }

.lh-card {
  border: 1px solid var(--pt-border); border-radius: 18px; background: #fff;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .06); padding: 1.4rem;
}
/* لمسة زجاجية للبطاقات (المخططات) */
.lh-card--glass {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .68) 0%, rgba(255, 255, 255, .42) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 14px 36px rgba(16, 24, 40, .08), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.lh-card-title {
  display: flex; align-items: center; gap: .5rem; font-weight: 800; margin-bottom: 1rem;
  color: var(--pt-text);
}
.lh-card-title i {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
  background: var(--brand-soft, rgba(212,110,42,.1)); color: var(--brand);
}

.sticky-buy { position: sticky; top: 1rem; }

/* ---------------------------------------------------------------------
   الجداول — نُقلت من inline وحُسّنت
   --------------------------------------------------------------------- */
.table-custom { width: 100%; border-collapse: collapse; text-align: center; }
.table-custom th, .table-custom td {
  border: 1px solid var(--pt-border) !important; color: var(--pt-text) !important;
  padding: 10px; vertical-align: middle;
}
.table-custom thead th {
  background: linear-gradient(135deg, #F3F5F9, #E7EAF0) !important;
  color: var(--pt-text) !important; font-weight: 800; font-size: 13px;
}
/* نفس التدرّجات بدرجات أفتح + نص داكن مقروء */
.table-custom .blue     { background: linear-gradient(135deg, #b7e9ef, #bcd3f2) !important; }
.table-custom .orange   { background: linear-gradient(135deg, #fcd3ab, #fcbfa4) !important; }
.table-custom .teal     { background: linear-gradient(135deg, #a9e5dd, #b9efc6) !important; }
.table-custom .yellow   { background: linear-gradient(135deg, #fbe6bb, #f8dd9c) !important; }
.table-custom .darkblue { background: linear-gradient(135deg, #b0bcca, #c2d0dd) !important; }
.table-custom .green    { background: linear-gradient(135deg, #bfe3a4, #d5efbf) !important; }
.table-custom .darkgreen{ background: linear-gradient(135deg, #aad2c6, #c3ddce) !important; }
.table-custom .blue, .table-custom .orange, .table-custom .teal, .table-custom .yellow,
.table-custom .darkblue, .table-custom .green, .table-custom .darkgreen {
  color: #33373f !important; font-weight: 800;
}
.table-custom tfoot td {
  background: linear-gradient(135deg, var(--brand), var(--brand-hover)) !important;
  color: #fff !important; font-weight: 800;
}

@media (max-width: 767.98px) {
  .lh-hero { padding: 5.5rem 0 2.25rem; }
  .img-fixed { height: 280px; }
}

/* ---------------------------------------------------------------------
   الوضع الداكن — النصوص الملوّنة وحدها
   الأسطح (بطاقات/رقاقات/رأس الجدول) مقلوبة في partials/top-stage.
   ما يلي نصوصٌ بدرجات مضبوطة على أرضية بيضاء: النحاسي الداكن --brand-hover
   والكحلي #2b3a5b كلاهما يذوب في الأرضية السوداء — نرفعهما لدرجة فاتحة.
   --------------------------------------------------------------------- */
html.dark-style .lh-eyebrow { color: var(--brand-light, #F2B58C); }

html.dark-style .lh-btn-ghost {
  color: var(--brand-light, #F2B58C) !important;
  border-color: rgba(242, 181, 140, .38);
}
html.dark-style .lh-btn-ghost.is-slate {
  color: #AEBBD4 !important;
  border-color: rgba(174, 187, 212, .28);
}
/* التحويم: الطبقة المشتركة تفرض background شفافاً بأولوية أعلى — نكرّر الكلاس لنغلبها */
html.dark-style.dark-style.dark-style .lh-btn-ghost:hover {
  background: rgba(212, 110, 42, .16) !important;
  border-color: var(--brand-light, #F2B58C);
}
html.dark-style.dark-style.dark-style .lh-btn-ghost.is-slate:hover {
  background: rgba(174, 187, 212, .1) !important;
  border-color: #AEBBD4;
}