/* ==========================================================================
   Bitnnock global theme + component overrides
   Deploy: Admin Custom CSS or assets/templates/{active}/css/custom.css
   ========================================================================== */

:root {
  /* Warm dark-brown canvas instead of neutral black - sampled directly
     from worldlibertyfinancial.com's resting page background (#171412).
     --bitnnock-surface/-2 here are immediately overridden for :root by
     the lifted-surface block further down (kept warm-consistent there
     too); listed here mainly so this block has no stray neutral value. */
  --bitnnock-bg: #13100d;
  --bitnnock-bg-soft: #13100d;
  --bitnnock-bg-mid: #13100d;
  --bitnnock-surface: #1c1712;
  --bitnnock-surface-2: #221c15;
  --bitnnock-gold: #ecc46c;
  --bitnnock-gold-deep: #f1dc9d;
  --bitnnock-gold-soft: rgba(236, 196, 108, 0.14);
  --bitnnock-gold-glow: rgba(236, 196, 108, 0.28);
  --bitnnock-line: rgba(250, 244, 237, 0.1);
  --bitnnock-line-gold: rgba(236, 196, 108, 0.32);
  --bitnnock-text: #ffffff;
  --bitnnock-muted: #e7e5e4;
  --bitnnock-green: #00c853;
  --bitnnock-danger: #ef4444;
  /* WLFI renders entirely in Sora - already self-hosted below with all
     the weights this project uses, so no new font request. */
  --bitnnock-font: Sora, system-ui, -apple-system, sans-serif;
  --bitnnock-text-secondary: #e7e5e4;
  --bitnnock-radius: 12px;
  --bitnnock-radius-sm: 10px;
  --bitnnock-radius-pill: 9999px;
  --bitnnock-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------------------- */
/* Base / layout                                                              */
/* -------------------------------------------------------------------------- */

html,
body {
  background: var(--bitnnock-bg) !important;
  background-color: var(--bitnnock-bg) !important;
  color: var(--bitnnock-text);
  font-family: var(--bitnnock-font);
  -webkit-font-smoothing: antialiased;
}

.page-wrapper {
  background: transparent !important;
}

::selection {
  background: var(--bitnnock-gold) !important;
  color: #000 !important;
}

.base-color,
.base--color,
.text--base {
  color: var(--bitnnock-gold) !important;
}

/* -------------------------------------------------------------------------- */
/* Copy field + animation                                                     */
/* -------------------------------------------------------------------------- */

.copy-field,
.wlfi-copy-field,
.hover-input-popup.copy-field-wrap {
  position: relative;
}

.copy-field .form-control,
.copy-field .wlfi-input,
.wlfi-copy-field .wlfi-input {
  padding-right: 3rem !important;
}

.copyInput,
.copy-field__btn,
.wlfi-copy-trigger {
  position: absolute;
  top: 50%;
  right: 0.375rem;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bitnnock-line);
  border-radius: var(--bitnnock-radius-sm, 10px);
  background: var(--bitnnock-bg-soft);
  color: var(--bitnnock-muted);
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s var(--bitnnock-ease), background 0.2s var(--bitnnock-ease),
    border-color 0.2s var(--bitnnock-ease), transform 0.2s var(--bitnnock-ease);
  z-index: 2;
}

.copyInput:hover,
.copy-field__btn:hover,
.wlfi-copy-trigger:hover {
  color: var(--bitnnock-gold);
  border-color: var(--bitnnock-line-gold);
}

.copy-field.is-copied .copyInput,
.copy-field.copied .copyInput,
.wlfi-copy-field.is-copied .wlfi-copy-trigger {
  color: #000;
  background: var(--bitnnock-gold);
  border-color: var(--bitnnock-gold);
}

.copy-field.is-copied::after,
.copy-field.copied::after,
.wlfi-copy-field.is-copied::after {
  content: "Copied";
  position: absolute;
  top: -2.125rem;
  right: 0;
  padding: 0.3125rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000;
  background: var(--bitnnock-gold);
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  animation: bn-copy-toast 1.4s var(--bitnnock-ease) forwards;
  box-shadow: 0 8px 24px var(--bitnnock-gold-glow);
  z-index: 5;
}

@keyframes bn-copy-toast {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  12% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  78% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

/* Legacy copied::after support */
.copied::after {
  content: "Copied";
  position: absolute;
  top: -2rem;
  right: 0;
  min-width: 4.5rem;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3125rem 0.625rem;
  color: #000;
  background: var(--bitnnock-gold);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  animation: bn-copy-toast 1.4s var(--bitnnock-ease) forwards;
}

/* -------------------------------------------------------------------------- */
/* Cookies banner                                                             */
/* -------------------------------------------------------------------------- */

.cookies-card {
  width: min(520px, calc(100vw - 2rem));
  padding: 1.25rem 1.375rem;
  color: var(--bitnnock-text);
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 999999;
  transition: transform 0.45s var(--bitnnock-ease), opacity 0.45s var(--bitnnock-ease);
  background: var(--bitnnock-surface);
  border: 1px solid var(--bitnnock-line);
  border-radius: var(--bitnnock-radius);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
}

.cookies-card.hide {
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  pointer-events: none;
}

.radius--10px {
  border-radius: 10px;
}

.cookies-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--bitnnock-gold-soft);
  border: 1px solid var(--bitnnock-line-gold);
  color: var(--bitnnock-gold);
  font-size: 1.375rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.cookies-card__content {
  margin-bottom: 0;
  color: var(--bitnnock-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

.cookies-btn {
  color: #000;
  text-decoration: none;
  padding: 0.625rem 1.375rem;
  margin: 0.25rem 0.375rem 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bitnnock-radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.cookies-btn.accept-cookies,
.cookies-btn:first-of-type {
  background: var(--bitnnock-gold);
  color: #000 !important;
}

.cookies-btn.accept-cookies:hover,
.cookies-btn:first-of-type:hover {
  color: #000 !important;
}

.cookies-btn.policy,
.cookies-btn:last-of-type {
  background: transparent;
  border-color: var(--bitnnock-line);
  color: var(--bitnnock-text) !important;
}

.cookies-btn.policy:hover,
.cookies-btn:last-of-type:hover {
  color: var(--bitnnock-text) !important;
}

@media (max-width: 767px) {
  .cookies-card {
    width: calc(100% - 1.5rem);
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    font-size: 0.8125rem;
    padding: 1rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Secure password popup                                                      */
/* -------------------------------------------------------------------------- */

.hover-input-popup {
  position: relative;
}

.input-popup {
  display: none;
}

.hover-input-popup .input-popup {
  display: block;
  position: absolute;
  bottom: calc(100% + 0.75rem);
  left: 50%;
  width: min(300px, 92vw);
  background: var(--bitnnock-surface);
  color: var(--bitnnock-text);
  padding: 1rem 1.125rem;
  border: 1px solid var(--bitnnock-line);
  border-radius: var(--bitnnock-radius);
  transform: translateX(-50%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
  z-index: 20;
  transition: opacity 0.2s var(--bitnnock-ease), transform 0.2s var(--bitnnock-ease);
}

.hover-input-popup .input-popup::after {
  position: absolute;
  content: "";
  bottom: -0.4375rem;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 0.75rem;
  height: 0.75rem;
  background: var(--bitnnock-surface);
  border-right: 1px solid var(--bitnnock-line);
  border-bottom: 1px solid var(--bitnnock-line);
}

.input-popup p {
  padding-left: 1.375rem;
  position: relative;
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  color: var(--bitnnock-muted);
  line-height: 1.45;
}

.input-popup p:last-child {
  margin-bottom: 0;
}

.input-popup p::before {
  position: absolute;
  content: "";
  font-family: "Line Awesome Free";
  font-weight: 900;
  left: 0;
  top: 0.125rem;
  line-height: 1;
  font-size: 1rem;
}

.input-popup p.error {
  text-decoration: line-through;
  opacity: 0.55;
}

.input-popup p.error::before {
  content: "\f057";
  color: var(--bitnnock-danger);
}

.input-popup p.success {
  color: var(--bitnnock-text-secondary, #e7e5e4);
}

.input-popup p.success::before {
  content: "\f058";
  color: var(--bitnnock-green);
}

/* -------------------------------------------------------------------------- */
/* Responsive filters                                                         */
/* -------------------------------------------------------------------------- */

.show-filter {
  display: none;
}

@media (max-width: 767px) {
  .responsive-filter-card {
    display: none;
    transition: none;
  }

  .show-filter {
    display: block;
  }
}

/* -------------------------------------------------------------------------- */
/* Modals                                                                     */
/* -------------------------------------------------------------------------- */

.modal-content,
body.pw-app-site .modal-content,
.p2p-dash .modal-content {
  background: var(--bitnnock-surface) !important;
  border: 1px solid var(--bitnnock-line) !important;
  color: var(--bitnnock-text) !important;
  border-radius: var(--bitnnock-radius) !important;
}

.modal-header {
  border-bottom-color: var(--bitnnock-line) !important;
}

.modal-footer {
  border-top-color: var(--bitnnock-line) !important;
}

.modal-header .close,
.modal-header .btn-close {
  background-color: transparent !important;
  color: var(--bitnnock-muted) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

.modal-title {
  color: var(--bitnnock-text) !important;
}

.modal-footer .btn--primary {
  color: #000 !important;
}

body.pw-app-site .bn-confirmation-modal {
  z-index: 1060;
}

body.pw-app-site .modal-backdrop {
  z-index: 1050;
}

body.pw-app-site .bn-confirmation-modal .modal-dialog {
  pointer-events: auto;
}

body.pw-app-site .bn-confirmation-modal .modal-content {
  pointer-events: auto;
  overflow: visible;
}

body.pw-app-site .bn-confirmation-modal .modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.25rem 1.25rem;
}

body.pw-app-site .bn-confirmation-modal .modal-footer .btn {
  pointer-events: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 6.5rem;
  padding: 0 1.25rem;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

body.pw-app-site .bn-confirmation-modal .modal-footer .bn-confirmation-modal__no {
  background: var(--bitnnock-bg-mid) !important;
  border: 1px solid var(--bitnnock-line) !important;
  color: var(--bitnnock-text) !important;
}

body.pw-app-site .bn-confirmation-modal .modal-footer .bn-confirmation-modal__yes,
body.pw-app-site .bn-confirmation-modal .modal-footer .btn--base {
  background: linear-gradient(135deg, var(--bitnnock-gold), #f1dc9d) !important;
  border: 0 !important;
  color: #000 !important;
  box-shadow: 0 8px 24px rgba(236, 196, 108, 0.25);
}

body.pw-app-site .bn-confirmation-modal .modal-footer .bn-confirmation-modal__yes:hover,
body.pw-app-site .bn-confirmation-modal .modal-footer .btn--base:hover {
  filter: brightness(1.05);
  color: #000 !important;
}

.btn--dark,
.btn--dark:hover {
  background-color: var(--bitnnock-bg-mid) !important;
  color: var(--bitnnock-text) !important;
  border-color: var(--bitnnock-line) !important;
}

.btn-outline--dark {
  color: var(--bitnnock-text) !important;
  border-color: var(--bitnnock-line) !important;
}

.btn-outline--dark:hover {
  color: var(--bitnnock-text) !important;
}

.text--dark {
  color: var(--bitnnock-text) !important;
}

.btn-check:focus + .btn,
.btn:focus {
  box-shadow: 0 0 0 0.15rem var(--bitnnock-gold-glow) !important;
}

/* -------------------------------------------------------------------------- */
/* Alerts                                                                     */
/* -------------------------------------------------------------------------- */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  justify-content: flex-start;
  border-radius: var(--bitnnock-radius-sm, 10px);
}

.alert--info {
  border: 1px solid rgba(59, 130, 246, 0.35);
  background-color: rgba(59, 130, 246, 0.08);
  color: #bfdbfe;
}

.alert--info .alert__icon {
  color: #60a5fa;
}

.alert--primary {
  border: 1px solid rgba(236, 196, 108, 0.35);
  background-color: var(--bitnnock-gold-soft);
  color: var(--bitnnock-text);
}

.alert--primary .alert__icon {
  color: var(--bitnnock-gold);
}

.alert--danger {
  border: 1px solid rgba(239, 68, 68, 0.4);
  background-color: rgba(239, 68, 68, 0.08);
  color: #fecaca;
}

.alert--danger .alert__icon {
  color: #f87171;
}

.alert--warning {
  border: 1px solid rgba(236, 196, 108, 0.4);
  background-color: rgba(236, 196, 108, 0.08);
  color: #fde68a;
}

.alert--warning .alert__icon {
  color: var(--bitnnock-gold);
}

/* -------------------------------------------------------------------------- */
/* Select2                                                                    */
/* -------------------------------------------------------------------------- */

.select2 .selection {
  display: block;
}

.select2 .dropdown-wrapper {
  display: none;
}

.select2-container:has(.select2-selection--single) {
  width: 100% !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  text-align: left;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--bitnnock-text) !important;
  line-height: 3.375rem !important;
  padding-left: 0.875rem !important;
}

.select2-container--default .select2-selection--single {
  border: 1px solid var(--bitnnock-line) !important;
  border-radius: var(--bitnnock-radius-sm, 10px) !important;
  height: 3.375rem;
  background: var(--bitnnock-bg-soft) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 3.375rem;
  right: 0.5rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--bitnnock-muted) transparent transparent transparent;
}

.select2-dropdown {
  background-color: var(--bitnnock-surface) !important;
  border: 1px solid var(--bitnnock-line) !important;
  border-radius: var(--bitnnock-radius-sm, 10px) !important;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--bitnnock-line) !important;
  background: var(--bitnnock-bg-soft) !important;
  margin: 0.5rem !important;
  width: calc(100% - 1rem) !important;
  border-radius: 8px !important;
  color: var(--bitnnock-text) !important;
  padding: 0.5rem 0.75rem !important;
}

.select2-results__option--selectable {
  cursor: pointer;
  color: var(--bitnnock-text) !important;
  padding: 0.5rem 0.875rem !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--bitnnock-surface-2) !important;
  color: var(--bitnnock-text) !important;
}

.select2-container--default .select2-results__option--selected {
  background-color: var(--bitnnock-gold-soft) !important;
  color: var(--bitnnock-gold) !important;
}

.coin-search-area .form-control {
  border: 1px solid var(--bitnnock-line) !important;
  background: var(--bitnnock-bg-soft) !important;
  color: var(--bitnnock-text) !important;
  height: 3.375rem;
  border-radius: var(--bitnnock-radius-sm, 10px) !important;
}

.coin-search-area .btn--base {
  padding: 0.8125rem 2rem;
  border-radius: var(--bitnnock-radius-pill) !important;
}

/* Sell card light select2 context (legacy pages only — not offer wizard) */
.sell-card:not(.bn-ad-step__card) .select2-container--default .select2-selection--single {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  height: 3.125rem;
  background: #fff !important;
}

.sell-card:not(.bn-ad-step__card) .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #111 !important;
  line-height: 3.125rem !important;
}

.sell-card:not(.bn-ad-step__card) .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 3.125rem;
}

body:has(.sell-card:not(.bn-ad-step__card)) .select2-dropdown {
  background-color: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

body:has(.sell-card:not(.bn-ad-step__card)) .select2-results__option--selectable {
  color: #111 !important;
}

body:has(.sell-card:not(.bn-ad-step__card)) .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: rgba(19, 16, 13, 0.06) !important;
  color: #111 !important;
}

body:has(.sell-card:not(.bn-ad-step__card)) .select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #111 !important;
  background: #fff !important;
}

.sell-card:not(.bn-ad-step__card) .input-group-text {
  border: 0;
}

/* -------------------------------------------------------------------------- */
/* Theme surfaces                                                             */
/* -------------------------------------------------------------------------- */

.base--bg-two,
.section--bg2,
.bg-dark,
.bitcoin-form-wrapper,
.table.style--two thead,
.custom--table thead,
.link-btn,
.account-logo,
.coin-search-area,
.overview-section,
.choose-card,
.testimonial-card,
.account-section .right,
.navbar-collapse,
.language .dropdown-menu,
.section--bg,
.hero,
.inner-hero,
.footer-section {
  background-color: var(--bitnnock-surface) !important;
  background-image: none !important;
}

.header.menu-fixed .header__bottom {
  background-color: var(--bitnnock-bg) !important;
  background-image: none !important;
}

.overlay--one::before,
.hero::before,
.account-section .right::before,
.inner-hero::before,
.footer-section::before {
  background-color: var(--bitnnock-surface) !important;
  opacity: 1 !important;
}

.footer-section {
  border-top: 1px solid var(--bitnnock-line-gold);
}

.header__bottom {
  /* This gradient (a background-image, not -color) paints over any
     background-color fix elsewhere, so it needs its own warm values -
     otherwise the header reads as near-black regardless of the
     warm-canvas variables set for everything else. */
  background: linear-gradient(180deg, rgba(19, 16, 13, 0.98), rgba(24, 21, 18, 0.96)) !important;
  border-bottom-color: var(--bitnnock-line-gold) !important;
}

@media (max-width: 1199px) {
  .header .main-menu li .sub-menu {
    background-color: var(--bitnnock-surface) !important;
    border: 1px solid var(--bitnnock-line);
  }
}

.card.style--two > .card-header,
.btn--base.active {
  background-color: var(--bitnnock-surface) !important;
}

.section-top-title,
a:hover,
.page-breadcrumb li:first-child::before,
.page-breadcrumb li a:hover,
.header .main-menu li a:hover,
.header .main-menu li a:focus,
.contact-item a:hover {
  color: var(--bitnnock-gold) !important;
}

.btn--base,
.scroll-to-top,
.subscribe-form button,
.border-btn:hover,
.read-btn:hover,
.choose-card__icon,
.testimonial-slider .slick-dots li.slick-active button,
.footer-widget .social-links li a:hover,
.btn-list li a.active,
.section-title.has--border::after,
.bitcoin-form-wrapper .title::after {
  border-color: var(--bitnnock-gold) !important;
}

.btn--base,
.scroll-to-top,
.choose-card__icon,
.subscribe-form button,
.btn-list li a.active,
.section-title.has--border::after,
.bitcoin-form-wrapper .title::after,
.create-trade-form .input-group-text,
.d-widget2 .icon {
  background-color: var(--bitnnock-gold) !important;
  color: #000 !important;
}

.footer-widget .social-links li a:hover,
.read-btn:hover,
.border-btn:hover {
  color: #000 !important;
}

.btn--base:hover {
  color: #000 !important;
}

.scroll-to-top .scroll-icon,
.account-menu .icon i,
.choose-card__icon i {
  color: #000 !important;
}

input:focus,
textarea:focus,
.nice-select.open,
.form-control:focus,
.nav-tabs.custom--style .nav-item .nav-link.active,
.custom-checkbox input:checked + label::after,
.custom-radio input[type="radio"]:checked ~ label::before {
  border-color: var(--bitnnock-gold) !important;
  box-shadow: 0 0 0 3px var(--bitnnock-gold-glow) !important;
}

.custom-radio label::after {
  background-color: var(--bitnnock-gold) !important;
}

.choose-card,
.testimonial-card,
.custom--card,
.card.custom--card {
  background-color: var(--bitnnock-surface) !important;
  border-color: var(--bitnnock-line) !important;
  color: var(--bitnnock-text);
}

body.pw-app-site .choose-card,
body.pw-app-site .testimonial-card,
body.pw-app-site .custom--card,
body.pw-app-site .card.custom--card {
  background-color: rgba(255, 255, 255, 0.02) !important;
  box-shadow: none !important;
}

.custom--card .card-header,
.card.custom--card > .card-header {
  background-color: var(--bitnnock-bg-soft) !important;
  border-color: var(--bitnnock-line) !important;
  color: var(--bitnnock-text);
}

.custom--card .form-control,
.card.custom--card .form-control {
  background-color: var(--bitnnock-bg-soft);
  border-color: var(--bitnnock-line);
  color: var(--bitnnock-text);
}

.testimonial-slider .slick-center .testimonial-card {
  border-color: var(--bitnnock-gold) !important;
}

.coin-search-area label,
.footer-section p,
.footer-section li,
.footer-section span,
.footer-section a,
.header .main-menu li a,
.para-white,
.choose-card__content .title,
.choose-card__content p,
.testimonial-card__content p {
  color: var(--bitnnock-text);
}

.footer-section a.text--base {
  color: var(--bitnnock-gold) !important;
}

.preloader {
  background: var(--bitnnock-bg) !important;
}

.preloader .animated-preloader,
.preloader .animated-preloader::before {
  background: var(--bitnnock-gold) !important;
}

.preloader .animated-preloader::after {
  background: var(--bitnnock-bg) !important;
}

.text--info,
.btn-outline--info {
  color: var(--bitnnock-text) !important;
  border-color: var(--bitnnock-line) !important;
}

.btn--info {
  background-color: var(--bitnnock-surface) !important;
  border-color: var(--bitnnock-line) !important;
  color: var(--bitnnock-text) !important;
}

.btn-outline--info:hover {
  border-color: var(--bitnnock-line) !important;
  color: var(--bitnnock-text) !important;
}

.badge--info {
  background-color: var(--bitnnock-surface) !important;
  color: var(--bitnnock-text) !important;
  border: 1px solid var(--bitnnock-line);
}

/* Vendor .badge--primary/--warning/--success/--danger (main.css) ship
   with vivid Bootstrap-y defaults (blue/purple, orange, green, red)
   that were only ever overridden inside specific wrappers like
   .bn-ad-table-wrap. Trade::statusBadge / Advertisement::statusBadge
   etc. render these classes site-wide (trades list, trade detail,
   offers list), so every variant needs its own top-level override
   here too, not just the scoped copies. */
.badge--primary,
.badge.badge--primary {
  background-color: rgba(236, 196, 108, 0.12) !important;
  border: 1px solid rgba(236, 196, 108, 0.35) !important;
  color: var(--bitnnock-gold) !important;
}

.badge--warning,
.badge.badge--warning {
  background-color: rgba(236, 196, 108, 0.12) !important;
  border: 1px solid rgba(236, 196, 108, 0.35) !important;
  color: #fde68a !important;
}

.badge--success,
.badge.badge--success {
  background-color: rgba(0, 200, 83, 0.12) !important;
  border: 1px solid rgba(0, 200, 83, 0.35) !important;
  color: #86efac !important;
}

.badge--danger,
.badge.badge--danger {
  background-color: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #fca5a5 !important;
}

.badge--buy,
.badge.badge--buy {
  border-radius: 999px;
  padding: 2px 12px;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  background-color: rgba(0, 200, 83, 0.12) !important;
  border: 1px solid rgba(0, 200, 83, 0.38) !important;
  color: #86efac !important;
}

.badge--sell,
.badge.badge--sell {
  border-radius: 999px;
  padding: 2px 12px;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  background-color: rgba(236, 196, 108, 0.12) !important;
  border: 1px solid rgba(236, 196, 108, 0.35) !important;
  color: #f1dc9d !important;
}

.bn-trd-section--buy .bn-trd-tag {
  color: #86efac !important;
  border-color: rgba(0, 200, 83, 0.35) !important;
  background: rgba(0, 200, 83, 0.08) !important;
}

.bn-trd-section--sell .bn-trd-tag {
  color: #f1dc9d !important;
  border-color: rgba(236, 196, 108, 0.35) !important;
  background: rgba(236, 196, 108, 0.08) !important;
}

/* Public trader profile — kill legacy sidebar / caption-list bleed */
.bn-trd-profile.profile-setting-sidebar,
.bn-trd .bn-trd-profile {
  background: var(--bitnnock-surface) !important;
  padding: 0 !important;
}

@media (min-width: 1024px) {
  .bn-trd-profile.profile-setting-sidebar,
  .bn-trd .bn-trd-profile {
    position: sticky;
    top: 1rem;
  }
}

.bn-trd .bn-trd-meta.caption-list li,
.bn-trd .bn-trd-meta li {
  display: grid !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  border-bottom: 1px solid var(--bn-border) !important;
  padding: 10px 0 !important;
}

.bn-trd .bn-trd-meta .caption {
  width: auto !important;
  font-family: inherit !important;
  position: static !important;
}

.bn-trd .bn-trd-meta .value {
  width: auto !important;
  padding-left: 0 !important;
}

/* Public profile — Buy/Sell action pills (p2p-dash vars absent outside .p2p-dash) */
body.pw-app-site .bn-trd .bn-trd-table-wrap .p2p-dash__btn--primary,
body.pw-app-site .bn-trd .bn-profile-ads .p2p-dash__btn--primary,
body.pw-app-site .bn-trd .bn-trd-table-wrap .p2p-dash__btn--sm,
body.pw-app-site .bn-trd .bn-profile-ads .p2p-dash__btn--sm {
  background: linear-gradient(135deg, #ecc46c, #f1dc9d) !important;
  border-color: #ecc46c !important;
  color: #000 !important;
}

.cmn-list-2 li:nth-last-of-type(3n + 1)::before {
  border-color: var(--bitnnock-line) !important;
}

.single-message.admin-message .message-content {
  border: 1px solid var(--bitnnock-line-gold) !important;
  background-color: var(--bitnnock-gold-soft) !important;
}

.staff-reply {
  background-color: var(--bitnnock-gold-soft) !important;
  border-color: var(--bitnnock-line-gold) !important;
}

.home-page .header {
  display: none !important;
}

/* Tables on dark pages */
body.pw-app-site .custom--table tbody tr:hover,
body.pw-app-site .table.style--two tbody tr:hover {
  box-shadow: none !important;
  transform: none !important;
}



/* Neutralize legacy main.css white table rows on dark surfaces */
body.pw-app-site .table.style--two tbody tr,
.p2p-dash .table.style--two tbody tr,
.p2p-dash .table tbody tr,
.p2p-dash .custom--table tbody tr {
  background-color: var(--bitnnock-surface, #1c1712) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.pw-app-site .table.style--two tbody tr td,
.p2p-dash .table.style--two tbody tr td,
.p2p-dash .table tbody td,
.p2p-dash .custom--table tbody td {
  color: #e7e5e4 !important;
  background-color: transparent !important;
}

body.pw-app-site .no-data-message,
.p2p-dash .no-data-message {
  background-color: transparent !important;
  color: var(--bitnnock-muted) !important;
}



.custom--table td,
.custom--table th,
.table.style--two td,
.table.style--two th {
  border-color: var(--bitnnock-line) !important;
  color: var(--bitnnock-muted);
}

.custom--table:not(.bn-market-ads__table) thead th,
.table.style--two thead th {
  color: var(--bitnnock-text) !important;
  background: var(--bitnnock-bg-soft) !important;
}

/* Hide Viser push-notification permission banner */
.notice,
.schwab-notification-alert {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Inner pages — Bitnnock dark shell */
.bn-page {
  background: var(--bitnnock-bg);
  color: var(--bitnnock-text);
  min-height: 40vh;
}

.bn-inner-hero {
  padding: clamp(5.5rem, 14vw, 8.75rem) clamp(1rem, 3vw, 1.5rem) clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--bitnnock-line);
}

.bn-inner-hero .page-title {
  font-family: var(--bitnnock-font);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--bitnnock-text);
  margin: 0;
}

.bn-page .contact-form-wrapper,
.bn-page .custom--card,
.bn-page .coin-search-area {
  border-radius: var(--bitnnock-radius-sm);
  border: 1px solid var(--bitnnock-line);
  background: var(--bitnnock-surface);
}

.bn-page .form-control,
.bn-page .select2-container .select2-selection--single {
  background: var(--bitnnock-bg-soft) !important;
  border-color: var(--bitnnock-line) !important;
  color: var(--bitnnock-text) !important;
}

.bn-page label {
  color: var(--bitnnock-muted);
  font-family: var(--bitnnock-font);
  font-size: 13px;
  font-weight: 600;
}

.bn-page .contact-item {
  border-color: var(--bitnnock-line);
}

.bn-page .contact-item__icon {
  color: var(--bitnnock-gold);
}

/* -------------------------------------------------------------------------- */
/* Preloader + cookie banner                                                  */
/* -------------------------------------------------------------------------- */

.bn-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Transparent, not a copy of the Living Ledger canvas's own background.
     This overlay sits directly in front of that real, already-animating
     canvas (z-index:6) and every section (z-index:7) - leaving it
     transparent lets the genuine thing show through underneath instead of
     a separate static recreation of it, so there's nothing to keep in sync
     and no seam between the two by construction. Only the constellation
     graphic below is this element's own visible content now. */
  background: transparent;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  transition: opacity 0.22s var(--bitnnock-ease), visibility 0.22s;
}

.bn-preloader__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 0 1.5rem;
  text-align: center;
}

.bn-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.bn-preloader__field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Same twinkle animation and warm-gold tones as the constellation nodes
   below, just scattered edge-to-edge instead of clustered in the 88px
   ledger box - plain positioned spans, not SVG/canvas, so this still
   paints on the very first frame with zero JS dependency. */
.bn-preloader__mote {
  position: absolute;
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  transform-origin: center;
  animation-name: bn-ledger-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.bn-preloader__mote--bright {
  width: 4px;
  height: 4px;
  background: #f7dab0;
  box-shadow: 0 0 6px rgba(247, 218, 176, 0.55);
}

.bn-preloader__mote--mid {
  background: #ecc46c;
}

.bn-preloader__mote--dim {
  width: 2.5px;
  height: 2.5px;
  background: #b4834a;
}

.bn-preloader__ledger {
  position: relative;
  width: 88px;
  height: 88px;
}

.bn-preloader__ledger-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bn-preloader__lines line {
  stroke: rgba(233, 187, 122, 0.32);
  stroke-width: 0.6;
  stroke-linecap: round;
}

/* One connection gets a brighter dashed overlay whose dash offset keeps
   animating - a small traveling glint standing in for the canvas's
   comet-trailed energy packets. */
.bn-preloader__line--pulse {
  stroke: rgba(247, 218, 176, 0.85);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 6 34;
  animation: bn-ledger-travel 2.6s linear infinite;
}

.bn-preloader__node {
  /* fill-box + center: scale() pulses each node in place around its own
     midpoint instead of the SVG viewport's origin (the default box for
     transforms on SVG shapes), which would otherwise make every node
     drift toward/away from the top-left corner as it "twinkles". */
  transform-box: fill-box;
  transform-origin: center;
  animation-name: bn-ledger-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Same warm amber -> pale gold tones as the canvas's TONES palette
   (bn-ambient-background.js), assigned the same way: brightest reserved
   for the largest/nearest-reading node. */
.bn-preloader__node--1 {
  fill: #f7dab0;
  filter: drop-shadow(0 0 6px rgba(247, 218, 176, 0.55));
}

.bn-preloader__node--2,
.bn-preloader__node--4 {
  fill: #ecc46c;
}

.bn-preloader__node--3,
.bn-preloader__node--6 {
  fill: #c6a163;
}

.bn-preloader__node--5,
.bn-preloader__node--7 {
  fill: #b4834a;
}

@keyframes bn-ledger-twinkle {
  0%, 100% { opacity: 0.45; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes bn-ledger-travel {
  to { stroke-dashoffset: -40; }
}

/* Standard visually-hidden pattern (clip, not display:none/opacity:0) -
   keeps "Loading…" announced to screen readers while showing nothing on
   screen, so sighted users see only the animation as requested. */
.bn-preloader__sr-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .bn-preloader__node,
  .bn-preloader__mote {
    animation: none;
    opacity: 0.9;
    transform: scale(1);
  }

  .bn-preloader__line--pulse {
    animation: none;
    stroke-dasharray: none;
    stroke: rgba(233, 187, 122, 0.32);
    stroke-width: 0.6;
  }
}

.bn-cookie {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 99990;
  max-width: 420px;
  margin-inline: auto;
  padding: 1.125rem 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--bitnnock-line-gold);
  background: rgba(19, 16, 13, 0.96);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.5s var(--bitnnock-ease), opacity 0.5s;
}

.bn-cookie.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.bn-cookie.is-hidden {
  display: none !important;
}

.bn-cookie__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}

.bn-cookie__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bitnnock-gold-soft);
  color: var(--bitnnock-gold);
  font-size: 1.125rem;
}

.bn-cookie__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bitnnock-text);
  margin: 0;
}

.bn-cookie__text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--bitnnock-muted);
  margin: 0 0 0.875rem;
}

.bn-cookie__text a {
  color: var(--bitnnock-gold) !important;
  text-decoration: underline;
}

.bn-cookie__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  border: none;
  border-radius: var(--bitnnock-radius-pill);
  background: var(--bitnnock-gold);
  color: #0a0a0a !important;
  font-family: var(--bitnnock-font);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.bn-cookie__btn:hover {
  filter: brightness(1.05);
}

/* -------------------------------------------------------------------------- */
/* CMS sections (pages, contact extras)                                       */
/* -------------------------------------------------------------------------- */

.wlfi-cms-page {
  background: var(--bitnnock-bg);
}

.wlfi-section {
  padding: clamp(3rem, 7vw, 5rem) 1rem;
  border-top: 1px solid var(--bitnnock-line);
}

.wlfi-section--alt {
  background: var(--bitnnock-bg-soft);
}

.wlfi-wrap {
  width: 100%;
  max-width: min(1152px, calc(100% - 2rem));
  margin-inline: auto;
}

.wlfi-section-head {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.wlfi-section-head h2 {
  font-family: var(--bitnnock-font);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bitnnock-text) !important;
  margin: 0 0 0.75rem;
}

.wlfi-section-head p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bitnnock-muted) !important;
  margin: 0;
}

/* Choose us / features grid */
.wlfi-features {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .wlfi-features { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .wlfi-features { grid-template-columns: repeat(3, 1fr); }
}

.wlfi-feature {
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--bitnnock-line);
  background: var(--bitnnock-surface);
  transition: border-color 0.25s, transform 0.25s;
}

.wlfi-feature:hover {
  border-color: var(--bitnnock-line-gold);
}

.wlfi-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--bitnnock-gold-soft);
  border: 1px solid var(--bitnnock-line-gold);
}

.wlfi-feature__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.wlfi-feature__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--bitnnock-text) !important;
  margin: 0 0 0.5rem;
}

.wlfi-feature__text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--bitnnock-muted) !important;
  margin: 0;
}

/* Overview stats strip */
.wlfi-overview {
  padding: 2rem 1rem;
  border-top: 1px solid var(--bitnnock-line);
  border-bottom: 1px solid var(--bitnnock-line);
  background: var(--bitnnock-bg-soft);
}

.wlfi-overview__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .wlfi-overview__grid { grid-template-columns: repeat(4, 1fr); }
}

.wlfi-overview__item {
  text-align: center;
  padding: 1rem;
}

.wlfi-overview__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0.625rem;
  border-radius: 50%;
  background: var(--bitnnock-gold-soft);
  color: var(--bitnnock-gold);
  font-size: 1.125rem;
}

.wlfi-overview__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bitnnock-text) !important;
  margin: 0;
}

/* Testimonials */
.wlfi-testimonial-slider .slick-dots {
  bottom: -2rem;
}

.wlfi-testimonial-slider .slick-dots li button:before {
  color: var(--bitnnock-gold);
}

.wlfi-testimonial-card {
  padding: 2rem 1.5rem;
  border-radius: 16px;
  border: 1px solid var(--bitnnock-line);
  background: var(--bitnnock-surface);
  margin: 0 0.5rem;
}

.wlfi-testimonial-card__quote {
  font-size: 2rem;
  line-height: 1;
  color: var(--bitnnock-gold);
  margin-bottom: 0.75rem;
}

.wlfi-testimonial-card__text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--bitnnock-muted) !important;
  margin: 0 0 1.5rem;
}

.wlfi-testimonial-card__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.wlfi-testimonial-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bitnnock-line-gold);
}

.wlfi-testimonial-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bitnnock-text) !important;
  margin: 0;
}

/* FAQ accordion */
.wlfi-faq-section { padding: clamp(3rem, 7vw, 5rem) 1rem; border-top: 1px solid var(--bitnnock-line); }

.wlfi-faq-layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 992px) {
  .wlfi-faq-layout:not(.wlfi-faq-layout--full) { grid-template-columns: 1fr 1.2fr; align-items: start; }
}

.wlfi-faq { display: flex; flex-direction: column; gap: 0.5rem; }

.wlfi-faq__item {
  border-radius: 8px;
  border: 1px solid var(--bitnnock-line);
  background: var(--bitnnock-surface);
  overflow: hidden;
}

.wlfi-faq__item.is-open { border-color: var(--bitnnock-line-gold); }

.wlfi-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.125rem;
  background: transparent;
  border: none;
  color: var(--bitnnock-text) !important;
  font-family: var(--bitnnock-font);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.wlfi-faq__q::after {
  content: '+';
  font-size: 1.25rem;
  color: var(--bitnnock-muted);
  transition: transform 0.2s, color 0.2s;
}

.wlfi-faq__item.is-open .wlfi-faq__q::after {
  transform: rotate(45deg);
  color: var(--bitnnock-gold);
}

.wlfi-faq__a { padding: 0 1.125rem 1rem; }

.wlfi-faq__a[hidden] { display: none; }

.wlfi-faq__a p {
  font-size: 0.9375rem;
  color: var(--bitnnock-muted) !important;
  line-height: 1.7;
  margin: 0;
}

/* Offer CTA band */
.wlfi-offer-band {
  padding: clamp(2.5rem, 6vw, 4rem) 1rem;
  border-top: 1px solid var(--bitnnock-line);
  background: linear-gradient(135deg, rgba(236, 196, 108, 0.08), rgba(19, 16, 13, 0));
}

.wlfi-offer-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

@media (min-width: 768px) {
  .wlfi-offer-band__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.wlfi-offer-band__title {
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--bitnnock-text) !important;
  margin: 0 0 0.375rem;
}

.wlfi-offer-band__sub {
  font-size: 0.9375rem;
  color: var(--bitnnock-muted) !important;
  margin: 0;
}

.wlfi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.5rem;
  border-radius: var(--bitnnock-radius-pill);
  font-family: var(--bitnnock-font);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
}

.wlfi-btn--primary {
  background: var(--bitnnock-gold);
  color: #0a0a0a !important;
}

.wlfi-btn--primary:hover {
  filter: brightness(1.05);
}

/* Subscribe */
.wlfi-subscribe {
  padding: clamp(3rem, 7vw, 5rem) 1rem;
  border-top: 1px solid var(--bitnnock-line);
}

.wlfi-subscribe__form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 520px;
  margin: 1.5rem auto 0;
}

@media (min-width: 576px) {
  .wlfi-subscribe__form { flex-direction: row; }
}

.wlfi-subscribe__input {
  flex: 1;
  min-height: 50px;
  padding: 0 1.125rem;
  border-radius: var(--bitnnock-radius-pill);
  border: 1px solid var(--bitnnock-line) !important;
  background: var(--bitnnock-bg-soft) !important;
  color: var(--bitnnock-text) !important;
  font-family: var(--bitnnock-font);
}

.wlfi-subscribe__input:focus {
  border-color: var(--bitnnock-line-gold) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--bitnnock-gold-soft);
}

/* Prose (policy, cookie policy) */
.wlfi-cms-page__wrap {
  padding: clamp(2rem, 5vw, 3rem) 0 4rem;
}

.wlfi-cms-page .wlfi-card.bn-prose {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.wlfi-cms-page .bn-prose {
  max-width: none;
  margin: 0;
  padding: 0;
}

.bn-prose h1, .bn-prose h2, .bn-prose h3, .bn-prose h4 {
  color: var(--bitnnock-text) !important;
  font-family: var(--bitnnock-font);
  margin-top: 1.5rem;
}

.bn-prose p, .bn-prose li {
  color: var(--bitnnock-muted) !important;
  line-height: 1.75;
}

.bn-prose a { color: var(--bitnnock-gold) !important; }

/* Legal document layout (Terms of Service, Privacy Policy) - sticky "On
   this page" navigation alongside the content on wider screens, generated
   at runtime by bn-legal-toc.js from whatever <h2 id="..."> sections the
   admin-edited content actually contains. Single column, TOC first, on
   narrower screens - there's no room for a persistent sidebar once the
   viewport gets much below tablet width, and a short jump-list ahead of
   the content is still useful there even without staying pinned. */
.bn-legal-page__wrap { max-width: 1080px; }

.bn-legal-page__head.wlfi-section-head--left {
  max-width: none;
  padding-inline: clamp(1.25rem, 3vw, 2rem);
}

.bn-legal-page__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 992px) {
  .bn-legal-page__layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 3rem;
  }
}

.bn-legal-toc {
  order: -1;
  padding: 0 clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 992px) {
  .bn-legal-toc {
    order: 0;
    position: sticky;
    top: 96px;
    padding: 0;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
}

.bn-legal-toc__label {
  margin: 0 0 0.75rem;
  font-family: var(--bitnnock-font);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bitnnock-muted) !important;
}

.bn-legal-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  border-left: 1px solid var(--bitnnock-line);
}

.bn-legal-toc__link {
  display: block;
  padding: 0.4375rem 0 0.4375rem 0.875rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-family: var(--bitnnock-font);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--bitnnock-muted) !important;
  text-decoration: none !important;
  transition: color 0.15s, border-color 0.15s;
}

.bn-legal-toc__link:hover {
  color: var(--bitnnock-text) !important;
}

.bn-legal-toc__link[aria-current="true"] {
  border-left-color: var(--bitnnock-gold);
  color: var(--bitnnock-gold) !important;
  font-weight: 600;
}

.bn-legal-page__content.wlfi-card.bn-prose {
  max-width: none;
  margin-inline: 0;
}

/* "Effective date" line - the first element of every policy document body -
   set apart as metadata rather than reading like the opening sentence of
   the document itself. */
.bn-prose p.bn-legal-meta {
  display: inline-block;
  margin: 0 0 1.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: var(--bitnnock-bg-soft);
  border: 1px solid var(--bitnnock-line);
  font-size: 0.8125rem;
  color: var(--bitnnock-muted) !important;
}

.bn-prose p.bn-legal-meta strong {
  color: var(--bitnnock-text) !important;
}

/* Closing "have a lawyer review this" note - a distinct callout rather than
   a trailing paragraph indistinguishable from the rest of the document, so
   it reads as the important caveat it is instead of getting lost after a
   long scroll. */
.bn-prose .bn-legal-callout {
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: var(--bitnnock-bg-soft);
  border: 1px solid var(--bitnnock-line);
}

.bn-prose .bn-legal-callout p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.65;
}

.bn-prose .bn-legal-callout strong {
  color: var(--bitnnock-text) !important;
}

.bn-prose h2[id] {
  scroll-margin-top: 100px;
}

/* Contact page */
.bn-contact-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 992px) {
  .bn-contact-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

.bn-contact-card {
  padding: 1.75rem;
  border-radius: 16px;
  border: 1px solid var(--bitnnock-line);
  background: rgba(255, 255, 255, 0.02);
}

body.pw-app-site .bn-contact-card {
  background: rgba(255, 255, 255, 0.02) !important;
}

.bn-contact-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bitnnock-text) !important;
  margin: 0 0 0.375rem;
}

.bn-contact-card__sub {
  font-size: 0.875rem;
  color: var(--bitnnock-muted) !important;
  margin: 0 0 1.5rem;
}

.bn-contact-item {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--bitnnock-line);
}

.bn-contact-item:last-child { border-bottom: none; }

.bn-contact-item__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--bitnnock-gold-soft);
  color: var(--bitnnock-gold);
  font-size: 1.125rem;
}

.bn-contact-item__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bitnnock-text) !important;
  margin: 0 0 0.25rem;
}

.bn-contact-item__text {
  font-size: 0.875rem;
  color: var(--bitnnock-muted) !important;
  margin: 0;
}

.bn-map {
  margin-top: 3rem;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--bitnnock-line);
  height: 360px;
}

.bn-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.4) contrast(1.1);
}

/* Marketplace search */
.bn-market-search {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--bitnnock-line);
  background: var(--bitnnock-bg);
}

body.pw-app-site .bn-market-search {
  background: var(--bitnnock-bg) !important;
}

.bn-market-search__panel {
  padding: 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--bitnnock-line);
  background: rgba(255, 255, 255, 0.02);
}

body.pw-app-site .bn-market-search__panel {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* :not(.wlfi-toggle-chip) - the "Online now"/"Verified only" pills
   (wlfi-p2p-sections.css) are *also* <label> elements (each wraps a
   visually-hidden checkbox), so this generic field-caption rule was
   matching them too. Its specificity (1 class + 1 tag) beats
   .wlfi-toggle-chip's own display:inline-flex (1 class alone), which
   silently forced the pill back to a block label - align-items:center
   then had nothing to act on, so the icon sat at the top of the pill
   instead of centered against the text baseline. The !important color
   plus uppercase/letter-spacing/margin-bottom meant for ordinary field
   captions ("Cryptocurrency", "Payment Method", etc.) were leaking in
   too, e.g. turning "Online now" into "ONLINE NOW". Excluding the chip
   here (rather than fighting this rule's specificity/!important from
   the chip's side) keeps ordinary field labels correctly styled and
   lets .wlfi-toggle-chip's own complete, purpose-built styling apply
   unmodified. */
.bn-market-search label:not(.wlfi-toggle-chip) {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bitnnock-muted) !important;
  margin-bottom: 0.375rem;
}

.bn-market-search .select2-container { width: 100% !important; }

.bn-market-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  min-height: 46px;
  border: none;
  border-radius: var(--bitnnock-radius-pill);
  background: linear-gradient(135deg, var(--bitnnock-gold), #f1dc9d);
  color: #0a0a0a !important;
  font-family: var(--bitnnock-font);
  font-weight: 600;
  cursor: pointer;
}

/* Social auth partial */
.bn-social {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.625rem;
  width: 100%;
}

.bn-social__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: var(--bitnnock-radius-pill);
  border: 1px solid var(--bitnnock-line) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--bitnnock-text) !important;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: border-color 0.2s, background 0.2s;
}

.bn-social__btn:hover {
  border-color: var(--bitnnock-line-gold) !important;
}

.bn-social__btn img { width: 18px; height: 18px; }

.bn-social__divider {
  position: relative;
  text-align: center;
  margin: 1rem 0;
}

.bn-social__divider::before {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--bitnnock-line);
}

.bn-social__divider span {
  position: relative;
  padding: 0 0.625rem;
  background: var(--bitnnock-bg-soft);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bitnnock-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Verification code */
.bn-verify {
  margin-bottom: 1rem;
}

.bn-verify__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bitnnock-muted) !important;
  margin-bottom: 0.375rem;
}

.bn-verify .verification-code {
  position: relative;
}

.bn-verify .verification-code input {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 2;
  cursor: text;
}

.bn-verify .verification-code .boxes {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
}

.bn-verify .verification-code .boxes span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid var(--bitnnock-line);
  background: var(--bitnnock-bg-soft);
  color: var(--bitnnock-text);
  font-size: 1.25rem;
  font-weight: 600;
  font-family: var(--bitnnock-font);
}

/* User ads table partial */
.bn-user-ads {
  border-radius: 12px;
  border: 1px solid var(--bitnnock-line);
  background: var(--bitnnock-surface);
  overflow: hidden;
}

.bn-user-ads .table thead th {
  background: var(--bitnnock-bg-soft) !important;
  color: var(--bitnnock-muted) !important;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-color: var(--bitnnock-line) !important;
}

.bn-user-ads .table tbody td {
  border-color: var(--bitnnock-line) !important;
  color: var(--bitnnock-text) !important;
  font-size: 0.8125rem;
}

.bn-user-ads .modal-content {
  background: var(--bitnnock-surface);
  border: 1px solid var(--bitnnock-line);
  color: var(--bitnnock-text);
}

.bn-user-ads .modal-header {
  border-color: var(--bitnnock-line);
}

.bn-user-ads .list-group-item {
  background: transparent;
  border-color: var(--bitnnock-line);
  color: var(--bitnnock-danger) !important;
}

/* Reviews partial */
.bn-reviews__item {
  padding: 1.25rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  border: 1px solid var(--bitnnock-line);
  background: var(--bitnnock-surface);
}

.bn-reviews__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.bn-reviews__user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.bn-reviews__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bitnnock-line-gold);
}

.bn-reviews__name {
  font-weight: 600;
  color: var(--bitnnock-text) !important;
}

.bn-reviews__badge--pos,
.bn-reviews__badge--neg {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bn-reviews__badge--pos {
  background: rgba(0, 200, 83, 0.12);
  border: 1px solid rgba(0, 200, 83, 0.35);
  color: #86efac !important;
}

.bn-reviews__badge--neg {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5 !important;
}

.bn-reviews__text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--bitnnock-muted) !important;
  margin: 0;
}

.bn-reviews__date {
  font-size: 0.75rem;
  color: var(--bitnnock-muted);
}

.bn-reviews__edit {
  border: none;
  background: transparent;
  color: var(--bitnnock-gold) !important;
  font-size: 0.8125rem;
  cursor: pointer;
}

/* Referral tree */
.bn-referral-tree ul {
  list-style: none;
  padding-left: 1.25rem;
  margin: 0;
  border-left: 1px solid var(--bitnnock-line);
}

.bn-referral-tree > ul.firstList {
  padding-left: 0;
  border-left: none;
}

.bn-referral-tree li {
  position: relative;
  padding: 0.375rem 0 0.375rem 0.75rem;
  font-size: 0.875rem;
  color: var(--bitnnock-text);
}

.bn-referral-tree li::before {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 0.85rem;
  width: 0.75rem;
  height: 1px;
  background: var(--bitnnock-line-gold);
}

/* Maintenance */
.bn-maintenance {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(760px 420px at 10% -8%, rgba(236, 196, 108, 0.1), transparent 62%),
    var(--bitnnock-bg);
}

.bn-maintenance__card {
  max-width: 560px;
  text-align: center;
  padding: 2.5rem 2rem;
  border-radius: 24px;
  border: 1px solid var(--bitnnock-line);
  background: var(--bitnnock-surface);
}

.bn-maintenance__img {
  max-width: 280px;
  margin: 0 auto 1.5rem;
}

.bn-maintenance__text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--bitnnock-muted) !important;
}

/* Home / CMS shared section typography */
.wlfi-heading-md {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  color: var(--bitnnock-text) !important;
  margin: 0;
}

.wlfi-subheading {
  margin-top: 0.5rem;
  max-width: 640px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--bitnnock-muted) !important;
  text-align: center;
  margin-inline: auto;
}

.wlfi-offers {
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 3vw, 1.5rem);
  border-top: 1px solid var(--bitnnock-line);
}

.wlfi-offers--alt {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%);
}

.wlfi-offers .bn-ads-widget .row {
  margin: 0;
}

.wlfi-offers .bn-ads-widget .col-lg-12 {
  padding: 0;
  max-width: 100%;
}

.pt-60 {
  padding-top: 3.75rem;
}

/* ==========================================================================
   Responsive — cross-device alignment, overflow, and mobile polish
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

.container {
  padding-left: clamp(0.75rem, 3vw, 1.5rem);
  padding-right: clamp(0.75rem, 3vw, 1.5rem);
}

.bn-page {
  overflow-x: clip;
}

/* Dark card-style tables (main.css defaults to aliceblue on mobile) */
@media (max-width: 991px) {
  .table-responsive--md tbody tr:nth-child(odd),
  .table-responsive--md tbody tr:nth-child(even) {
    background-color: var(--bitnnock-surface) !important;
  }

  .table-responsive--md tbody tr:nth-child(odd) {
    background-color: var(--bitnnock-bg-soft) !important;
  }

  .table-responsive--md tr th,
  .table-responsive--md tr td {
    border-color: var(--bitnnock-line) !important;
    color: var(--bitnnock-text) !important;
    text-align: right !important;
  }

  .table-responsive--md tr:last-child td {
    border-bottom: 1px solid var(--bitnnock-line) !important;
  }

  .table-responsive--md [data-label]::before {
    color: var(--bitnnock-muted) !important;
    text-align: left;
  }

  .table-responsive--md .user {
    justify-content: flex-end;
  }
}

@media (max-width: 479px) {
  .table-responsive--md tr th,
  .table-responsive--md tr td {
    padding-left: 42% !important;
    font-size: 0.8125rem !important;
  }
}

.table-responsive,
.table-responsive--md,
.wlfi-table-wrap,
.bn-trd-table-wrap,
.bn-user-ads {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bn-ads-widget .table-responsive {
  margin: 0;
}

/* Auth shell */
.wlf-auth {
  overflow-x: clip;
}

/* :not(register):not(login) originally covered every other wlf-auth page.
   user-data joined the register/login "stretch, natural-height" grouping
   below (it has its own dedicated aside+form layout, not a centered card),
   but this exclusion list was never updated to match - so without this
   third :not(), this higher-specificity rule (4 classes) would silently
   overrule the lower-specificity user-data grouping (2 classes) on
   padding/min-height/align-items, regardless of source order. Same
   specificity-mismatch bug family as elsewhere in this file. */
.wlf-auth:not(.wlf-auth--register):not(.wlf-auth--login):not(.wlf-auth--user-data) .wlf-auth__section {
  padding: clamp(1.25rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3rem);
  min-height: calc(100vh - var(--pw-nav-height, 104px));
  display: flex;
  align-items: center;
}

.wlf-auth--register .wlf-auth__section,
.wlf-auth--user-data .wlf-auth__section,
.wlf-auth--login .wlf-auth__section {
  align-items: stretch;
  justify-content: stretch;
  padding: clamp(0.75rem, 2vh, 1.25rem) 0;
  min-height: 0;
  flex: 1;
}

.wlf-auth--user-data .wlf-auth__section,
.wlf-auth--login .wlf-auth__section {
  padding-top: clamp(1rem, 2.5vh, 1.5rem);
}

/* Per feedback: one full-width section reads better here than the
   aside+form split (p2p-dashboard.css .p2p-auth__split goes two columns
   at 960px+, with the aside pinned via position:sticky so it stays next
   to the taller form as it scrolls). Force a single column at every
   width instead - this also makes the sticky-tracking behavior on the
   aside pointless (nothing beside it to out-scroll), so it's cancelled
   too rather than left stuck at a now-meaningless offset. */
.wlf-auth--user-data .p2p-auth__split {
  grid-template-columns: 1fr !important;
}

/* Country <select> (select2) is configured with
   dropdownParent: .wlf-auth__form-wrap (user_data.blade.php script), so
   its absolutely-positioned dropdown gets appended inside that div and
   select2 computes its top/left assuming that div IS the positioning
   context. But .wlf-auth__form-wrap is position:static everywhere in
   this codebase, so the browser actually anchors the absolutely
   positioned dropdown to the nearest ancestor that truly has a
   position other than static - .wlf-auth__section (position:relative,
   p2p-dashboard.css) - not to form-wrap at all. That mismatch always
   existed, but it only produced a few px of visible drift while the
   form sat *beside* the aside (form-wrap's top was close to the
   section's top). Now that the form sits *below* the full aside +
   3-card benefits block, the gap between those two tops is ~450px, so
   the dropdown renders that far off from the field that opened it.
   Making form-wrap itself a positioning context (with no top/left, so
   its own layout doesn't move at all) makes it the *actual* nearest
   positioned ancestor, matching what select2 already assumes. */
.wlf-auth--user-data .wlf-auth__form-wrap {
  position: relative;
}

.wlf-auth--user-data .p2p-auth__intro {
  position: static !important;
  top: auto !important;
}

/* The benefit cards (Escrow / Local fiat / Verified traders) were sized
   for a ~half-width column. Stacked full-width on a wide screen, three
   short cards at ~1180px each would read as thin, sparse strips - so
   let them sit side by side once there's room, matching how the chips
   row above them already flows horizontally. Stays stacked below 960px
   (phones/tablets), same breakpoint the split used to switch on at. */
@media (min-width: 960px) {
  .wlf-auth--user-data .p2p-auth__benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.wlf-auth--user-data .select2-container--default .select2-selection--single {
  height: 50px !important;
  min-height: 50px !important;
  border-radius: 14px !important;
}

.wlf-auth--user-data .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 48px !important;
}

.wlf-auth--user-data .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 48px !important;
}

/* Country select "+1" dial code looked vertically misaligned from the
   dropdown caret. Root cause: p2p-dashboard.css adds
   padding-top/bottom:.45rem to .select2-selection__rendered (to make room
   for the flag+name+dial flex row), which pushes that row's own vertical
   center ~9px below the center of the select2 pill - but the pill's
   caret (.select2-selection__arrow) is a separate sibling element that
   stays centered on the pill's own fixed height and never moved to
   match. Fix at the source: make .select2-selection__rendered a flex
   container that centers its content within the pill's actual height,
   instead of faking vertical position with padding that doesn't account
   for the arrow. This selector chain matches plasma-app.css's most
   specific rule for this field, so it wins over the older padding rule
   regardless of file order. */
.wlf-auth--user-data .wlf-country-select + .select2-container .select2-selection--single .select2-selection__rendered {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 539px) {
  .wlf-auth--user-data .select2-container--default .select2-selection--single {
    height: 48px !important;
    min-height: 48px !important;
  }

  .wlf-auth--user-data .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 46px !important;
  }

  .wlf-auth--user-data .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
  }
}

/* Per feedback: "why not just make the phone number and country code 1" -
   the Country select2 moved from its own full-width field into the
   leading "code" slot of the Mobile field itself (replacing the old
   static, non-interactive dial-code echo), so the two become one
   control: [flag+code trigger][divider][phone number]. Full country
   search still works - it just opens from a compact trigger now instead
   of a full-width row. Same standard screen-reader-hiding technique as
   p2p-dashboard.css's existing .visually-hidden, re-scoped here since
   that one only applies inside .p2p-trade-review__choice. */
.wlf-auth--user-data .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Only one field remains in this grid row now, so collapse the 2-column
   layout .p2p-auth__grid provides by default. */
.wlf-auth--user-data .p2p-auth__grid--contact {
  grid-template-columns: 1fr;
}

/* Everything below re-targets the exact same .wlf-country-select +
   .select2-container rules from earlier in this file and from
   plasma-app.css, adding a .wlf-phone ancestor qualifier so these win
   (more specific, same !important weight) only when the select renders
   inside the merged phone control. */
.wlf-auth--user-data .wlf-phone .wlf-country-select + .select2-container {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

.wlf-auth--user-data .wlf-phone .wlf-country-select + .select2-container .select2-selection--single {
  /* .select2-selection--single has no "position" of its own in the base
     select2 CSS (it stays position:static), so it never becomes the
     containing block for its own .select2-selection__arrow child - that
     child escapes to the next positioned ancestor instead (.select2-
     container), and percentage heights here have no definite parent
     height to resolve against (a stretched flex item's used size isn't
     a reliable percentage basis for a *static* descendant). Declaring
     position:relative and an explicit px height (matching .wlf-input's
     own height exactly, so both flex siblings line up flush) sidesteps
     both problems - same fixed-px approach the pre-existing standalone-
     field rules above already use, just with a border-right divider
     instead of a full border/radius since this now sits flush inside
     the merged phone pill. */
  position: relative !important;
  height: 50px !important;
  min-height: 50px !important;
  border: none !important;
  border-right: 1px solid var(--bn-line) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.03) !important;
  transition: background-color 0.2s;
}

.wlf-auth--user-data .wlf-phone .wlf-country-select + .select2-container .select2-selection--single .select2-selection__rendered {
  display: flex !important;
  align-items: center !important;
  height: 50px !important;
  line-height: normal !important;
  padding: 0 1.625rem 0 0.875rem !important;
  font-size: 0.875rem !important;
  white-space: nowrap;
}

.wlf-auth--user-data .wlf-phone .wlf-country-select + .select2-container .select2-selection--single .select2-selection__arrow {
  top: 0 !important;
  height: 50px !important;
  right: 0.5rem !important;
  width: 1.125rem;
}

.wlf-auth--user-data .wlf-phone .wlf-country-select + .select2-container.select2-container--focus .select2-selection--single,
.wlf-auth--user-data .wlf-phone .wlf-country-select + .select2-container.select2-container--open .select2-selection--single {
  border-color: var(--bn-line) !important;
  border-right-color: rgba(236, 196, 108, 0.35) !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.wlf-auth--user-data .wlf-country-chip {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wlf-auth--user-data .wlf-phone .wlf-country-select + .select2-container .wlf-country-option__dial {
  font-size: 0.8125rem;
}

/* This is the only select2 instance on the page, so scoping the dropdown
   by page class alone is unambiguous. Keep it comfortably wide for
   scanning/search even though the trigger that opens it is compact. */
.wlf-auth--user-data .select2-dropdown {
  width: min(22rem, calc(100vw - 2.5rem)) !important;
}

@media (max-width: 539px) {
  /* .wlf-phone .wlf-input drops to 48px here (plasma-app.css), so the
     country trigger pill needs to match or the two flex siblings end up
     visibly different heights side by side. */
  .wlf-auth--user-data .wlf-phone .wlf-country-select + .select2-container .select2-selection--single {
    height: 48px !important;
    min-height: 48px !important;
  }

  .wlf-auth--user-data .wlf-phone .wlf-country-select + .select2-container .select2-selection--single .select2-selection__rendered {
    height: 48px !important;
    padding-right: 1.375rem !important;
    font-size: 0.8125rem !important;
  }

  .wlf-auth--user-data .wlf-phone .wlf-country-select + .select2-container .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
  }
}

@media (max-width: 767px) {
  .wlf-auth:not(.wlf-auth--register):not(.wlf-auth--user-data):not(.wlf-auth--login) .wlf-auth__form-wrap {
    padding: clamp(1.25rem, 4vw, 1.75rem);
  }

  .wlf-auth__row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 399px) {
  .bn-verify .verification-code .boxes {
    gap: 0.35rem;
  }

  .bn-verify .verification-code .boxes span {
    min-height: 44px;
    font-size: 1rem;
  }
}

/* ==========================================================================
   Batch 1 auth — shared alignment utilities + cross-page fixes
   ========================================================================== */

.bn-align-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  min-width: 0;
}

.bn-form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  min-width: 0;
}

@media (min-width: 768px) {
  .bn-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.wlf-auth .wlf-container {
  margin-inline: auto;
}

.wlf-auth .wlf-container--narrow {
  max-width: 520px;
}

.wlf-auth__form-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  width: 100%;
}

/*
 * Password-reset request page: "What happens next" now sits after the
 * form (see user/auth/passwords/email.blade.php) instead of gating it,
 * so the email field is reachable without scrolling on mobile. The
 * legacy page-specific rule still applies margin-bottom:1.25rem (sized
 * for when this card preceded other content); .wlf-auth__form-wrap's
 * own flex `gap` already spaces it correctly on both sides now, so zero
 * that out here to avoid doubling up before the footer nav.
 */
.p2p-auth__tips-card--after {
  margin-bottom: 0 !important;
}

/*
 * .wlf-auth__flow-steps: numbered variant of the tips list for flows that
 * are an actual ordered sequence (e.g. password-reset request's "what
 * happens next"), so it reads as 1-2-3 steps instead of a flat bulleted
 * list. Mirrors .wlf-auth__tips's spacing/typography but swaps the dot
 * bullet for a numbered badge. Deliberately NOT named .wlf-auth__steps -
 * plasma-app.css already defines that class (with a bare `li span`
 * selector) for the unrelated multi-step progress indicator, and reusing
 * it here made every span - including the label text - collapse into
 * that component's 24x24 circle.
 */
.wlf-auth__flow-steps {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wlf-auth__flow-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-align: left;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--bn-muted) !important;
}

.wlf-auth__flow-steps-num {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  border: 1px solid rgba(236, 196, 108, 0.35);
  background: rgba(236, 196, 108, 0.12);
  color: var(--bn-gold);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

/*
 * .wlf-auth__card--split-reverse: the login page puts the form first in
 * the DOM (so mobile users hit the form before scrolling past the
 * marketing panel) while the marketing/quote panel renders second. The
 * shared split-card rules in plasma-app.css always draw the quote
 * panel's divider on its own right edge (desktop) / bottom edge
 * (mobile), which assumes it's the *first* column - correct for
 * register/password/etc, wrong here since quote is now second. Flip the
 * divider to the quote panel's leading edge instead, so it still reads
 * as the seam between the two panels rather than an edge floating on
 * the outside of the card.
 */
.wlf-auth__card--split-reverse .wlf-auth__quote {
  border-right: none;
  border-left: 1px solid var(--bn-line);
}

@media (max-width: 991px) {
  .wlf-auth__card--split-reverse .wlf-auth__quote {
    border-bottom: none;
    border-top: 1px solid var(--bn-line);
  }
}

.wlf-auth__head .wlf-auth__sub,
.wlf-auth__head--center .wlf-auth__sub,
.wlf-auth__head--center .wlf-auth__title {
  margin-inline: auto;
}

@media (min-width: 768px) {
  .wlf-auth__head .wlf-auth__sub,
  .wlf-auth__head--center .wlf-auth__sub,
  .wlf-auth__head--center .wlf-auth__title {
    margin-inline: 0;
  }
}

.wlf-auth__social .bn-social {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0;
}

.wlf-auth__social .bn-social__btn {
  width: 100%;
}

.wlf-auth__social .bn-social__divider {
  margin: 0.75rem 0;
}

.wlf-auth__social .bn-social__divider span {
  background: rgba(7, 7, 8, 0.96);
}

.wlf-auth__agree {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.wlf-auth__agree .wlf-check--policy {
  align-items: flex-start;
  width: 100%;
}

.wlf-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.wlf-auth__foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.wlf-auth .bn-verify,
.wlfi-prof .bn-verify {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.wlf-auth .bn-verify .verification-code,
.wlfi-prof .bn-verify .verification-code {
  width: 100%;
  max-width: 100%;
}

.wlf-auth .bn-verify .verification-code .boxes,
.wlfi-prof .bn-verify .verification-code .boxes {
  justify-content: center;
  max-width: 100%;
}

.wlf-auth .wlf-phone.input-group {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}

.wlf-auth .wlf-phone.input-group > .wlf-input,
.wlf-auth .wlf-phone.input-group > .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

.wlf-auth .wlf-field,
.wlf-auth .wlf-input,
.wlf-auth .form-control,
.wlf-auth select.form-control {
  width: 100%;
  min-height: 48px;
}

.wlf-auth .wlf-input,
.wlf-auth .form-control {
  min-height: 48px;
}

@media (max-width: 767px) {
  .wlf-auth__grid,
  .wlf-auth__grid--password,
  .wlf-auth__grid--address,
  .bn-form-grid,
  .wlfi-form-grid {
    grid-template-columns: 1fr !important;
  }

  .wlf-auth__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .wlf-auth__sub {
    max-width: none;
  }
}

/* Step-up + profile security cards */
.wlfi-prof.pw-app {
  overflow-x: clip;
}

.wlfi-prof__wrap {
  overflow-x: clip;
}

.wlfi-prof__step-up-card {
  max-width: 520px;
  width: 100%;
}

.wlfi-prof__step-up-lead {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--wlfi-muted, #a8a29e) !important;
}

.wlfi-prof__2fa-code {
  width: 100%;
  min-width: 0;
}

.wlfi-prof__2fa-code .bn-verify {
  margin-bottom: 0;
}

.wlfi-prof__2fa-code .bn-verify .verification-code .boxes span {
  min-height: 48px;
}

.wlfi-prof .submit-form.bn-align-stack .wlfi-btn--primary {
  margin-top: 0.25rem;
}

/* Plasma nav — vertical centering in flex rows */
.pw-plasma-shell .pw-plasma-nav__center,
.pw-plasma-shell .navbar_menu-right {
  align-items: center;
}

.pw-plasma-shell .navbar_menu-right,
.pw-plasma-shell .navbar_menu-right:hover,
.pw-plasma-shell .link-block,
.pw-plasma-shell .link-block:hover {
  opacity: 1 !important;
}

/* Marketplace + inner content */
@media (max-width: 767px) {
  .bn-market-search {
    padding: 1rem 0;
  }

  .bn-market-search__panel {
    padding: 1rem;
  }

  .bn-prose {
    padding: 1.25rem clamp(1rem, 3vw, 1.5rem) 2.5rem;
  }

  .bn-contact-card {
    padding: 1.25rem;
  }

  .bn-map {
    height: 260px;
  }

  .pt-60 {
    padding-top: 2.5rem;
  }
}

@media (max-width: 479px) {
  .wlfi-wrap {
    max-width: calc(100% - 1.25rem);
  }
}

/* Cookie + scroll controls — safe areas */
@media (max-width: 767px) {
  .cookies-card,
  .bn-cookie {
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }

  body:has(.wlfi-mobile-bar) .cookies-card,
  body:has(.wlfi-mobile-bar) .bn-cookie {
    bottom: calc(5.25rem + env(safe-area-inset-bottom));
  }

  /* Shorter phones stack the hero badge/heading/lead/trust-grid/CTAs tall
     enough that this card's old size (icon row + full paragraph + 44px
     button) could still reach into that content above it. Trim padding/
     gaps and drop the icon to cut its height by roughly a third. */
  .bn-cookie {
    padding: 0.75rem 0.875rem;
  }

  .bn-cookie__icon {
    display: none;
  }

  .bn-cookie__head {
    margin-bottom: 0.375rem;
  }

  .bn-cookie__text {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-bottom: 0.625rem;
  }

  .bn-cookie__btn {
    min-height: 38px;
  }
}

.wlf-top {
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

body:has(.wlfi-mobile-bar) .wlf-top {
  bottom: calc(5.25rem + env(safe-area-inset-bottom));
}

@media (min-width: 721px) {
  body:has(.wlfi-home) .wlf-top {
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
}

.select2-container {
  max-width: 100%;
}

/* Modal fit on small screens */
@media (max-width: 575px) {
  .modal-dialog {
    margin: 0.75rem;
  }
}

/* ==========================================================================
   Final cleanup — shared modals, breadcrumb, dashboard actions
   ========================================================================== */

.wlfi-breadcrumb {
  text-align: center;
}

.wlfi-breadcrumb__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bn-modal-dark {
  background: var(--bitnnock-surface) !important;
  border: 1px solid var(--bitnnock-line) !important;
  color: var(--bitnnock-text) !important;
  border-radius: 20px !important;
  font-family: var(--bitnnock-font);
  overflow: hidden;
}

.bn-modal-dark .modal-header,
.bn-modal-dark .modal-footer {
  border-color: var(--bitnnock-line) !important;
}

.bn-modal-dark .modal-title {
  font-weight: 700;
  color: var(--bitnnock-text) !important;
}

.bn-modal-dark .modal-body {
  color: var(--bitnnock-muted) !important;
}

.bn-modal-dark .list-group-item {
  background: transparent !important;
  border-color: var(--bitnnock-line) !important;
  color: var(--bitnnock-text) !important;
}

.bn-login-modal__text {
  margin: 0;
  text-align: center;
  line-height: 1.6;
}

.bn-login-modal .modal-footer,
.bn-login-modal__actions {
  justify-content: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.bn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 1.25rem;
  border-radius: var(--bitnnock-radius-pill);
  font-family: var(--bitnnock-font);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none !important;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
}

.bn-btn--gold {
  background: var(--bitnnock-gold);
  color: #0a0a0a !important;
}

.bn-btn--gold:hover {
  filter: brightness(1.05);
}

.bn-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--bitnnock-line) !important;
  color: var(--bitnnock-text) !important;
}

.bn-btn--ghost:hover {
  border-color: var(--bitnnock-line-gold) !important;
}

.bn-user-ads .btn--group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.bn-user-ads .btn-outline--warning,
.bn-user-ads .btn-outline--info,
.bn-user-ads .btn-outline--danger,
.bn-user-ads .btn-outline--success {
  display: inline-flex !important;
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;
  padding: 0 0.75rem !important;
  border-radius: 999px !important;
  font-family: var(--bitnnock-font) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.bn-user-ads .btn-outline--warning {
  border-color: rgba(236, 196, 108, 0.35) !important;
  color: var(--bitnnock-gold) !important;
}

.bn-user-ads .btn-outline--info {
  border-color: rgba(96, 165, 250, 0.35) !important;
  color: #93c5fd !important;
}

.bn-user-ads .btn-outline--danger {
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #fca5a5 !important;
}

.bn-user-ads .btn-outline--success {
  border-color: rgba(0, 200, 83, 0.35) !important;
  color: var(--bitnnock-green) !important;
}

.bn-page .pb-120 {
  padding-bottom: clamp(3rem, 8vw, 7.5rem);
}

.bn-page .pt-120 {
  padding-top: clamp(1.5rem, 4vw, 2rem);
}

.bn-ads-widget .bn-ads-more-wrap {
  margin-top: 1.25rem;
}

/* Utility classes — replaces scattered inline styles */
.wlfi-container-dash {
  max-width: 1180px;
  margin-inline: auto;
}

.wlfi-card-body-flush .card-body {
  padding: 0 !important;
}

.wlfi-btn--block {
  width: 100%;
}

.wlfi-mt-12 {
  margin-top: 12px;
}

.wlfi-mt-14 {
  margin-top: 14px;
}

.wlfi-mt-16 {
  margin-top: 16px;
}

.wlfi-section-head--mb-lg {
  margin-bottom: 2.5rem;
}

.wlfi-section-head--left-flush {
  text-align: left;
  margin: 0;
}

.bn-trd-field--end {
  align-self: end;
}

.wlfi-img-center-sm {
  max-width: 200px;
  margin-inline: auto;
}

/* Hide legacy theme chrome sitewide when Bitnnock header/footer active */
body:has(.pw-plasma-shell) .scroll-to-top,
body:has(.pw-site-footer) .scroll-to-top,
body:has(.wlf-footer) .scroll-to-top,
body:has(.wlf-header) .footer-section,
body:has(.wlf-header) .header-bottom-area {
  display: none !important;
}

/* Plasma overrides — legacy main.css gold remapped on inner pages */
body.pw-app-site,
body.pw-app-site .pw-app {
  font-family: var(--bitnnock-font) !important;
}

body.pw-app-site .text--base,
body.pw-app-site .base-color,
body.pw-app-site .base--color,
body.pw-app-site a.text--base {
  color: #ecc46c !important;
}

body.pw-app-site .btn--base,
body.pw-app-site .cmn-btn,
body.pw-app-site .btn.cmn-btn {
  background-color: #ecc46c !important;
  border-color: #ecc46c !important;
  color: #000 !important;
}

body.pw-app-site .btn--base:hover,
body.pw-app-site .cmn-btn:hover {
  border-color: #f1dc9d !important;
}

body.pw-app-site ::selection {
  background: #ecc46c !important;
  color: #000 !important;
}

/* Neutralize legacy main.css gold (#d4af37) on Plasma pages */
body.pw-app-site .nav-tabs.custom--style .nav-item .nav-link.active,
body.pw-app-site .pagination .page-item.active .page-link,
body.pw-app-site .page-link.active,
body.pw-app-site .sidebar-menu li a.active,
body.pw-app-site .scroll-to-top {
  background-color: #ecc46c !important;
  border-color: #ecc46c !important;
  color: #000 !important;
}

body.pw-app-site .scroll-to-top .scroll-icon {
  color: #000 !important;
}

body.pw-app-site .border--base,
body.pw-app-site .section-title.has--border::after {
  border-color: #ecc46c !important;
}

body.pw-app-site .custom-checkbox input:checked + label::after,
body.pw-app-site input:focus,
body.pw-app-site textarea:focus,
body.pw-app-site .form-control:focus,
body.pw-app-site .nice-select.open {
  border-color: #ecc46c !important;
  box-shadow: 0 0 0 0.15rem rgba(236, 196, 108, 0.2) !important;
}

body.pw-app-site .btn.btn--danger,
body.pw-app-site .btn--danger {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}

body.pw-app-site .btn.btn--success,
body.pw-app-site .btn--success {
  background-color: #00c853 !important;
  border-color: #00c853 !important;
  color: #000 !important;
}

body.pw-app-site .btn-outline--success {
  border-color: rgba(0, 200, 83, 0.45) !important;
  color: #86efac !important;
}

body.pw-app-site .btn-outline--success:hover {
  border-color: rgba(0, 200, 83, 0.55) !important;
  color: #bbf7d0 !important;
}

body.pw-app-site .btn-outline--danger {
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #fca5a5 !important;
}

body.pw-app-site .btn-outline--danger:hover {
  border-color: rgba(239, 68, 68, 0.55) !important;
  color: #fecaca !important;
}

.pw-home ::selection {
  background: #ecc46c !important;
  color: #000 !important;
}

/* Inner pages — prevent main.css legacy gold (#d4af37) from leaking through .btn--base */
body.pw-app-site:not(.home-page) .btn--base,
body.pw-app-site:not(.home-page) .btn.btn--base,
body.pw-app-site:not(.home-page) button.btn--base,
body.pw-app-site:not(.home-page) input.btn--base,
body.pw-app-site:not(.home-page) .cmn-btn,
body.pw-app-site:not(.home-page) .filter--btn.btn--base {
  background-color: #ecc46c !important;
  background-image: none !important;
  border-color: #ecc46c !important;
  color: #000 !important;
}

body.pw-app-site:not(.home-page) .btn--base:hover,
body.pw-app-site:not(.home-page) .btn.btn--base:hover,
body.pw-app-site:not(.home-page) .cmn-btn:hover,
body.pw-app-site:not(.home-page) .filter--btn.btn--base:hover {
  border-color: #f1dc9d !important;
  color: #000 !important;
}

body.pw-app-site:not(.home-page) .btn-outline--base,
body.pw-app-site:not(.home-page) .border-btn {
  border-color: rgba(236, 196, 108, 0.45) !important;
  color: #ecc46c !important;
}

body.pw-app-site:not(.home-page) .btn-outline--base:hover,
body.pw-app-site:not(.home-page) .border-btn:hover {
  border-color: #ecc46c !important;
  color: #fff !important;
}

body.pw-app-site:not(.home-page) .pw-app .text--base,
body.pw-app-site:not(.home-page) .pw-app a.text--base {
  color: #ecc46c !important;
}

body.pw-app-site:not(.home-page) .pw-app .pagination .page-item.active .page-link,
body.pw-app-site:not(.home-page) .pw-app .nav-tabs.custom--style .nav-item .nav-link.active {
  background-color: #ecc46c !important;
  border-color: #ecc46c !important;
  color: #000 !important;
}

/* CMS builder sections — elite template Plasma parity */
.wlfi-section {
  padding: clamp(2.5rem, 5vw, 4rem) 1rem;
  border-top: 1px solid var(--bitnnock-line, rgba(255, 255, 255, 0.08));
}

.wlfi-section--alt {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 55%);
}

.wlfi-feature-block {
  display: grid;
  gap: 2rem;
  align-items: end;
}

@media (min-width: 992px) {
  .wlfi-feature-block {
    grid-template-columns: 1fr min(42%, 480px);
  }
}

.wlfi-feature-block__media {
  margin: 0;
}

.wlfi-feature-block__media img {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--bitnnock-line, rgba(255, 255, 255, 0.08));
}

.wlfi-payment-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  justify-content: center;
  align-items: center;
}

.wlfi-payment-logos__brand img {
  display: block;
  height: 32px;
  width: auto;
  opacity: 0.88;
  filter: grayscale(0.15);
}

.wlfi-trade-cards__head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 768px) {
  .wlfi-trade-cards__head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .wlfi-trade-cards__head .bn-ads-tabs {
    margin: 0;
    flex-shrink: 0;
  }
}

.wlfi-trade-cards__thumb {
  width: 100%;
  max-width: 220px;
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
}

.wlfi-trade-cards__thumb img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--bitnnock-line, rgba(255, 255, 255, 0.08));
}

/* ==========================================================================
   Dark theme — force readable white text (overrides legacy main.css greys)
   ========================================================================== */

html,
body,
body.pw-app-site,
body.home-page,
.pw-app,
.p2p-dash,
.bn-page,
.wlfi-cms-page {
  color: #ffffff !important;
}

body.pw-app-site .page-wrapper,
body.pw-app-site .section--bg,
body.pw-app-site .account-section,
body.pw-app-site .custom--card,
body.pw-app-site .card,
body.pw-app-site .card-body,
body.pw-app-site .card-header,
body.pw-app-site .card-footer {
  color: #ffffff !important;
}

body.pw-app-site p,
body.pw-app-site span:not(.badge):not([class*="btn"]):not(.pw-hero-badge__pulse):not(.pw-hero-badge__text):not(.pw-hero-ledger-tag__status):not(.p2p-dash__metric-icon):not([class*="__icon-badge"]):not([class*="-icon-badge"]):not([class*="__metric-icon"]):not(.bn-ads-cell__rate-value):not(.bn-ads-cell__rate-pair):not(.bn-trader-avatar):not(.bn-data-card__label),
body.pw-app-site li,
body.pw-app-site dt,
body.pw-app-site dd,
body.pw-app-site label,
body.pw-app-site .form--label,
body.pw-app-site .wlfi-label,
body.pw-app-site h1,
body.pw-app-site h2,
body.pw-app-site h3,
body.pw-app-site h4,
body.pw-app-site h5,
body.pw-app-site h6,
body.pw-app-site .section-title,
body.pw-app-site .page-title,
body.pw-app-site .card-title,
body.pw-app-site .custom--table:not(.bn-market-ads__table) td,
body.pw-app-site .custom--table:not(.bn-market-ads__table) th,
body.pw-app-site .table:not(.bn-market-ads__table) td,
body.pw-app-site .table:not(.bn-market-ads__table) th,
body.pw-app-site .list-group-item,
body.pw-app-site .breadcrumb-item,
body.pw-app-site .breadcrumb-item a,
body.pw-app-site .text-dark,
body.pw-app-site .text-muted,
body.pw-app-site small,
body.pw-app-site .small,
.p2p-dash p,
.p2p-dash span:not(.badge):not([class*="btn"]):not(.p2p-dash__metric-icon):not([class*="__icon-badge"]):not([class*="-icon-badge"]):not([class*="__metric-icon"]),
.p2p-dash li,
.p2p-dash label,
.p2p-dash h1,
.p2p-dash h2,
.p2p-dash h3,
.p2p-dash h4,
.p2p-dash h5,
.p2p-dash h6,
.p2p-dash .p2p-dash__stat-label,
.p2p-dash .p2p-dash__meta dt,
.p2p-dash .p2p-dash__trade-meta,
.p2p-dash .p2p-dash__notify-time {
  color: #ffffff !important;
}

/* Legacy main.css dark greys on black backgrounds */
body.pw-app-site [style*="color: #363636"],
body.pw-app-site [style*="color:#363636"],
body.pw-app-site .text--secondary,
body.pw-app-site .caption,
body.pw-app-site .subtitle,
body.pw-app-site .para,
body.pw-app-site .account-card__title,
body.pw-app-site .d-widget p,
body.pw-app-site .sidebar-menu li a,
body.pw-app-site .sidebar-menu li span {
  color: #ffffff !important;
}

body.pw-app-site .custom--table td,
body.pw-app-site .table.style--two td,
body.pw-app-site .custom--table tbody td,
body.pw-app-site .table tbody td {
  color: #ffffff !important;
}

body.pw-app-site .custom--table:not(.bn-market-ads__table) thead th,
body.pw-app-site .table:not(.bn-market-ads__table) thead th {
  color: #e7e5e4 !important;
}

body.pw-app-site label,
body.pw-app-site .form--label,
.p2p-dash label {
  color: #e7e5e4 !important;
}

/* Keep accent / status colors */
body.pw-app-site .text--base,
body.pw-app-site a.text--base,
body.pw-app-site .base-color,
.p2p-dash .text--base,
.p2p-dash a.text--base {
  color: #ecc46c !important;
}

body.pw-app-site .btn--base,
body.pw-app-site .cmn-btn,
body.pw-app-site .wlfi-btn--primary,
body.pw-app-site .bn-btn--gold,
.p2p-dash .btn--base {
  color: #000 !important;
}

body.pw-app-site .badge--buy,
body.pw-app-site .badge--success,
.p2p-dash .badge--success {
  color: #86efac !important;
}

body.pw-app-site .badge--sell {
  color: #f1dc9d !important;
}

body.pw-app-site .badge--danger,
.p2p-dash .badge--danger,
.p2p-dash .text-danger {
  color: #fca5a5 !important;
}

body.pw-app-site a:not(.btn):not(.nav-link):not(.pw-user-nav__item):not(.text--base) {
  color: #ffffff;
}

/* Exclude .is-active/.active pill-style tabs (e.g. .pw-trade-nav__item.is-active,
   .pw-user-nav__item.is-active, .p2p-wallets__chip.is-active) - these render a
   solid gold background for their selected state, so forcing gold text here
   made the label unreadable on hover (gold-on-gold). Those components already
   set their own high-contrast hover/active colors above. */
body.pw-app-site a:not(.btn):not(.nav-link):not(.is-active):not(.active):hover {
  color: #ecc46c !important;
}

/* Home page Plasma sections */
body.home-page .wlfi-section-head p,
body.home-page .wlfi-feature__text,
body.home-page .wlfi-testimonial-card__text,
body.home-page .wlfi-faq__a p,
body.home-page .bn-prose p,
body.home-page .bn-prose li {
  color: #ffffff !important;
}

/* ==========================================================================
   Batch 6 — Disputes & static pages alignment
   ========================================================================== */

/* Breadcrumb — centered title per wlfi-breadcrumb */
.bn-inner-hero.wlfi-breadcrumb {
  text-align: center;
}

.wlfi-breadcrumb__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.wlfi-breadcrumb .page-title {
  width: 100%;
  text-align: center;
  margin: 0;
}

/* Dispute meta dl/dt/dd grid */
.trd-dispute-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 0;
}

.trd-dispute-meta > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.trd-dispute-meta__wide {
  grid-column: 1 / -1;
}

.trd-dispute-meta dt {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bitnnock-muted, #9ca3af);
}

.trd-dispute-meta dd {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.45;
  word-break: break-word;
}

.trd-list-panel--cards-only .trd-list-cards,
.trd-list-panel:not(.trd-list-responsive) .trd-list-cards {
  display: grid !important;
}

.trd-list-panel--cards-only .trd-list-table-wrap {
  display: none !important;
}

.trd-list-subsection {
  margin-top: 1.5rem;
}

.trd-list-title--sm {
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}

.trd-list-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bitnnock-line, rgba(255, 255, 255, 0.08));
}

.trd-list-card__foot--spaced {
  margin-top: 1.5rem;
}

.trd-list-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bitnnock-gold, #ecc46c) !important;
  text-decoration: none !important;
  transition: color 0.2s;
}

.trd-list-card__link:hover {
  color: #fff !important;
}

.trd-list-empty__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
}

/* Contact — equal-height two-column cards */
.wlfi-contact .bn-contact-grid--equal {
  align-items: stretch;
}

.wlfi-contact .bn-contact-card--form,
.wlfi-contact .bn-contact-card--aside {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.wlfi-contact__aside {
  min-height: 0;
}

/* FAQ accordion — full width stack */
.wlfi-faq-layout--full {
  grid-template-columns: 1fr !important;
}

.wlfi-faq-layout--full .wlfi-faq {
  width: 100%;
}

.wlfi-section-head--left {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

/* Footer — stacked mobile, aligned columns desktop */
.wlf-footer__grid {
  grid-template-columns: 1fr;
}

.wlf-footer__col {
  min-width: 0;
}

@media (min-width: 576px) {
  .wlf-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .wlf-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
  }
}

/* Static CMS pages — consistent shell padding with breadcrumb */
body.pw-app-site .wlfi-cms-page.bn-page {
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

@media (max-width: 991px) {
  .pw-home #main,
  .pw-home .pw-plasma-shell,
  .pw-home .section#buy-sell {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pw-home .pw-marketing .w-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .wlfi-cms-page .wlfi-wrap {
    max-width: calc(100% - 2.5rem);
  }

  .wlfi-cms-page__wrap {
    padding-inline: clamp(1rem, 3vw, 1.5rem);
  }

  .wlfi-cms-page .wlfi-section {
    padding-inline: clamp(1rem, 3vw, 1.5rem);
  }

  .p2p-dash__wrap,
  .bn-trd-wrap,
  .trd-live-wrap,
  .wlfi-contact__wrap,
  .wlfi-kyc__wrap,
  .wlfi-tkt__wrap,
  .wlfi-stk__wrap,
  .wlfi-ref__wrap {
    padding-inline: clamp(0.875rem, 3vw, 1.25rem);
  }

  .wlfi-contact .wlfi-section {
    padding-inline: clamp(1rem, 3vw, 1.5rem);
  }

  .bn-page--market.bn-market--browse .p2p-dash__wrap {
    padding-inline: clamp(0.875rem, 3vw, 1.25rem);
  }
}

/* Prevent stray wide tables/inputs from causing horizontal page scroll */
body.pw-app-site,
body.pw-app {
  overflow-x: clip;
}

body.pw-app-site.bn-ad-wizard-select2-open,
body.pw-app.bn-ad-wizard-select2-open,
body.pw-app-site.pw-app-select2-open,
body.pw-app.pw-app-select2-open,
.bn-ad--wizard.bn-ad-wizard-select2-open,
.pw-app.pw-app-select2-open,
.p2p-dash.pw-app-select2-open {
  overflow: visible;
}

.wlfi-cms-page--sections .wlfi-section:first-child {
  border-top: none;
}

body.pw-app-site .bn-maintenance {
  min-height: calc(100vh - 72px);
}

@media (max-width: 767px) {
  .trd-dispute-meta {
    grid-template-columns: 1fr;
  }

  .wlfi-contact .bn-contact-grid--equal {
    gap: 1.25rem;
  }
}

/* Trade request page — neutralize legacy main.css white form card on Plasma */
body.pw-app-site .trd-page .trade-request-form {
  padding: 1.5rem 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--bitnnock-line, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.pw-app-site .trd-page .trade-request-details-list {
  padding: 0 !important;
  background: transparent !important;
}

body.pw-app-site .trd-page .trade-request-details-list li {
  border-bottom: 1px solid var(--bitnnock-line, rgba(255, 255, 255, 0.1)) !important;
}

body.pw-app-site .trd-page .trade-request-form .trd-label,
body.pw-app-site .trd-page .trade-request-form .trd-form-title,
body.pw-app-site .trd-page .trade-request-form .trd-hint,
body.pw-app-site .trd-page .trade-request-form .trd-field-note {
  color: var(--bitnnock-muted, #e7e5e4) !important;
}

body.pw-app-site .trd-page .trade-request-form .trd-form-title {
  color: #ffffff !important;
}

/* Trade details live chat — neutralize legacy main.css white chat card */
body.pw-app-site .trd-live .chat-box,
body.pw-app-site .trd-live-chat .chat-box.trd-chat {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.pw-app-site .trd-live .chat-box__header {
  background: rgba(19, 16, 13, 0.35) !important;
  border-bottom: 1px solid var(--bitnnock-line, rgba(255, 255, 255, 0.1)) !important;
}

body.pw-app-site .trd-live .chat-box__thread {
  background: transparent !important;
}

body.pw-app-site .trd-live .chat-box__footer {
  background: rgba(19, 16, 13, 0.35) !important;
}

body.pw-app-site .trd-live .single-message.message--left .message-content,
body.pw-app-site .trd-live .single-message.message--right .message-content {
  background: transparent !important;
  border: none !important;
}

body.pw-app-site .trd-live .single-message .message-text {
  color: #e7e5e4 !important;
}

body.pw-app-site .trd-live .single-message .message-time {
  color: #a8a29e !important;
}

body.pw-app-site .trd-live .chat-author .content .name {
  color: var(--bitnnock-gold, #ecc46c) !important;
}

/* Legacy main.css white cards — global Plasma safety net */
body.pw-app-site .create-trade-form,
body.pw-app-site .trade-request-form:not(.trd-page .trade-request-form) {
  background: transparent !important;
  box-shadow: none !important;
}

body.pw-app-site .chat-box:not(.trd-chat) {
  background: var(--bitnnock-surface, #1c1712) !important;
  color: var(--bitnnock-text, #fff) !important;
  border: 1px solid var(--bitnnock-line, rgba(255, 255, 255, 0.1)) !important;
}

body.pw-app-site .chat-box:not(.trd-chat) .chat-box__header,
body.pw-app-site .chat-box:not(.trd-chat) .chat-box__footer {
  /* Matches the box's own surface — was identical to the box (#000000 vs
     #000000) pre-warming, kept identical here rather than introducing a new
     two-tone relationship that wasn't there before. */
  background: var(--bitnnock-surface, #1c1712) !important;
  border-color: var(--bitnnock-line, rgba(255, 255, 255, 0.1)) !important;
}

body.pw-app-site .chat-box:not(.trd-chat) .chat-box__thread {
  background: transparent !important;
}

body.pw-app-site .trd-widget__copy--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(19, 16, 13, 0.35);
  color: #fff !important;
}

/* Site page canvas — warm dark-brown background throughout (matches
   worldlibertyfinancial.com's #171412 resting page background rather than
   neutral black). This html/body !important rule is the single most
   authoritative page-background declaration on the site. */
:root {
  --bn-page-canvas: #13100d;
}

html,
body,
body.pw-app-site,
html:has(body.pw-app-site),
body.home-page,
html:has(body.home-page),
body:has(.pw-home),
html:has(.pw-home),
.page-wrapper,
.body-bg,
.schwab-main-wrapper,
.schwab-content-area {
  background: #13100d !important;
  background-color: #13100d !important;
}

body.pw-app-site .page-wrapper,
body.pw-app-site .section--bg,
body.pw-app-site .section--xl,
body.pw-app-site .account-section {
  background: transparent !important;
}

/* Full-page shells — transparent so the black canvas shows through */
.pw-app,
.p2p-dash,
.pw-home,
.wlf-auth,
.bn-page,
.bn-maintenance,
.dash-shell,
.bn-ad-shell,
.bn-trd-shell,
.bn-rev-shell,
.trd-shell,
.trd-live-shell,
.trd-list-shell,
.trd-live,
.bn-market-search,
.bn-prose-wrap {
  background: transparent !important;
}

/* Page canvas tokens — warm dark-brown bg; warm-lifted surfaces on panels */
:root,
body.pw-app-site,
body.pw-app-site .pw-app,
.p2p-dash,
.trd-live,
.trd-list,
.bn-ad-shell,
.bn-trd-shell,
.bn-rev-shell,
.dash-shell {
  --bn-bg: #13100d;
  --wlfi-bg: #13100d;
  --p2p-bg: #13100d;
  --bn-surface: #1c1712;
  --bn-surface-2: #221c15;
}

body.home-page .pw-home {
  background: #13100d !important;
}

.pw-marketing,
.pw-marketplace,
.pw-embedded,
.pw-home .wlfi-tools {
  background: transparent !important;
}

.pw-live-bridge {
  background: var(--bn-panel-gradient) !important;
}

.pw-home .pw-marketplace-hub {
  background: radial-gradient(ellipse 80% 45% at 50% 0%, rgba(236, 196, 108, 0.1), transparent 68%), var(--bn-panel-gradient) !important;
}

.trd-live-shell,
.trd-list-shell,
.bn-trd-shell,
.bn-ad-shell,
.bn-rev-shell,
.dash-shell,
.p2p-dash {
  background: transparent !important;
}

/* ==========================================================================
   Section depth — 3D elevation & readable section separation
   Section depth — borders on black canvas (no grey panels)
   ========================================================================== */

:root {
  /* Flattened from a beveled-edge/multi-layer-shadow "elevation" system
     to a plain hairline border, matching a clean reference fintech site
     (worldlibertyfinancial.com) where cards carry almost no shadow at
     rest and hover only brightens the border - no lift, no glow, no
     inset highlight/shade pair faking a raised bevel. border-top no
     longer differs from the base border color for the same reason.

     "Almost no shadow" turned out to read as "no visible container" once
     combined with a fill that was literally identical to the page
     background - a single soft, neutral drop shadow (no inset lines, no
     color) restored below gives just enough separation from the page to
     read as solid without bringing back the old raised-bevel look. */
  --bn-elev-border: rgba(255, 255, 255, 0.16);
  --bn-elev-border-strong: rgba(255, 255, 255, 0.22);
  --bn-elev-border-top: rgba(255, 255, 255, 0.16);
  --bn-elev-rim: rgba(236, 196, 108, 0.32);
  --bn-elev-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --bn-elev-shadow-md: 0 4px 18px rgba(0, 0, 0, 0.45);
  --bn-elev-shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.5);
  --bn-elev-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.55);
  --bn-elev-shadow-hover: 0 8px 26px rgba(0, 0, 0, 0.5);
  /* Warm-lifted to match --bitnnock-surface/-2 - this is the primary
     card/panel fill token used across the app shell (p2p-dash, trd-*,
     bn-ad-*, bn-rev-*, etc.), so it needs the same warm-brown treatment
     as every other surface token, not the old neutral #121214/#17171a. */
  --bn-panel-gradient: #1c1712;
  --bn-panel-gradient-hover: #221c15;
  --bn-section-band-a: #13100d;
  --bn-section-band-b: #13100d;
  --bn-section-band-c: #13100d;
  /* This is pure interior breathing room INSIDE each section's own opaque
     panel (top/bottom padding around its heading/content) - it stacks with
     the separate inter-section margin-bottom below (the "canvas reveal"
     strip) at every section boundary, so the two values are never seen in
     isolation. This used to be clamp(4rem,8vw,7rem) - reasonable-looking on
     its own, but added to the old 3-6vw margin below it, a single section
     boundary could eat 200-300px of a short/medium desktop viewport in
     pure dead space before any real content appeared. Trimmed so the pair
     reads as generous, deliberate spacing instead of an accidental gap
     that makes the page look broken or unfinished on short windows. */
  --bn-section-gap: clamp(2.75rem, 5vw, 4.5rem);
  --bn-section-inset: clamp(0.75rem, 3vw, 2rem);
  --bn-panel-radius: 16px;
  --bn-depth-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── App pages: floating 3D panels ── */
.p2p-dash__panel,
.trd-live-panel,
.bn-ad-panel,
.trd-review__card,
.trd-live-review--prominent .trd-review__card,
body.pw-app-site .bn-contact-card,
body.pw-app-site .bn-page .custom--card:not(.bn-ad-index-list .custom--card),
.p2p-dash__stat,
.bn-rev-card {
  border: 1px solid var(--bn-elev-border) !important;
  border-top-color: var(--bn-elev-border-top) !important;
  border-radius: var(--bn-panel-radius) !important;
  box-shadow: var(--bn-elev-shadow-md) !important;
  transition:
    transform 0.28s var(--bn-depth-ease),
    box-shadow 0.28s var(--bn-depth-ease),
    border-color 0.28s var(--bn-depth-ease);
}

.p2p-dash__panel {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem) !important;
  background: var(--bn-panel-gradient) !important;
}

.trd-live-panel {
  background: var(--bn-panel-gradient) !important;
}

.bn-ad-panel {
  background: var(--bn-panel-gradient) !important;
}

.trd-review__card,
.bn-rev-card {
  background: var(--bn-panel-gradient) !important;
}

/* .p2p-dash__panel itself intentionally excluded: it's the generic section
   wrapper used for plain content/form containers (filters, "how much do you
   want to buy" forms, offer summaries, profile cards, etc.) across every
   dashboard page - never a single clickable unit on its own. Brightening its
   border gold + lifting it 2px on hover made static, non-clickable boxes
   look like buttons (any hover inside them, even over blank padding or
   labels, lit the whole panel up), which read as a rendering bug rather
   than an affordance. The classes below are genuinely card-like, individually
   clickable/interactive components, so they keep the hover treatment. */
.trd-live-panel:hover,
.bn-ad-panel:hover,
.trd-review__card:hover,
body.pw-app-site .bn-contact-card:hover,
.bn-rev-card:hover {
  box-shadow: var(--bn-elev-shadow-hover) !important;
  border-color: var(--bn-elev-rim) !important;
}

.p2p-dash__panel-head,
.trd-live-panel__head,
.bn-ad-panel--steps {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 100%);
}

.p2p-dash__grid {
  gap: clamp(1.25rem, 2.5vw, 2rem) !important;
}

.trd-live-grid {
  gap: clamp(1.25rem, 2.5vw, 2rem) !important;
}

/* ── Homepage: floating 3D section slabs on black canvas ── */
.pw-home .pw-marketing,
.pw-home .pw-marketplace,
.pw-home .pw-embedded {
  background: transparent !important;
}

/*
 * z-index: 7 here (> the Living Ledger canvas's z-index: 6, see
 * bn-ambient-background.css) makes every section its own opaque surface
 * that occludes the canvas, instead of the canvas's continuous
 * mix-blend-mode: screen animation painting over each section's
 * background forever. This used to be section-9-only, added after that
 * one section got reported as having a "changing"/"two-tone" background;
 * investigating further showed the same canvas-blend drift (7-12 RGB
 * values, confirmed by sampling the same pixel repeatedly over a few
 * seconds with no interaction) measurably affects every section's plain
 * background, not just that one - section-9 just has an unusually large
 * plain area for it to be visible against. Fixing it section-by-section
 * as each one got reported was chasing symptoms of the same root cause;
 * this occludes the canvas for every section once, at the source. Only
 * #buy-sell (the hero) is deliberately excluded - it's the one place
 * the animation is actually meant to be seen doing its thing.
 */
.pw-home [data-pw-section]:not(#live-terminal):not(#buy-sell) {
  position: relative;
  isolation: isolate;
  z-index: 7;
  padding-top: var(--bn-section-gap) !important;
  padding-bottom: var(--bn-section-gap) !important;
}

.pw-home #live-terminal[data-pw-section] {
  position: relative;
  isolation: isolate;
  z-index: 7;
}

.pw-home [data-pw-section]:not(#buy-sell):not(#live-terminal):not(.wlfi-offers) {
  margin-inline: var(--bn-section-inset);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding-inline: clamp(1rem, 3vw, 2rem);
  border-radius: calc(var(--bn-panel-radius) + 6px);
  /* Uniform border on all four sides - was a lighter top-edge tint (a
     leftover rim-highlight from the old beveled slab look) that no longer
     matches the flat hairline-border treatment used everywhere else. */
  border: 1px solid var(--bn-elev-border-strong);
  /* Left transparent on purpose: user prefers the Living Ledger canvas
     visible through every section, not just the gaps between them (like
     #buy-sell already does). z-index:7 above (still present, unchanged)
     keeps this from ever being painted OVER by the canvas - it just no
     longer paints an opaque fill that would hide the canvas from behind. */
  box-shadow: var(--bn-elev-shadow-xl);
  transition:
    box-shadow 0.35s var(--bn-depth-ease),
    border-color 0.35s var(--bn-depth-ease);
}

.pw-home [data-pw-section]:not(#buy-sell):not(#live-terminal):hover {
  box-shadow: var(--bn-elev-shadow-hover);
  border-color: var(--bn-elev-rim);
}

.pw-home [data-pw-section] > * {
  position: relative;
  z-index: 1;
}

.pw-home #buy-sell {
  padding-top: calc(7.25rem + env(safe-area-inset-top, 0px)) !important;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

/* Legacy band fills — inherit from floating slab, no flat override */
.pw-home .pw-marketing .section-9,
.pw-home .wlfi-partners,
.pw-home .wlfi-markets,
.pw-home .pw-marketplace-hub,
.pw-home .pw-marketing .section-10,
.pw-home .pw-marketing .section-11,
.pw-home .pw-trade-finder,
.pw-home .wlfi-products,
.pw-home .wlfi-join,
.pw-home .wlfi-tools {
  background: transparent !important;
  box-shadow: none !important;
}

.pw-home .pw-marketing .section-10 {
  box-shadow: none !important;
}

/* Section headings — accent underline */
.pw-home .wlfi-section-head::after,
.pw-home .pw-features-headline::after,
.pw-home .heading-9-copy._10::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 1rem auto 0;
  border-radius: 999px;
  /* Flat solid gold, no glow - matches the hairline/no-bevel treatment
     applied to every other gradient+glow accent on the site. */
  background: var(--bitnnock-gold);
}

.pw-home .wlfi-section-head--left::after,
.pw-home .wlfi-heading-md--left + .wlfi-subheading--left ~ *::after {
  margin-inline: 0;
}

/* 3D cards — homepage + nested tiles */
.pw-home .pw-feature-card,
.pw-home .pw-marketplace-hub__highlight,
.pw-home .wlfi-how__item,
.pw-home .pw-form-panel,
.pw-home .wlfi-card,
.pw-home .wlfi-markets__row,
.pw-home .wlfi-tool,
.pw-home .wlfi-review,
.pw-home .wlfi-faq__item,
.pw-home .wlfi-choose__item,
.pw-home .wlfi-overview-strip__item,
.pw-home .wlfi-testimonial-card,
.pw-home .wlfi-terminal,
.pw-home .pw-terminal-section .wlfi-terminal {
  border: 1px solid var(--bn-elev-border) !important;
  border-top-color: var(--bn-elev-border-top) !important;
  border-radius: var(--bn-panel-radius) !important;
  box-shadow: var(--bn-elev-shadow-md) !important;
  background: var(--bn-panel-gradient) !important;
  transition:
    box-shadow 0.3s var(--bn-depth-ease),
    border-color 0.3s var(--bn-depth-ease),
    background 0.3s var(--bn-depth-ease);
}

.pw-home .pw-feature-card:hover,
.pw-home .pw-marketplace-hub__highlight:hover,
.pw-home .wlfi-how__item:hover,
.pw-home .wlfi-card:hover,
.pw-home .wlfi-markets__row:hover,
.pw-home .wlfi-tool:hover,
.pw-home .wlfi-review:hover,
.pw-home .wlfi-faq__item:hover,
.pw-home .wlfi-choose__item:hover {
  box-shadow: var(--bn-elev-shadow-hover) !important;
  border-color: var(--bn-elev-rim) !important;
}

.pw-home .pw-form-panel {
  padding: clamp(1.25rem, 3vw, 2rem) !important;
  margin-top: clamp(1rem, 2.5vw, 1.75rem) !important;
}

/* Marketplace widget panel inside homepage */
.pw-home .pw-marketplace .bn-ads-widget .bn-ads-panel {
  border: 1px solid var(--bn-elev-border-strong) !important;
  border-top-color: var(--bn-elev-border-top) !important;
  box-shadow: var(--bn-elev-shadow-lg) !important;
  background: var(--bn-panel-gradient) !important;
}

.pw-home .pw-live-bridge {
  margin-inline: var(--bn-section-inset);
  border-radius: var(--bn-panel-radius);
  border: 1px solid var(--bn-elev-border);
  box-shadow: var(--bn-elev-shadow-md);
  background: var(--bn-panel-gradient) !important;
}

/* Inner app section titles — higher contrast */
.p2p-dash__panel-title,
.trd-live-title,
.bn-ad-head__title,
.trd-review__title,
.pw-home .wlfi-heading-md,
.pw-home .wlfi-section-head h2,
.pw-home .heading-9-copy {
  letter-spacing: -0.01em;
  color: #ffffff !important;
}

.p2p-dash__panel-desc,
.trd-live-subtitle,
.trd-review__lead,
.pw-home .wlfi-subheading,
.pw-home .paragraph {
  opacity: 1;
  color: #d4d4d8 !important;
}

@media (prefers-reduced-motion: reduce) {
  .p2p-dash__panel,
  .trd-live-panel,
  .bn-ad-panel,
  .trd-review__card,
  .pw-home [data-pw-section]:not(#buy-sell):not(#live-terminal),
  .pw-home .pw-feature-card,
  .pw-home .pw-marketplace-hub__highlight,
  .pw-home .wlfi-how__item,
  .pw-home .wlfi-card,
  .pw-home .wlfi-markets__row,
  .pw-home .wlfi-tool,
  .pw-home .wlfi-faq__item {
    transition: none !important;
  }

  .p2p-dash__panel:hover,
  .trd-live-panel:hover,
  .bn-ad-panel:hover,
  .pw-home [data-pw-section]:not(#buy-sell):not(#live-terminal):hover,
  .pw-home .pw-feature-card:hover,
  .pw-home .pw-marketplace-hub__highlight:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   Mobile + tablet — color parity (matches desktop theme)
   Warm canvas + header; warm panels on all breakpoints
   ========================================================================== */

/* Tablet (768px–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  html,
  body,
  body.home-page,
  body.pw-app-site,
  body:has(.pw-home),
  .pw-plasma-shell .navbar_component {
    background-color: #13100d !important;
  }

  .pw-home [data-pw-section]:not(#buy-sell):not(#live-terminal) {
    margin-inline: clamp(1rem, 2.5vw, 1.75rem);
    box-shadow: var(--bn-elev-shadow-lg);
  }

  .pw-home .text-block-5,
  .pw-home .text-block-6:not(.pw-dashboard-sub),
  .pw-home .text-block-7,
  .pw-home .text-block-8,
  .pw-home .text-block-9,
  .pw-home .text-block-10,
  .pw-home .wlfi-subheading,
  .pw-home .paragraph {
    color: #d1d1d6 !important;
  }

  .p2p-dash__panel,
  .trd-live-panel,
  .bn-ad-panel,
  body.pw-app-site .custom--card,
  body.pw-app-site .bn-ads-widget .bn-ads-panel {
    background: var(--bn-panel-gradient) !important;
    box-shadow: var(--bn-elev-shadow-md) !important;
  }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
  :root {
    --bn-section-inset: clamp(0.5rem, 2.5vw, 1rem);
    --bn-section-gap: clamp(2.25rem, 6vw, 3.5rem);
  }

  /* Page canvas + header stay on the warm dark-brown base */
  html,
  body,
  body.pw-app-site,
  body.home-page,
  body:has(.pw-home),
  html body:has(.pw-home),
  .pw-plasma-shell .navbar_component,
  .pw-unified-nav.navbar_component {
    background-color: #13100d !important;
  }

  body.pw-app-site .page-wrapper,
  body:has(.pw-home) .page-wrapper,
  .pw-home {
    background: transparent !important;
  }

  /* Homepage floating section slabs */
  .pw-home [data-pw-section]:not(#buy-sell):not(#live-terminal) {
    margin-inline: var(--bn-section-inset);
    margin-bottom: clamp(0.875rem, 2.5vw, 1.25rem);
    padding-inline: clamp(0.75rem, 3vw, 1.25rem);
    padding-top: var(--bn-section-gap) !important;
    padding-bottom: var(--bn-section-gap) !important;
    border-radius: calc(var(--bn-panel-radius) + 2px);
    border-color: var(--bn-elev-border-strong);
    box-shadow: var(--bn-elev-shadow-lg);
  }

  .pw-home #buy-sell {
    margin-inline: 0;
    border-radius: 0;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    background: transparent !important;
  }

  .pw-home .pw-marketing,
  .pw-home .pw-marketplace,
  .pw-home .pw-embedded {
    background: transparent !important;
  }

  .pw-home .pw-live-bridge {
    margin-inline: var(--bn-section-inset);
    background: var(--bn-panel-gradient) !important;
    border: 1px solid var(--bn-elev-border) !important;
    box-shadow: var(--bn-elev-shadow-md) !important;
  }

  /* Nested cards — keep 3D on small screens (no hover tilt) */
  .pw-home .pw-feature-card,
  .pw-home .pw-marketplace-hub__highlight,
  .pw-home .wlfi-how__item,
  .pw-home .wlfi-card,
  .pw-home .wlfi-markets__row,
  .pw-home .wlfi-tool,
  .pw-home .wlfi-faq__item,
  .pw-home .wlfi-review,
  .pw-home .pw-form-panel {
    background: var(--bn-panel-gradient) !important;
    border: 1px solid var(--bn-elev-border) !important;
    border-top-color: var(--bn-elev-border-top) !important;
    box-shadow: var(--bn-elev-shadow-sm) !important;
  }

  /* Brighter muted text on small screens (outdoor / low brightness) */
  .pw-home .text-block-5,
  .pw-home .text-block-6:not(.pw-dashboard-sub),
  .pw-home .text-block-7,
  .pw-home .text-block-8,
  .pw-home .text-block-9,
  .pw-home .text-block-10,
  .pw-home .wlfi-subheading,
  .pw-home .paragraph,
  body.home-page .text-muted,
  body.pw-app-site .text-muted {
    color: #d1d1d6 !important;
  }

  .pw-home .wlfi-heading-md,
  .pw-home .heading-9-copy,
  .p2p-dash__panel-title,
  .trd-live-title {
    color: #ffffff !important;
  }

  /* App panels + cards */
  .p2p-dash__panel,
  .trd-live-panel,
  .bn-ad-panel,
  .trd-review__card,
  .p2p-dash__stat,
  body.pw-app-site .custom--card,
  body.pw-app-site .card.custom--card,
  body.pw-app-site .bn-ads-widget .bn-ads-panel,
  body.pw-app-site .bn-market-search__panel,
  body.pw-app-site .trd-list-card,
  body.pw-app-site .wlf-auth__card,
  body.pw-app-site .modal-content,
  body.pw-app-site .bn-contact-card {
    background: var(--bn-panel-gradient) !important;
    border: 1px solid var(--bn-elev-border) !important;
    border-top-color: var(--bn-elev-border-top) !important;
    box-shadow: var(--bn-elev-shadow-md) !important;
  }

  body.pw-app-site .wlfi-breadcrumb,
  body.pw-app-site .bn-market-search {
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(236, 196, 108, 0.1), transparent 70%), var(--bn-panel-gradient) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4) !important;
  }

  .bn-page--market.bn-market--browse .bn-market__hero,
  body.pw-app-site .bn-page--market.bn-market--browse {
    background: transparent !important;
  }

  body.pw-app-site .bn-page--market.bn-market--browse .bn-market__hero {
    background:
      radial-gradient(ellipse 80% 60% at 100% 0%, rgba(236, 196, 108, 0.12), transparent 55%),
      var(--bn-panel-gradient) !important;
    border: 1px solid var(--bn-elev-border) !important;
    box-shadow: var(--bn-elev-shadow-md) !important;
  }

  /* Legacy main.css white / aliceblue rows on mobile tables */
  body.pw-app-site .table-responsive--lg tbody tr:nth-child(odd),
  body.pw-app-site .table-responsive--lg tbody tr:nth-child(even),
  body.pw-app-site .table-responsive--md tbody tr:nth-child(odd),
  body.pw-app-site .table-responsive--md tbody tr:nth-child(even),
  .p2p-dash .table-responsive--md tbody tr:nth-child(odd),
  .p2p-dash .table-responsive--md tbody tr:nth-child(even) {
    background-color: var(--bitnnock-surface) !important;
  }

  body.pw-app-site .table-responsive--lg tbody tr:nth-child(odd),
  .p2p-dash .table-responsive--md tbody tr:nth-child(odd) {
    background-color: var(--bitnnock-surface) !important;
  }

  body.pw-app-site .table-responsive--lg tr th,
  body.pw-app-site .table-responsive--lg tr td,
  body.pw-app-site .table-responsive--md tr th,
  body.pw-app-site .table-responsive--md tr td {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  body.pw-app-site .table-responsive--lg [data-label]::before {
    color: #c4c4c8 !important;
  }

  /* Select2 / dropdowns on touch devices */
  body.pw-app-site .select2-dropdown,
  .pw-home .select2-dropdown,
  body.pw-app-site .bn-ad-step__switcher-list,
  body.pw-app-site .currency_switcher__list {
    background: var(--bitnnock-surface) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  body.pw-app-site .select2-results__option--selectable,
  .pw-home .select2-results__option--selectable {
    color: #ffffff !important;
  }

  /* Mobile nav drawer — dark chrome (header family) */
  .pw-plasma-drawer {
    background: var(--bitnnock-surface) !important;
    border-left-color: rgba(255, 255, 255, 0.12) !important;
  }

  .footer-section {
    background: var(--bn-panel-gradient) !important;
    border-top-color: var(--bn-elev-border-strong) !important;
  }
}

/* Small phones (≤479px) */
@media (max-width: 479px) {
  .pw-home [data-pw-section]:not(#buy-sell):not(#live-terminal) {
    margin-inline: 0.375rem;
    border-radius: 16px;
  }

  .pw-home .pw-feature-card {
    height: auto;
    min-height: 420px;
    padding: 1.5rem 1.25rem;
  }

  .p2p-dash__panel,
  body.pw-app-site .custom--card,
  body.pw-app-site .bn-ads-widget .bn-ads-panel {
    border-radius: 16px !important;
  }
}

/* ==========================================================================
   Dark theme — eliminate invisible black / near-black text
   Keeps #000 only on light or gradient surfaces (primary buttons, badges).
   ========================================================================== */

body.pw-app-site,
body.home-page {
  --bn-readable-text: #ffffff;
  --bn-readable-muted: #a8a29e;
  --heading-color: 0 0% 100%;
  --body-color: 0 0% 90%;
  --bs-body-color: #ffffff;
  --bs-secondary-color: #a8a29e;
  --bs-emphasis-color: #ffffff;
}

/* Bootstrap + legacy dark text utilities */
body.pw-app-site .text-dark,
body.pw-app-site .text-black,
body.pw-app-site .text-body,
body.pw-app-site .text-reset,
body.pw-app-site .text--dark,
body.pw-app-site .text--black,
body.pw-app-site [class*="text-dark"],
body.pw-app-site [class*="text-black"],
body.home-page .text-dark,
body.home-page .text-black,
body.home-page .text-body,
body.home-page .text-reset,
body.home-page .text--dark,
body.home-page .text--black,
body.home-page [class*="text-dark"],
body.home-page [class*="text-black"],
.pw-home .text-dark,
.pw-home .text-black,
.pw-home .text--dark,
.pw-home .text--black {
  color: var(--bn-readable-text) !important;
}

body.pw-app-site .text-muted,
body.pw-app-site .text-secondary,
body.pw-app-site .text--secondary,
body.pw-app-site .text--gray,
body.pw-app-site .h--color,
body.pw-app-site .p--color,
body.home-page .text-muted,
body.home-page .text-secondary,
body.home-page .text--secondary,
body.home-page .h--color,
.pw-home .text-muted,
.pw-home .h--color,
.pw-home .p--color {
  color: var(--bn-readable-muted) !important;
}

body.pw-app-site .badge--dark,
body.home-page .badge--dark,
.pw-home .badge--dark {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: var(--bn-readable-text) !important;
}

/* Homepage — mirror inner-app readable text on all common elements.
   Exclusions added for the offer widget's own purpose-built palette
   (marketplace_ads_list.blade.php, table + card views): the rate value/pair,
   trader avatar and identity labels are deliberately gold/muted rather than
   invisible-black, and .bn-market-ads__table already carries its own
   complete thead/tbody color scheme in wlfi-p2p-sections.css - both would
   otherwise get silently forced to pure white by this rule's very high
   specificity (five :not() clauses each add a class-level specificity
   point) combined with !important. See that file's "Offer row polish" /
   "Mobile/tablet offer card polish" comment blocks for the intended colors. */
body.home-page p,
body.home-page span:not(.badge):not([class*="btn"]):not(.pw-hero-badge__pulse):not(.pw-hero-badge__text):not(.pw-hero-ledger-tag__status):not(.bn-ads-cell__rate-value):not(.bn-ads-cell__rate-pair):not(.bn-trader-avatar):not(.bn-data-card__label),
body.home-page li,
body.home-page dt,
body.home-page dd,
body.home-page label,
body.home-page .form--label,
body.home-page .wlfi-label,
body.home-page h1,
body.home-page h2,
body.home-page h3,
body.home-page h4,
body.home-page h5,
body.home-page h6,
body.home-page .section-title,
body.home-page .card-title,
body.home-page .table:not(.bn-market-ads__table) td,
body.home-page .table:not(.bn-market-ads__table) th,
body.home-page .list-group-item,
.pw-home p,
.pw-home span:not(.badge):not([class*="btn"]):not(.pw-hero-badge__pulse):not(.pw-hero-badge__text):not(.pw-hero-ledger-tag__status):not(.bn-ads-cell__rate-value):not(.bn-ads-cell__rate-pair):not(.bn-trader-avatar):not(.bn-data-card__label),
.pw-home li,
.pw-home dt,
.pw-home dd,
.pw-home label,
.pw-home .wlfi-label,
.pw-home h1,
.pw-home h2,
.pw-home h3,
.pw-home h4,
.pw-home h5,
.pw-home h6,
.pw-home .table:not(.bn-market-ads__table) td,
.pw-home .table:not(.bn-market-ads__table) th {
  color: var(--bn-readable-text) !important;
}

body.home-page [style*="color: #363636"],
body.home-page [style*="color:#363636"],
body.home-page [style*="color: black"]:not(.btn):not([class*="btn--"]),
.pw-home [style*="color: #363636"],
.pw-home [style*="color:#363636"] {
  color: var(--bn-readable-text) !important;
}

body.pw-app-site [style*="color: #000"]:not(.btn):not([class*="btn--"]):not(.wlfi-btn--primary):not(.wlf-btn--gold),
body.pw-app-site [style*="color:#000"]:not(.btn):not([class*="btn--"]):not(.wlfi-btn--primary):not(.wlf-btn--gold),
body.pw-app-site [style*="color: black"]:not(.btn):not([class*="btn--"]),
body.home-page [style*="color: #000"]:not(.btn):not([class*="btn--"]):not(.wlfi-btn--primary),
body.home-page [style*="color:#000"]:not(.btn):not([class*="btn--"]):not(.wlfi-btn--primary),
.pw-home [style*="color: #000"]:not(.btn):not([class*="btn--"]):not(.wlfi-btn--primary),
.pw-home [style*="color:#000"]:not(.btn):not([class*="btn--"]):not(.wlfi-btn--primary) {
  color: var(--bn-readable-text) !important;
}

.pw-home .text-block-9,
body.home-page .text-block-9 {
  color: var(--bn-readable-muted) !important;
}

/* Forms — typed text and placeholders on dark inputs */
body.pw-app-site .form-control,
body.pw-app-site .form--control,
body.pw-app-site .form-select,
body.pw-app-site input.form-control,
body.pw-app-site textarea.form-control,
body.pw-app-site select.form-control,
body.pw-app-site .wlfi-input,
body.pw-app-site .wlfi-textarea,
body.home-page .pw-home .form-control,
body.home-page .pw-home .form--control,
body.home-page .pw-home .wlfi-input,
body.home-page .pw-home .wlfi-textarea,
body.home-page .pw-home select,
.pw-home .form-control,
.pw-home .form--control,
.pw-home .wlfi-input,
.pw-home .wlfi-textarea {
  color: var(--bn-readable-text) !important;
}

body.pw-app-site .form-control::placeholder,
body.pw-app-site .form--control::placeholder,
body.pw-app-site .wlfi-input::placeholder,
body.home-page .pw-home .form-control::placeholder,
body.home-page .pw-home .wlfi-input::placeholder,
.pw-home .form-control::placeholder,
.pw-home .wlfi-input::placeholder {
  color: rgba(168, 162, 158, 0.55) !important;
}

/* Legacy sell-card light select2 — keep dark text on white fields */
body:has(.sell-card:not(.bn-ad-step__card)) .sell-card:not(.bn-ad-step__card) .form-control,
body:has(.sell-card:not(.bn-ad-step__card)) .select2-container--default .select2-selection--single .select2-selection__rendered,
body:has(.sell-card:not(.bn-ad-step__card)) .select2-results__option--selectable {
  color: #111 !important;
}

/* Icons on dark cards — not black */
body.pw-app-site .choose-card__icon i,
body.pw-app-site .account-menu .icon i,
body.home-page .choose-card__icon i,
.pw-home .choose-card__icon i {
  color: var(--bitnnock-gold) !important;
}

/* Dropdowns on dark panels */
body.pw-app-site .dropdown-menu,
body.home-page .dropdown-menu {
  background: var(--bitnnock-surface) !important;
  border-color: var(--bitnnock-line) !important;
  color: var(--bn-readable-text) !important;
}

body.pw-app-site .dropdown-menu .dropdown-item,
body.home-page .dropdown-menu .dropdown-item {
  color: var(--bn-readable-text) !important;
}

body.pw-app-site .dropdown-menu .dropdown-item:focus,
body.home-page .dropdown-menu .dropdown-item:focus {
  background: var(--bitnnock-surface-2) !important;
  color: var(--bn-readable-text) !important;
}

body.pw-app-site .dropdown-menu .dropdown-item:hover,
body.home-page .dropdown-menu .dropdown-item:hover {
  color: var(--bn-readable-text) !important;
}

/* Modals — body copy not black */
body.pw-app-site .modal-content,
body.pw-app-site .modal-body,
body.pw-app-site .modal-body p,
body.pw-app-site .modal-body span:not(.badge):not([class*="btn"]),
body.pw-app-site .modal-body li,
body.pw-app-site .modal-body label,
body.pw-app-site .modal-body td,
body.pw-app-site .modal-body th {
  color: var(--bn-readable-text) !important;
}

/* Preserve black text on gradient / light button surfaces */
body.pw-app-site .btn--base,
body.pw-app-site .btn.btn--base,
body.pw-app-site .cmn-btn,
body.pw-app-site .wlfi-btn--primary,
body.pw-app-site .bn-btn--gold,
body.pw-app-site .bn-cookie__btn,
body.pw-app-site .p2p-sound-unlock__btn--primary,
body.pw-app-site .wlf-auth .wlf-btn--gold,
body.pw-app-site .pw-user-nav__item.is-active,
body.pw-app-site .pw-trade-nav__item.is-active,
body.pw-app-site .pw-trade-nav__item.is-active .pw-trade-nav__badge,
body.pw-app-site .bn-ads-tabs__link.active,
body.pw-app-site .bn-ad-segment__item.is-active,
body.pw-app-site .bn-rev-segment__item.is-active,
body.pw-app-site .bn-ad-step__tab.active,
body.pw-app-site .buy--sell-tab.active,
body.pw-app-site .scroll-to-top,
body.pw-app-site .scroll-to-top .scroll-icon,
body.pw-app-site .p2p-dash__btn--primary,
body.pw-app-site .p2p-dash__action-cta.is-primary,
body.pw-app-site .p2p-dash__copy.is-copied .p2p-dash__copy-btn,
body.pw-app-site .p2p-dash__notify-badge,
body.pw-app-site .p2p-nav-chat-badge,
body.home-page .wlfi-btn--primary,
body.home-page .pw-marketplace .bn-ads-widget .btn--base,
body.home-page .pw-marketplace .bn-ads-widget .bn-ads-more,
.pw-home .wlfi-btn--primary,
.pw-home .pw-marketplace .bn-ads-widget .btn--base,
.pw-home .pw-marketplace .bn-ads-widget .bn-ads-more,
.pw-home .p2p-sound-unlock__btn--primary {
  color: #000 !important;
}

body.pw-app-site .btn--success,
body.pw-app-site .btn.btn--success {
  color: #000 !important;
}

/* ==========================================================================
   Warm surfaces — warm dark-brown theme (matches worldlibertyfinancial.com)
   ========================================================================== */

:root {
  --wlfi-surface: #1c1712;
  --wlfi-surface-2: #221c15;
}

body.pw-app-site {
  --wlfi-surface: #1c1712;
  --wlfi-surface-2: #221c15;
}

/* Inner-page section bands */
body.pw-app-site .wlfi-breadcrumb,
body.pw-app-site .bn-market-search,
body.pw-app-site .bn-maintenance {
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(236, 196, 108, 0.1), transparent 70%), var(--bn-panel-gradient) !important;
}



/* Offer wizard, trade live, chat surfaces */
body.pw-app-site .bn-ad-step__switcher-list,
body.pw-app-site .currency_switcher__list,
body.pw-app-site .bn-ad-step__form .select2-dropdown,
body.pw-app-site .bn-ad-step__form .select2-results__options,
body.pw-app-site .trd-chat__file-label,
body.pw-app-site .wlfi-wdr-table thead th,
body.pw-app-site .wlfi-wdr-asset,
body.pw-app-site .wlfi-wdr-pagination .page-link,
body.pw-app-site .wlf-modal .modal-content,
body.pw-app-site .wlf-auth .select2-dropdown,
body.pw-app-site .wlf-auth--user-data .select2-dropdown {
  background: var(--bitnnock-surface) !important;
}

body.pw-app-site .bn-ad-step__prev,
body.pw-app-site .btn--light.btn--xl,
body.pw-app-site .bn-ad-step__input-group .bn-ad-step__addon,
body.pw-app-site .bn-ad-step__input-group .input-group-text,
body.pw-app-site .bn-ad-step__form .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
body.pw-app-site .bn-ad-step__form .select2-search--dropdown .select2-search__field,
body.pw-app-site .bn-trd-profile__avatar,
body.pw-app-site .trd-live-panel .p2p-trade-steps__dot,
body.pw-app-site .trd-timeline .p2p-trade-steps__dot,
body.pw-app-site .trd-actions__proof-input,
body.pw-app-site .trd-chat__refresh,
body.pw-app-site .trd-chat__bubble,
body.pw-app-site .trd-info__copy,
body.pw-app-site .trd-review__pill,
body.pw-app-site .p2p-dash__copy-btn {
  background: var(--bitnnock-surface) !important;
}

body.pw-app-site .p2p-dash__copy.is-copied .p2p-dash__copy-btn {
  background: var(--p2p-brand, #ecc46c) !important;
}

/* Legacy main.css near-black section fills → warm surface */
body.pw-app-site .account-section,
body.pw-app-site .sidebar,
body.pw-app-site .sidebar-menu-wrapper,
body.pw-app-site .dashboard-sidebar,
body.pw-app-site .d-widget,
body.pw-app-site .ticket .reply-item,
body.pw-app-site .support-card,
body.pw-app-site .contact-wrapper,
body.pw-app-site .faq-wrapper {
  background-color: var(--bitnnock-surface) !important;
}

/* Homepage cards + embedded sections — 3D gradients (not flat grey) */
.pw-home .pw-feature-card,
.pw-home .pw-marketplace-hub__highlight,
.pw-home .wlfi-card,
.pw-home .wlfi-tool,
.pw-home .wlfi-how__item,
.pw-home .wlfi-markets__row,
.pw-home .wlfi-review,
.pw-home .wlfi-faq__item,
.pw-home .wlfi-choose__item,
.pw-home .wlfi-overview-strip__item,
.pw-home .pw-form-panel {
  background: var(--bn-panel-gradient) !important;
  border: 1px solid var(--bn-elev-border) !important;
  border-top-color: var(--bn-elev-border-top) !important;
  box-shadow: var(--bn-elev-shadow-md) !important;
}

.pw-home .pw-marketing,
.pw-home .pw-marketplace,
.pw-home .pw-embedded {
  background: transparent !important;
}

.pw-home .pw-live-bridge,
.pw-home .pw-marketplace-hub {
  background: var(--bn-panel-gradient) !important;
  border: 1px solid var(--bn-elev-border) !important;
  box-shadow: var(--bn-elev-shadow-md) !important;
}

.pw-home .pw-marketplace-hub {
  background: radial-gradient(ellipse 80% 45% at 50% 0%, rgba(236, 196, 108, 0.12), transparent 68%), var(--bn-panel-gradient) !important;
}

/* Header + page canvas stay on the warm dark-brown base — do not grey these */
html,
body,
body.pw-app-site,
body.home-page,
.page-wrapper,
.body-bg,
.schwab-main-wrapper,
.schwab-content-area,
.header,
.header__bottom,
.header.menu-fixed .header__bottom,
.wlf-header,
.header-bottom-area,
.navbar_component,
.pw-plasma-shell .navbar_component,
.pw-unified-nav.navbar_component,
body:has(.pw-home),
html body:has(.pw-home) {
  background-color: #13100d !important;
}

body.pw-app-site .page-wrapper,
body:has(.pw-home) .page-wrapper,
body:has(.pw-home) .body-bg,
body:has(.pw-home) .schwab-main-wrapper,
body:has(.pw-home) .schwab-content-area,
.pw-app,
.p2p-dash,
.pw-home,
.wlf-auth,
.bn-page,
.bn-ad-shell,
.bn-trd-shell,
.bn-rev-shell,
.trd-shell,
.trd-live-shell,
.trd-list-shell,
.trd-live,
.bn-market-search,
.bn-prose-wrap {
  background: transparent !important;
}

body.pw-app-site .pw-plasma-shell .navbar_component,
body.pw-app-site .pw-plasma-shell.pw-plasma-shell--inner .navbar_component,
body.pw-app-site .pw-plasma-shell .navbar_component.is-scrolled,
body.home-page .pw-plasma-shell .navbar_component {
  background-color: rgba(19, 16, 13, 0.92) !important;
}

/* ==========================================================================
   3D + contrast — app pages (cards, lists, auth, footer)
   ========================================================================== */

body.pw-app-site .custom--card,
body.pw-app-site .card.custom--card,
body.pw-app-site .choose-card,
body.pw-app-site .testimonial-card,
body.pw-app-site .bn-ads-widget .bn-ads-panel,
body.pw-app-site .bn-market-search__panel,
body.pw-app-site .trd-list-card,
body.pw-app-site .wlf-auth__card,
body.pw-app-site .wlf-auth__panel,
body.pw-app-site .modal-content,
body.pw-app-site .bn-contact-card,
body.pw-app-site .p2p-dash__stat,
body.pw-app-site .d-widget,
body.pw-app-site .support-card,
body.pw-app-site .ticket .reply-item {
  border: 1px solid var(--bn-elev-border) !important;
  border-top-color: var(--bn-elev-border-top) !important;
  border-radius: var(--bn-panel-radius) !important;
  background: var(--bn-panel-gradient) !important;
  box-shadow: var(--bn-elev-shadow-md) !important;
  transition:
    transform 0.28s var(--bn-depth-ease),
    box-shadow 0.28s var(--bn-depth-ease),
    border-color 0.28s var(--bn-depth-ease);
}

body.pw-app-site .custom--card:hover,
body.pw-app-site .card.custom--card:hover,
body.pw-app-site .choose-card:hover,
body.pw-app-site .bn-ads-widget .bn-ads-panel:hover,
body.pw-app-site .trd-list-card:hover,
body.pw-app-site .bn-contact-card:hover,
body.pw-app-site .p2p-dash__stat:hover {
  border-color: var(--bn-elev-rim) !important;
  box-shadow: var(--bn-elev-shadow-hover) !important;
}

body.pw-app-site .wlfi-breadcrumb,
body.pw-app-site .bn-market-search {
  border-bottom: 1px solid var(--bn-elev-border) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.42) !important;
}

.footer-section {
  border-top: 1px solid var(--bn-elev-border-strong) !important;
  /* Dropped the inset top-edge highlight line - it faked a raised bevel
     edge, which contradicts the flat hairline-border treatment used
     everywhere else. A plain drop shadow is enough separation from the
     content above. */
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45) !important;
  /* footer-section is treated as page canvas, not a container (see the
     "true page/section canvas" rule below, which wins this cascade tie by
     source order) - matches that here instead of leaving a contradictory
     dead declaration. */
  background: #13100d !important;
}

body.pw-app-site .custom--card .card-header,
body.pw-app-site .card.custom--card > .card-header,
body.pw-app-site .bn-ads-widget .bn-ads-panel-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%) !important;
}

body.pw-app-site .text-muted,
body.home-page .text-muted,
.pw-home .wlfi-label,
.pw-home .wlfi-text-secondary {
  color: #c4c4c8 !important;
}

@media (prefers-reduced-motion: reduce) {
  body.pw-app-site .custom--card:hover,
  body.pw-app-site .trd-list-card:hover,
  body.pw-app-site .bn-ads-widget .bn-ads-panel:hover {
    transform: none !important;
  }
}

/* pw-plasma-nav — mobile drawer + footer grey surfaces (not header bar) */
@media (max-width: 767px) {
  .pw-plasma-drawer__link,
  .pw-plasma-drawer__nav > a,
  .pw-plasma-drawer__nav summary {
    color: #f0f0f5 !important;
  }

  .pw-plasma-drawer__link:hover,
  .pw-plasma-drawer__nav > a:hover,
  .pw-plasma-drawer__nav > a:focus-visible {
    color: #ffffff !important;
  }

  .pw-site-footer,
  .pw-site-footer .footer-section {
    background: var(--bn-panel-gradient) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pw-plasma-drawer {
    background: var(--bitnnock-surface) !important;
  }
}

/* ==========================================================================
   Site-wide readability + section layout parity
   Scans/fixes: contrast, legacy main.css leaks, padding stack, flat bg conflicts
   ========================================================================== */

body.pw-app-site,
body.home-page,
.pw-home {
  --bn-readable-text: #ffffff;
  --bn-readable-muted: #a8a29e;
  --bn-readable-dim: #8e8e93;
  --bn-readable-meta: #c4c4c8;
}

/* Linked headings — main.css forces #363636 */
body.pw-app-site h1 > a,
body.pw-app-site h2 > a,
body.pw-app-site h3 > a,
body.pw-app-site h4 > a,
body.pw-app-site h5 > a,
body.pw-app-site h6 > a,
body.home-page h1 > a,
body.home-page h2 > a,
body.home-page h3 > a,
body.home-page h4 > a,
body.home-page h5 > a,
body.home-page h6 > a,
.pw-home h1 > a,
.pw-home h2 > a,
.pw-home h3 > a,
.pw-home h4 > a,
.pw-home h5 > a,
.pw-home h6 > a {
  color: inherit !important;
}

body.pw-app-site h1 > a:hover,
body.pw-app-site h2 > a:hover,
body.home-page h1 > a:hover,
.pw-home h1 > a:hover {
  color: var(--bitnnock-gold, #ecc46c) !important;
}

/* Legacy muted utility classes */
body.pw-app-site .p--color,
body.pw-app-site .h--color,
body.pw-app-site .text--gray,
body.home-page .p--color,
body.home-page .h--color,
.pw-home .p--color,
.pw-home .h--color {
  color: var(--bn-readable-muted) !important;
}

/* Nice-select on dark panels */
body.pw-app-site .nice-select,
body.home-page .nice-select,
.pw-home .nice-select {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--bn-readable-text) !important;
}

body.pw-app-site .nice-select .list,
body.home-page .nice-select .list,
.pw-home .nice-select .list {
  background: var(--bitnnock-surface) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
}

body.pw-app-site .nice-select .option,
body.home-page .nice-select .option,
.pw-home .nice-select .option {
  color: var(--bn-readable-meta) !important;
}

body.pw-app-site .nice-select .option.focus {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--bn-readable-text) !important;
}

body.pw-app-site .nice-select .option:hover,
body.home-page .nice-select .option:hover,
.pw-home .nice-select .option:hover {
  color: var(--bn-readable-text) !important;
}

body.pw-app-site .nice-select .current {
  color: var(--bn-readable-text) !important;
}

/* FAQ / accordion cards on dark pages */
body.pw-app-site .cmn-accordion .card,
body.pw-app-site .accordion .card {
  background: var(--bn-panel-gradient) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--bn-readable-text) !important;
}

body.pw-app-site .cmn-accordion .card-header,
body.pw-app-site .cmn-accordion .card-header .btn,
body.pw-app-site .cmn-accordion .card-header .btn i,
body.pw-app-site .cmn-accordion .card-header .btn span {
  background: transparent !important;
  color: var(--bn-readable-text) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.pw-app-site .cmn-accordion .card-body {
  color: var(--bn-readable-meta) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Nav + footer muted copy */
.pw-plasma-shell .wlf-nav__link,
.pw-plasma-shell .wlf-drop__trigger,
.pw-unified-nav .wlf-nav__link,
.pw-unified-nav__link {
  color: #f0f0f5 !important;
}

.pw-plasma-shell .wlf-nav__link--featured {
  color: #ffffff !important;
}

.pw-plasma-shell .wlf-nav__link:hover,
.pw-unified-nav .wlf-nav__link:hover,
.pw-unified-nav__link:hover {
  color: var(--bn-readable-text) !important;
}

.pw-site-footer .text-block-9,
.pw-site-footer .link-3,
.pw-site-footer__social-link,
.pw-home .text-block-8,
.pw-home .text-block-10,
.pw-home .pw-preloader__text,
.pw-home .wlfi-faq__q::after {
  color: var(--bn-readable-muted) !important;
}

/* Terminal + device mockup labels */
.pw-home .wlfi-terminal__title,
.pw-home .wlfi-terminal__head-title,
.pw-home .wlfi-terminal__status,
.pw-home .wlfi-terminal__head-status,
.pw-home .wlfi-terminal__strip,
.pw-home .wlfi-terminal__progress-pct,
.pw-home .wlfi-terminal__run,
.pw-home .wlfi-terminal__replay,
.pw-home .pw-ui__status,
.pw-home .pw-ui__hero span,
.pw-home .pw-ui__row em,
.pw-home .pw-ui__steps div,
.pw-home .pw-ui__field label,
.pw-home .pw-ui--security small,
.pw-home .pw-terminal-chip__label,
.pw-terminal-section .wlfi-terminal__code .c-dim {
  color: var(--bn-readable-dim) !important;
}

.pw-home .wlfi-terminal__code,
.pw-home .wlfi-terminal__code .c-hi,
.pw-terminal-section .wlfi-terminal__code {
  color: var(--bn-readable-meta) !important;
}

/* Marketplace / ads inactive tabs + table meta */
body.pw-app-site .bn-ads-widget .bn-ads-tabs .nav-link,
body.pw-app-site .bn-ads-widget .bn-ads-tabs .bn-ads-tabs__link,
body.pw-app-site .bn-ads-widget [class*="crypto-currency-"],
body.pw-app-site .bn-ads-tabs__link,
body.pw-app-site .nav-tabs.custom--style-two .nav-link:not(.active) {
  color: var(--bn-readable-muted) !important;
}

body.pw-app-site .bn-ads-widget .table thead th,
body.pw-app-site .bn-ads-widget table thead th,
body.pw-app-site .bn-trd-empty,
body.pw-app-site .bn-ad-empty {
  color: var(--bn-readable-meta) !important;
}

body.pw-app-site .nav-tabs.custom--style-two .nav-link.active {
  color: var(--bn-readable-text) !important;
}

/* Form placeholders — brighter on dark inputs */
body.pw-app-site .form-control::placeholder,
body.pw-app-site .form--control::placeholder,
body.pw-app-site .wlfi-input::placeholder,
body.home-page .form-control::placeholder,
.pw-home .form-control::placeholder,
.pw-home .wlfi-input::placeholder {
  color: rgba(168, 162, 158, 0.72) !important;
  opacity: 1 !important;
}

/* Auth card — solid grey panel */
body.pw-app-site .wlf-auth {
  --bn-surface: rgba(19, 16, 13, 0.96);
}

body.pw-app-site .wlf-auth__card,
body.pw-app-site .wlf-auth__panel {
  background: var(--bn-panel-gradient) !important;
  border: 1px solid var(--bn-elev-border) !important;
  box-shadow: var(--bn-elev-shadow-md) !important;
}

/* ── Homepage layout: collapse triple padding stacks ──
   #buy-sell carries both `.section` and `[data-pw-section]` on the SAME
   element (not a nested wrapper like every other marketing section), so
   the un-scoped selector below was matching it too and stomping its own
   dedicated full-bleed hero sizing further down (min-height: clamp(520px,
   100svh, 960px)) down to height:auto/min-height:0 - collapsing the whole
   hero to just its content's natural height (~420px) instead of the
   intended near-viewport presence, which read as cramped/"clustered". */
.pw-home [data-pw-section] > .section,
.pw-home [data-pw-section].section:not(#buy-sell) {
  padding-block: clamp(1rem, 2.5vw, 2rem) !important;
  padding-inline: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

.pw-home [data-pw-section] .pw-marketing .section-2,
.pw-home [data-pw-section] .pw-marketing .section-3,
.pw-home [data-pw-section] .pw-marketing .section-4,
.pw-home [data-pw-section] .pw-marketing .section-5,
.pw-home [data-pw-section] .pw-marketing .section-6,
.pw-home [data-pw-section] .pw-marketing .section-7,
.pw-home [data-pw-section] .pw-marketing .section-8,
.pw-home [data-pw-section] .pw-marketing .section-9,
.pw-home [data-pw-section] .pw-marketing .section-10,
.pw-home [data-pw-section] .pw-marketing .section-11 {
  padding: clamp(1rem, 2.5vw, 2rem) 0 !important;
  margin-top: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

.pw-home .section-6,
.pw-home .section-8,
.pw-home .section-9 {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Nested sections — no double grey backgrounds */
.pw-home [data-pw-section] .pw-live-bridge,
.pw-home [data-pw-section] .pw-terminal-section,
.pw-home [data-pw-section] .pw-marketplace-hub,
.pw-home [data-pw-section] .wlfi-tools,
.pw-home [data-pw-section] .wlfi-markets,
.pw-home [data-pw-section] .wlfi-products,
.pw-home [data-pw-section] .wlfi-join,
.pw-home [data-pw-section] .wlfi-faq-section,
.pw-home [data-pw-section] .wlfi-governance {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin-inline: 0 !important;
}

.pw-home [data-pw-section] .pw-marketplace-hub {
  padding: clamp(1rem, 2.5vw, 2rem) 0 !important;
}

.pw-home [data-pw-section] .pw-live-bridge {
  margin-inline: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Feature cards — flexible height on tablet */
@media (max-width: 991px) {
  .pw-home .pw-feature-card {
    height: auto !important;
    min-height: 380px;
    padding: clamp(1.25rem, 3vw, 2rem);
  }

  .pw-home .columns-9,
  .pw-home .div-block-11,
  .pw-home .div-block-12 {
    width: 100% !important;
    max-width: 980px;
  }
}

/* CMS / static prose pages */
body.pw-app-site .bn-prose,
body.pw-app-site .bn-prose p,
body.pw-app-site .bn-prose li,
body.pw-app-site .bn-prose td,
body.pw-app-site .bn-prose th,
.wlfi-cms-page p,
.wlfi-cms-page li {
  color: var(--bn-readable-meta) !important;
}

body.pw-app-site .bn-prose h1,
body.pw-app-site .bn-prose h2,
body.pw-app-site .bn-prose h3,
.wlfi-cms-page h1,
.wlfi-cms-page h2,
.wlfi-cms-page h3 {
  color: var(--bn-readable-text) !important;
}

/* Inner-hero breadcrumb subtitle */
body.pw-app-site .inner-hero p,
body.pw-app-site .wlfi-breadcrumb p,
body.pw-app-site .page-breadcrumb li,
body.pw-app-site .page-breadcrumb li a {
  color: var(--bn-readable-muted) !important;
}

body.pw-app-site .page-breadcrumb li a:hover {
  color: var(--bitnnock-gold, #ecc46c) !important;
}

/* Ticket / support threads */
body.pw-app-site .ticket .reply-item,
body.pw-app-site .ticket .reply-item p,
body.pw-app-site .support-card p {
  color: var(--bn-readable-meta) !important;
}

body.pw-app-site .ticket .reply-item .name,
body.pw-app-site .support-card .title {
  color: var(--bn-readable-text) !important;
}

/* Chat meta + timestamps */
body.pw-app-site .trd-chat__time,
body.pw-app-site .trd-chat__meta,
body.pw-app-site .trd-dispute-meta dt {
  color: var(--bn-readable-dim) !important;
}

body.pw-app-site .trd-chat__bubble,
body.pw-app-site .trd-chat__bubble p {
  color: var(--bn-readable-meta) !important;
}

/* Dashboard labels + secondary copy */
.p2p-dash__meta dt,
.p2p-dash__stat-label,
.p2p-dash__panel-desc,
.p2p-dash__trade-meta,
.p2p-dash__notify-time,
.p2p-dash__notify-row small {
  color: var(--bn-readable-muted) !important;
}

.p2p-dash__panel-title,
.p2p-dash__stat-value,
.p2p-dash__notify-row strong {
  color: var(--bn-readable-text) !important;
}

/* ==========================================================================
   Site-wide — warm dark-brown canvas (containers get just enough lift to
   read as solid surfaces instead of outlines)

   Retinted from the neutral near-black values (#0a0a0c/#121214/#17171a) to
   warm dark-brown equivalents matching worldlibertyfinancial.com's resting
   page background (#171412) - this block sits later in the file than the
   :root defaults and the other per-system surface blocks, and matches or
   beats their specificity (:root, body.pw-app-site, body.home-page), so
   without retinting here too, every earlier warm-token fix gets silently
   overwritten back to neutral black by this block. ========================================================================== */

:root,
body.pw-app-site,
body.home-page {
  --bitnnock-bg-soft: #13100d;
  --bitnnock-bg-mid: #13100d;
  --bitnnock-surface: #1c1712;
  --bitnnock-surface-2: #221c15;
  --bn-panel-gradient: #1c1712;
  --bn-panel-gradient-hover: #221c15;
  --bn-surface: #1c1712;
  --bn-surface-2: #221c15;
  --wlfi-surface: #1c1712;
  --wlfi-surface-2: #221c15;
  --p2p-surface: #1c1712;
  --wlfi-bg-secondary: #1c1712;
}

/* True page/section canvas - full-bleed bands that other containers sit
   on top of. These stay at the warm bg token (not the lifted panel token
   below) specifically so the containers in the next rule still have
   something to visually separate from. */
.footer-section,
.pw-site-footer,
.pw-site-footer .footer-section,
.pw-home,
.pw-home .pw-marketing,
.pw-home .pw-marketplace,
.pw-home .pw-embedded,
.pw-home .wlfi-tools,
.pw-home #buy-sell {
  background: #13100d !important;
  background-image: none !important;
}

/* Section shells themselves are left transparent (not #13100d) so the
   Living Ledger canvas shows through them the same way it always has
   for #buy-sell above - user preference is to see it everywhere, not
   just in the gaps between sections. Still occludes nothing it
   shouldn't: z-index:7 (custom.css, near the top of this section list)
   keeps every section painting above the canvas regardless. */
.pw-home [data-pw-section]:not(#live-terminal),
.pw-home [data-pw-section]:not(#buy-sell):not(#live-terminal) {
  background: transparent !important;
  background-image: none !important;
}

/* Actual containers - cards, panels, sidebars, widgets, rows. Was a
   literal #000000 - identical to the page background above - which left
   every one of these with zero fill contrast against the page, nothing
   but a hairline border to read as a "container" at all. Now references
   the lifted surface token so the fix in the :root block above actually
   reaches them. */
.p2p-dash__panel,
.trd-live-panel,
.bn-ad-panel,
.trd-review__card,
.trd-live-review--prominent .trd-review__card,
.p2p-dash__stat,
.bn-rev-card,
body.pw-app-site .custom--card:not(.bn-ad-index-list .custom--card),
body.pw-app-site .card.custom--card,
body.pw-app-site .bn-ads-widget .bn-ads-panel,
body.pw-app-site .bn-market-search__panel,
body.pw-app-site .trd-list-card,
body.pw-app-site .wlf-auth__card,
body.pw-app-site .wlf-auth__panel,
body.pw-app-site .modal-content,
body.pw-app-site .bn-contact-card,
body.pw-app-site .wlfi-breadcrumb,
body.pw-app-site .bn-market-search,
body.pw-app-site .bn-maintenance,
body.pw-app-site .account-section,
body.pw-app-site .sidebar,
body.pw-app-site .sidebar-menu-wrapper,
body.pw-app-site .dashboard-sidebar,
body.pw-app-site .d-widget,
body.pw-app-site .ticket .reply-item,
body.pw-app-site .support-card,
body.pw-app-site .contact-wrapper,
body.pw-app-site .faq-wrapper,
body.pw-app-site .cmn-accordion .card,
body.pw-app-site .accordion .card,
.pw-live-bridge,
.pw-home .pw-live-bridge,
.pw-home .pw-marketplace-hub,
.pw-home .pw-feature-card,
.pw-home .pw-marketplace-hub__highlight,
.pw-home .wlfi-how__item,
.pw-home .pw-form-panel,
.pw-home .wlfi-card,
.pw-home .wlfi-markets__row,
.pw-home .wlfi-tool,
.pw-home .wlfi-review,
.pw-home .wlfi-faq__item,
.pw-home .wlfi-choose__item,
.pw-home .wlfi-overview-strip__item,
.pw-home .wlfi-testimonial-card,
.pw-home .wlfi-terminal,
.pw-home .pw-terminal-section .wlfi-terminal,
.pw-home .pw-marketplace .bn-ads-widget .bn-ads-panel {
  background: var(--bn-panel-gradient) !important;
  background-image: none !important;
}



/* margin-bottom is a real slim gap (not 0) - deliberately, so the Living
   Ledger canvas (z-index:6, behind `main`'s z-index:7 - see the stacking
   context note above the panel-tone rule) shows through cleanly in the
   empty space between sections. Every section's own interior is opaque
   and fully occludes the canvas (no drift/flicker over content, still
   the whole reason that's true), so this is the only place the
   animation is visible - reads as a deliberate "living" strip between
   flat panels, instead of blended over card content where a
   continuously-animating layer reading its brightness at any given
   instant is unavoidably inconsistent. */
.pw-home [data-pw-section]:not(#buy-sell):not(#live-terminal) {
  margin-inline: 0 !important;
  /* Paired with --bn-section-gap (the padding above) at every section
     boundary - see the comment on --bn-section-gap's definition for why
     both were trimmed together. */
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.pw-home [data-pw-section]:not(#buy-sell):not(#live-terminal)::before,
.pw-home [data-pw-section]:not(#buy-sell):not(#live-terminal)::after {
  display: none !important;
}

.pw-home #buy-sell {
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Was fully flattened (box-shadow/transform: none) during the pure-black
   background pass — restored to the existing --bn-elev-* elevation system
   (defined above) so these tiles read as solid, separated surfaces:
   lifted fill (see the container rule above) plus a hairline border and
   a soft single-layer shadow, still well short of a raised 3D bevel. */
.pw-home .pw-feature-card,
.pw-home .pw-marketplace-hub__highlight,
.pw-home .wlfi-card,
.pw-home .wlfi-tool,
.pw-home .wlfi-how__item,
.pw-home .wlfi-markets__row,
.pw-home .wlfi-faq__item,
.pw-home .wlfi-review,
.pw-home .pw-form-panel,
.pw-home .pw-marketplace .bn-ads-widget .bn-ads-panel {
  border: 1px solid var(--bn-elev-border) !important;
  border-top-color: var(--bn-elev-border-top) !important;
  box-shadow: var(--bn-elev-shadow-md) !important;
  transition:
    box-shadow 0.35s var(--bn-depth-ease),
    border-color 0.35s var(--bn-depth-ease),
    transform 0.35s var(--bn-depth-ease) !important;
}

.pw-home .pw-feature-card:hover,
.pw-home .pw-marketplace-hub__highlight:hover,
.pw-home .wlfi-card:hover,
.pw-home .wlfi-tool:hover,
.pw-home .wlfi-how__item:hover {
  box-shadow: var(--bn-elev-shadow-hover) !important;
  border-color: var(--bn-elev-rim) !important;
}

.pw-home .pw-live-bridge {
  margin-inline: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

body.pw-app-site .bn-ad-step__switcher-list,
body.pw-app-site .currency_switcher__list,
body.pw-app-site .bn-ad-step__form .select2-dropdown,
body.pw-app-site .bn-ad-step__form .select2-results__options,
body.pw-app-site .trd-chat__file-label,
body.pw-app-site .wlfi-wdr-table thead th,
body.pw-app-site .wlfi-wdr-asset,
body.pw-app-site .wlfi-wdr-pagination .page-link,
body.pw-app-site .wlf-modal .modal-content,
body.pw-app-site .wlf-auth .select2-dropdown,
body.pw-app-site .wlf-auth--user-data .select2-dropdown,
body.pw-app-site .bn-ad-step__prev,
body.pw-app-site .btn--light.btn--xl,
body.pw-app-site .bn-ad-step__input-group .bn-ad-step__addon,
body.pw-app-site .bn-ad-step__input-group .input-group-text,
body.pw-app-site .trd-chat__refresh,
body.pw-app-site .trd-chat__bubble,
body.pw-app-site .trd-info__copy,
body.pw-app-site .trd-review__pill,
body.pw-app-site .p2p-dash__copy-btn,
body.pw-app-site .nice-select,
body.pw-app-site .nice-select .list {
  background: var(--bitnnock-surface) !important;
  background-image: none !important;
}

@media (max-width: 767px) {
  body.home-page .pw-home,
  body:has(.pw-home) .page-wrapper,
  .pw-home {
    background: #13100d !important;
  }

  .pw-home [data-pw-section]:not(#buy-sell):not(#live-terminal) {
    margin-inline: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Container, not canvas - matches the desktop .pw-live-bridge treatment
     (var(--bn-panel-gradient) card fill) instead of the page-canvas tone. */
  .pw-home .pw-live-bridge {
    margin-inline: 0 !important;
    background: var(--bn-panel-gradient) !important;
    background-image: none !important;
  }

  /* Containers, not canvas - these are individual cards, so they get the
     lifted panel token like their desktop equivalents rather than the flat
     page-canvas tone (previously a literal #000000 here made every one of
     these mobile cards go pure black instead of matching desktop). */
  .pw-home .pw-feature-card,
  .pw-home .pw-marketplace-hub__highlight,
  .pw-home .wlfi-how__item,
  .pw-home .wlfi-card,
  .pw-home .wlfi-markets__row,
  .pw-home .wlfi-tool,
  .pw-home .wlfi-faq__item,
  .pw-home .wlfi-review,
  .pw-home .pw-form-panel {
    background: var(--bn-panel-gradient) !important;
    background-image: none !important;
  }

  .pw-site-footer,
  .pw-site-footer .footer-section {
    background: #13100d !important;
    background-image: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pw-home [data-pw-section]:not(#buy-sell):not(#live-terminal) {
    margin-inline: 0 !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   Final pass — no invisible black / near-black text on dark UI
   ========================================================================== */

body.pw-app-site .heading--color,
body.home-page .heading--color,
.pw-home .heading--color,
body.pw-app-site .text--black,
body.pw-app-site label,
body.pw-app-site .contact-item a,
body.pw-app-site .account-menu .icon .account-submenu li a,
body.pw-app-site .account-submenu li a,
body.pw-app-site .nav-tabs.custom--style .nav-item .nav-link:not(.active),
body.pw-app-site .cmn-accordion .card-header .btn i,
body.pw-app-site .cmn-accordion .card-header .btn span,
body.pw-app-site .language-select option,
body.pw-app-site .bitcoin-form .select option,
body.pw-app-site .custom--card,
body.pw-app-site .custom--card .card-body,
body.pw-app-site .custom--card .card-body p,
body.pw-app-site .custom--card .card-body span:not([class*="btn"]),
body.pw-app-site .custom--card .card-body li,
body.pw-app-site .custom--card .card-title,
body.pw-app-site .d-widget,
body.pw-app-site .d-widget p,
body.pw-app-site .sidebar-menu li a,
body.pw-app-site .sidebar-menu li span,
body.pw-app-site .account-card__title,
body.pw-app-site .choose-card__content .title,
body.pw-app-site .choose-card__content p,
body.pw-app-site .testimonial-card__content p,
body.pw-app-site .coin-search-area label,
body.pw-app-site .header .main-menu li a,
body.pw-app-site .cookie__wrapper,
body.pw-app-site .cookie__wrapper .txt,
body.pw-app-site .cookie__wrapper .txt span,
body.pw-app-site .trd-live-title,
body.pw-app-site .trd-live-subtitle,
body.pw-app-site .trd-review__title,
body.pw-app-site .trd-review__lead,
body.pw-app-site .bn-ad-head__title,
body.pw-app-site .bn-ad-head__desc,
body.pw-app-site .wlfi-heading-md,
body.pw-app-site .wlfi-subheading,
body.pw-app-site .wlfi-text-secondary,
body.pw-app-site .wlfi-feature__text,
body.pw-app-site .wlfi-faq__q,
body.pw-app-site .wlfi-faq__a,
body.pw-app-site .wlfi-faq__a p,
body.pw-app-site .paragraph,
body.pw-app-site .heading-9-copy,
body.pw-app-site .text-block-5,
body.pw-app-site .text-block-6,
body.pw-app-site .text-block-7,
body.pw-app-site .text-block-8,
body.pw-app-site .text-block-9,
body.pw-app-site .text-block-10,
body.home-page .heading--color,
body.home-page label,
body.home-page .paragraph,
body.home-page .text-block-5,
body.home-page .text-block-6,
body.home-page .text-block-7,
body.home-page .text-block-8,
body.home-page .text-block-9,
body.home-page .text-block-10,
.pw-home .paragraph,
.pw-home .text-block-5,
.pw-home .text-block-6,
.pw-home .text-block-7,
.pw-home .text-block-8,
.pw-home .text-block-9,
.pw-home .text-block-10,
.pw-home .wlfi-subheading,
.pw-home .wlfi-text-secondary,
.pw-home .wlfi-feature__text,
.pw-home .wlfi-faq__q,
.pw-home .wlfi-faq__a,
.pw-home .wlfi-faq__a p {
  color: var(--bn-readable-text) !important;
}

body.pw-app-site .wlfi-label,
body.pw-app-site .wlfi-faq__q::after,
body.pw-app-site .p2p-dash__stat-label,
body.pw-app-site .p2p-dash__panel-desc,
body.pw-app-site .p2p-dash__meta dt,
body.pw-app-site .p2p-dash__trade-meta,
body.pw-app-site .p2p-dash__notify-time,
body.home-page .wlfi-label,
.pw-home .wlfi-label {
  color: var(--bn-readable-muted) !important;
}

/* Inline near-black color attributes on non-button elements */
body.pw-app-site [style*="color: #363636"]:not(.btn):not([class*="btn--"]),
body.pw-app-site [style*="color:#363636"]:not(.btn):not([class*="btn--"]),
body.pw-app-site [style*="color: #333"]:not(.btn):not([class*="btn--"]),
body.pw-app-site [style*="color:#333"]:not(.btn):not([class*="btn--"]),
body.pw-app-site [style*="color: #111"]:not(.btn):not([class*="btn--"]),
body.pw-app-site [style*="color:#111"]:not(.btn):not([class*="btn--"]),
body.pw-app-site [style*="color: #0a0a0a"]:not(.btn):not([class*="btn--"]),
body.pw-app-site [style*="color:#0a0a0a"]:not(.btn):not([class*="btn--"]),
body.pw-app-site [style*="color: #777"]:not(.btn):not([class*="btn--"]),
body.pw-app-site [style*="color:#777"]:not(.btn):not([class*="btn--"]),
body.home-page [style*="color: #333"]:not(.btn):not([class*="btn--"]),
body.home-page [style*="color:#333"]:not(.btn):not([class*="btn--"]),
body.home-page [style*="color: #111"]:not(.btn):not([class*="btn--"]),
body.home-page [style*="color:#111"]:not(.btn):not([class*="btn--"]),
body.home-page [style*="color: #777"]:not(.btn):not([class*="btn--"]),
.pw-home [style*="color: #333"]:not(.btn):not([class*="btn--"]),
.pw-home [style*="color:#333"]:not(.btn):not([class*="btn--"]),
.pw-home [style*="color: #111"]:not(.btn):not([class*="btn--"]),
.pw-home [style*="color:#111"]:not(.btn):not([class*="btn--"]) {
  color: var(--bn-readable-text) !important;
}

/* Select2 + dropdown option text on dark panels */
body.pw-app-site .select2-container--default .select2-selection--single .select2-selection__rendered,
body.pw-app-site .select2-container--default .select2-selection--multiple .select2-selection__rendered,
body.pw-app-site .select2-results__option,
body.pw-app-site .select2-search__field,
body.home-page .select2-container--default .select2-selection--single .select2-selection__rendered,
.pw-home .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--bn-readable-text) !important;
}

body.pw-app-site .select2-results__option--highlighted,
body.pw-app-site .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  color: var(--bn-readable-text) !important;
}

/* Responsive table labels (main.css uses black) */
body.pw-app-site .table-responsive--md tr td::before,
body.pw-app-site .table-responsive--lg tr td::before,
body.pw-app-site .table-responsive--md tr th::before,
body.pw-app-site .table-responsive--lg tr th::before {
  color: var(--bn-readable-muted) !important;
}

/* Footer copy always readable */
.footer-section,
.footer-section p,
.footer-section li,
.footer-section span,
.footer-section a:not(.text--base),
.pw-site-footer,
.pw-site-footer p,
.pw-site-footer a:not(.text--base) {
  color: var(--bn-readable-muted) !important;
}

.footer-section a.text--base,
.pw-site-footer a.text--base {
  color: var(--bitnnock-gold, #ecc46c) !important;
}

/* Keep dark text only on purple/gold/white button & active tab surfaces */
body.pw-app-site .btn--base,
body.pw-app-site .btn.btn--base,
body.pw-app-site button.btn--base,
body.pw-app-site a.btn--base,
body.pw-app-site .cmn-btn,
body.pw-app-site .wlfi-btn--primary,
body.pw-app-site .wlf-btn--gold,
body.pw-app-site .bn-btn--gold,
body.pw-app-site .bn-trd-btn,
body.pw-app-site .trd-btn,
body.pw-app-site .bn-ad-btn-primary,
body.pw-app-site .bn-ad-step__next,
body.pw-app-site .bn-ad-step__finish,
body.pw-app-site .btn--xl.btn--base,
body.pw-app-site .btn--base.btn--xl,
body.pw-app-site .pw-user-nav__item.is-active,
body.pw-app-site .pw-trade-nav__item.is-active,
body.pw-app-site .pw-trade-nav__item.is-active .pw-trade-nav__badge,
body.pw-app-site .bn-ad-segment__item.is-active,
body.pw-app-site .bn-rev-segment__item.is-active,
body.pw-app-site .trd-segment__item.is-active,
body.pw-app-site .trd-live-segment__item.is-active,
body.pw-app-site .trd-list-segment__item.is-active,
body.pw-app-site .bn-ad-step__tab.active,
body.pw-app-site .buy--sell-tab.active,
body.pw-app-site .bn-ads-tabs__link.active,
body.pw-app-site .bn-ads-widget .bn-ads-tabs .nav-link.active,
body.pw-app-site .bn-ads-widget .bn-ads-tabs .bn-ads-tabs__link.active,
body.pw-app-site .bn-ads-widget [class*="crypto-currency-"].active,
body.pw-app-site .bn-ads-widget .bn-ads-more,
body.pw-app-site .bn-ads-widget .btn--base,
body.pw-app-site .bn-ads-widget a.btn--base,
body.pw-app-site .bn-ad-steps__numbers .item.active .number,
body.pw-app-site .page-item.active .page-link,
body.pw-app-site .bn-ad-pagination .page-item.active .page-link,
body.pw-app-site .bn-rev-pagination .page-item.active .page-link,
body.pw-app-site .wlfi-pagination .page-item.active .page-link,
body.pw-app-site .p2p-dash__btn--primary,
body.pw-app-site .p2p-dash__action-cta.is-primary,
body.pw-app-site .p2p-dash__copy.is-copied .p2p-dash__copy-btn,
body.pw-app-site .scroll-to-top,
body.pw-app-site .scroll-to-top .scroll-icon,
body.home-page .wlfi-btn--primary,
body.home-page .bn-ads-tabs__link.active,
body.home-page .pw-marketplace .bn-ads-widget .btn--base,
body.home-page .pw-marketplace .bn-ads-widget .bn-ads-more,
body.home-page .pw-marketplace .bn-ads-widget a.btn--base,
.pw-home .wlfi-btn--primary,
.pw-home .bn-ads-tabs__link.active,
.pw-home .pw-marketplace .bn-ads-widget .btn--base,
.pw-home .pw-marketplace .bn-ads-widget .bn-ads-more,
.pw-home .pw-marketplace .bn-ads-widget a.btn--base,
.pw-home .p2p-sound-unlock__btn--primary,
.pw-home .wlfi-search__btn {
  color: #000000 !important;
}

/* ==========================================================================
   Typography — Sora site-wide (matches worldlibertyfinancial.com's font
   choice); legacy main.css font/color neutralized. This is the single
   most-authoritative font-family rule on the site (html/body + !important),
   so switching it here is what actually reaches every page.
   ========================================================================== */

html,
body,
body.pw-app-site,
body.home-page,
.pw-home,
.pw-app,
.p2p-dash,
.bn-page,
.wlf-auth,
.wlfi-cms-page {
  font-family: var(--bitnnock-font) !important;
}

body.pw-app-site h1,
body.pw-app-site h2,
body.pw-app-site h3,
body.pw-app-site h4,
body.pw-app-site h5,
body.pw-app-site h6,
body.home-page h1,
body.home-page h2,
body.home-page h3,
body.home-page h4,
body.home-page h5,
body.home-page h6,
.pw-home h1,
.pw-home h2,
.pw-home h3,
.pw-home h4,
.pw-home h5,
.pw-home h6 {
  font-family: inherit !important;
}

/* main.css sets Jost + #363636 on headings — inner pages only (homepage uses plasma-home.css) */
body.pw-app-site :is(h1, h2, h3, h4, h5, h6, .h--color, .heading--color, label, .nav-tabs.custom--style-two .nav-link:not(.active)) {
  font-family: inherit !important;
}

body.pw-app-site :is(h1, h2, h3, h4, h5, h6):not(.btn):not([class*="btn--"]) {
  color: var(--bn-readable-text, #ffffff) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

/* Hero copy — stay above Spline scrim and remain readable */
.pw-home #buy-sell > .heading,
.pw-home #buy-sell > .pw-hero-ledger-tag,
.pw-home #buy-sell > .pw-hero-sub {
  position: relative;
  z-index: 4;
}

.pw-home #buy-sell .pw-hero-sub__lead {
  color: #f0f0f5 !important;
}

/* ==========================================================================
   Site footer — minimal (legal + social + copyright; nav lives in header)
   ========================================================================== */

.wlf-footer {
  width: 100%;
  background: #13100d !important;
  color: #9ca3af;
  font-family: var(--bitnnock-font);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.wlf-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236, 196, 108, 0.35), transparent);
  pointer-events: none;
}

.wlf-footer--minimal .wlf-footer__inner {
  width: 100%;
  max-width: min(1280px, calc(100% - 2rem));
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1rem, 4vw, 2.5rem);
}

.wlf-footer--minimal .wlf-footer__top-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  padding-bottom: clamp(0.85rem, 2vw, 1rem);
  margin-bottom: clamp(0.85rem, 2vw, 1rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wlf-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  width: 100%;
}

.wlf-footer__link,
.wlf-footer--minimal .wlf-footer__col a {
  font-size: 0.875rem !important;
  font-weight: 500;
  color: #d2d2d7 !important;
  text-decoration: none !important;
  transition: color 0.15s;
  line-height: 1.4;
}

.wlf-footer__link:hover,
.wlf-footer--minimal .wlf-footer__col a:hover {
  color: #fff !important;
  transform: none;
}

.wlf-footer--minimal .wlf-footer__social {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wlf-footer--minimal .wlf-footer__social li {
  display: inline-flex;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wlf-footer--minimal .wlf-footer__social a {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f0f0f5 !important;
  line-height: 1;
  text-decoration: none !important;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.wlf-footer--minimal .wlf-footer__social a:hover {
  color: #fff !important;
  border-color: rgba(236, 196, 108, 0.45) !important;
  transform: none;
}

.wlf-footer--minimal .wlf-footer__social a i,
.wlf-footer--minimal .wlf-footer__social a svg {
  display: block;
  font-size: 1rem;
  line-height: 1;
}

.wlf-footer--minimal .wlf-footer__bottom-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
}

.wlf-footer--minimal .wlf-footer__copyright {
  margin: 0;
  color: #c8c8cc !important;
  font-size: 0.8125rem !important;
  line-height: 1.45;
}

.wlf-footer--minimal .wlf-footer__tagline {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.8125rem !important;
  line-height: 1.45 !important;
  color: #8e8e93 !important;
  text-align: left !important;
}

@media (min-width: 640px) {
  .wlf-footer--minimal .wlf-footer__top-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
  }

  .wlf-footer__legal {
    width: auto;
    flex: 1 1 auto;
  }

  .wlf-footer--minimal .wlf-footer__social {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
  }
}

@media (min-width: 768px) {
  .wlf-footer--minimal .wlf-footer__bottom-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .wlf-footer--minimal .wlf-footer__tagline {
    text-align: right !important;
  }
}

@media (max-width: 639px) {
  .wlf-footer--minimal .wlf-footer__inner {
    padding-inline: 1rem;
  }

  .wlf-footer--minimal .wlf-footer__social {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    padding-bottom: 2px;
  }

  .wlf-footer--minimal .wlf-footer__social::-webkit-scrollbar {
    display: none;
  }
}

/* Legacy minimal footer hooks (older markup) */
.wlf-footer--minimal .wlf-footer__main {
  padding: 0;
}

.wlf-footer--minimal .wlf-footer__meta {
  display: contents;
}

.wlf-footer--minimal .wlf-footer__bar,
.wlf-footer--minimal .wlf-footer__bar-inner {
  display: contents;
}

/* Header logo — home + inner (override legacy plasma-home width cap) */
.pw-plasma-shell .navbar_component {
  height: auto !important;
  min-height: 4.5rem;
  overflow: visible;
}

.pw-plasma-shell .navbar_logo-link {
  width: auto !important;
  max-width: min(22rem, 62vw) !important;
}

.pw-plasma-shell .pw-plasma-nav__logo {
  height: 66px !important;
}

@media (max-width: 767px) {
  .pw-plasma-shell .pw-plasma-nav__logo {
    height: 50px !important;
  }

  .pw-plasma-shell .navbar_logo-link {
    max-width: min(18rem, 64vw) !important;
  }
}

/* Tablet alignment — shared 768–991px polish for user dashboard sections */
/* Note: .p2p-dash--v2 .p2p-dash__metrics (main dashboard stats strip) is intentionally
   excluded here - it has its own dedicated responsive grid in p2p-dashboard.css
   (2-col mobile / 3-col tablet / 6-col desktop) and should not become a carousel. */
@media (min-width: 768px) and (max-width: 991px) {
  .p2p-trades__metrics,
  .p2p-trade-live__metrics,
  .p2p-trade-request__metrics,
  .p2p-wallet-activity__metrics,
  .p2p-support-page__metrics,
  .p2p-referral-page__metrics {
    display: flex;
    overflow-x: auto;
    gap: 0.75rem;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .p2p-trades__metrics::-webkit-scrollbar,
  .p2p-trade-live__metrics::-webkit-scrollbar,
  .p2p-trade-request__metrics::-webkit-scrollbar,
  .p2p-wallet-activity__metrics::-webkit-scrollbar,
  .p2p-support-page__metrics::-webkit-scrollbar,
  .p2p-referral-page__metrics::-webkit-scrollbar {
    display: none;
  }

  .p2p-trades__metrics .p2p-dash__metric,
  .p2p-trade-live__metrics .p2p-dash__metric,
  .p2p-trade-request__metrics .p2p-dash__metric,
  .p2p-wallet-activity__metrics .p2p-dash__metric,
  .p2p-support-page__metrics .p2p-dash__metric,
  .p2p-referral-page__metrics .p2p-dash__metric {
    min-width: min(42vw, 240px);
    flex-shrink: 0;
  }

  .p2p-dash--v2 .p2p-dash__filter-row,
  .p2p-wallet-activity__filters-row,
  .p2p-support-page__filters-row,
  .p2p-referral-page__filters-row {
    flex-wrap: wrap;
  }

  .p2p-dash--v2 .p2p-dash__filter-actions,
  .p2p-wallet-activity__filter-actions,
  .p2p-support-page__filter-actions,
  .p2p-referral-page__filter-actions {
    width: 100%;
    justify-content: stretch;
  }

  .p2p-dash--v2 .p2p-dash__filter-actions .p2p-dash__btn,
  .p2p-wallet-activity__filter-actions .p2p-dash__btn,
  .p2p-support-page__filter-actions .p2p-dash__btn,
  .p2p-referral-page__filter-actions .p2p-dash__btn {
    flex: 1 1 auto;
  }
}

/* Login / register — allow page scroll so site footer is fully visible */
html:has(.wlf-auth--login),
html:has(.wlf-auth--register),
html:has(.p2p-auth--login),
html:has(.p2p-auth--register),
body:has(.wlf-auth--login),
body:has(.wlf-auth--register),
body:has(.p2p-auth--login),
body:has(.p2p-auth--register) {
  height: auto !important;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto !important;
}

body.pw-app-site:has(.wlf-auth--login) .page-wrapper,
body.pw-app-site:has(.wlf-auth--register) .page-wrapper,
body.pw-app-site:has(.p2p-auth--login) .page-wrapper,
body.pw-app-site:has(.p2p-auth--register) .page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}

body.pw-app-site:has(.wlf-auth--login) .wlf-auth--login,
body.pw-app-site:has(.wlf-auth--register) .wlf-auth--register,
body.pw-app-site:has(.p2p-auth--login) .p2p-auth--login,
body.pw-app-site:has(.p2p-auth--register) .p2p-auth--register,
body.pw-app-site:has(.wlf-auth--login) #main.p2p-auth,
body.pw-app-site:has(.wlf-auth--register) #main.p2p-auth {
  flex: 1 0 auto;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding-bottom: clamp(1rem, 3vw, 1.5rem);
}

body.pw-app-site:has(.wlf-auth--login) .wlf-footer,
body.pw-app-site:has(.wlf-auth--register) .wlf-footer {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* Homepage live buy/sell offers — wins over p2p-dashboard / plasma-app panel rules */
.pw-home .pw-marketplace .wlfi-offers .bn-ads-widget .bn-ads-panel {
  overflow: visible !important;
  min-height: 0 !important;
}

.pw-home .pw-marketplace .wlfi-offers .bn-ads-widget__listings,
.pw-home .pw-marketplace .wlfi-offers .bn-ads-panels,
.pw-home .pw-marketplace .wlfi-offers .bn-marketplace-ads--embed,
.pw-home .pw-marketplace .wlfi-offers .bn-market-ads-card,
.pw-home .pw-marketplace .wlfi-offers .bn-market-ads-card .card-body {
  min-height: 0;
  overflow: visible;
}

.pw-home .pw-marketplace .wlfi-offers .bn-data-table-wrap {
  overflow-x: auto !important;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.pw-home .pw-marketplace .wlfi-offers .bn-marketplace-ads--embed .bn-market-ads__table {
  width: 100% !important;
  /* Defensive floor only, not the real fix - see the Avg-column hide + the
     5-column width shares below (in wlfi-p2p-sections.css) for how the
     visible columns actually get enough room. A first attempt here tried
     solving this with a much larger min-width (65rem) forcing horizontal
     scroll below that - measured live, that scrolled the Action column's
     Buy/Sell button off-screen at the 992px breakpoint floor, hiding the
     one element on this row a visitor most needs to see. Dropping Avg.
     (the least essential column for a homepage teaser) instead gives the
     remaining 5 columns enough real width to all fit without scrolling or
     truncating, all the way down to 992px - this min-width now only
     guards against a genuinely unexpected edge case. */
  min-width: 50rem !important;
  table-layout: fixed;
  border-collapse: collapse;
}

.pw-home .pw-marketplace .wlfi-offers .bn-marketplace-ads--embed .bn-market-ads__table thead th,
.pw-home .pw-marketplace .wlfi-offers .bn-marketplace-ads--embed .bn-market-ads__table tbody td {
  min-width: 0 !important;
}

/* Avg. (trade speed) is the least essential column for a homepage teaser
   table - the full offer detail (with trade speed) is one click away via
   "Browse all offers" right below this widget. Dropping it here is what
   frees enough width for Buyer's avatar+username and the primary
   Buy/Sell action button to stay fully visible and untruncated at every
   width down to the 992px breakpoint floor, instead of everything
   fighting over the same too-small pool of pixels. th/td both use
   nth-child(5) since Avg. is the 5th column before Action. */
.pw-home .pw-marketplace .wlfi-offers .bn-marketplace-ads--embed .bn-market-ads__table th:nth-child(5),
.pw-home .pw-marketplace .wlfi-offers .bn-marketplace-ads--embed .bn-market-ads__table td:nth-child(5) {
  display: none !important;
}

.pw-home .pw-marketplace .wlfi-offers .bn-marketplace-ads--embed .bn-market-ads__table .bn-ads-cell--rate {
  font-size: 0.8125rem;
}

.pw-home .pw-marketplace .wlfi-offers .bn-marketplace-ads--embed .bn-market-ads__table thead {
  display: table-header-group !important;
}

.pw-home .pw-marketplace .wlfi-offers .bn-marketplace-ads--embed .bn-market-ads__table tbody {
  display: table-row-group !important;
}

.pw-home .pw-marketplace .wlfi-offers .bn-marketplace-ads--embed .bn-market-ads__table tr {
  display: table-row !important;
}

.pw-home .pw-marketplace .wlfi-offers .bn-marketplace-ads--embed .bn-market-ads__table th,
.pw-home .pw-marketplace .wlfi-offers .bn-marketplace-ads--embed .bn-market-ads__table td {
  display: table-cell !important;
  padding: 0.65rem 0.75rem !important;
  text-align: left !important;
}

.pw-home .pw-marketplace .wlfi-offers .bn-marketplace-ads--embed .bn-market-ads__table td.bn-market-ads__action {
  text-align: center !important;
}

/* The action button (rule above) has always rendered centered in its cell,
   but nothing centered the "Action" header to match - it sat left-aligned
   per the blanket th/td rule above, over a centered button, reading as a
   misplaced/mismatched column header. */
.pw-home .pw-marketplace .wlfi-offers .bn-marketplace-ads--embed .bn-market-ads__table th:last-child {
  text-align: center !important;
}

.pw-home .pw-marketplace .wlfi-offers .bn-ads-loading {
  min-height: 120px;
}

@media (min-width: 992px) {
  .pw-home .pw-marketplace .wlfi-offers .bn-ads-widget--sidebar .bn-ads-more-wrap {
    grid-column: 1 / -1;
  }
}

@media (max-width: 991px) {
  .pw-home .pw-marketplace .wlfi-offers .bn-ads-widget--sidebar .bn-data-table-wrap {
    padding-top: 0;
  }
}

/* ==========================================================================
   User dashboard — fixed nav clearance, scroll, footer (home_header on user.*)
   ========================================================================== */

body.pw-app-site:has(.pw-plasma-shell):not(:has(.pw-home)):not(:has(.p2p-auth)):not(:has(.wlf-auth)) .page-wrapper > #main.p2p-dash,
body.pw-app-site:has(.pw-plasma-shell):not(:has(.pw-home)):not(:has(.p2p-auth)):not(:has(.wlf-auth)) .page-wrapper > .pw-app.p2p-dash {
  padding-top: calc(var(--pw-header-clearance, 7.75rem) + env(safe-area-inset-top, 0px));
  box-sizing: border-box;
}

@media (max-width: 767px) {
  body.pw-app-site:has(.pw-plasma-shell):not(:has(.pw-home)):not(:has(.p2p-auth)):not(:has(.wlf-auth)) .page-wrapper > #main.p2p-dash,
  body.pw-app-site:has(.pw-plasma-shell):not(:has(.pw-home)):not(:has(.p2p-auth)):not(:has(.wlf-auth)) .page-wrapper > .pw-app.p2p-dash {
    padding-top: calc(5.25rem + env(safe-area-inset-top, 0px) + 0.625rem);
  }
}

body.pw-app-site:has(#main.p2p-dash) .page-wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}

body.pw-app-site:has(#main.p2p-dash) #main.p2p-dash {
  flex: 1 0 auto;
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

body.pw-app-site:has(#main.p2p-dash) .wlf-footer {
  flex-shrink: 0;
  margin-top: auto;
  position: relative;
  z-index: 2;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}

body.pw-app-site:has(#main.p2p-dash) .wlf-top {
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

html:has(#main.p2p-dash),
body.pw-app-site:has(#main.p2p-dash) {
  height: auto !important;
  min-height: 100%;
  overflow-y: auto !important;
}

/* ==========================================================================
   Register page — mobile UX audit fixes
   Scoped to .wlf-auth--register unless noted. Appended here (custom.css
   loads after plasma-app.css and p2p-dashboard.css) so these win the
   cascade over the older rules without editing every scattered duplicate
   declaration in those files.
   ========================================================================== */

/* .wlf-input--invalid had a red-border treatment for login and user-data
   (profile edit) pages, but not register — a failed field showed only
   small text below it, no change to the input itself. Mirrors login's
   existing values exactly. */
.wlf-auth--register .wlf-input--invalid,
.wlf-auth--register .wlf-input--invalid:focus {
  border-color: rgba(248, 113, 113, .6) !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, .12) !important;
}

/* Same gap, different symptom: .wlf-field__error text rendered white, not
   red, on register. The generic `body.pw-app-site p{color:#fff!important}`
   utility (1 class + 2 type selectors) outranks the unscoped
   `.wlf-field__error{color:#fca5a5!important}` rule (1 class) in
   specificity. Login has its own 2-class override that already beats it;
   register never got one. Only adding color — register's error paragraphs
   already reserve their own line height via the unscoped rule, unlike
   login's min-height:0 override, so that part intentionally isn't copied. */
.wlf-auth--register .wlf-field__error {
  color: #fca5a5 !important;
}

/* Placeholder text (e.g. "you@email.com") measured ~3.4:1 against the
   input background, under WCAG AA's 4.5:1 minimum for normal text.
   Lightened to ~7.6:1 while staying visually distinct from typed text
   (~17.6:1) and the same muted gray family as the field labels. Login
   and password-request share the exact same base rule from
   plasma-app.css and measured the identical 3.4:1 failure, so they get
   the same override here. (password-verify/update/email-verify/mobile-
   verify/2fa-verify share that same base rule too but are out of scope
   for the password-reset flow redesign this was written for.) */
.wlf-auth--register .wlf-input::placeholder,
.wlf-auth--login .wlf-input::placeholder,
.wlf-auth--password-request .wlf-input::placeholder {
  color: rgba(203, 209, 217, .78) !important;
}

/* No heading appeared above the form on mobile/tablet — the only "Create
   your account" heading lives in the marketing aside, which sits below
   the form in the single-column layout (register puts the form first by
   design). Shown only below the 992px split breakpoint, where the
   aside's own heading becomes visible immediately beside the form. */
.wlf-auth__mobile-heading {
  margin: 0 0 .25rem;
  font-size: clamp(1.375rem, 5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--bn-text, #fafafa) !important;
}
@media (min-width: 992px) {
  .wlf-auth__mobile-heading {
    display: none;
  }
}

/* The duplicate-account modal's close (x) button reuses .wlf-modal .close
   from plasma-app.css, which sets padding:0, leaving a ~14x24px hit
   target — well under Apple HIG / WCAG 2.2's 44x44px minimum. Centers the
   glyph in a larger flex box via min-width/min-height; negative margin
   keeps it from visibly shifting the header layout. Shared by every
   .wlf-modal on the site, not just this one. */
.wlf-modal .modal-header .close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -10px -10px -10px 0;
}

/* Live password requirements checklist (see register.blade.php). Matches
   RegisterController's actual validation — minimum 6 characters — rather
   than implying requirements that aren't enforced; secure_password's
   extra mixed-case/number/symbol rule is an admin setting that's off on
   live right now. */
.wlf-pw-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .875rem;
  margin: -.25rem 0 0;
  padding: 0;
}
.wlf-pw-checklist__item {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin: 0;
  font-size: .75rem;
  color: var(--bn-muted, #9ca3af) !important;
  transition: color .15s;
}
.wlf-pw-checklist__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--bn-line, rgba(255, 255, 255, .08));
  position: relative;
}
.wlf-pw-checklist__icon::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  background: transparent;
  transition: background .15s;
}
.wlf-pw-checklist__item.is-met {
  color: var(--bn-green-hi, #00C853) !important;
}
.wlf-pw-checklist__item.is-met .wlf-pw-checklist__icon {
  border-color: var(--bn-green-hi, #00C853);
}
.wlf-pw-checklist__item.is-met .wlf-pw-checklist__icon::after {
  background: var(--bn-green-hi, #00C853);
}

/* The "Global fiat payment methods" tag row (register + login aside) read
   as a closed, exhaustive list of exactly 4 methods. This trailing pill is
   styled as an indicator, not a 5th concrete option: dashed border, no
   fill, muted text. Needs to match the base rule's specificity
   (.pw-plasma-benefit__tags li = 2 classes + 1 type) to win. */
.pw-plasma-benefit__tags li.pw-plasma-benefit__tag--more {
  color: var(--bn-muted, #9ca3af) !important;
  background: transparent !important;
  border: 1px dashed rgba(255, 255, 255, .22) !important;
  font-weight: 500 !important;
}

/* The glass auth card's backdrop-filter blur never adapted to Reduce
   Transparency / Increase Contrast. #1c1712 mirrors the opaque fallback
   .wlf-modal .modal-content already uses for the same --bn-surface token,
   matching an established pattern instead of inventing a new color. */
@media (prefers-reduced-transparency: reduce) {
  .wlf-auth__card {
    backdrop-filter: none !important;
    background: #1c1712 !important;
  }
}
@media (prefers-contrast: more) {
  /* body.pw-app-site .wlf-auth__card{border:1px solid var(--bn-elev-border)!important}
     is a sitewide card-elevation utility with higher specificity (2 classes +
     1 type) than a bare .wlf-auth__card, so it wins the border shorthand
     regardless of source order. Matching its selector here (same specificity,
     later in file) is what actually overrides it. */
  body.pw-app-site .wlf-auth__card {
    border-color: rgba(255, 255, 255, .35) !important;
  }
  .wlf-auth--register .wlf-input,
  .wlf-auth--login .wlf-input {
    border-color: rgba(255, 255, 255, .35) !important;
  }
}

/* Login's "Remember Me" checkbox label and "Forgot password?" link
   measured ~120x20px and ~120x22px hit areas — under WCAG 2.5.8 / Apple
   HIG's 44px minimum. Padding grows the tappable box without changing
   the visual text size or shifting surrounding layout; the matching
   negative margin cancels the padding's effect on the row's own height
   and on gap spacing from .wlf-auth__row. .85rem (not .75rem) because
   .wlf-check's 19.5px intrinsic line height only reaches 43.5px total
   at .75rem — this clears 44px with a bit of headroom instead of
   landing half a pixel short. Scoped to the shared .wlf-auth base class
   (2 classes, same specificity as plasma-app.css's .wlf-auth--login
   .wlf-check etc.) so every auth page with these controls benefits,
   not just login. */
.wlf-auth .wlf-check {
  padding: .85rem 0;
  margin: -.85rem 0;
}
.wlf-auth .wlf-auth__link {
  display: inline-flex;
  align-items: center;
  padding: .85rem 0;
  margin: -.85rem 0;
}

/* ==========================================================================
   Password-reset flow — shared step-progress indicator
   (partials/auth_step_progress.blade.php), used by all three password-
   reset pages (request code / verify code / new password) so the flow
   reads as one journey instead of three disconnected pages. Reuses the
   site's existing gold-accent-dot language (.wlf-auth__kicker::before,
   .wlf-auth__hint-dot) rather than inventing a new visual idiom.

   Dots + connecting line are always shown, sized to never overflow a
   375px card. The 3 text labels only render from 768px up, where a row
   of 3 short labels comfortably fits under the dots; below that a single
   "Step X of 3 - Label" caption carries the same information instead.
   ========================================================================== */
.wlf-auth__progress {
  margin: 0 0 1.5rem;
}
.wlf-auth__progress-track {
  display: flex;
  align-items: center;
  margin: 0 0 .625rem;
}
.wlf-auth__progress-dot {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  border: 1.5px solid var(--bn-line, rgba(255, 255, 255, .08));
  background: rgba(19, 16, 13, .35);
  transition: border-color .2s, background .2s;
}
.wlf-auth__progress-dot--current {
  border-color: var(--bn-gold, #ecc46c);
  box-shadow: 0 0 0 3px rgba(236, 196, 108, .15);
}
.wlf-auth__progress-dot--done {
  border-color: var(--bn-gold, #ecc46c);
  background: var(--bn-gold, #ecc46c);
}
.wlf-auth__progress-dot--done i {
  font-size: .8125rem;
}
.wlf-auth__progress-line {
  flex: 1 1 auto;
  height: 2px;
  margin: 0 .5rem;
  border-radius: 999px;
  background: var(--bn-line, rgba(255, 255, 255, .08));
}
.wlf-auth__progress-line--done {
  background: var(--bn-gold, #ecc46c);
}
.wlf-auth__progress-labels {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wlf-auth__progress-caption {
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
}
@media (min-width: 768px) {
  .wlf-auth__progress-labels {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
  }
  .wlf-auth__progress-label {
    flex: 1 1 0;
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
  }
  .wlf-auth__progress-label:first-child {
    text-align: left;
  }
  .wlf-auth__progress-label:last-child {
    text-align: right;
  }
  .wlf-auth__progress-caption {
    display: none;
  }
}

/* Every color declaration above needs enough specificity to beat the
   sitewide "force readable white text" utility defined earlier in this
   file (body.pw-app-site span:not(...9 exclusions), body.pw-app-site li,
   body.pw-app-site p, etc. {color:#fff!important} - see "Dark theme —
   force readable white text"). Its span branch alone carries (0,10,2)
   specificity from 9 chained :not() clauses, so beating it means
   repeating those same 9 exclusions plus one more class; its li/p
   branches are only (0,1,2), so the body.pw-app-site prefix alone (2
   classes) is enough there. Same technique already used to fix the
   password-reset page's notice banner and numbered-steps colors. */
body.pw-app-site .wlf-auth__progress-dot:not(.badge):not([class*="btn"]):not(.pw-hero-badge__pulse):not(.pw-hero-badge__text):not(.pw-hero-ledger-tag__status):not(.p2p-dash__metric-icon):not([class*="__icon-badge"]):not([class*="-icon-badge"]):not([class*="__metric-icon"]) {
  color: var(--bn-muted, #9ca3af) !important;
}
body.pw-app-site .wlf-auth__progress-dot--current:not(.badge):not([class*="btn"]):not(.pw-hero-badge__pulse):not(.pw-hero-badge__text):not(.pw-hero-ledger-tag__status):not(.p2p-dash__metric-icon):not([class*="__icon-badge"]):not([class*="-icon-badge"]):not([class*="__metric-icon"]) {
  color: var(--bn-gold, #ecc46c) !important;
}
body.pw-app-site .wlf-auth__progress-dot--done:not(.badge):not([class*="btn"]):not(.pw-hero-badge__pulse):not(.pw-hero-badge__text):not(.pw-hero-ledger-tag__status):not(.p2p-dash__metric-icon):not([class*="__icon-badge"]):not([class*="-icon-badge"]):not([class*="__metric-icon"]) {
  color: #0a0a0a !important;
}
body.pw-app-site .wlf-auth__progress-label {
  color: var(--bn-muted, #9ca3af) !important;
}
body.pw-app-site .wlf-auth__progress-label--current {
  color: var(--bn-text, #fafafa) !important;
}
body.pw-app-site .wlf-auth__progress-caption {
  color: var(--bn-muted, #9ca3af) !important;
}

/* password-request's new status icon reuses password-update's gold
   "--recovery" treatment (both are the same "account recovery" concept),
   but that variant is currently declared scoped only to
   .wlf-auth--password-update, matching this file's existing convention
   of repeating small per-page-type declarations (see .wlf-auth__title,
   .wlf-auth__sub, etc. above) rather than de-duplicating into a shared
   unscoped rule. */
.wlf-auth--password-request .wlf-auth__status-icon--recovery {
  color: var(--bn-gold);
  background: rgba(236, 196, 108, .12);
  border: 1px solid rgba(236, 196, 108, .35);
}

/*
 * Step 1's aside is short - a heading plus one line of reassurance copy,
 * no stats pills or benefit cards like steps 2/3 have - so the shared
 * split-card's 992px+ two-column treatment (designed for a fuller aside)
 * left an oversized, mostly-empty left column. Render this page as one
 * full-width section instead, at every width:
 * - .wlf-auth__card--single (defined above, !important-protected)
 *   replaces --split so the card is always a single column.
 * - The container narrows from the register/login-style 1180px to a
 *   comfortable 900px single-column measure - narrow enough to read as
 *   one section rather than a stretched-out split, wide enough that it
 *   doesn't look like a thin island against the wide dark background.
 * - The aside's border/alignment switch from "column divider" (right
 *   edge, vertically centered - correct when a form sits beside it) to
 *   "stacked section divider" (bottom edge, top-aligned - correct now
 *   that the form sits below it instead), matching how every page in
 *   this family already behaves below 992px.
 *
 * !important on border-right/justify-content only: body.pw-app-site
 * .wlf-auth__quote{justify-content:space-between;border-right:1px...}
 * at 768px+ (plasma-app.css ~824) has one extra type selector (body),
 * which outweighs having one fewer class than this rule - same
 * specificity-column mechanics as the sitewide white-text override
 * fixed earlier in this file, just tripping on TYPE instead of CLASS.
 */
.wlf-auth--password-request .wlf-container--wide {
  max-width: 900px;
}

.wlf-auth--password-request .wlf-auth__quote {
  border-right: none !important;
  border-bottom: 1px solid var(--bn-line);
  justify-content: flex-start !important;
  height: auto;
  overflow: visible;
}

.wlf-auth--password-request .wlf-auth__quote-inner {
  flex: none;
  justify-content: flex-start;
}

.wlf-auth--password-request .wlf-auth__form-wrap {
  height: auto;
  overflow: visible;
}

/* .p2p-dash__chips li (used by every auth page's info-chip row, incl.
   password-verify/update's existing chips and password-request's new
   ones added in this redesign) declares color: var(--p2p-muted) / #fde68a
   with NO !important, so the sitewide "force readable white text"
   utility's body.pw-app-site li{color:#fff!important} rule has been
   silently winning and rendering every chip's text white instead of its
   intended muted gray (or amber for .is-live) all along - same root
   cause as the notice-banner/flow-steps bug found during the password-
   reset audit, just a different element. Restoring intended colors here
   fixes it everywhere the chips component is used, not only the pages
   touched by this redesign. */
body.pw-app-site .p2p-dash__chips li {
  color: var(--p2p-muted, #a8a29e) !important;
}
body.pw-app-site .p2p-dash__chips li.is-live {
  color: #fde68a !important;
}

/* Same root cause, two more shared auth components: .wlf-auth__notice
   sets color:#fde68a!important on the OUTER div, but the visible text
   lives in a plain, unclassed <span> child - a value only reaches that
   span by inheritance, and the sitewide span:not(...)x9 rule targets
   the span directly, so a direct !important rule beats an inherited one
   regardless of which side has more specificity or !important.
   .wlf-auth__flow-steps-num (the numbered badge span) has no
   !important at all, so it loses outright; its sibling description
   span has the same inheritance problem as the notice. All three are
   fixed generally (not scoped to one page) since every password/2fa/
   verification auth page shares these same components and markup
   shape (checked: every .wlf-auth__notice on the site is icon + one
   plain span, no exceptions). */
body.pw-app-site .wlf-auth__notice span:not(.badge):not([class*="btn"]):not(.pw-hero-badge__pulse):not(.pw-hero-badge__text):not(.pw-hero-ledger-tag__status):not(.p2p-dash__metric-icon):not([class*="__icon-badge"]):not([class*="-icon-badge"]):not([class*="__metric-icon"]) {
  color: #fde68a !important;
}
body.pw-app-site .wlf-auth__flow-steps-num:not(.badge):not([class*="btn"]):not(.pw-hero-badge__pulse):not(.pw-hero-badge__text):not(.pw-hero-ledger-tag__status):not(.p2p-dash__metric-icon):not([class*="__icon-badge"]):not([class*="-icon-badge"]):not([class*="__metric-icon"]) {
  color: var(--bn-gold) !important;
}
body.pw-app-site .wlf-auth__flow-steps-num + span:not(.badge):not([class*="btn"]):not(.pw-hero-badge__pulse):not(.pw-hero-badge__text):not(.pw-hero-ledger-tag__status):not(.p2p-dash__metric-icon):not([class*="__icon-badge"]):not([class*="-icon-badge"]):not([class*="__metric-icon"]) {
  color: var(--bn-muted) !important;
}

/* .wlf-pw-checklist__item (the live password checklist, originally
   register-only, now also used by password-update/reset.blade.php as
   part of this redesign) is a <p> with only 1 class, (0,1,0)
   specificity - loses outright to the sitewide body.pw-app-site
   p{color:#fff!important} rule (0,1,2), so its default/unmet state has
   actually been rendering white instead of muted gray on register too
   (not just the new reset.blade.php usage). Its .is-met variant already
   independently wins (2 classes beats the override's 1), so it's
   unaffected today - but re-declared here too, at matching higher
   specificity, purely so it stays correctly ordered relative to the
   fix below rather than relying on both sitting at different specificity
   tiers by accident. */
body.pw-app-site .wlf-pw-checklist__item {
  color: var(--bn-muted, #9ca3af) !important;
}
body.pw-app-site .wlf-pw-checklist__item.is-met {
  color: var(--bn-green-hi, #00C853) !important;
}

/* Homepage/dashboard "Live buy offers"/"Live sell offers" asset tabs
   (ads_table.blade.php): the permanent "All" tab reuses .bn-coin/
   .bn-coin__fallback (wlfi-p2p-sections.css) so it sits in the same
   16px circle badge every real coin icon uses, instead of looking like
   a missing/broken icon. That shared .bn-coin__fallback rule sizes its
   font-size for a 2-letter text glyph (e.g. "BT" for an unresolved
   coin image) though, which renders too small for a single icon glyph -
   bumped up here, scoped to just this icon via its own class so the
   text-glyph fallback elsewhere is untouched. */
.bn-ads-tabs__all-icon {
  font-size: 9px;
}

/* ==========================================================================
   Shared 5-star rating components (site-wide, loaded on every route via
   custom.css so they work identically on the trade review form, the
   authenticated ad-reviews page, and the public profile).

   .bn-star-display  - read-only partial-fill star rating (e.g. "4.7/5").
                        Two identical icon rows are stacked; the top "fill"
                        row is clipped to a percentage width so a fractional
                        rating (4.7 -> 94%) partially reveals the 5th icon,
                        same technique used for progress rings elsewhere.
   .bn-star-input    - accessible 5-star radio picker for submitting a
                        review. Radios are visually hidden but stay in the
                        tab order; :checked/:hover on a later-in-DOM sibling
                        (rendered first because of row-reverse) lights up
                        itself and everything visually to its left.
   ========================================================================== */
.bn-star-display {
  position: relative;
  display: inline-block;
  line-height: 1;
  font-size: var(--bn-star-size, 1rem);
  vertical-align: middle;
}
.bn-star-display__row {
  display: flex;
  gap: 0.15em;
  white-space: nowrap;
}
.bn-star-display__row--track {
  color: rgba(255, 255, 255, 0.16);
}
.bn-star-display__row--fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  width: var(--bn-star-pct, 0%);
  color: var(--bitnnock-gold, #ecc46c);
}
.bn-star-display__value {
  margin-left: 0.5em;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--bn-readable-text, #ffffff);
  vertical-align: middle;
}
.bn-star-display__count {
  margin-left: 0.35em;
  font-size: 0.8em;
  font-weight: 400;
  color: var(--bn-muted, #a8a29e);
  vertical-align: middle;
}

.bn-star-input {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.35rem;
}
.bn-star-input__radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.bn-star-input__star {
  cursor: pointer;
  font-size: 1.9rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.18);
  transition: color 0.15s ease, transform 0.1s ease;
}
.bn-star-input__star:active {
  transform: scale(0.92);
}
.bn-star-input__star:hover,
.bn-star-input__star:hover ~ .bn-star-input__star,
.bn-star-input__radio:checked ~ .bn-star-input__star {
  color: var(--bitnnock-gold, #ecc46c);
}
.bn-star-input__radio:focus-visible + .bn-star-input__star {
  outline: 2px solid var(--bitnnock-gold, #ecc46c);
  outline-offset: 3px;
  border-radius: 6px;
}
.bn-star-input__hint {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--bn-muted, #a8a29e);
}

/* ==========================================================================
   Trust score breakdown (own-profile only) - a collapsible disclosure on
   the public profile sidebar that shows the 8 weighted components behind
   App\Services\Reputation\TrustScoreCalculator's blended "Platform trust
   score" tile. Gated server-side to $isOwnProfile in
   public_profile_sidebar.blade.php (not just visually hidden), so the
   "Only visible to you" hint is accurate, not decorative.
   ========================================================================== */
.bn-trust-breakdown {
  color: inherit;
}
.bn-trust-breakdown__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
  padding: 0.15rem 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bn-gold);
}
.bn-trust-breakdown__summary::-webkit-details-marker {
  display: none;
}
.bn-trust-breakdown__summary-text {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.bn-trust-breakdown__summary-text::after {
  content: "\f107";
  font-family: "Line Awesome Free";
  font-weight: 900;
  margin-left: 0.15em;
  transition: transform 0.2s ease;
}
details[open] > .bn-trust-breakdown__summary .bn-trust-breakdown__summary-text::after {
  transform: rotate(180deg);
}
.bn-trust-breakdown__summary-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 9px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--bn-muted, #a8a29e);
  white-space: nowrap;
}
.bn-trust-breakdown__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin: 0.85rem 0 0;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: var(--bitnnock-gold-soft);
  border: 1px solid rgba(236, 196, 108, 0.28);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--bn-readable-text, #ffffff);
}
.bn-trust-breakdown__note i {
  color: var(--bitnnock-gold);
  margin-top: 0.15em;
  flex-shrink: 0;
}
.bn-trust-breakdown__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.bn-trust-breakdown__item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.bn-trust-breakdown__item-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--bn-readable-text, #ffffff);
}
.bn-trust-breakdown__item-value {
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--bitnnock-gold, #ecc46c);
  flex-shrink: 0;
}
.bn-trust-breakdown__item-value small {
  font-size: 0.7em;
  font-weight: 600;
  color: var(--bn-muted, #a8a29e);
}
.bn-trust-breakdown__bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.bn-trust-breakdown__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bitnnock-gold-deep, #f1dc9d), var(--bitnnock-gold, #ecc46c));
  transition: width 0.4s ease;
}
.bn-trust-breakdown__item-desc {
  margin: 0.35rem 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--bn-muted, #a8a29e);
}
.bn-trust-breakdown__item-weight {
  white-space: nowrap;
}
.bn-trust-breakdown__item-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  margin: 0.4rem 0 0;
  font-size: 0.74rem;
  line-height: 1.4;
  color: #f7dcbb;
}
.bn-trust-breakdown__item-tip i {
  color: var(--bitnnock-gold);
  margin-top: 0.15em;
  flex-shrink: 0;
}
.bn-trust-breakdown__empty {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  color: var(--bn-muted, #a8a29e);
}
.bn-trust-breakdown__empty i {
  color: var(--bitnnock-gold);
}
@media (prefers-reduced-motion: reduce) {
  .bn-trust-breakdown__bar-fill {
    transition: none;
  }
}

/* ==========================================================================
   Email/mobile/2FA/password-code verify pages — single-column layout
   ==========================================================================
   Same fix as .wlf-auth--password-request above (see the big comment block
   there), extended to the other five short-aside pages that were left on
   the old --split (side-by-side) card and never got it.

   Why these five needed it too: .wlf-auth__card--split uses
   align-items:stretch, so on desktop the aside column is forced to the
   same height as the form column. The form column on every one of these
   pages stacks a lot of content (status header, info notice, a full
   "before you submit" tips card, the 6-digit code panel, submit button,
   resend/footer links) - routinely 800-900px tall. The aside's actual
   content (heading + one paragraph + 3 short benefit rows) only needs
   ~350-400px. .wlf-auth__quote-inner centers that short content inside
   the stretched column, which reads as a large dead void above the
   aside text rather than a deliberate design choice - most visible on
   email-verify (reported: large empty black area above "Confirm it's
   you"), but the same content-height mismatch exists on all six pages.

   password-request already solved this by switching from
   .wlf-auth__card--split to .wlf-auth__card--single (forces
   grid-template-columns:1fr - see plasma-app.css) and adding the four
   overrides below so the now-stacked aside sizes to its own content
   instead of stretching. Applying the identical class swap + overrides
   to these five pages (blade files updated alongside this CSS) removes
   the void the same way, and brings every "enter a code" / "aside is
   short, form is long" auth page in this family to one consistent
   layout instead of two subtly different ones.
   ========================================================================== */
.wlf-auth--email-verify .wlf-container--wide,
.wlf-auth--mobile-verify .wlf-container--wide,
.wlf-auth--2fa-verify .wlf-container--wide,
.wlf-auth--password-verify .wlf-container--wide,
.wlf-auth--password-update .wlf-container--wide {
  max-width: 900px;
}

.wlf-auth--email-verify .wlf-auth__quote,
.wlf-auth--mobile-verify .wlf-auth__quote,
.wlf-auth--2fa-verify .wlf-auth__quote,
.wlf-auth--password-verify .wlf-auth__quote,
.wlf-auth--password-update .wlf-auth__quote {
  /* !important on border-right/justify-content only: matches
     password-request's identical note above - body.pw-app-site
     .wlf-auth__quote{justify-content:space-between;border-right:1px...}
     (plasma-app.css, ~768px+) has one extra type selector, which
     outweighs having one fewer class than this rule. */
  border-right: none !important;
  border-bottom: 1px solid var(--bn-line);
  justify-content: flex-start !important;
  height: auto;
  overflow: visible;
}

.wlf-auth--email-verify .wlf-auth__quote-inner,
.wlf-auth--mobile-verify .wlf-auth__quote-inner,
.wlf-auth--2fa-verify .wlf-auth__quote-inner,
.wlf-auth--password-verify .wlf-auth__quote-inner,
.wlf-auth--password-update .wlf-auth__quote-inner {
  flex: none;
  justify-content: flex-start;
}

.wlf-auth--email-verify .wlf-auth__form-wrap,
.wlf-auth--mobile-verify .wlf-auth__form-wrap,
.wlf-auth--2fa-verify .wlf-auth__form-wrap,
.wlf-auth--password-verify .wlf-auth__form-wrap,
.wlf-auth--password-update .wlf-auth__form-wrap {
  height: auto;
  overflow: visible;
}

/* Email-verify's simplified header (see email.blade.php) dropped its
   kicker line entirely - that block-level <p> used to force a line break
   between the mobile-only logo and the status icon below it regardless of
   the icon's own display value. Without it, the higher-specificity legacy
   .p2p-auth--email-verify .p2p-auth__status-icon rule (p2p-dashboard.css;
   2 classes beats .wlf-auth__status-icon's 1) sets display:inline-flex,
   which lets the icon sit on the same line as the logo on narrow
   viewports where the mobile logo becomes visible. Force block-level flex
   back explicitly (block for its own line, flex to keep the envelope
   glyph centered inside) rather than depending on a sibling that no
   longer exists. */
.wlf-auth--email-verify .p2p-auth__status-icon {
  display: flex;
}