@charset "UTF-8";
/* This CSS Document is to make theimages of the lightbox appear larger.*/

/* Target the image inside the lightbox container */
#lightbox img,
.lb-image,
.lb-dataContainer img {
  max-width: 90vw !important;
  max-height: 90vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* If there's a container wrapping the image */
.lb-outerContainer {
  max-width: 90vw !important;
  max-height: 90vh !important;
  width: auto !important;
  height: auto !important;
}

/* ===== Custom Lightbox Caption Styling (Q&S Islamic Store) ===== */

/* === Adjust Lightbox footer layout | Q&S Islamic Store === */

/* Keep caption centred as before */
.lb-data .lb-caption {
  display: block !important;
  text-align: center !important;
  line-height: 1.5 !important;
  color: #eee !important;
  font-size: 1rem !important;
  margin: 0 auto !important;
  max-width: 90% !important;
}

/* Subline styling */
.lb-caption .caption-subline {
  display: block !important;
  text-align: center !important;
  color: #ccc !important;
  margin-top: 0.25rem !important;
  font-size: 0.9rem !important;
}

/* Put the image number and X close button on the same horizontal line below the caption */
.lb-data .lb-details {
  float: none !important;
  width: 100% !important;
  text-align: center !important;
}

.lb-data {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 40px !important;
  box-sizing: border-box !important;
}

/* Create a footer bar for image number + close button */
.lb-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 5px !important;
}

/* Image number (left) */
.lb-footer .lb-number {
  text-align: left !important;
  flex: 1 !important;
}

/* Close button (right) */
.lb-footer .lb-closeContainer {
  text-align: right !important;
  flex: 1 !important;
}


/* --- Caption colour refinement --- */
/* === Force soft caption colours in Lightbox | Q&S Islamic Store === */

/* main caption title */
html body .lb-data .lb-caption {
  color: #ccc !important;   /* soft off-white */
}

/* subline (the smaller note) */
html body .lb-data .lb-caption .caption-subline {
  color: #ccc !important;   /* lighter grey */
}

/* Force caption colours with higher specificity than Lightbox */
#lightbox .lb-data .lb-caption { 
  color: #ccc !important;            /* main title line */
}

#lightbox .lb-data .lb-caption .caption-subline { 
  color: #ccc !important;            /* second line */
}

/* === FINAL COLOUR FIX FOR LIGHTBOX CAPTION === */

/* main caption text */
html body #lightboxOverlay + #lightbox .lb-data .lb-caption {
  color: #ccc !important; /* soft off-white for first line */
}

/* subline text */
html body #lightboxOverlay + #lightbox .lb-data .lb-caption .caption-subline {
  color: #ccc !important; /* lighter grey for second line */
}

/* === Ensure consistent Lightbox footer/margin across all images === */

/* === Consistent & Flush Lightbox Footer Layout | Q&S Islamic Store === */

/* Make data area full-width with no side padding */
#lightbox .lb-data,
#lightboxOverlay + #lightbox .lb-data {
  width: 100% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Caption: centre-aligned text, no artificial width restriction */
#lightbox .lb-data .lb-caption {
  display: block !important;
  text-align: center !important;
  line-height: 1.5 !important;
  color: #ccc !important;
  font-size: 1rem !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Subline below caption */
#lightbox .lb-data .lb-caption .caption-subline {
  display: block !important;
  text-align: center !important;
  color: #ccc !important;
  margin-top: 0.25rem !important;
  font-size: 0.9rem !important;
}

/* Footer row (image count + close button) */
#lightbox .lb-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 10px !important; /* small native gutter */
  margin-top: 4px !important;
}

/* Left side number */
#lightbox .lb-footer .lb-number {
  text-align: left !important;
  margin: 0 !important;
}

/* Right side close button */
#lightbox .lb-footer .lb-closeContainer {
  text-align: right !important;
  margin: 0 !important;
}

/* === RESPONSIVE IMAGE SCALING FOR LIGHTBOX | Q&S Islamic Store === */
/* This makes all the images the centre of the page. */
/* Default (desktops & laptops) */
#lightbox .lb-image {
  max-width: 95vw !important;    /* fill most of viewport width */
  max-height: 85vh !important;   /* keep comfortable vertical padding */
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;     /* ensures centering */
}

/* Ensure the outer container never leaves blank black columns */
#lightbox .lb-outerContainer,
#lightbox .lb-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Tablets */
@media (max-width: 1024px) {
  #lightbox .lb-image {
    max-width: 94vw !important;
    max-height: 80vh !important;
  }
}

/* Mobile devices */
@media (max-width: 600px) {
  #lightbox .lb-image {
    max-width: 90vw !important;   /* slightly smaller for narrow screens */
    max-height: 75vh !important;
  }
}

/* === ALWAYS SHOW LIGHTBOX NAVIGATION ARROWS | Q&S Islamic Store === */

/* Make the previous/next arrows visible at all times */
#lightbox .lb-prev,
#lightbox .lb-next {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.2s ease-in-out;
}

/* Keep them slightly dim by default so they don't overpower the image */
#lightbox .lb-prev,
#lightbox .lb-next {
  filter: brightness(0.8) !important;
}

/* Optional hover effect (brighten slightly when hovered) */
#lightbox .lb-prev:hover,
#lightbox .lb-next:hover {
  filter: brightness(1) !important;
}

/* Adjust arrow positioning for mobile */
@media (max-width: 600px) {
  #lightbox .lb-prev,
  #lightbox .lb-next {
    width: 12vw !important;         /* slightly smaller touch zones */
    background-size: 25px 40px !important;
  }
}