.blg-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
  gap:18px;
  align-items:start;
}

.blg-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .15s ease;
}
.blg-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.blg-media{
  position:relative;
  aspect-ratio:3/4;
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
}

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

.blg-placeholder{
  color:#94a3b8;
  font-size:14px;
}

.blg-badge-unavail{
  position:absolute;
  top:30px;
  left:40px;
  background:#ef4444;
  color:white;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
}

.blg-info{ padding:12px 12px 14px; }

.blg-title{
  font-size:16px;
  line-height:1.3;
  margin:0 0 8px 0;
}

.blg-genres{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.blg-genre{
  background:#f1f5f9;
  color:#0f172a;
  border:1px solid #e2e8f0;
  font-size:12px;
  padding:3px 8px;
  border-radius:999px;
  text-decoration:none;
  display:inline-block;
}

.blg-authors{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 10px 0;
}

.blg-author{
  background:#ecfeff;
  color:#155e75;
  border:1px solid #cffafe;
  font-size:12px;
  padding:3px 8px;
  border-radius:999px;
  text-decoration:none;
  display:inline-block;
}

.blg-genre:hover,
.blg-author:hover{
  filter:brightness(0.95);
}

.blg-pill{
  border:1px solid transparent;
  cursor:pointer;
}
.blg-pill:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(59,130,246,.25);
}

.blg-filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:end;
  margin:0 0 16px 0;
}

.blg-filter{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  color:#334155;
}

.blg-filter select{
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
  min-width:180px;
}

.blg-filter-checkbox{
  flex-direction:row;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:#fff;
}

.blg-clear-filters{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  cursor:pointer;
}
.blg-clear-filters:hover{ background:#f1f5f9; }
.blg-clear-filters .blg-icon{ display:block; }

.blg-count{
  font-size:13px;
  color:#334155;
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:4px;
}

.blg-select{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  gap:6px;
  align-items:center;
  background:rgba(255,255,255,.92);
  border:1px solid #e2e8f0;
  padding:6px 8px;
  border-radius:999px;
  font-size:12px;
  cursor:pointer;
}
.blg-select input{ margin:0; }

.blg-notice{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid #bbf7d0;
  background:#f0fdf4;
  border-radius:12px;
  color:#166534;
}

.blg-borrow-form{
  margin-top:16px;
  padding:14px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
}

.blg-borrow-grid{
  display:grid;
  grid-template-columns: 1fr;   /* mobile first */
  gap:12px;
}

@media (min-width: 640px){
  .blg-borrow-grid{
    grid-template-columns: 1fr 1fr; /* 2 columns on larger screens */
  }
}

.blg-borrow-grid input,
.blg-borrow-grid textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.blg-borrow-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:0.8em;
  color:#334155;
}

.blg-borrow-grid input,
.blg-borrow-grid textarea{
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:8px 10px;
}

.blg-borrow-message{ grid-column:1 / -1; }

.blg-borrow-actions{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.blg-borrow-actions button{
  border:0;
  border-radius:12px;
  padding:10px 14px;
  background:#0f172a;
  color:#fff;
  cursor:pointer;
}

.blg-borrow-actions button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* Unavailable books */
.blg-card.is-unavailable .blg-cover{
  filter:grayscale(100%);
  opacity:0.1;
}
.blg-card.is-unavailable .blg-badge-unavail{
  filter:none;
}

.blg-return-form{
  position:absolute;
  bottom:10px;
  right:10px;
}

.blg-return-btn{
  border:0;
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
  background:rgba(15,23,42,.92);
  color:#fff;
  cursor:pointer;
}
.blg-return-btn:hover{ background:rgba(15,23,42,1); }

.blg-selected-panel{
  margin-top:14px;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  font-size:0.8em;
}

.blg-selected-title{

  font-weight:600;
  margin-bottom:8px;
  color:#0f172a;
}

.blg-selected-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}

.blg-selected-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
}

.blg-selected-name{
  font-size:13px;
  color:#0f172a;
  line-height:1.2;
}

.blg-selected-remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  background:#e2e8f0;
  color:#0f172a;
}
.blg-selected-remove:hover{ background:#cbd5e1; }
.blg-selected-remove .blg-icon{ display:block; }

.blg-search{
  position:absolute;
  top:10px;
  left:10px;                 /* put it on the left */
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid #e2e8f0;
  color:#0f172a;
  text-decoration:none;
}
.blg-search:hover{
  background:#f1f5f9;
}
.blg-search .blg-icon{
  display:block;
}