/* ==========================================================================
   Maxima Bet - High-Performance Native Mobile & Desktop Modal System
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  -webkit-overflow-scrolling: touch;
}

.modal-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.modal-card {
  background: #111726;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85);
  position: relative;
  overflow: hidden;
  transform: translateY(0);
}

.wallet-modal-card { max-width: 430px; }
.wallet-quick-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin: -.2rem 0 .8rem; }
.wallet-quick-values button { padding: .5rem .2rem; border: 1px solid rgba(0,255,153,.22); border-radius: .5rem; background: rgba(0,255,153,.07); color: #00ff99; font-size: .72rem; font-weight: 800; cursor: pointer; }
.wallet-quick-values button:hover { background: rgba(0,255,153,.18); border-color: #00ff99; }
.wallet-pix-result { display: flex; flex-direction: column; align-items: center; gap: .65rem; margin-top: .8rem; }
.wallet-pix-result img { width: 180px; height: 180px; border-radius: .65rem; background: #fff; object-fit: contain; }
.wallet-pix-result textarea { width: 100%; min-height: 74px; resize: vertical; border: 1px solid rgba(255,255,255,.14); border-radius: .5rem; background: rgba(255,255,255,.06); color: #fff; padding: .55rem; font-size: .7rem; }
.wallet-pix-result small, .wallet-disclaimer { color: rgba(255,255,255,.55); font-size: .68rem; line-height: 1.4; text-align: center; }

/* Header */
.modal-header {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.btn-close-modal {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}
.btn-close-modal:active, .btn-close-modal:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Body Scrollable */
.modal-body {
  padding: 16px 18px 24px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

/* Forms */
.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 5px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #0d121d;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  height: 46px;
}

.input-wrapper:focus-within {
  border-color: #00ff99;
  box-shadow: 0 0 0 2px rgba(0, 255, 153, 0.2);
}

.input-icon {
  width: 18px;
  height: 18px;
  margin-left: 12px;
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.input-wrapper input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  padding-right: 12px;
}

.input-wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 500;
}

.btn-toggle-pwd {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  padding: 10px 12px;
  cursor: pointer;
  touch-action: manipulation;
}

/* Submit Button */
.btn-submit-auth {
  width: 100%;
  height: 46px;
  border-radius: 10px;
  background: #00ff99;
  color: #06190f;
  border: none;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  margin-top: 8px;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-submit-auth:active {
  background: #00cc7a;
}

.btn-submit-auth:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Switch */
.auth-switch {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 12px;
}

.auth-switch button {
  background: transparent;
  border: none;
  color: #00ff99;
  font-weight: 800;
  cursor: pointer;
  margin-left: 4px;
  text-decoration: underline;
  touch-action: manipulation;
}

/* Alerts */
.auth-alert {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}
.auth-alert.error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}
.auth-alert.success {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}

/* Mobile Specific Bottom-Sheet (Exact Maxima Bet) */
@media (max-width: 640px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal-card {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    max-height: 85vh;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
}

/* Carteira nativa — mesma hierarquia visual no desktop e no mobile. */
.wallet-overlay { background: rgba(4, 6, 14, .82); backdrop-filter: blur(5px); }
.wallet-native-card {
  max-width: 510px;
  max-height: min(92vh, 760px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: #101522;
  color: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.62);
}
.wallet-native-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 10px 14px 10px 18px; border-bottom: 1px solid rgba(255,255,255,.09); }
.wallet-native-topbar > div { display: flex; flex-direction: column; gap: 2px; }
.wallet-native-topbar strong { font-size: .94rem; font-weight: 850; }
.wallet-native-topbar span { color: rgba(255,255,255,.48); font-size: .68rem; }
.wallet-native-body { overflow-y: auto; padding: 0; }
.wallet-deposit-step, .wallet-withdraw-form { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.wallet-step-header h2 { margin: 0; color: #fff; font-size: 1rem; font-weight: 800; }
.wallet-step-header p { margin: 3px 0 0; color: rgba(255,255,255,.55); font-size: .74rem; }
.wallet-amount-label { margin-bottom: -8px; color: rgba(255,255,255,.72); font-size: .72rem; font-weight: 700; }
.wallet-amount-field { display: flex; align-items: center; height: 58px; border: 2px solid rgba(255,255,255,.15); border-radius: 7px; background: transparent; transition: border-color .15s ease; }
.wallet-amount-field:focus-within { border-color: rgba(255,255,255,.72); }
.wallet-amount-field > span { padding-left: 13px; margin-right: 8px; color: rgba(255,255,255,.5); font-size: 1.45rem; }
.wallet-amount-field input { width: 100%; height: 52px; padding: 0 12px 0 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: 1.75rem; font-weight: 700; }
.wallet-amount-field input::placeholder { color: rgba(255,255,255,.32); }
.wallet-withdraw-balance, .wallet-withdraw-cpf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.055); }
.wallet-withdraw-balance span, .wallet-withdraw-cpf > span { color: rgba(255,255,255,.58); font-size: .68rem; font-weight: 750; }
.wallet-withdraw-balance strong { color: #00e892; font-size: .92rem; }
.wallet-withdraw-cpf { display: grid; grid-template-columns: 1fr auto; }
.wallet-withdraw-cpf > span { grid-column: 1 / -1; }
.wallet-withdraw-cpf small { color: rgba(255,255,255,.62); font-size: .7rem; font-weight: 800; }
.wallet-withdraw-cpf strong { color: #fff; font-size: .78rem; letter-spacing: .02em; }
.wallet-quick-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.wallet-quick-values button { position: relative; display: flex; height: 64px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 6px 3px; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; background: rgba(255,255,255,.07); color: #fff; cursor: pointer; transition: .15s ease; }
.wallet-quick-values button:hover, .wallet-quick-values button.is-selected { border-color: #00e892; background: rgba(0,232,146,.12); }
.wallet-quick-values strong { font-size: .9rem; line-height: 1; }
.wallet-quick-values small { color: rgba(255,255,255,.55); font-size: .61rem; line-height: 1; }
.wallet-quick-values em { position: absolute; top: -7px; padding: 2px 5px; border-radius: 4px; background: #ef4444; color: #fff; font-size: .48rem; font-style: normal; font-weight: 800; text-transform: uppercase; }
.wallet-pix-submit { height: 46px; border-radius: 6px; background: #00e892 !important; color: #06130d !important; font-size: .76rem; font-weight: 900; }
.wallet-pix-submit:hover { background: #00ff9d !important; }
.wallet-trust-footer { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; overflow: hidden; }
.wallet-trust-footer span { display: flex; min-height: 49px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px; color: rgba(255,255,255,.48); font-size: .56rem; text-align: center; }
.wallet-trust-footer span + span { border-left: 1px solid rgba(255,255,255,.1); }
.wallet-trust-footer b { color: #00e892; font-size: .82rem; }
.wallet-pix-result { align-items: stretch; gap: 14px; margin: 0; padding: 16px 18px 18px; }
.wallet-result-header { display: flex; align-items: center; justify-content: space-between; }
.wallet-result-header p { color: #00e892; font-size: 1.65rem; font-weight: 800; }
.wallet-result-header button { border: 0; background: transparent; color: rgba(255,255,255,.58); font-size: .66rem; cursor: pointer; }
.wallet-pix-flow { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 16px; }
.wallet-qr-panel { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border-radius: 9px; background: #fff; }
.wallet-qr-panel img { width: 160px; height: 160px; border-radius: 0; background: #fff; }
.wallet-qr-panel strong { color: #111827; font-size: .65rem; text-transform: uppercase; }
.wallet-pix-flow ol { display: flex; flex-direction: column; gap: 18px; padding: 0; margin: 0; list-style: none; }
.wallet-pix-flow li { display: flex; align-items: flex-start; gap: 8px; }
.wallet-pix-flow li > b { display: inline-flex; width: 22px; height: 22px; flex: 0 0 22px; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,.14); font-size: .65rem; }
.wallet-pix-flow li span { display: flex; flex-direction: column; gap: 3px; }
.wallet-pix-flow li strong { font-size: .68rem; }
.wallet-pix-flow li small { color: rgba(255,255,255,.58); font-size: .62rem; }
.wallet-pix-code { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.15); border-radius: 6px 6px 0 0; background: rgba(255,255,255,.05); }
.wallet-pix-code span { padding: 8px 10px 0; color: rgba(255,255,255,.56); font-size: .62rem; }
.wallet-pix-code input { height: 38px; padding: 0 10px; border: 0; outline: 0; background: transparent; color: #fff; font-size: .65rem; text-overflow: ellipsis; }
.wallet-copy-pix { margin-top: -14px; border-radius: 0 0 6px 6px; }
.wallet-waiting { display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 7px; background: rgba(255,255,255,.06); }
.wallet-waiting i { width: 20px; height: 20px; flex: 0 0 20px; border: 2px solid rgba(255,255,255,.22); border-top-color: #00e892; border-radius: 999px; animation: wallet-spin .8s linear infinite; }
.wallet-waiting span { display: flex; flex-direction: column; gap: 3px; }
.wallet-waiting strong { font-size: .72rem; }
.wallet-waiting small { color: rgba(255,255,255,.55); font-size: .62rem; }
.wallet-form-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 10px; }
.wallet-form-grid label { display: flex; flex-direction: column; gap: 6px; color: rgba(255,255,255,.72); font-size: .7rem; font-weight: 700; }
.wallet-form-grid select, .wallet-form-grid input { width: 100%; height: 44px; padding: 0 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; outline: 0; background: rgba(255,255,255,.06); color: #fff; }
.wallet-form-grid select option { color: #111; }
@keyframes wallet-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .wallet-native-card { width: 100%; max-width: none; max-height: 92dvh; border-radius: 20px 20px 0 0 !important; }
  .wallet-native-topbar { min-height: 54px; }
  .wallet-deposit-step, .wallet-pix-result, .wallet-withdraw-form { padding: 14px; }
  .wallet-pix-flow { grid-template-columns: 164px 1fr; gap: 10px; }
  .wallet-qr-panel { padding: 8px; }
  .wallet-qr-panel img { width: 144px; height: 144px; }
  .wallet-pix-flow ol { gap: 13px; }
  .wallet-pix-flow li strong { font-size: .62rem; }
  .wallet-pix-flow li small { font-size: .56rem; }
  .wallet-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .wallet-pix-flow { grid-template-columns: 142px 1fr; }
  .wallet-qr-panel img { width: 124px; height: 124px; }
  .wallet-trust-footer span { font-size: .5rem; }
}

/* Identidade única: login e cadastro usam a mesma marca do cabeçalho. */
.primor-modal-logo {
  display: block;
  width: 108px;
  height: 30px;
  max-width: 42vw;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 480px) {
  .primor-modal-logo { width: 96px; height: 28px; }
}