/* ============================================================
   SPRAY POINTS → VOUCHER PANEL
   Cart · checkout · My Account
   Depends on tfw-design-system-final.css for the tokens.

   Design rules held here:
     2  filled ink buttons, white text, 1px ink border
     3  hover lifts 1px, darkens to #000, 200ms
     4  amber only on the progress bar
     6  0px corners on buttons, badges, prices, sections
     9  never Cormorant for numbers - Outfit for every figure
    10  never fade static text with opacity
    15  mobile-first, min-width queries scale up
    22  44px minimum touch target
   ============================================================ */

.tfw-pv {
  font-family: var(--fb);
  border: 1px solid var(--bd);
  border-radius: 0;
  background: var(--card);
  padding: 20px 18px;
  margin: 0 0 24px;
}

/* ─── SIGNED OUT ─── */

.tfw-pv--signin {
  padding: 14px 18px;
}

.tfw-pv__signin {
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

.tfw-pv__signin a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tfw-pv__signin a:hover {
  text-decoration: none;
}

/* ─── HEAD ─── */

.tfw-pv__title {
  font-family: var(--fd);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
}

/* Rule 9: the balance is a number, so Outfit, never Cormorant. */
.tfw-pv__balance {
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 16px;
}

.tfw-pv__balance strong {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
}

/* ─── PROGRESS TO THE FIRST VOUCHER ─── */

.tfw-pv__progress {
  height: 6px;
  background: var(--bd);
  border-radius: 0;
  overflow: hidden;
  margin: 0 0 12px;
}

.tfw-pv__progress-fill {
  display: block;
  height: 100%;
  background: var(--gold);
  transition: width 0.5s cubic-bezier(0, 0, 0.2, 1);
}

/* ─── THE TIERS ─── */

.tfw-pv__tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

/* Five tiers in a two-column grid leaves an orphan on the last row, so the
   odd one out takes the full width instead of sitting lopsided. */
.tfw-pv__tier:nth-child(odd):last-child {
  grid-column: 1 / -1;
}

.tfw-pv__tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 10px 8px;
  font-family: var(--fb);
  text-align: center;
  border-radius: 0;
  cursor: pointer;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  transition: transform 200ms ease, background-color 200ms ease, color 200ms ease;
}

.tfw-pv__tier:hover {
  transform: translateY(-1px);
  background: #000;
  border-color: #000;
}

.tfw-pv__tier:active {
  transform: translateY(0);
}

.tfw-pv__tier:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.tfw-pv__tier.is-working {
  cursor: wait;
}

.tfw-pv__tier[disabled] {
  cursor: not-allowed;
}

/* Not affordable yet. Full-contrast text on a plain ground, never faded
   (rule 10) - it reads as "not yet" from the border, not from grey text. */
.tfw-pv__tier--locked {
  background: var(--card);
  color: var(--ink);
  border: 1px dashed var(--bd);
  cursor: default;
}

.tfw-pv__tier--locked:hover {
  transform: none;
  background: var(--card);
  border-color: var(--bd);
}

.tfw-pv__tier-value {
  font-family: var(--fb);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.tfw-pv__tier-value .woocommerce-Price-amount,
.tfw-pv__tier-value bdi {
  font-family: var(--fb);
  color: inherit;
}

.tfw-pv__tier-cost {
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* ─── NOTE ─── */

.tfw-pv__note {
  font-family: var(--fb);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

.tfw-pv__note .woocommerce-Price-amount,
.tfw-pv__note bdi {
  font-family: var(--fb);
  font-weight: 600;
  color: inherit;
}

/* ─── VOUCHERS ALREADY ISSUED ─── */

.tfw-pv__vouchers {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bd);
}

.tfw-pv__vouchers-title {
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
}

.tfw-pv__voucher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bd);
}

.tfw-pv__voucher:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.tfw-pv__voucher-value {
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.tfw-pv__voucher-value .woocommerce-Price-amount,
.tfw-pv__voucher-value bdi {
  font-family: var(--fb);
  color: inherit;
}

.tfw-pv__voucher-code {
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 0;
  padding: 6px 10px;
}

.tfw-pv__voucher-use {
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 0;
  cursor: pointer;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  transition: transform 200ms ease, background-color 200ms ease;
}

.tfw-pv__voucher-use:hover {
  transform: translateY(-1px);
  background: #000;
  border-color: #000;
}

.tfw-pv__voucher-use:active {
  transform: translateY(0);
}

.tfw-pv__voucher-on {
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.tfw-pv__voucher-expiry {
  font-family: var(--fb);
  font-size: 12px;
  color: var(--ink);
  width: 100%;
}

/* ─── MESSAGE LINE ─── */

.tfw-pv__msg {
  font-family: var(--fb);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  margin: 12px 0 0;
}

.tfw-pv__msg:empty {
  display: none;
}

.tfw-pv__msg--bad {
  font-weight: 500;
  border-left: 2px solid var(--ink);
  padding-left: 10px;
}

/* ─── INSIDE THE CHECKOUT SUMMARY TABLE ─── */

.tfw-pv-row > td {
  padding: 0 !important;
}

.tfw-pv-row .tfw-pv {
  border-left: 0;
  border-right: 0;
  margin-bottom: 0;
}

/* ─── AND AGAIN ABOVE PAY NOW, WHICH IS THE ONLY ONE A PHONE CAN REACH ───
   The summary copy above lives inside the checkout's order summary, and under
   900px that whole summary is folded away behind the "Order summary" bar at the
   top of the page (native-checkout.css). So on a phone, turning points into
   money off meant scrolling the page back up, tapping it open and scrolling
   past every bottle in the order - the same fault the discount code box had.
   The panel now also renders inside the payment block, above Pay Now.
   Exactly ONE of the two shows on any screen: this one under 900px, the summary
   copy over it. Never both, or the same balance appears twice on one page. */

.tfw-pv-paybox {
  display: none;
}

@media (max-width: 899px) {
  .tfw-pv-row {
    display: none !important;
  }

  .tfw-pv-paybox {
    display: block;
    margin: 0 0 16px;
    text-align: left;            /* .place-order is centred by the theme */
  }

  .tfw-pv-paybox .tfw-pv {
    margin-bottom: 0;
  }
}

/* ─── DESKTOP ─── */

@media (min-width: 768px) {
  .tfw-pv {
    padding: 26px 24px;
  }

  .tfw-pv__title {
    font-size: 26px;
  }

  .tfw-pv__tiers {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .tfw-pv__tier:nth-child(odd):last-child {
    grid-column: auto;
  }

  .tfw-pv__voucher-expiry {
    width: auto;
    margin-left: auto;
  }
}