/* Core Health GB - referral panel
   Used on the thank you page and in My Account.
   Brand: Navy #16305C, Ink #0B1B33, Cyan #29B7EA, Silver #8A8D90,
          Slate #5A6B85, Mist #E8EEF5. Montserrat SemiBold 600, never 700. */

.chgb-ref,
.chgb-ref *,
.chgb-ref *::before,
.chgb-ref *::after { box-sizing: border-box; }

.chgb-ref {
  --navy:#16305C; --ink:#0B1B33; --cyan:#29B7EA; --silver:#8A8D90;
  --slate:#5A6B85; --mist:#E8EEF5; --good:#1C6B41;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;

  position: relative;
  max-width: 560px;
  margin: 32px 0;
  padding: 28px 28px 22px;
  background: #fff;
  border: 1px solid var(--mist);
  border-radius: 4px;
  font-family: var(--sans);
}
.chgb-ref::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 62%, var(--cyan) 100%);
}
/* on the thank you page it sits under the order table, so give it room */
.chgb-ref[data-context="thankyou"] { margin-top: 40px; }

.chgb-ref__eyebrow {
  margin: 0 0 7px;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--silver);
}
.chgb-ref__title {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-weight: 600;                 /* SemiBold */
  font-size: 25px; line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--navy);
}
.chgb-ref__body {
  margin: 0 0 20px;
  font-size: 14.5px; line-height: 1.55;
  color: var(--slate);
}

.chgb-ref__codebox {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 16px;
  padding: 15px 16px;
  background: var(--mist);
  border: 1px dashed #A9BDD4;
  border-radius: 3px;
}
.chgb-ref__code {
  font-family: var(--mono);
  font-size: 20px; font-weight: 600;
  letter-spacing: .09em;
  color: var(--navy);
  word-break: break-all;
}
.chgb-ref__copy {
  flex: none;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); background: #fff;
  border: 1px solid #C9D6E4; border-radius: 3px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.chgb-ref__copy:hover { border-color: var(--cyan); }
.chgb-ref__copy[data-copied="true"] { color: var(--good); border-color: var(--good); }
.chgb-ref__copy:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

.chgb-ref__stats {
  display: flex; gap: 1px;
  margin: 0 0 18px;
  background: var(--mist);
  border: 1px solid var(--mist);
  border-radius: 3px;
  overflow: hidden;
}
.chgb-ref__stat { flex: 1; background: #fff; padding: 12px 14px; }
.chgb-ref__stat span {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--silver);
}
.chgb-ref__stat b {
  display: block; margin-top: 2px;
  font-family: var(--sans); font-weight: 600; font-size: 19px;
  color: var(--ink);
}
.chgb-ref__stat:last-child b { color: var(--good); }
.chgb-ref__stat .woocommerce-Price-amount { font-size: 19px; }

.chgb-ref__rewards {
  margin: 0 0 18px; padding-top: 16px;
  border-top: 1px solid var(--mist);
}
.chgb-ref__reward {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px; margin-top: 8px;
  background: rgba(28,107,65,.06);
  border-left: 2px solid var(--good);
  border-radius: 0 3px 3px 0;
}
.chgb-ref__rcode {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  letter-spacing: .07em; color: var(--navy);
}
.chgb-ref__rexp {
  font-family: var(--mono); font-size: 11px; color: var(--slate);
}

.chgb-ref__terms {
  margin: 0; padding-top: 14px;
  border-top: 1px solid var(--mist);
  font-size: 11.5px; line-height: 1.55;
  color: var(--silver);
}

@media (max-width: 480px) {
  .chgb-ref { padding: 24px 18px 18px; }
  .chgb-ref__title { font-size: 22px; }
  .chgb-ref__codebox { flex-direction: column; align-items: stretch; gap: 10px; }
  .chgb-ref__copy { width: 100%; }
  .chgb-ref__stats { flex-wrap: wrap; }
  .chgb-ref__stat { flex: 1 1 33%; }
}

/* preview ribbon, only rendered when CHGB_REF_PREVIEW is on */
.chgb-ref__preview {
  margin: 0 0 14px;
  padding: 9px 12px;
  background: #FAF1DE;
  border-left: 2px solid #8A5906;
  border-radius: 0 3px 3px 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: #8A5906;
}