/* SubwayPay public UI: nav, footer, mobile fixes and feedback */
:root {
  --sp-ui-dark: #1f2024;
  --sp-ui-muted: #8892a4;
  --sp-ui-primary: #1fbffe;
  --sp-ui-mint: #aee8da;
}


#hero.hero-section {
  min-height: 100vh;
  background-image: url('/assets/img/home/background-inicial.png') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

.mint-section {
  background-image: url('/assets/img/home/background-2.png') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
}

.sp-public-navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9999;
  padding: 10px 16px;
  background: transparent;
  pointer-events: none;
}
.sp-public-nav-inner {
  width: min(100%, 980px);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  pointer-events: auto;
}
.sp-public-brand,
.sp-public-links {
  display: flex;
  align-items: center;
  min-height: 48px;
  background: var(--sp-ui-dark);
  color: #fff;
}
.sp-public-brand {
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px 0 0 10px;
  border-right: 1px solid rgba(255,255,255,.12);
  font-family: 'Space Mono', monospace;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
}
.sp-public-logo { width: 28px; height: 28px; object-fit: contain; }
.sp-public-links {
  gap: 4px;
  padding: 6px 8px;
  border-radius: 0 10px 10px 0;
}
.sp-public-link,
.sp-public-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: 'Space Mono', monospace;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
}
.sp-public-link:hover,
.sp-public-link.w--current { color: #ffee31; }
.sp-public-button {
  background: var(--sp-ui-primary);
  color: #071018;
  border: 2px solid #111827;
}
.sp-menu-button {
  display: none;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: 0;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 4px 0 rgba(0,0,0,.25);
  cursor: pointer;
}
.sp-menu-button span {
  width: 22px;
  height: 3px;
  border-radius: 99px;
  background: #fff;
  display: block;
}


/* ── Páginas de formulário: sem corte de conteúdo em qualquer tamanho de tela ── */
.hero-section.dark {
  overflow: visible !important;
  height: auto !important;
}

/* Auth forms: keep login/cadastro fields inside the card on desktop and mobile */
.hero-section.dark .minting-container,
.hero-section.dark .minting-container.w-container {
  box-sizing: border-box !important;
}
.hero-section.dark .properties,
.hero-section.dark .rarity-row,
.hero-section.dark .rarity-row.roboto-type2,
.hero-section.dark .large-input-field,
.hero-section.dark .w-input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.hero-section.dark .rarity-row.roboto-type2 {
  display: block !important;
}
.hero-section.dark .mint-card-image + h2,
.hero-section.dark h2 {
  overflow-wrap: anywhere !important;
}
.hero-section.dark p img {
  max-width: 100% !important;
  height: auto !important;
}

.footer-section.sp-public-footer {
  background-image: url('/assets/img/home/background-footer.png') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-color: var(--sp-ui-dark) !important;
  padding: 48px 24px !important;
}
.sp-public-footer .domo-text {
  font-size: clamp(2rem, 6vw, 5rem) !important;
  line-height: .9em !important;
}
.sp-public-footer .follow-test {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.sp-login-feedback {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.55);
}
.sp-login-feedback-card {
  width: min(92vw, 420px);
  padding: 32px 26px;
  border: 6px solid #1f2024;
  border-radius: 24px;
  background: #fff;
  color: #1f2024;
  text-align: center;
  font-family: 'Space Mono', monospace;
  box-shadow: -8px 8px 0 #1f2024;
  animation: spFeedbackIn .24s ease-out;
}
.sp-login-feedback-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 42px;
  font-weight: 900;
  background: #22c55e;
  animation: spPulse .9s ease-in-out infinite alternate;
}
.sp-login-feedback.error .sp-login-feedback-icon { background: #ef4444; }
.sp-login-feedback h3 { margin: 0 0 8px; font-size: 1.45rem; }
.sp-login-feedback p { margin: 0; font-size: .95rem; }
@keyframes spFeedbackIn { from { transform: translateY(18px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spPulse { from { transform: scale(.96); } to { transform: scale(1.04); } }

@media (max-width: 767px) {
  .sp-public-navbar { padding: 10px 12px; }
  .sp-public-nav-inner { justify-content: flex-end; position: relative; }
  .sp-public-brand { display: none; }
  .sp-public-links {
    position: absolute;
    top: 62px;
    right: 0;
    width: min(82vw, 280px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    box-shadow: -4px 4px 0 rgba(31,32,36,.35);
  }
  .sp-public-links.is-open { display: flex; }
  .sp-public-link,
  .sp-public-button { width: 100%; min-height: 44px; }
  .sp-menu-button { display: inline-flex; }

  /* Home hero — apenas página inicial (sem .dark) */
  #hero.hero-section:not(.dark) {
    min-height: 100svh !important;
    height: 100svh !important;
    background-image: url('/assets/img/home/background-mobile.png') !important;
    background-size: cover !important;
    background-position: center top !important;
  }
  #hero.hero-section:not(.dark) .hero-container {
    min-height: 100svh !important;
    padding: 0 24px 24vh !important;
    justify-content: flex-end !important;
  }
  #hero .primary-button.hero {
    width: min(82vw, 320px) !important;
    align-self: center !important;
  }

  /* Páginas de formulário (login/cadastrar/deposito/afiliate) — scroll livre */
  #hero.hero-section.dark {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding-top: 88px !important;
    padding-bottom: 48px !important;
  }

  #hero .hero-letters,
  #hero .hero-price {
    display: none !important;
  }
  .mint-section h2 {
    max-width: 100% !important;
    margin: 0 0 16px !important;
    font-size: clamp(2.1rem, 11vw, 3.4rem) !important;
    line-height: .9 !important;
    overflow-wrap: anywhere !important;
  }

  .mint-section {
    padding: 44px 10px 52px !important;
    overflow: visible !important;
  }
  /* Gif com margin:-120px não deve sobrepor a seção acima no mobile */
  .mint-section .minting-container .mint-card-image {
    margin-top: 0 !important;
  }
  .mint-section .minting-container {
    width: min(94vw, 390px) !important;
    max-width: 94vw !important;
    padding: 24px 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  /* Título longo (ex: SubwayPay) não deixar letra viúva */
  .mint-section h2,
  .hero-section.dark h2 {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }
  .mint-section .paragraph {
    width: 100% !important;
    max-width: 100% !important;
    font-size: .86rem !important;
    line-height: 1.65 !important;
    overflow-wrap: anywhere !important;
  }
  .mint-section .primary-button.hero {
    width: min(78vw, 292px) !important;
    max-width: 100% !important;
    align-self: center !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .mint-section .price {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  .intermission {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .intermission img,
  .center-image-block img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  .center-image-block,
  .center-image-block._2 {
    display: block !important;
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 14px 0 !important;
  }


.footer-section.sp-public-footer {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    background-position: center center !important;
  }
}

@media (min-width: 768px) {
  .hero-section.dark .minting-container,
  .hero-section.dark .minting-container.w-container {
    max-width: 560px !important;
    width: min(92vw, 560px) !important;
  }
  .hero-section.dark {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

.sp-page-shell {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 18px 64px;
  background: #74dcf9;
  background-image: url('/assets/img/home/background-2.png');
  background-size: cover;
  background-position: center top;
}
.sp-card {
  width: min(94vw, 560px);
  padding: 36px 32px;
  border: 8px solid #1f2024;
  border-radius: 24px;
  background: #fff;
  color: #1f2024;
  text-align: center;
  box-shadow: -4px 4px 0 #1f2024;
  font-family: 'Space Mono', monospace;
}
.sp-card h1 { margin-top: 0; font-size: clamp(2rem, 8vw, 4rem); line-height: .85; }
.sp-muted { color: #5f6570; }
.sp-balance-box {
  margin: 16px auto 18px;
  padding: 16px 24px;
  background: rgba(31, 191, 254, .1);
  border-radius: 16px;
  border: 2px solid rgba(31, 191, 254, .4);
  box-shadow: 0 4px 20px rgba(31, 191, 254, .15);
  text-align: center;
}
.sp-balance-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #1fbffe;
  margin-bottom: 6px;
}
.sp-balance-box .sp-balance {
  margin: 0;
  color: #1f2024;
  font-size: clamp(1.9rem, 8vw, 3rem);
  font-weight: 900;
  line-height: 1;
}
.sp-balance { margin: 12px auto 18px; font-size: clamp(2rem, 8vw, 3.2rem); font-weight: 900; }
.sp-form { display: grid; gap: 12px; margin-top: 22px; text-align: left; }
.sp-form label { font-weight: 700; }
.sp-form input {
  width: 100%;
  min-height: 48px;
  border: 3px solid #1f2024;
  border-radius: 12px;
  padding: 10px 14px;
  font: inherit;
  box-sizing: border-box;
}
.sp-form .primary-button { justify-self: center; margin-top: 12px; }
.sp-alert {
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid currentColor;
  font-weight: 700;
}
.sp-alert.success { color: #15803d; background: rgba(34,197,94,.12); }
.sp-alert.error { color: #b91c1c; background: rgba(239,68,68,.12); }
@media (max-width: 767px) {
  .sp-page-shell { padding-top: 92px; padding-bottom: 44px; }
  .sp-card { padding: 26px 18px; border-width: 6px; }
}

/* ── Botões rápidos de depósito (.button.nav.w-button) ──
   Deposito carrega /arquivos/public-ui.css via path absoluto,
   então este é o lugar certo para override */
.button.nav.w-button {
  background: linear-gradient(160deg, #1f2024 0%, #2a2e38 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: 2px solid #1fbffe !important;
  border-bottom: 4px solid #0ea5c9 !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(31,191,254,.2) !important;
  transition: transform .12s, box-shadow .12s !important;
  padding: 12px 16px !important;
  line-height: 1.4 !important;
  font-size: .9rem !important;
}
.button.nav.w-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(31,191,254,.3) !important;
}
.button.nav.w-button:active {
  transform: translateY(1px) !important;
  border-bottom-width: 2px !important;
}
.button.nav.w-button b {
  display: block !important;
  color: #ffee31 !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

/* ── GIF icon no topo do sp-card — igual ao mint-card-image ── */
.sp-card-icon {
  display: block;
  width: 200px;
  margin: -120px auto 16px;
  border: 5px solid #000;
  border-radius: 100%;
}
/* Card precisa de overflow visible para o gif sobressair */
.sp-page-shell .sp-card {
  overflow: visible;
}

/* ── Estado de processamento do saque ── */
.sp-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 0 8px;
  text-align: center;
}
.sp-processing-spinner {
  width: 56px;
  height: 56px;
  border: 5px solid rgba(31,191,254,.2);
  border-top-color: #1fbffe;
  border-radius: 50%;
  animation: sp-spin 1s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }
.sp-processing h3 { margin: 0; font-size: 1.15rem; }
.sp-processing p { margin: 0; font-size: .88rem; color: #5f6570; }

/* ── Extrato afiliados ── */
.sp-extrato {
  width: 100%;
  box-sizing: border-box;
}
.sp-extrato-title {
  font-family: 'Space Mono', monospace;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 14px;
}
.sp-extrato-saldo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  margin-bottom: 14px;
  background: rgba(31, 191, 254, .1);
  border: 2px solid rgba(31, 191, 254, .35);
  border-radius: 14px;
  text-align: center;
}
.sp-extrato-saldo-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #1fbffe;
}
.sp-extrato-saldo-valor {
  font-family: 'Space Mono', monospace;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight: 900;
  color: #1f2024;
  line-height: 1;
}
.sp-extrato-aviso {
  font-size: .68rem;
  color: #8892a4;
}
.sp-extrato-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.sp-extrato-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: rgba(31,32,36,.05);
  border: 1.5px solid rgba(31,32,36,.12);
  border-radius: 10px;
}
.sp-extrato-stat-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8892a4;
}
.sp-extrato-stat-val {
  font-family: 'Space Mono', monospace;
  font-size: .9rem;
  font-weight: 700;
  color: #1f2024;
}
.sp-extrato-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .sp-extrato-grid { grid-template-columns: 1fr 1fr; }
  .sp-extrato-actions { grid-template-columns: 1fr; }
}


/* ── Correções mobile: cards não podem ser comidos pela seção seguinte ── */
.cadastro-hero,
.deposito-hero,
.presell-hero,
.gameover-hero {
  height: auto !important;
  overflow: visible !important;
  background-image: url('/assets/img/home/background-2.png') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-color: #cae9fa !important;
}
/* cadastro/deposito têm seções depois — não forçar 100vh */
.cadastro-hero,
.deposito-hero {
  min-height: auto !important;
}
/* gameover/presell são páginas standalone — preencher viewport inteiro */
.gameover-hero,
.presell-hero {
  min-height: 100vh !important;
}
.cadastro-hero .minting-container,
.deposito-hero .minting-container,
.presell-hero .minting-container,
.gameover-hero .minting-container {
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: 56px !important;
}
.cadastro-about,
.deposito-about,
.presell-hero + section,
.gameover-hero + section {
  position: relative !important;
  z-index: 1 !important;
  clear: both !important;
}
.presell-hero .mint-card-image,
.gameover-hero .mint-card-image {
  margin-top: 0 !important;
}
.gameover-hero .primary-button,
.presell-hero .primary-button,
.cadastro-hero .primary-button,
.deposito-hero .primary-button {
  position: relative !important;
  z-index: 3 !important;
}
.sp-modal-overlay {
  align-items: flex-start !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: calc(18px + env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom)) !important;
}
.sp-modal-card {
  max-height: calc(100svh - 42px) !important;
  overflow-y: auto !important;
}
@supports not (height: 100svh) {
  .sp-modal-card { max-height: calc(100vh - 42px) !important; }
}
@media (max-width: 767px) {
  #hero.hero-section.dark.cadastro-hero,
  #hero.hero-section.dark.deposito-hero {
    display: block !important;
    min-height: auto !important;
    height: auto !important;
    padding-top: 86px !important;
    padding-bottom: 64px !important;
  }
  #hero.hero-section.dark.presell-hero,
  #hero.hero-section.dark.gameover-hero {
    display: block !important;
    min-height: 100vh !important;
    height: auto !important;
    padding-top: 86px !important;
    padding-bottom: 64px !important;
  }
  .cadastro-hero .minting-container,
  .deposito-hero .minting-container,
  .presell-hero .minting-container,
  .gameover-hero .minting-container,
  .cadastro-card,
  .deposito-card {
    width: calc(100% - 28px) !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 72px !important;
    float: none !important;
    transform: none !important;
  }
  .cadastro-hero .rarity-row,
  .deposito-hero .rarity-row {
    clear: both !important;
  }
  .cadastro-about,
  .deposito-about {
    margin-top: 0 !important;
    padding-top: 42px !important;
  }
  .deposito-hero .primary-button,
  .cadastro-hero .primary-button {
    width: 100% !important;
    white-space: normal !important;
  }
  .sp-copy-wrap {
    flex-direction: column !important;
  }
  .sp-copy-btn {
    width: 100% !important;
    min-height: 48px !important;
  }
  #pix-qrcode {
    min-width: 0 !important;
    min-height: 0 !important;
    width: min(100%, 246px) !important;
  }
  #pix-qrcode img,
  #pix-qrcode canvas {
    width: 100% !important;
  }
}
@media (max-width: 380px) {
  .cadastro-hero .minting-container,
  .deposito-hero .minting-container,
  .presell-hero .minting-container,
  .gameover-hero .minting-container {
    width: calc(100% - 20px) !important;
  }
}

/* ── Botão Sacar saldo — afiliados ── */
.sp-saque-aff-btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 8px;
  border: 2px solid #1fbffe;
  background: #1fbffe;
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: background 180ms ease, transform 120ms ease;
}
.sp-saque-aff-btn:hover {
  background: #17a9e0;
  transform: translateY(-1px);
}