/* rewards.css — the customer's coupons and VIP at the main checkout (Luis,
   2026-10-09). Script: rewards.js. Each kind in the colours its ticket has on
   the customer page (customers/cust_rewards.css), so a coupon looks the same
   in both places: coupon blue, VIP purple, birthday magenta, loyalty green,
   anything else plum. */
.rw-k-coupon   { --k1: #1e3a8a; --k2: #2f6fe0; }
.rw-k-vip      { --k1: #3b0764; --k2: #7c3aed; }
.rw-k-birthday { --k1: #9d174d; --k2: #e0337f; }
.rw-k-loyalty  { --k1: #14532d; --k2: #1f8a4c; }
.rw-k-other    { --k1: #4a1d28; --k2: #8a4a5a; }

/* ── In the ticket dialog, under the points ── */
.rw-sec[hidden] { display: none !important; }
.rw-sec { width: 100%; max-width: 560px; box-sizing: border-box; margin: 0 auto 14px; }
.rw-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 7px; }
.rw-head b { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #0d2a52; }
.rw-sub { font-size: 12px; color: #64748b; }
#ticketModal .rw-code { margin-left: auto; width: 128px; padding: 6px 12px; border: 1px solid rgba(120, 140, 170, .35); border-radius: 999px;
  background: #fff; font: inherit; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #0d2a52; outline: none; }
#ticketModal .rw-code:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .14); }
#ticketModal .rw-code::placeholder { text-transform: none; letter-spacing: 0; color: #94a3b8; }
.rw-list { display: grid; gap: 7px; }
.rw-msg:empty { display: none; }
.rw-msg { margin-top: 7px; font-size: 12px; color: #b42318; text-align: center; }

.rw-c { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 10px 8px 9px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--k2) 22%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--k2) 5%, #fff) 0%, color-mix(in srgb, var(--k2) 11%, #fff) 100%);
  box-shadow: inset 4px 0 0 var(--k2); transition: border-color .18s cubic-bezier(.4, 0, 1, 1), box-shadow .18s cubic-bezier(.4, 0, 1, 1); }
.rw-c.is-on { border-color: var(--k2); box-shadow: inset 4px 0 0 var(--k2), 0 0 0 1px var(--k2), 0 6px 16px color-mix(in srgb, var(--k2) 22%, transparent);
  transition-duration: .30s; transition-timing-function: var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)); }
.rw-c.is-off { opacity: .62; }
.rw-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--k1), var(--k2)); box-shadow: 0 3px 8px color-mix(in srgb, var(--k2) 35%, transparent); }
.rw-ic svg { width: 18px; height: 18px; fill: #fff; }
.rw-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rw-tx b { font-size: 13px; font-weight: 700; color: #0d2a52; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-val { color: var(--k2); font-weight: 800; }
.rw-tx small { font-size: 11.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-vip { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 800;
  letter-spacing: .08em; color: #fff; background: linear-gradient(135deg, #3b0764, #7c3aed); vertical-align: 1px; }
.rw-act { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.rw-why { font-size: 11.5px; color: #64748b; text-align: right; max-width: 170px; line-height: 1.3; }
.rw-off { font-style: normal; font-size: 13px; font-weight: 800; color: var(--k2); white-space: nowrap; }
.rw-off.rw-zero { font-size: 11.5px; font-weight: 600; color: #b45309; white-space: normal; max-width: 170px; text-align: right; line-height: 1.3; }

#ticketModal .rw-btn { padding: 7px 13px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: transform .18s cubic-bezier(.4, 0, 1, 1), box-shadow .18s cubic-bezier(.4, 0, 1, 1); }
#ticketModal .rw-apply { border: 0; color: #fff; background: linear-gradient(135deg, var(--k1), var(--k2));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--k2) 30%, transparent); }
#ticketModal .rw-apply span { font-weight: 600; opacity: .85; }
#ticketModal .rw-apply:hover { transform: translateY(-1px); box-shadow: 0 7px 16px color-mix(in srgb, var(--k2) 38%, transparent);
  transition-duration: .30s; transition-timing-function: var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)); }
#ticketModal .rw-remove { border: 1px solid rgba(120, 140, 170, .35); background: #fff; color: #334155; }
#ticketModal .rw-remove:hover { border-color: #b42318; color: #b42318; }
.rw-pick { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: #64748b; }
#ticketModal .rw-pick select { flex: 1 1 auto; min-width: 0; padding: 5px 8px; border: 1px solid rgba(120, 140, 170, .35); border-radius: 8px;
  background: #fff; font: inherit; font-size: 12px; color: #0d2a52; }

/* ── On the cart line it came off, beside the Discount pill ── */
.rw-pill { display: inline-flex; align-items: center; margin-left: 8px; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; vertical-align: middle;
  color: var(--k2); background: color-mix(in srgb, var(--k2) 9%, #fff); border: 1px solid color-mix(in srgb, var(--k2) 30%, transparent); }
.rw-sum { color: #7c3aed; font-weight: 700; }

/* ── On the TICKET card ── */
#ticketSummary .rw-tk span:last-child { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
#ticketSummary .rw-tk-btn { padding: 3px 10px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, #3b0764, #7c3aed); box-shadow: 0 3px 8px rgba(124, 58, 237, .28); }
#ticketSummary .rw-tk-x { width: 18px; height: 18px; padding: 0; border: 1px solid rgba(120, 140, 170, .35); border-radius: 50%;
  background: #fff; color: #64748b; font: inherit; font-size: 12px; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; }
#ticketSummary .rw-tk-x:hover { border-color: #b42318; color: #b42318; }

@media (prefers-reduced-motion: reduce) {
  .rw-c, #ticketModal .rw-btn { transition: none; }
  #ticketModal .rw-apply:hover { transform: none; }
}