/*
  Promo or Referral Code: the live check under the registration field, the "code applied" banner,
  the outcome card after registering, and the subscription page's Promo Code panel.
  Scoped to .gj-promo-* classes; light and dark values are set together. Motion is transform/opacity
  only and switched off under prefers-reduced-motion.
*/

.gj-promo-status,
.gj-promo-banner,
.gj-promo-outcome,
.gj-promo-panel {
  --promo-ok: #15803d;
  --promo-ok-soft: #e8f7ee;
  --promo-warn: #9a5b06;
  --promo-warn-soft: #fdf3e1;
  --promo-info: #1d5f9a;
  --promo-info-soft: #e6f0fa;
}
[data-bs-theme="dark"] :is(.gj-promo-status, .gj-promo-banner, .gj-promo-outcome, .gj-promo-panel) {
  --promo-ok: #7ce7a5;
  --promo-ok-soft: rgb(94 224 143 / .14);
  --promo-warn: #f7cf86;
  --promo-warn-soft: rgb(245 196 108 / .15);
  --promo-info: #9cc9f2;
  --promo-info-soft: rgb(110 168 215 / .16);
}

.gj-promo-code-chip {
  display: inline-block;
  padding: .05rem .45rem;
  font-family: var(--bs-font-monospace, ui-monospace, monospace);
  font-size: .82em;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gj-color-text);
  background: color-mix(in srgb, var(--gj-color-border) 40%, transparent);
  border: 1px solid color-mix(in srgb, var(--gj-color-border) 80%, transparent);
  border-radius: 999px;
  overflow-wrap: anywhere;
}

/* ---------- inline status under the field ---------- */
.gj-promo-status {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin-top: .4rem;
  padding: .45rem .6rem;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--gj-color-muted);
  border: 1px solid color-mix(in srgb, var(--gj-color-border) 80%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--gj-color-surface) 90%, transparent);
  animation: gj-promo-in .25s ease both;
}
.gj-promo-status[hidden] { display: none; }
.gj-promo-status i { flex: 0 0 auto; margin-top: .05rem; }
.gj-promo-status[data-tone="ok"] { color: var(--promo-ok); background: var(--promo-ok-soft); border-color: color-mix(in srgb, var(--promo-ok) 30%, transparent); }
.gj-promo-status[data-tone="warn"] { color: var(--promo-warn); background: var(--promo-warn-soft); border-color: color-mix(in srgb, var(--promo-warn) 30%, transparent); }
.gj-promo-status strong { color: inherit; font-weight: 800; }
.gj-promo-status__spin { width: .85rem; height: .85rem; margin-top: .15rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gj-promo-spin .8s linear infinite; }

/* ---------- banner at the top of the form ---------- */
.gj-promo-banner {
  position: relative;
  align-items: flex-start;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--promo-ok) 28%, var(--gj-color-border));
  background:
    radial-gradient(120% 140% at 0% 0%, var(--promo-ok-soft), transparent 60%),
    color-mix(in srgb, var(--gj-color-primary-soft, #eef2f7) 35%, var(--gj-color-surface));
}
.gj-promo-banner[hidden] { display: none; }
.gj-promo-banner.is-fresh { animation: gj-promo-in .35s ease both; }
.gj-promo-banner__icon {
  display: grid !important;
  flex: 0 0 auto;
  width: 2.3rem;
  height: 2.3rem;
  place-items: center;
  color: var(--promo-ok);
  background: var(--promo-ok-soft);
  border: 1px solid color-mix(in srgb, var(--promo-ok) 30%, transparent);
  border-radius: 12px;
}
.gj-promo-banner__copy { display: grid !important; gap: .15rem; min-width: 0; }
.gj-promo-banner__copy strong { color: var(--gj-color-text); }
.gj-promo-banner__copy > span { color: var(--gj-color-muted); }

/* ---------- outcome card after registering ---------- */
.gj-promo-outcome {
  --tone: var(--promo-ok);
  --tone-soft: var(--promo-ok-soft);
  display: flex;
  gap: .75rem;
  width: min(34rem, 100%);
  padding: .85rem 1rem;
  text-align: start;
  border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--gj-color-border));
  border-radius: 14px;
  background: radial-gradient(120% 140% at 0% 0%, var(--tone-soft), var(--gj-color-surface) 70%);
  animation: gj-promo-in .4s ease both;
}
.gj-promo-outcome[data-tone="warning"] { --tone: var(--promo-warn); --tone-soft: var(--promo-warn-soft); }
.gj-promo-outcome[data-tone="info"] { --tone: var(--promo-info); --tone-soft: var(--promo-info-soft); }
.gj-promo-outcome__icon {
  display: grid;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  font-size: 1.1rem;
  color: var(--tone);
  background: var(--tone-soft);
  border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
  border-radius: 50%;
}
.gj-promo-outcome strong { display: block; color: var(--gj-color-text); font-weight: 800; }
.gj-promo-outcome p { margin: .2rem 0 0; color: var(--gj-color-muted); font-size: .9rem; }

/* ---------- subscription page: Promo Code panel ---------- */
.gj-promo-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem 1rem;
  align-items: start;
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  color: var(--theme-ink, var(--bs-body-color));
  border: 1px solid var(--theme-line, var(--bs-border-color));
  border-radius: 18px;
  background:
    radial-gradient(110% 160% at 0% 0%, color-mix(in srgb, var(--app-context, #2f7f74) 12%, transparent), transparent 60%),
    var(--theme-surface, var(--bs-body-bg));
  box-shadow: 0 1px 2px rgb(16 24 40 / .05), 0 14px 32px -24px rgb(16 24 40 / .35);
}
.gj-promo-panel[hidden] { display: none; }
.gj-promo-panel__icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  font-size: 1.2rem;
  color: #fff;
  background: linear-gradient(135deg, var(--app-context-deep, #0c3a40), var(--app-context-deeper, #061f24));
  border: 1px solid color-mix(in srgb, var(--app-context, #2f7f74) 60%, transparent);
  border-radius: 14px;
  box-shadow: 0 10px 22px -14px var(--app-context, #2f7f74);
}
.gj-promo-panel__body { display: grid; gap: .6rem; min-width: 0; }
.gj-promo-panel__head h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.gj-promo-panel__head p { margin: .15rem 0 0; color: var(--theme-muted, var(--bs-secondary-color)); font-size: .86rem; }
.gj-promo-panel__form { display: flex; flex-wrap: wrap; gap: .5rem; }
.gj-promo-panel__form input {
  flex: 1 1 12rem;
  min-width: 0;
  height: 2.5rem;
  padding: 0 .8rem;
  font-family: var(--bs-font-monospace, ui-monospace, monospace);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--theme-ink, var(--bs-body-color));
  background: var(--theme-canvas, var(--bs-body-bg));
  border: 1px solid var(--theme-line, var(--bs-border-color));
  border-radius: 12px;
}
.gj-promo-panel__form input::placeholder { text-transform: none; letter-spacing: 0; }
.gj-promo-panel__form input:focus-visible { outline: 3px solid color-mix(in srgb, var(--app-context, #2f7f74) 45%, transparent); outline-offset: 1px; }
.gj-promo-panel__form button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 2.5rem;
  padding: 0 1rem;
  font-weight: 700;
  /* White on the deep persona tone keeps 4.5:1+ in light and dark themes. */
  color: #fff;
  background: var(--app-context-deep, #0c3a40);
  border: 1px solid var(--app-context, #2f7f74);
  border-radius: 12px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.gj-promo-panel__form button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 20px -12px var(--app-context, #2f7f74); }
.gj-promo-panel__form button:disabled { opacity: .6; }
.gj-promo-panel__rewards { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.gj-promo-panel__rewards li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .6rem;
  padding: .5rem .7rem;
  font-size: .86rem;
  border: 1px solid var(--theme-line, var(--bs-border-color));
  border-radius: 12px;
  background: color-mix(in srgb, var(--theme-canvas, var(--bs-body-bg)) 70%, transparent);
}
.gj-promo-panel__rewards strong { font-weight: 800; }
.gj-promo-panel__rewards small { flex: 1 1 100%; color: var(--theme-muted, var(--bs-secondary-color)); }
.gj-promo-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; font-size: .74rem; font-weight: 800; border-radius: 999px; }
.gj-promo-pill[data-tone="ok"] { color: var(--promo-ok); background: var(--promo-ok-soft); }
.gj-promo-pill[data-tone="warn"] { color: var(--promo-warn); background: var(--promo-warn-soft); }
.gj-promo-panel .gj-promo-status { margin-top: 0; }

@media (max-width: 575.98px) {
  .gj-promo-panel { grid-template-columns: 1fr; }
  .gj-promo-panel__form button { flex: 1 1 100%; justify-content: center; }
}

@keyframes gj-promo-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes gj-promo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gj-promo-status, .gj-promo-banner.is-fresh, .gj-promo-outcome { animation: none; }
  .gj-promo-status__spin { animation-duration: 2.4s; }
}