* {
    direction: rtl;
    font-family: 'Cairo', sans-serif;

}

body{
	background: #80808014;
}

a {
    color: inherit; /* blue colors for links too */
  text-decoration: inherit;
}

@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-VariableFont_slnt,wght.ttf') format('truetype');
    font-weight: 100 900; /* يدعم جميع الأوزان بين 100 و 900 */
    font-style: normal;
}

/*header*/
.headercont {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(34, 34, 45, 0.95);
  width: 100%;
  border-bottom: 5px solid #515ee4;
  color: white;
  position: relative;
}

/* الشاشات الكبيرة: العنوان في المنتصف */
.header-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 15px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .header-mobile { justify-content: space-between; }
}

.header-mobile h1 {
  font-size: 20px;
  color: white;
  margin: 0;
  text-align: center;
}

@media (min-width: 769px) {
  .header-mobile h1 {
    font-size: 25px;
  }
}


/* زر التبديل يتحول إلى X */
.menu-toggle {
  font-size: 26px;
  cursor: pointer;
  color: #516ee4;
  user-select: none;
  position: relative;
  width: 28px;
  height: 22px;
  text-indent: -9999px;
}
.menu-toggle::before,
.menu-toggle::after{
  content:"";
  position:absolute;
  left:0;
  width:28px;
  height:2px;
  background: currentColor;
  transition: .25s ease;
}
.menu-toggle::before{
  top:6px;
  box-shadow: 0 8px 0 currentColor;
}
.menu-toggle::after{ top:20px; }
.menu-toggle.active::before{
  top:11px; transform: rotate(45deg); box-shadow:none;
}
.menu-toggle.active::after{
  top:11px; transform: rotate(-45deg);
}

/* أيقونة البحث (موبايل) + تتحول إلى X */
.search-icon{
  position: relative;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: #516ee4;
  background: transparent;
  border: 0;
}
.search-icon::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: 2px;
  border: 3px solid currentColor;
  border-radius: 50%;
}
.search-icon::after{
  content: "";
  position: absolute;
  width: 12px;
  height: 3px;
  background: currentColor;
  bottom: 2px;
  left: 18px;
  transform: rotate(45deg);
  border-radius: 2px;
}
.search-icon.active::before,
.search-icon.active::after{
  border: none;
  background: currentColor;
  width: 22px;
  height: 3px;
  top: 12px;
  left: 3px;
  border-radius: 2px;
}
.search-icon.active::before{ transform: rotate(45deg); }
.search-icon.active::after{ transform: rotate(-45deg); }
.search-icon:hover{ opacity:.85; }
.search-icon:focus{ outline:2px solid #8fa0ff; outline-offset:2px; }

/* أيقونة البحث للديسكتوب داخل القائمة */
.search-icon-desktop{
  position: relative;
  width: 26px;
  height: 26px;
  cursor: pointer;
  color: #516ee4;
  background: transparent;
  border: 0;
  vertical-align: middle;
}
.search-icon-desktop::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: 2px;
  border: 3px solid currentColor;
  border-radius: 50%;
}
.search-icon-desktop::after{
  content: "";
  position: absolute;
  width: 12px;
  height: 3px;
  background: currentColor;
  bottom: 2px;
  left: 16px;
  transform: rotate(45deg);
  border-radius: 2px;
}
.search-icon-desktop.active::before,
.search-icon-desktop.active::after{
  border: none;
  background: currentColor;
  width: 22px;
  height: 3px;
  top: 11px;
  left: 2px;
  border-radius: 2px;
}
.search-icon-desktop.active::before{ transform: rotate(45deg); }
.search-icon-desktop.active::after{ transform: rotate(-45deg); }

/* قائمة الروابط */
.headertree {
  display: flex;
  align-items: center;
  gap: 25px;
  transition: all 0.3s ease;
}
.headertree div {
  font-size: 15px;
  padding-bottom: 10px;
}

/* فواصل وهوفر للديسكتوب */
@media (min-width: 769px){
  .headertree{ gap: 0; }
  .headertree a{
    position: relative;
    padding: 0 14px;
  }
  .headertree a:not(:last-of-type)::after{
    content: " - ";
    color: #8e95c6;
    position: absolute;
    left: -2px;
    top: 0;
  }
  .headertree a div{
    transition: color .2s ease, transform .2s ease;
  }
  .headertree a:hover div{
    color: #cfd6ff;
    transform: translateY(-1px);
  }
 .headertree .search-icon-desktop{

  position: relative;
  top: -5px;              /* يرفع الأيقونة قليلًا لتتماشى مع النص */
  display: flex;
  align-items: center;
}

}

/* إظهار/إخفاء الأزرار حسب الحجم */
.menu-toggle, .search-icon { display: none; }    /* مخفية على الديسكتوب */
.search-icon-desktop{ display: none; }

@media (max-width: 768px) {
  .menu-toggle, .search-icon { display: inline-block; }
  .search-icon-desktop{ display: none; }

  /* قائمة الموبايل تنفتح انسيابيًا */
  .headertree{
    width:100%;
    background: rgba(34,34,45,.98);
    text-align:center;
    padding:0;
    display:block;
    overflow:hidden;
    max-height:0;
    transition:max-height .25s ease, padding .25s ease;
  }
  .headertree.show{
    max-height: 500px;
    padding:10px 0;
  }
}

@media (min-width: 769px){
  .search-icon-desktop{ display:inline-block; }
}

/* بانل البحث أسفل الهيدر (انزلاق) */
.search-panel{
  width:100%;
  background:#2c2f3a;
  border-top:1px solid #515ee4;
  overflow:hidden;
  max-height:0;
  transition:max-height .25s ease, opacity .25s ease;
  opacity:0;
}
.search-panel.show{
  max-height:120px;
  opacity:1;
}
.search-panel form{
  display:flex;
  gap:8px;
  padding:12px 15px;
  direction: rtl;
}
.search-panel input[type="search"]{
  flex:1;

  border:1px solid #3c4060;

  padding:10px 12px;
  border-radius:8px;
  font-size:15px;
}
.search-panel input[type="search"]::placeholder{ color:#9aa2c7; }
.search-panel button[type="submit"]{
  background:#516ee4;
  color:#fff;
  border:none;
  border-radius:8px;
  padding:10px 16px;
  font-size:15px;
  cursor:pointer;
}

/* ترتيب العناصر بحيث يظهر شريط البحث تحت الروابط في الديسكتوب وتحت العنوان في الموبايل */

/* موبايل: [العنوان] ثم [البحث] ثم [القائمة] */
@media (max-width: 768px){
  .header-mobile{ order:1; }
  .search-panel{ order:2; }
  .headertree{ order:3; }
}

/* ديسكتوب: [العنوان] ثم [القائمة] ثم [البحث] */
@media (min-width: 769px){
  .header-mobile{ order:1; }
  .headertree{ order:2; }
  .search-panel{ order:3; }
}



/* FRONT-PAGE */



.posts-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    justify-items: center;
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
}




.post-box {
    width: 230px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.post-box:hover {
    transform: translateY(-5px);
}

.bookimagecont {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-top: 3px solid #7878d1;
}


.bookimg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}




.book-caption {
    padding: 10px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    line-height: 1.6;        /* يعطي راحة أكبر للنص الطويل */
    border-top: 3px solid #7878d1;
    word-wrap: break-word;   /* يكسّر الكلمة الطويلة تلقائيًا */
    white-space: normal;     /* يسمح بتعدّد الأسطر */
    height: auto;            /* الارتفاع يتكيّف مع النص */
    min-height: 100px;       /* للحفاظ على توازن البطاقات */
    box-sizing: border-box;
}


#uploadForm {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 100%;
    margin: auto;
    width: 90%;
}

.form-group {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    flex: 1;
}

.form-group input[type="text"],
.form-group textarea,
.form-group select {
    padding: 15px 10px 10px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
}

.form-group label {
    position: absolute;
    top: -10px;
    right: 15px;
    background-color: #fff;
    padding: 0 6px;
    font-size: 14px;
    color: #333;
}

.file-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.custom-upload {
    padding: 8px 16px;
    background-color: #0073aa;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
}

.custom-upload:hover {
    background-color: #005d8f;
}

#fileInput {
    display: none;
}

#fileName {
    font-style: italic;
    font-size: 14px;
}

#uploadProgress {
    width: 90%;
    display: none;
    margin: 0 auto;
    margin-top: 20px;
}

#uploadForm input[type="submit"] {
    height: fit-content;
    background-color: #0073aa;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

#uploadForm input[type="submit"]:hover {
    background-color: #005d8f;
}

#uploadForm {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 100%;
    margin: auto;
    width: 90%;
}

.form-group {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    flex: 1;
}

.form-group input[type="text"],
.form-group textarea,
.form-group select {
    padding: 15px 10px 10px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
}

.form-group label {
    position: absolute;
    top: -10px;
    right: 15px;
    background-color: #fff;
    padding: 0 6px;
    font-size: 14px;
    color: #333;
}

.file-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.custom-upload {
    padding: 8px 16px;
    background-color: #0073aa;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
}

.custom-upload:hover {
    background-color: #005d8f;
}

#fileInput {
    display: none;
}

#fileName {
    font-style: italic;
    font-size: 14px;
}

.hidden-progress {
    width: 90%;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
}

#uploadForm input[type="submit"] {
    height: fit-content;
    background-color: #0073aa;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

#uploadForm input[type="submit"]:hover {
    background-color: #005d8f;
}

.section-divider {
    margin: 40px auto;
    width: 90%;
    border: 0;
    border-top: 2px solid #ccc;
}

.search-box-container{
  width: 90%;
  margin: 0 auto 30px auto;
  display: flex;
  gap: 10px;
  direction: rtl;
}

.search-input{
  flex: 1;
  padding: 12px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;

}

.search-btn{
  padding: 12px 18px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  background: #516ee4;
  color: #fff;
  cursor: pointer;
}

.search-btn:hover{ filter: brightness(1.05); }

/* إخفاء بصري لعنصر نصي لقراء الشاشة فقط */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* سبينر التحميل (دائرة تدور) */
.load-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
}

.load-spinner::before {
  content: "";
  width: 28px;
  height: 28px;
  border: 3px solid #e3e3e3;
  border-top-color: #3a7; /* لون بسيط */
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

/* نص صغير جنب الدائرة – لو حبيت تظهره */
.load-spinner::after {
  content: "جاري تحميل المزيد من الكتب…";
  font-size: 14px;
  color: #555;
}

.hidden { display: none !important; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* لمسة لطيفة: ظهور تدريجي لأي بوست جديد */
.post-box {
  opacity: 1;
  transition: opacity .25s ease;
}
.post-box.is-new {
  opacity: 0;
}
.post-box.is-new.loaded {
  opacity: 1;
}

.no-more {
  text-align: center;
  color: #777;
  font-size: 15px;
  padding: 10px 0 20px;
}
.hidden { display: none !important; }


/* SINGLE.PHP */

.single-book-container {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
}
@media (max-width: 1064px) {
  .single-book-container {
    justify-content: center;
    text-align: center;
  }
}


.single-book-image {
    flex: 1 1 300px;
    max-width: 300px;
}


.single-book-image img {
    width: 100%;
  
    border-radius: 8px;

    border: 1px solid #999999b8;
    margin-top: 15px;
}

.book-details {
    flex: 2 1 600px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.book-meta {
    font-size: 16px;
    font-weight: bold;
        margin-top: 15px;
}

.shortlink {
  background: #f8f8fa;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 2px 8px;
  color: #333;
  font-size: 13px;
}

#copyShortlinkBtn {
  background: #515ee4;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  transition: 0.3s;
}

#copyShortlinkBtn:hover {
  background: #3e4ec9;
}

#copyShortlinkBtn.copied {
  background: #46c46f;
}

.book-description {
    font-size: 16px;
    line-height: 1.6;
}

.or-sep{
  display:inline-block;
  margin:0 8px;
  font-weight: bold;
  font-size:14px;
}


.book-links{
    display: flex
;
    flex-direction: column;
}

.book-links a {
    display: inline-block;
    margin-right: 10px;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
}

.book-links a:hover {
    background-color: #005f8a;
}

.book-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px; /* مسافة بين الخط والعنوان */
  margin: 30px auto;
  width: 90%;
}

.book-title {
  font-size: 22px;
  font-weight: bold;
  color: #000;
  text-align: center;
}

/* الجانبان */
.book-title-line {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px; /* المسافة بين الخطين */
  width: 90px;
  opacity: 0.9;
}

/* الخط الرمادي */
.book-title-line .line.gray {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(
    100deg,
    #ccc 10%,
    #ccc 40%,
    #515ee4 55%,
    #ccc 80%
  );
}

/* الخط البنفسجي */
.book-title-line .line.purple {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(
    260deg,
    #515ee4 10%,
    #515ee4 40%,
    #ccc 55%,
    #515ee4 80%
  );
}

/* للشاشات الصغيرة */
@media (max-width: 600px) {
  .book-title-wrapper {
    gap: 12px;
  }
  .book-title-line {
    width: 60px;
  }
  .book-title {
    font-size: 18px;
  }
}




hr{
  width: 100%;
  opacity: 0.25;
}

/* عمود السهام – تهيئة عامة وبطيئة */
.book-links .show-downloads .chevrons{
  --duration: 3.9s;   /* مدة الدورة الكاملة (أبطأ) */
  --drop: 18px;       /* مدى السقوط داخل الإطار */
  position: relative;
  width: 24px;
  height: 32px;       /* إطار أعلى قليلاً حتى لا يخرج السهم */
  overflow: hidden;   /* يمنع الخروج خارج الزر */
  display: inline-block;
}

/* الحوامل الثلاثة */
.book-links .show-downloads .chevrons b{
  position: absolute;
  inset: 0;
}

/* السهم المفلطح الكبير */
.book-links .show-downloads .chevrons b::before{
  content: "⌄";
  position: absolute;
  left: 50%;
  transform: translate(-50%, -110%); /* يبدأ فوق الإطار بقليل */
  top: 0;
  font-size: 30px;     /* رأس كبيرة */
  line-height: 1;
  color: #516ee4;
  opacity: 0;
  animation: ib4fChev var(--duration) ease-in-out infinite;
}

/* تسلسل السهام: 1 ثم 2 ثم 3 بالتساوي عبر الدورة */
.book-links .show-downloads .chevrons b:nth-of-type(2)::before{ animation-delay: calc(var(--duration) / 3); }
.book-links .show-downloads .chevrons b:nth-of-type(3)::before{ animation-delay: calc(2 * var(--duration) / 3); }

/* حركة: يظهر تدريجيًا، يهبط ويختفي قبل الأسفل، ثم يُعاد للأعلى */
@keyframes ib4fChev{
  0%   { transform: translate(-50%, -110%); opacity: 0; }
  18%  { transform: translate(-50%, -80%);  opacity: 0; }   /* يقترب من الإطار */
  28%  { transform: translate(-50%, -40%);  opacity: .95; } /* يبدأ الظهور */
  55%  { transform: translate(-50%, var(--drop)); opacity: 0; } /* يبهت قبل الأسفل */
  56%  { transform: translate(-50%, -110%); opacity: 0; }  /* إعادة فورية للأعلى */
  100% { transform: translate(-50%, -110%); opacity: 0; }
}



.show-downloads{
    margin-bottom: 10px;
    border-radius: 20px;
    border: 3px solid #7878d1;
    padding: 10px;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
}

.book-links button.show-downloads {
    margin-bottom: 10px;
    background-color: #f3f3f3;
    border: 3px solid #7878d1;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
	justify-content: center;
}

.download-links {
    display: none;
    margin-top: 10px;
}

@media (max-width: 768px) {
  .single-file-links {
  display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .multi-file-links {
  display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .download-pair {
  display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
}


.single-file-links a,
.multi-file-links a {
    background: #000;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    margin: 5px;
    display: inline-block;
}



.section-title {
    display: flex;
    align-items: center;
    margin: 15px 0;
    font-weight: bold;
    text-align: center;
}

.section-title::before,
.section-title::after {
    content: '';
    flex: 1;
    border-top: 1px solid #ccc;
    margin: 0 10px;
}

#pdfBackdrop {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
}

#pdfModal {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
    overflow: hidden;
}

.pdf-modal-header {
    text-align: left;
    padding: 10px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ccc;
}

.pdf-modal-header button {
    background: #d9534f;
    color: white;
    font-size: 14px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

#pdfIframe {
    width: 100%;
    height: calc(100% - 50px);
    border: none;
}

.related-books {
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
}


.related-books h2 {
    font-size: 22px;
    margin-bottom: 20px;
}

.related-books-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    justify-items: center;
    width: 100%;
}


.related-book-card {
    width: 230px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.related-book-card:hover {
    transform: translateY(-5px);
}

.related-book-card .related-image {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.related-book-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.related-book-card .related-title {
    padding: 10px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    line-height: 1.6;        /* يعطي راحة أكبر للنص الطويل */
    border-top: 3px solid #7878d1;
    word-wrap: break-word;   /* يكسّر الكلمة الطويلة تلقائيًا */
    white-space: normal;     /* يسمح بتعدّد الأسطر */
    height: auto;            /* الارتفاع يتكيّف مع النص */
    min-height: 100px;       /* للحفاظ على توازن البطاقات */
    box-sizing: border-box;
}

.clickondar{
        font-size: 20px;
    font-weight: bold;
}

/* taxonomy autohrs */

.author-header-card {
    width: 90%;
    margin: 40px auto 20px auto;
    background-color: #f9f9f9;
    border: 2px solid #ddd;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.author-header-card h2 {
    font-size: 26px;
    margin-bottom: 10px;
    border-bottom: 3px solid #7878d1;
    display: inline-block;
    padding-bottom: 5px;
}

.author-header-card .author-description {
    font-size: 16px;
  
    margin-top: 10px;
}

.show-more-btn {
    display: inline-block;
    margin-top: 12px;
    background-color: #515ee4;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.show-more-btn:hover {
    background-color: #3945b5;
}