/* Product Gallery Styles */
.product-gallery {
   position: relative;
}

/* Main Image Container */
.main-image-container {
   position: relative;
   background-color: #f8f9fa;
   border-radius: 8px;
   overflow: hidden;
}

.main-image-wrapper {
   position: relative;
   width: 100%;
   padding-top: 100%; /* Square aspect ratio */
}

.main-image {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: none;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.main-image.active {
   display: block;
   opacity: 1;
}

.main-image img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   cursor: zoom-in;
   transition: transform 0.3s ease;
}

.main-image img:hover {
   transform: scale(1.05);
}

/* Navigation Buttons */
.gallery-nav-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.5);
   color: white;
   border: none;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10;
   transition: all 0.3s ease;
}

.gallery-nav-btn:hover {
   background: rgba(0, 0, 0, 0.7);
   transform: translateY(-50%) scale(1.1);
}

.gallery-nav-btn.prev-btn {
   left: 10px;
}

.gallery-nav-btn.next-btn {
   right: 10px;
}

/* Thumbnail Container */
.thumbnail-container {
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: thin;
}

.thumbnail-wrapper {
   display: flex;
   gap: 8px;
   padding: 4px 0;
}

.thumbnail-item {
   flex-shrink: 0;
   width: 60px;
   height: 60px;
   border: 2px solid #dee2e6;
   border-radius: 4px;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.3s ease;
   background-color: #fff;
}

.thumbnail-item:hover {
   border-color: #ffc107;
   transform: scale(1.05);
}

.thumbnail-item.active {
   border-color: #ffc107;
   box-shadow: 0 0 0 1px #ffc107;
}

.thumbnail-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Scrollbar สำหรับ thumbnail */
.thumbnail-container::-webkit-scrollbar {
   height: 6px;
}

.thumbnail-container::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 10px;
}

.thumbnail-container::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 10px;
}

.thumbnail-container::-webkit-scrollbar-thumb:hover {
   background: #555;
}

/* Responsive */
@media (max-width: 576px) {
   .thumbnail-item {
         width: 50px;
         height: 50px;
   }
   
   .gallery-nav-btn {
         width: 35px;
         height: 35px;
         font-size: 14px;
   }
}

/* Unit Option Item */
.unit-option-item {
   padding: 8px 12px;
   margin-bottom: 8px;
   border: 1px solid #dee2e6;
   border-radius: 6px;
   transition: all 0.3s ease;
}

.unit-option-item:hover {
   background-color: #f8f9fa;
   border-color: #ffc107;
}

/* Unit Thumbnail Image */
.unit-image-container {
   flex-shrink: 0;
}

.unit-thumbnail {
   width: 50px;
   height: 50px;
   object-fit: cover;
   border-radius: 4px;
   border: 2px solid #dee2e6;
   transition: all 0.3s ease;
}

.unit-thumbnail:hover {
   transform: scale(1.1);
   border-color: #ffc107;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* เมื่อ radio ถูกเลือก */
.form-check-input:checked ~ label {
   font-weight: 600;
   color: #000;
}

.form-check-input:checked ~ .unit-image-container .unit-thumbnail {
   border-color: #ffc107;
   box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.3);
}

/* Modal Unit Image */
.modal-unit-image {
   cursor: zoom-in;
   transition: transform 0.3s ease;
}

.modal-unit-image:hover {
   transform: scale(1.05);
}

/* Responsive */
@media (max-width: 576px) {
   .unit-thumbnail {
         width: 40px;
         height: 40px;
   }
   
   .unit-option-item {
         padding: 6px 10px;
   }
}