:root {
  --bg: #0b1020;
  --panel: #121a33;
  --card: #0f1530;
  --muted: #c6c8d1;
  --text: #f4f6ff;
  --primary: #5b8cff;
  --chip: #202a52;
  --chip-alt: #2d375f;
  --success: #23c55e;
  --warning: #fbbf24;
  --danger: #ef4444;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 15% -10%, #263167 0%, rgba(11,16,32,0) 50%),
              radial-gradient(1200px 600px at 85% -20%, #1b2552 0%, rgba(11,16,32,0) 50%),
              var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

.page-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11,16,32,0.7);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #1f2a57;
}

.header-top {
  display: flex; align-items: center; justify-content: space-between;
}
h1 { margin: 8px 0 12px; font-size: 28px; }

.header-actions { display: flex; gap: 10px; }

.btn {
  display: inline-flex; gap: 8px; align-items: center; justify-content: center;
  padding: 8px 12px; border-radius: 10px; background: #263167; color: var(--text);
  border: 1px solid #2b3770; text-decoration: none; cursor: pointer;
}
.btn.primary { background: var(--primary); border-color: #3f68d6; }
.btn.disabled { opacity: .5; cursor: not-allowed; }

.toolbar {
  display: flex; gap: 12px; align-items: center; margin: 8px 0 12px;
  flex-wrap: wrap;
}
.toolbar input[type="search"], .toolbar select {
  background: #0f1530; color: var(--text);
  border: 1px solid #2b3770; border-radius: 10px; padding: 10px 12px;
}
.filters { margin-left: auto; display: flex; gap: 8px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.card {
  background: var(--card);
  border: 1px solid #1f2a57;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(8,12,30,0.4);
}

.thumb {
  position: relative;
  aspect-ratio: 3/4;
  background: #0b1020;
  overflow: hidden;
}
.thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.05) contrast(1.05);
  transition: transform .4s ease;
}
/* Hover zoom a bit more so it feels “larger on hover” */
.card:hover .thumb img { transform: scale(1.08); }  /* was 1.03 */

/* Make book covers a little smaller in listings */
.book-card .thumb { height: 180px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; }
@media (min-width: 992px) {
  .book-card .thumb { height: 200px; }
}


.badge {
  position: absolute; top: 10px; left: 10px;
  background: #2c386b; border: 1px solid #43529c; color: var(--text);
  padding: 4px 8px; border-radius: 999px; font-size: 12px; margin-right: 6px;
}
.badge + .badge { left: auto; right: 10px; } /* second badge to the right */
.badge.sale { background: #3b2c20; border-color: #91572c; }
.badge.new { background: #223b20; border-color: #3d7b41; }
.badge.best { background: #3a223b; border-color: #7b3d79; }
.badge.feat { background: #20333b; border-color: #3d6a7b; }

.card-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.title { font-size: 18px; margin: 0; }
.title a { color: var(--text); text-decoration: none; }
.title a:hover { text-decoration: underline; }
.title-urdu { font-size: 16px; opacity: .9; }

.meta { display: grid; gap: 4px; }
.meta .row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 13px; color: var(--muted); }
.meta .row span:first-child { color: #9fb2ff; }
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip, .chip.alt {
  display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px;
  background: var(--chip); border: 1px solid #2b3770; color: var(--text); text-decoration: none;
  font-size: 12px;
}
.chip.alt { background: var(--chip-alt); }

.price-row { display: flex; align-items: baseline; gap: 8px; }
.price-current { font-weight: 700; }
.price-old { text-decoration: line-through; opacity: .7; }

.badges-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  padding: 4px 8px; font-size: 12px; border-radius: 999px;
  background: #1a2347; border: 1px solid #2b3770;
}
.tag.in-stock { background: #1f3a28; border-color: #2d6b3a; }
.tag.out-stock { background: #3a1f1f; border-color: #6b2d2d; }

.excerpt { color: var(--muted); margin: 4px 0 8px; min-height: 36px; }

.card-actions { display: flex; gap: 8px; margin-top: auto; }
.pagination { display: flex; gap: 10px; justify-content: center; margin: 20px 0; }
.pagination .page { background: #172046; padding: 8px 12px; border-radius: 10px; border: 1px solid #27336f; color: var(--text); text-decoration: none; }
.pagination .current { background: transparent; border: none; }

/* header logo size */
.page-header img.logo { height: 56px; width: auto; }   /* was ~36px */
@media (min-width: 992px) {
  .page-header img.logo { height: 64px; }
}

/* Banner slider */
.banner-slider { position: relative; overflow: hidden; border-radius: 16px; }
.banner-slider .slides { position: relative; height: 320px; }
.banner-slider .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.banner-slider .slide.active { opacity: 1; }
.banner-slider img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-caption {
  position: absolute; left: 16px; bottom: 16px; right: 16px;
  background: rgba(11,20,55,0.55); backdrop-filter: blur(2px);
  padding: 12px; border-radius: 12px;
}
.banner-prev, .banner-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(11,20,55,0.6); border: 0; color: #fff;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
}
.banner-prev { left: 10px; }
.banner-next { right: 10px; }

/* book cards on grids */
.book-card .thumb { height: 210px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; }
.book-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* image modal (zoom) */
.img-modal[hidden] { display: none; }
.img-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.img-modal img { max-width: 92vw; max-height: 92vh; border-radius: 12px; }
.img-modal-close {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px;
  border: none; border-radius: 50%; background: #fff; cursor: pointer; font-size: 20px;
}

/* Book card thumbnail: fill the slot */
.book-card .thumb {
  height: 220px;                 /* tweak if you want a taller/shorter slot */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 12px;
  background: #0b1020;
}

/* Fill the frame: no padding, cover, centered */
.book-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* key change: fill, even if some crop */
  object-position: center;       /* keep the crop centered */
  padding: 0;                    /* remove the frame padding */
  filter: saturate(1.05) contrast(1.05);
  transition: transform .25s ease;
}

/* Gentle hover lift without re-cropping beyond cover */
.book-card:hover .thumb img {
  transform: scale(1.04);
}

/* breathing room after the rotating banner */
.banner-slider { margin-bottom: 24px; }
@media (min-width: 992px) {
  .banner-slider { margin-bottom: 40px; }
}




/* Make content a grid so the buttons sit at the bottom consistently */
.book-card .content {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto; /* title, meta, price, spacer, actions */
  gap: 8px;
}

/* Two equal buttons side-by-side */
.book-card .card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.book-card .card-actions .btn { width: 100%; }
.book-card .card-actions form { margin: 0; }

/* Meta rows: allow long author lists to wrap neatly */
.book-card .meta .row span:last-child { overflow-wrap: anywhere; }

/* Slightly taller thumb so the new details still look balanced */
.book-card .thumb { height: 220px; }
@media (min-width: 992px) {
  .book-card .thumb { height: 240px; }
}

/* Keep fill behavior for covers */
.book-card .thumb img {
  object-fit: cover;
  object-position: center;
}


/* --- Filter strip --- */
.fx-toolbar {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid #1f2a57;
  background: linear-gradient(180deg, rgba(23,32,70,.65), rgba(15,21,48,.65));
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(8,12,30,0.35);
}

/* Fields */
.fx-field { display: flex; align-items: center; position: relative; }
.fx-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }

/* Inputs */
.fx-input, .fx-select {
  width: 100%;
  background: #0f1530;
  color: var(--text);
  border: 1px solid #2b3770;
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}
.fx-input:focus, .fx-select:focus { border-color: #3f68d6; box-shadow: 0 0 0 3px rgba(95,140,255,.15); }

/* Search with icon */
.fx-search .fx-icon {
  position: absolute; left: 10px; width: 18px; height: 18px; opacity:.7; pointer-events: none; fill:none; stroke:#9fb2ff; stroke-width:1.6;
}
.fx-search .fx-input { padding-left: 36px; }

/* Make selects consistent cross-browser */
.fx-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #9fb2ff 50%), linear-gradient(135deg, #9fb2ff 50%, transparent 50%); background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 12px) calc(1em + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 30px; }

/* Smaller screens: stack nicely */
@media (max-width: 900px) {
  .fx-toolbar { grid-template-columns: 1fr; }
  .fx-actions { justify-content: start; }
}

/* static/css/books.css */
img { max-width: 100%; height: auto; }
.book-card .thumb img { object-fit: cover; }