/* cust_rewards.css — the Rewards card and its New reward dialog (Luis,
   2026-10-09). Script: cust_rewards.js; data: rewards_api.php.

   The card lists the customer's coupons, VIP discounts and gifts, active
   first; used, expired and cancelled ones stay underneath, faded, so the
   record is all there. Each kind has a glossy tile in the style of the head's
   Contact buttons. */

/* ── The card ─────────────────────────────────────────────────────────── */
.cvd-rewards { display: flex; flex-direction: column; min-width: 0; }
.cvd-rewards .cvd-card-head h3 { display: flex; align-items: center; gap: 8px; }
.cr-count { font-size: 11px; font-weight: 600; color: #6e6e73; padding: 3px 9px; border-radius: 999px; background: rgba(29, 29, 31, 0.06); letter-spacing: 0; }
.cr-count:empty { display: none; }
.cr-new {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: #ffffff; background: #1d1d1f;
  box-shadow: 0 4px 10px rgba(29, 29, 31, 0.18); transition: transform .15s ease;
}
.cr-new:hover { transform: translateY(-1px); }
.cr-new svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; }

/* The list fills what the row gives the card and scrolls inside it; it never
   makes the row taller. Its own floor keeps it visible when the board stacks. */
.cr-list { flex: 1 1 auto; height: 0; min-height: 180px; overflow-y: auto; overflow-x: hidden; container-type: inline-size; display: flex; flex-direction: column; gap: 12px; margin: 0 -14px; padding: 10px 14px 8px; }   /* room round the tickets for the hover glow and rise, which the list would clip */

.cr-ico {
  position: relative; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 4px rgba(0, 0, 0, 0.12);
}
.cr-ico::before {
  content: ""; position: absolute; left: 2px; right: 2px; top: 2px; height: 46%; border-radius: 8px 8px 12px 12px / 8px 8px 5px 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0)); pointer-events: none;
}
.cr-ico svg { position: relative; width: 18px; height: 18px; fill: rgba(255, 255, 255, 0.96); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); }
.cr-k-coupon   { background: linear-gradient(160deg, #8ccaff 0%, #4a95f5 50%, #5b6cf2 100%); }
.cr-k-vip      { background: linear-gradient(160deg, #c9b3ff 0%, #8b5cf6 50%, #6d28d9 100%); }
.cr-k-birthday { background: linear-gradient(160deg, #ffb6d3 0%, #f15b9a 50%, #d63384 100%); }
.cr-k-loyalty  { background: linear-gradient(160deg, #7fe6b2 0%, #3cc983 50%, #22a967 100%); }
.cr-k-other    { background: linear-gradient(160deg, #c99aa7 0%, #8a4a5a 50%, #6b3744 100%); }

/* ── Reward tickets (Luis, 2026-10-09, after his "meal coupon" reference) ──
   A coloured main part — the shop's logo and name, the title in heavy
   capitals, what it is worth and on what, how many uses, "Valid until", and
   the photo of who gave it with the date and time; the kind's icon on a white
   plate at its right — then a perforated edge with a notch top and bottom, and
   a cream stub with the value written up the side and the code's barcode.
   Each kind its own gradient; used, expired and cancelled ones greyed under a
   stamp. The heavy sans is for the ticket only, like a printed coupon. */
.ct {
  --ct-cut: #ffffff;   /* the panel behind, showing through the notches */
  position: relative; flex: 0 0 auto; height: 156px; display: grid; grid-template-columns: minmax(0, 1fr) 86px;
  border-radius: 14px; overflow: hidden; box-shadow: 0 8px 18px rgba(20, 30, 50, 0.14);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ct-k-coupon   { --k1: #1e3a8a; --k2: #2f6fe0; --kg: 74, 140, 255; }
.ct-k-vip      { --k1: #3b0764; --k2: #7c3aed; --kg: 160, 110, 255; }
.ct-k-birthday { --k1: #9d174d; --k2: #e0337f; --kg: 255, 90, 160; }
.ct-k-loyalty  { --k1: #14532d; --k2: #1f8a4c; --kg: 60, 200, 120; }
.ct-k-other    { --k1: #4a1d28; --k2: #8a4a5a; --kg: 200, 120, 140; }
/* Hover (Luis, 2026-10-09): the ticket rises and a thin border glows in its
   own colour (--kg). Arriving on the house curve, .30s as for a small
   control answering; leaving quicker and with no bounce, .18s (house-motion). */
.ct { transition: transform .18s cubic-bezier(.4, 0, 1, 1), box-shadow .18s cubic-bezier(.4, 0, 1, 1); }
.ct:not(.is-past):hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1.5px rgba(var(--kg), 0.95), 0 0 14px 2px rgba(var(--kg), 0.45), 0 14px 26px rgba(20, 30, 50, 0.22);
  transition: transform .30s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)), box-shadow .30s ease;
}
.ct-main {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 10px; align-items: center;
  padding: 12px 12px 11px 14px; color: #fdf3e1; border-right: 2px dashed rgba(253, 243, 225, 0.55);
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, var(--k1) 0%, var(--k2) 100%);
}
.ct-text { min-width: 0; height: 100%; display: flex; flex-direction: column; }
.ct-brand { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .95; white-space: nowrap; }
.ct-brand img { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.75); }
.ct-title {
  margin: 6px 0 3px; font-size: 19px; line-height: 1.02; font-weight: 900; letter-spacing: -.005em; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ct-line { font-size: 10.5px; line-height: 1.4; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-valid { font-weight: 700; opacity: 1; }
/* Only the words are cut short, never the face (2026-10-09): the line used to
   clip its whole box, which shaved the avatar's ring and edge. */
.ct-giver { margin-top: auto; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 2px 0 1px 2px; font-size: 10px; opacity: .92; white-space: nowrap; }
.ct-giver span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ct-av {
  width: 20px; height: 20px; flex: 0 0 auto; box-sizing: border-box; border-radius: 50%; object-fit: cover; object-position: 50% 30%;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; background: rgba(255, 255, 255, 0.25);
}
.ct-plate {
  width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, #f3f3f3 62%, #e1e1e1 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28), inset 0 0 0 5px rgba(255, 255, 255, 0.95), inset 0 0 0 6px rgba(0, 0, 0, 0.06);
}
.ct-plate svg { width: 30px; height: 30px; fill: var(--k2); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18)); }
/* Hover (Luis, 2026-10-09: "add animation when hover for every reward icon").
   The plate lifts, and the icon does what its thing would do: the gift is
   shaken, the coupon swings, the crown hops and tips, the heart beats twice,
   the tag swings from its hole. Once per hover; nothing on a used, expired or
   cancelled ticket; nothing at all for anyone who has asked for less motion.
   The same moves play on the kind chips in the New reward dialog. */
.ct-plate { transition: transform .35s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)), box-shadow .35s ease; }
.ct:not(.is-past):hover .ct-plate { transform: translateY(-2px) scale(1.06); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.32), inset 0 0 0 5px rgba(255, 255, 255, 0.95), inset 0 0 0 6px rgba(0, 0, 0, 0.06); }
.ct-plate svg, .cr-chips.kinds .cr-ico svg { transform-origin: 50% 50%; }
.ct-k-other .ct-plate svg, .cr-chips.kinds .cr-k-other svg { transform-origin: 22% 22%; }   /* the tag hangs from its hole */
.ct-k-birthday:not(.is-past):hover .ct-plate svg, .cr-chips.kinds button:hover .cr-k-birthday svg { animation: ctShake .8s ease-in-out both; }
.ct-k-coupon:not(.is-past):hover .ct-plate svg,   .cr-chips.kinds button:hover .cr-k-coupon svg   { animation: ctSwing .9s ease-in-out both; }
.ct-k-vip:not(.is-past):hover .ct-plate svg,      .cr-chips.kinds button:hover .cr-k-vip svg      { animation: ctHop .8s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)) both; }
.ct-k-loyalty:not(.is-past):hover .ct-plate svg,  .cr-chips.kinds button:hover .cr-k-loyalty svg  { animation: ctBeat 1s ease-in-out both; }
.ct-k-other:not(.is-past):hover .ct-plate svg,    .cr-chips.kinds button:hover .cr-k-other svg    { animation: ctTag 1s ease-in-out both; }
@keyframes ctShake {
  0%, 100% { transform: rotate(0) scale(1); }
  12% { transform: rotate(-13deg) scale(1.1); }  26% { transform: rotate(11deg) scale(1.1); }
  40% { transform: rotate(-8deg) scale(1.08); }  54% { transform: rotate(6deg) scale(1.05); }
  70% { transform: rotate(-3deg) scale(1.02); }
}
@keyframes ctSwing {
  0%, 100% { transform: rotate(0) translateY(0); }
  25% { transform: rotate(-16deg) translateY(-3px); }  55% { transform: rotate(10deg) translateY(-1px); }  80% { transform: rotate(-4deg); }
}
@keyframes ctHop {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  35% { transform: translateY(-7px) rotate(-8deg) scale(1.14); }  65% { transform: translateY(0) rotate(5deg) scale(1); }  82% { transform: translateY(-2px) rotate(-2deg); }
}
@keyframes ctBeat {
  0%, 56%, 100% { transform: scale(1); }
  12% { transform: scale(1.24); }  24% { transform: scale(1); }  36% { transform: scale(1.18); }
}
@keyframes ctTag {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(16deg); }  42% { transform: rotate(-10deg); }  62% { transform: rotate(6deg); }  80% { transform: rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ct-plate, .ct-plate svg, .cr-chips.kinds .cr-ico svg { animation: none !important; transition: none !important; }
  .ct:not(.is-past):hover .ct-plate { transform: none; }
  .ct, .ct:not(.is-past):hover { transition: none; }
  .ct:not(.is-past):hover { transform: none; }   /* the glow stays, the rise goes */
}
.ct-stub { position: relative; display: flex; align-items: stretch; justify-content: center; gap: 3px; padding: 10px 6px; background: #fdf6e7; color: var(--k1); }
.ct-stub::before, .ct-stub::after { content: ""; position: absolute; left: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--ct-cut); }
.ct-stub::before { top: -9px; }
.ct-stub::after { bottom: -9px; }
.ct-val { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; white-space: nowrap; font-size: 21px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }
/* The barcode of the code, laid up the stub; a click copies the code. */
.ct-bc { position: relative; width: 24px; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.ct-bc svg { position: absolute; top: 50%; left: 50%; width: 120px; height: 24px; transform: translate(-50%, -50%) rotate(90deg); }
.ct-bc svg > rect:first-child { fill: transparent; }
.ct-bc svg g { fill: var(--k1); }
.ct-code { writing-mode: vertical-rl; text-align: center; font-family: var(--ap-font, ui-monospace, monospace); font-size: 8.5px; letter-spacing: .12em; opacity: .85; }
/* Used, expired, cancelled: greyed, stamped, and nothing to press. */
/* A narrow panel (a smaller screen): the plate goes, so the words keep their room. */
@container (max-width: 360px) {
  .ct-main { grid-template-columns: minmax(0, 1fr); }
  .ct-plate { display: none; }
}
.ct.is-past { filter: grayscale(.92); opacity: .62; }
.ct-stamp {
  position: absolute; left: 36%; top: 50%; z-index: 2; transform: translate(-50%, -50%) rotate(-12deg);
  padding: 3px 12px; border: 2.5px solid rgba(255, 255, 255, 0.9); border-radius: 6px; color: #ffffff;
  font-size: 17px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; background: rgba(0, 0, 0, 0.18);
}
/* Cancel: a small round × in the main part's corner, only while the ticket is hovered. */
.ct-x {
  position: absolute; top: 7px; right: 7px; z-index: 3; width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s ease;
  background: #ffffff; color: #b3141d; border: 1px solid rgba(179, 20, 29, 0.25); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.ct-x svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; fill: none; }
.ct:hover .ct-x, .ct-x:focus-visible { opacity: 1; }
/* Its bubble opens to the LEFT, inside the ticket: the house bubble sits
   centred above its button, which from a corner reached past the list's
   edge and gave the list a sideways scrollbar. */
.cr-list .ct-x > .pos-pop { left: auto; right: calc(100% + 6px); bottom: auto; top: 50%; transform: translateY(-50%) scale(.72); transform-origin: 100% 50%; }
.cr-list .ct-x:hover > .pos-pop, .cr-list .ct-x:focus-visible > .pos-pop { transform: translateY(-50%) scale(1); }

.cr-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 10px 20px; color: #8a8f97; font-size: 12px; }
.cr-empty b { font-size: 14px; color: #1d1d1f; font-weight: 600; }
.cr-empty .cr-ico { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 4px; }
.cr-empty .cr-ico svg { width: 22px; height: 22px; }

/* ── The dialog: closes on Cancel or Create only (the house rule) ────── */
/* Larger since 2026-10-09 (Luis: "make this larger") — 780px wide, 50px fields,
   16px type in the boxes, 40px chips. */
html.cr-lock, html.cr-lock body { overflow: hidden; }
.cr-overlay { display: none; position: fixed; inset: 0; z-index: 10000; overflow: auto; padding: 20px;
  align-items: center; justify-content: center; background: rgba(13, 42, 82, .42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cr-overlay.open { display: flex; }
.cr-dialog { width: 100%; max-width: 780px; margin: auto; background: #ffffff; border-radius: 22px; box-shadow: 0 24px 60px rgba(13, 42, 82, .30);
  animation: crPop .32s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)); text-align: left; }
@keyframes crPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.cr-d-head { display: flex; align-items: baseline; gap: 12px; padding: 22px 30px; border-bottom: 1px solid #eef2f7; }
.cr-d-head h3 { margin: 0; font-size: 21px; font-weight: 700; color: #1d1d1f; }
.cr-d-head span { font-size: 14px; color: #8a8f97; text-transform: capitalize; }
.cr-d-body { padding: 24px 30px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 20px; }
.cr-f { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cr-f.wide { grid-column: 1 / -1; }
.cr-f[hidden] { display: none; }   /* the value box and the free-item box take turns */
.cr-f > label, .cr-f > .cr-lbl { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a8f97; }
.cr-in {
  width: 100%; box-sizing: border-box; height: 50px; padding: 0 16px; border-radius: 12px; font: inherit; font-size: 16px; color: #1d1d1f;
  background: #ffffff; border: 1px solid rgba(13, 42, 82, 0.14); box-shadow: inset 0 1px 2px rgba(13, 42, 82, 0.05);
}
.cr-in:focus { outline: none; border-color: #1a5fa8; box-shadow: 0 0 0 3px rgba(26, 95, 168, 0.16); }
.cr-affix { position: relative; }
.cr-affix > b { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-size: 16px; font-weight: 600; color: #8a8f97; pointer-events: none; }
.cr-affix > b.pre { left: 16px; }
.cr-affix > b.suf { right: 16px; }
.cr-affix.has-pre .cr-in { padding-left: 32px; }
.cr-affix.has-suf .cr-in { padding-right: 36px; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-chips button {
  height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 600;
  color: #334155; background: #ffffff; border: 1px solid rgba(13, 42, 82, 0.16); transition: background .15s ease, color .15s ease;
}
.cr-chips button.on { color: #ffffff; background: #1d1d1f; border-color: #1d1d1f; }
.cr-chips.kinds button { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; }
.cr-chips.kinds button .cr-ico { width: 28px; height: 28px; border-radius: 9px; }
.cr-chips.kinds button .cr-ico svg { width: 16px; height: 16px; }
.cr-chips.kinds button .cr-ico::before { display: none; }
.cr-preview { grid-column: 1 / -1; margin: 2px 0 0; padding: 14px 16px; border-radius: 14px; background: #f7f8fa; font-size: 14.5px; color: #334155; }
.cr-preview b { color: #1d1d1f; }
.cr-err { grid-column: 1 / -1; min-height: 18px; font-size: 13.5px; color: #b3141d; }
.cr-d-foot { display: flex; justify-content: space-between; gap: 12px; padding: 20px 30px; border-top: 1px solid #eef2f7; background: #f8fafc; border-radius: 0 0 22px 22px; }
.cr-btn { height: 50px; padding: 0 26px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; }
.cr-cancel { color: #334155; background: #ffffff; border: 1px solid rgba(120, 140, 170, .35); }
.cr-go { color: #ffffff; border: 0; background: linear-gradient(135deg, #2563eb, #1a5fa8); box-shadow: 0 6px 14px rgba(37, 99, 235, .25); }
.cr-go:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
@media (max-width: 560px) { .cr-d-body { grid-template-columns: 1fr; } }

/* ── Emailing a reward (2026-10-09) ───────────────────────────────────── */
/* The envelope sits left of the ×, in the same corner style, plum on white. */
.ct-mail { right: 35px; color: #6b3744; border-color: rgba(107, 55, 68, 0.25); }
.ct-x .ct-env, .ct-mailed .ct-env { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ct-mailed { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
.ct-mailed .ct-env { flex: 0 0 auto; }
/* Tick boxes: "Email it next" in the New reward footer, "Save it on the profile" here. */
.cr-check { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: #334155; cursor: pointer; user-select: none; }
.cr-check[hidden] { display: none; }
.cr-check input { width: 18px; height: 18px; margin: 0; accent-color: #1a5fa8; cursor: pointer; }
.cr-mailnext { margin-left: auto; }
/* The dialog: the form on the left, the email as it arrives on the right. */
.cr-dialog.cr-mail { max-width: 1060px; }
.cr-m-body { grid-template-columns: minmax(0, 1fr) 452px; align-items: start; }
.cr-m-form { display: grid; gap: 16px; min-width: 0; }
.cr-ta { height: auto; min-height: 150px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
/* The page's theme rounds text boxes into pills; a message box keeps corners. */
#crMailModal textarea.cr-ta { border-radius: 14px !important; padding: 12px 16px !important; }
.cr-m-from { font-size: 13px; color: #8a8f97; }
.cr-m-form .cr-err { min-height: 0; }
.cr-m-prev { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cr-m-prev .cr-lbl { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a8f97; }
/* The email is 600px wide; shown at three quarters so the whole coupon fits. */
.cr-m-frame { width: 452px; height: 560px; overflow: hidden; border-radius: 14px; border: 1px solid rgba(13, 42, 82, 0.12); background: #f2f2f5; }
.cr-m-frame iframe { width: 602px; height: 746px; border: 0; transform: scale(.75); transform-origin: 0 0; display: block; }
@media (max-width: 1000px) {
  .cr-m-body { grid-template-columns: 1fr; }
  .cr-m-frame { width: 100%; }
}

/* ── Night ────────────────────────────────────────────────────────────── */
body.apple-dark .ct { --ct-cut: #111111; box-shadow: none; }   /* the notches show the dark panel */
body.apple-dark .cr-empty b { color: #fffdfb; }
body.apple-dark .cr-new { background: #fffdfb; color: #080808; }
body.apple-dark .cr-count { background: rgba(255, 255, 255, 0.08); color: #a1a1a6; }