/* Co-Buyer Matcher — Public Styles */

.cbm-wrap * { box-sizing: border-box; }

.cbm-wrap {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1rem;
  color: #1a1a1a;
}

/* Screens */
.cbm-screen { display: none; }
.cbm-screen--active { display: block; }

/* Intro */
.cbm-intro-header h2 { font-size: 26px; font-weight: 600; margin: 0 0 .5rem; }
.cbm-intro-header p  { font-size: 15px; color: #555; line-height: 1.6; margin: 0 0 1.75rem; }
.cbm-intro-stats     { display: flex; gap: 1rem; margin-bottom: 2rem; }
.cbm-stat            { background: #f5f5f3; border-radius: 10px; padding: 1rem 1.5rem; text-align: center; flex: 1; }
.cbm-stat__num       { display: block; font-size: 28px; font-weight: 600; color: #0f6e56; }
.cbm-stat__lbl       { display: block; font-size: 12px; color: #777; margin-top: 2px; }

/* Progress */
.cbm-progress { height: 4px; background: #e5e5e2; border-radius: 2px; margin-bottom: 1.5rem; }
.cbm-progress__fill { height: 100%; background: #1d9e75; border-radius: 2px; transition: width .4s ease; }

/* Step dots */
.cbm-step-dots { display: flex; gap: 8px; margin-bottom: 1.5rem; }
.cbm-dot { width: 8px; height: 8px; border-radius: 50%; background: #ddd; transition: background .2s; }
.cbm-dot--done   { background: #1d9e75; }
.cbm-dot--active { background: #5dcaa5; }

/* Section label */
.cbm-section-lbl { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #999; margin-bottom: 1.5rem; }

/* Question block */
.cbm-qblock { margin-bottom: 1.75rem; }
.cbm-qlabel { display: block; font-size: 15px; font-weight: 600; margin-bottom: .6rem; }
.cbm-hint   { font-size: 13px; color: #666; margin-bottom: .6rem; }

/* Option grid */
.cbm-opts-grid    { display: grid; gap: 8px; }
.cbm-opts-grid--2 { grid-template-columns: 1fr 1fr; }
.cbm-opts-grid--3 { grid-template-columns: 1fr 1fr 1fr; }

/* Option buttons */
.cbm-opt {
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #1a1a1a;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
  font-family: inherit;
}
.cbm-opt:hover    { border-color: #aaa; background: #f9f9f7; }
.cbm-opt--sel     { border: 2px solid #1d9e75; background: #e8f8f3; color: #085041; font-weight: 500; }

/* Text inputs */
.cbm-text-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #1a1a1a;
  outline: none;
  transition: border-color .15s;
}
.cbm-text-input:focus { border-color: #1d9e75; }

/* Slider */
.cbm-slider-wrap { display: flex; align-items: center; gap: 10px; }
.cbm-slider-wrap input[type=range] { flex: 1; accent-color: #1d9e75; }
.cbm-slider-edge { font-size: 12px; color: #888; white-space: nowrap; }
.cbm-slider-val  { text-align: center; font-size: 13px; color: #555; margin-top: 4px; }

/* Buttons */
.cbm-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.cbm-btn--primary { background: #1d9e75; color: #fff; border: none; }
.cbm-btn--primary:hover { background: #0f6e56; }
.cbm-btn--primary:disabled { opacity: .6; cursor: not-allowed; }
.cbm-btn--ghost   { background: transparent; color: #555; border: 1px solid #ddd; }
.cbm-btn--ghost:hover { background: #f5f5f3; }
.cbm-btn--start   { font-size: 16px; padding: 12px 28px; }

/* Nav row */
.cbm-nav  { display: flex; gap: 12px; margin-top: 2rem; }
.cbm-error { font-size: 13px; color: #c0392b; margin-top: .5rem; }

/* Confirm */
.cbm-screen--confirm { text-align: center; padding: 3rem 1rem; }
.cbm-confirm-icon { font-size: 48px; color: #1d9e75; margin-bottom: 1rem; background: #e8f8f3; width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.cbm-screen--confirm h2 { font-size: 24px; margin-bottom: .75rem; }
.cbm-screen--confirm p  { color: #555; font-size: 15px; line-height: 1.6; }
.cbm-confirm-id { margin-top: 1rem; font-size: 13px; color: #999; }

@media (max-width: 480px) {
  .cbm-opts-grid--2, .cbm-opts-grid--3 { grid-template-columns: 1fr; }
  .cbm-intro-stats { flex-direction: column; }
}