/**
 * Custom Product Tabs Styles
 * 
 * Styles for the custom scroll-to navigation tabs system
 */

/* Enhanced shadow on scroll */
.woocommerce-tabs:hover,
.woocommerce-tabs:focus-within {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}


/* Ensure tabs container has proper styling when sticky */
.woocommerce-tabs ul.tabs {
    background-color: #fff !important;
    position: sticky;
    top: 130px;
    padding: 5px 0;
    z-index: 6;
    width: 100%;
    margin: 0;
}

body:has(#wpadminbar) .woocommerce-tabs ul.tabs {
    top: 162px;
}

@media screen and (max-width: 782px) {
    .woocommerce-tabs ul.tabs {
        top: 65px !important;
    }
}

.woocommerce-tabs ul.tabs li {
    margin-bottom: 0;
    overflow: hidden;
}

/* Custom scroll tabs styling */

.woocommerce-tabs ul.tabs li.custom-scroll-tab a {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

@media screen and (max-width: 782px) {
   .woocommerce-tabs ul.tabs li.custom-scroll-tab a{
    justify-content: center;
   }
}

/* Scroll arrow animation */
.scroll-arrow {
    display: inline-block;
    font-size: 12px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-3px);
    }
    60% {
        transform: translateY(-1px);
    }
}

/* Custom smooth scrolling is handled by JavaScript for better control */

/* Loading indicator for scroll actions */
.custom-scroll-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 9999;
    font-size: 14px;
    display: none;
}

/* Highlighted section styling */
.scroll-highlight {
    transition: box-shadow 0.3s ease !important;
    box-shadow: 0 0 10px #FF9800 !important;
}

/* Mobile responsiveness for sticky tabs */
@media (max-width: 768px) {
    .woocommerce-tabs ul.tabs {
        padding: 10px 20px;
        z-index: 99;
        display: grid !important;
        grid-template-columns: auto auto;
        gap: 5px;
        margin: 0 auto;
        width: 100%;
    }
    
    .woocommerce-tabs ul.tabs li a {
        padding: 5px !important;
        font-size: 13px;
    }
    
    .scroll-arrow {
        font-size: 10px;
    }
}

/* Remove old admin bar compatibility rules - now handled above */

/* Tab content hiding - we don't want content panels for scroll tabs */
.woocommerce-tabs .panel[id*="custom_scroll_"] {
    display: none !important;
}

/* Ensure original tabs still work normally */
@media screen and (min-width: 782px) {
   .woocommerce div.product div.woocommerce-tabs ul.tabs li:first-child {
        border-right-color: transparent;
    }
}


/* Prevent scroll jerking and ensure smooth transitions */
html, body {
    scroll-behavior: auto !important; /* Override any smooth scroll to prevent conflicts */
}

/* Prevent any scroll anchoring that could cause jerks */
* {
    overflow-anchor: none;
}
