/* PeppyPOS brand layer. Loaded last. Tokens live in app.css (:root): Black #0E0B0F, Orange #FB8B23,
   Cream #FFF7EE, Tan #E3A867. Rule: text on orange is black (white on #FB8B23 fails contrast). */

/* ---- type ---- */
h1,h2,h3,h4,h5,.page-title,.card-title,.modal-title,.modal-head h3{font-family:var(--display);font-weight:600;letter-spacing:0}
.page-title,.page-header h2{font-weight:700}
body{font-size:14.5px}

/* ---- orange actions: black text ---- */
.btn-orange,.btn-accent,.btn-pill,.login-form .btn-login,.badge{color:var(--black)}
.btn-orange:hover,.btn-accent:hover,.btn-pill:hover{background:var(--orange-d);color:var(--black)}
.btn-orange svg,.btn-accent svg{color:var(--black)}
.btn-primary{background:var(--black);color:#fff}
.btn-primary:hover{background:#2A2329}
.btn-ghost:hover{border-color:var(--orange);color:var(--black)}
.btn-link:hover{color:var(--orange-d)}
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
::selection{background:#FFE3C4;color:var(--black)}

/* ---- sidebar ---- */
.sidebar,.side{background:var(--black)}
.nav-item.active,.nav a.active{background:rgba(251,139,35,.16);color:#fff}
.nav-item.active svg{color:var(--orange)}
.nav-item:hover,.nav a:hover{background:rgba(255,255,255,.06)}
.peppy-word{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1;white-space:nowrap;color:inherit}
.peppy-word span{color:var(--orange)}
.sidebar-brand.peppy-side-brand{gap:12px;padding:2px 16px 18px}
.sidebar-brand.peppy-side-brand img{width:48px;height:48px;border-radius:50%;background:transparent;object-fit:contain}
.sidebar-brand.peppy-side-brand .peppy-word{font-size:22px;color:#fff}
.sidebar-brand.peppy-side-brand small{color:rgba(255,255,255,.6);letter-spacing:.06em;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-by{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.7)}
.sidebar-by .peppy-word{font-size:13px;color:#fff}
.sidebar-brand img.peppy-mini,.peppy-mini{width:20px;height:20px;border-radius:50%;background:transparent;flex:none}

/* ---- phone nav ---- */
.bottom-nav a.active,.bottom-nav a[aria-current="page"]{color:var(--orange-d)}

/* ---- login ---- */
.login-bg,.login{background:
  radial-gradient(900px 600px at 10% 0%, #FFE3C4 0%, rgba(255,227,196,0) 60%),
  radial-gradient(800px 600px at 100% 100%, #FFEBD6 0%, rgba(255,235,214,0) 55%),
  var(--cream)}
.login-bg::before{display:none}
.login-card{box-shadow:0 30px 80px rgba(14,11,15,.12),0 2px 6px rgba(14,11,15,.05)}
.peppy-login-left{background:linear-gradient(165deg,#FFF1E0 0%,#FFE0BD 100%);justify-content:center;align-items:center;padding:32px 24px 56px}
.peppy-login-left .login-brand-store{padding:0 0 12px;align-items:center}
.peppy-hero{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.peppy-hero img{width:min(380px,80%);height:auto;filter:drop-shadow(0 14px 24px rgba(14,11,15,.16))}
.peppy-hero.small img{width:min(220px,60%)}
.peppy-tagline{font-family:var(--display);font-weight:600;font-size:20px;color:var(--black)}
.login-form h2{font-family:var(--display);font-weight:700}
.login-foot{color:var(--body)}
@media (max-width:900px){
  .peppy-login-left{padding:22px 16px 6px}
  .peppy-hero{flex-direction:row;gap:12px;text-align:left}
  .peppy-hero img{width:84px}
  .peppy-hero.small img{width:64px}
  .peppy-tagline{font-size:17px}
  .login-foot{position:static;padding:10px 16px 18px}
}

/* ---- trial banner ---- */
.peppy-trial{display:flex;align-items:center;justify-content:center;gap:12px;min-height:34px;padding:6px 16px;background:var(--black);color:#fff;font-size:13px;font-weight:700}
.peppy-trial-text::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-right:8px;vertical-align:1px}
.peppy-trial-link{color:var(--orange);text-decoration:underline;text-underline-offset:3px}

/* ---- subscription card ---- */
.peppy-sub-status{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.peppy-sub-badge{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--orange);color:var(--black);font-family:var(--display);font-weight:600;font-size:13.5px}
.peppy-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:1100px){.peppy-plans{grid-template-columns:1fr}}
.peppy-plan{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.peppy-plan.popular{border:2px solid var(--orange);background:#FFFBF6}
.peppy-plan.current{box-shadow:inset 0 0 0 1px var(--black)}
.peppy-plan-flag{position:absolute;top:-11px;right:14px;background:var(--black);color:#fff;font-size:11px;font-weight:800;padding:2px 10px;border-radius:999px}
.peppy-plan-name{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:16px}
.peppy-plan-yours{font-family:var(--font);font-size:11px;font-weight:800;background:var(--black);color:#fff;border-radius:999px;padding:1px 8px}
.peppy-plan-price{font-family:var(--display);font-weight:700;font-size:24px;color:var(--black)}
.peppy-plan-price small{font-family:var(--font);font-weight:600;font-size:12.5px;color:var(--body)}
.peppy-plan-year{font-size:12.5px;color:var(--body)}
.peppy-plan-blurb{font-size:13px;color:var(--body);flex:1}
.peppy-plan .btn{align-self:flex-start;margin-top:4px}
.peppy-sub-note{padding:10px 12px;border-radius:10px;background:var(--orange-tint);color:var(--black);font-weight:600;font-size:13px}

/* ---- about ---- */
.peppy-about-logo{width:48px;height:48px;border-radius:50%}

/* ---- receipt ---- */
.sales-print .sp-powered{margin-top:6px;font-size:11px}
.peppy-plan.dfy .peppy-plan-price small{display:block;margin-top:2px}
/* dark surfaces keep the bright orange */
.sidebar .peppy-word span,.peppy-trial-link,.bottom-nav a.active{color:var(--orange)}

/* Cart: keep the item list readable when the cart grows (Oct 21).
   The pay area is tighter (methods 4 across, quick cash 4 across) and the list always keeps
   room for about 4 lines; the pay area scrolls inside itself with Charge still pinned. */
@media (min-width:861px){
  .sell-lines{min-height:min(260px,36vh)}
  .sell-cart .sell-seg.sell-methods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .sell-methods button{min-width:0;padding-left:4px;padding-right:4px}
  .sell-cart .sell-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .sell-quick .chip{min-width:0;height:34px}
  .sell-line{padding:7px 0}
}
.sell-line.just-added{animation:peppyAdded .9s ease}
@keyframes peppyAdded{0%{background:#FFE3C4}100%{background:transparent}}

/* Peppy's greeting at the top of a new AI chat */
.sup-welcome .sup-greet{display:flex;gap:10px;align-items:flex-start;justify-content:flex-start;text-align:left;max-width:560px;margin:10px auto 6px;width:100%}
.sup-welcome .sup-greet .sup-bubble{font-weight:600}