.bkbg-fl-app { display: block; } .bkbg-fl-wrap { box-sizing: border-box; width: 100%; } .bkbg-fl-wrap .bkbg-fl-heading { font-family: var(--bkbg-fl-hd-font-family, inherit); font-size: var(--bkbg-fl-hd-font-size-d, 18px); font-weight: var(--bkbg-fl-hd-font-weight, 800); font-style: var(--bkbg-fl-hd-font-style, normal); text-transform: var(--bkbg-fl-hd-text-transform, none); text-decoration: var(--bkbg-fl-hd-text-decoration, none); line-height: var(--bkbg-fl-hd-line-height-d, 1.3); letter-spacing: var(--bkbg-fl-hd-letter-spacing-d, normal); word-spacing: var(--bkbg-fl-hd-word-spacing-d, normal); margin: 0 0 20px; } /* List container */ .bkbg-fl-list { overflow: hidden; } .bkbg-fl-list.style-bordered, .bkbg-fl-list.style-card { border: 1px solid var(--fl-border, #e5e7eb); } .bkbg-fl-list.style-card { border-radius: var(--fl-radius, 12px); } /* Group header */ .bkbg-fl-group { padding: 8px 16px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--fl-border, #e5e7eb); } /* Rows */ .bkbg-fl-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; box-sizing: border-box; transition: background .15s; } .bkbg-fl-list.style-bordered .bkbg-fl-row + .bkbg-fl-row, .bkbg-fl-list.style-card .bkbg-fl-row + .bkbg-fl-row { border-top: 1px solid var(--fl-border, #e5e7eb); } .bkbg-fl-list.style-card .bkbg-fl-row:hover { background: #f9fafb !important; } /* Icon cell */ .bkbg-fl-icon { flex-shrink: 0; text-align: center; font-weight: 700; line-height: 1; } /* Label + desc */ .bkbg-fl-body { flex: 1; min-width: 0; } .bkbg-fl-label { font-family: var(--bkbg-fl-lb-font-family, inherit); font-size: var(--bkbg-fl-lb-font-size-d, 15px); font-weight: var(--bkbg-fl-lb-font-weight, 500); font-style: var(--bkbg-fl-lb-font-style, normal); text-transform: var(--bkbg-fl-lb-text-transform, none); line-height: var(--bkbg-fl-lb-line-height-d, 1.4); letter-spacing: var(--bkbg-fl-lb-letter-spacing-d, normal); word-spacing: var(--bkbg-fl-lb-word-spacing-d, normal); } .bkbg-fl-desc { font-family: var(--bkbg-fl-ds-font-family, inherit); font-size: var(--bkbg-fl-ds-font-size-d, 13px); font-weight: var(--bkbg-fl-ds-font-weight, 400); font-style: var(--bkbg-fl-ds-font-style, normal); text-transform: var(--bkbg-fl-ds-text-transform, none); line-height: var(--bkbg-fl-ds-line-height-d, 1.4); letter-spacing: var(--bkbg-fl-ds-letter-spacing-d, normal); word-spacing: var(--bkbg-fl-ds-word-spacing-d, normal); margin-top: 2px; } /* Badge */ .bkbg-fl-badge { flex-shrink: 0; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; } @media (max-width: 1024px) { .bkbg-fl-wrap .bkbg-fl-heading { font-size: var(--bkbg-fl-hd-font-size-t, var(--bkbg-fl-hd-font-size-d, 18px)); line-height: var(--bkbg-fl-hd-line-height-t, var(--bkbg-fl-hd-line-height-d, 1.3)); letter-spacing: var(--bkbg-fl-hd-letter-spacing-t, var(--bkbg-fl-hd-letter-spacing-d, normal)); word-spacing: var(--bkbg-fl-hd-word-spacing-t, var(--bkbg-fl-hd-word-spacing-d, normal)); } .bkbg-fl-label { font-size: var(--bkbg-fl-lb-font-size-t, var(--bkbg-fl-lb-font-size-d, 15px)); line-height: var(--bkbg-fl-lb-line-height-t, var(--bkbg-fl-lb-line-height-d, 1.4)); letter-spacing: var(--bkbg-fl-lb-letter-spacing-t, var(--bkbg-fl-lb-letter-spacing-d, normal)); word-spacing: var(--bkbg-fl-lb-word-spacing-t, var(--bkbg-fl-lb-word-spacing-d, normal)); } .bkbg-fl-desc { font-size: var(--bkbg-fl-ds-font-size-t, var(--bkbg-fl-ds-font-size-d, 13px)); line-height: var(--bkbg-fl-ds-line-height-t, var(--bkbg-fl-ds-line-height-d, 1.4)); letter-spacing: var(--bkbg-fl-ds-letter-spacing-t, var(--bkbg-fl-ds-letter-spacing-d, normal)); word-spacing: var(--bkbg-fl-ds-word-spacing-t, var(--bkbg-fl-ds-word-spacing-d, normal)); } } @media (max-width: 767px) { .bkbg-fl-wrap .bkbg-fl-heading { font-size: var(--bkbg-fl-hd-font-size-m, var(--bkbg-fl-hd-font-size-t, var(--bkbg-fl-hd-font-size-d, 18px))); line-height: var(--bkbg-fl-hd-line-height-m, var(--bkbg-fl-hd-line-height-t, var(--bkbg-fl-hd-line-height-d, 1.3))); letter-spacing: var(--bkbg-fl-hd-letter-spacing-m, var(--bkbg-fl-hd-letter-spacing-t, var(--bkbg-fl-hd-letter-spacing-d, normal))); word-spacing: var(--bkbg-fl-hd-word-spacing-m, var(--bkbg-fl-hd-word-spacing-t, var(--bkbg-fl-hd-word-spacing-d, normal))); } .bkbg-fl-label { font-size: var(--bkbg-fl-lb-font-size-m, var(--bkbg-fl-lb-font-size-t, var(--bkbg-fl-lb-font-size-d, 15px))); line-height: var(--bkbg-fl-lb-line-height-m, var(--bkbg-fl-lb-line-height-t, var(--bkbg-fl-lb-line-height-d, 1.4))); letter-spacing: var(--bkbg-fl-lb-letter-spacing-m, var(--bkbg-fl-lb-letter-spacing-t, var(--bkbg-fl-lb-letter-spacing-d, normal))); word-spacing: var(--bkbg-fl-lb-word-spacing-m, var(--bkbg-fl-lb-word-spacing-t, var(--bkbg-fl-lb-word-spacing-d, normal))); } .bkbg-fl-desc { font-size: var(--bkbg-fl-ds-font-size-m, var(--bkbg-fl-ds-font-size-t, var(--bkbg-fl-ds-font-size-d, 13px))); line-height: var(--bkbg-fl-ds-line-height-m, var(--bkbg-fl-ds-line-height-t, var(--bkbg-fl-ds-line-height-d, 1.4))); letter-spacing: var(--bkbg-fl-ds-letter-spacing-m, var(--bkbg-fl-ds-letter-spacing-t, var(--bkbg-fl-ds-letter-spacing-d, normal))); word-spacing: var(--bkbg-fl-ds-word-spacing-m, var(--bkbg-fl-ds-word-spacing-t, var(--bkbg-fl-ds-word-spacing-d, normal))); } } @media (max-width: 480px) { .bkbg-fl-row { padding: 10px 12px; gap: 10px; } .bkbg-fl-badge { display: none; } }