/**
 * css/create-group.css
 * Steg 8 Del C punkt 2 — "Skapa guide"-flödet. Återanvänder modal-
 * klasserna i css/modals.css (modal-backdrop, modal-box, modal-input,
 * modal-btn-primary/secondary, modal-error, modal-field, modal-label) —
 * bara det som är UNIKT för det här flödet ligger här, i linje med
 * mönstret att bryta ut nya vyer i egna filer (Del A punkt 16).
 */

.cg-step-label {
  font-size: 11px; color: #888780; margin: 0 0 8px;
}

.cg-progress {
  height: 4px; background: #E5E7EB; border-radius: 2px;
  margin-bottom: 20px; overflow: hidden;
}
.cg-progress-fill {
  height: 100%; background: var(--accent); border-radius: 2px;
  transition: width .2s;
}

.cg-help {
  font-size: 11px; color: #6B7280; line-height: 1.5; margin: 4px 0 6px;
}

/* ── Kategori-checkboxar ── */
.cg-cat-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid #F3F4F6;
  cursor: pointer;
}
.cg-cat-row:last-child { border-bottom: none; }
.cg-cat-row input[type="checkbox"] {
  margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--accent);
}
.cg-cat-row input[type="checkbox"]:disabled { opacity: .4; }
.cg-cat-emoji { font-size: 16px; flex-shrink: 0; line-height: 1.3; }
.cg-cat-text { display: flex; flex-direction: column; min-width: 0; }
.cg-cat-name { font-size: 13px; font-weight: 600; color: #111; }
.cg-cat-desc { font-size: 11px; color: #6B7280; margin-top: 1px; }

/* ── Egna kategorier ── */
.cg-custom-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 4px; font-size: 13px; color: #111;
}
.cg-custom-row .cg-cat-name { font-size: 13px; font-weight: 500; }
.cg-custom-remove {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: #9CA3AF; padding: 2px 4px; display: flex; align-items: center;
}
.cg-custom-remove:hover { color: #DC2626; }

.cg-custom-input-row {
  display: flex; gap: 8px; margin: 8px 0; align-items: center;
}
.cg-custom-input-row .modal-input { flex: 1; }

.cg-add-custom-btn {
  background: none; border: none; cursor: pointer;
  color: var(--accent); font-size: 12px; font-weight: 700;
  padding: 6px 4px; font-family: inherit;
}

.cg-ovrigt-row {
  display: flex; align-items: center; justify-content: space-between;
  background: #F1EFE8; border-radius: 6px;
  padding: 8px 12px; margin-top: 12px;
  font-size: 12px; color: #5F5E5A;
}
.cg-ovrigt-badge {
  font-size: 10px; color: #888780;
}

/* ── Bekräftelse ── */
.cg-confirm-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: #E1F5EE; color: #0F6E56;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin: 4px auto 16px;
}
.cg-confirm-text {
  font-size: 12px; color: #5F5E5A; text-align: center;
  line-height: 1.6; margin-bottom: 20px;
}