/* Product Image Gallery Styles */
.swiper-container {
    width: 100%;
    max-width: 600px; /* Set a max width for the slider */
    margin: 0 auto; /* Center the slider */
    overflow: hidden; /* Prevent overflow */
}

.swiper-slide {
    height: 400px; /* Set a fixed height for the slides */
    display: flex; /* Center images */
    align-items: center; /* Center images vertically */
    justify-content: center; /* Center images horizontally */
}

.swiper-button-next,
.swiper-button-prev {
    width: 30px; /* Adjust width */
    height: 30px; /* Adjust height */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for vertical centering */
    z-index: 10; /* Ensure buttons are above other elements */
    position: absolute; /* Position over the images */
    right: 10px; /* Position to the right */
}

.thumbnail-item {
    margin-top: 10px; /* Add margin for spacing */
    position: relative; /* Ensure proper positioning */
    display: inline-block; /* Ensure thumbnails are inline */
}

.thumbnail-item {
    margin-top: 10px; /* Add margin for spacing */
    position: relative; /* Ensure proper positioning */
}

.swiper-slide img {
    width: 100%; /* Ensure images take full width of the slide */
    height: auto; /* Maintain aspect ratio */
}

.thumbnail-item {
    transition: all 0.2s ease;
    border: 2px solid transparent;
    margin-top: 10px; /* Add margin for spacing */
}

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

.thumbnail-item img {
    object-fit: cover;
}

/* Review System Styles */
.rating-star {
    transition: all 0.2s ease;
    cursor: pointer;
}

.rating-star:hover {
    transform: scale(1.1);
}

.review-form {
    transition: all 0.3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.review-form.visible {
    max-height: 1000px;
    opacity: 1;
}

.helpful-btn {
    transition: all 0.2s ease;
}

.helpful-btn:hover {
    transform: translateY(-1px);
}

.helpful-btn:active {
    transform: translateY(0);
}

/* Review rating breakdown bars */
.bg-yellow-400 {
    transition: width 0.5s ease;
}

/* Toast notifications */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideIn 0.3s ease, fadeOut 0.3s ease 4.7s forwards;
}

.toast-success {
    background-color: #10B981;
}

.toast-error {
    background-color: #EF4444;
}

.toast-info {
    background-color: #3B82F6;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Review loading states */
.review-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Additional styles... */