/* Affiliate landing (src/views/site/affiliate/AffiliateTemplate.tsx).
   The page is assembled from the storefront's own home.css / faq.css sections
   so it reads as part of today's site; this file holds only what those have no
   class for. Tokens only — no new colours. */

/* ---- hero commission card (PageHero `aside`) ---- */
.aff-com { flex:0 0 360px;background:#fff;border-radius:var(--r-3xl);box-shadow:0 20px 48px rgba(40,20,110,.25);padding:20px 24px 18px; }
.aff-com__label { display:inline-block;background:var(--tint-2);color:var(--color-primary);font-weight:600;font-size:var(--text-xs);padding:5px 12px;border-radius:var(--r-2xl); }
.aff-com__rate { display:flex;align-items:center;gap:14px;margin:8px 0 12px; }
.aff-com__rate strong { font-size:calc(var(--text-h1) * 1.3);line-height:1;font-weight:600;background:var(--so-grad-btn);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap; }
.aff-com__rate span { font-size:var(--text-sm);line-height:1.35;color:var(--ink-700); }
.aff-com__calc { display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--tint-1);border-radius:14px;padding:10px 14px; }
.aff-com__calc small { display:block;font-size:var(--text-2xs);color:var(--ink-400); }
.aff-com__calc b { font-size:var(--text-md);font-weight:600;color:var(--color-heading); }
.aff-com__calc i { color:var(--ink-400); }
.aff-com__calc .aff-com__earn { color:var(--color-primary); }
.aff-com__note { display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:var(--text-xs);color:var(--ink-700); }
.aff-com__note i { color:var(--color-primary); }

/* ---- USP row (the home hero-feats row) ---- */
.aff-usps { padding:30px 24px 8px; }
.aff-usps .sf-home-20 b { font-weight:600;color:var(--color-primary); }
.aff-usps__dup { display:none !important; }

/* ---- intro card ---- */
.aff-intro { padding:56px 24px 72px; }
.aff-intro .sf-home-95 { padding:52px 16px 52px 56px; }
.aff-btns { display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px; }
.aff-btn-outline { display:inline-flex;align-items:center;height:50px;padding:0 32px;border-radius:var(--r-3xl);border:1.5px solid var(--color-primary);color:var(--color-primary);font:500 var(--text-md) 'Poppins';text-decoration:none; }
.aff-btn-outline:hover { color:var(--color-primary);background:var(--tint-1); }
.aff-note { margin:14px 0 0;font-size:var(--text-xs);color:var(--ink-400); }

/* dashboard illustration */
.aff-dash { position:relative;padding:44px 48px 44px 8px;display:flex;justify-content:center; }
.aff-card { width:100%;max-width:400px;background:#fff;border-radius:var(--r-3xl);box-shadow:0 18px 44px rgba(94,58,190,.14);padding:22px 22px 18px;border:1px solid var(--line-tinted); }
.aff-card__head { display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--text-sm);margin-bottom:14px; }
.aff-card__head b { font-weight:600;color:var(--color-heading); }
.aff-card__head span { font-size:11px;color:var(--color-primary);background:var(--tint-2);padding:4px 10px;border-radius:var(--r-2xl);font-weight:600;white-space:nowrap; } /* artwork: mock app screen */
.aff-card__kpis { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.aff-card__kpis div { background:var(--tint-1);border-radius:12px;padding:10px 12px;min-width:0; }
.aff-card__kpis span { display:block;font-size:10.5px;color:var(--ink-400); } /* artwork: mock app screen */
.aff-card__kpis strong { font-size:var(--text-lg);font-weight:600;color:var(--color-heading); }
.aff-card__bars { display:flex;align-items:flex-end;gap:8px;height:96px;margin:16px 2px 6px; }
.aff-card__bars i { flex:1;border-radius:6px 6px 3px 3px;background:var(--so-grad-btn); }
.aff-card__axis { display:flex;justify-content:space-between;font-size:10px;color:var(--ink-400); } /* artwork: mock app screen */
.aff-card__ex { margin-top:10px;font-size:10px;color:var(--ink-400);text-align:right; } /* artwork: mock app screen */
.aff-chip { position:absolute;background:#fff;border-radius:16px;box-shadow:0 12px 30px rgba(70,50,140,.16);padding:10px 14px;display:flex;gap:10px;align-items:center;font-size:12px;animation:affFloat 5s ease-in-out infinite; } /* artwork: mock app screen */
.aff-chip b { display:block;font-weight:600;font-size:12px; } /* artwork: mock app screen */
.aff-chip small { color:var(--ink-400);font-size:10.5px; } /* artwork: mock app screen */
.aff-chip__plus { background:#e9f8ef;color:#1e9e57;font-weight:600;border-radius:10px;padding:6px 8px;white-space:nowrap; }
.aff-chip--sale { left:-6px;bottom:22px; }
.aff-chip--cookie { right:18px;top:18px;flex-direction:column;align-items:flex-start;gap:0;animation-delay:-2.5s; }
.aff-chip--cookie b { color:var(--color-primary);font-size:var(--text-md); }
.aff-flag { width:1.25em;height:.9em;vertical-align:-.1em; }
@keyframes affFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }

/* ---- benefits: the deal-card shell with text content ---- */
.aff-ben { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.aff-ben .sf-home-42 { padding:24px 24px 26px;transition:transform .25s,box-shadow .25s; }
.aff-ben .sf-home-42:hover { transform:translateY(-4px);box-shadow:14px 16px 28px 0 rgba(94,58,190,.12); }
.aff-ben h3 { margin:16px 0 8px;font-size:var(--text-lg);font-weight:600;color:var(--color-heading); }
.aff-ben p { margin:0;font-size:var(--text-sm);line-height:1.6;color:var(--ink-700); }

/* ---- step phones ---- */
.aff-mock { padding:4px 12px;display:flex;flex-direction:column;gap:8px; }
.aff-mock__field { border:1px solid #ece9f5;border-radius:8px;padding:7px 10px;font-size:10.5px;color:var(--ink-400); } /* artwork: mock app screen */
.aff-mock__field b { display:block;color:var(--ink-700);font-weight:500;font-size:11px; } /* artwork: mock app screen */
.aff-mock__pill { display:flex;justify-content:center;align-items:center;height:30px;border-radius:15px;background:var(--so-grad-btn);color:#fff;font-size:11px;font-weight:600;margin-top:4px; } /* artwork: mock app screen */
.aff-mock__ok { background:#e9f8ef;border-radius:8px;padding:8px 10px;font-size:10.5px;color:#1e9e57;font-weight:600; } /* artwork: mock app screen */
.aff-mock__link { background:var(--tint-1);border-radius:8px;padding:9px 10px;font-size:10px;color:var(--ink-700);word-break:break-all; } /* artwork: mock app screen */
.aff-mock__link b { color:var(--color-primary); }
.aff-mock__row { display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid #f2f0f8;font-size:10.5px; } /* artwork: mock app screen */
.aff-mock__row span:first-child { color:var(--ink-400); }
.aff-mock__row span:last-child { font-weight:600;color:var(--ink-700);white-space:nowrap; }
.aff-mock__big { text-align:center;padding:8px 0 4px; }
.aff-mock__big small { display:block;font-size:10px;color:var(--ink-400); } /* artwork: mock app screen */
.aff-mock__big strong { font-size:26px;font-weight:600;color:var(--color-primary); } /* artwork: mock app screen */

/* ---- commission & payment: key-benefits layout with a description line ---- */
.aff-pay__text { margin:4px 0 0;font-size:var(--text-sm);color:var(--ink-400);line-height:1.5;max-width:230px; }
.aff-phone { padding:34px 14px 14px;display:flex;flex-direction:column;gap:10px;height:100%; }
.aff-phone__hi { font-size:12px;font-weight:600;color:var(--color-heading); } /* artwork: mock app screen */
.aff-phone__sub { font-size:10px;color:var(--ink-400);margin-top:-8px; } /* artwork: mock app screen */
.aff-phone__total { background:var(--so-grad-btn);color:#fff;border-radius:16px;padding:14px; }
.aff-phone__total small { font-size:10px;opacity:.85; } /* artwork: mock app screen */
.aff-phone__total strong { display:block;font-size:24px;font-weight:600; } /* artwork: mock app screen */
.aff-phone__sale { display:flex;justify-content:space-between;align-items:center;gap:6px;background:#fff;border-radius:10px;box-shadow:0 3px 10px rgba(40,20,90,.08);padding:8px 10px;font-size:10px; } /* artwork: mock app screen */
.aff-phone__sale b { display:block;font-size:10.5px;font-weight:600;color:var(--ink-700); } /* artwork: mock app screen */
.aff-phone__sale span { color:#1e9e57;font-weight:600;white-space:nowrap; }

/* ---- FAQ + closing call to action ---- */
.aff-faq { padding:24px 24px 72px; }
.aff-faq .faq-teaser__grid { max-width:1140px; }
.aff-cta { padding:0 24px 80px; }
.aff-cta__img { align-self:stretch;min-height:320px;background-position:center;background-size:cover; }
.aff-mail { margin:18px 0 0;font-size:var(--text-sm);color:var(--ink-700); }
.aff-mail a { color:var(--color-primary);font-weight:600; }

/* ---- phone-width behaviour ---- */
.aff-dots, .aff-bar { display:none; }

@media (max-width: 991px) {
  .aff-com { flex:none;max-width:420px; }
  .aff-ben { grid-template-columns:1fr 1fr; }
  .aff-intro .sf-home-95 { padding:32px 24px 8px; }
  .aff-dash { padding:24px 16px 40px; }
}

@media (max-width: 640px) {
  /* USPs: one line that scrolls on its own (the second copy makes the loop seamless) */
  .aff-usps { overflow:hidden;padding:16px 0 4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
  .aff-usps .hero-feats { display:flex !important;flex-wrap:nowrap !important;justify-content:flex-start !important;width:max-content;gap:0 !important;animation:affMarquee 16s linear infinite; }
  .aff-usps .hero-feats:active { animation-play-state:paused; }
  .aff-usps .sf-home-17 { flex:none;padding-right:28px; }
  .aff-usps .sf-home-20 { white-space:nowrap; }
  .aff-usps__dup { display:flex !important; }

  .aff-intro { padding:36px 16px 48px; }
  .aff-btns { flex-direction:column;align-items:stretch; }
  .aff-btns a { justify-content:center;white-space:nowrap; }
  .aff-dash { padding:40px 8px 44px; }
  .aff-chip--sale { left:4px;bottom:10px; }
  .aff-chip--cookie { top:4px;right:10px; }

  /* benefits + steps: swipe rows with dots */
  .aff-swipe { display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px !important;margin:0 -20px;padding:4px 20px 18px;scrollbar-width:none; }
  .aff-swipe::-webkit-scrollbar { display:none; }
  .aff-swipe > * { flex:0 0 80%;scroll-snap-align:center; }
  .aff-ben.aff-swipe > * { box-shadow:6px 8px 16px rgba(0,0,0,.06); }
  .get-grid.aff-swipe { justify-items:initial; }
  .get-grid.aff-swipe > .hp-stepwrap { flex-basis:74%; }
  .get-grid.aff-swipe .hp-phone { min-height:290px; }
  .aff-dots { display:flex;justify-content:center;gap:7px;margin-top:2px; }
  .aff-dots i { width:7px;height:7px;border-radius:50%;background:#e2ddf0;transition:width .25s,background .25s; }
  .aff-dots i.on { width:20px;border-radius:4px;background:var(--color-primary); }

  /* commission & payment: one 2-column grid, phone below */
  .aff-pay { grid-template-columns:1fr 1fr !important;gap:26px 12px !important;justify-items:stretch !important;align-items:start !important; }
  .aff-pay > .sf-home-113 { display:contents; }
  .aff-pay > .sf-home-84 { grid-column:1/-1;order:9;margin-top:6px; }
  .aff-pay .sf-home-116 { font-size:var(--text-md); }
  .aff-pay .aff-pay__text { font-size:var(--text-xs); }
  .aff-pay .sf-home-114 { gap:8px; }

  .aff-faq { padding:8px 20px 48px; }
  .aff-faq .faq-teaser__grid { grid-template-columns:1fr; }
  .aff-cta__img { min-height:220px; }

  /* sticky apply bar */
  .aff-bar { display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;align-items:center;justify-content:space-between;gap:12px;background:#fff;border-radius:var(--r-3xl);box-shadow:0 10px 30px rgba(40,20,110,.22);padding:10px 12px 10px 16px;transform:translateY(140%);transition:transform .3s; }
  .aff-bar.show { transform:none; }
  .aff-bar b { display:block;font-size:var(--text-sm);font-weight:600;white-space:nowrap; }
  .aff-bar small { font-size:var(--text-2xs);color:var(--ink-400);white-space:nowrap; }
  .aff-bar .sf-home-165 { height:42px;padding:0 16px;font-size:var(--text-sm);white-space:nowrap;flex:none; }
}

@keyframes affMarquee { to { transform:translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .aff-chip, .aff-usps .hero-feats { animation:none; }
  .aff-usps { overflow-x:auto; }
  .aff-usps__dup { display:none !important; }
  .aff-ben .sf-home-42, .aff-bar { transition:none; }
}