/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* General Desktop Styles for COA Table */
.wc-coa-compliance-content table.shop_attributes_coa {
    width: 100%; /* Ensure it takes available width */
    border-collapse: collapse; /* Cleaner borders */
    margin-bottom: 1.5em; /* More space below main table */
    font-size: 0.95em; /* Slightly smaller font for compactness if desired */
}

.wc-coa-compliance-content table.shop_attributes_coa th.woocommerce-product-attributes-item__label,
.wc-coa-compliance-content table.shop_attributes_coa td.woocommerce-product-attributes-item__value {
    padding: 8px 10px; /* Consistent padding */
    border-bottom: 1px solid #e0e0e0; /* Separator lines for rows */
    vertical-align: top; /* Align content to top */
}

.wc-coa-compliance-content table.shop_attributes_coa th.woocommerce-product-attributes-item__label {
    width: 30%; /* Give labels a defined width */
    font-weight: 600; /* Slightly bolder labels */
    text-align: left;
}

.wc-coa-compliance-content table.shop_attributes_coa td.woocommerce-product-attributes-item__value {
    width: 70%;
    text-align: left;
}

/* DESKTOP STYLES FOR MERGED SECTIONS (title + content in one block) */
/* The main row for a merged section */
.wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section {
    /* TR itself doesn't take padding/border well with border-collapse */
}
/* The TH cell that spans colspan=2 and contains title + content */
.wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section > th.wc-coa-merged-section-cell {
    padding: 0; /* Cell has no padding itself */
    border: 1px solid #c0c0c0; /* Main outer border for the section */
    background-color: #ffffff; /* Base background for the section cell */
    text-align: left; /* Override TH default center */
    font-weight: normal; /* Override TH default bold */
    /* Ensure it's treated as a single cell for border purposes if table has border-spacing */
    border-bottom: 1px solid #c0c0c0; /* Ensure bottom border if it's not the last row */
}
.wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section:first-child > th.wc-coa-merged-section-cell {
    border-top: 1px solid #c0c0c0;
}
/* If it's the last TR in the table, its TH should have a bottom border matching the table's usual last row */
.wc-coa-compliance-content table.shop_attributes_coa > tbody > tr.wc-coa-merged-section:last-child > th.wc-coa-merged-section-cell {
    border-bottom: 1px solid #c0c0c0;
}


/* Title text div within the merged cell */
.wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section .wc-coa-merged-section-title-text {
    padding: 10px 12px;
    background-color: #f0f0f0;
    font-weight: bold;
    font-size: 1.05em;
    margin: 0;
    border-bottom: 1px solid #dcdcdc;
}

/* UL (for cannabinoids/contaminants) within the merged cell */
.wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section .wc-coa-compliance-list {
    margin: 10px 12px 12px 12px; /* Padding around the list of items */
    padding: 0;
    list-style: none;
}

/* LI items (cannabinoid/contaminant blocks) within the merged cell's UL */
.wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section .wc-coa-compliance-list > li.wc-coa-list-item-object-details {
    padding: 10px;
    margin: 0 0 8px 0;
    background-color: #f8f8f8;
    border: 1px solid #e0e0e0;
    width: 100%;
    box-sizing: border-box;
}
.wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section .wc-coa-compliance-list > li.wc-coa-list-item-object-details:last-child {
    margin-bottom: 0;
}

/* Detail pairs within these LI item blocks */
.wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section .wc-coa-list-item-detail-pair {
    display: block;
    margin-bottom: 5px;
    line-height: 1.4;
}
.wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section .wc-coa-list-item-detail-pair:last-child {
    margin-bottom: 0;
}
.wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section .wc-coa-list-item-detail-label {
    font-weight: bold;
}

/* Nested table (for Potency) within the merged cell */
.wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section table.shop_attributes_coa {
    margin: 10px 12px 12px 12px; /* Padding around the potency table */
    width: calc(100% - 24px); /* Adjust width to account for margins */
    border: 1px solid #e8e8e8;
    background-color: #fdfdfd;
    /* Other nested table styles (th/td padding, etc.) will apply from below */
}


/* General Styling for nested tables (applies to Potency table on desktop, and any other deeper nesting) */
.wc-coa-compliance-content table.shop_attributes_coa table.shop_attributes_coa {
    margin-top: 8px; /* Space above nested table */
    margin-left: 0; /* Remove default indent, control via padding if needed */
    width: 100%; /* Nested table takes full width of its cell */
    border: 1px solid #e8e8e8; /* Light border to group nested table */
    background-color: #fdfdfd; /* Slightly different background */
    margin-bottom: 8px;
}

.wc-coa-compliance-content table.shop_attributes_coa table.shop_attributes_coa th.woocommerce-product-attributes-item__label,
.wc-coa-compliance-content table.shop_attributes_coa table.shop_attributes_coa td.woocommerce-product-attributes-item__value {
    padding: 6px 8px; /* Slightly smaller padding for nested items */
    border-bottom: 1px dotted #eee; /* Dotted lines for nested rows */
}
.wc-coa-compliance-content table.shop_attributes_coa table.shop_attributes_coa tr:last-child th,
.wc-coa-compliance-content table.shop_attributes_coa table.shop_attributes_coa tr:last-child td {
    border-bottom: none; /* No border for the last item in nested table */
}


/* Styling for nested lists (e.g., Cannabinoids, Contaminants items) */
.wc-coa-compliance-content ul.wc-coa-compliance-list {
    list-style: none; /* Remove default list style if we use custom layout */
    padding-left: 0; /* Reset padding */
    margin-left: 0;
    margin-top: 8px;
    margin-bottom: 8px;
}

.wc-coa-compliance-content ul.wc-coa-compliance-list li {
    padding: 6px 0;
    border-bottom: 1px dotted #eee; /* Separator for list items */
    margin-left: 0; /* Ensure no list item indentation */
    padding-left: 0; /* Ensure no list item indentation */
}
.wc-coa-compliance-content ul.wc-coa-compliance-list li:last-child {
    border-bottom: none;
}

/* If a list item itself contains a table (e.g. each contaminant is a table of its properties) */
.wc-coa-compliance-content ul.wc-coa-compliance-list li table.shop_attributes_coa {
    margin-left: 0;
    width: 100%;
    font-size: 0.9em; /* Make deeply nested tables slightly smaller */
    background-color: #f9f9f9; /* Different background for list item tables */
}


.wc-coa-original-file-link {
    margin-bottom: 20px; /* Ensure space between button and table data */
    /* margin-top: 15px; */ /* Already set by user */
    /* padding-top: 15px; */ /* Already set by user */
    /* border-top: 1px solid #e0e0e0; */ /* Already set by user - or remove if button is enough */
}
.wc-coa-original-file-link .button {
    display: inline-block;
    padding: 10px 18px;
    background-color: #0073aa; /* WordPress blue */
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid #0073aa;
    font-size: 1em; /* Match surrounding text or be slightly larger */
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.wc-coa-original-file-link .button:hover,
.wc-coa-original-file-link .button:focus {
    background-color: #005a87;
    border-color: #005a87;
    color: #fff;
    text-decoration: none;
}

/* Styling for secondary buttons (modal footer, report inaccuracies button in tab) */
.wc-coa-modal-footer .button.button-secondary,
.wc-coa-report-inaccuracies-container .button.button-secondary {
    display: inline-block;
    padding: 8px 15px; /* Slightly smaller padding than primary */
    background-color: #f6f7f7; /* Light gray background */
    color: #2271b1; /* WordPress link blue for text */
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid #8c8f94; /* Medium gray border */
    font-size: 0.9em; /* Slightly smaller font */
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.wc-coa-modal-footer .button.button-secondary:hover,
.wc-coa-modal-footer .button.button-secondary:focus,
.wc-coa-report-inaccuracies-container .button.button-secondary:hover,
.wc-coa-report-inaccuracies-container .button.button-secondary:focus {
    background-color: #e0e1e2; /* Slightly darker gray on hover */
    border-color: #646970;
    color: #135e96; /* Darker blue text */
    text-decoration: none;
}


/* Responsive Table Styles for COA Data */
@media screen and (max-width: 768px) {
    .wc-coa-compliance-content table.shop_attributes_coa,
    .wc-coa-compliance-content table.shop_attributes_coa thead,
    .wc-coa-compliance-content table.shop_attributes_coa tbody,
    .wc-coa-compliance-content table.shop_attributes_coa th,
    .wc-coa-compliance-content table.shop_attributes_coa td,
    .wc-coa-compliance-content table.shop_attributes_coa tr {
        display: block;
    }

    .wc-coa-compliance-content table.shop_attributes_coa thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

	/*mobile/portrait view hides duplicate text - ja*/
    .wc-coa-compliance-content table.shop_attributes_coa th.woocommerce-product-attributes-item__label {
        display: none;
    }
	
	/* --- MOBILE VIEW FIX --- */

	/* hide original column */
	.woocommerce-product-attributes-item__label {
		display: none !important;
	}

	/* value cell -> flex */
	.woocommerce-product-attributes-item__value {
		padding-left: 0 !important;
		display: flex;
		align-items: center;
	}

	.woocommerce-product-attributes-item__value::before {
		display: inline-block !important;
		flex-basis: 38%;
		flex-shrink: 0;
		padding-right: 10px;
		font-weight: bold;
	}
	/* --- END FIX --- */

    /* Mobile: Remove general TR padding and border. Control per TR type or inner elements. */
    .wc-coa-compliance-content table.shop_attributes_coa tr {
        /* border: 1px solid #e0e0e0; */ /* Border removed from TR, will be on item blocks */
        border: none;
        margin-bottom: 8px;
        padding: 0; /* No padding on TR itself */
        box-sizing: border-box;
    }
    .wc-coa-compliance-content table.shop_attributes_coa tr:last-child {
        margin-bottom: 0;
    }

    /* Styling for the new merged section row and its cell on mobile */
    .wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section {
        padding: 0;
        border: 1px solid #c0c0c0; /* Main border for the entire section block */
        background-color: #ffffff; /* Optional: overall background for the section */
        /* margin-bottom is already on the general tr rule */
    }
    .wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section > th.wc-coa-merged-section-cell {
        padding: 0; /* Cell itself has no padding */
        margin: 0;
        width: 100%;
        box-sizing: border-box;
        display: block; /* Ensure it behaves as a block */
        text-align: left; /* Reset from th default center */
        font-weight: normal; /* Reset from th default bold */
    }

    /* Styling for the title text div within the merged cell */
    .wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section .wc-coa-merged-section-title-text {
        padding: 10px 12px;
        background-color: #f0f0f0;
        font-weight: bold;
        font-size: 1.05em;
        margin: 0; /* No margin for the title div itself, spacing controlled by padding or UL margin */
        border-bottom: 1px solid #dcdcdc; /* Separator line below title */
    }

    /* Styling for the UL within the merged cell, after the title div */
    .wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section .wc-coa-compliance-list {
        margin: 10px 0 0 0 !important; /* Top margin to space from title, no horizontal/bottom margin */
        padding: 0 !important; /* No padding for the UL itself */
        width: 100%;
        box-sizing: border-box;
        list-style: none; /* Ensure no bullets */
    }

    /* Styling for standard key-value rows (if any are left that aren't sections) */
    .wc-coa-compliance-content table.shop_attributes_coa tr:not(.wc-coa-section-header):not(.wc-coa-section-content) {
        padding: 8px; /* Restore padding for simple rows if needed */
        border: 1px solid #e0e0e0; /* Restore border for simple rows */
    }

		/* UPDATED TD RULE */
	.wc-coa-compliance-content table.shop_attributes_coa td.woocommerce-product-attributes-item__value {
    border: none;
    text-align: left;
    white-space: normal;
    padding-top: 8px;
    padding-bottom: 8px; /* adjusted padding*/
    min-height: 24px;
    /* flexbox align */
    display: flex;
    align-items: center;
}

	/* UPDATED ::BEFORE RULE */
	.wc-coa-compliance-content table.shop_attributes_coa td.woocommerce-product-attributes-item__value:before {
    /* removed position: absolute, top, and left */
    flex-basis: 38%;
    flex-shrink: 0;
    padding-right: 10px;
    white-space: normal;
    text-align: left;
    font-weight: bold;
    content: attr(data-label);
    box-sizing: border-box;
}

    /* If a cell has a nested table or list, remove the left padding for the cell itself */
    .wc-coa-compliance-content table.shop_attributes_coa td.woocommerce-product-attributes-item__value:has(table.shop_attributes_coa),
    .wc-coa-compliance-content table.shop_attributes_coa td.woocommerce-product-attributes-item__value:has(ul.wc-coa-compliance-list) {
        padding-left: 0;
    }
    /* And hide its own ::before label, as the content itself is structured */
    .wc-coa-compliance-content table.shop_attributes_coa td.woocommerce-product-attributes-item__value:has(table.shop_attributes_coa):before,
    .wc-coa-compliance-content table.shop_attributes_coa td.woocommerce-product-attributes-item__value:has(ul.wc-coa-compliance-list):before {
        display: none;
    }


    /* Adjustments for nested tables if any */
    .wc-coa-compliance-content table.shop_attributes_coa table.shop_attributes_coa td.woocommerce-product-attributes-item__value {
        padding-left: 0; /* Reset padding for nested tables if they also stack */
    }
    .wc-coa-compliance-content table.shop_attributes_coa table.shop_attributes_coa td.woocommerce-product-attributes-item__value:before {
        display: none; /* Avoid double labeling if nested tables also use this */
    }
     .wc-coa-compliance-content table.shop_attributes_coa table.shop_attributes_coa {
        margin-left: 0; /* Remove left margin for nested tables on mobile */
        width: 100%;
    }

    /* Ensure lists within stacked table cells behave */
    /* General rule for ULs inside TDs on mobile */
    .wc-coa-compliance-content table.shop_attributes_coa td.woocommerce-product-attributes-item__value ul.wc-coa-compliance-list {
        margin: 0; /* Reset all margins */
        padding: 0; /* Reset all paddings */
        list-style: none;
        width: 100%; /* Ensure UL itself tries to be full width */
        box-sizing: border-box;
    }
    /* More specific rule for ULs inside our section content on mobile, ensuring no horizontal padding */
    .wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-section-content td.woocommerce-product-attributes-item__value > ul.wc-coa-compliance-list {
        margin: 0 !important;  /* Overriding desktop .wc-coa-compliance-list margin-top/bottom */
        padding: 0 !important; /* Overriding desktop padding: 0 12px */
    }


    /* Styling for LI elements that are item blocks, within the merged cell's UL */
    .wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section .wc-coa-compliance-list > li.wc-coa-list-item-object-details {
        padding: 10px !important; /* Use important to ensure internal padding is applied */
        margin: 0 0 10px 0 !important; /* No horizontal margins, only bottom margin for spacing */
        background-color: #f8f8f8;
        border: 1px solid #e0e0e0;
        width: 100% !important; /* Explicitly set for clarity and to ensure it fills the UL (which is full width) */
        box-sizing: border-box !important; /* Ensure padding and border are included in the width */
    }
    /* Remove margin from the last item block in the list */
    .wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section .wc-coa-compliance-list > li.wc-coa-list-item-object-details:last-child {
        margin-bottom: 0 !important;
    }

    /* Detail pairs within the styled LI */
    .wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section .wc-coa-list-item-detail-pair {
        display: block;
        margin-bottom: 5px;
        line-height: 1.4;
    }
    .wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section .wc-coa-list-item-detail-pair:last-child {
        margin-bottom: 0;
    }

    .wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section .wc-coa-list-item-detail-label {
        font-weight: bold;
        color: #333;
    }

    .wc-coa-compliance-content table.shop_attributes_coa tr.wc-coa-merged-section .wc-coa-list-item-detail-value {
        color: #555;
    }

    /* If a table is still rendered inside a list item (e.g. for very complex nested data not caught by compact render) */
    .wc-coa-compliance-content ul.wc-coa-compliance-list li table.shop_attributes_coa {
        /* It will already be full width due to parent stacking, ensure no extra margins */
        margin-left: 0;
        margin-right: 0;
    }

}


/* Public COA Viewer Modal Styles */
.wc-coa-hidden {
    display: none !important;
}

.wc-coa-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100000; /* High z-index to appear above other content */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.7); /* Darker overlay */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.wc-coa-modal-content {
    position: relative;
    background-color: #fff;
    margin: 5% auto; /* 5% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 90%; /* Responsive width */
    max-width: 800px; /* Max width for larger screens */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border-radius: 4px;
}

.wc-coa-modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    position: absolute;
    top: 10px;
    right: 15px;
}

.wc-coa-modal-close:hover,
.wc-coa-modal-close:focus {
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

#wc-coa-modal-body {
    max-height: 80vh; /* Limit height to 80% of viewport height */
    overflow-y: auto; /* Add scroll for content that exceeds this height */
}

#wc-coa-modal-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center image */
}

#wc-coa-modal-body iframe {
    width: 100%;
    height: 75vh; /* Adjust height as needed */
    border: none;
}

/* Mobile specific adjustments */
@media screen and (max-width: 768px) {
    .wc-coa-modal-content {
        width: 95%;
        margin: 10% auto; /* Adjust margin for smaller screens */
        padding: 15px;
    }
    #wc-coa-modal-body iframe {
        height: 70vh;
    }
}


/* Styles for COA Inaccuracy Report Form Modal */
#wc-coa-report-form-modal .wc-coa-modal-content {
    max-width: 600px; /* Slightly smaller max-width for form readability */
}

#wc-coa-report-form-modal h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.4em;
    color: #333;
}

#wc-coa-report-form-modal p {
    margin-bottom: 10px;
    line-height: 1.6;
}

#wc-coa-report-form-modal strong {
    font-weight: 600;
}

#wc-coa-report-form-fields-container {
    max-height: 40vh; /* Limit height of the dynamic fields section */
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #f9f9f9;
    margin-bottom: 15px;
}

.wc-coa-report-field-group {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}
.wc-coa-report-field-group:last-child {
    border-bottom: none;
}
.wc-coa-report-field-group label:not([for^="suggested_value_"]) { /* Target main field label, not suggestion label */
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #444;
}

.wc-coa-report-field-value-display {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 8px;
    padding-left: 10px; /* Indent current value display */
}
.wc-coa-report-field-value-display strong {
    color: #333;
}

.wc-coa-report-select-field {
    margin-right: 5px;
    vertical-align: middle;
}
.wc-coa-report-field-group small {
    font-size: 0.9em;
    color: #777;
    vertical-align: middle;
}

.wc-coa-report-suggestion-wrapper {
    margin-top: 8px;
    padding-left: 25px; /* Indent suggestion input */
}
.wc-coa-report-suggestion-wrapper label {
    font-size: 0.9em;
    font-weight: normal;
    color: #555;
    display: block;
    margin-bottom: 3px;
}
.wc-coa-report-suggestion-input.input-text {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.95em;
    box-sizing: border-box;
}

#wc-coa-report-inaccuracy-form hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 20px 0;
}

#wc-coa-report-inaccuracy-form h3 {
    font-size: 1.2em;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
}

/* WooCommerce-like form row styling */
#wc-coa-report-inaccuracy-form .form-row {
    padding: 3px;
    margin: 0 0 6px;
    zoom: 1;
}
#wc-coa-report-inaccuracy-form .form-row:before,
#wc-coa-report-inaccuracy-form .form-row:after {
    content: " ";
    display: table;
}
#wc-coa-report-inaccuracy-form .form-row:after {
    clear: both;
}
#wc-coa-report-inaccuracy-form .form-row label {
    display: block;
    margin-bottom: 3px;
    font-weight: 500;
}
#wc-coa-report-inaccuracy-form .form-row input.input-text,
#wc-coa-report-inaccuracy-form .form-row textarea.input-text {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    outline: 0;
    line-height: normal;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}
#wc-coa-report-inaccuracy-form .form-row textarea.input-text {
    height: auto;
    min-height: 80px;
}

@media (min-width: 768px) {
    #wc-coa-report-inaccuracy-form .form-row-first {
        float: left;
        width: 47%;
        margin-right: 3.8%; /* Default WooCommerce spacing */
    }
    #wc-coa-report-inaccuracy-form .form-row-last {
        float: right;
        width: 47%;
        margin-right: 0;
    }
}

#wc-coa-report-form-status .notice {
    padding: 10px;
    margin-top: 10px;
    border-radius: 3px;
    font-size: 0.95em;
}
#wc-coa-report-form-status .notice-success {
    background-color: #e6ffed;
    border-left: 4px solid #00a32a;
    color: #004411;
}
#wc-coa-report-form-status .notice-error {
    background-color: #ffe6e6;
    border-left: 4px solid #d63638;
    color: #580000;
}
#wc-coa-report-form-status .notice-warning {
    background-color: #fff8e1;
    border-left: 4px solid #ffb900;
    color: #664b00;
}

/* Ensure buttons in modal footers are consistently styled */
.wc-coa-modal .wc-coa-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.wc-coa-modal .wc-coa-modal-footer .button {
    margin: 0; /* Reset margins since we're using gap */
    padding: 10px 20px;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    font-weight: 500;
}

/* Primary button (Submit Report) */
.wc-coa-modal .wc-coa-modal-footer .button.button-primary {
    background-color: #0073aa; /* WordPress blue */
    border-color: #0073aa;
    color: #fff;
}

.wc-coa-modal .wc-coa-modal-footer .button.button-primary:hover,
.wc-coa-modal .wc-coa-modal-footer .button.button-primary:focus {
    background-color: #005a87;
    border-color: #005a87;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* Secondary button (Cancel) - matching primary button size */
.wc-coa-modal .wc-coa-modal-footer .button.button-secondary {
    background-color: #f6f7f7;
    border-color: #8c8f94;
    color: #2271b1;
}

.wc-coa-modal .wc-coa-modal-footer .button.button-secondary:hover,
.wc-coa-modal .wc-coa-modal-footer .button.button-secondary:focus {
    background-color: #e0e1e2;
    border-color: #646970;
    color: #135e96;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Disabled state for submit button */
.wc-coa-modal .wc-coa-modal-footer .button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.wc-coa-modal .wc-coa-modal-footer .button.button-primary:disabled {
    background-color: #0073aa;
    border-color: #0073aa;
}

/* Mobile adjustments */
@media screen and (max-width: 480px) {
    .wc-coa-modal .wc-coa-modal-footer {
        flex-direction: column-reverse; /* Stack buttons vertically on very small screens */
        gap: 8px;
    }
    
    .wc-coa-modal .wc-coa-modal-footer .button {
        width: 100%; /* Full width buttons on mobile */
        text-align: center;
    }
}

/* --- Action Buttons within COA Sub-Tabs --- */
.wc-coa-actions-per-coa {
    /* Container has inline styles for margin-bottom, padding-bottom, and border-bottom. */
    /* Styles here are for the buttons themselves. */
}

/* Styling for .wc-coa-actions-per-coa .wc-coa-view-original-trigger.button */
/* Base layout styles. Colors/background/border are handled dynamically by PHP. */
.wc-coa-actions-per-coa .wc-coa-view-original-trigger.button {
    display: inline-block;
    padding: 10px 18px; /* Standard padding */
    text-decoration: none;
    border-radius: 3px; /* Standard border radius */
    font-size: 1em; 
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
    /* margin-right: 10px; is applied inline in PHP */
}

/* Styling for .wc-coa-actions-per-coa .wc-coa-trigger-report-modal-button.button.button-secondary */
/* Base layout styles. Colors/background/border will be partially handled dynamically by PHP. */
.wc-coa-actions-per-coa .wc-coa-trigger-report-modal-button.button.button-secondary {
    display: inline-block;
    padding: 8px 15px; /* Slightly smaller padding than primary */
    text-decoration: none;
    border-radius: 3px;
    font-size: 0.9em; 
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    background-color: #f6f7f7; /* Default light gray background, can be overridden if a secondary_bg_color option is added */
    /* color: #2271b1; /* WordPress link blue for text - will be dynamic */
    /* border: 1px solid #8c8f94; /* Medium gray border - will be dynamic */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.wc-coa-actions-per-coa .wc-coa-trigger-report-modal-button.button.button-secondary:hover,
.wc-coa-actions-per-coa .wc-coa-trigger-report-modal-button.button.button-secondary:focus {
    background-color: #e0e1e2; /* Slightly darker gray on hover - can be overridden */
    /* border-color: #646970; /* Will be dynamic */
    /* color: #135e96; /* Darker blue text - will be dynamic */
    text-decoration: none;
}

/* COA Image Gallery Navigation Styles */
.wc-coa-image-navigation {
    /* display: none; is handled by .wc-coa-hidden and JS */
    /* text-align: center; margin-top: 10px; are inline styles from PHP, can be moved here */
    text-align: center;
    margin-top: 15px; /* Increased margin a bit */
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.wc-coa-image-navigation .button {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    color: #333;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    font-size: 0.9em;
    line-height: 1; /* Ensure text is centered if using unicode arrows */
}

.wc-coa-image-navigation .button:hover:not(:disabled) {
    background-color: #e0e0e0;
    border-color: #bbb;
    color: #000;
}

.wc-coa-image-navigation .button:disabled {
    background-color: #f9f9f9;
    border-color: #ddd;
    color: #aaa;
    cursor: not-allowed;
    opacity: 0.7;
}

.wc-coa-image-navigation .coa-image-counter {
    /* margin: 0 10px; display: inline-block; vertical-align: middle; are inline styles from PHP */
    margin: 0 15px; /* Increased margin */
    display: inline-block;
    vertical-align: middle;
    font-size: 0.9em;
    color: #555;
}

/* --- COA Sub-Tab Styles --- */
.wc-coa-subtabs-container {
    margin-top: 20px; /* Space above the tabs */
    border: 1px solid #ddd; /* Optional border around the whole tab container */
    border-radius: 3px;
    background-color: #fff; /* Background for the container */
}

ul.wc-coa-subtabs-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */
    border-bottom: 1px solid #ddd;
    background-color: #f9f9f9; /* Light background for the tab bar */
}

li.wc-coa-subtab-item {
    margin: 0;
    padding: 0;
}

a.wc-coa-subtab-link {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #555;
    border-bottom: 3px solid transparent; /* Space for active indicator */
    margin-bottom: -1px; /* Overlap the container border */
    transition: color 0.2s ease, border-color 0.2s ease;
    font-size: 0.95em;
    font-weight: 500;
}

a.wc-coa-subtab-link:hover,
a.wc-coa-subtab-link:focus {
    color: #0073aa; /* WordPress blue on hover */
    background-color: #eee; /* Slight background change on hover */
}

a.wc-coa-subtab-link.active {
    color: #333;
    font-weight: 600;
    border-bottom-color: #0073aa; /* Active tab indicator */
    background-color: #fff; /* Match content panel background */
}

.wc-coa-subtabs-content {
    padding: 15px;
}

.wc-coa-subtab-panel {
    display: none; /* Hide inactive panels */
}

.wc-coa-subtab-panel.active {
    display: block; /* Show active panel */
}

/* Ensure tables within tab panels don't have extra top margin */
.wc-coa-subtab-panel table.shop_attributes_coa:first-child {
    margin-top: 0;
}

/* Responsive adjustments for tabs if needed */
@media screen and (max-width: 600px) {
    ul.wc-coa-subtabs-nav {
        /* Could potentially stack tabs vertically if needed */
        /* display: block; */
    }
    a.wc-coa-subtab-link {
        padding: 8px 10px; /* Smaller padding on mobile */
        font-size: 0.9em;
        /* border-bottom: 2px solid transparent; */ /* Thinner indicator */
    }
    /* If stacking vertically: */
    /* li.wc-coa-subtab-item { border-bottom: 1px solid #eee; } */
    /* a.wc-coa-subtab-link { border-bottom: none; border-left: 3px solid transparent; margin-bottom: 0; } */
    /* a.wc-coa-subtab-link.active { border-left-color: #0073aa; border-bottom: none; } */
}

/* "Most Current" indicator for COA sub-tabs */
.wc-coa-most-current-indicator {
    font-size: 0.8em;
    font-weight: normal;
    color: #777; /* Or a theme-appropriate color */
    margin-left: 5px;
    vertical-align: middle; /* Aligns better if tab name wraps */
}

/* Report Form Modal Loader Overlay */
.wc-coa-modal-content { /* Ensure modal content is a positioning context */
    position: relative;
}

.wc-coa-form-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white */
    z-index: 10; /* Above form content but below modal close button */
    display: flex; /* For centering content */
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 4px; /* Match modal content border-radius if any */
}

.wc-coa-form-loader-overlay .wc-coa-loader-content {
    padding: 20px;
    /* background-color: #fff; */ /* Optional: if you want a solid box for the text */
    /* border-radius: 3px; */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
}

.wc-coa-form-loader-overlay .spinner {
    /* WordPress spinner is usually an animated gif or CSS animation */
    /* Ensure it's visible and sized appropriately if using WP's default */
    display: inline-block; /* if not already */
    /* width: 20px; */ /* Default WP spinner size */
    /* height: 20px; */
    background-size: contain; /* If it's a background image */
}

.wc-coa-form-loader-overlay .loading-text {
    font-size: 1.1em;
    color: #333;
    margin-left: 10px; /* Space between spinner and text */
    vertical-align: middle;
}

.wc-coa-progress-bar-container {
    width: 80%;
    max-width: 300px;
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 5px;
    margin-top: 15px; /* Space below spinner/text */
    overflow: hidden; /* Ensures inner bar respects border radius */
}

.wc-coa-progress-bar {
    width: 0%; /* Initial width */
    height: 100%;
    background-color: #0073aa; /* WordPress blue, or use a theme color */
    border-radius: 5px;
    /* transition: width 0.2s ease-out; */ /* Removed for stutter effect */
}