/* Product Options — modifier modal + admin panels.
   All brand colors come from design-system.css; this file adds layout-only rules. */

.product-options-page h3 i { color: var(--ds-primary, #E57E00); }
.product-options-page .badge-info { background-color: var(--ds-info, #17a2b8); }

.option-table .handle { cursor: grab; }
.option-table .handle:active { cursor: grabbing; }
.option-table input[type="number"] { text-align: right; }
.option-table input.opt-included:disabled { background: #f4f4f4; color: #999; }

/* Register / storefront modifier modal */
.po-modal .modal-dialog { max-width: 720px; }
.po-modal .po-group {
    border: 1px solid #e5d4b8;
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}
.po-modal .po-group-header {
    background: var(--ds-primary, #E57E00);
    color: #fff;
    padding: 8px 14px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.po-modal .po-group.required .po-group-header::after {
    content: 'Required';
    background: #fff8f0;
    color: var(--ds-primary, #E57E00);
    font-size: 0.75em;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 10px;
}
.po-modal .po-group-body { padding: 8px 14px; background: #fff; }
.po-modal .po-option-row {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f3eddc;
}
.po-modal .po-option-row:last-child { border-bottom: none; }
.po-modal .po-option-row .po-option-input { flex: 0 0 28px; }
.po-modal .po-option-row .po-option-name {
    flex: 1;
    font-size: 0.95em;
}
.po-modal .po-option-row .po-option-delta {
    color: var(--ds-secondary, #025B92);
    font-size: 0.85em;
    margin-left: 10px;
    white-space: nowrap;
}
.po-modal .po-option-row .po-stepper {
    display: flex;
    align-items: center;
    margin-left: 10px;
}
.po-modal .po-option-row .po-stepper button {
    width: 28px;
    height: 28px;
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    border-radius: 4px;
    line-height: 1;
}
.po-modal .po-option-row .po-stepper input {
    width: 44px;
    text-align: center;
    margin: 0 4px;
    height: 28px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.po-modal .po-option-row.disabled { opacity: 0.45; }
.po-modal .po-modal-footer-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #fff8f0;
    border-top: 2px solid var(--ds-primary, #E57E00);
}
.po-modal .po-modal-footer-total .po-total-label {
    font-size: 0.9em;
    color: #555;
}
.po-modal .po-modal-footer-total .po-total-value {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--ds-primary, #E57E00);
}
.po-modal .po-validation-error {
    color: #b72e2e;
    font-size: 0.85em;
    margin-top: 4px;
}

/* Modifier display under cart lines (register journal + storefront cart) */
.po-line-modifiers {
    list-style: none;
    margin: 0 0 0 18px;
    padding: 0;
    font-size: 0.85em;
    color: #555;
}
.po-line-modifiers li::before {
    content: '+ ';
    color: var(--ds-primary, #E57E00);
}

/* Receipt indented modifier rows */
.receipt-modifier-row td {
    font-size: 0.85em;
    color: #444;
    padding-left: 28px !important;
}

/* KPS card modifier list */
.kps-line-modifiers {
    list-style: none;
    margin: 2px 0 0 18px;
    padding: 0;
    font-size: 0.95em;
    color: #ddd;
}
.kps-line-modifiers li::before {
    content: '• ';
    color: var(--ds-primary, #E57E00);
}

/* Storefront option picker */
.storefront-options { margin: 16px 0; }
.storefront-options .so-group {
    margin-bottom: 14px;
    border: 1px solid #e5d4b8;
    border-radius: 6px;
    padding: 10px 14px;
}
.storefront-options .so-group.required {
    border-color: var(--ds-primary, #E57E00);
}
.storefront-options .so-group-name {
    font-weight: 600;
    margin-bottom: 6px;
}
.storefront-options .so-required-badge {
    color: var(--ds-primary, #E57E00);
    font-size: 0.75em;
    margin-left: 6px;
}