/* /obs-overlay/customize/: the widget customizer. Sits on top of site.css and obs-overlay.css
   (panels, fields, the preview stage and the copy boxes come from there). */

.cz-group { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.cz-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    font-weight: 700;
    font-size: 1.0625rem;
    list-style: none;
    cursor: pointer;
}
.cz-group > summary::-webkit-details-marker { display: none; }
.cz-group > summary::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-inline-end: 6px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.cz-group[open] > summary::after { transform: rotate(-135deg); }
.cz-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.cz-body { padding: 10px 0 4px; }

.cz-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px; }
.cz-check { display: flex; align-items: center; gap: 9px; min-height: 36px; font-size: 0.9375rem; cursor: pointer; }
.cz-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.cz-check.is-off { opacity: .45; cursor: default; }
.cz-check.is-off input { cursor: default; }
.cz-wide { font-weight: 400; }
.ob-field .cz-check { display: flex; margin: 0; font-size: 0.9375rem; font-weight: 400; }
.cz-top { margin-top: 26px !important; }
.cz-span { grid-column: 1 / -1; }

.cz-inline { display: inline-flex !important; align-items: center; gap: 7px; margin: 0 !important; font-size: 0.875rem !important; font-weight: 400 !important; white-space: nowrap; cursor: pointer; }
.cz-inline input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }

.cz-val { float: right; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
[dir="rtl"] .cz-val { float: left; }
.cz-form input[type="range"] { display: block; width: 100%; height: 28px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.cz-form input[type="number"].ob-input { max-width: 180px; }

.cz-hint { margin-top: 10px; font-size: 0.8125rem; color: var(--muted); }
.cz-goal { margin-top: 12px; }
.cz-goal[hidden] { display: none; }
.cz-form .ob-field.is-off { opacity: .5; }
.cz-form .ob-field.is-off select,
.cz-form .ob-field.is-off input { cursor: default; }

.cz-width { max-width: 280px; }
.cz .ob-stage { min-height: 180px; }
.cz .ob-meta a[hidden] { display: none; }

@media (max-width: 519px) {
    .cz-checks { grid-template-columns: minmax(0, 1fr); }
    .cz-top { margin-top: 0 !important; }
}