/* ==========================================================================
   Earn-Back — shared styles for the new (teal) marketing design.
   Reset is scoped to `.eb-reset` so it never fights Bootstrap reboot on the
   older admin/bootstrap pages. Add `eb-reset` to any new-design page wrapper.
   ========================================================================== */

.eb-reset,
.eb-reset *,
.eb-reset *::before,
.eb-reset *::after { box-sizing: border-box; margin: 0; padding: 0; }

.eb-reset { font-family: 'Noto Sans Thai', sans-serif; color: #111827; }

html { scroll-behavior: smooth; }

/* ---- animations ---- */
@keyframes ebFloatPhone { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-14px) rotate(-2deg)} }
@keyframes ebFloatShot  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes ebPulseGlow  { 0%,100%{opacity:.55} 50%{opacity:.9} }
@keyframes ebOrbFloat1  { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-40px) scale(1.08)} 66%{transform:translate(-20px,20px) scale(.95)} }
@keyframes ebOrbFloat2  { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-40px,30px) scale(1.05)} 66%{transform:translate(20px,-20px) scale(.97)} }
@keyframes ebOrbFloat3  { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(15px,-30px) scale(1.10)} }
@keyframes ebScrollStrip{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

.eb-store-track { display:flex; gap:16px; animation:ebScrollStrip 28s linear infinite; width:max-content; }
.eb-store-track:hover { animation-play-state:paused; }

/* ---- hover states (converted from design style-hover) ---- */
.eb-h-bright:hover  { filter:brightness(1.1); }
.eb-h-bright8:hover { filter:brightness(1.08); }
.eb-h-outline:hover { border-color:#2ba585; }
.eb-h-lift:hover    { transform:translateY(-3px); }
.eb-step-card    { transition:all .2s; }
.eb-step-card:hover    { border-color:#2ba585; box-shadow:0 12px 36px rgba(43,165,133,0.10); transform:translateY(-4px); }
.eb-feature-card { transition:all .2s; }
.eb-feature-card:hover { border-color:#2ba585; box-shadow:0 10px 28px rgba(43,165,133,0.10); }
.eb-store-card   { transition:all .24s; }
.eb-store-card:hover   { box-shadow:0 16px 44px rgba(0,0,0,0.10); transform:translateY(-5px); }
.eb-store-cta:hover    { filter:brightness(0.95); }
.eb-soft-link:hover    { color:#2ba585 !important; }

/* ---- landing responsive ---- */
@media(max-width:960px){
  [data-hero-section]{min-height:auto!important;}
  [data-hero]{grid-template-columns:1fr!important;gap:44px!important;padding:56px 24px 72px!important;}
  [data-hero-phone]{min-height:auto!important;margin-top:8px;}
  [data-hero-dash]{display:none!important;}
  [data-hero-card]{display:flex!important;}
  [data-hero-float]{display:none!important;}
  [data-wallet-cards]{grid-template-columns:1fr!important;}
}
@media(max-width:860px){
  [data-nav-links]{display:none!important;}
  [data-wallet-row]{padding:64px 24px!important;}
  [data-steps]{grid-template-columns:1fr 1fr!important;gap:16px!important;}
  [data-stores-grid]{grid-template-columns:1fr 1fr!important;}
  [data-features]{grid-template-columns:1fr 1fr!important;}
  [data-cta-grid]{padding:52px 24px!important;}
  [data-section-pad]{padding-left:20px!important;padding-right:20px!important;padding-top:64px!important;padding-bottom:64px!important;}
}
@media(max-width:560px){
  [data-hero]{padding:44px 18px 56px!important;}
  [data-flash]{flex-direction:column!important;align-items:flex-start!important;gap:16px!important;text-align:left;}
  [data-flash] [data-flash-cta]{width:100%!important;text-align:center;}
  [data-wallet-feats]{flex-wrap:wrap!important;}
  [data-wallet-feats]>div{flex:0 0 50%!important;border-right:none!important;margin-bottom:16px;}
  [data-steps]{grid-template-columns:1fr!important;}
  [data-stores-grid]{grid-template-columns:1fr!important;}
  [data-features]{grid-template-columns:1fr!important;}
  [data-cta-grid]{padding:40px 18px!important;}
  [data-section-pad]{padding-top:52px!important;padding-bottom:52px!important;}
  [data-footer-row]{flex-direction:column!important;gap:32px!important;}
}

/* ---- privacy / legal pages responsive ---- */
@media(max-width:960px){
  [data-layout]{grid-template-columns:1fr!important;gap:0!important;}
  [data-toc]{position:static!important;display:none!important;}
  [data-hero-pad]{padding:56px 22px 40px!important;}
  [data-content-pad]{padding:0 22px 72px!important;}
}
@media(max-width:640px){
  [data-content-pad]{padding:0 0 64px!important;}
  [data-content-pad] > section > div{padding:22px 18px!important;}
  [data-grid]{grid-template-columns:1fr!important;}
  [data-grid-4]{grid-template-columns:1fr 1fr!important;}
  [data-inner-card]{padding:18px!important;}
  [data-hero-pad]{padding:44px 18px 30px!important;}
  [data-hero-pad] h1{font-size:34px!important;}
  [data-contact-inner]{flex-direction:column!important;align-items:flex-start!important;gap:18px!important;}
  [data-contact-btn]{width:100%!important;justify-content:center!important;white-space:normal!important;text-align:center!important;word-break:break-word!important;font-size:13.5px!important;}
  [data-sec-head] h2{font-size:20px!important;}
}
@media(max-width:860px){
  [data-two-col]{grid-template-columns:1fr!important;}
}

/* legal TOC active state (privacy page) */
[data-toc-link]:hover { background:#f0fdf9 !important; color:#111827 !important; }
[data-toc-link] { width:100%; }
[data-toc-link].is-active { background:#2ba585 !important; color:#ffffff !important; font-weight:800 !important; }
[data-toc-link].is-active > span:first-child { background:rgba(255,255,255,0.22) !important; }
[data-toc-link].is-active > span:first-child > i,
[data-toc-link].is-active > span:first-child > svg { stroke:#ffffff !important; }