/* Member-facing rewards pages (j.html = profile, o.html = coupon), opened
   from a text on the customer's own phone. Same brand tokens as style.css. */
:root{
  --agave:#3B6653; --agave-dark:#1F3A2C; --marigold:#C9A24B; --marigold-dark:#8A6B2E; --salsa-dark:#A85E48;
  --adobe:#FAFDFB; --adobe-2:#F6EFE4; --cocoa:#2E271F; --cocoa-soft:#6B5F53; --line:rgba(46,39,31,.14);
}
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; min-height:100vh; background:var(--agave-dark); color:var(--cocoa);
  font-family:'Work Sans', sans-serif; display:flex; align-items:flex-start; justify-content:center; padding:24px 16px 40px;
}
.card{ width:100%; max-width:440px; background:var(--adobe); border-radius:20px; padding:28px 22px 22px; }
.logo{ display:block; height:72px; width:auto; margin:0 0 6px; }
.eyebrow{ margin:0 0 14px; font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--marigold-dark); }
h1{ font-family:'Playfair Display', serif; font-size:1.75rem; line-height:1.15; margin:0 0 10px; }
.lede{ margin:0 0 16px; color:var(--cocoa-soft); line-height:1.5; }
.lede strong{ color:var(--cocoa); }
label{ display:block; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--agave); margin:14px 0 6px; }
input, select{
  width:100%; font:inherit; font-size:1rem; color:var(--cocoa); background:var(--adobe-2);
  border:1px solid var(--line); border-radius:10px; padding:.8em .85em;
}
input:focus, select:focus{ outline:2px solid var(--agave); outline-offset:1px; }
.two{ display:grid; grid-template-columns:1.4fr 1fr; gap:10px; }
.btn{
  display:block; width:100%; margin-top:18px; text-align:center; text-decoration:none; cursor:pointer;
  font:inherit; font-weight:700; font-size:1.02rem; padding:1em; border-radius:12px; border:none; background:var(--agave); color:#fff;
}
.btn:disabled{ opacity:.5; cursor:default; }
.btn.ghost{ background:transparent; color:var(--agave); border:1.5px solid var(--agave); }
.fine{ font-size:.78rem; color:var(--cocoa-soft); line-height:1.5; margin:8px 0 0; }
.fine a{ color:var(--agave); }
.foot{ margin-top:22px; padding-top:14px; border-top:1px solid var(--line); }
.error{ color:var(--salsa-dark); font-weight:600; font-size:.9rem; min-height:1.3em; margin:10px 0 0; }
/* .btn sets display:block, which would otherwise beat the hidden attribute. */
[hidden]{ display:none !important; }

/* the 8-visit stamp card (same idea as the in-store tablet, light theme) */
.stamps{ display:grid; grid-template-columns:repeat(8,1fr); gap:6px; margin:6px 0 14px; }
.stamp{
  aspect-ratio:1; border-radius:50%; border:2px dashed rgba(46,39,31,.25); display:grid; place-items:center;
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:.8rem; color:rgba(46,39,31,.4);
}
.stamp.on{ background:var(--marigold); border:2px solid var(--marigold-dark); color:var(--cocoa); }
.stamp.prize{ border-style:solid; border-color:var(--marigold); color:var(--marigold-dark); font-family:'Work Sans', sans-serif; font-size:.5rem; line-height:1.05; text-align:center; text-transform:uppercase; }
.stamp.prize.on{ color:var(--cocoa); }
.stamp.just{ animation:stamp .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes stamp{ from{ transform:scale(1.6) rotate(-14deg); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .stamp.just{ animation:none; } }
.eyebrow span{ color:var(--cocoa-soft); }
.linklike{
  display:block; width:100%; margin-top:14px; background:none; border:none; padding:.4em; cursor:pointer;
  font:inherit; font-size:.86rem; color:var(--agave); text-decoration:underline;
}
input.mono{ font-family:'JetBrains Mono', monospace; font-weight:700; letter-spacing:.3em; font-size:1.3rem; text-align:center; }

/* the coupon itself: a ticket with a punched edge */
.coupon{
  position:relative; background:var(--adobe-2); border:2px dashed var(--marigold); border-radius:16px; padding:22px 18px 16px; margin-bottom:16px; text-align:center;
}
.coupon h1{ font-size:2.1rem; margin-bottom:6px; }
.coupon .lede{ margin-bottom:12px; }
.coupon-meta{ margin:0; font-size:.86rem; color:var(--cocoa-soft); }
.mono{ font-family:'JetBrains Mono', monospace; font-weight:700; letter-spacing:.06em; color:var(--cocoa); }
.coupon-status{
  display:inline-block; margin-bottom:10px; padding:.25em .9em; border-radius:20px; font-size:.72rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; background:var(--agave); color:#fff;
}
/* What the server checks at the table: when it was used, and a clock that
   keeps running so an old screenshot is obvious. */
.used-stamp{
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  background:var(--agave-dark); color:#fff; border-radius:16px; padding:18px 16px; margin-bottom:16px;
}
.used-stamp[hidden]{ display:none; }
.used-word{ font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--marigold); }
.used-stamp strong{ font-size:1.25rem; }
.used-ago{ font-family:'JetBrains Mono', monospace; font-weight:700; font-size:1.5rem; color:var(--marigold); }
.used-stamp.is-old .used-ago{ font-size:1rem; color:rgba(255,255,255,.7); }
.confirm{ border:1.5px solid var(--agave); border-radius:14px; padding:16px; margin-top:16px; }
.confirm .btn{ margin-top:12px; }
.confirm strong{ font-size:1.05rem; }

.coupon.is-used, .coupon.is-expired{ border-color:var(--line); opacity:.7; }
.coupon.is-used .coupon-status, .coupon.is-expired .coupon-status{ background:var(--cocoa-soft); }
.coupon.is-used h1, .coupon.is-expired h1{ text-decoration:line-through; }