:root {
  /* Brand palette (adjust to exact hex if you have the brand sheet) */
  --brand-teal: #14b8c4;
  --brand-teal-600: #0fa3b0;
  --brand-navy: #1b2b48;
  --brand-navy-600: #132036;
  --brand-light: #e9f7fa;

  /* Google CTA button colors from the mock (teal with white text) */
  --google-cta-bg: #2cc0d3;
  --google-cta-bg-hover: #22acbf;
  --google-cta-text: #ffffff;

  /* Circle sizing */
  --nps-circle-size: clamp(2.4rem, 6.5vw, 3.2rem);
}

.nps-header { text-align: center; margin-bottom: 1.25rem; }
.nps-header .nps-brand-logo { max-height: 110px; width: auto; }

.nps-card { border: 1px solid #e9ecef; border-radius: .5rem; }

/* Two-row layout: 6 circles first row, 5 centered second row */
.nps-score-rows { display: grid; gap: .8rem; }
.nps-score-row { display: grid; gap: .6rem; justify-content: center; }
.nps-score-row-top { grid-template-columns: repeat(6, var(--nps-circle-size)); }
.nps-score-row-bottom { grid-template-columns: repeat(5, var(--nps-circle-size)); }

/* Full round filled circles (never white on hover/selection) */
.nps-score { width: var(--nps-circle-size); aspect-ratio: 1 / 1; display: inline-grid; place-items: center; border-radius: 50%; font-weight: 700; border: 0; background-color: #14b8c42e; color: #fff; line-height: 1; }
.nps-score:hover, .nps-score:focus { background-color: #14b8c42e; color: #fff; }

/* Selected state in brand teal */
.btn-check:checked + label.nps-score, .btn-check:active + label.nps-score { background-color: #14b8c4; color: #fff; }

/* Labels */
.nps-scale-labels { color: #6c757d; }
.nps-label-left { font-style: italic; }
.nps-label-right { font-style: italic; display: flex; justify-content: flex-end; }

.nps-title { color: var(--brand-navy); font-weight: 700; }

.btn-brand { background-color: var(--brand-teal); border-color: var(--brand-teal); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background-color: var(--brand-teal-600); border-color: var(--brand-teal-600); color: #fff; }

/* Google review visuals */
.nps-google-logo { height: 110px; width: auto; }
.nps-google-logo-lg { height: 128px; width: auto; }

/* CTA button styles for Google review */
.btn-google-review { background: var(--google-cta-bg); color: var(--google-cta-text); border: none; font-weight: 700; letter-spacing: .02em; padding: .75rem 1rem; text-transform: uppercase; }
.btn-google-review:hover, .btn-google-review:focus { background: var(--google-cta-bg-hover); color: var(--google-cta-text); }

.nps-band { background: var(--brand-light); border-radius: .5rem; }