/* =======================
   Landing Page Custom CSS
   ======================= */

/* Banner image wrapper */
.banner-image-wrapper {
  width: 100%;
  max-width: 636px;
  height: 481px;
  overflow: hidden;
  border-radius: 8px;
  margin: 0 auto;
}

.banner-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =======================
   Bestseller book thumbnails
   ======================= */
.book-image-wrapper {
  width: 100%;
  aspect-ratio: 1/1; /* square box */
  overflow: hidden;
  border-radius: 8px;
  margin: 0 auto;
  position: relative; /* 🔑 ADD THIS */
}

.book-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* thumbnail fill karega */
  object-position: center;
  display: block;
}

/* =======================
   Category images
   ======================= */
.categories-listings .category-image-wrapper {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  border-radius: 16px;
}

.categories-listings .category-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 16px;
}

@media (max-width: 576px) {
  .categories-listings .category-image-wrapper {
    aspect-ratio: 4/3;
  }
}

/* =======================
   Book Card (big preview)
   ======================= */
.book-card {
  position: relative;
  width: 100%;
  max-width: 280px; /* optional, keeps it from getting huge */
  aspect-ratio: 5 / 7; /* ✅ ensures 5:7 proportion */
  overflow: hidden;
  margin: 0 auto; /* centers card */
  border-radius: 8px; /* optional: rounded corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.book-card-cover {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ✅ image fills without distortion */
  display: block;
}

/* Commenting overlay styles (keep them for later use) */
/*
.book-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s;
}
.book-card:hover .book-card-overlay {
    opacity: 1;
}
.btn-preview {
    background: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
}
*/

@media (max-width: 768px) {
  .book-card {
    max-width: 220px;
  }
}

/* =======================
   Page layout
   ======================= */
html,
body {
  height: 100%;
  margin: 0;
}

.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
}

/* =======================
   Add to Cart button on book thumbnails
   ======================= */
.add-to-cart-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px; /* button size */
  height: 20px; /* make perfect square */
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: none; /* hidden by default */
  z-index: 10;
  align-items: center; /* center icon */
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.book-image-wrapper:hover .add-to-cart-btn {
  display: flex; /* show on hover */
}

.add-to-cart-btn i {
  font-size: 20px; /* icon fits nicely */
  color: #333;
}

.add-to-cart-btn:hover {
  background: #ff6600;
}

.add-to-cart-btn:hover i {
  color: #fff;
}