/* PetPOS Loyalty — storefront styles (kept minimal so it inherits the theme). */
.petpos-loyalty-box{border:2px dashed #c49a5c;border-radius:10px;padding:14px 16px;margin:8px 0;background:#fbf6ef}
.petpos-loyalty-head{font-size:15px;color:#6b4e2e;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.petpos-tier{background:#8b4513;color:#fff;font-size:11px;padding:2px 8px;border-radius:999px}
.petpos-loyalty-input{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.petpos-points-input{width:120px;padding:6px 8px}
.petpos-loyalty-hint{font-size:12px;color:#8b7355;margin:6px 0 0}
.petpos-loyalty-applied{margin-top:8px;display:flex;align-items:center;gap:10px;color:#1a7a3d;font-weight:600}
.petpos-loyalty-msg{display:block;font-size:12px;margin-top:6px}
.petpos-earn-preview th,.petpos-earn-preview td{color:#8b4513}

.petpos-account-cards{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.petpos-account-card{flex:1;min-width:140px;background:#fbf6ef;border:1px solid #ecdfca;border-radius:12px;padding:18px;text-align:center}
.petpos-account-num{font-size:30px;font-weight:700;color:#8b4513;line-height:1.1}
.petpos-account-lbl{font-size:12px;color:#8b7355;margin-top:4px}
.petpos-account-history{width:100%}
.petpos-account-foot{font-size:12px;color:#9a8b7a;margin-top:14px}

/* ── Redesigned account page — premium "gold on espresso" ──────────────────
   Palette: deep espresso → near-black hero, champagne-gold metallic accents,
   warm ivory surfaces with fine gold hairlines. Reads like a luxury member card. */
.petpos-loyalty-acct{
  --ink:#211710; --ink2:#3c2b1d; --gold:#c8a24a; --gold-2:#e7cd84; --gold-deep:#a67c2e;
  --ivory:#faf7f1; --line:#ece2d0; --line-2:#f1e9da; --text:#4a3a28; --muted:#9c8c76;
  max-width:640px;margin:0 auto;color:var(--text)}
.petpos-loyalty-acct .ppl-h3{font-size:14px;font-weight:700;color:var(--ink2);margin:28px 0 12px;letter-spacing:.06em}

/* Hero — dark luxe card with a thin gold frame + gold foil balance */
.ppl-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:radial-gradient(120% 140% at 0% 0%,#3c2b1d 0%,#211710 55%,#14100b 100%);
  color:#f3ead9;border-radius:20px;padding:28px 28px;position:relative;overflow:hidden;
  border:1px solid rgba(200,162,74,.45);box-shadow:0 18px 44px rgba(20,14,9,.40)}
.ppl-hero:before{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:linear-gradient(115deg,rgba(231,205,132,.16) 0%,rgba(231,205,132,0) 40%)}
.ppl-hero:after{content:"🐾";position:absolute;right:6px;bottom:-22px;font-size:104px;opacity:.07}
.ppl-hero-left{position:relative;z-index:1}
.ppl-hero-balance{font-size:46px;font-weight:800;line-height:1;letter-spacing:-.02em;
  background:linear-gradient(180deg,#fbf0d4 0%,#e7cd84 45%,#c8a24a 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#e7cd84}
.ppl-hero-sub{font-size:12px;letter-spacing:.16em;color:#cbb892;margin-top:8px;text-transform:uppercase}
.ppl-hero-tier{position:relative;z-index:1}
.ppl-tier-badge{display:inline-block;
  background:linear-gradient(135deg,var(--gold-2) 0%,var(--gold) 55%,var(--gold-deep) 100%);
  color:#2c1f0e;font-weight:800;font-size:13px;letter-spacing:.04em;padding:9px 18px;border-radius:999px;
  box-shadow:0 4px 14px rgba(166,124,46,.45),inset 0 1px 0 rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.35)}

/* Level-up */
.ppl-levelup{background:var(--ivory);border:1px solid var(--line);border-radius:16px;padding:17px 19px;margin-top:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
.ppl-levelup-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted);margin-bottom:11px}
.ppl-levelup-head strong{color:var(--gold-deep);font-size:16px;font-weight:800}
.ppl-bar{height:11px;border-radius:999px;background:#efe6d4;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.07)}
.ppl-bar-fill{height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold) 55%,var(--gold-2));
  box-shadow:0 0 10px rgba(200,162,74,.5);transition:width .6s ease}
.ppl-levelup-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:8px;letter-spacing:.03em}
.ppl-levelup-max{text-align:center;font-weight:700;color:var(--gold-deep);background:linear-gradient(180deg,#fbf3df,#f6ebcf);border-color:#ecd9a8}

/* Tier comparison */
.ppl-tier-table{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.ppl-tier-row{display:grid;grid-template-columns:1.1fr 1.4fr 1.4fr;gap:8px;padding:14px 18px;font-size:13px;color:var(--text);border-top:1px solid var(--line-2);align-items:center}
.ppl-tier-4 .ppl-tier-row{grid-template-columns:0.9fr 1.2fr 1.3fr 0.85fr}
.ppl-tier-row:first-child{border-top:none}
.ppl-tier-head{background:#f6efe1;font-weight:700;font-size:10px;letter-spacing:.10em;color:var(--muted);text-transform:uppercase}
.ppl-tier-cur{background:linear-gradient(90deg,#fdf7e8,#fffdf8);box-shadow:inset 4px 0 0 var(--gold)}
.ppl-you{display:inline-block;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#2c1f0e;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;margin-left:7px;vertical-align:middle;box-shadow:0 1px 4px rgba(166,124,46,.4)}
.ppl-note{font-size:12px;color:var(--muted);margin-top:11px}

/* History */
.ppl-history{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.ppl-hist-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--line-2)}
.ppl-hist-row:first-child{border-top:none}
.ppl-hist-note{font-size:13px;font-weight:600;color:var(--ink2)}
.ppl-hist-date{font-size:11px;color:#b3a48d;margin-top:2px}
.ppl-hist-delta{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.ppl-empty{color:var(--muted);font-size:13px;padding:10px 0}
.ppl-foot{font-size:12px;color:var(--muted);margin-top:20px;text-align:center;letter-spacing:.04em}

@media(max-width:480px){
  .ppl-hero{padding:22px 20px}
  .ppl-hero-balance{font-size:38px}
  .ppl-tier-row{grid-template-columns:1fr 1.2fr 1.2fr;font-size:12px;padding:12px 13px}
}