/* 5. Modern Product Tabs - Global Styles */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 5px !important; /* Add padding to prevent hover cutoff */
    margin: 0 0 24px 0 !important;
    border: none !important;
    background: transparent !important;
    display: flex !important;
    flex-wrap: wrap !important; /* Allow wrapping nicely */
    gap: 10px !important; /* Space between tabs */
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
    display: none !important; /* Clear floats */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    border-radius: 50px !important; /* Pill shape */
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    transition: all 0.2s ease !important;
    list-style: none !important;
    overflow: hidden !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 10px 24px !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    font-size: 14px !important;
    display: block !important;
    text-decoration: none !important;
    border: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
    background: #f7fafc !important;
    border-color: #cbd5e0 !important;
    transform: translateY(-1px);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: #d79c40 !important; /* Brand color */
    border-color: #d79c40 !important;
    box-shadow: 0 4px 6px rgba(215, 156, 64, 0.25) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #ffffff !important;
}

/* Remove the default corner styling if any */
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
    display: none !important;
}

/* Tab Content Panel */
.woocommerce div.product .woocommerce-tabs .panel {
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
    padding: 32px !important;
    border: 1px solid #e2e8f0 !important;
    margin-bottom: 2rem !important;
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        gap: 8px !important;
    }
    
    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        flex: 1 1 auto !important; /* Grow to fill space on mobile */
        text-align: center !important;
    }
    
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    .woocommerce div.product .woocommerce-tabs .panel {
        padding: 20px !important;
    }
}

/* Hide Product Meta (Category, SKU, Tags) globally */
.product_meta {
    display: none !important;
}

/* 6. Additional Information Tab Styling */
.woocommerce table.shop_attributes {
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

.woocommerce table.shop_attributes tr {
    border-bottom: 1px solid #edf2f7 !important;
}

.woocommerce table.shop_attributes tr:last-child {
    border-bottom: none !important;
}

.woocommerce table.shop_attributes th {
    color: #4a5568 !important; /* Lighter gray */
    font-weight: 600 !important;
    padding: 16px 12px !important;
    border-bottom: 1px solid #edf2f7 !important;
    background: #f8fafc !important; /* Light gray background for labels */
    width: 150px !important;
    vertical-align: middle !important;
    text-align: left !important;
    font-size: 14px !important;
}

.woocommerce table.shop_attributes td {
    padding: 16px 20px !important;
    border-bottom: 1px solid #edf2f7 !important;
    background: #ffffff !important;
    font-style: normal !important;
    color: #718096 !important; /* Even lighter gray */
    font-size: 14px !important;
}

.woocommerce table.shop_attributes p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Alternate row styling for better readability */
.woocommerce table.shop_attributes tr:nth-child(even) th,
.woocommerce table.shop_attributes tr:nth-child(even) td {
    background-color: #fcfcfc !important;
}

/* 7. Reviews Tab Styling */
.woocommerce-Reviews-title,
.woocommerce-noreviews {
    color: #4a5568 !important; /* Lighter gray */
    font-size: 20px !important; /* Smaller font size for premium look */
}

.must-log-in {
    color: #4a5568 !important;
    font-size: 15px !important;
    background: #f8fafc !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    display: inline-block !important;
    margin-top: 10px !important;
}

.must-log-in a {
    color: #d79c40 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.must-log-in a:hover {
    text-decoration: underline !important;
}

#reviews #comments ol.commentlist {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

#reviews #comments ol.commentlist li {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    position: relative !important;
    display: flex !important; /* Use flexbox for layout */
    flex-wrap: wrap !important;
    gap: 20px !important;
}

/* Target the comment container if it exists, or direct children */
#reviews #comments ol.commentlist li .comment_container {
    display: flex !important;
    width: 100% !important;
    gap: 20px !important;
}

#reviews #comments ol.commentlist li img.avatar {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: 2px solid #edf2f7 !important;
    padding: 2px !important;
    background: #fff !important;
    position: static !important; /* Reset absolute positioning */
    flex: 0 0 50px !important; /* Fixed width */
    margin: 0 !important;
}

#reviews #comments ol.commentlist li .comment-text {
    margin-left: 0 !important; /* Reset margin */
    border: none !important;
    padding: 0 !important;
    flex: 1 !important; /* Take remaining space */
}

#reviews #comments ol.commentlist li .meta {
    color: #718096 !important;
    font-size: 0.85em !important;
    margin-bottom: 10px !important;
    display: block !important;
}

#reviews #comments ol.commentlist li .meta strong {
    color: #4a5568 !important; /* Lighter gray */
    font-weight: 700 !important;
    font-size: 1.1em !important;
    margin-right: 8px !important;
}

#reviews .star-rating {
    color: #d79c40 !important; /* Brand color for stars */
}

#reviews #comments ol.commentlist li .description {
    color: #718096 !important; /* Even lighter gray */
    line-height: 1.6 !important;
    font-size: 15px !important;
}

/* Review Form */
#review_form_wrapper {
    margin-top: 40px !important;
    padding-top: 30px !important;
    border-top: 1px solid #e2e8f0 !important;
}

#review_form_wrapper #reply-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #4a5568 !important; /* Lighter gray */
    margin-bottom: 20px !important;
    display: block !important;
}

.comment-form label {
    display: block !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    color: #4a5568 !important; /* Lighter gray */
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #cbd5e0 !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    color: #4a5568 !important; /* Lighter gray */
    font-size: 15px !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: #d79c40 !important;
    background: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(215, 156, 64, 0.1) !important;
}

.comment-form-rating label {
    display: inline-block !important;
    margin-right: 10px !important;
}

.comment-form-rating .stars a {
    color: #d79c40 !important;
}

/* File Upload Styling */
.comment-form input[type="file"] {
    padding: 10px 0 !important;
    color: #718096 !important;
}

.comment-form input[type="file"]::file-selector-button {
    background-color: #d79c40 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 50px !important; /* Pill shape */
    cursor: pointer !important;
    margin-right: 15px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.comment-form input[type="file"]::file-selector-button:hover {
    background-color: #c28b36 !important;
    transform: translateY(-1px);
}

/* Submit Button */
#review_form #submit {
    background-color: #d79c40 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    margin-top: 10px !important;
}

#review_form #submit:hover {
    background-color: #c28b36 !important; /* Slightly darker shade */
    transform: translateY(-1px);
}

/* 8. Q&A Tab Styling (Generic & Customer Reviews Plugin Support) */
/* Search Bar */
.cr-qna-search-block input[type="text"],
.woocommerce-tabs .panel input[type="text"].cr-search-input,
.woocommerce-tabs .panel input[name="qna_search"] {
    width: 100% !important;
    padding: 14px 20px !important;
    border: 1px solid #cbd5e0 !important;
    border-radius: 50px !important; /* Pill shape for search */
    background: #f8fafc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23a0aec0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') no-repeat 15px center !important;
    background-size: 18px !important;
    padding-left: 45px !important; /* Space for icon */
    font-size: 15px !important;
    transition: all 0.2s ease !important;
}

.cr-qna-search-block input[type="text"]:focus,
.woocommerce-tabs .panel input[type="text"].cr-search-input:focus {
    border-color: #d79c40 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(215, 156, 64, 0.1) !important;
    outline: none !important;
}

/* Q&A List Items */
.cr-qna-list .cr-qna-item {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 15px !important;
    background: #ffffff !important;
}

.cr-qna-list .cr-qna-item-q {
    font-weight: 700 !important;
    color: #4a5568 !important; /* Lighter gray */
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
}

.cr-qna-list .cr-qna-item-q:before {
    content: "Q" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    background: #edf2f7 !important;
    color: #718096 !important; /* Even lighter gray */
    border-radius: 50% !important;
    margin-right: 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.cr-qna-list .cr-qna-item-a {
    color: #718096 !important; /* Even lighter gray */
    padding-left: 34px !important; /* Align with text of Q */
    line-height: 1.6 !important;
}

/* "No questions yet" text */
.cr-qna-list-empty {
    text-align: center !important;
    padding: 40px 0 !important;
    color: #718096 !important;
    font-style: italic !important;
}

/* Ask a Question Button */
button.cr-qna-ask-button {
    background-color: transparent !important;
    color: #d79c40 !important;
    border: 2px solid #d79c40 !important;
    padding: 10px 24px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

button.cr-qna-ask-button:hover {
    background-color: #d79c40 !important;
    color: #ffffff !important;
}

/* Hide "Your Review" label */
.comment-form-comment label {
    display: none !important;
}

/* Style Error Message */
.woocommerce-error, 
.woocommerce-message, 
.woocommerce-info {
    padding: 15px 20px !important;
    margin: 0 0 20px !important;
    position: relative !important;
    background-color: #fff !important;
    list-style: none outside !important;
    width: auto !important;
    word-wrap: break-word !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    border-top: 3px solid !important;
}

.woocommerce-error {
    border-top-color: #e53e3e !important; /* Red */
    background-color: #fff5f5 !important;
    color: #c53030 !important;
}

.woocommerce-error::before, 
.woocommerce-message::before, 
.woocommerce-info::before {
    display: none !important; /* Remove default icon if any */
}

.woocommerce-message {
    border-top-color: #38a169 !important; /* Green */
    background-color: #f0fff4 !important;
    color: #2f855a !important;
}

.woocommerce-info {
    border-top-color: #3182ce !important; /* Blue */
    background-color: #ebf8ff !important;
    color: #2b6cb0 !important;
}

.woocommerce-error li, 
.woocommerce-message li, 
.woocommerce-info li {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Fix for upload error message design */
.cr-upload-images-status.cr-upload-images-status-error {
    display: block !important;
    padding: 15px 20px !important;
    margin: 10px 0 20px !important;
    background-color: #fff5f5 !important;
    color: #c53030 !important;
    border-top: 3px solid #e53e3e !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    font-weight: 600 !important;
}

/* Fix for "Sale" badge shape in Related Products */
.woocommerce ul.products li.product .onsale {
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important; /* Vertically center text */
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    min-width: auto !important;
    aspect-ratio: 1 / 1 !important; /* Ensure it stays square/circle */
    margin: 0 !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
}
