/* Product Detail Widget - Redesigned Layout Styles */

/* Main Container */
.hep-pd {
    direction: rtl !important;
}

/* Header Section */
.hep-pd .text-gray-600 a:hover {
    color: #5A31F4 !important;
    transition: color 0.3s ease !important;
}

/* Main Content Layout */
.hep-pd .flex-col.lg\:flex-row {
    gap: 2rem !important;
}

/* Left Column - Seller Info & Add to Cart */
.hep-pd-sidebar-card {
    background: #ede7fa !important;
    border: 1px solid #bba6f7 !important;
    border-radius: 32px !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    padding: 1.5rem !important;
}

.hep-pd-sidebar-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Seller Info Sections */
.hep-pd-sidebar-card .text-\[\#a58cf7\] {
    color: #a58cf7 !important;
    font-weight: 700 !important;
}

.hep-pd-sidebar-card .text-gray-800 {
    color: #1F2937 !important;
    font-weight: 600 !important;
}

.hep-pd-sidebar-card .text-gray-400 {
    color: #9CA3AF !important;
}

/* Best Price Text */
.hep-pd-sidebar-card > div > div:first-child {
    color: #a58cf7 !important;
}

/* Color Selection */
.hep-pd-sidebar-card .w-8.h-8,
.hep-pd-sidebar-card .w-10.h-10 {
    transition: all 0.3s ease !important;
    border-width: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.hep-pd-sidebar-card .w-8.h-8:hover,
.hep-pd-sidebar-card .w-10.h-10:hover {
    transform: scale(1.05) !important;
    border-color: #a58cf7 !important;
    box-shadow: 0 4px 12px rgba(165, 140, 247, 0.3) !important;
}

/* Price Section */
.hep-pd-discount-badge {
    background: #ef4444 !important;
    box-shadow: none !important;
    animation: none !important;
}

.hep-pd-old-price {
    text-decoration: line-through !important;
    color: #9CA3AF !important;
}

.hep-pd-new-price {
    color: #000000 !important;
    text-shadow: none !important;
}

.hep-pd-currency {
    color: #9CA3AF !important;
}

/* Add to Cart Button */
.hep-pd-add-btn {
    background: #7c3aed !important;
    color: #fff !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    font-weight: 700 !important;
    margin-top: 1rem !important;
    letter-spacing: 0 !important;
    border-radius: 1rem !important;
}

.woocommerce .quantity .qty {
    text-align: center !important;
    width: 100% !important;
    background: transparent !important;
    border: 1px solid #ccc !important;
    margin: 0.6rem 0 !important;
    padding: 0.5rem !important;
    border-radius: 0.5rem !important;
}

.hep-pd-add-btn:hover {
    background: #5a31f4 !important;
    transform: none !important;
    box-shadow: none !important;
}

.hep-pd-add-btn:active {
    transform: none !important;
}

/* Middle Column - Product Details */
.hep-pd .text-gray-500 {
    color: #6B7280 !important;
}

.hep-pd .text-gray-800 {
    color: #1F2937 !important;
}

/* Badges */
.hep-pd .px-3.py-1\.5 {
    border-radius: 0.5rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

.hep-pd .px-3.py-1\.5:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Product Title */
.hep-pd-title {
    color: #111827 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    line-height: 1.3 !important;
}

/* Features Section */
.hep-pd .bg-white.rounded-2xl {
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

.hep-pd .bg-white.rounded-2xl:hover {
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.hep-pd-features li {
    color: #374151 !important;
    transition: color 0.3s ease !important;
}

.hep-pd-features li:hover {
    color: #5A31F4 !important;
}

/* Show More Button */
.hep-pd .bg-gray-100.text-\[#5A31F4\] {
    background: #f3f4f6 !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.hep-pd .bg-gray-100.text-\[#5A31F4\]:hover {
    background: #e5e7eb !important;
    border-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Return Policy & FAQ */
.hep-pd .bg-gray-100.rounded-2xl {
    background: #f3f4f6 !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.hep-pd .bg-gray-100.rounded-2xl:hover {
    background: #f3f4f6 !important;
    transform: none !important;
}

.hep-pd .bg-white.border.border-gray-200 {
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

.hep-pd .bg-white.border.border-gray-200:hover {
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Right Column - Product Images */
.hep-pd .bg-white.rounded-\[32px\] {
    border: none !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.hep-pd .bg-white.rounded-\[32px\]:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Thumbnails Container - Match Reference HTML */
#productThumbnails {
    display: flex !important;
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
    overflow-x: auto !important;
    width: 100% !important;
    justify-content: center !important;
}

/* Individual Thumbnail Images */
#productThumbnails img {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 0.75rem !important;
    border-width: 2px !important;
    object-fit: cover !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

/* Responsive thumbnail sizes */
@media (min-width: 640px) {
    #productThumbnails img {
        width: 4rem !important;
        height: 4rem !important;
    }
}

/* Active thumbnail state */
#productThumbnails img.border-\[#5A31F4\] {
    border-color: #5A31F4 !important;
}

/* Hover state for thumbnails */
#productThumbnails img:hover {
    border-color: #5A31F4 !important;
}

/* Long Description Section */
.hep-pd .bg-white.rounded-2xl.shadow {
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

.hep-pd .bg-white.rounded-2xl.shadow:hover {
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.hep-pd-long-desc {
    color: #374151 !important;
    line-height: 1.8 !important;
}

.hep-pd-long-desc p {
    margin-bottom: 1rem !important;
}

.hep-pd-long-desc ul {
    margin: 1.5rem 0 !important;
    padding-right: 1.5rem !important;
}

.hep-pd-long-desc li {
    margin-bottom: 0.5rem !important;
    color: #4B5563 !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hep-pd .flex-col.lg\:flex-row {
        gap: 1.5rem !important;
    }
    
    .hep-pd-sidebar-card {
        border-radius: 24px !important;
        padding: 1.5rem !important;
    }
    
    .hep-pd .bg-white.rounded-\[32px\] {
        border-radius: 24px !important;
    }
}

@media (max-width: 768px) {
    .hep-pd-sidebar-card {
        border-radius: 20px !important;
        padding: 1rem !important;
    }
    
    .hep-pd .bg-white.rounded-\[32px\] {
        border-radius: 20px !important;
    }
    
    #productThumbnails {
        gap: 0.5rem !important;
    }
    
    #productThumbnails img {
        width: 3rem !important;
        height: 3rem !important;
    }
}

/* Focus States */
.hep-pd button:focus,
.hep-pd a:focus {
    outline: 2px solid #5A31F4 !important;
    outline-offset: 2px !important;
}

/* Loading States */
.hep-pd-add-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Badge Ribbons Styling */
.hep-pd .absolute.top-5 {
    position: absolute !important;
    top: 1.25rem !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    z-index: 10 !important;
}

@media (min-width: 640px) {
    .hep-pd .absolute.top-5 {
        left: -1.25rem !important;
    }
}

.hep-pd .absolute.top-5 > div {
    min-width: 120px !important;
    max-width: 200px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

@media (min-width: 640px) {
    .hep-pd .absolute.top-5 > div {
        min-width: 150px !important;
    }
}

/* Hide scrollbar for thumbnails */
#productThumbnails {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

#productThumbnails::-webkit-scrollbar {
    display: none !important;
}

/* Gallery Column - Match Reference HTML */
.hep-pd .w-full.lg\:w-1\/3 {
    position: relative !important;
}

/* Main Product Image */
#mainProductImage {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    transition: all 0.2s ease !important;
    max-height: 500px !important;
}

@media (min-width: 640px) {
    #mainProductImage {
        max-height: 600px !important;
    }
}

@media (min-width: 1024px) {
    #mainProductImage {
        max-height: 700px !important;
    }
}

/* Grid Layout */
.hep-pd-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
}

@media (min-width: 1024px) {
    .hep-pd-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        gap: 2rem !important;
    }
}

/* Column Spans */
.hep-pd-gallery-col {
    grid-column: span 12 !important;
}

.hep-pd-desc-col {
    grid-column: span 12 !important;
}

.hep-pd-details-col {
    grid-column: span 12 !important;
}

@media (min-width: 1024px) {
    .hep-pd-gallery-col {
        grid-column: span 4 !important;
    }
    
    .hep-pd-desc-col {
        grid-column: span 4 !important;
    }
    
    .hep-pd-details-col {
        grid-column: span 4 !important;
    }
}

/* Full Width Row */
.hep-pd-full-row {
    grid-column: 1 / -1 !important;
}

/* Ensure proper flex direction */
.hep-pd-gallery-col,
.hep-pd-desc-col,
.hep-pd-details-col {
    display: flex !important;
    flex-direction: column !important;
}

/* Gallery specific alignment */
.hep-pd-gallery-col {
    align-items: center !important;
}

/* Description column alignment */
.hep-pd-desc-col {
    justify-content: flex-start !important;
}

/* Details column alignment */
.hep-pd-details-col {
    align-items: stretch !important;
}

/* Variation Buttons */
.variation-option {
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
    background-color: #f3f4f6;
    color: #374151;
}

.variation-option:hover:not(.text-white) {
    background-color: #e5e7eb;
}

.variation-option.text-white {
    background-color: #a58cf7 !important;
    color: #ffffff !important;
    border-color: #a58cf7 !important;
}

.variation-option:focus {
    outline: 2px solid #5A31F4;
    outline-offset: 2px;
}

/* Variation attribute container */
.variation-attribute {
    margin-bottom: 1rem;
}

.variation-attribute .flex.gap-3 {
    margin-top: 0.5rem;
}