/* ============================================================================
   Buttons (owner 2026-09-30). Loaded after palette.css, before the pkg-* files.

   FILLED and OUTLINE buttons all move like the hero's "ดูการ์ดเข้าใหม่" (owner: "ปุ่มอยากได้
   เหมือนตัวนี้ … แต่เปลี่ยนตอน hover เป็นสีชมพู"; the first version's holographic foil + glow is in
   ai_test/out/backup-20260930-buttons-foil/): the role's flat colour, cut to the theme's notch
   by clip-path on the button as before; on hover a skewed PINK panel (::before) wipes in from
   the left in .18s — its edge and the streak lean "\" like every notch on the site (skewX(+16deg),
   streak 70deg; owner 2026-09-30: a "/" wipe ran against the cuts) —, a light streak (::after)
   crosses once, the button lifts 2px and an arrow
   steps 4px right (bag hops, heart beats, + turns). When the wipe is done the button's own
   background turns pink too — it covers the anti-aliased notch edge, where the rest colour
   would otherwise show as a thin line. The press (:active) and keyboard focus are pink at once.
   The colour is --btn-wipe / text --btn-wipe-ink (default --sf-wipe = pink); sell, danger and the
   pink .button-dark keep their role and wipe to their own lighter tone. Hover lives in
   @media (hover: hover) and (pointer: fine) — a phone keeps :hover on whatever was tapped. The
   hero's own button (pkg-hero.css) is the same recipe in its own, more specific rules.
   LINKS (.text-link): a cyan→magenta bar grows under them. STEPPERS (− qty +): − magenta key,
   + cyan key. Motion off (reduced motion / .effects-off): the colours change, nothing slides.
   ============================================================================ */
:root { --sf-ease-pop: cubic-bezier(.3, 1.6, .5, 1); --sf-wipe: #ff2e88; --sf-wipe-ink: #fff; }

/* ---------- Filled + outline buttons: the pink wipe ---------- */
:where(.button-primary, .button-dark, .button.is-sell, .button.is-danger, .button-outline, .add-cart) {
  --btn-wipe: var(--sf-wipe); --btn-wipe-ink: var(--sf-wipe-ink);
}
.button.is-sell { --btn-wipe: var(--sf-sell-hover); --btn-wipe-ink: var(--sf-sell-ink); }
.button.is-danger { --btn-wipe: var(--sf-danger-hover); --btn-wipe-ink: #2a0508; }
.button-dark { --btn-wipe: var(--sf-promo-hover); --btn-wipe-ink: #1d0612; }

:is(.button-primary, .button-dark, .button.is-sell, .button.is-danger, .button-outline, .add-cart):where(:not(.hero-actions *)) {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .12s ease-out, color .18s, border-color .18s, background-color 0s;
}
:is(.button-primary, .button-dark, .button.is-sell, .button.is-danger, .button-outline, .add-cart):where(:not(.hero-actions *))::before {
  content: ''; position: absolute; inset: 0 -20%; z-index: -1; pointer-events: none;
  background: var(--btn-wipe);
  transform: translateX(-110%) skewX(16deg);
  animation: none;   /* colorful.css ran its sheen on ::before */
  transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}
:is(.button-primary, .button-dark, .button.is-sell, .button.is-danger, .button-outline, .add-cart):where(:not(.hero-actions *))::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(70deg, transparent 35%, #ffffff6b 50%, transparent 65%);
  transform: translateX(-140%); opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  :is(.button-primary, .button-dark, .button.is-sell, .button.is-danger, .button-outline, .add-cart):where(:not(.hero-actions *)):hover:not(:disabled, [aria-disabled="true"]) {
    transform: translateY(-2px);
    color: var(--btn-wipe-ink); border-color: var(--btn-wipe); box-shadow: none;
    background-color: var(--btn-wipe); background-image: none;
    /* the base follows only once the wipe has covered it */
    transition: transform .12s ease-out, color .18s, border-color .18s, background-color 0s .18s;
  }
  :is(.button-primary, .button-dark, .button.is-sell, .button.is-danger, .button-outline, .add-cart):where(:not(.hero-actions *)):hover:not(:disabled, [aria-disabled="true"])::before {
    transform: translateX(0) skewX(16deg); animation: none;
  }
  :is(.button-primary, .button-dark, .button.is-sell, .button.is-danger, .button-outline, .add-cart):where(:not(.hero-actions *)):hover:not(:disabled, [aria-disabled="true"])::after {
    animation: sf-btn-flash .22s ease-out;
  }
}
:is(.button-primary, .button-dark, .button.is-sell, .button.is-danger, .button-outline, .add-cart):where(:not(.hero-actions *)):is(:focus-visible, :active):not(:disabled, [aria-disabled="true"]) {
  color: var(--btn-wipe-ink); border-color: var(--btn-wipe);
  background-color: var(--btn-wipe); background-image: none;
}
:is(.button-primary, .button-dark, .button.is-sell, .button.is-danger, .button-outline, .add-cart):where(:not(.hero-actions *)):is(:focus-visible, :active):not(:disabled, [aria-disabled="true"])::before {
  transform: translateX(0) skewX(16deg); animation: none;
}
:is(.button-primary, .button-dark, .button.is-sell, .button.is-danger, .button-outline, .add-cart):where(:not(.hero-actions *)):focus-visible { box-shadow: inset 0 0 0 2px var(--sf-action); }
:is(.button-primary, .button-dark, .button.is-sell, .button.is-danger, .button-outline, .add-cart):where(:not(.hero-actions *)):active:not(:disabled, [aria-disabled="true"]) {
  transform: translateY(0) scale(.97); transition-duration: 0s;
}
@keyframes sf-btn-flash { from { transform: translateX(-140%); opacity: 1; } to { transform: translateX(140%); opacity: 0; } }

/* the home tournament ticket's "สมัครแข่ง" (.ticket-book, not a .button) and the /decks game tile's button
   (.sf-dg-btn, inside the link that covers the tile): the same wipe — also while the whole ticket / tile is
   hovered (the pointer is on the covering link, never on the button itself) */
.ticket-book, .sf-dg-btn {
  --btn-wipe: var(--sf-wipe); --btn-wipe-ink: var(--sf-wipe-ink);
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .18s, border-color .18s, background-color 0s;
}
:is(.ticket-book, .sf-dg-btn)::before {
  content: ''; position: absolute; inset: 0 -20%; z-index: -1; pointer-events: none;
  background: var(--btn-wipe); transform: translateX(-110%) skewX(16deg);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}
:is(.ticket-book, .sf-dg-btn)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(70deg, transparent 35%, #ffffff6b 50%, transparent 65%);
  transform: translateX(-140%); opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  :is(.ticket-book:hover, .ticket:hover .ticket-book, .sf-dg:hover .sf-dg-btn) {
    color: var(--btn-wipe-ink); border-color: var(--btn-wipe); background-color: var(--btn-wipe); background-image: none;
    transition: color .18s, border-color .18s, background-color 0s .18s;
  }
  :is(.ticket-book:hover, .ticket:hover .ticket-book, .sf-dg:hover .sf-dg-btn)::before { transform: translateX(0) skewX(16deg); }
  :is(.ticket-book:hover, .ticket:hover .ticket-book, .sf-dg:hover .sf-dg-btn)::after { animation: sf-btn-flash .22s ease-out; }
}
:is(.ticket-book:is(:focus-visible, :active), .sf-dg-go:is(:focus-visible, :active) .sf-dg-btn) { color: var(--btn-wipe-ink); border-color: var(--btn-wipe); background-color: var(--btn-wipe); background-image: none; }
:is(.ticket-book:is(:focus-visible, :active), .sf-dg-go:is(:focus-visible, :active) .sf-dg-btn)::before { transform: translateX(0) skewX(16deg); }

/* "เพิ่มลงตะกร้าแล้ว" — the tile / buy-box cart button turns green for a moment (storefront.js) */
.add-cart.is-added, .button.is-added {
  --btn-wipe: var(--sf-sell); --btn-wipe-ink: var(--sf-sell-ink);
  color: var(--sf-sell-ink); background-color: var(--sf-sell); background-image: none;
}
.add-cart.is-added .icon, .button.is-added .icon { animation: sf-ico-drop .55s var(--sf-ease-pop); }

/* ---------- Icons inside buttons ---------- */
:is(.button, .add-cart, .text-link) .icon { transition: transform .12s ease-out; }
@media (hover: hover) and (pointer: fine) {
  :is(.button, .add-cart, .text-link):where(:not(.hero-actions *)):hover .icon:has(use[href="#i-arrow"], use[href="#i-up-right"], use[href="#i-chevron-right"]) { transform: translateX(4px); }
  :is(.button, .add-cart, .text-link):where(:not(.hero-actions *)):hover .icon:has(use[href="#i-back"]) { transform: translateX(-4px); }
  :is(.button, .add-cart):where(:not(.hero-actions *)):hover .icon:has(use[href="#i-bag"]) { animation: sf-ico-hop .65s var(--sf-ease-pop); }
  :is(.button, .add-cart):where(:not(.hero-actions *)):hover .icon:has(use[href="#i-heart"]) { animation: sf-ico-beat .7s ease-out; }
  :is(.button, .add-cart):where(:not(.hero-actions *)):hover .icon:has(use[href="#i-plus"]) { transform: rotate(90deg) scale(1.12); transition-duration: .3s; }
  :is(.button, .add-cart):where(:not(.hero-actions *)):hover .icon:not(:has(use[href="#i-arrow"], use[href="#i-up-right"], use[href="#i-chevron-right"], use[href="#i-back"], use[href="#i-bag"], use[href="#i-heart"], use[href="#i-plus"])) { transform: scale(1.12); }
}
@keyframes sf-ico-hop { 0% { transform: none; } 35% { transform: translateY(-4px) rotate(-12deg); } 60% { transform: translateY(0) rotate(7deg); } 80% { transform: rotate(-3deg); } 100% { transform: none; } }
@keyframes sf-ico-beat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.3); } 45% { transform: scale(.92); } 65% { transform: scale(1.15); } }
@keyframes sf-ico-drop { 0% { transform: translateY(-9px) scale(.6); opacity: 0; } 60% { transform: translateY(1px) scale(1.15); opacity: 1; } 100% { transform: none; } }

/* ---------- Links: a cyan → magenta bar grows under them ---------- */
.text-link {
  background: linear-gradient(90deg, var(--sf-action), var(--sf-promo)) 0 100% / 0 2px no-repeat;
  transition: background-size .35s cubic-bezier(.2, .8, .2, 1), color .2s;
}
.text-link:is(:hover, :focus-visible), .section-heading > .text-link:is(:hover, :focus-visible) {
  color: #fff; text-decoration: none; background-size: 100% 2px;
}

/* ---------- Saved-card heart ---------- */
@media (hover: hover) {   /* a tapped heart must not look "saved" until the next tap elsewhere */
  .favorite-button:is(:hover, :focus-visible) { color: #ff5fa6; }
  .favorite-button:is(:hover, :focus-visible) .icon { filter: drop-shadow(0 0 6px #ff2e88); animation: sf-ico-beat .7s ease-out; }
  .icon-button.favorite-button:is(:hover, :focus-visible) { border-color: #ff2e8899; box-shadow: 0 0 18px #ff2e8840, inset 0 0 12px #ff2e8826; }
}

/* ---------- Steppers (− qty +): − is a magenta key, + a cyan key ----------
   .sf-qty (listing buy box, cart, orders, claim form, buyback offer), .sf-want-step (card page
   price ceiling), .sf-decks-qty / .sf-decks-step (deck estimate + builder). */
:is(.sf-qty, .sf-want-step, .sf-decks-qty, .sf-decks-step) { background: linear-gradient(180deg, #ffffff08, #ffffff03); }
:is(.sf-qty, .sf-want-step, .sf-decks-qty, .sf-decks-step) > button {
  --key-text: #8ffaff; --key-soft: #00f0ff29; --key-soft2: #00f0ff0d; --key-line: #00f0ff59;
  --key-hi: #8ffaff; --key: #00f0ff; --key-ink: #04121a; --key-glow: #00f0ff8c;
  position: relative; color: var(--key-text);
  background: linear-gradient(180deg, var(--key-soft), var(--key-soft2));
  box-shadow: inset 0 0 0 1px var(--key-line), inset 0 -2px 0 #00000040;
  transition: background .2s, color .2s, box-shadow .25s, transform .25s var(--sf-ease-pop);
}
:is(.sf-qty, .sf-want-step, .sf-decks-qty, .sf-decks-step) > button:first-of-type {
  --key-text: #ff8cc0; --key-soft: #ff2e8829; --key-soft2: #ff2e880d; --key-line: #ff2e8866;
  --key-hi: #ff79b4; --key: #ff2e88; --key-ink: #fff; --key-glow: #ff2e888c;
}
@media (hover: hover) {   /* touch: the white press flash below is the feedback */
  :is(.sf-qty, .sf-want-step, .sf-decks-qty, .sf-decks-step) > button:not(:disabled):is(:hover, :focus-visible) {
    z-index: 1; color: var(--key-ink);
    background: linear-gradient(180deg, var(--key-hi), var(--key));
    box-shadow: 0 0 0 1px var(--key), 0 0 16px var(--key-glow), inset 0 1px 0 #ffffff8c;
  }
}
:is(.sf-qty, .sf-want-step, .sf-decks-qty, .sf-decks-step) > button:not(:disabled):active {
  transform: scale(.88); background: #fff; color: #04121a; transition-duration: .06s;
}
:is(.sf-qty, .sf-want-step, .sf-decks-qty, .sf-decks-step) > button .icon { transition: transform .3s var(--sf-ease-pop); }
@media (hover: hover) {   /* no sticky hover on touch */
  :is(.sf-qty, .sf-want-step, .sf-decks-qty, .sf-decks-step) > button:not(:disabled):hover .icon:has(use[href="#i-plus"]) { transform: rotate(90deg) scale(1.2); }
  :is(.sf-qty, .sf-want-step, .sf-decks-qty, .sf-decks-step) > button:not(:disabled):hover .icon:has(use[href="#i-minus"]) { transform: scaleX(1.35); }
}
:is(.sf-qty, .sf-want-step, .sf-decks-qty, .sf-decks-step) > button:disabled {
  color: #ffffff38; background: #ffffff05; box-shadow: inset 0 0 0 1px #ffffff0f; cursor: not-allowed;
}
:is(.sf-qty, .sf-decks-qty, .sf-decks-step):focus-within { border-color: #00f0ff80; box-shadow: 0 0 14px #00f0ff1f; }

/* ---------- Fly to cart (effects.js sfFlyToCart): the card arcs into the cart icon, which rings ---------- */
.sf-fly {
  position: fixed; z-index: 2147483000; pointer-events: none; object-fit: contain;
  border-radius: 4px; filter: drop-shadow(0 0 10px #00f0ffb3) drop-shadow(0 10px 18px #000c);
  will-change: transform, opacity;
}
.sf-fly.is-token { border-radius: 50%; background: radial-gradient(circle, #fff, #00f0ff 45%, #00f0ff00 72%); }
.cart-toggle { position: relative; }
.cart-toggle.bump::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--sf-action); box-shadow: 0 0 14px var(--sf-action);
  animation: sf-cart-ring .6s ease-out forwards;
}
@keyframes sf-cart-ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

/* ---------- Motion off: keep the colours, drop the moves ---------- */
@media (prefers-reduced-motion: reduce) {
  :is(.button, .add-cart, .sf-qty > button, .sf-want-step > button, .sf-decks-qty > button, .sf-decks-step > button):is(:hover, :focus-visible, :active) { transform: none !important; }
  :is(.button, .add-cart, .text-link, .favorite-button, .sf-qty, .sf-want-step, .sf-decks-qty, .sf-decks-step) .icon { transform: none !important; animation: none !important; }
  :is(.button, .add-cart, .ticket-book, .sf-dg-btn)::before, :is(.button, .add-cart, .ticket-book, .sf-dg-btn)::after { transition: none !important; animation: none !important; }
}
.effects-off :is(.button, .add-cart, .sf-qty > button, .sf-want-step > button, .sf-decks-qty > button, .sf-decks-step > button):is(:hover, :focus-visible, :active) { transform: none !important; }
.effects-off :is(.button, .add-cart, .text-link, .favorite-button, .sf-qty, .sf-want-step, .sf-decks-qty, .sf-decks-step) .icon { transform: none !important; }
.effects-off :is(.button, .add-cart, .ticket-book, .sf-dg-btn)::before { transition: none !important; }
/* the phone tab bar's cart is a wide cell: ring the icon only */
.sf-chrome-tab.cart-toggle.bump::after { inset: 2px auto auto 50%; width: 40px; height: 40px; margin-left: -20px; }