/* Custom fixes for scrollbar and image display issues */

/* Make scrollbar a thin black line and ensure it goes all the way to the right */
.thumbnails-scroll {
    scrollbar-width: thin !important; /* For Firefox */
    -ms-overflow-style: none; /* For IE/Edge */
    overflow-x: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    padding-bottom: 8px !important; /* Add padding to make room for scrollbar */
}

/* Style the scrollbar for webkit browsers (Chrome, Safari) */
.thumbnails-scroll::-webkit-scrollbar {
    display: block !important;
    height: 6px !important;
    width: auto !important;
}

.thumbnails-scroll::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 3px !important;
    width: 100% !important;
}

.thumbnails-scroll::-webkit-scrollbar-thumb {
    background: var(--primary-color, #7C0A02) !important;
    border-radius: 3px !important;
}

.thumbnails-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color, #8b0000) !important;
}

/* Hide the blue scroll indicator */
.scroll-indicator-container {
    display: none !important;
}

/* Fix for images not appearing */
img {
    max-width: 100% !important;
    display: inline-block !important;
}

.thumbnail img, .product-slider img, .slider-slide img {
    display: block !important;
    object-fit: contain !important;
}

/* Image loading fix */
img[src=""], img:not([src]) {
    opacity: 0;
}

img[src] {
    opacity: 1;
    transition: opacity 0.3s;
}

/* Additional fixes for thumbnail container */
.thumbnails-scroll-container {
    width: 100% !important;
    overflow: hidden !important;
}

/* Fix for product page specific issues */
.product-slider-container img, 
.product-thumbnails img,
.thumbnail img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Product tabs styling */
.product-full-details {
    margin-bottom: 2rem;
}

/* New tabs styling that takes full width */
#productTabs {
    display: flex !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;
    position: relative !important;
    justify-content: center !important; /* Center the tabs */
    padding: 0 !important;
}

/* Remove default underline from all tabs */
#productTabs::after {
    display: none !important;
}

/* Create sliding indicator only for active tab */
#productTabs .nav-link.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background-color: var(--primary-color, #4a90e2) !important;
    transition: transform 0.3s ease !important;
}

#productTabs .nav-item {
    flex: 0 1 auto !important; /* Allow tabs to size naturally */
    text-align: center !important;
    border: none !important; /* Remove any borders */
    margin: 0 10px !important; /* Add spacing between tabs */
}

#productTabs .nav-link {
    border: none !important; /* Remove all borders */
    border-bottom: none !important;
    color: #333 !important;
    font-weight: 500 !important;
    padding: 1rem 1.5rem !important;
    background-color: transparent !important;
    position: relative !important;
    transition: color 0.2s ease !important;
    text-align: center !important;
    outline: none !important; /* Remove outline */
    box-shadow: none !important; /* Remove box shadow */
}

#productTabs .nav-link:hover {
    color: var(--primary-color, #4a90e2) !important;
}

#productTabs .nav-link.active {
    color: var(--primary-color, #4a90e2) !important;
    background-color: transparent !important;
}

/* Tab content styling */
#productTabsContent {
    background-color: #fff !important;
    padding: 1.5rem 0 !important;
    border: none !important;
    min-height: 200px !important;
    z-index: 1 !important; /* Ensure it's below mobile navigation */
}

/* Mobile accordion styling (will be shown on mobile) */
.product-details-accordion {
    margin-top: 2rem !important;
    display: none !important;
    position: relative !important;
    z-index: 1 !important; /* Ensure it's below mobile navigation */
}

.product-details-accordion .accordion-item {
    margin-bottom: 1rem !important;
    border: none !important;
    border-radius: 0.5rem !important;
    background-color: #f5f5f5 !important;
    overflow: hidden !important;
}

.product-details-accordion .accordion-button {
    font-weight: 600 !important;
    padding: 1rem 1.5rem !important;
    background-color: #f5f5f5 !important;
    color: #333 !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center !important;
    cursor: pointer !important; /* Ensure the cursor indicates it's clickable */
    z-index: 1 !important; /* Make sure button is on top for clicks */
}

.product-details-accordion .accordion-button:not(.collapsed) {
    color: var(--primary-color, #4a90e2) !important;
    background-color: #f5f5f5 !important;
    box-shadow: none !important;
}

.product-details-accordion .accordion-button:focus {
    box-shadow: none !important;
}

.product-details-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.product-details-accordion .accordion-body {
    padding: 1rem 1.5rem 1.5rem !important;
    background-color: #f5f5f5 !important;
}

/* Make sure mobile views show the accordion and hide desktop tabs */
@media (max-width: 767.98px) {
    .product-full-details {
        display: none !important;
    }
    
    .product-details-accordion {
        display: block !important;
    }
    
    /* Hide separate reviews section on mobile since it's in tabs now */
    .reviews-section {
        display: none !important;
    }
    
    /* Ensure accordion is shown in mobile view */
    #productAccordion {
        display: block !important;
    }

    /* Make sure accordion buttons are clearly clickable */
    .accordion-button {
        pointer-events: auto !important;
    }

    /* Make accordion collapse elements work */
    .accordion-collapse {
        height: auto !important;
    }
}

/* Add extra styling for the reviews sections */
.product-reviews .text-center {
    text-align: center !important;
}

/* Center the "No reviews yet" text */
#reviews p, #collapseReviews p {
    text-align: center !important;
}

/* Review styles for product tabs */
.tab-pane .product-reviews {
    margin-top: 0 !important;
}

.tab-pane .review-card {
    margin-bottom: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    border-bottom: 1px solid #eee !important;
}

.tab-pane .review-card:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.tab-pane .review-header {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 0.5rem !important;
}

.tab-pane .reviewer-name {
    font-weight: 600 !important;
    color: #333 !important;
}

.tab-pane .review-date {
    color: #777 !important;
    font-size: 0.9rem !important;
}

.tab-pane .review-stars {
    margin-bottom: 0.5rem !important;
}

.tab-pane .review-stars i {
    color: #f8d62b !important;
    margin-right: 2px !important;
}

.tab-pane .review-content {
    color: #555 !important;
    line-height: 1.5 !important;
}

.tab-pane .review-summary {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #eee !important;
}

.tab-pane .average-rating {
    display: flex !important;
    align-items: center !important;
}

.tab-pane .rating-value {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    margin-right: 1rem !important;
}

.tab-pane .rating-stars {
    margin-right: 1rem !important;
}

.tab-pane .rating-count {
    color: #777 !important;
    font-size: 0.9rem !important;
}

.tab-pane .write-review-btn {
    display: inline-block !important;
    padding: 0.5rem 1.5rem !important;
    background-color: #333 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0.25rem !important;
    font-weight: 500 !important;
    margin-top: 1rem !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.tab-pane .write-review-btn:hover {
    background-color: #000 !important;
}

/* Shipping method styles */
.shipping-methods-list {
    padding-left: 0 !important;
    list-style: none !important;
}

.shipping-methods-list li {
    margin-bottom: 1rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #eee !important;
}

.shipping-methods-list li:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.shipping-cost {
    font-weight: 600 !important;
    margin-left: 0.5rem !important;
}

.shipping-free-threshold {
    color: #666 !important;
    font-size: 0.9rem !important;
    margin-left: 0.5rem !important;
}

.shipping-method-description {
    margin-top: 0.5rem !important;
    color: #666 !important;
    font-size: 0.95rem !important;
}

/* URGENT CLICKABILITY FIXES - Maximum priority overrides */
#productTabs .nav-link,
.thumbnail,
.main-image-nav,
.accordion-button,
.nav-tabs button,
[data-bs-toggle],
[role="tab"],
[role="button"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 9999 !important;
}

/* Apply clickability to all potentially interactive elements */
button, 
input, 
select, 
a, 
.btn,
.nav-link, 
.accordion-button, 
.thumbnail,
.main-image-nav,
.prev-image,
.next-image {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Fix main image navigation arrows */
.main-image-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    z-index: 9999 !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background-color: transparent !important; /* Remove the white background */
    opacity: 1 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border: none !important;
    color: #333 !important;
}

.main-image-nav i {
    font-size: 24px !important;
    color: white !important;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

.main-image-nav.prev-image {
    left: 15px !important;
    right: auto !important; /* Ensure it's not affected by right property */
}

.main-image-nav.next-image {
    right: 15px !important;
    left: auto !important; /* Ensure it's not affected by left property */
}

/* Fix Bootstrap accordion functionality */
.accordion-button {
    background-color: #f8f9fa !important;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg) !important;
}

/* Make thumbnails more interactive */
.thumbnail {
    cursor: pointer !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.thumbnail:hover {
    transform: translateY(-3px) !important;
    opacity: 0.9 !important;
}

/* Ensure proper tab behavior */
#productTabs .nav-item {
    position: relative !important;
    z-index: 100 !important;
}

.tab-content {
    position: relative !important;
    z-index: 50 !important;
}

/* Improve tab interaction */
#productTabs {
    isolation: isolate !important;
}

/* Mobile accordion fixes */
.product-details-accordion .accordion-button {
    z-index: 20 !important;
}

/* Fix z-index issues - ensure thumbnails don't go over navbar */
.thumbnails-scroll-container,
.thumbnails-scroll,
.thumbnail {
    z-index: 50 !important; /* Lower z-index than navbar */
}

/* Ensure navbar stays on top */
#navbar, 
.nav-container,
nav {
    z-index: 9999 !important; /* Higher z-index than other elements */
    position: relative !important;
}

/* Properly layer elements */
.main-image-container {
    position: relative !important;
    overflow: hidden !important;
    z-index: 40 !important;
}

.product-details-card {
    z-index: 40 !important;
}

/* Fix thumbnail display */
.thumbnail {
    position: relative !important;
    z-index: 40 !important;
}

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

/* Fix main image navigation arrows with more specific positioning */
.main-image-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    z-index: 9999 !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background-color: transparent !important; /* Remove the white background */
    opacity: 1 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border: none !important;
    color: #333 !important;
    pointer-events: auto !important;
}

/* Force arrows to opposite sides */
.main-image-container .main-image-nav.prev-image {
    left: 15px !important;
    right: auto !important; /* Ensure it's not affected by right property */
}

.main-image-container .main-image-nav.next-image {
    right: 15px !important;
    left: auto !important; /* Ensure it's not affected by left property */
    position: absolute !important;
}

/* Home content wrapper to ensure newsletter components are properly positioned */
.home-content-wrapper {
    position: relative;
    z-index: 1;
}

/* Ensure navbar remains on top */
#navbar, .nav-container, nav {
    z-index: 9999 !important;
    position: relative !important;
}

/* Newsletter components positioning */
.newsletter-popup {
    z-index: 1000 !important; /* Lower than navbar */
}

.homepage-newsletter, 
.checkout-newsletter-section {
    position: relative;
    z-index: 100 !important; /* Lower than navbar */
}