/* Mobile & tablet responsive overrides for Japanese onboarding flow */

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
}

#app-content {
  min-height: 100vh;
  min-height: 100dvh;
}

.app,
.main-container-wrapper,
.onboarding-flow {
  width: 100%;
  max-width: 100%;
}

/* Phones */
@media screen and (max-width: 768px) {
  .welcome-login {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin-inline: auto;
    border-radius: 16px;
  }

  .onboarding-flow__container {
    width: calc(100% - 16px) !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin-inline: 8px !important;
    padding-inline: 16px !important;
    padding-top: 16px !important;
    padding-bottom: 20px !important;
    box-sizing: border-box;
  }

  .onboarding-flow__container--full {
    width: 100% !important;
    margin-inline: 0 !important;
  }

  .onboarding-flow--welcome-login {
    background-size: cover !important;
    background-position: center top !important;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .onboarding-flow--welcome-banner {
    background: none !important;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .welcome-banner {
    padding-inline: 16px !important;
  }

  .welcome-banner__wrapper {
    max-width: 100% !important;
  }

  .welcome-banner__title {
    font-size: clamp(18px, 5vw, 24px) !important;
  }

  .welcome-banner__description {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .welcome-banner__button {
    width: 100% !important;
    max-width: 100% !important;
  }

  .welcome-login__title {
    font-size: clamp(24px, 7vw, 36px) !important;
    line-height: 1.15 !important;
    margin-inline: 8px !important;
  }

  .welcome-login__mascot {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .welcome-login__mascot svg {
    width: min(220px, 60vw) !important;
    height: auto !important;
  }

  .welcome-login__mascot--image {
    margin-bottom: 24px !important;
    max-width: 100%;
    height: auto;
  }

  .onboarding-app-header {
    padding: 12px 16px !important;
    padding-top: calc(12px + env(safe-area-inset-top, 0)) !important;
  }

  .onboarding-app-header__contents {
    align-items: center;
    gap: 8px;
  }

  .onboarding-app-header__metafox-logo--horizontal {
    width: auto !important;
    max-width: 130px;
    height: 24px !important;
  }

  .onboarding-app-header__dropdown {
    flex-shrink: 0;
  }

  .dropdown__select {
    max-width: 110px;
    font-size: 13px;
    padding-right: 24px;
  }

  .mm-button-base--size-lg,
  .mm-button-base--block,
  a.mm-button-base--block {
    min-height: 48px !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .recovery-phrase,
  .create-password,
  .secure-your-wallet,
  .import-srp,
  .completion {
    width: 100% !important;
    box-sizing: border-box;
  }

  .recovery-phrase__header {
    grid-template-columns: 36px 1fr 36px !important;
    gap: 4px !important;
  }

  .recovery-phrase__chips {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .recovery-phrase__chips .mm-text-field,
  .recovery-phrase__chips .mm-input {
    min-width: 0 !important;
    font-size: 13px !important;
  }

  .recovery-phrase__word-index {
    font-size: 12px !important;
  }

  .import-srp__srp,
  .srp-input-import__words-list {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .import-srp__srp-word {
    margin: 4px !important;
  }

  .import-srp__paste-tip {
    margin: 16px 0 8px !important;
    width: 100% !important;
    text-align: center;
  }

  .secure-your-wallet__srp-design-image,
  .secure-your-wallet__srp-design-image img {
    max-width: 100% !important;
    height: auto !important;
  }

  .mm-text-field,
  .mm-input,
  input[type="password"],
  input[type="text"],
  textarea {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    max-width: 100%;
  }

  .mm-box--padding-6 {
    padding: 16px !important;
  }

  .mm-box--padding-4 {
    padding: 12px !important;
  }

  .mm-box--margin-inline-5,
  .mm-box--margin-inline-auto {
    margin-inline: auto !important;
  }

  .onboarding-flow__container .mm-box--height-full {
    height: auto !important;
    min-height: 0 !important;
  }

  #word-1,
  #word-4,
  #word-9 {
    max-width: none !important;
  }
}

/* Small phones */
@media screen and (max-width: 400px) {
  .recovery-phrase__chips {
    grid-template-columns: 1fr 1fr !important;
  }

  .welcome-login__title {
    font-size: 26px !important;
  }

  .onboarding-app-header__metafox-logo--horizontal {
    max-width: 110px;
  }

  .dropdown__select {
    max-width: 96px;
    font-size: 12px;
  }
}

/* Tablets */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .welcome-login {
    width: 100% !important;
    max-width: 480px !important;
  }

  .onboarding-flow__container {
    max-width: 520px !important;
    width: calc(100% - 32px) !important;
    min-height: auto !important;
    margin-inline: auto !important;
  }

  .recovery-phrase__chips {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  .import-srp__srp,
  .srp-input-import__words-list {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  .welcome-login__mascot svg {
    width: 240px !important;
    height: auto !important;
  }
}