/* =============================================================================
 * account-m3.css — [1.6.118.118] Material 3 para a conta do artista
 *
 * Mobile-first. Assenta nos tokens existentes (01-tokens.css): dourado
 * --rmbz-brand, fundos escuros em camadas, espaços e radius.
 * Aqui adicionamos a camada Material 3 (state layers, componentes, layout
 * responsivo). Prefixo .m3- para não colidir com o que já existe.
 * ========================================================================== */

/* ---- Tokens M3 complementares ---- */
:root {
  --m3-gap: var(--rmbz-space-3);
  --m3-card-radius: var(--rmbz-radius-xl);     /* 24px */
  --m3-pill: var(--rmbz-radius-pill);
  --m3-touch: 48px;                            /* alvo mínimo do dedo */
  --m3-state-hover: rgba(240, 185, 11, 0.08);
  --m3-state-press: rgba(240, 185, 11, 0.14);
}

/* ---- Contentor da conta (mobile-first, 1 coluna) ---- */
.m3-account {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--rmbz-space-4) var(--rmbz-space-3) var(--rmbz-space-12);
  font-family: var(--rmbz-font-body);
  color: var(--rmbz-text-primary);
}

/* ---- Cabeçalho (saudação + perfil) ---- */
.m3-appbar {
  display: flex;
  align-items: center;
  gap: var(--rmbz-space-3);
  padding: var(--rmbz-space-2) var(--rmbz-space-1) var(--rmbz-space-4);
}
.m3-appbar__logo {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--rmbz-radius-md);
  background: #fff; color: #000;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
  font-family: var(--rmbz-font-display);
}
.m3-appbar__greet { flex: 1; min-width: 0; }
.m3-appbar__greet strong {
  display: block; font-size: var(--rmbz-text-base);
  font-weight: 600; color: var(--rmbz-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m3-appbar__greet span {
  font-size: var(--rmbz-text-xs); color: var(--rmbz-text-muted);
}
.m3-iconbtn {
  width: var(--m3-touch); height: var(--m3-touch); flex: none;
  border: none; background: var(--rmbz-bg-elevated);
  color: var(--rmbz-text-secondary);
  border-radius: var(--rmbz-radius-pill);
  display: grid; place-items: center; cursor: pointer;
  font-size: 20px; transition: background .15s;
}
.m3-iconbtn:hover { background: var(--rmbz-bg-hover); }
.m3-iconbtn:active { transform: scale(0.96); }

/* ---- Card do saldo (destaque) ---- */
.m3-balance {
  background: var(--rmbz-bg-surface);
  border: 0.5px solid var(--rmbz-brand-glow);
  border-radius: var(--m3-card-radius);
  padding: var(--rmbz-space-5);
}
.m3-balance__label {
  color: var(--rmbz-text-muted); font-size: var(--rmbz-text-xs);
}
.m3-balance__value {
  display: flex; align-items: baseline; gap: var(--rmbz-space-1);
  margin-top: var(--rmbz-space-1);
}
.m3-balance__value b {
  color: var(--rmbz-brand); font-size: var(--rmbz-text-3xl);
  font-weight: 700; letter-spacing: -1px; line-height: 1;
  font-family: var(--rmbz-font-display);
}
.m3-balance__value span { color: var(--rmbz-brand); font-size: var(--rmbz-text-base); }
.m3-balance__split {
  display: flex; gap: var(--rmbz-space-2); margin-top: var(--rmbz-space-4);
}
.m3-mini {
  flex: 1; background: var(--rmbz-bg-elevated);
  border-radius: var(--rmbz-radius-md); padding: var(--rmbz-space-3);
}
.m3-mini__k { color: var(--rmbz-text-muted); font-size: var(--rmbz-text-2xs); }
.m3-mini__v { color: var(--rmbz-text-primary); font-size: var(--rmbz-text-sm); font-weight: 600; margin-top: 2px; }
.m3-balance__actions {
  display: flex; gap: var(--rmbz-space-2); margin-top: var(--rmbz-space-3);
}

/* ---- Botões M3 ---- */
.m3-btn {
  min-height: var(--m3-touch);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--rmbz-space-2);
  border-radius: var(--m3-pill); padding: 0 var(--rmbz-space-5);
  font-family: var(--rmbz-font-body); font-size: var(--rmbz-text-sm);
  font-weight: 600; cursor: pointer; border: none;
  transition: filter .15s, background .15s, transform .1s;
}
.m3-btn:active { transform: scale(0.98); }
.m3-btn--filled { background: var(--rmbz-brand); color: var(--rmbz-text-on-brand); }
.m3-btn--filled:hover { filter: brightness(1.05); }
.m3-btn--tonal { background: var(--rmbz-brand-soft); color: var(--rmbz-brand); }
.m3-btn--outlined { background: transparent; color: var(--rmbz-brand); border: 1px solid var(--rmbz-brand); }
.m3-btn--outlined:hover { background: var(--m3-state-hover); }
.m3-btn--block { width: 100%; }

/* ---- Barra de abas (deslizável no mobile) ---- */
.m3-tabs {
  display: flex; gap: var(--rmbz-space-2);
  margin-top: var(--rmbz-space-4);
  margin-bottom: var(--rmbz-space-5);
  padding-bottom: var(--rmbz-space-3);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow-x: auto;
  scrollbar-width: none;
}
.m3-tabs::-webkit-scrollbar { display: none; }
.m3-tab {
  flex: none; white-space: nowrap;
  min-height: 40px; padding: 0 var(--rmbz-space-4);
  border: none; border-radius: var(--m3-pill);
  background: var(--rmbz-bg-elevated); color: var(--rmbz-text-secondary);
  font-size: var(--rmbz-text-sm); font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--rmbz-space-2);
  transition: background .15s, color .15s;
}
.m3-tab[aria-selected="true"],
.m3-tab.active {
  background: var(--rmbz-brand); color: var(--rmbz-text-on-brand); font-weight: 600;
}
.m3-tab:not([aria-selected="true"]):not(.active):hover { background: var(--rmbz-bg-hover); }

/* ---- Cards de conteúdo ---- */
.m3-card {
  background: var(--rmbz-bg-surface);
  border: 0.5px solid rgba(255,255,255,0.06);
  border-radius: var(--rmbz-radius-lg);
  padding: var(--rmbz-space-4);
}
.m3-card + .m3-card { margin-top: var(--rmbz-space-3); }

/* ---- Grelha responsiva de cartões ---- */
.m3-grid {
  display: grid; gap: var(--rmbz-space-3);
  grid-template-columns: 1fr;            /* mobile: 1 coluna */
}

/* ---- Badge de estado ---- */
.m3-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--rmbz-text-2xs); font-weight: 600;
  padding: 3px 10px; border-radius: var(--m3-pill);
}

/* ============================================================================
 * RESPONSIVO — a partir de tablet/desktop, mais colunas
 * ========================================================================== */
@media (min-width: 600px) {
  .m3-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .m3-grid { grid-template-columns: repeat(3, 1fr); }
  .m3-account { padding-left: var(--rmbz-space-4); padding-right: var(--rmbz-space-4); }
}

/* ============================================================================
 * Harmonia M3 dos modais de depósito/levantamento (já usam design system).
 * Apenas alinhamos cantos e botões com o resto da conta — sem mexer no PHP.
 * ========================================================================== */
.rmbz-modal__panel {
  border-radius: var(--rmbz-radius-xl) !important;   /* combina com os cards M3 */
}
.rmbz-modal__header {
  padding-top: var(--rmbz-space-5) !important;
  padding-bottom: var(--rmbz-space-4) !important;
}
/* Botões de submit dentro dos modais ganham forma pill M3 e alvo de toque */
#deposit-modal .rmbz-btn,
#withdrawal-modal .rmbz-btn,
.rmbz-modal__footer .rmbz-btn {
  border-radius: var(--rmbz-radius-pill) !important;
  min-height: var(--m3-touch);
}
/* Pills de operadora (M-Pesa/E-Mola) mais arredondadas, coerentes com M3 */
.rmbz-radio-pill {
  border-radius: var(--rmbz-radius-md) !important;
}
/* No mobile, botões do rodapé do modal ocupam a largura toda (mais fáceis) */
@media (max-width: 600px) {
  .rmbz-modal__footer { flex-direction: column-reverse; gap: var(--rmbz-space-2); }
  .rmbz-modal__footer .rmbz-btn { width: 100%; }
}

/* ============================================================================
 * [1.6.118.118] FIX — cards de objetivo (Painel de Envio) a transbordar no
 * mobile. No layout row, o título e o subtítulo ficavam lado a lado e
 * empurravam o card para fora do ecrã. Forçamos: card nunca passa a largura,
 * texto encolhe e o subtítulo quebra para baixo do título.
 * ========================================================================== */
.rmbz-type-selector,
.rmbz-type-selector__grid { max-width: 100%; }

.rmbz-type-card {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
@media (max-width: 640px) {
  /* o card é ícone (fixo) + texto (flexível que encolhe) */
  .rmbz-type-card { flex-wrap: wrap; }
  .rmbz-type-card__icon { flex: 0 0 auto; }
  /* título ocupa o resto da linha ao lado do ícone */
  .rmbz-type-card__title {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* subtítulo cai para a linha de baixo, alinhado após o ícone */
  .rmbz-type-card__subtitle {
    flex: 1 1 100%;
    min-width: 0;
    padding-left: calc(40px + var(--rmbz-space-3)); /* alinha com o texto */
    overflow-wrap: anywhere;
  }
  .rmbz-type-card__lock-reason {
    flex: 1 1 100%;
    min-width: 0;
  }
}