/* =========================================================
   HK Solutions UX — Polished CSS v2
   يوضع بعد CSS الحالي ليرث الهوية ويغلب التنسيقات القديمة بأمان.
   لا يحتاج أي تعديل في HTML أو JavaScript.
   ========================================================= */

.book-solutions{
  --hk-ux-blue: var(--hk-blue, #065EA7);
  --hk-ux-blue-dark: var(--hk-blue-dark, #064A82);
  --hk-ux-blue-light: var(--hk-blue-light, #EEF6FC);
  --hk-ux-blue-border: var(--hk-blue-border, #C9E1F3);
  --hk-ux-orange: var(--hk-orange, #FAAB27);
  --hk-ux-orange-dark: var(--hk-orange-dark, #A96300);
  --hk-ux-orange-light: var(--hk-orange-light, #FFF5E4);
  --hk-ux-orange-border: var(--hk-orange-border, #F7D89D);
  --hk-ux-text: var(--hk-text, #243447);
  --hk-ux-muted: var(--hk-muted, #66788A);
  --hk-ux-surface: #ffffff;
  --hk-ux-soft: #F8FBFD;
  --hk-ux-radius: 16px;
  --hk-ux-shadow: 0 8px 24px rgba(6,94,167,.075);
  --hk-ux-shadow-strong: 0 12px 30px rgba(6,94,167,.11);

  overflow-wrap: anywhere;
}

/* ---------- عنوان الوحدة ---------- */
.book-solutions .unit-title{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--hk-ux-blue-border);
  background:
    linear-gradient(135deg, rgba(238,246,252,.98), #fff 72%);
  box-shadow: var(--hk-ux-shadow);
}

.book-solutions .unit-title::after{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(
    180deg,
    var(--hk-ux-blue),
    var(--hk-ux-orange)
  );
}

/* =========================================================
   البحث الفوري
   ========================================================= */
.book-solutions .solutions-search{
  position: relative;
  margin: 0 0 18px;
  padding: 15px;
  border: 1px solid var(--hk-ux-blue-border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, #fff 0%, #FBFDFF 100%);
  box-shadow: var(--hk-ux-shadow);
}

.book-solutions .solutions-search-label{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--hk-ux-blue-dark);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.5;
}

.book-solutions .solutions-search-label::before{
  content: "⌕";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 10px;
  background: var(--hk-ux-blue-light);
  color: var(--hk-ux-blue);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.book-solutions .solutions-search-field{
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.book-solutions .solutions-search-input{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 50px;
  padding: 11px 14px;
  border: 2px solid #D5E6F2;
  border-radius: 14px;
  background: #fff;
  color: var(--hk-ux-text);
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.5;
  outline: none;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background-color .16s ease;
}

.book-solutions .solutions-search-input::placeholder{
  color: #8293A2;
  opacity: 1;
  font-weight: 600;
}

.book-solutions .solutions-search-input:hover{
  border-color: #ACD2EB;
}

.book-solutions .solutions-search-input:focus{
  border-color: var(--hk-ux-blue);
  box-shadow: 0 0 0 4px rgba(6,94,167,.12);
}

.book-solutions .solutions-search-clear{
  min-width: 70px;
  min-height: 50px;
  padding: 9px 13px;
  border: 1px solid var(--hk-ux-orange-border);
  border-radius: 14px;
  background: var(--hk-ux-orange-light);
  color: var(--hk-ux-orange-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform .14s ease,
    background-color .14s ease,
    border-color .14s ease;
}

.book-solutions .solutions-search-clear:hover{
  background: #FFECCB;
  border-color: var(--hk-ux-orange);
  transform: translateY(-1px);
}

.book-solutions .solutions-search-clear:active{
  transform: translateY(0);
}

.book-solutions .solutions-search-status{
  min-height: 0;
  margin-top: 9px;
  color: var(--hk-ux-muted);
  font-size: 13px;
  font-weight: 750;
}

.book-solutions .solutions-search-status:empty{
  display: none;
}

.book-solutions .solutions-search-results{
  display: grid;
  gap: 8px;
  margin-top: 9px;
}

.book-solutions .solutions-search-results:empty{
  margin-top: 0;
}

.book-solutions .solutions-search-result{
  position: relative;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #DFE8EF;
  border-radius: 14px;
  background: #fff;
  color: var(--hk-ux-text);
  text-align: right;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(36,52,71,.035);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    background-color .14s ease;
}

.book-solutions .solutions-search-result:hover{
  transform: translateY(-1px);
  border-color: #A9D1EB;
  background: #FCFEFF;
  box-shadow: 0 7px 18px rgba(6,94,167,.075);
}

.book-solutions .solutions-search-result:active{
  transform: translateY(0);
}

.book-solutions .solutions-search-result-page,
.book-solutions .solutions-search-result-question,
.book-solutions .solutions-search-result-answer{
  display: block;
}

.book-solutions .solutions-search-result-page{
  width: fit-content;
  margin-bottom: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--hk-ux-orange-light);
  color: var(--hk-ux-orange-dark);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.5;
}

.book-solutions .solutions-search-result-question{
  color: var(--hk-ux-blue-dark);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.75;
}

.book-solutions .solutions-search-result-answer{
  margin-top: 5px;
  color: var(--hk-ux-muted);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.7;
}

/* =========================================================
   فهرس الصفحات
   ========================================================= */
.book-solutions .direct-page-index{
  margin: 0 0 22px;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--hk-ux-blue-border) !important;
  border-radius: 18px !important;
  background: #fff;
  box-shadow: var(--hk-ux-shadow);
  scroll-margin-top: 110px;
}

.book-solutions .direct-page-index-title{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  margin: 0 !important;
  padding: 12px 14px !important;
  list-style: none;
  cursor: pointer;
  color: var(--hk-ux-blue-dark) !important;
  background:
    linear-gradient(90deg, var(--hk-ux-blue-light), #fff);
  font-size: 17px !important;
  font-weight: 850 !important;
  user-select: none;
}

.book-solutions .direct-page-index-title::-webkit-details-marker{
  display: none;
}

.book-solutions .direct-page-index-title::after{
  content: "＋";
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px;
  border: 1px solid var(--hk-ux-blue-border);
  border-radius: 11px !important;
  background: #fff !important;
  color: var(--hk-ux-blue) !important;
  font-size: 19px !important;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 7px rgba(6,94,167,.06);
}

.book-solutions details.direct-page-index[open] .direct-page-index-title{
  border-bottom: 1px solid #E6EEF4;
}

.book-solutions details.direct-page-index[open] .direct-page-index-title::after{
  content: "−";
}

.book-solutions .direct-page-links{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, 48px) !important;
  justify-content: center !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 14px !important;
  background: #fff;
}

.book-solutions .direct-page-link{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px;
  min-height: 48px !important;
  padding: 0 !important;
  box-sizing: border-box;
  border: 1px solid var(--hk-ux-blue-border) !important;
  border-radius: 13px !important;
  background: var(--hk-ux-blue-light) !important;
  color: var(--hk-ux-blue-dark) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1;
  text-decoration: none !important;
  box-shadow: 0 2px 7px rgba(6,94,167,.045);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    background-color .14s ease,
    border-color .14s ease;
}

.book-solutions .direct-page-link:hover{
  transform: translateY(-1px);
  border-color: var(--hk-ux-orange) !important;
  background: var(--hk-ux-orange-light) !important;
  color: var(--hk-ux-orange-dark) !important;
  box-shadow: 0 6px 12px rgba(250,171,39,.11);
}

.book-solutions .direct-page-link:active{
  transform: translateY(0);
}

/* =========================================================
   بطاقات صفحات الكتاب
   ========================================================= */
.book-solutions .book-page{
  scroll-margin-top: 110px;
  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.book-solutions .book-page:target{
  border-color: #8FC5E8 !important;
  box-shadow:
    0 0 0 3px rgba(6,94,167,.09),
    var(--hk-ux-shadow-strong) !important;
}

.book-solutions .page-badge{
  box-shadow: 0 2px 6px rgba(250,171,39,.06);
}

/* =========================================================
   السؤال والجواب — تحسين بصري خفيف
   ========================================================= */
.book-solutions .qa{
  border-color: #D9E7F0 !important;
  box-shadow: 0 3px 11px rgba(36,52,71,.035);
}

.book-solutions .question,
.book-solutions .answer{
  overflow-wrap: anywhere;
}

.book-solutions .question{
  border-inline-start: 4px solid rgba(6,94,167,.45);
}

.book-solutions .answer{
  border-inline-start: 4px solid rgba(250,171,39,.55);
}

/* =========================================================
   السابق / الفهرس / التالي
   ========================================================= */
.book-solutions .page-prev-next{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch;
  padding: 9px 0 11px !important;
}

.book-solutions .page-nav-btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px !important;
  padding: 9px 10px !important;
  box-sizing: border-box;
  border: 1px solid var(--hk-ux-blue-border) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: var(--hk-ux-blue-dark) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(6,94,167,.045);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    background-color .14s ease,
    border-color .14s ease;
}

.book-solutions .page-nav-btn:not(.is-disabled):hover{
  transform: translateY(-1px);
  border-color: #9FC9E4 !important;
  background: var(--hk-ux-blue-light) !important;
  box-shadow: 0 5px 12px rgba(6,94,167,.075);
}

.book-solutions .page-nav-btn.back-to-index{
  border-color: var(--hk-ux-orange-border) !important;
  background: var(--hk-ux-orange-light) !important;
  color: var(--hk-ux-orange-dark) !important;
}

.book-solutions .page-nav-btn:not(.is-disabled):active{
  transform: translateY(0);
}

.book-solutions .page-nav-btn.is-disabled{
  opacity: .34 !important;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}

/* ---------- Focus واضح للوصول ---------- */
.book-solutions .solutions-search-clear:focus-visible,
.book-solutions .solutions-search-result:focus-visible,
.book-solutions .direct-page-link:focus-visible,
.book-solutions .page-nav-btn:focus-visible,
.book-solutions .direct-page-index-title:focus-visible{
  outline: 3px solid rgba(6,94,167,.25) !important;
  outline-offset: 3px !important;
}

/* ---------- تمييز نتيجة البحث ---------- */
.book-solutions .qa.search-highlight{
  animation: hk-solutions-polished-highlight 2.4s ease;
}

@keyframes hk-solutions-polished-highlight{
  0%{
    box-shadow: 0 0 0 0 rgba(250,171,39,0);
  }
  16%, 68%{
    border-color: rgba(250,171,39,.7);
    box-shadow: 0 0 0 4px rgba(250,171,39,.22);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(250,171,39,0);
  }
}

/* =========================================================
   الجوال
   ========================================================= */
@media (max-width: 600px){
  .book-solutions{
    --hk-ux-radius: 14px;
  }

  .book-solutions .solutions-search{
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 15px;
  }

  .book-solutions .solutions-search-label{
    font-size: 16px;
  }

  .book-solutions .solutions-search-label::before{
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 9px;
    font-size: 22px;
  }

  .book-solutions .solutions-search-input{
    min-height: 50px;
    font-size: 16px; /* يمنع zoom غير المرغوب في iOS */
  }

  .book-solutions .solutions-search-clear{
    min-height: 50px;
  }

  .book-solutions .solutions-search-result{
    padding: 11px;
  }

  .book-solutions .direct-page-index{
    margin-bottom: 18px;
    border-radius: 15px !important;
  }

  .book-solutions .direct-page-index-title{
    min-height: 52px;
    padding: 11px 12px !important;
    font-size: 16px !important;
  }

  .book-solutions .direct-page-links{
    grid-template-columns: repeat(auto-fit, 46px) !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .book-solutions .direct-page-link{
    width: 46px !important;
    min-width: 46px !important;
    height: 46px;
    min-height: 46px !important;
    border-radius: 12px !important;
  }

  .book-solutions .page-prev-next{
    gap: 6px !important;
    padding-top: 8px !important;
  }

  .book-solutions .page-nav-btn{
    min-height: 48px !important;
    padding: 8px 5px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }

  .book-solutions .question,
  .book-solutions .answer{
    border-inline-start-width: 3px;
  }
}

/* شاشة صغيرة جداً */
@media (max-width: 360px){
  .book-solutions .solutions-search-field{
    flex-wrap: wrap;
  }

  .book-solutions .solutions-search-clear{
    width: 100%;
  }

  .book-solutions .direct-page-links{
    grid-template-columns: repeat(auto-fit, 44px) !important;
    gap: 7px !important;
  }

  .book-solutions .direct-page-link{
    width: 44px !important;
    min-width: 44px !important;
    height: 44px;
    min-height: 44px !important;
  }
}
.solution-source-note {
  display: block;
  margin-top: 0.45rem;
  color: #9aa0a6;
  font-size: 0.82em;
  font-weight: 400;
}
/* ---------- تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce){
  .book-solutions *,
  .book-solutions *::before,
  .book-solutions *::after{
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- الطباعة ---------- */
@media print{
  .book-solutions .solutions-search,
  .book-solutions .direct-page-index,
  .book-solutions .page-prev-next{
    display: none !important;
  }
}


/* =========================================================
   إصلاح تكرار السابق / الفهرس / التالي على الجوال
   CSS القديم كان ينشئ النص مرة ثانية عبر ::after
   ========================================================= */
@media (max-width: 600px){
  .book-solutions .page-nav-btn{
    font-size: 13px !important;
  }

  .book-solutions .page-nav-btn::after,
  .book-solutions .prev-page::after,
  .book-solutions .back-to-index::after,
  .book-solutions .next-page::after{
    content: none !important;
    display: none !important;
  }
}