/**
 * Single Product Page Styles
 * 
 * @package SCode_Theme
 */

/* Product Description Styles */
.product-description h1, 
.product-description h2, 
.product-description h3, 
.product-description h4, 
.product-description h5, 
.product-description h6 {
    @apply text-gray-900 font-bold mb-2 bg-gradient-to-r from-red-600 to-red-700 bg-clip-text text-transparent;
}

.product-description p {
    @apply text-gray-700 text-xs leading-relaxed mb-2 font-medium;
}

.product-description ul, 
.product-description ol {
    @apply text-gray-700 text-xs leading-relaxed mb-2 space-y-1;
}

.product-description li {
    @apply flex items-start space-x-2;
}

.product-description li::before {
    @apply text-red-500 font-bold text-xs mr-2 flex-shrink-0;
    content: "✨";
}

.product-description strong {
    @apply text-gray-900 font-bold bg-gradient-to-r from-red-500 to-red-600 bg-clip-text text-transparent;
}

.product-description em {
    @apply text-red-600 font-semibold italic;
}

.product-description a {
    @apply text-red-600 hover:text-red-700 font-semibold underline decoration-2 underline-offset-2 transition-colors duration-300;
}

.product-description blockquote {
    @apply border-l-4 border-red-500 pl-4 py-2 bg-gradient-to-r from-red-50 to-red-100 rounded-r-lg italic text-gray-700;
}

.product-description code {
    @apply bg-gray-100 text-red-600 px-2 py-1 rounded font-mono text-xs;
}

.product-description img {
    @apply max-w-full h-auto my-4 rounded-lg shadow-md mx-auto block;
}

.product-description figure {
    @apply my-4 text-center;
}

.product-description figcaption {
    @apply text-xs text-gray-600 mt-2 italic;
}

.product-description table {
    @apply w-full border-collapse border border-gray-300 my-4 text-xs;
}

.product-description th,
.product-description td {
    @apply border border-gray-300 px-3 py-2;
}

.product-description th {
    @apply bg-gradient-to-r from-red-50 to-red-100 font-bold text-gray-900;
}

/* Enhanced Gallery Styles */
.enhanced-gallery-container {
    position: relative;
}

.main-gallery-wrapper {
    position: relative;
    overflow: hidden;
}

.main-gallery-wrapper img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
}

.thumbnail-gallery-container {
    margin-top: 0.75rem;
}

.thumbnail-item {
    position: relative;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
    overflow: hidden;
}

.thumbnail-item.active {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
}

.thumbnail-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.loading-indicator {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Color Selection Styles */
.color-selection-container {
    position: relative;
}

.color-option {
    position: relative;
    transition: all 0.3s ease;
    border: 3px solid #d1d5db;
}

.color-option.selected {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
    transform: scale(1.1);
}

.color-option:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Model Selection Styles */
.model-selection-container {
    position: relative;
}

.model-option {
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 40px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.model-option.selected {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
    transform: translateY(-2px);
}

.model-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.model-option .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Optimize layout without images */
.model-option .text-center {
    margin-top: 0;
}

/* Responsive Design */
@media (max-width: 640px) {
    .thumbnail-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .model-option {
        padding: 0;
    }
    
    .color-option {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* Animation Enhancements */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.thumbnail-item,
.color-option,
.model-option {
    animation: fadeInUp 0.5s ease-out;
}

.thumbnail-item:nth-child(1) { animation-delay: 0.1s; }
.thumbnail-item:nth-child(2) { animation-delay: 0.2s; }
.thumbnail-item:nth-child(3) { animation-delay: 0.3s; }
.thumbnail-item:nth-child(4) { animation-delay: 0.4s; }
.thumbnail-item:nth-child(5) { animation-delay: 0.5s; }
.thumbnail-item:nth-child(6) { animation-delay: 0.6s; }

/* Single Product Layout */
.single-product-content {
    @apply bg-white;
}

.breadcrumb-section {
    @apply bg-gray-50 border-b border-gray-200;
}

.hero-section {
    @apply bg-gradient-to-br from-gray-50 to-white;
}

.main-content {
    @apply bg-gradient-to-br from-slate-50 via-red-50 to-red-100;
}

/* Product Gallery */
.product-gallery-section {
    @apply sticky top-4;
}

/* Product Info */
.product-info-section {
    @apply sticky top-4;
}

/* Promotional Section */
.promotional-section {
    @apply sticky top-4;
}

/* SCode Grid */
.scode-grid-2 {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-8;
}

.single-product .hero-section .scode-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .single-product .hero-section .scode-grid-2 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 2rem;
        align-items: start;
    }
    .single-product .hero-section .product-gallery-section {
        grid-column: span 7 / span 7;
    }
    .single-product .hero-section .product-info-section {
        grid-column: span 5 / span 5;
    }
}

.scode-grid-3 {
    @apply grid grid-cols-1 lg:grid-cols-3 gap-8;
}

.scode-container {
    @apply container mx-auto px-4 max-w-7xl;
}

/* SCode Buttons */
.scode-btn-primary {
    @apply bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105;
}

.scode-btn-secondary {
    @apply bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105;
}

/* SCode Colors */
.text-scode-red-600 {
    @apply text-red-600;
}

.hover\:text-scode-red-600:hover {
    @apply text-red-600;
}