/* =================================== */
/*        DESKTOP STYLES (BASE)      */
/* =================================== */
.cpot-options-wrapper {
    margin: 20px 0;
    /* Dynamic styles from PHP: font-size, font-weight, background-color, width, padding */
}

.cpot-single-attribute-table-wrapper {
    margin-bottom: 20px;
    overflow-x: auto; /* Horizontal scroll for tables on small screens */
}
.cpot-single-attribute-table-wrapper:last-child {
    margin-bottom: 0;
}

.cpot-options-table {
    width: 100%;
    border-collapse: collapse;
}

.cpot-options-table th,
.cpot-options-table td {
    border: 1px solid #e0e0e0;
    text-align: center;
    /* Dynamic padding from PHP (based on table_size_preset) */
    /* Dynamic colors from PHP */
}

.cpot-options-table th {
    font-weight: bold; /* Default, can be overridden by global font-weight if needed */
}

/* Style the "Total" column (which is now the first column) */
.cpot-options-table th:first-child,
.cpot-options-table td:first-child {
    font-weight: bold; /* Ensure "Total" header and data are bold */
    /* background-color: #f0f0f0; /* Optional distinct background for Total column */
}


/* =================================== */
/*        MOBILE STYLES (<= 768px)     */
/* =================================== */
@media screen and (max-width: 768px) {
    /*
       The table size preset (padding) from PHP will still apply.
       If general font-size from settings is too large for mobile,
       you might consider using relative units (em/rem) for font_size setting,
       or adding a mobile-specific font size multiplier here.
    */
    /* Example: .cpot-options-wrapper { font-size: 0.9em; } /* Scales based on parent */

    /* overflow-x: auto on .cpot-single-attribute-table-wrapper handles responsiveness for table content */
}

/* =================================== */
/*      VERY SMALL SCREENS (<= 480px)  */
/* =================================== */
@media screen and (max-width: 480px) {
    /* Further adjustments if needed, e.g., font size reduction */
    /* Example: .cpot-options-wrapper { font-size: 0.85em; } */
}