/* --- Responsive for Kids (more compact on mobile) --- */
@media (max-width: 600px) {
  .section-title { font-size: 1.07rem; }
  .modal-content { padding: 0.6em; }
  #mu-hero h1, #mu-hero .display-4 { font-size: 1.5rem; }
  
  /* Increase book cover size in carousels */
  .carousel-book-wrapper img,
  .book-card .book-cover,
  .custom-card .custom-img,
  #midBooksDisplay img,
  #categoryBooksDisplay img { 
    width: 100px; 
    height: 140px; 
  }

  /* Increase size for the footer carousel, keeping it square */
  #footerBooksDisplay img {
    width: 75px;
    height: 75px;
  }
  
  /* Adjust card body to match the new image width */
  .card-body, .custom-body, #midBooksDisplay .custom-body, #midBooksDisplay .card-body { 
    width: 100px !important; 
  }
}

/* --- Fix for Heading Visibility on Mobile --- */
@media (max-width: 600px) {
  #frontpageCategoryCarousel {
    margin-top: 70px !important;
    padding-top: 16px;
  }
}

@media (max-width: 576px) {
  .table thead th,
  .table tbody td {
    padding: 0.3rem 0.25rem;
    font-size: 0.95rem;
    white-space: nowrap;
  }
}
@media (max-width: 576px) {
  .modal-body {
    overflow-x: auto;
  }
}

/* Responsive: mobile stack, less gap, smaller fonts */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.17rem;
    padding: 0.3rem 0 0.1rem 0;
  }
  .footer-column {
    width: 100%;
    max-width: 100%;
    align-items: center;
    margin-bottom: 0.08rem;
    gap: 0.11rem;
  }
  .footer-column h5 {
    margin-bottom: 0.09rem;
    font-size: 0.99rem;
  }
  .footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0.1rem 0;
    gap: 0.17rem;
  }
  .footer-links a {
    font-size: 0.92rem;
    margin: 0 0.18rem;
  }
  .footer-credit {
    margin-top: 0.19rem;
    font-size: 0.86rem;
    padding-bottom: 0.14rem;
  }
}

/* Responsive */
@media (max-width: 600px) {
  #viewOrderItemsModal .modal-body > .mb-4 {
    padding: 14px 5px 12px 5px;
    font-size: 0.96rem;
    border-radius: 12px;
  }
  #viewOrderItemsModal .table-responsive {
    padding: 0.2rem 0.2rem 0.1rem 0.2rem;
    border-radius: 10px;
  }
}
@media (max-width: 768px) {
  #viewOrderItemsModal .table-responsive {
    /* Enable scrolling */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Add visible scroll bar for user hint */
    border-bottom: 2px solid #eee;
  }
  #viewOrderItemsModal table.table {
    min-width: 800px; /* Or as wide as needed for all columns */
    font-size: 0.98rem;
  }
}

@media (min-width: 601px) {
  #frontpageCategoryCarousel {
    margin-top: 96px !important;  /* Or your preferred space */
    padding-top: 18px;
  }
}

@media (min-width: 992px) {
  .carousel-nav { display: flex; }
}

@media (max-width: 768px) {
  .site-contactbar .accordion-item {
    border-radius: 14px !important;
    box-shadow: 0 2px 8px #fbc02d18;
    border: 1px solid #f3e6bc;
    margin-bottom: 1rem;
  }
  .site-contactbar .accordion-button {
    font-size: 1.08rem;
    font-family: 'Baloo 2', 'Noto Sans Bengali', sans-serif;
  }
  .site-contactbar .footer-container {
    gap: 0.7rem;
    padding: 0.1rem 0.3rem;
  }
}
/* Hide carousel navigation arrows on mobile */
@media (max-width: 768px) {
  .carousel-nav {
    display: none !important;
  }
}

/* (Optional) Ensure arrows are flex on larger screens */
@media (min-width: 769px) {
  .carousel-nav {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  /* Only target cards inside #mu-book-overview */
  #mu-book-overview .book-card,
  #mu-book-overview .carousel-book-wrapper,
  #mu-book-overview .book-grid-item {
    width: 120px !important;         /* <-- Card width (INCREASED) */
    min-width: 120px !important;
    max-width: 135px !important;
    padding: 0 !important;
    margin: 0 0.15rem !important;
  }

  #mu-book-overview .card-body,
  #mu-book-overview .custom-body,
  #mu-book-overview #midBooksDisplay .custom-body,
  #mu-book-overview #midBooksDisplay .card-body {
    width: 102px !important;
    padding: 0.18rem 0 0.08rem 0 !important;
  }

  #mu-book-overview .carousel-book-wrapper img,
  #mu-book-overview .book-card .book-cover,
  #mu-book-overview .custom-card .custom-img,
  #mu-book-overview #midBooksDisplay img,
  #mu-book-overview #categoryBooksDisplay img,
  #mu-book-overview #footerBooksDisplay img {
    width: 96px !important;
    height: 128px !important;
    min-width: 70px !important;
    min-height: 104px !important;
    max-width: 115px !important;
    max-height: 155px !important;
    border-radius: 0px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 600px) {
  .carousel-book-wrapper img,
  .book-card .book-cover,
  .custom-card .custom-img,
  #midBooksDisplay img,
  #categoryBooksDisplay img,
  #footerBooksDisplay img,
  .book-card,
  .carousel-book-wrapper,
  .book-grid-item {
    border-radius: 0 !important;
  }
}

@media print {
  body * {
    visibility: hidden !important;
  }
  #printOrderSlip, #printOrderSlip * {
    visibility: visible !important;
  }
  #printOrderSlip {
    position: absolute !important;
    left: 0; top: 0; width: 100vw !important; height: auto !important;
    margin: 0 !important; padding: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    border: none !important;
    z-index: 9999;
  }
  .modal-footer, .btn, button {
    display: none !important;
  }
}

@media (max-width: 600px) {
  /* Only wrap Bill No. column text on mobile in enhancedOrdersModal */
  #enhancedOrdersModal .billnos-cell {
    white-space: normal !important;
    word-break: break-word;
    font-size: 0.92rem;
    line-height: 1.33;
    max-width: 120px; /* Adjust width as needed */
    min-width: 70px;
  }
  #enhancedOrdersModal .billnos-cell a {
    display: inline-block;
    margin-bottom: 2px;
    word-break: break-word;
    font-size: 0.93rem;
  }
}

/* (Optional) Responsive tweaks: adjust font/size on tiny screens */
@media (max-width: 500px) {
  #reviewBanner {
    width: 98vw;
    min-width: 220px;
    max-width: 98vw;
    padding: 12px 4px 12px 8px;
  }
  #expandReviewBannerBtn {
    font-size: 0.99rem;
    padding: 9px 7px;
    min-height: 70px;
  }
}
/* DELETE THIS ENTIRE BLOCK FROM RESPONSIVE.CSS */

/* =================================================================== */
/* ==  FIX FOR CAPACITOR/MOBILE FIXED HEADER & FOOTER == */
/* =================================================================== */
@media (max-width: 768px) {
  :root {
    --header-height: 75px;
    --footer-height: 80px;
  }
  body {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top));
    padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom));
  }
  .navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    padding-top: env(safe-area-inset-top);
  }
  .custom-footer {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}
/* =================================================================== */
/* == NEW FLEXBOX FIX for App-Style Header/Footer == */
/* =================================================================== */
@media (max-width: 768px) {
  html, body {
    height: 100%;
    overflow: hidden; /* Prevent the whole page from scrolling */
  }

  body {
    display: flex;
    flex-direction: column; /* Stack header, main, and footer vertically */
  }

  /* Header (Navbar) */
  .navbar {
    flex-shrink: 0; /* Prevent the header from shrinking */
    position: static; /* Override any 'fixed' positioning */
    padding-top: env(safe-area-inset-top); /* Still needed for device notch */
  }

/* REPLACE it with this */

.main-content {
  flex-grow: 1;
   padding-top: 2rem !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  
}

/* This targets WebKit browsers like Chrome, Safari, and Capacitor's WebView */
.main-content::-webkit-scrollbar {
  display: none;
}

  /* Footer */
  .custom-footer {
    flex-shrink: 0; /* Prevent the footer from shrinking */
    position: static; /* Override any 'fixed' positioning */
    padding-bottom: env(safe-area-inset-bottom); /* Still needed for home bar */
  }
}

@media (max-width: 768px) {
  /* Add padding to the inner container to push the content down */
  .navbar > .container-fluid {
    padding-top: 2rem !important;
   
  }
}
  /* Reduce the vertical padding inside the footer */
  .custom-footer {
    padding-bottom: 2rem !important;
  }
}
/* ============================================== */
/* == RESPONSIVE - SLEEK & COMPACT E-BOOK CARD == */
/* ============================================== */

@media (max-width: 768px) {

  /* On touch devices, make the overlay always visible instead of hover-only */
  #ebookBooksDisplay .compact-card-overlay {
    opacity: 1;
    /* Make the overlay slightly lighter as it's always visible */
    background-color: rgba(0, 0, 0, 0.55);
  }

  /* Disable the zoom-on-hover effect for the image on touch devices */
  #ebookBooksDisplay .compact-card:hover img {
    transform: none;
  }

  /* Adjust the font size of the badge for smaller screens */
  #ebookBooksDisplay .read-badge {
    font-size: 0.75rem;
    padding: 5px 10px;
  }
}
/* ========================================= */
/* ==   HORIZONTAL & RESPONSIVE ICON MENU   == */
/* ========================================= */

/* --- Base Style (for Desktop) --- */
.icon-carousel-container {
  display: flex;
  justify-content: center; /* Centers the icons in the available space */
  align-items: flex-start;
  flex-wrap: wrap;         /* Allows icons to wrap if the screen is too narrow */
  gap: 1.5rem;             /* Adjust the space between icons */
  padding: 1rem 0;
 
}

/* --- Styling for each individual icon block --- */
.icon-carousel-item {
  display: flex;
  flex-direction: column;   /* Stacks the icon on top of the text */
  align-items: center;      /* Centers the icon and text */
  min-width: 90px;
  text-decoration: none;
  color: #402312;
  font-family: 'Baloo 2', 'Noto Sans Bengali', sans-serif;
  transition: color 0.2s;
}

.icon-carousel-item:hover {
  color: var(--orange);
}

/* --- Icon styling --- */
.icon-carousel-item i {
  margin-bottom: 0.5rem;
}

/* --- Text label styling --- */
.icon-carousel-item span {
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}


/* --- Mobile Override (turns it into a scrollable carousel) --- */
@media (max-width: 991.98px) {
  .icon-carousel-container {
    justify-content: flex-start; /* Aligns items to the start for scrolling */
    overflow-x: auto;            /* Enables horizontal scrolling */
    flex-wrap: nowrap;           /* Prevents icons from wrapping to the next line */
    padding: 1rem 0.5rem;
    gap: 1rem;

    /* Hides the scrollbar for a cleaner look */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .icon-carousel-container::-webkit-scrollbar {
    display: none;
  }
}
/* --- Add unique colors to each carousel icon --- */
.admin-icon i { color: #3287e0; }    /* Blue */
.billing-icon i { color: #34d399; } /* Emerald */
.orders-icon i { color: #fd7e14; }  /* Orange */
.about-icon i { color: #4ac7ff; }   /* Sky */
.privacy-icon i { color: #ef476f; } /* Red */
.password-icon i { color: #fbc02d; }/* Gold */
.home-icon-colorful .fas.fa-home {
  /* Apply the gradient to the icon text */
  background: linear-gradient(
    45deg,
    #ff6b6b, /* Red */
    #feca57, /* Orange */
    #ffeaa7  /* Light Yellow */
  );
  -webkit-background-clip: text; /* Clip the background to the text shape */
  -webkit-text-fill-color: transparent; /* Make the text transparent to show the background */
  background-clip: text;
  color: transparent; /* Fallback for browsers that don't support -webkit-text-fill-color */
}

/* Optional: Add a subtle hover effect if desired */
.home-icon-colorful:hover .fas.fa-home {
  transform: scale(1.1); /* Slightly enlarge on hover */
  transition: transform 0.3s ease;
}
/* --- Fix for User Name visibility on Mobile --- */
@media (max-width: 768px) {
  #userDisplayName {
    /* Make the font smaller to fit on one line */
    font-size: 0.9rem;

    /* These properties are a safeguard for very long names */
    white-space: nowrap;     /* Prevent the name from wrapping */
    overflow: hidden;        /* Hide the part of the name that doesn't fit */
    text-overflow: ellipsis; /* Add '...' at the end of a hidden name */
    
    /* Give the element a maximum width to prevent it from pushing other items */
    max-width: 120px;        /* Adjust this width as needed */
    display: inline-block;   /* Allows max-width to work on a <span> */
    vertical-align: middle;  /* Ensures it aligns nicely with the logo */
  }
}