/**
 * File Path: assets/css/mbs-admin-settings-general.css
 * General tab styles -- display-options 2-column toggle grid; loaded when the General tab is active.
 * @package MyBookShowroom
 * @since   1.0.0
 */

/* ----- Tab wrapper ------------------------------------------------- */
.mbs-tab-general {
    max-width: 860px;
    padding-top: 12px;
}

/* ----- Single-column page layout ----------------------------------- */
/* All cards stack vertically; no sidebar column.                      */
.mbs-general-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Save button row. */
.mbs-settings-actions {
    margin-top: 4px;
}

/* ----- Display options grid (General tab -- 5 toggles) ------------- */
/* 2-col responsive -> 1-col below 782px (WP standard mobile breakpoint). */
.mbs-display-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
    margin: 0;
}

/* Orphan fix: a lone last item in an odd-count 2-col grid spans both columns. */
.mbs-display-options-grid > .mbs-display-option-cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 50%;
}

@media (max-width: 782px) {
    .mbs-display-options-grid {
        grid-template-columns: 1fr;
    }
    .mbs-display-options-grid > .mbs-display-option-cell:last-child:nth-child(odd) {
        max-width: 100%;
    }
}

/* ----- Individual display option cell ----- */
/* Layout:
      [checkbox] [label  ............]
                 [helper text .......]
   Checkbox spans both rows via grid-row: 1 / span 2. */
.mbs-display-option-cell {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 4px;
    align-items: start;
    min-width: 0;
}

.mbs-display-option-cell > input[type="checkbox"] {
    margin: 3px 0 0 0;
    grid-row: 1 / span 2;
    grid-column: 1;
}

.mbs-display-option-cell > label {
    grid-row: 1;
    grid-column: 2;
    font-size: 13px;
    font-weight: 600;
    color: #2c3338;
    line-height: 1.3;
    cursor: pointer;
    margin: 0;
}

.mbs-display-option-cell > label .pro-badge {
    margin-left: 6px;
}

.mbs-display-option-cell > .description {
    grid-row: 2;
    grid-column: 2;
    margin: 0;
    color: #646970;
    font-size: 12px;
    line-height: 1.5;
    font-style: normal;
}

/* Disabled (PRO-only, FREE tier) cell -- subtle visual indication. */
.mbs-display-option-cell > input[type="checkbox"]:disabled ~ label {
    opacity: 0.5;
    cursor: not-allowed;
}
