/* ============================================================
   Path: src/RichRich.Web/wwwroot/css/modifiers.css
   Session: J-166 (D38)
   LastModified: 2026-10-04
   Module: M11/M12 — customization groups: page · editor · POS dialog · cart
   ============================================================
   🆕 NEW FILE — J-166 (D38)
   ⚠️ الألوان من themes.css (--p · --card-bg · --card-bdr · --t2 · --t3).
   ⚠️ أزرار الخيارات للّمس: ارتفاعٌ ≥ 44px.
   ============================================================ */

/* ─── نافذة الخيارات في نقطة البيع ─── */
.mod-dialog {
    max-width: 640px;
}

.mod-group {
    margin-bottom: 1rem;
    padding: .65rem .75rem;
    border: 1px solid var(--card-bdr);
    border-radius: 12px;
}

.mod-group.is-missing {
    border-color: #dc3545;
    box-shadow: 0 0 0 .15rem rgba(220, 53, 69, .15);
}

.mod-group-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    flex-wrap: wrap;
}

.mod-group-name {
    font-weight: 700;
}

.mod-group-rule {
    margin-inline-start: auto;
    font-size: .8rem;
    color: var(--t3);
}

.mod-options {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.mod-option {
    min-height: 44px;
    min-width: 5.5rem;
    padding: .4rem .85rem;
    border: 1px solid var(--card-bdr);
    border-radius: 10px;
    background: var(--card-bg);
    color: inherit;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    transition: background-color .15s, border-color .15s;
}

.mod-option.picked {
    background: var(--p);
    border-color: var(--p);
    color: #fff;
}

.mod-option:disabled {
    opacity: .45;
}

.mod-delta {
    font-size: .75rem;
    opacity: .85;
}

.mod-total {
    font-size: 1rem;
}

/* ─── السلّة: الخيارات تحت اسم الصنف ─── */
.o-mods {
    font-size: .78rem;
    color: var(--t2);
    line-height: 1.3;
}

/* ─── صفحة المجموعات ─── */
.mod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: 1rem;
}

.mod-card.is-inactive {
    opacity: .65;
}

.mod-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}

.mod-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.mod-badges {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
}

.mod-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .75rem 0;
}

.mod-chip {
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--input-bg);
    border: 1px solid var(--card-bdr);
    font-size: .82rem;
}

.mod-chip small {
    color: var(--t3);
    margin-inline-start: .2rem;
}

.mod-chip.is-default {
    border-color: var(--p);
}

.mod-chip.is-off {
    text-decoration: line-through;
    opacity: .6;
}

.mod-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

/* ─── المحرّر ─── */
.mod-section-title {
    margin: 1.25rem 0 .5rem;
    font-weight: 700;
}

.mod-options-table input.form-control {
    min-width: 7rem;
}

.mod-price-cell {
    width: 8rem;
}

.mod-items {
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--card-bdr);
    border-radius: 10px;
    padding: .35rem .5rem;
}

.mod-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0;
    cursor: pointer;
}

.mod-item small {
    margin-inline-start: auto;
}

/* ─── حقل الصنف ─── */
.mod-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.mod-field-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    cursor: pointer;
}

.mod-field-row.is-inactive {
    opacity: .6;
}