/* TOGOPEPTIDE — Cart & Checkout polish · Cluster 05 (items 156-186)
 *
 * Adds:
 *   - .togo-cart-polish-banner       — site-wide abandonment nudge (#156)
 *   - .pay-line__save                 — save-for-later link (#157)
 *   - .pay-upsell                     — bac-water suggested upsell row (#160)
 *   - .pay-bundle-suggest             — 3rd-compound banner (#162)
 *   - .pay-email-suggest              — email-typo correction inline (#180/#181)
 *   - .success-confetti / .success-next-steps — order-success polish (#184-#186)
 *
 * Light + dark mode safe via existing tokens (var(--color-...)). */

/* ─── #156 · Site-wide abandonment banner ─────────────── */
.togo-cart-polish-banner{
  position:relative;
  margin:0 0 var(--space-3,12px);
  padding:12px 16px;
  background:color-mix(in srgb, var(--color-accent, #e01b1b) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--color-accent, #e01b1b) 28%, transparent);
  border-radius:10px;
  display:flex;align-items:center;gap:12px;
  font-size:13px;color:var(--color-text, #cbd5e1);line-height:1.45;
}
.togo-cart-polish-banner strong{color:var(--color-text, #fff);font-weight:600}
.togo-cart-polish-banner__cta{
  margin-left:auto;flex-shrink:0;
  padding:6px 12px;border-radius:6px;
  background:var(--color-accent, #e01b1b);color:#fff;
  font-size:12.5px;font-weight:600;text-decoration:none;
  transition:background 140ms ease;
}
.togo-cart-polish-banner__cta:hover{background:var(--color-accent-hover, #ff3030)}
.togo-cart-polish-banner__close{
  background:transparent;border:0;color:var(--color-text-muted, #777);
  cursor:pointer;font-size:18px;line-height:1;padding:4px 6px;
}
.togo-cart-polish-banner__close:hover{color:var(--color-text, #fff)}

/* ─── #157 · Save-for-later link in pay-line ──────────── */
.pay-line__save{
  display:flex;
  width:max-content;
  max-width:100%;
  background:transparent;border:0;
  color:var(--color-text-muted, #9d9da5);
  cursor:pointer;font-size:11.5px;letter-spacing:0.02em;
  padding:4px 0;margin:6px 12px 0 0;
  text-decoration:underline;text-underline-offset:2px;
  transition:color 140ms ease;
}
.pay-line__save:hover{color:var(--color-accent, #e01b1b)}
.pay-line__save[data-saved="true"]{color:#86efac}

/* ─── #160 · Suggested upsell row ─────────────────────── */
.pay-upsell{
  margin:var(--space-3,12px) 0;
  padding:14px 16px;
  background:rgba(255,255,255,0.025);
  border:1px dashed rgba(255,255,255,0.12);
  border-radius:12px;
}
.pay-upsell__title{
  margin:0 0 8px;font-size:12px;color:var(--color-text-muted, #9d9da5);
  text-transform:uppercase;letter-spacing:0.1em;font-weight:600;
}
.pay-upsell__row{
  display:flex;align-items:center;gap:12px;
}
.pay-upsell__img{
  width:46px;height:46px;flex-shrink:0;
  border-radius:8px;object-fit:contain;
  background:#0d0d10;border:1px solid rgba(255,255,255,0.08);
  padding:3px;
}
.pay-upsell__info{flex:1;min-width:0}
.pay-upsell__name{
  margin:0;font-size:13.5px;font-weight:600;color:var(--color-text, #fff);
}
.pay-upsell__lead{
  margin:2px 0 0;font-size:12px;color:var(--color-text-muted, #9d9da5);line-height:1.35;
}
.pay-upsell__price{
  font-size:13.5px;font-weight:700;color:var(--color-text, #fff);
  font-variant-numeric:tabular-nums;flex-shrink:0;
}
.pay-upsell__add{
  flex-shrink:0;padding:8px 14px;
  background:var(--color-accent, #e01b1b);color:#fff;
  border:0;border-radius:8px;
  font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background 140ms ease;
}
.pay-upsell__add:hover{background:var(--color-accent-hover, #ff3030)}
.pay-upsell__add[data-added="true"]{background:#22c55e;cursor:default}
.pay-upsell__add[data-added="true"]::before{content:"✓ "}

/* ─── #162 · Bundle-suggestion banner ─────────────────── */
.pay-bundle-suggest{
  margin:var(--space-3,12px) 0;
  padding:12px 16px;
  background:linear-gradient(90deg, rgba(224,27,27,0.07) 0%, rgba(224,27,27,0.02) 100%);
  border:1px solid rgba(224,27,27,0.22);
  border-radius:10px;
  display:flex;align-items:center;gap:12px;
  font-size:13px;color:var(--color-text, #cbd5e1);line-height:1.4;
}
.pay-bundle-suggest strong{color:var(--color-text, #fff);font-weight:600}
.pay-bundle-suggest__cta{
  margin-left:auto;flex-shrink:0;
  padding:6px 12px;border-radius:6px;
  background:transparent;color:var(--color-accent-text, var(--color-accent, #ff5e5e));
  border:1px solid var(--color-accent, #e01b1b);
  font-size:12.5px;font-weight:600;text-decoration:none;
  transition:all 140ms ease;
}
.pay-bundle-suggest__cta:hover{background:var(--color-accent, #e01b1b);color:#fff}

/* ─── #180/#181 · Email-typo suggestion ───────────────── */
.pay-email-suggest{
  margin:6px 0 0;font-size:12px;color:var(--color-text-muted, #9d9da5);
  line-height:1.4;
}
.pay-email-suggest button{
  background:transparent;border:0;padding:0;
  color:var(--color-accent, #e01b1b);font-size:inherit;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
  font-weight:600;
}
.pay-email-suggest button:hover{color:var(--color-accent-hover, #ff3030)}

/* ─── #184 · Success-page confetti ────────────────────── */
.success-confetti{
  position:absolute;top:0;left:0;right:0;height:240px;
  pointer-events:none;overflow:hidden;
  z-index:0;
}
.success-confetti__piece{
  position:absolute;top:-12px;
  width:8px;height:14px;
  opacity:0;
  animation:successConfettiFall 2400ms cubic-bezier(0.32,0.72,0.4,1) forwards;
}
@keyframes successConfettiFall{
  0%   {opacity:0;transform:translateY(-40px) rotate(0deg)}
  10%  {opacity:1}
  100% {opacity:0;transform:translateY(280px) rotate(720deg)}
}
@media (prefers-reduced-motion: reduce){
  .success-confetti{display:none}
}

/* ─── #185 · Success "what happens next" 3-step visual ─ */
.success-next{
  margin:var(--space-5,28px) 0 0;
  padding:var(--space-4,20px) 0 0;
  border-top:1px solid var(--color-border);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-3,12px);
  text-align:left;
}
@media (max-width:680px){
  .success-next{grid-template-columns:1fr}
}
.success-next__step{
  display:flex;flex-direction:column;gap:10px;
  padding:14px;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:12px;
}
.success-next__icon{
  width:36px;height:36px;
  border-radius:50%;
  background:color-mix(in srgb, var(--color-accent, #e01b1b) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--color-accent, #e01b1b) 30%, transparent);
  display:grid;place-items:center;
  color:var(--color-accent, #e01b1b);
}
.success-next__icon svg{width:18px;height:18px}
.success-next__num{
  font-size:11px;font-weight:600;
  color:var(--color-text-muted, #9d9da5);
  letter-spacing:0.12em;text-transform:uppercase;
}
.success-next__title{
  margin:0;font-size:14px;font-weight:600;
  color:var(--color-text, #fff);line-height:1.35;
}
.success-next__lead{
  margin:0;font-size:12.5px;
  color:var(--color-text-soft, #cbd5e1);line-height:1.45;
}

/* ─── #186 · Save-tracking-link button row ────────────── */
.success-share{
  margin:var(--space-4,20px) 0 0;
  padding:var(--space-3,12px) 0 0;
  border-top:1px dashed var(--color-border);
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.success-share__btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--color-text-soft, #cbd5e1);
  font-size:12.5px;font-weight:500;
  cursor:pointer;text-decoration:none;
  transition:all 140ms ease;
}
.success-share__btn:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.18);
  color:var(--color-text, #fff);
}
.success-share__btn svg{width:14px;height:14px}
.success-share__btn[data-copied="true"]{
  background:rgba(34,197,94,0.1);
  border-color:rgba(34,197,94,0.3);
  color:#86efac;
}

/* ─── Light-mode overrides ────────────────────────────── */
[data-theme="light"] .togo-cart-polish-banner{
  color:var(--color-text);
}
[data-theme="light"] .pay-upsell{
  background:rgba(0,0,0,0.025);
  border-color:rgba(0,0,0,0.12);
}
[data-theme="light"] .pay-upsell__name,
[data-theme="light"] .pay-upsell__price{color:var(--color-text)}
[data-theme="light"] .success-next__step{
  background:rgba(0,0,0,0.025);
  border-color:rgba(0,0,0,0.08);
}
[data-theme="light"] .success-next__title{color:var(--color-text)}
[data-theme="light"] .success-share__btn{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.1);
  color:var(--color-text-soft);
}