/**
 * Poupex Play 4.0 — Fluxos financeiros (Depósito e Saque)
 * Namespace: .pp4-* / --pp4-*  ·  Escopo: .pp4-flow
 *
 * Sprints 4 e 5 do redesign.
 *
 * Um único componente para as duas telas: `deposito.php` e `saque.php`
 * já compartilhavam `.dep-card`, `.dep-preset`, `.dep-custom`,
 * `.dep-submit`, `.sq-pix-field` e `.balance-banner`. Duplicar o CSS
 * seria criar divergência garantida entre depósito e saque.
 *
 * TODOS os ganchos de JavaScript foram preservados:
 *   #dep-form #dep-valor #dep-metodo #dep-cpf #dep-custom-input #dep-submit
 *   #sq-form  #sq-valor  #sq-pix     #sq-max  #sq-custom-input  #sq-submit
 *   #sq-taxa-info #pix-modal #pix-copy-btn #pix-copy-code
 *   .dep-preset .dep-preset--active .dep-submit__amt [data-close-pix-modal]
 *   .is-open .shake
 */

/* ============================================================
   1 · CONTÊINER
   ============================================================ */

.pp4-flow {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-5);
  max-width: 720px;
  margin: 0 auto;
  color: var(--pp4-color-text);
}

/* Cabeçalho da página → design-system/shell.css (seção 8).
   Removido no Sprint 9: este bloco existia igual aqui, em wallet.css e
   em finance-flow.css/statement.css. O parcial `_page_header.php` serve
   dez telas, então o tratamento pertence ao shell, não ao escopo .pp4-flow. */

/* ============================================================
   2 · FAIXA DE SALDO
   ============================================================ */

.pp4-flow .balance-banner,
html[data-theme] .pp4-flow .balance-banner {
  position: relative;
  overflow: hidden;
  padding: var(--pp4-space-6) !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  box-shadow: var(--pp4-elev-1) !important;
  margin: 0 !important;
}

/* A camada decorativa do banner antigo trazia gradiente e brilho. */
.pp4-flow .balance-banner__bg { display: none !important; }

.pp4-flow .balance-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  position: relative;
}

.pp4-flow .balance-banner__label {
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-medium);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-flow .balance-banner__value,
.pp4-flow .balance-banner__value strong {
  font-size: 2.25rem;
  font-weight: var(--pp4-weight-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--pp4-color-text) !important;
}

/* ============================================================
   3 · CARDS DO FORMULÁRIO
   ============================================================ */

/* `brand-theme.css:768` usa
   `.shell--app .card:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary)`
   — especificidade 0,6,0 com !important. Só uma cadeia equivalente vence.
   Este é o seletor de card mais forte do CSS legado; qualquer tela nova
   que use `.card` precisa espelhá-lo. */
.pp4-flow .card:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary),
.pp4-flow .dep-card:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary),
.pp4-flow .card,
.pp4-flow .dep-card {
  padding: var(--pp4-space-5) !important;
  margin: 0 !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-left: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-lg) !important;
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  max-width: none;
}

.pp4-flow .dep-card__title {
  margin: 0 0 var(--pp4-space-4);
  font-size: var(--pp4-text-lg);
  font-weight: var(--pp4-weight-bold);
  letter-spacing: -0.01em;
  color: var(--pp4-color-text) !important;
}

.pp4-flow .dep-card__hint,
.pp4-flow .bolao-dep-hint__text {
  margin: -8px 0 var(--pp4-space-4);
  font-size: var(--pp4-text-sm);
  line-height: var(--pp4-leading-snug);
  color: var(--pp4-color-text-muted) !important;
}

/* Avisos contextuais (bolão / tarefas) — a cor vinha de style inline. */
.pp4-flow .bolao-dep-hint:not(.orange):not(.team-summary):not(.profile-header):not(.task-summary),
.pp4-flow .bolao-dep-hint,
html[data-theme] .pp4-flow .bolao-dep-hint {
  padding: var(--pp4-space-4) var(--pp4-space-5) !important;
  margin: 0 !important;
  border: 1px solid var(--pp4-color-border-blue) !important;
  border-left: 3px solid var(--pp4-color-blue) !important;
  border-radius: var(--pp4-radius-lg) !important;
  background: var(--pp4-color-blue-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.pp4-flow .bolao-dep-hint h3 {
  margin: 0 0 6px !important;
  font-size: var(--pp4-text-md) !important;
  font-weight: var(--pp4-weight-bold);
  color: var(--pp4-color-text) !important;
}

.pp4-flow .bolao-dep-hint p,
.pp4-flow .bolao-dep-hint__text {
  margin: 0 !important;
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-secondary) !important;
}

.pp4-flow .bolao-dep-hint strong { color: var(--pp4-color-text) !important; }

/* ============================================================
   4 · PRESETS DE VALOR
   ============================================================ */

.pp4-flow .dep-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pp4-space-2);
  margin: 0 0 var(--pp4-space-4);
  padding: 0;
  background: none;
}

.pp4-flow .dep-preset,
html[data-theme] .pp4-flow .dep-preset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--pp4-space-2);
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-md);
  background: var(--pp4-color-surface-2) !important;
  background-image: none !important;
  color: var(--pp4-color-text) !important;
  font-family: inherit;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-semibold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: none !important;
  transition:
    background var(--pp4-duration) var(--pp4-ease),
    border-color var(--pp4-duration) var(--pp4-ease),
    transform var(--pp4-duration-fast) var(--pp4-ease);
}

.pp4-flow .dep-preset:hover {
  border-color: var(--pp4-color-border-strong) !important;
  transform: translateY(-1px);
}

/* Estado alternado pelo JS existente — classe preservada. */
.pp4-flow .dep-preset--active,
html[data-theme] .pp4-flow .dep-preset--active {
  background: var(--pp4-color-blue) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.pp4-flow .dep-preset:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

/* ============================================================
   5 · CAMPO DE VALOR
   ============================================================ */

.pp4-flow .dep-custom,
html[data-theme] .pp4-flow .dep-custom {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-2);
  min-height: 56px;
  padding: 0 var(--pp4-space-4) !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-md) !important;
  background: var(--pp4-color-surface-2) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.pp4-flow .dep-custom:focus-within {
  border-color: var(--pp4-color-border-blue) !important;
  box-shadow: 0 0 0 3px var(--pp4-color-blue-soft) !important;
}

.pp4-flow .dep-custom__cur {
  font-size: var(--pp4-text-lg);
  font-weight: var(--pp4-weight-semibold);
  color: var(--pp4-color-text-muted) !important;
  flex-shrink: 0;
}

.pp4-flow .dep-custom__input,
html[data-theme] .pp4-flow .dep-custom__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: none !important;
  color: var(--pp4-color-text) !important;
  caret-color: var(--pp4-color-blue-bright) !important;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: var(--pp4-weight-bold);
  font-variant-numeric: tabular-nums;
  outline: none;
  box-shadow: none !important;
  -moz-appearance: textfield;
  appearance: textfield;
}

.pp4-flow .dep-custom__input::-webkit-outer-spin-button,
.pp4-flow .dep-custom__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pp4-flow .dep-custom__input::placeholder { color: var(--pp4-color-text-muted) !important; opacity: 1; }

/* Botão MÁX do saque */
.pp4-flow .dep-custom__max,
html[data-theme] .pp4-flow .dep-custom__max {
  flex-shrink: 0;
  min-height: 32px;
  padding: 0 var(--pp4-space-3);
  border: 1px solid var(--pp4-color-border-blue) !important;
  border-radius: var(--pp4-radius-sm);
  background: var(--pp4-color-blue-soft) !important;
  background-image: none !important;
  color: var(--pp4-color-text) !important;
  font-family: inherit;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: none !important;
}

.pp4-flow .dep-custom__max:hover { background: var(--pp4-color-blue) !important; color: #ffffff !important; }

/* Sacudida de erro — mesma classe usada pelo JS. */
@keyframes pp4-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.pp4-flow .shake { animation: pp4-shake 320ms var(--pp4-ease); }

/* ============================================================
   6 · CAMPO DE CPF / CHAVE PIX
   ============================================================ */

.pp4-flow .sq-pix-field,
html[data-theme] .pp4-flow .sq-pix-field {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  min-height: 52px;
  padding: 0 var(--pp4-space-4) !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-md) !important;
  background: var(--pp4-color-surface-2) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.pp4-flow .sq-pix-field:focus-within {
  border-color: var(--pp4-color-border-blue) !important;
  box-shadow: 0 0 0 3px var(--pp4-color-blue-soft) !important;
}

.pp4-flow .sq-pix-field svg {
  width: var(--pp4-icon-md);
  height: var(--pp4-icon-md);
  color: var(--pp4-color-text-muted);
  flex-shrink: 0;
}

.pp4-flow .sq-pix-field__input,
.pp4-flow .sq-pix-field input,
html[data-theme] .pp4-flow .sq-pix-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: none !important;
  color: var(--pp4-color-text) !important;
  caret-color: var(--pp4-color-blue-bright) !important;
  font-family: inherit;
  font-size: var(--pp4-text-base);
  font-weight: var(--pp4-weight-medium);
  outline: none;
  box-shadow: none !important;
}

.pp4-flow .sq-pix-field input::placeholder { color: var(--pp4-color-text-muted) !important; opacity: 1; }

/* ============================================================
   7 · SELETOR DE CARTEIRA (saque)
   ============================================================ */

.pp4-flow .sq-sel,
.pp4-flow .sq-wallets-strip {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-4);
  margin: 0 !important;
  padding: 0;
  background: none;
  border: 0;
}

.pp4-flow .sq-sel h2 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: var(--pp4-weight-bold);
  letter-spacing: -0.02em;
  color: var(--pp4-color-text);
}

.pp4-flow .sq-wallets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pp4-space-3);
}

.pp4-flow .sq-wallet,
html[data-theme] .pp4-flow .sq-wallet {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-3);
  padding: var(--pp4-space-5) !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-lg) !important;
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  color: var(--pp4-color-text) !important;
  text-decoration: none;
  box-shadow: none !important;
  transition: border-color var(--pp4-duration) var(--pp4-ease), transform var(--pp4-duration-fast) var(--pp4-ease);
}

.pp4-flow .sq-wallet:hover {
  border-color: var(--pp4-color-border-strong) !important;
  transform: translateY(-2px);
}

.pp4-flow .sq-wallet__name {
  margin: 0;
  font-size: var(--pp4-text-lg);
  font-weight: var(--pp4-weight-bold);
  color: var(--pp4-color-text) !important;
}

.pp4-flow .sq-wallet__avail {
  font-size: 1.5rem;
  font-weight: var(--pp4-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--pp4-color-success) !important;
}

.pp4-flow .sq-sel__label,
.pp4-flow .sq-sel__sub,
.pp4-flow .sq-sel__hint {
  font-size: var(--pp4-text-sm);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-flow .sq-sel__value {
  font-variant-numeric: tabular-nums;
  color: var(--pp4-color-text) !important;
}

.pp4-flow .sq-sel__card,
html[data-theme] .pp4-flow .sq-sel__card {
  padding: var(--pp4-space-4) !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-lg) !important;
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ============================================================
   8 · BOTÃO DE ENVIO
   ============================================================ */

.pp4-flow .dep-submit,
html[data-theme] .pp4-flow .dep-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp4-space-2);
  width: 100%;
  min-height: 52px;
  padding: 0 var(--pp4-space-5);
  border: 0 !important;
  border-radius: var(--pp4-radius-md);
  background: var(--pp4-color-blue) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-family: inherit;
  font-size: var(--pp4-text-base);
  font-weight: var(--pp4-weight-bold);
  cursor: pointer;
  box-shadow: none !important;
  transition: background var(--pp4-duration) var(--pp4-ease), transform var(--pp4-duration-fast) var(--pp4-ease);
}

.pp4-flow .dep-submit:hover:not(:disabled) { background: #0f2ea8 !important; transform: translateY(-1px); }
.pp4-flow .dep-submit:active:not(:disabled) { transform: translateY(0); }

.pp4-flow .dep-submit:disabled,
html[data-theme] .pp4-flow .dep-submit:disabled {
  background: var(--pp4-color-surface-2) !important;
  color: var(--pp4-color-text-muted) !important;
  cursor: not-allowed;
  transform: none;
}

.pp4-flow .dep-submit:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

.pp4-flow .dep-submit__amt { font-variant-numeric: tabular-nums; }

/* Informação de taxa do saque */
.pp4-flow .sq-taxa-info,
.pp4-flow #sq-taxa-info {
  margin: 0;
  font-size: var(--pp4-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--pp4-color-text-muted) !important;
}

/* ============================================================
   9 · MODAL PIX
   ============================================================ */

.pp4-flow-modal .task-modal__backdrop,
.pp4-flow .task-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 13, 0.72);
  backdrop-filter: blur(2px);
}

.pp4-flow-modal .task-modal__sheet,
html[data-theme] .pp4-flow-modal .task-modal__sheet {
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-xl) !important;
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  box-shadow: var(--pp4-elev-3) !important;
  color: var(--pp4-color-text);
}

.pp4-flow-modal .task-modal__close,
html[data-theme] .pp4-flow-modal .task-modal__close {
  width: var(--pp4-control-md);
  height: var(--pp4-control-md);
  border: 0 !important;
  border-radius: 10px;
  background: transparent !important;
  color: var(--pp4-color-text-muted) !important;
}

.pp4-flow-modal .task-modal__close:hover {
  background: var(--pp4-color-surface-2) !important;
  color: var(--pp4-color-text) !important;
}

.pp4-flow-modal .pix-pay-modal__title {
  margin: 0 0 4px;
  font-size: var(--pp4-text-lg);
  font-weight: var(--pp4-weight-bold);
  color: var(--pp4-color-text) !important;
}

.pp4-flow-modal .pix-pay-modal__amount,
.pp4-flow-modal .pix-pay-modal__amount strong {
  margin: 0;
  font-size: 2rem;
  font-weight: var(--pp4-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--pp4-color-success) !important;
}

.pp4-flow-modal .pix-pay-modal__badge,
html[data-theme] .pp4-flow-modal .pix-pay-modal__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-warning-soft) !important;
  background-image: none !important;
  color: var(--pp4-color-warning) !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
}

.pp4-flow-modal .pix-pay-modal__foot {
  margin: var(--pp4-space-3) 0 0;
  font-size: var(--pp4-text-sm);
  line-height: var(--pp4-leading-snug);
  color: var(--pp4-color-text-muted) !important;
}

/* A placa branca do QR é requisito funcional: leitores precisam de
   fundo claro e margem de silêncio. */
.pp4-flow-modal #pix-qr-box {
  padding: var(--pp4-space-3);
  border-radius: var(--pp4-radius-md);
  background: #ffffff;
}

.pp4-flow-modal #pix-copy-code,
html[data-theme] .pp4-flow-modal #pix-copy-code {
  width: 100%;
  padding: var(--pp4-space-3) !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-md) !important;
  background: var(--pp4-color-surface-2) !important;
  color: var(--pp4-color-text) !important;
  font-family: var(--pp4-font-mono);
  font-size: var(--pp4-text-xs);
  line-height: 1.5;
  resize: none;
}

.pp4-flow-modal .task-modal__cta,
html[data-theme] .pp4-flow-modal .task-modal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: var(--pp4-space-3);
  border: 0 !important;
  border-radius: var(--pp4-radius-md);
  background: var(--pp4-color-success) !important;
  background-image: none !important;
  color: var(--pp4-color-success-ink) !important;
  font-family: inherit;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-bold);
  cursor: pointer;
  box-shadow: none !important;
}

.pp4-flow-modal .task-modal__cta:hover { background: #00c765 !important; }

.pp4-flow-modal label {
  display: block;
  margin: var(--pp4-space-4) 0 var(--pp4-space-2);
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
  color: var(--pp4-color-text-muted) !important;
}

/* ============================================================
   10 · NEUTRALIZAÇÃO DO TEMA LEGADO
   ============================================================ */

/* `.shell--app p` = 0,1,1 !important. Aqui 0,2,0. */
.pp4-flow .dep-card__hint,
.pp4-flow .bolao-dep-hint__text,
.pp4-flow .pix-pay-modal__foot,
.pp4-flow .sq-sel__hint,
.pp4-flow .balance-banner__label {
  color: var(--pp4-color-text-muted) !important;
}

/* `.shell--app input` força branco e cursor dourado. */
.pp4-flow .dep-custom .dep-custom__input,
.pp4-flow .sq-pix-field input,
.pp4-flow .dep-card input {
  color: var(--pp4-color-text) !important;
  caret-color: var(--pp4-color-blue-bright) !important;
}

/* Espelho da regra genérica de links (0,8,1) com `.pp4-flow` → 0,9,1. */
.pp4-shell .content .pp4-flow a.sq-wallet:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab) {
  color: var(--pp4-color-text) !important;
}

/* Rótulos e ícones herdam do botão. */
.pp4-flow .dep-submit span,
.pp4-flow .dep-submit svg,
.pp4-flow .dep-preset span {
  color: inherit !important;
}

/* —— Tipografia: o tema antigo pinta títulos, parágrafos, `small` e
       `span` de creme ou ouro por regras `.shell--app <elemento>`.
       Três níveis de classe vencem todas elas. —— */
.pp4-flow .card h3,
.pp4-flow .dep-card .dep-card__title,
.pp4-flow .bolao-dep-hint h3,
.pp4-flow .sq-sel h2,
.pp4-flow .sq-wallet .sq-wallet__name {
  color: var(--pp4-color-text) !important;
}

.pp4-flow .card p,
.pp4-flow .card small,
.pp4-flow .card span,
.pp4-flow .dep-card .dep-card__hint,
.pp4-flow .dep-card .dep-custom__cur,
.pp4-flow .bolao-dep-hint .bolao-dep-hint__text,
.pp4-flow .sq-wallet .sq-wallet__desc,
.pp4-flow .sq-wallet .sq-wallet__meta,
.pp4-flow .sq-wallet .sq-wallet__avail span,
.pp4-flow .balance-banner .balance-banner__label {
  color: var(--pp4-color-text-muted) !important;
}

.pp4-flow .card strong,
.pp4-flow .balance-banner .balance-banner__value,
.pp4-flow .balance-banner .balance-banner__value strong {
  color: var(--pp4-color-text) !important;
}

.pp4-flow .sq-wallet .sq-wallet__avail strong,
.pp4-flow .dep-card .dep-custom__input {
  color: var(--pp4-color-text) !important;
}

.pp4-flow .sq-wallet .sq-wallet__avail strong { color: var(--pp4-color-success) !important; }

/* Selo e ícone do cartão de carteira (tela de escolha do saque). */
.pp4-flow .sq-wallet .sq-wallet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp4-space-2);
}

.pp4-flow .sq-wallet .sq-wallet__tag,
html[data-theme] .pp4-flow .sq-wallet .sq-wallet__tag {
  padding: 3px 9px;
  border-radius: var(--pp4-radius-pill);
  /* app.css:6109 dá `border: 1px solid rgba(232,212,139,.35)`. O Sprint 5
     trocou fundo e texto, mas não a borda: sobrava um contorno dourado. */
  border: 1px solid var(--pp4-color-border) !important;
  background: var(--pp4-color-surface-2) !important;
  background-image: none !important;
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
}

.pp4-flow .sq-wallet .sq-wallet__icon,
html[data-theme] .pp4-flow .sq-wallet .sq-wallet__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--pp4-color-blue-soft) !important;
  background-image: none !important;
  color: var(--pp4-color-blue-bright) !important;
}

.pp4-flow .sq-wallet .sq-wallet__icon svg,
.pp4-flow .sq-wallet .sq-wallet__icon svg * {
  width: 20px;
  height: 20px;
  color: currentColor !important;
  stroke: currentColor !important;
}

.pp4-flow .sq-wallet .sq-wallet__avail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--pp4-space-2);
  border-top: 1px solid var(--pp4-color-border);
}

.pp4-flow .sq-wallet .sq-wallet__cta {
  align-self: flex-start;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
  color: var(--pp4-color-blue-bright) !important;
}

.pp4-flow .sq-wallets-head h2 { margin: 0 0 4px; }
.pp4-flow .sq-wallets-head p { margin: 0; color: var(--pp4-color-text-muted) !important; }

/* Últimos resíduos: elementos genéricos e o rótulo do campo PIX/CPF.
   Quatro níveis vencem qualquer cadeia `:not()` do tema antigo. */
html[data-theme] .pp4-flow .card h3,
html[data-theme] .pp4-flow .sq-sel h3 {
  color: var(--pp4-color-text) !important;
}

html[data-theme] .pp4-flow .card small,
html[data-theme] .pp4-flow .card > span,
html[data-theme] .pp4-flow .sq-wallet .sq-wallet__tag,
html[data-theme] .pp4-flow .sq-wallet .sq-wallet__avail > span {
  color: var(--pp4-color-text-muted) !important;
}

html[data-theme] .pp4-flow .sq-wallet .sq-wallet__avail,
html[data-theme] .pp4-flow .sq-wallet .sq-wallet__avail:not(.orange):not(.team-summary) {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 1px solid var(--pp4-color-border) !important;
}

html[data-theme] .pp4-flow .dep-card label.sq-pix-field,
html[data-theme] .pp4-flow label.sq-pix-field {
  color: var(--pp4-color-text) !important;
  background: var(--pp4-color-surface-2) !important;
  background-image: none !important;
  border-color: var(--pp4-color-border) !important;
}

/* ============================================================
   11 · RESPONSIVIDADE
   ============================================================ */

@media (max-width: 767px) {
  .pp4-flow { gap: var(--pp4-space-4); max-width: none; }
  .pp4-flow .page-header__title,
  .pp4-flow .sq-sel h2 { font-size: 1.5rem; }
  .pp4-flow .balance-banner { padding: var(--pp4-space-5) !important; }
  .pp4-flow .balance-banner__value,
  .pp4-flow .balance-banner__value strong { font-size: 2rem; }
  .pp4-flow .card,
  .pp4-flow .dep-card { padding: var(--pp4-space-4) !important; }
  .pp4-flow .sq-wallets { grid-template-columns: minmax(0, 1fr); }
  .pp4-flow-modal .pix-pay-modal__amount,
  .pp4-flow-modal .pix-pay-modal__amount strong { font-size: 1.75rem; }
}

/* Presets: 3 colunas em 390px dariam 110px por bloco, que ainda comporta
   "R$ 15.000". Abaixo de 360 caem para 2. */
@media (max-width: 359px) {
  .pp4-flow .dep-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   12 · MOVIMENTO REDUZIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .pp4-flow *,
  .pp4-flow *::before,
  .pp4-flow *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .pp4-flow .dep-preset:hover,
  .pp4-flow .sq-wallet:hover,
  .pp4-flow .dep-submit:hover:not(:disabled) { transform: none; }
}