.cfb-screen-marker { display: none; }
.cfb-screen { position: relative; 
  /* per-screen style variables (can be set inline by the editor) */
  --cfb-error-color: #e30613;
  --cfb-error-border: #e30613;
  --cfb-error-font-size: 13px;
  --cfb-overlay-bg: rgba(255,255,255,0.4);
  --cfb-overlay-radius: 8px;
}

/* Baseline field look (override freely per-widget in Elementor's Style tab) */
.cfb-input { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; box-sizing: border-box; }

.cfb-checkbox, .cfb-radio {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer;
}
.cfb-checkbox input, .cfb-radio input { width: 20px; height: 20px; cursor: pointer; flex-shrink: 0; }

/* Image / card option — single widget instance, hidden native radio */
.cfb-card { position: relative; display: block; cursor: pointer; }
.cfb-card-input { position: absolute; opacity: 0; pointer-events: none; }
.cfb-card-body {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #f2f2f2; border: 2px solid transparent; border-radius: 8px;
  padding: 18px 10px; text-align: center; transition: border-color .15s, background .15s;
  position: relative; height: 100%; box-sizing: border-box;
}
.cfb-card-body img { max-width: 100%; height: 70px; object-fit: contain; margin-bottom: 10px; }
.cfb-card-label { font-size: 13px; font-weight: 700; color: #2b2b2b; }
.cfb-card-check {
  display: none; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px;
  background: #1a9e5c; color: #fff; border-radius: 50%; align-items: center; justify-content: center;
  font-size: 12px; line-height: 20px;
}
.cfb-card-input:checked + .cfb-card-body { border-color: #e30613; background: #fff7f7; }
.cfb-card-input:checked + .cfb-card-body .cfb-card-check { display: flex; }
.cfb-card:hover .cfb-card-body { border-color: #ccc; }

/* Buttons */
.cfb-btn { display: inline-flex !important; align-items: center; justify-content: center; padding: 11px 26px; border: none; border-radius: 4px; background: #e30613; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cfb-btn:hover { background: #c00510; }
.cfb-btn svg, .cfb-btn i, .cfb-btn .elementor-icon { width: 1em; height: 1em; font-size: 1em; display: inline-flex; flex: 0 0 auto; }
.cfb-btn svg, .cfb-btn i, .cfb-btn .elementor-icon { fill: currentColor; stroke: currentColor; }
.cfb-btn .cfb-btn__icon { display: inline-flex; flex: 0 0 auto; margin-right: .5em; }
.cfb-btn .cfb-btn__text { display: inline-block; }

/* Error UI */
.cfb-error-message { color: var(--cfb-error-color); font-size: var(--cfb-error-font-size); margin-top: 6px; font-weight: 600; }
.cfb-input[aria-invalid="true"], .cfb-card-body[aria-invalid="true"] { border-color: var(--cfb-error-border); box-shadow: 0 0 0 3px rgba(227,6,19,0.06); }
.cfb-error-message { display: none; }
.cfb-field-invalid + .cfb-error-message { display: block; }
.cfb-card-body.cfb-field-invalid + .cfb-error-message { display: block; }
.cfb-field-invalid.cfb-input, .cfb-card-body.cfb-field-invalid { box-shadow: 0 0 0 3px rgba(227,6,19,0.06); }
.cfb-btn-previous { background: #eee; color: #333; }
.cfb-btn-previous:hover { background: #ddd; }

/* Progress */
.cfb-progress { margin-bottom: 16px; }
.cfb-progress-track { width: 100%; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
.cfb-progress-bar { height: 100%; background: #e30613; transition: width .3s; }
.cfb-progress-text { font-size: 12px; color: #777; margin-top: 4px; }

/* Accordion "completed" overlay — dims the answered screen, shows a checkmark + Change selection */
.cfb-screen-completed > *:not(.cfb-completed-overlay) { opacity: .35; pointer-events: none; filter: grayscale(20%); }
.cfb-completed-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: var(--cfb-overlay-bg, rgba(255, 255, 255, 0.4));
  border-radius: var(--cfb-overlay-radius, 8px);
}
.cfb-completed-check {
  width: 44px; height: 44px; border-radius: 50%; background: #1a9e5c; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.cfb-completed-check svg, .cfb-completed-check i { width: .55em; height: .55em; font-size: 1em; }
.cfb-completed-check svg { fill: currentColor; stroke: currentColor; }
.cfb-change-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #ccc; border-radius: 4px; padding: 8px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.cfb-change-btn:hover { background: #f5f5f5; }
.cfb-change-btn svg { fill: currentColor; stroke: currentColor; }

.cfb-done { text-align: center; padding: 40px 20px; }

@media (max-width: 480px) {
  .cfb-completed-check { width: 36px; height: 36px; font-size: 18px; }
}