/* 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: center;
  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-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-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;
}


/* 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; }

  #hero.hero-section,
  #hero.hero-section-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-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;
  }

  #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;
  }
  .mint-section .minting-container {
    width: min(94vw, 390px) !important;
    max-width: 94vw !important;
    padding: 24px 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !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 { 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; }
}