/* ============================================================
   FARMSOURCE — PROMOTIONS DESIGN SYSTEM  ("Harvest Tag")
   Distinctive, on-brand visuals for sales, discounts, savings,
   coupons and unlocked grant rewards. Built on the Homestead
   design tokens (design-system.css) with hex fallbacks so the
   sheet renders correctly even on pages that don't load the
   design system (cart.html, order-details.html).

   Two semantic colorways:
     • DEAL  — warm honey→terracotta price tag = a sale (the
               farmer is discounting). Shape evokes a physical
               farmers-market hang tag with an eyelet.
     • REWARD — green = the customer's savings, coupons, account
               credit, and "unlocked" grant tickets.

   Polished + static (no keyframe animation); hover states only.
   ============================================================ */

:root {
  /* Local promo tokens — resolve to Homestead tokens when present,
     otherwise fall back to the canonical Homestead hex values. */
  --fs-tag-honey:  var(--honey-400, #E0BC5E);
  --fs-tag-gold:   var(--honey-500, #D4A843);
  --fs-tag-terra:  var(--terra-500, #C4652A);
  --fs-tag-terra-deep: #A8551F;
  --fs-tag-brown:  var(--brown-500, #8B5E3C);

  --fs-reward-700: var(--green-700, #3B5534);
  --fs-reward-600: var(--green-600, #4F7A45);
  --fs-reward-500: var(--green-500, #5E8E53);
  --fs-reward-tint: var(--green-100, rgba(79, 122, 69, 0.08));

  --fs-promo-surface: var(--surface-card, #F5F0E8);
  --fs-promo-linen:   var(--surface-linen, #E8E2D8);
  --fs-promo-muted:   var(--text-muted, #9B9184);
  --fs-promo-ink:     var(--text-primary, #2D2A26);
  --fs-promo-border:  var(--border-faint, #B5AD9E);
}

/* ============================================================
   1. SALE TAG — the signature element
   The frosted-glass, gently-shimmering honey→terracotta pill (the
   same treatment as .fs-sale-pill, so EVERY sale badge — storefront,
   marketplace, dashboard, cart, admin — reads identically). Kept as a
   self-sizing class so the many inline call sites need no extra utils.
   Shimmer sweeps via transform only (compositor-only); reduced-motion
   disables it. (Was a static clip-path hang tag; upgraded to glass.)
   ============================================================ */
.fs-sale-tag {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(212, 168, 67, 0.92), rgba(196, 101, 42, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 2px 8px rgba(168, 85, 31, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  text-shadow: 0 1px 0 rgba(120, 60, 20, 0.28);
}
/* Moving glass shimmer — shares the .fs-sale-pill keyframe. */
.fs-sale-tag::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: translateX(-160%) skewX(-18deg);
  animation: fsSalePillShimmer 3.4s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .fs-sale-tag::after { animation: none; display: none; }
}

/* Larger variant for product-detail modal. */
.fs-sale-tag--lg {
  font-size: 11px;
  padding: 4px 13px;
  gap: 5px;
}

/* Eligibility metadata chip (admin tables: "1st order", "recurring").
   Warm honey tint — a constraint marker, distinct from the solid deal tag. */
.fs-elig {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 7px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--fs-tag-brown);
  background: var(--honey-100, rgba(212, 168, 67, 0.18));
}

/* ============================================================
   1b. ON-PHOTO BADGE STACK — sale + cold-chain overlaid on the
   product image (storefront item cards). The catch: a pill on a
   product photo must stay legible on ANY background colour
   (white dairy, green produce, warm meat). Two guarantees:
     • a dark drop-shadow on the whole stack draws a separation
       edge around each pill so it reads on light/same-hue photos;
     • the cold badge uses a near-opaque frosty-white fill (the
       storefront's light green-100 chip washed out on pale photos).
   The sale pill keeps its .fs-sale-pill identity (already ~opaque
   + shadowed) and just inherits the stack's extra drop-shadow.
   ============================================================ */
.fs-photo-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: calc(100% - 20px);
  pointer-events: none;
  /* dark separation edge → legible on white / same-hue photos */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
/* Cold-chain, overlay-safe: opaque frosty white + cool ink, so it
   pops on dark photos AND (with the stack drop-shadow) on light ones. */
.fs-cold-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: #0C4A6E;                              /* sky-900 ink */
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* On-photo sale pill sizing (matches .fs-cold-badge so the stack lines up). */
.fs-photo-badges .fs-sale-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ============================================================
   2. PRICE — "was" (struck) and "now" (deal)
   ============================================================ */
.fs-price-was {
  text-decoration: line-through;
  text-decoration-color: rgba(168, 85, 31, 0.5);
  color: var(--fs-promo-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.fs-price-now {
  color: var(--fs-reward-600);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   3. STORE-WIDE SALE BANNER
   Warm linen card with a terracotta accent edge and a gradient
   tag medallion.
   ============================================================ */
.fs-store-sale {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.6), rgba(255, 252, 246, 0)),
    var(--fs-promo-surface);
  border: 1px solid var(--fs-promo-border);
  border-left: 3px solid var(--fs-tag-terra);
  box-shadow: 0 1px 3px rgba(45, 42, 38, 0.05);
}
/* Moving shimmer sweep — same motion as .fs-sale-pill, tuned softer so the
   banner keeps its warm colors and stays readable. (Storefront only.) */
.fs-store-sale::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.38) 50%, transparent 100%);
  transform: translateX(-170%) skewX(-18deg);
  animation: fsSalePillShimmer 3.6s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .fs-store-sale::after { animation: none; display: none; }
}
.fs-store-sale__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  background: linear-gradient(135deg, var(--fs-tag-gold), var(--fs-tag-terra));
  box-shadow: 0 1px 3px rgba(168, 85, 31, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.fs-store-sale__text {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--fs-tag-brown);
}
.fs-store-sale__amt {
  font-weight: 800;
  color: var(--fs-tag-terra-deep);
}
.fs-store-sale__meta {
  color: var(--fs-promo-muted);
  font-weight: 500;
}

/* Mobile: keep the top-of-profile sale banner compact + wrapping cleanly. */
@media (max-width: 640px) {
  .fs-store-sale {
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    align-items: flex-start;
  }
  .fs-store-sale__icon { width: 28px; height: 28px; font-size: 12px; }
  .fs-store-sale__text { font-size: 13px; }
}

/* ============================================================
   3B. PLATFORM PROMO BANNER  (reward green)
   Announces an automatic, FarmSource-funded promo (sitewide / spend-&-save)
   on the marketplace, every farm profile, and the cart. Green REWARD colorway
   + globe medallion so it reads as a PLATFORM promo — visually distinct from
   the honey farmer store-sale banner above (which is a farmer markdown).
   ============================================================ */
.fs-promo-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(94, 142, 83, 0.12), rgba(94, 142, 83, 0)),
    var(--green-50, #EEF6EE);
  border: 1px solid rgba(79, 122, 69, 0.28);
  border-left: 3px solid var(--fs-reward-600, #4F7A45);
  box-shadow: 0 1px 3px rgba(45, 42, 38, 0.05);
}
/* Soft shimmer sweep — same motion as the store-sale banner. */
.fs-promo-banner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.34) 50%, transparent 100%);
  transform: translateX(-170%) skewX(-18deg);
  animation: fsSalePillShimmer 3.6s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .fs-promo-banner::after { animation: none; display: none; }
}
.fs-promo-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  /* White medallion carrying the FarmSource logo — brands the promo as
     PLATFORM-funded (not a farmer sale) and avoids a misleading "%" glyph
     (a platform discount can be flat $ off, not just percent). */
  background: #fff;
  border: 1.5px solid var(--fs-reward-600, #4F7A45);
  box-shadow: 0 1px 3px rgba(59, 85, 52, 0.25);
  overflow: hidden;
}
.fs-promo-banner__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.fs-promo-banner__text {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--fs-reward-700, #3B5534);
}
/* "FarmSource promo" eyebrow — names the source so it's clearly a platform offer. */
.fs-promo-banner__brand {
  font-weight: 800;
  color: var(--fs-reward-700, #3B5534);
}
.fs-promo-banner__amt {
  font-weight: 800;
  color: var(--fs-reward-700, #3B5534);
}
.fs-promo-banner__meta {
  color: var(--fs-promo-muted, #9B9184);
  font-weight: 500;
}
@media (max-width: 640px) {
  .fs-promo-banner {
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    align-items: flex-start;
  }
  .fs-promo-banner__icon { width: 28px; height: 28px; font-size: 12px; }
  .fs-promo-banner__text { font-size: 13px; }
}

/* ============================================================
   4. SAVINGS CHIP — "You saved $X"  (reward green)
   ============================================================ */
.fs-saved {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--fs-reward-700);
  background: var(--fs-reward-tint);
  font-variant-numeric: tabular-nums;
}
.fs-saved::before {
  content: '\2713'; /* check */
  font-size: 9px;
  font-weight: 900;
  color: var(--fs-reward-600);
}
/* Compact inline variant (line-total cell) — no pill background. */
.fs-saved--bare {
  padding: 0;
  background: none;
  border-radius: 0;
}

/* ============================================================
   5. ORDER-SUMMARY DISCOUNT LINE  (reward green)
   A small icon medallion + green amount.
   ============================================================ */
.fs-disc-line { color: var(--fs-reward-700); }
.fs-disc-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  border-radius: 5px;
  font-size: 9px;
  color: #fff;
  /* fill + glass + moving shimmer come from the shared .fs-sale-pill class */
}
.fs-disc-amount {
  font-weight: 800;
  color: var(--fs-reward-700);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   6. WALLET — "unlocked discount" grant tickets
   ============================================================ */
.fs-wallet-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}
.fs-wallet-head__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #fff;
  font-size: 10px;
  /* fill + glass + moving shimmer come from the shared .fs-sale-pill class */
}
.fs-wallet-head__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-reward-700);
}

/* Ticket card */
.fs-grant {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-family: inherit;
  text-align: left;
  padding: 10px 12px 10px 14px;
  border-radius: 11px;
  border: 1px solid var(--fs-promo-border);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  overflow: hidden;
}
/* Left ticket "tear" stripe */
.fs-grant::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--fs-reward-500), var(--fs-reward-600));
  opacity: 0.85;
}
.fs-grant:hover {
  border-color: var(--fs-reward-500);
  box-shadow: 0 2px 10px rgba(59, 85, 52, 0.12);
}
.fs-grant__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* The earned-badge medallion (cart wallet + account settings). */
.fs-grant-medal { display: block; filter: drop-shadow(0 1px 2px rgba(168, 85, 31, 0.35)); }
.fs-grant--disabled .fs-grant-medal { filter: grayscale(0.55) opacity(0.7); }
/* Frosted-glass shine sweep on the medal seal — same motion as .fs-sale-pill,
   moves via transform only (compositor-only) and is clipped to the seal in the
   SVG so it never touches the ribbon. */
.fs-grant-medal__shine { animation: fsGrantMedalShine 3.4s ease-in-out infinite; will-change: transform; }
@keyframes fsGrantMedalShine {
  0% { transform: translateX(-16px) skewX(-18deg); }
  55%, 100% { transform: translateX(54px) skewX(-18deg); }
}
/* A greyed-out (not-yet-applicable) medal shouldn't catch the light. */
.fs-grant--disabled .fs-grant-medal__shine { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .fs-grant-medal__shine { animation: none; opacity: 0; }
}
.fs-grant__main { min-width: 0; display: flex; align-items: center; gap: 10px; }
.fs-grant__label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fs-promo-ink);
  letter-spacing: -0.01em;
}
.fs-grant__note {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fs-reward-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-grant__action {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fs-reward-600);
}

/* Selected (applied) */
.fs-grant--selected {
  border-color: var(--fs-reward-600);
  background: linear-gradient(180deg, rgba(94, 142, 83, 0.10), rgba(94, 142, 83, 0.04));
  box-shadow: 0 0 0 1px var(--fs-reward-600), 0 2px 10px rgba(59, 85, 52, 0.14);
}
.fs-grant--selected::before { opacity: 1; width: 4px; }
/* selected state keeps the shared .fs-sale-pill glass on the icon */
.fs-grant--selected .fs-grant__action { color: var(--fs-reward-700); }

/* Disabled (not yet applicable) */
.fs-grant--disabled {
  cursor: not-allowed;
  background: var(--fs-promo-linen);
  border-color: var(--fs-promo-border);
  opacity: 0.75;
}
.fs-grant--disabled::before {
  background: var(--fs-promo-muted);
  opacity: 0.4;
}
.fs-grant--disabled:hover { box-shadow: none; border-color: var(--fs-promo-border); }
.fs-grant--disabled .fs-grant__icon {
  color: var(--fs-promo-muted);
  background: rgba(155, 145, 132, 0.14);
  box-shadow: none;
}
.fs-grant--disabled .fs-grant__note { color: var(--fs-promo-muted); font-weight: 500; }

/* ============================================================
   7. PROMO CODE INPUT
   ============================================================ */
.fs-promo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--fs-reward-700);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.12s ease;
}
.fs-promo-toggle:hover { color: var(--fs-reward-600); }
.fs-promo-toggle__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 10px;
  color: #fff;  /* fill + glass + moving shimmer come from the shared .fs-sale-pill class */
}
.fs-promo-row { display: flex; gap: 8px; }
.fs-promo-input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  border: 1.5px solid var(--fs-promo-border);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-promo-ink);
  background: #fff;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.fs-promo-input::placeholder {
  color: var(--fs-promo-muted);
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
}
.fs-promo-input:focus {
  border-color: var(--fs-reward-600);
  box-shadow: 0 0 0 3px rgba(79, 122, 69, 0.14);
}
.fs-promo-apply {
  flex-shrink: 0;
  padding: 0 18px;
  font-family: inherit;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, var(--fs-reward-500), var(--fs-reward-600));
  box-shadow: 0 1px 2px rgba(59, 85, 52, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.fs-promo-apply:hover {
  background: linear-gradient(180deg, var(--fs-reward-600), var(--fs-reward-700));
  box-shadow: 0 2px 8px rgba(59, 85, 52, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.fs-promo-apply:disabled { opacity: 0.55; cursor: not-allowed; }

.fs-promo-msg { font-size: 12px; margin-top: 8px; font-weight: 600; }
.fs-promo-msg--ok    { color: var(--fs-reward-700); }
.fs-promo-msg--error { color: var(--fs-tag-terra); }
.fs-promo-msg--muted { color: var(--fs-promo-muted); font-weight: 500; }

/* ============================================================
   8. MOBILE — honor the 16px input-minimum (Homestead rule):
   the .fs-promo-input class would otherwise override
   mobile-responsive.css's element-level rule and reintroduce
   iOS zoom-on-focus. Keep touch target comfortable.
   ============================================================ */
@media (max-width: 768px) {
  .fs-promo-input { font-size: 16px; }
  .fs-promo-apply { padding: 0 20px; min-height: 44px; }

  /* Admin discount budget/alert inputs use an absolutely-positioned $/% affix in
     a .relative wrapper. mobile-responsive.css's element-level input rule adds
     margin-bottom:12px (which extends the wrapper so the inset-y-0 affix centers
     BELOW the field) and padding:12px (which collides with the affix). Reset both
     by id so the affix stays centered and clear of the text. */
  #disc-budget-input, #disc-alertpct-input { margin-bottom: 0; }
  #disc-budget-input { padding-left: 1.75rem; padding-right: 0.75rem; }
  #disc-alertpct-input { padding-left: 0.75rem; padding-right: 2rem; }
}