/* ═══════════════════════════════════════════════════════════════════════════
   BitSoul3D action buttons — sitewide commerce-button skin.
   VOLTAGE skin, 2026-08-09. Replaces the violet-glass skin of 2026-08-05.

   WHY IT CHANGED
   The violet glass capsule — prismatic flecks, neon halo, chrome-embossed text
   — was the strongest "a machine designed this" signal on the site, and because
   it painted with !important it also silenced every other button rule. Worse,
   it was applied to BOTH real commerce buttons and passive category chips, so
   a "Buy" control and a filter pill carried identical weight and neither read
   as the thing to click.

   THE RULE NOW: colour means action.
     - Voltage (#ffc814) is reserved for controls that move the visitor forward:
       buy, subscribe, join, submit. Nothing decorative may use it.
     - Chips, filters and pagination are quiet glass — visible, tappable, but
       never competing with the one yellow control on screen.
     - No halo, no emboss, no prismatic wash. One surface, one shadow.

   Dark ink on voltage is not a style choice: white on #ffc814 measures ~1.7:1
   and fails WCAG outright. #12100a on #ffc814 is ~12:1.

   HOW THIS WORKS (unchanged)
   - Skins the site's EXISTING button classes. Sets only paint properties
     (background, border, radius, shadow, colour) and never layout ones, so
     nothing moves and no template needs editing.
   - !important is required because the SSR pages define button styles in
     per-page <style> blocks that would otherwise win the cascade. This file is
     the single place the button theme lives — change it here only.
   - Pure CSS: no images, no backdrop-filter, one ~4KB cached request.

   SCOPE (unchanged from the previous skin — do not widen without a decision)
   - IN: every customer-facing action button and the category/paging chips,
     across the SPA, model/category/blog/pricing/plugins/bundles/thank-you/404
     pages, account and gallery, plus the shared nav's JOIN FREE CTA.
   - OUT: shared top-navigation LINKS, blog top-bar (.tb-cta), root landing-site
     nav (.nav-cta), workspace editors' utility buttons. Do NOT add them here.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* VOLTAGE GLASS CAPSULE (2026-08-09, owner's call).
     The first voltage pass was a flat fill. Flat reads as cheap next to real
     rendered product shots, and it threw away the one thing the old violet skin
     got right: a button that looks like a physical object you could press.
     So the capsule construction is back — sheen, depth, rim light — rendered in
     the action colour instead of violet.

     Four layers, each doing a job:
       1. top sheen      — light striking a curved surface, fades out by 52%
       2. warm underglow — amber pooling at the base, gives the capsule volume
       3. body           — a slight vertical ramp, not a flat swatch
       4. shadows        — inset rim light on top, warm inner shade at the
                           bottom, a hairline outer edge, one restrained halo,
                           and a real drop shadow so it sits ON the page
     The halo is deliberately 20px and -6px spread: enough to feel energised,
     nowhere near the 26px neon bloom that made the old skin look generated. */
  --volt-btn-bg:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.14) 32%, rgba(255,255,255,0) 54%),
    radial-gradient(120% 170% at 50% 138%, rgba(150,85,0,.50), rgba(150,85,0,0) 62%),
    linear-gradient(180deg, #ffd851 0%, #ffc814 46%, #edaa00 100%);
  --volt-btn-bg-hover:
    linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.18) 32%, rgba(255,255,255,0) 54%),
    radial-gradient(120% 170% at 50% 138%, rgba(150,85,0,.42), rgba(150,85,0,0) 62%),
    linear-gradient(180deg, #ffe27a 0%, #ffd234 46%, #f5b400 100%);
  --volt-btn-border: 1px solid rgba(255,226,140,.60);
  --volt-btn-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -7px 14px rgba(120,68,0,.30),
    0 0 0 1px rgba(0,0,0,.30),
    0 0 20px -6px rgba(255,190,20,.50),
    0 10px 24px -12px rgba(0,0,0,.88);
  --volt-btn-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -7px 15px rgba(120,68,0,.26),
    0 0 0 1px rgba(0,0,0,.30),
    0 0 28px -6px rgba(255,200,30,.62),
    0 14px 30px -12px rgba(0,0,0,.92);
  --volt-btn-text: #1a1405;
  /* a light emboss on dark ink over yellow reads as moulded plastic, not the
     chrome-on-violet effect the old skin used */
  --volt-btn-text-shadow: 0 1px 0 rgba(255,255,255,.38);

  /* quiet controls: present, tappable, never competing with the action colour */
  --chip-bg: rgba(255,255,255,.07);
  --chip-border: 1px solid rgba(255,255,255,.14);
  --chip-text: #f2f3f7;
}

/* ── Full-size action buttons ──────────────────────────────────────────── */
a.cta:not(.secondary):not(.alt),
button.cta,
.cta a.btn,
.btn-primary,
.btn.primary,
.plan-btn:not(.ghost):not(.owned),
.post-cta-btn,
.blog-cta-btn,
.plugin-cta,
.spot-cta,
.ptier .cta,
.footer-newsletter button,
form button.btn,
#nlBtn,
.gnav-cta,
.gnav-panel .gnav-pcta,
.sc-btn.primary,
.glass-btn,
/* ── Added 2026-08-09: action buttons that were hand-painted OUTSIDE this file
   and so kept their own radius and fill. Measured on the live site before
   adding: .gremix at 9px radius (77 of them on /showcase), .ai-cta at 10px
   (/pricing), .mnav-cta at 9px while its desktop twin .gnav-cta sat at 999px,
   .card-buy-btn at 999px but only 30px tall, and .door-btn.store on the apex
   landing. Each is a genuine "do the thing" control, so each belongs to the
   one skin — that inconsistency is what read as unfinished. */
.gremix,
.ai-cta,
.mnav-cta,
.card-buy-btn,
.door-btn.store,
.hcta.gold,
.bp-btn,
.mv-btn.primary,
#stripe-button-model,
#stripe-button-bundle,
.co-pay-card,
.ws-btn.primary {
  background: var(--volt-btn-bg) !important;
  border: var(--volt-btn-border) !important;
  border-radius: 999px !important;
  box-shadow: var(--volt-btn-shadow) !important;
  color: var(--volt-btn-text) !important;
  font-weight: 700 !important;
  text-shadow: var(--volt-btn-text-shadow) !important;
  text-decoration: none !important;      /* a button is never an underlined link */
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

a.cta:not(.secondary):not(.alt):hover,
button.cta:hover,
.cta a.btn:hover,
.btn-primary:hover,
.btn.primary:hover,
.plan-btn:not(.ghost):not(.owned):hover,
.post-cta-btn:hover,
.blog-cta-btn:hover,
.plugin-cta:hover,
.spot-cta:hover,
.ptier .cta:hover,
.footer-newsletter button:hover,
form button.btn:hover,
#nlBtn:hover,
.gnav-cta:hover,
.gnav-panel .gnav-pcta:hover,
.sc-btn.primary:hover,
.glass-btn:hover,
.gremix:hover,
.ai-cta:hover,
.mnav-cta:hover,
.card-buy-btn:hover,
.door-btn.store:hover,
.hcta.gold:hover,
.bp-btn:hover,
.bundles-promo:hover .bp-btn,
.mv-btn.primary:hover,
#stripe-button-model:hover,
#stripe-button-bundle:hover,
.co-pay-card:hover,
.ws-btn.primary:hover {
  background: var(--volt-btn-bg-hover) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: var(--volt-btn-shadow-hover) !important;
  color: var(--volt-btn-text) !important;
}

a.cta:not(.secondary):not(.alt):active,
button.cta:active,
.cta a.btn:active,
.btn-primary:active,
.btn.primary:active,
.plan-btn:not(.ghost):not(.owned):active,
.post-cta-btn:active,
.blog-cta-btn:active,
.plugin-cta:active,
.spot-cta:active,
.ptier .cta:active,
.footer-newsletter button:active,
form button.btn:active,
#nlBtn:active,
.gnav-cta:active,
.gnav-panel .gnav-pcta:active,
.sc-btn.primary:active,
.glass-btn:active,
.gremix:active,
.ai-cta:active,
.mnav-cta:active,
.card-buy-btn:active,
.door-btn.store:active,
.hcta.gold:active,
.bp-btn:active,
.mv-btn.primary:active,
#stripe-button-model:active,
#stripe-button-bundle:active,
.co-pay-card:active,
.ws-btn.primary:active {
  transform: translateY(0) !important;
  box-shadow: inset 0 2px 6px rgba(90,52,0,.42), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* Disabled and "already owned" states must never be painted as an invitation.
   Written AFTER the paint rules and with !important so they cannot lose to
   them — otherwise the sheet produces bright, pressable-looking controls that
   do nothing when clicked. */
.glass-btn:disabled, button.cta:disabled, .btn-primary:disabled,
.card-buy-btn:disabled, .plan-btn:disabled, form button.btn:disabled, #nlBtn:disabled {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.45) !important;
  text-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}

/* White ring, not a coloured one: the focus ring has to be visible against the
   voltage fill AND against the near-black page when the control is a ghost. */
a.cta:focus-visible, button.cta:focus-visible, .btn-primary:focus-visible,
.btn.primary:focus-visible, .plan-btn:focus-visible, .post-cta-btn:focus-visible,
.blog-cta-btn:focus-visible, .plugin-cta:focus-visible, .spot-cta:focus-visible,
.footer-newsletter button:focus-visible, form button.btn:focus-visible,
#nlBtn:focus-visible, .glass-btn:focus-visible, .gnav-cta:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
}

/* ── The ENGINE capsule — the "create" call to action ──────────────────────
   A second kind of action exists on this site: BUY (yellow capsule, above) and
   CREATE (this). Giving "start generating" a plain ghost treatment undersold
   the thing that actually differentiates us, but a second yellow fill would
   mean two competing primaries on the same screen.

   So: the same capsule construction, inverted. Dark glass body, voltage rim,
   warm underglow — visibly the quieter sibling of the buy button and obviously
   from the same family. No indigo, deliberately: purple glow is exactly the
   look we spent this pass removing. */
.engine-cta,
.hcta.engine,
.door-btn.engine {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 48%),
    radial-gradient(130% 190% at 50% 132%, rgba(255,178,20,.18), rgba(255,178,20,0) 62%),
    linear-gradient(180deg, #1c1b26 0%, #101017 100%) !important;
  border: 1px solid rgba(255,200,20,.55) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(0,0,0,.35),
    0 0 22px -10px rgba(255,190,20,.55),
    0 10px 24px -12px rgba(0,0,0,.90) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  text-decoration: none !important;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}
.engine-cta:hover,
.hcta.engine:hover,
.door-btn.engine:hover {
  border-color: rgba(255,214,80,.95) !important;
  transform: translateY(-1.5px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 1px rgba(0,0,0,.35),
    0 0 30px -8px rgba(255,200,30,.72),
    0 14px 30px -12px rgba(0,0,0,.94) !important;
}
.engine-cta:active,
.hcta.engine:active,
.door-btn.engine:active {
  transform: translateY(0) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5) !important;
}
/* the bolt is the one spot of the action colour inside a create CTA */
.engine-cta i, .hcta.engine i, .door-btn.engine i { color: var(--volt, #ffc814) !important; }
.hcta.engine small, .engine-cta small { color: rgba(255,255,255,.62) !important; }

/* ── Small chips: category pills + current-page marker + billing toggle ──
   Deliberately NOT voltage. These are navigation, not conversion; painting them
   the action colour is what made the old skin read as noise. */
.cat-card .cat-chip,
.cat-chip,
.page-btn.active,
.bt-opt.active {
  background: var(--chip-bg) !important;
  border: var(--chip-border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--chip-text) !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}

/* the active page / billing toggle needs to read as SELECTED — a voltage
   hairline does that without spending the fill colour on a non-action */
.page-btn.active,
.bt-opt.active {
  border-color: rgba(255,200,20,.55) !important;
  background: rgba(255,200,20,.10) !important;
}