/*
 * Shared image lightbox modal styles.
 *
 * Extracted (copied, not moved) from allimages.blade.php's inline <style> block so
 * car-deatils.blade.php and car-varient.blade.php can use the identical "All Images" /
 * "Colours" modal without duplicating ~140 lines of CSS inline on each page.
 *
 * allimages.blade.php keeps its own inline copy untouched on purpose - that page was
 * just fixed and confirmed working, so it isn't being refactored to depend on this file.
 */

.noscroll {
  overflow: hidden;
}

.gallery__navigation--next, .gallery__navigation--prev, .gallery__navigation--close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font-size: 0;
  height: 42px;
  width: 42px;
  opacity: 0.9;
  overflow: hidden;
  padding: 0;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  z-index: 10;
  border-radius: 60px;
  background: linear-gradient(90deg, rgba(7, 45, 23, 1) 50%, #2c5b36 100%);
}
.gallery__navigation--next:hover, .gallery__navigation--prev:hover, .gallery__navigation--close:hover {
  opacity: 1;
}
.gallery__navigation--next::before, .gallery__navigation--prev::before {
  display: flex;
  content: "";
  border: solid #fff;
  border-width: 0 0.2rem 0.2rem 0;
  padding: 0.4rem;
}
.gallery__navigation--prev, .gallery__navigation--next {
  top: 50%;
}
.gallery__navigation--next {
  right: 12px;
  transform: translateY(-50%) rotate(-45deg);
}
.gallery__navigation--prev {
  left: 12px;
  transform: translateY(-50%) rotate(135deg);
}
.gallery__navigation--next:hover {
  transform: translateY(-50%) rotate(-45deg) scale(1.1);
}
.gallery__navigation--prev:hover {
  transform: translateY(-50%) rotate(135deg) scale(1.1);
}
.gallery__navigation--close {
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.55);
}
.gallery__navigation--close::before {
  position: absolute;
  background-color: #fff;
  content: " ";
  height: 18px;
  width: 2px;
  transform: rotate(45deg);
}
.gallery__navigation--close::after {
  position: absolute;
  background-color: #fff;
  content: " ";
  height: 18px;
  width: 2px;
  transform: rotate(-45deg);
}
.gallery__modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Hard guard against anything inside (long unbroken text, a wider-than-expected
     child, etc.) ever pushing the page into horizontal scroll - same class of bug
     as the nice-select .list overflow fixed earlier. Clips any internal overflow to
     this fixed, full-viewport box instead of letting it inflate document scrollWidth. */
  overflow-x: hidden;
  /* 100% (and 100vh) on mobile Safari/Chrome is measured against the LARGEST
     possible viewport (address bar hidden), not the viewport actually visible
     when the address bar is showing - so the frame renders taller than the
     visible screen and the user has to pinch-zoom out to see the whole thing.
     100dvh tracks the real, currently-visible viewport instead. Kept as a
     second declaration (not a replacement) so browsers that don't support dvh
     silently keep the 100% fallback above. */
  height: 100dvh;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
}
.inner_gallery_modal {
  background-color: #fff;
  width: 100%;
  max-width: 900px;
  /* Without this, a flex/centered child's default min-width:auto can let its own
     content (e.g. a long unbroken line of text somewhere inside) force this box
     wider than the space actually available, which is what was pushing the page
     into horizontal scroll on mobile. */
  min-width: 0;
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 50px 20px 20px;
  border-radius: 10px;
  position: relative;
  overflow-y: auto;
  box-sizing: border-box;
}
.gallery__modal-image {
  display: block;
  margin: 0 auto 20px;
  max-width: 100%;
  max-height: 65vh;
  max-height: 65dvh;
  width: auto;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  border-radius: 6px;
}
.modal-color-name {
  color: white !important;
  background: green !important;
  padding: 10px;
  margin-top: -54px;
  border-radius: 30px;
  font-size: 16px;
  height: 30px;
  display: flex;
  align-items: center;
}
@media (max-width:480px){
	.gallery__modal {
		padding: 10px;
	}
	.inner_gallery_modal{
		max-height: 92vh;
		max-height: 92dvh;
		padding: 44px 10px 15px;
	}
	.gallery__modal-image {
		max-height: 55vh;
		max-height: 55dvh;
	}
	.gallery__navigation--prev {
		left: 6px;
	}
	.gallery__navigation--next {
		right: 6px;
	}
	.gallery__navigation--close {
		top: 8px;
		right: 8px;
	}
}

.gallery__thumbnails {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
	white-space: nowrap;
	scrollbar-width: thin;
    scroll-behavior: smooth;
}

.gallery__thumbnails::-webkit-scrollbar {
    height: 6px;
}

.gallery__thumbnails::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

.gallery__thumbnails::-webkit-scrollbar-track {
    background-color: #333;
    border-radius: 4px;
}

.gallery__thumbnails::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.thumbnail {
    height: 60px;
    width: auto;
    flex-shrink: 0;
    margin: 0 5px;
    padding:2px;
    cursor: pointer;
    transition: transform 0.2s;
}
.thumbnail:hover {
    transform: scale(1.08);
}

.thumbnail.active-thumbnail {
    padding:0;
    border: 2px solid #007bff;
}