/* --- Google Fonts & Root Colors --- */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&family=Lora:wght@600&display=swap');
:root {
  --gold: #fbc02d;
  --orange: #fd7e14;
  --sky: #4ac7ff;
  --blue: #3287e0;
  --emerald: #34d399;
  --red: #ef476f;
  --cream: #fffbe6;
  --kid-bg: rgba(255,251,230,0.97);
}

/* --- Body with BG Image and Soft Overlay --- */
body {
  font-family: 'Baloo 2', 'Noto Sans Bengali', Arial, sans-serif;
  color: black;
  min-height: 100vh;
  margin: 0; 
  padding: 0;
  padding-top: 75px; /* Pushes content down below the fixed navbar */
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0; z-index: -1;
  background: #ffffff;
  pointer-events: none;
}

/* --- Main Content Wrapper --- */
/* This class is used to wrap the main scrollable content of your page. */
.main-content {
    /* No specific desktop styles needed by default, but provides a hook for mobile adjustments */
}


/* --- Navbar --- */
.navbar {
  background: rgba(255,251,230,0.97);
  box-shadow: 0 2px 18px #fbc02d24;
  border-bottom: 2px solid #ffd700;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1050;
}
.navbar-brand img { filter: drop-shadow(1px 1px 7px #fd7e1435); }
.navbar-nav .nav-link {
  color: #402312 !important;
  font-family: 'Baloo 2', 'Noto Sans Bengali', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.13rem;
  border-radius: 9px;
  margin: 2px 6px;
  transition: color .18s, background .18s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  background: #ffefc1;
  color: #fd7e14 !important;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(251,192,45,1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* --- Hero Section --- */
#mu-hero {
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0)),
              url('../img/background.jpg') center center no-repeat;
  background-size: contain;
  min-height: 66vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  border-radius: 0;
  margin-bottom: 1.3rem;
  box-shadow: 0;
}
#mu-hero {
  position: relative;
  overflow: hidden;
}

.hero-bg-images {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* Show the entire image inside */
  background: #ffffff;   /* Optional: color behind the image */
  opacity: 0;
  transition: opacity 1.3s ease;
  z-index: 0;
  pointer-events: none;
}

/* Show the active image */
.hero-bg.active {
  opacity: 1;
  z-index: 1;
}
#mu-hero h1, #mu-hero .display-4 {
  font-family: 'Baloo 2', 'Lora', 'Noto Sans Bengali', serif;
  font-size: 2.6rem;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 2px 3px 18px #fd7e1433, 0 1px 1px #0001;
  background: linear-gradient(90deg, #ff7600, #ffd700 40%, #4ac7ff 70%, #fd7e14 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0.2em 0 0.1em 0;
}

/* --- Section Titles (Super Colourful, Kid-Friendly) --- */
.section-title {
  font-family: 'Baloo 2', 'Lora', 'Noto Sans Bengali', serif;
  font-weight: 900;
  font-size: 2.1rem;
  margin: 2.1rem 0 1.2rem;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 1em 0.3em 0.4em 0.3em;
  background: linear-gradient(
    90deg,
    #ef476f 0%,    /* pink-red */
    #fd7e14 18%,   /* orange */
    #fbc02d 36%,   /* gold */
    #4ac7ff 54%,   /* blue */
    #34d399 72%,   /* green */
    #ef476f 100%   /* pink-red again */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0px 2px 6px #fff) drop-shadow(0px 1px 10px #ef476f44);
  background-size: 300% 100%;
  animation: rainbow-move 3s linear infinite;
}
@keyframes rainbow-move {
  0% { background-position: 0% 50%;}
  100% { background-position: 100% 50%;}
}

/* --- Carousel Section: No wasted space, fun cursor --- */
#categoryBooksDisplay,
#midBooksDisplay,
#footerBooksDisplay {
  display: flex;
  overflow-x: auto;
  gap: 0.4rem;
  padding: 0.5rem 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  cursor: grab;
}
#categoryBooksDisplay:hover,
#midBooksDisplay:hover,
#footerBooksDisplay:hover {
  cursor: grab;
}
#categoryBooksDisplay .carousel-book-wrapper,
#midBooksDisplay .carousel-book-wrapper,
#footerBooksDisplay .carousel-book-wrapper {
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 12px;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.11s cubic-bezier(.45,2.2,.6,1), box-shadow 0.22s;
  cursor: pointer; /* palm/hand */
}
#categoryBooksDisplay .carousel-book-wrapper:active,
#midBooksDisplay .carousel-book-wrapper:active,
#footerBooksDisplay .carousel-book-wrapper:active {
  transform: scale(0.95) rotate(-2deg);
  box-shadow: 0 2px 16px #fd7e1430;
}
#categoryBooksDisplay .carousel-book-wrapper:hover,
#midBooksDisplay .carousel-book-wrapper:hover,
#footerBooksDisplay .carousel-book-wrapper:hover {
  transform: scale(1.04) rotate(1.5deg);
  box-shadow: 0 10px 30px #fbc02d1e;
  background: #fffbe6bb;
}

/* --- Book Cover Images: Always Fill the Card --- */
/* Applies to ALL book carousels and grid */
.carousel-book-wrapper img,
.book-card .book-cover,
.custom-card .custom-img,
#midBooksDisplay img,
#categoryBooksDisplay img,
#footerBooksDisplay img {
  width: 130px;
  height: 190px;
  object-fit: contain !important;
  border-radius: 14px !important;
  margin: 0;
  display: block;
  background: #eee;
  border: 3px solid #fbc02d77;
  box-shadow: 0 3px 14px #3287e011;
  transition: box-shadow 0.18s, transform 0.13s;
}


/* --- Book Card Grid: No wasted space --- */
#mu-book-overview .row.g-4 {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0.3rem 0.1rem 1.1rem 0.1rem;
}
.book-grid-item {
  width: 140px;
  margin: 0 0.1rem;
  padding: 0;
  background: none;
}

/* --- Book Card, Minimal, Hug the Cover --- */
.book-card, .custom-card, #midBooksDisplay .carousel-book-wrapper {
  background: none !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  border: none;
  overflow: visible;
  padding: 0;
  margin: 0;
  min-width: unset;
  max-width: unset;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Title under image, tiny padding, no box bg --- */
.card-body, .custom-body, #midBooksDisplay .custom-body, #midBooksDisplay .card-body {
  padding: 0.13rem 0 0.05rem 0 !important;
  margin: 0;
  background: none !important;
  width: 130px !important;
  text-align: center;
}
.card-title, .custom-title, #midBooksDisplay .custom-title, #midBooksDisplay .card-title {
  font-family: 'Baloo 2', 'Noto Sans Bengali', serif;
  font-size: 1.03rem;
  color: #fd7e14;
  font-weight: 800;
  margin: 0.1em 0 0.1em 0;
  white-space: normal; /* This change allows the text to wrap */
  overflow: hidden;
  text-overflow: ellipsis;
  filter: drop-shadow(0px 1px 2px #fffbe6bb);
}

/* --- Badge, Buttons, Accents --- */
.badge {
  font-size: 0.87rem;
  font-weight: 700;
  background: linear-gradient(90deg, #fbc02d 0%, #ef476f 100%);
  color: #fff;
  padding: 0.32em 1em;
  border-radius: 10px;
  box-shadow: 0 2px 7px #4ac7ff25;
}

/* --- Search bar: fun colour accent, rounded --- */
#bookSearch {
  width: 100%;
  max-width: 420px;
  padding: 0.85em 1em;
  font-size: 1.08rem;
  border-radius: 17px;
  border: 2.5px solid #fd7e14;
  background: #fffbe6;
  box-shadow: 0 2px 8px #ef476f1a;
  margin: 1rem auto;
  display: block;
  transition: border 0.14s, box-shadow 0.13s;
}
#bookSearch:focus {
  border-color: #4ac7ff;
  box-shadow: 0 2px 14px #4ac7ff2b;
  background: #fffbe6;
}

/* --- Accordion: Sober Kid-friendly Gold Accent --- */
.accordion-item {
  background: #f8f6f1; /* softer off-white */
  border-radius: 14px !important;
  box-shadow: 0 2px 8px #fbc02d18; /* lighter gold shadow */
  border: 1px solid #f3e6bc; /* soft gold border */
  margin-bottom: 1rem;
}

.accordion-button {
  font-family: 'Baloo 2', 'Noto Sans Bengali', sans-serif;
  background: linear-gradient(90deg, #fdf6df 0%, #f9e7be 100%);
  color: #94660c; /* deep gold-brown */
  font-size: 1.09rem;
  font-weight: bold;
  border-radius: 12px 12px 0 0;
  box-shadow: none;
}

.accordion-button:focus,
.accordion-button:not(.collapsed) {
  background: linear-gradient(90deg, #faecd4 60%, #f3e6bc 100%);
  color: #53401d; /* softer brown */
  outline: 2px solid #b6ae81;
}

/* --- Modal: clean and soft --- */
.modal-content {
  background: rgba(255, 251, 230, 0.98) !important;
  border-radius: 22px !important;
  box-shadow: 0 7px 35px #4ac7ff17;
  border: none !important;
}

/* --- Buttons --- */
.btn {
  border-radius: 17px;
  font-family: 'Baloo 2', Arial, sans-serif;
  font-weight: 700;
  padding: 0.53rem 1.5rem;
  font-size: 1.03rem;
  box-shadow: 0 2px 8px #4ac7ff1a;
  transition: background 0.19s, color 0.19s, box-shadow 0.19s;
}
.btn-success, .btn-primary {
  background: linear-gradient(90deg, #fd7e14, #ffd700 95%);
  border: none;
  color: #fff !important;
}
.btn-success:hover, .btn-primary:hover {
  background: linear-gradient(90deg, #ffd700, #fd7e14 95%);
  color: #fff !important;
  box-shadow: 0 6px 24px #fd7e1425;
}
.btn-secondary {
  background: #fffbe6;
  color: #402312;
}
.btn-secondary:hover, .btn-secondary:focus {
  background: #4ac7ff;
  color: #fff;
}

/* --- Footer --- */
footer {
  background: var(--kid-bg);
  color: #604d23;
  font-family: 'Baloo 2', 'Noto Sans Bengali', sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  border-top: 2px solid #ffd700;
  margin-top: 2.3rem;
  padding: 0.5em 0;
  box-shadow: 0 -3px 16px #fd7e1422;
  letter-spacing: 0.02em;
}

/* --- Book Cover Images: Larger Size --- */
.carousel-book-wrapper img,
.book-card .book-cover,
.custom-card .custom-img,
#midBooksDisplay img,
#categoryBooksDisplay img,
#footerBooksDisplay img {
  width: 190px;
  height: 270px;
  object-fit: contain !important;
  border-radius: 18px !important;
  margin: 0;
  display: block;
  background: #eee;
  border: 3px solid #fbc02d77;
  box-shadow: 0 6px 24px #3287e022;
  transition: box-shadow 0.18s, transform 0.13s;
}

.card-body, .custom-body, #midBooksDisplay .custom-body, #midBooksDisplay .card-body {
  width: 190px !important;
  text-align: center;
  padding: 0.17rem 0 0.13rem 0 !important;
  margin: 0;
  background: none !important;
}
.book-grid-item {
  width: 200px;
  margin: 0 0.15rem;
  padding: 0;
  background: none;
}

#footerBooksDisplay img {
  width: 90px;
  height: 90px;
  /* ... */
}
/* Normal Modal: decent size, centered, visually clean */
#sampleViewerModal .modal-dialog {
  max-width: 520px;
  width: 100%;
  margin: 1.8rem auto;
}

#sampleViewerModal .modal-content {
  background: #fffbe6;
  border-radius: 2.1rem;
  box-shadow: 0 6px 38px #0001, 0 1.5px 8px #ffd60011;
  border: none;
  padding: 0.6rem 0 1.1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Center modal body content */
#sampleViewerModal .modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 390px;
  background: transparent;
  padding: 0.5rem 1rem 0.5rem 1rem;
}
midBooksDisplay
/* In normal mode, image fits nicely */
#sampleViewerImage {
  max-width: 340px;
  max-height: 420px;
  margin: 0 auto;
  display: block;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 3px 12px #ffd60022;
  transition: transform 0.25s cubic-bezier(.42,1.7,.5,.86);
}

/* Navigation and fullscreen buttons */
.sample-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fffbe6;
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 1.55rem;
  color: #fd7e14;
  z-index: 12;
  opacity: 0.92;
  box-shadow: 0 2px 7px #0001;
  transition: background 0.14s, color 0.14s, opacity 0.12s;
}
.sample-nav.left  { left: 24px; }
.sample-nav.right { right: 24px; }
.sample-nav.fullscreen-btn {
  top: 20px;
  right: 65px;
  left: auto;
  transform: none;
  width: 38px;
  height: 38px;
  font-size: 1.25rem;
}
.sample-nav.reset-btn {
  top: 20px;
  right: 110px;
  left: auto;
  transform: none;
  width: 38px;
  height: 38px;
  font-size: 1.25rem;
}
.sample-nav:active, .sample-nav:focus { background: #fd7e14; color: #fff; opacity: 1; }
.sample-nav.d-none { display: none !important; }

/* -------- Fullscreen mode: modal fills viewport, image centered and big -------- */
#sampleViewerModal.fullscreen-mode .modal-dialog {
  max-width: 100vw;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}
#sampleViewerModal.fullscreen-mode .modal-content,
#sampleViewerModal.fullscreen-mode .modal-body {
  height: 100vh;
  width: 100vw;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#sampleViewerModal.fullscreen-mode .sample-image-wrapper {
  height: 94vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sampleViewerModal.fullscreen-mode .sample-image-viewer {
  max-width: 96vw !important;
  max-height: 92vh !important;
  margin: 0 auto;
}
/* If you use a class for each subcategory item: */
.subcategory-item {
  cursor: pointer;
  /* Optionally add a little style for feedback: */
  transition: background 0.13s;
}
.subcategory-item:hover, .subcategory-item:active {
  background: #fffbe6;
  box-shadow: 0 2px 9px #ffd60014;
}

/* If your subcategories are just <li> or <td>: */
li.subcategory, td.subcategory {
  cursor: pointer;
}

/* Or target all subcategory links: */
#subcategoryContainer * {
  cursor: pointer;
}
#midBooksDisplay,#categoryBooksDisplay {
  padding: 0.8rem 0.4rem 1.3rem 0.4rem !important; /* Top, Right, Bottom, Left */
  /* You can adjust the numbers as needed */
  gap: 0.6rem !important; /* Make items a little more spaced out if you like */
}
@keyframes jelly {
  0% { transform: scale(1);}
  30% { transform: scale(1.13, 0.94);}
  40% { transform: scale(0.95, 1.11);}
  60% { transform: scale(1.07, 0.98);}
  100% { transform: scale(1.1);}
}

.carousel-book-wrapper:hover,
.carousel-book-wrapper:focus-within,
.book-card:hover,
.book-card:focus-within {
  animation: jelly 0.38s cubic-bezier(.51,1.3,.54,1.0) 1;
  z-index: 4;
  box-shadow: 0 14px 44px #ffd60044, 0 2px 10px #fd7e1440;
  background: #fffbeeea;
}

/* Make sure book-grid-item gets a pointer cursor and same feel */
.book-card,
.carousel-book-wrapper {
  cursor: pointer;
  transition: box-shadow 0.18s, transform 0.13s;
}
#categoryBooksDisplay img,
#footerBooksDisplay img {
  border-radius: 8px;          /* Slightly rounded corners for a modern look */
  width: 150px;
  height: 210px;               /* Closer to an actual book ratio */
  object-fit: contain;
  border: 1px solid #e0e0e0;   /* Subtle border */
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transition: transform 0.2s cubic-bezier(0.4, 0.2, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0.2, 0.2, 1);
  cursor: pointer;
}

#categoryBooksDisplay img:hover,
#footerBooksDisplay img:hover {
  transform: scale(1.07);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  z-index: 2;
}
/* --- Carousel Section: Horizontal Scroll Always --- */
#categoryBooksDisplay,
#midBooksDisplay,
#footerBooksDisplay {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 0.6rem !important;
  padding: 0.8rem 0.4rem 1.3rem 0.4rem !important;
  cursor: grab;
}

/* --- Navbar Toggler: Black 3-Line Icon --- */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(30,30,30,1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
#mu-hero-canvas {
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
  background: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 0.6;  /* <--- Adjust the value as needed */
}


#mu-hero-canvas img {
  width: 100vw;
  max-width: 100vw;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 0;
  background: #fffbe6;
  transition: opacity 1.2s;
}
#mu-hero-midcanvas,
#mu-hero-footcanvas {
  width: 100vw;
  height: auto;
  overflow: hidden;
}

#mu-hero-midcanvas img,
#mu-hero-footcanvas img {
  width: auto;
  height: 150px;             /* Force image to shrink to 150px height */
  display: block;
  margin: 0 auto;
}


section {
  border-bottom: 3px dashed;
  border-image: linear-gradient(90deg, #ef476f, #fd7e14, #fbc02d, #4ac7ff, #34d399, #ef476f) 1;
  margin-bottom: 2.1rem;
  padding-bottom: 1.3rem;
}
section:last-of-type {
  border-bottom: none;
}
#categoryBooksDisplay,
#midBooksDisplay,
#footerBooksDisplay {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}

#categoryBooksDisplay::-webkit-scrollbar,
#midBooksDisplay::-webkit-scrollbar,
#footerBooksDisplay::-webkit-scrollbar {
  display: none;              /* Chrome, Safari, Opera */
}
.site-wrapper {
  width: 100%;
  max-width: 1750px; /* Or 1280px, depending on your design */
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
/* REPLACE it with this */
.custom-footer {
  width: 100%; /* Ensures it takes the full width in the flex layout */
  background: var(--kid-bg);
  color: #402312;
  font-family: 'Baloo 2', 'Noto Sans Bengali', sans-serif;
  padding: 0.9rem 0.5rem 0.5rem 0.5rem;
  font-size: 1rem;
  border-top: 2px solid #ffd700;
  box-shadow: 0 -3px 16px #fd7e1422;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 0.9rem;      /* Less gap between columns */
}

.footer-column {
  flex: 1 1 250px;  /* Minimum width for mobile friendliness */
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 0.23rem;     /* Reduce gap between items in column */
  margin-bottom: 0.12rem; /* Tight vertical spacing */
}

.footer-column h5 {
  font-size: 1.08rem;
  font-weight: 800;
  margin-bottom: 0.22rem;
  color: #fd7e14;
  letter-spacing: 0.01em;
}

.footer-column p {
  margin: 0 0 0.08rem 0;  /* Tighten */
  line-height: 1.28;
}

.footer-column a {
  color: #402312;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.13s;
}

.footer-column a:hover {
  color: #fd7e14;
  text-decoration: underline;
}

.footer-links {
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
}

.footer-links a {
  margin: 0.11rem 0.28rem;
  display: inline-block;
  font-size: 0.98rem;
}

.footer-credit {
  text-align: center;
  margin-top: 0.5rem;     /* Lower gap above copyright */
  font-weight: 600;
  font-size: 0.94rem;
  color: #4e3b12;
  padding-bottom: 0.3rem; /* Add a touch of bottom spacing */
}

/*--- Owner/Order Info Section ---*/
#viewOrderItemsModal .modal-body > .mb-4 {
  background: #fffbe6;
  border-radius: 20px;
  box-shadow: 0 2px 12px #fbc02d33;
  max-width: 480px;
  margin: 0 auto 18px auto;
  padding: 24px 18px 18px 18px;
}

#viewOrderItemsModal h6.fw-bold {
  font-size: 1.08rem;
  color: #fd7e14;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 7px;
}

#viewOrderItemsModal ul.list-unstyled {
  font-size: 1.03rem;
  margin-bottom: 10px;
  padding-left: 10px;
}

#viewOrderItemsModal ul.list-unstyled li {
  margin-bottom: 3px;
}

#ownerPhone:before {
  content: "📞 ";
}
#ownerWhatsApp:before {
  content: "🟢 ";
}
#ownerEmail:before {
  content: "✉️ ";
}

#viewOrderItemsModal .modal-body > div:not(.mb-4):not(.table-responsive):not(#orderActionButtons):not(.modal-footer) {
  font-size: 1.02rem;
  margin: 4px 0 0 0;
  color: #555;
}
#viewOrderItemsModal #txnStatus {
  font-weight: 600;
  color: #3287e0;
}

/*--- Table ---*/
#viewOrderItemsModal .table-responsive {
  background: #fffbe6;
  border-radius: 14px;
  box-shadow: 0 2px 8px #fd7e1433;
  padding: 1rem 0.6rem 0.3rem 0.6rem;
}

#viewOrderItemsModal table.table {
  background: #fff;
  border-radius: 12px;
  box-shadow: none;
}

#viewOrderItemsModal .table th,
#viewOrderItemsModal .table td {
  vertical-align: middle !important;
  font-size: 1.02rem;
}

#viewOrderItemsModal .table th {
  color: #3287e0;
  background: #fffbe6;
}

#orderActionButtons {
  margin-top: 12px;
}

#backToOrdersBtn {
  border-radius: 17px;
  padding: 0.5em 1.6em;
}

#celebrateBand {
  position: relative;
  background: linear-gradient(90deg, #ffd700 0%, #fffbe6 50%, #fd7e14 100%);
  color: #d7263d;
  font-weight: bold;
  font-size: 1.18rem;
  text-align: center;
  border-radius: 18px;
  margin: 10px auto 14px auto;
  padding: 12px 8px 14px 8px;
  max-width: 440px;
  box-shadow: 0 4px 18px #ffd70022;
  overflow: visible;
  z-index: 2;
  letter-spacing: 0.01em;
  animation: band-pop 0.9s cubic-bezier(.54,1.8,.38,1.1);
}

@keyframes band-pop {
  0% { transform: scale(0.8) translateY(-20px); opacity: 0; }
  60% { transform: scale(1.07) translateY(8px); opacity: 1; }
  90% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.star-animate {
  position: absolute;
  width: 26px; height: 26px;
  pointer-events: none;
  animation: twinkle 2.1s infinite alternate;
  z-index: 3;
  font-size: 1.2em;
}

@keyframes twinkle {
  0% { opacity: 0.7; transform: scale(1) rotate(0deg);}
  55% { opacity: 1; transform: scale(1.14) rotate(15deg);}
  100% { opacity: 0.5; transform: scale(0.93) rotate(-10deg);}
}
.carousel-nav {
  background: #fffbe6;
  border: 2px solid #fd7e14;
  color: #fd7e14;
  border-radius: 50%;
  width: 44px; height: 44px;
  font-size: 1.5rem;
  display: none; /* Hide by default */
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px #fbc02d33;
  cursor: pointer;
  z-index: 4;
  transition: background 0.17s, color 0.13s;
}
.carousel-nav:hover {
  background: #fd7e14;
  color: #fffbe6;
}

.carousel-book-wrapper img,
.book-card .book-cover,
.custom-card .custom-img,
#midBooksDisplay img,
#categoryBooksDisplay img,
#footerBooksDisplay img {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}
/* Book card and container: sharp corners */
.book-card,
.carousel-book-wrapper,
.book-grid-item {
    border-radius: 0 !important;
}

/* Book cover image: sharp corners */
.carousel-book-wrapper img,
.book-card .book-cover,
.custom-card .custom-img,
#midBooksDisplay img,
#categoryBooksDisplay img,
#footerBooksDisplay img {
    border-radius: 0 !important;
}
/* Always force sharp corners on both card and image, including small screens */
.book-card,
.carousel-book-wrapper,
.book-grid-item,
.carousel-book-wrapper img,
.book-card .book-cover,
.custom-card .custom-img,
#midBooksDisplay img,
#categoryBooksDisplay img,
#footerBooksDisplay img {
    border-radius: 0 !important;
}

/* REVIEW BANNER – DESKTOP */
/* REVIEW BANNER — UNIVERSAL RIGHT SIDE (DESKTOP & MOBILE) */
#reviewBanner {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 340px;
  background: rgba(255,251,230,0.97);
  border-radius: 26px 0 0 26px;
  box-shadow: -8px 12px 38px #fd7e1422, 0 4px 34px #fbc02d15;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 16px 18px 22px;
  border-left: 6px solid #fd7e14;
  max-height: 560px;
  min-height: 320px;
  opacity: 1;
  transition: right 0.5s cubic-bezier(.54,1.4,.41,1), opacity 0.4s;
  right: 0;
}

#reviewBanner.collapsed {
  right: -400px;
  opacity: 0;
  pointer-events: none;
  transition: right 0.5s cubic-bezier(.54,1.4,.41,1), opacity 0.4s;
}

/* Collapse Button */
#collapseReviewBannerBtn {
  position: absolute;
  top: 1%;
  left: 90%;
  font-size: 1.27rem;
  color: #fd7e14;
  background: #fffbe6cc;
  border: 2px solid #fbc02d;
  border-radius: 8px;
  padding: 2px 13px 2px 7px;
  cursor: pointer;
  z-index: 3;
  transition: background 0.18s, color 0.15s, box-shadow 0.18s;
}
#collapseReviewBannerBtn:hover {
  background: #fd7e14;
  color: #fff;
  box-shadow: 0 3px 14px #fd7e1422;
}

/* Title */
.review-banner-title {
  font-weight: 900;
  font-size: 1.19rem;
  color: #fd7e14;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Scroller Area */
#reviewBannerScroller {
  overflow: hidden;
  height: 350px;
  width: 100%;
  position: relative;
}

/* Animated Cards */
.review-cards-container {
  display: flex;
  flex-direction: column;
  animation: reviewScrollAnim 18s linear infinite;
}

.review-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 28px #3287e021;
  margin-bottom: 14px;
  padding: 14px 15px 13px 15px;
  display: flex;
  flex-direction: column;
  min-height: 90px;
  max-width: 99%;
  opacity: 0.93;
  transition: box-shadow 0.15s, transform 0.15s;
}
.review-card .reviewer {
  font-weight: 700;
  color: #3287e0;
  font-size: 1.07rem;
  margin-bottom: 2px;
}
.review-card .stars {
  color: #fbc02d;
  font-size: 1.13em;
  margin-bottom: 4px;
  letter-spacing: 0.09em;
}
.review-card .review-text {
  font-size: 1.13rem;
  color: #222;
  margin-top: 2px;
  word-break: break-word;
  line-height: 1.3;
}

@keyframes reviewScrollAnim {
  0% { transform: translateY(0);}
  16% { transform: translateY(0);}
  20% { transform: translateY(-100px);}
  36% { transform: translateY(-100px);}
  40% { transform: translateY(-200px);}
  56% { transform: translateY(-200px);}
  60% { transform: translateY(-300px);}
  76% { transform: translateY(-300px);}
  80% { transform: translateY(-400px);}
  98% { transform: translateY(-400px);} /* Hold at the last review */
  100% { transform: translateY(0);}      /* Snap back to top */
}


/* COLLAPSED TAB — ALWAYS VERTICAL AT RIGHT */
#collapsedReviewBanner {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1081;
  display: none;
}
#expandReviewBannerBtn {
  background: #fffbe6;
  color: #fd7e14;
  border: 2px solid #fbc02d;
  border-radius: 18px 0 0 18px;
  box-shadow: -6px 10px 28px #fd7e1422;
  font-family: 'Baloo 2', 'Noto Sans Bengali', sans-serif;
  font-weight: 800;
  font-size: 1.17rem;
  padding: 11px 13px 11px 13px;
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  min-height: 110px;
  transition: background 0.14s, color 0.13s, box-shadow 0.18s;
  opacity: 0.98;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  justify-content: center;
}
#expandReviewBannerBtn:hover {
  background: #fd7e14;
  color: #fff;
  box-shadow: 0 6px 28px #fd7e1422;
}

/* NO bottom/left/width/mobile override: right-side only, all devices */

/* Loader Styles */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hide content initially */
.site-wrapper {
  display: none;
}
/* --- Digital Library Button Bar --- */
.digital-library-bar {
  padding: 0.5rem 0;
  background: transparent; /* Changed from var(--kid-bg) */
  border-bottom: none;     /* Removed the border */
  box-shadow: none;        /* Removed the shadow */
}

.digital-library-bar .btn {
  background: linear-gradient(90deg, #fd7e14, #ef476f 95%);
  font-size: 1.1rem;
  padding: 0.6rem 2rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.digital-library-bar .btn:hover {
  background: linear-gradient(90deg, #ef476f, #fd7e14 95%);
  transform: scale(1.03);
}
/* =================================== */
/* == SLEEK & COMPACT E-BOOK CARD == */
/* =================================== */

/* Main container for the compact card */
#ebookBooksDisplay .compact-card {
  background-color: transparent;
  border: none;
  text-align: center;
  display: flex;
  flex-direction: column;
}

/* Wrapper for the image and the hover overlay */
#ebookBooksDisplay .compact-card-image-wrapper {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  height: 142px; /* Matches the height from previous steps */
  margin-bottom: 5px; /* Space between image and text */
  border-radius: 4px; /* Optional: slightly rounded corners */
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* The image itself */
#ebookBooksDisplay .compact-card-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures image fills the space cleanly */
  transition: transform 0.3s ease;
}

/* The overlay that appears on hover */
#ebookBooksDisplay .compact-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* The "Read" badge inside the overlay */
#ebookBooksDisplay .read-badge {
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
}

/* --- Hover Effects --- */
#ebookBooksDisplay .compact-card:hover .compact-card-overlay {
  opacity: 1;
}

#ebookBooksDisplay .compact-card:hover img {
  transform: scale(1.05); /* Slight zoom on image */
}

/* --- Compact Text Area --- */
#ebookBooksDisplay .compact-card-body {
  padding: 0 2px;
}

#ebookBooksDisplay .compact-card-title {
  font-size: 0.8rem;
  font-weight: bold;
  color: #333;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ebookBooksDisplay .compact-card-author {
  font-size: 0.75rem;
  color: #777;
  margin: 0;
}