/**
 * Supa Rewards — front-end (My Account tab) + cart widget styles.
 * Neutral, theme-agnostic; inherits the active theme's fonts/colours where it can.
 */

.sv-rewards h3 {
	margin: 1.6em 0 0.4em;
}

.sv-rewards-muted {
	color: #6b7280;
	font-size: 0.9em;
}

/* Balance hero */
.sv-rewards-balance {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
	padding: 1.1rem 1.25rem;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fafafa;
}
.sv-rewards-balance-num {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
}
.sv-rewards-balance-label {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #4b5563;
}
.sv-rewards-balance-value {
	margin-left: auto;
	color: #6b7280;
	font-size: 0.95rem;
}

/* Redemption ladder */
.sv-rewards-ladder {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0.5rem 0;
}
.sv-rewards-redeem {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	min-width: 96px;
	padding: 0.6rem 0.9rem;
	cursor: pointer;
}
.sv-rewards-redeem strong {
	font-size: 1.15rem;
}
.sv-rewards-redeem span {
	font-size: 0.78rem;
	opacity: 0.75;
}
.sv-rewards-redeem.disabled,
.sv-rewards-redeem[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}
.sv-rewards-redeem.is-loading {
	opacity: 0.6;
	pointer-events: none;
}
.sv-rewards-redeem-msg {
	min-height: 1.2em;
	margin: 0.4rem 0 0;
	font-size: 0.95rem;
}

/* Earn list */
.sv-rewards-earn {
	margin: 0.3rem 0 0;
	padding-left: 1.1rem;
}
.sv-rewards-earn li {
	margin: 0.25rem 0;
}

/* Referral share */
.sv-rewards-referral {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.sv-rewards-referral-link {
	flex: 1 1 260px;
	min-width: 0;
	padding: 0.5rem 0.6rem;
	font-family: monospace;
	font-size: 0.85rem;
}
.sv-rewards-copied {
	color: #15803d;
	font-size: 0.9rem;
}

/* History table */
.sv-rewards-history {
	width: 100%;
	border-collapse: collapse;
}
.sv-rewards-history th,
.sv-rewards-history td {
	padding: 0.5rem 0.6rem;
	border-bottom: 1px solid #eee;
	text-align: left;
}
.sv-rewards-num {
	text-align: right !important;
	font-variant-numeric: tabular-nums;
}
.sv-rewards-history .is-positive {
	color: #15803d;
}
.sv-rewards-history .is-negative {
	color: #b91c1c;
}

/* ==========================================================================
   Cart / checkout widget

   Four states, four looks, and the differences are deliberate: the "ready"
   prompt is the only one that carries the accent colour, because it is the
   only one asking the customer to do something. Saving-in-progress is
   intentionally quiet — it is information, not an offer.
   ========================================================================== */
.sv-rewards-cart-widget {
	margin: 1rem 0;
	padding: 0.9rem 1rem;
	border: 1px dashed var(--rw-line, #cbd5e1);
	border-radius: 10px;
	color: var(--rw-ink, inherit);
}
.sv-rewards-cart-head {
	margin: 0 0 0.6rem;
	font-size: 1rem;
}
.sv-rewards-cart-widget .sv-rewards-ladder {
	margin-bottom: 0;
	display: grid;
	gap: 0.4rem;
}
.sv-rewards-cart-widget .sv-rewards-ladder button {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	text-align: left;
}
.sv-rewards-cart-widget .sv-rewards-ladder button span {
	color: var(--rw-muted, #6b7280);
	font-size: 0.9em;
}

/* Staged */
.sv-rewards-applied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.sv-rewards-applied-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.sv-rewards-applied-value {
	color: var(--rw-good, #14683F);
	font-size: 0.95em;
}

/* Goal reached — the one state that asks for a decision. */
.sv-rewards-ready {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.sv-rewards-ready-head {
	margin: 0;
	font-weight: 700;
	color: var(--rw-accent-ink, #8A5A12);
}
.sv-rewards-ready-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.sv-rewards-ready-body > div {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

/* Saving, not yet arrived — quiet on purpose. */
.sv-rewards-goal-progress p {
	margin: 0 0 0.5rem;
}
.sv-rewards-bar {
	height: 6px;
	border-radius: 999px;
	background: var(--rw-line, rgba(21, 35, 63, .18));
	overflow: hidden;
}
.sv-rewards-bar > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--rw-gold, #EF9F27);
}

.sv-rewards-cart-msg {
	margin: 0.6rem 0 0;
	font-size: 0.9em;
	color: var(--rw-muted, #6b7280);
}
.sv-rewards-cart-msg:empty {
	display: none;
}
.sv-rewards-cart-msg.is-error {
	color: #b91c1c;
}

@media (max-width: 480px) {
	.sv-rewards-applied,
	.sv-rewards-ready-body {
		align-items: stretch;
		flex-direction: column;
	}
}


/* ==========================================================================
   SUPA REWARDS 2.0 — the My Account tab

   Colour comes from the STORE's own tokens (--sv-*) with plain fallbacks, so
   this inherits the theme's light/dark system instead of inventing a second one
   that could disagree with it. Every custom property has a fallback so the
   plugin still looks right if the theme is ever swapped out.

   The row is a GRID with fixed price and action columns. Laying it out with
   flex made each row's number sit wherever the action button left room, so the
   prices stepped in and out down the page. Fixed columns put every number on
   one straight vertical line, and the ★ flag occupies exactly the footprint the
   button did — so changing your goal moves nothing but the highlight.
   ========================================================================== */
/* The cart widget shares this token set: it lives outside .sv-rewards (it is
   injected into the checkout, not the account tab) and without its own scope
   every var() fell back to the light-mode default on a dark page. */
.sv-rewards,
.sv-rewards-cart-widget{
  --rw-ink:var(--sv-text,#15233F);
  --rw-muted:var(--sv-text-muted,#5b6677);
  --rw-line:var(--sv-border,rgba(21,35,63,.18));
  --rw-gold:var(--sv-gold,#EF9F27);
  /* Readable gold-on-light; the theme flips it to the bright gold in dark. */
  --rw-accent-ink:#8A5A12;
  --rw-accent-bg:rgba(239,159,39,.10);
  --rw-good:#14683F;
  --rw-good-bg:rgba(20,104,63,.08);
}
html[data-sv-theme="dark"] .sv-rewards,
html[data-sv-theme="dark"] .sv-rewards-cart-widget{
  --rw-accent-ink:var(--sv-gold,#EF9F27);
  --rw-accent-bg:rgba(239,159,39,.12);
  --rw-good:#4ade80;
  --rw-good-bg:rgba(74,222,128,.09);
}
@media (prefers-color-scheme:dark){
  html:not([data-sv-theme="light"]) .sv-rewards,
  html:not([data-sv-theme="light"]) .sv-rewards-cart-widget{
    --rw-accent-ink:var(--sv-gold,#EF9F27);
    --rw-accent-bg:rgba(239,159,39,.12);
    --rw-good:#4ade80;
    --rw-good-bg:rgba(74,222,128,.09);
  }
}

.sv-rw-balance{display:flex;align-items:baseline;gap:.5rem;margin-bottom:1.25rem}
.sv-rw-balance-num{font-size:3rem;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--rw-ink)}
.sv-rw-balance-label{font-size:1rem;color:var(--rw-muted)}

/* --- the goal card ------------------------------------------------------ */
/* --- A2: the reward is the headline, the balance is its caption ---------- */
.sv-rw-head{margin-bottom:1.4rem}
.sv-rw-bal-small{margin:0 0 .35rem;font-size:.85rem;color:var(--rw-muted);font-variant-numeric:tabular-nums}
.sv-rw-bal-small b{color:var(--rw-ink);font-weight:800;font-size:1.05rem}

.sv-rw-goalrow{display:flex;align-items:center;gap:.85rem}
/* Progress as a ring: readable at a glance without reading a number. The hole
   is painted with the page background so it works on either theme. */
.sv-rw-ring{
  flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--rw-gold) 0 var(--sv-rw-pct,0%),var(--rw-line) var(--sv-rw-pct,0%) 100%);
}
.sv-rw-ring i{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--sv-card,var(--sv-bg,#fff));
  font-style:normal;font-size:.74rem;font-weight:800;color:var(--rw-accent-ink);font-variant-numeric:tabular-nums;
}
.sv-rw-goaltxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.05rem}
.sv-rw-goalname{
  font-size:clamp(1.15rem,4.5vw,1.7rem);font-weight:800;line-height:1.12;
  letter-spacing:-.022em;color:var(--rw-ink);text-wrap:balance;
}
.sv-rw-goalhook{font-size:.9rem;font-weight:700;color:var(--rw-accent-ink)}
.sv-rw-goal-clear{
  flex:none;font-size:.76rem;font-weight:700;color:var(--rw-muted);font-family:inherit;
  background:transparent;border:1px solid var(--rw-line);border-radius:7px;
  padding:.32rem .6rem;cursor:pointer;white-space:nowrap;
}
.sv-rw-goal-clear:hover,.sv-rw-goal-clear:focus-visible{border-color:var(--rw-gold);color:var(--rw-accent-ink)}

.sv-rw-track{height:8px;border-radius:999px;background:var(--rw-line);overflow:hidden;margin:.85rem 0 .35rem}
.sv-rw-fill{height:100%;border-radius:999px;background:var(--rw-gold);transition:width .4s ease}
.sv-rw-goal-scale{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem;color:var(--rw-muted);font-variant-numeric:tabular-nums}
.sv-rw-togo{font-weight:700;color:var(--rw-accent-ink);text-align:right}

/* No goal yet: the balance takes the headline back, because then it IS the story */
.sv-rw-head.is-nogoal .sv-rw-balance{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.4rem}
.sv-rw-balance-num{font-size:3rem;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--rw-ink)}
.sv-rw-balance-label{font-size:1rem;color:var(--rw-muted)}

.sv-rw-muted{color:var(--rw-muted);font-size:.9rem}

/* --- the reward rows ---------------------------------------------------- */
.sv-rw-opts{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.5rem}
.sv-rw-opt{
  display:grid;
  /* name | price | action — the last two FIXED, so nothing shuffles */
  grid-template-columns:minmax(0,1fr) 4.5rem 7rem;
  align-items:center;column-gap:.9rem;
  border:1px solid var(--rw-line);border-radius:10px;padding:.7rem .9rem;
}
.sv-rw-opt.is-can{border-color:var(--rw-good);background:var(--rw-good-bg)}
.sv-rw-opt.is-locked{opacity:.72}
.sv-rw-opt.is-goal{border-color:var(--rw-gold);background:var(--rw-accent-bg);opacity:1}

.sv-rw-opt-main{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.sv-rw-opt-name{font-weight:700;line-height:1.25;color:var(--rw-ink)}
.sv-rw-opt-hook{font-size:.92rem;font-weight:600;color:var(--rw-ink);opacity:.85}
.sv-rw-opt-sub{font-size:.8rem;color:var(--rw-muted);font-variant-numeric:tabular-nums}

.sv-rw-opt-price{
  font-weight:800;font-variant-numeric:tabular-nums;font-size:.95rem;
  color:var(--rw-ink);text-align:right;white-space:nowrap;
}
/* The control, off state. `button` gets heavy default styling from the theme
   and from WooCommerce, so every property that matters is set explicitly here
   rather than inherited — otherwise it renders as a filled theme button and the
   on/off distinction disappears. */
.sv-rw-goal-set{
  display:block;width:100%;box-sizing:border-box;
  background:transparent;color:var(--rw-ink);
  border:1px solid var(--rw-line);border-radius:8px;
  padding:.4rem .5rem;margin:0;
  font-family:inherit;font-size:.78rem;font-weight:700;line-height:1.35;
  text-align:center;text-transform:none;letter-spacing:0;
  cursor:pointer;white-space:nowrap;
  transition:border-color .15s ease,color .15s ease,background-color .15s ease;
}
.sv-rw-goal-set:hover,.sv-rw-goal-set:focus-visible{
  background:transparent;border-color:var(--rw-gold);color:var(--rw-accent-ink);
}
.sv-rw-goal-set.is-loading{opacity:.5;cursor:wait}

/* M1 — the same control, ON. Filled beats outlined at a glance. */
.sv-rw-goal-set.is-goal{
  background:var(--rw-gold);border-color:var(--rw-gold);
  color:#3d2a06;font-weight:800;
}
.sv-rw-goal-set.is-goal:hover,.sv-rw-goal-set.is-goal:focus-visible{
  background:var(--rw-gold);border-color:var(--rw-gold);color:#3d2a06;filter:brightness(1.06);
}

/* --- mobile -------------------------------------------------------------- */
@media (max-width:560px){
  /* A2: the ring keeps its place, the Change button drops to its own line so a
     long reward name never gets squeezed into two words per line. */
  .sv-rw-goalrow{flex-wrap:wrap;gap:.7rem}
  .sv-rw-ring{width:48px;height:48px}
  .sv-rw-ring i{width:38px;height:38px;font-size:.68rem}
  .sv-rw-goaltxt{flex:1 1 60%}
  .sv-rw-goal-clear{order:3;margin-left:auto}
  .sv-rw-goal-scale{font-size:.76rem}

  /* Rows: name across the top, then price and the button share the line, so
     the button stays thumb-sized instead of being crushed into a corner. */
  .sv-rw-opt{grid-template-columns:1fr auto;row-gap:.5rem;padding:.7rem .8rem}
  .sv-rw-opt-main{grid-column:1 / -1}
  .sv-rw-opt-price{text-align:left;font-size:1rem}
  .sv-rw-goal-set{width:auto;min-width:8.5rem;padding:.5rem .9rem;font-size:.8rem}
  .sv-rw-balance-num{font-size:2.5rem}
}