.page-intro{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.search{ display:flex; gap:8px; }
.search input{
  padding:10px 12px; border-radius:12px; border:1px solid var(--line); min-width: 220px;
  background:#fff; font-family: inherit; font-weight:700; color:var(--ink);
}
.card-actions{ justify-content:center; margin-top:8px; }

/* Details Modal */
.sheet{ position: fixed; inset: 0; z-index: 4100; display:none; background: rgba(0,0,0,.6); }
.sheet.is-open{ display:block; }
.sheet__panel{
  position: absolute; inset-inline: 0; inset-block-end: 0;
  background: #fff; color:#0b0d13; border-top-left-radius: 18px; border-top-right-radius: 18px;
  box-shadow: 0 -18px 40px rgba(0,0,0,.25); padding: 16px; max-height: 85vh; overflow:auto;
}
.sheet__header{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sheet__title{ margin:0; font-weight:900; font-size:20px; }
.sheet__close{ background: transparent; border:0; font-size:28px; cursor:pointer; }
.sheet__body{ display:grid; grid-template-columns: 140px 1fr; gap:14px; margin-top:12px; align-items:start; }
.sheet__cover{ width:100%; border-radius: 12px; border:1px solid var(--line); }
.meta{ display:grid; gap:8px; }
.meta .pill{ display:inline-block; padding:6px 10px; background:#f3f5ff; border:1px solid var(--line); border-radius:999px; font-weight:800; }

.see-more{ text-align:center; margin-top:16px; }

/* Make book cards visually consistent */
#books .card img{ aspect-ratio: 3 / 4; object-fit: cover; }

/* ====== Mobile tweaks ====== */
@media (max-width: 680px){
  /* 1) العنوان في النص */
  .page-intro{ flex-direction: column; align-items: stretch; }
  .section-title{ text-align: center; margin: 0 auto 8px; display: block; }

  /* 2) البحث ياخد عرض الكونتينر وكلمة مسح جنبها */
  .search{ display: grid; grid-template-columns: 1fr auto; width: 100%; }
  .search input{ min-width: 0; } /* يسمح بالتمدد بالكامل */

  /* 3) شبكة الكروت مناسبة للموبايل */
  .cards{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px; }
  #books .card{ padding: 10px; }
  #books .card h3{ font-size: 14px; margin: 6px 0; }
  .card-actions .btn{ padding: 10px 12px; font-size: 13px; }
}

/* أصغر شاشات: عمود واحد */
@media (max-width: 380px){
  .cards{ grid-template-columns: 1fr !important; }
}


/* ==== Card actions: always visible and full-width button ==== */
.cards .card .actions{
  display: flex !important;           /* override global .actions hide on mobile */
  gap: 8px;
  margin-top: 8px;
  justify-content: center;
}
.card-actions .btn{
  width: 100%;                        /* take full card width */
  justify-content: center;            /* center text/icon */
}

/* Ensure title sits right above the button nicely */
#books .card h3{
  margin: 8px 0 6px;
}

/* Mobile-specific fine tuning */
@media (max-width: 680px){
  .cards .card .actions{ margin-top: 8px; }
  .card-actions .btn{ padding: 12px 14px; font-size: 14px; }
}


/* ===== Bottom nav active state for current page ===== */
.bottom-nav .bottom-link.active,
.bottom-nav .bottom-link.active i{
  color: var(--accent) !important;
}
.bottom-nav .bottom-link.active{
  font-weight: 900;
  transform: translateY(-1px);
}
/* Make details buttons fill card width */
.card-actions .btn{ width: 100%; justify-content: center; }