/**
 * Bitnnock depth pass - restrained fintech polish.
 *
 * Loads last (after bn-text-emphasis.css) so it reliably wins the
 * cascade over plasma-home.css / plasma-app.css / custom.css /
 * p2p-dashboard.css.
 *
 * Flattened from an earlier "maximal 3D" pass (thick multi-ring
 * shadows, hover lift/tilt, metallic gradients) to match a clean
 * reference fintech site (worldlibertyfinancial.com): buttons/cards
 * carry no shadow at rest, hover only brightens/shifts border color -
 * no lift, no glow, no tilt. Two sections in this file: buttons/cards/
 * glass below, then a "round two" section further down covering
 * inputs, scroll-reveal, live indicators, and tables - see that
 * section's own header for details.
 *
 * What's left, sitewide:
 *  1) Buttons get a subtle brightness shift on hover/press - no shadow,
 *     no lift.
 *  2) Cards/panels shift border color on hover only. Icon badges inside
 *     them stay flat tinted boxes.
 *  3) Glass surfaces (nav, drawer, dropdowns, modals) keep a blur +
 *     saturation boost so they stay readable over the (now much
 *     fainter) animated background.
 *  4) Every transform-based interaction is skipped under
 *     prefers-reduced-motion. The mouse-tracked tilt effect (bn-tilt.js)
 *     has been retired entirely - it's no longer loaded by any layout.
 *
 * Deliberately does NOT touch `background` or `color` on badges/status
 * chips (same reasoning as bn-text-emphasis.css: those hues carry
 * buy/sell/success/danger meaning).
 */

:root {
  --bn-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bn-ease-press: cubic-bezier(0.4, 0, 0.6, 1);
}

/* ---------------------------------------------------------------- *
 * 1. Buttons - flat fill, brightness-only feedback
 * ---------------------------------------------------------------- */
button,
.btn,
.btn--base,
[class*="-btn"],
[class*="__btn"],
[class*="-cta"],
[class*="__cta"] {
  transition: filter 0.2s var(--bn-ease);
}

button:hover,
.btn:hover,
.btn--base:hover,
[class*="-btn"]:hover,
[class*="__btn"]:hover,
[class*="-cta"]:hover,
[class*="__cta"]:hover {
  filter: brightness(1.05);
}

button:active,
.btn:active,
.btn--base:active,
[class*="-btn"]:active,
[class*="__btn"]:active,
[class*="-cta"]:active,
[class*="__cta"]:active {
  transition-duration: 0.12s;
  transition-timing-function: var(--bn-ease-press);
  filter: brightness(0.96);
}

button:disabled,
.btn:disabled,
.btn--base:disabled,
[class*="-btn"]:disabled,
[class*="__btn"]:disabled,
[class*="-btn"].disabled,
[class*="__btn"].disabled {
  filter: none !important;
}

/* ---------------------------------------------------------------- *
 * 2. Cards / panels - border-color shift on hover only. Resting
 * border/shadow mostly comes from --bn-elev-* (custom.css) via each
 * component's own more specific selector; this broad fragment-match
 * catch-all is the fallback for any card/panel that isn't one of
 * those named components, so nothing is left with only a border and
 * no shadow to separate it from an equally-dark page background.
 * Components that already set box-shadow via a more specific
 * selector are unaffected (same variable, same resulting value).
 * ---------------------------------------------------------------- */
.card,
.wlfi-card,
[class*="-card"],
[class*="__card"],
[class*="-panel"],
[class*="__panel"],
.p2p-dash__metric {
  box-shadow: var(--bn-elev-shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.4));
  transition: border-color 0.25s var(--bn-ease), box-shadow 0.25s var(--bn-ease);
}

a.wlfi-card:hover,
.wlfi-card:hover,
a[class*="__card"]:hover,
a[class*="-card"]:hover,
.p2p-dash__metric:hover {
  border-color: rgba(236, 196, 108, 0.4) !important;
}

/* The fragment-match selectors above key off "-card"/"-panel" appearing
   ANYWHERE in the class list, which also catches BEM element/label
   children of blocks whose own name happens to contain "-panel"/"-card"
   as a substring - e.g. ".p2p-trade-live-panel__kicker" and
   "...__stage"/"...__stage-name" all contain "-panel" purely because
   their block is "p2p-trade-live-panel", not because they're panel
   surfaces themselves. Those text nodes have no background of their own
   (only their ".p2p-trade-live-panel__head" ancestor carries the header's
   faint gradient), so the shadow rule above renders as a soft dark
   rectangle floating behind the "Step X of 5" heading with nothing
   visible casting it - a shadow with no shape reads as a rendering bug,
   not depth. Reset it specifically for these confirmed offenders rather
   than narrowing the fragment match itself, since most of the ~140 other
   "-card"/"-panel" matches sitewide are genuine card/panel containers
   (or their own already-backgrounded sub-parts, like the gold-tinted
   ".p2p-trade-live-panel__badge" pill) that still want this shadow. */
.p2p-trade-live-panel__head-copy,
.p2p-trade-live-panel__kicker,
.p2p-trade-live-panel__stage,
.p2p-trade-live-panel__stage-name {
  box-shadow: none;
}

/* Same bug, same cause, different block: every BEM element of the
   homepage's ".wlfi-card" (feature cards under "Built for serious P2P
   traders") also contains "-card" as a substring purely by inheriting
   the block name - "__body"/"__text"/"__actions" are plain flex/text
   wrappers with no background, and "__banner"/"__banner-glow" are a
   clipped decorative icon strip whose only "fill" is an absolutely
   positioned gradient child, not the element the shadow rule attaches
   to. Left unscoped, each one stacks its own copy of the same shadow
   inside the card, showing up as extra dark rectangles floating around
   the description text and the "How it works / Find an offer" buttons
   instead of one clean card edge. `[class*="wlfi-card__"]` is specific
   enough to only ever match this one component's own sub-parts (unlike
   the generic "-card"/"-panel" fragment match above), so it's safe to
   use directly instead of enumerating every element name. */
[class*="wlfi-card__"] {
  box-shadow: none;
}

/* Same bug again, widest-reaching instance: ".p2p-dash__panel" is the
   base card wrapper for nearly every dashboard section (wallet
   allocation, trade activity, notifications, withdraw history, KYC,
   disputes, staking, referrals...), and its own header/footer/link/note
   sub-parts are named with a single hyphen instead of "__"
   (".p2p-dash__panel-head/-title/-desc/-link/-foot/-note/-tools") - but
   that's still enough to contain the literal substring "__panel" and get
   caught by the fragment match, even though none of them have a
   background of their own. Most visible as a stray dark rectangle behind
   a panel's own "Manage wallets ->" / "All trades ->" corner link. Listed
   explicitly (rather than a `[class*="__panel-"]` wildcard) because that
   wildcard would also swallow this block's own real modifier classes -
   ".p2p-dash__panel--glass/--notify/--priority/--table" sit on the same
   element as the base ".p2p-dash__panel" and must keep their shadow. */
.p2p-dash__panel-head,
.p2p-dash__panel-title,
.p2p-dash__panel-desc,
.p2p-dash__panel-link,
.p2p-dash__panel-foot,
.p2p-dash__panel-note,
.p2p-dash__panel-tools {
  box-shadow: none;
}

/* ---------------------------------------------------------------- *
 * 3. Icon badges - stay flat tinted boxes, no glow/scale/rotate
 * ---------------------------------------------------------------- */

/* ---------------------------------------------------------------- *
 * 4. Glass surfaces - stronger blur + saturation over the animated
 * background so nav/drawer/dropdowns/modals read as frosted glass.
 * ---------------------------------------------------------------- */
.wlf-nav,
.pw-plasma-nav,
.pw-plasma-drawer,
.wlf-plasma-drawer,
.dropdown-menu,
[class*="__dropdown"],
.modal-content,
.p2p-dash__panel {
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

/* ---------------------------------------------------------------- *
 * 5. Stat / price numbers - subtle metallic gradient fill
 * ---------------------------------------------------------------- */
.p2p-dash__metric-value,
[class*="-stat-value"],
[class*="__stat-value"],
[class*="-price-value"],
[class*="__price-value"] {
  background: linear-gradient(180deg, #ffffff 0%, #f1dc9d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
}

/* ---------------------------------------------------------------- *
 * 6. Accessibility - disable even the brightness/border transitions
 * above for users who've asked for reduced motion.
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  button,
  .btn,
  .btn--base,
  [class*="-btn"],
  [class*="__btn"],
  [class*="-cta"],
  [class*="__cta"],
  .card,
  .wlfi-card,
  [class*="-card"],
  [class*="__card"],
  [class*="-panel"],
  [class*="__panel"],
  .p2p-dash__metric {
    transition: none !important;
  }
}

/**
 * Round two - form controls, scroll-reveal, live indicators, tables.
 *
 *  7) Inputs/selects go from a flat fill to a recessed, "cut into the
 *     surface" well (inset shadow) with a glowing ring on focus, so
 *     typing into a field feels like a deliberate, precise action
 *     instead of clicking into a flat rectangle.
 *  8) The existing scroll-reveal system (.pw-animate / [data-wlfi-reveal],
 *     driven by pw-home.js's IntersectionObserver toggling `.is-inview`
 *     on [data-pw-section]) gets a more cinematic fade+rise+focus-pull
 *     curve. (Deliberately NOT extended to .wlfi-card / .wlfi-markets__row
 *     via a fresh opacity:0 rule - pw-animations.css already force-pins
 *     `.pw-products *`, `.wlfi-markets *` etc. to opacity:1!important as
 *     a hard-won fix for P2P content that used to get stuck invisible
 *     when the Webflow-era scroll-reveal missed them; re-hiding those
 *     elements here would just resurrect that bug.)
 *  9) Live/real-time indicators (status dots, "is-live" badges) get a
 *     shared pulse animation instead of sitting static.
 * 10) Table rows get a subtle depth cue on hover instead of a flat
 *     background swap.
 */

/* ---------------------------------------------------------------- *
 * 7. Inputs / selects - recessed well + glowing focus ring
 * ---------------------------------------------------------------- */
/* Tag selectors (input/textarea/select) rather than class-fragment
   wildcards on purpose - this codebase also uses "-input"/"__input"
   as part of wrapper, icon, and group class names (e.g.
   ".price--input-wrapper", ".p2p-withdraw__input-icon",
   ".review-input-group"), which are not fields themselves and would
   end up with a stray inset "well" shadow if matched by fragment. */
.form-control,
.wlfi-input,
.wlf-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
input:not([type]),
textarea,
select,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  transition:
    box-shadow 0.25s var(--bn-ease),
    border-color 0.25s var(--bn-ease),
    background-color 0.25s var(--bn-ease);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.form-control:focus,
.wlfi-input:focus,
.wlf-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input:not([type]):focus,
textarea:focus,
select:focus,
.select2-container--open .select2-selection--single,
.select2-container--open .select2-selection--multiple,
/* body.pw-app-site .form-control/.wlf-input/.wlfi-input:focus in
   plasma-app.css/custom.css carry the same (0,3,1) specificity as
   these prefixed duplicates - repeating the prefix here (loaded
   later) is what lets the inset+glow actually win there instead of
   silently losing to the plain ring-only rule. */
body.pw-app-site .form-control:focus,
body.pw-app-site .wlfi-input:focus,
body.pw-app-site .wlf-input:focus {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.3),
    0 0 0 4px rgba(236, 196, 108, 0.14),
    0 4px 18px rgba(236, 196, 108, 0.1) !important;
}

/* A few fields are the borderless inner half of an input-group whose
   *wrapper* already owns a :focus-within ring (amount-with-suffix,
   inline search) - skip the focus glow on the input itself there so
   it doesn't double up into two nested rings. */
.trd-input-group :is(input, textarea, .form-control):focus,
.wlfi-stk__search :is(input, textarea):focus {
  box-shadow: none !important;
}

/* Checkboxes/radios stay native (accent-color already themes them) -
   a resting scale + a small "pop" on check is the safe, cheap way to
   add tactile feedback without rebuilding them as custom markup. */
input[type="checkbox"],
input[type="radio"] {
  transition: transform 0.15s var(--bn-ease-press);
  cursor: pointer;
}
input[type="checkbox"]:active,
input[type="radio"]:active {
  transform: scale(0.88);
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  animation: bnCheckPop 0.25s var(--bn-ease);
}
@keyframes bnCheckPop {
  0% { transform: scale(0.8); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ---------------------------------------------------------------- *
 * 8. Scroll reveal - adds a focus-pull (blur to sharp) to the
 * existing opacity+translate curve on .pw-animate / [data-wlfi-reveal]
 * elements, for a more cinematic entrance.
 * ---------------------------------------------------------------- */
.pw-animate {
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  filter: blur(6px);
}
.pw-animate.is-visible,
.pw-home [data-pw-section].is-inview .pw-animate {
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .pw-animate {
    filter: none !important;
  }
}

/* ---------------------------------------------------------------- *
 * 9. Live indicators - shared pulse instead of a static dot
 * ---------------------------------------------------------------- */
@keyframes bnLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(0, 200, 83, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 200, 83, 0); }
}
.wlfi-status__dot,
[class*="__live-dot"],
[class*="-live-dot"] {
  animation: bnLivePulse 2.2s ease-out infinite;
}
.is-live [class*="__dot"]:not(.pw-hero-badge__pulse) {
  animation: bnLivePulse 2.2s ease-out infinite;
}

/* .p2p-dash__metric--amber.is-live (running trades tile) has no
   separate dot element to pulse - the whole tile is the indicator,
   so it gets its own slow breathing ring instead. */
@keyframes bnLiveRing {
  0%, 100% { box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36), 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(236, 196, 108, 0.3); }
  50% { box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36), 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 0 5px rgba(236, 196, 108, 0); }
}
.p2p-dash__metric.is-live {
  animation: bnLiveRing 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .wlfi-status__dot,
  [class*="__live-dot"],
  [class*="-live-dot"],
  .is-live [class*="__dot"],
  .p2p-dash__metric.is-live {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------- *
 * 10. Table rows - depth cue on hover instead of a flat bg swap
 * ---------------------------------------------------------------- */
body.pw-app-site .custom--table tbody tr,
body.pw-app-site .table tbody tr {
  transition: background-color 0.2s var(--bn-ease), box-shadow 0.2s var(--bn-ease);
}
body.pw-app-site .custom--table tbody tr:hover,
body.pw-app-site .table tbody tr:hover {
  box-shadow: inset 3px 0 0 rgba(236, 196, 108, 0.55);
}

/* "This is your own offer" row cue on marketplace listings - needs to
   out-rank the flat `.p2p-dash …tbody tr { background-color: … !important }`
   reset in custom.css, which otherwise wins on specificity and hides it. */
body.pw-app-site .bn-market-ads__table.custom--table tbody tr.own-trade-color,
.p2p-dash .bn-market-ads__table.custom--table tbody tr.own-trade-color {
  background-color: rgba(236, 196, 108, 0.07) !important;
  box-shadow: inset 3px 0 0 rgba(236, 196, 108, 0.85) !important;
}

/* Bootstrap's own `.table-dark` paints an OPAQUE background directly on
   every <td> via `background-color: var(--bs-table-bg)`, which sits on
   top of (and completely hides) the <tr> background above. Inside
   `.p2p-dash__table-wrap` these vars are already reset to transparent,
   but this same shared table partial also renders standalone (e.g. the
   homepage's embedded marketplace widget) with no such reset - so redo
   it here, scoped to the table itself, wherever it appears. */
.custom--table.bn-market-ads__table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-bg: transparent;
}

/**
 * Round three - count-up numbers, trade-escrow stepper, skeleton loads.
 *
 * 11) `.is-counting` is added by p2p-dashboard-live.js (and already
 *     exists on the homepage's own counter script) while a live number
 *     is animating between its old and new value - a brief gold glow
 *     on the digits themselves makes the *value changing* legible, not
 *     just the number blur past.
 * 12) The escrow trade stepper (.p2p-trade-steps - there are four
 *     tuned variants: bare/compact in p2p-dashboard.css, the "hero"
 *     panel also in p2p-dashboard.css, and .trd-live-panel/.trd-timeline
 *     in plasma-app.css, each with its own rail top-offset for a
 *     different dot size) already draws a connecting rail and colors
 *     it green once a step is done. It never colors the rail for the
 *     *current* or *disputed* step, and the active dot's ring is a
 *     flat static shadow - both fixed below, matched to each variant's
 *     own selector so nothing needs re-deriving the rail's position.
 * 13) A reusable shimmer utility (.bn-skeleton) for content that is
 *     still loading over the network - opt-in, not applied anywhere
 *     automatically, since retrofitting it onto every async region
 *     safely needs matching markup/JS changes.
 */

/* ---------------------------------------------------------------- *
 * 11. Count-up glow
 * ---------------------------------------------------------------- */
.is-counting {
  color: var(--bn-gold, #ecc46c) !important;
  -webkit-text-fill-color: var(--bn-gold, #ecc46c) !important;
  text-shadow: 0 0 16px rgba(236, 196, 108, 0.45);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .is-counting {
    text-shadow: none;
  }
}

/* ---------------------------------------------------------------- *
 * 12. Escrow trade stepper - active/disputed rail color + active glow
 * ---------------------------------------------------------------- */
/* Same selector shape as each variant's own ".is-done ... ::after"
   rule (see p2p-dashboard.css ~1963/2011/8722, plasma-app.css ~5041)
   so this only adds the missing background-color behavior and never
   competes with their already-correct position/top/width math. */
.p2p-trade-steps__item.is-active:not(:last-child)::after,
.trd-live-panel .p2p-trade-steps__item.is-active:not(:last-child)::after,
.trd-timeline .p2p-trade-steps__item.is-active:not(:last-child)::after,
.p2p-trade-live-panel .p2p-trade-steps--hero .p2p-trade-steps__item.is-active:not(:last-child)::after {
  background: linear-gradient(90deg, rgba(236, 196, 108, 0.6), var(--bn-border, rgba(255, 255, 255, 0.12)));
}
.p2p-trade-steps__item.is-disputed:not(:last-child)::after,
.trd-live-panel .p2p-trade-steps__item.is-disputed:not(:last-child)::after,
.trd-timeline .p2p-trade-steps__item.is-disputed:not(:last-child)::after,
.p2p-trade-live-panel .p2p-trade-steps--hero .p2p-trade-steps__item.is-disputed:not(:last-child)::after {
  background: linear-gradient(90deg, #ef4444, rgba(239, 68, 68, 0.4));
}

/* Active dot already gets a static ring (box-shadow) from each
   variant's own rule - animating box-shadow here overrides that for
   the life of the animation regardless of specificity (CSS animations
   beat non-!important static values), turning the flat ring into a
   breathing one without touching border/background/color at all. */
.p2p-trade-steps__item.is-active .p2p-trade-steps__dot {
  animation: bnStepGlow 2s ease-in-out infinite;
}
@keyframes bnStepGlow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(236, 196, 108, 0.12); }
  50% { box-shadow: 0 0 0 8px rgba(236, 196, 108, 0.04); }
}

@media (prefers-reduced-motion: reduce) {
  .p2p-trade-steps__item.is-active .p2p-trade-steps__dot {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------- *
 * 13. Skeleton shimmer - opt-in utility, add class="bn-skeleton" to
 * a placeholder element while its real content is still in flight.
 * ---------------------------------------------------------------- */
.bn-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.bn-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.09),
    transparent
  );
  animation: bnShimmer 1.6s ease-in-out infinite;
}
@keyframes bnShimmer {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .bn-skeleton::after {
    animation: none !important;
    display: none;
  }
}

/* Trade-activity chart (p2p-dash__chart): Chart.js loads from a CDN
   (see dashboard.blade.php script-lib push), so there's a real
   network-dependent gap, and occasionally a total failure if it's
   ad-blocked, before the canvas has anything to show. */
.bn-chart-wrap {
  position: relative;
}
.bn-skeleton--chart {
  position: absolute;
  inset: 0;
  border-radius: 10px;
}

/**
 * Round four - flat gold fills (reverted from a metallic light-to-dark
 * sweep). WLFI's own primary buttons and brand icon are a single flat
 * gold fill with no gradient/glow - matched here for both spots gold
 * is the fill rather than just an accent:
 *
 * 14) Primary gold buttons/CTAs - flat --bn-gold, no gradient/glow.
 * 15) The brand-gold stat icon (crypto assets tile) - flat tint,
 *     consistent with the other semantic icon-color variants.
 */

/* ---------------------------------------------------------------- *
 * 14. Primary gold buttons/CTAs - flat fill
 * ---------------------------------------------------------------- */
/* .wlf-btn--gold.wlf-btn--gold repeats the class on purpose: every
   existing rule for it is a two-class selector (".wlf-auth
   .wlf-btn--gold", ".wlf-auth--register .wlf-btn--gold", etc., see
   plasma-app.css), so a single-class selector here would lose the
   cascade in every one of those contexts despite loading later. The
   repeat matches that specificity without needing to enumerate every
   ".wlf-auth--*" variant. */
.wlf-btn--gold.wlf-btn--gold,
.pw-hero-cta--primary {
  background: var(--bn-gold, #ecc46c) !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------- *
 * 15. Brand-gold stat icon - flat tint
 * ---------------------------------------------------------------- */
.p2p-dash__metric--violet .p2p-dash__metric-icon {
  background: rgba(236, 196, 108, 0.14) !important;
  color: var(--bn-gold, #ecc46c) !important;
  box-shadow: none;
}