/* Course Detail Widget Styles */

.course-detail-container {
    font-family: 'Vazirmatn', sans-serif;
}

/* Episode List Styles */
#episode-list button {
    transition: all 0.3s ease;
}

#episode-list button:hover {
    background-color: #eeeeee;
}

#episode-list .rotate-90 {
    transform: rotate(90deg);
}

/* Rating Stars */
.rating-stars .rating-star {
    transition: all 0.2s ease;
}

.rating-stars .rating-star:hover {
    border-color: #facc15;
    transform: scale(1.1);
}

.rating-stars .rating-star span {
    transition: all 0.2s ease;
}

/* Comment Form */
.course-comment-form input:focus,
.course-comment-form textarea:focus {
    border-color: #5A31F4;
    outline: none;
    box-shadow: 0 0 0 3px rgba(90, 49, 244, 0.1);
}

/* Add to Cart Button */
.add-to-cart-btn {
    position: relative;
    overflow: hidden;
}

.add-to-cart-btn:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.add-to-cart-btn:hover:before {
    width: 300px;
    height: 300px;
}

/* Swiper Customization */
.similar-swiper {
    direction: rtl;
}

.similar-swiper .swiper-slide {
    height: auto;
}

/* Details/Summary Styling */
details summary::-webkit-details-marker {
    display: none;
}

details[open] summary {
    margin-bottom: 1rem;
}

/* Sidebar Sticky */
@media (min-width: 1024px) {
    .sticky {
        position: sticky;
        top: 1rem;
    }
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .course-detail-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Line Clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Smooth Transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Loading State */
.add-to-cart-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.add-to-cart-btn.loading:after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Progress Bar Animation */
.course-detail-container .h-2.bg-\[\#7c3aed\] {
    transition: width 1s ease-in-out;
}

/* Hover Effects */
.course-detail-container a:hover {
    text-decoration: none;
}

.course-detail-container .hover\:text-\[\#5A31F4\]:hover {
    color: #5A31F4;
}

.course-detail-container .hover\:bg-\[\#ede9fe\]:hover {
    background-color: #ede9fe;
}

.course-detail-container .hover\:bg-gray-200:hover {
    background-color: #e5e7eb;
}

/* Focus States */
.course-detail-container button:focus,
.course-detail-container input:focus,
.course-detail-container textarea:focus {
    outline: 2px solid #5A31F4;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .add-to-cart-btn,
    .similar-swiper,
    .course-comment-form {
        display: none;
    }
}