/* ==========================================================================
   RESPONSIVIDADE COMPLETA PARA SMARTPHONES E TABLETS (MOBILE FIRST)
   Projeto: Agências Mercado Livre
   ========================================================================== */

@media screen and (max-width: 920px) {
  /* Reseta travas de largura fixa do desktop */
  html {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    display: block !important;
    padding-bottom: 90px !important;
    font-size: 14px !important;
  }

  /* Header do Mercado Livre */
  .nav-header {
    height: auto !important;
    min-height: 52px !important;
    display: block !important;
    padding: 10px 0 !important;
  }

  .nav-header:before {
    display: none !important;
  }

  .nav-header .nav-bounds {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  .nav-header .nav-logo {
    height: 32px !important;
    width: 120px !important;
    background-size: contain !important;
    position: relative !important;
  }

  #nav-header-menu {
    display: none !important;
  }

  /* Estrutura Principal */
  main[role="main"], #root-app {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .register-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 16px 12px 100px 12px !important;
    box-sizing: border-box !important;
    min-height: calc(100vh - 60px) !important;
  }

  .register-panel__content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 16px !important;
  }

  .panel-header {
    width: 100% !important;
    margin-top: 4px !important;
  }

  .andes-breadcrumb {
    flex-wrap: wrap !important;
  }

  /* PÁGINA 1: Termos e Consentimento */
  .privacy-section {
    width: 100% !important;
    padding: 12px 0 !important;
  }

  .container {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
  }

  .container__icon {
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  .container__icon svg {
    max-width: 90px !important;
    height: auto !important;
  }

  .container h1 {
    font-size: 20px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    margin-bottom: 12px !important;
  }

  .container p, .container__subtitle {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .container__checklist {
    margin-left: 20px !important;
    font-size: 14px !important;
  }

  .container__disclaimer {
    font-size: 13px !important;
    color: #666 !important;
    margin-top: 12px !important;
    line-height: 1.4 !important;
  }

  .checkbox-container {
    width: 100% !important;
    margin-top: 20px !important;
  }

  .andes-checkbox__label-text {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .privacy-section .andes-button {
    width: 100% !important;
    margin-top: 24px !important;
    height: 48px !important;
  }

  /* CARDS DE FORMULÁRIO (Páginas 3, 4, 5) */
  .andes-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border-radius: 8px !important;
  }

  .andes-card>:first-child {
    padding: 16px 16px 0 !important;
  }

  .andes-card>:nth-child(2) {
    padding: 16px !important;
  }

  .andes-card__content {
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  .register-section__step {
    font-size: 13px !important;
  }

  .andes-card__header-title span:last-child {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }

  /* Campos empilhados verticalmente no celular */
  .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .andes-form-control {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .andes-form-control__control {
    width: 100% !important;
  }

  .andes-form-control__field {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    height: 48px !important;
  }

  /* Dropdown Andes no mobile */
  .andes-dropdown {
    width: 100% !important;
  }

  .andes-dropdown__trigger {
    width: 100% !important;
    height: 48px !important;
    box-sizing: border-box !important;
  }

  /* Botões no rodapé do Card */
  .form-section-footer {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 16px 0 0 0 !important;
  }

  .form-section-footer__actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
  }

  .form-section-footer__actions .andes-button {
    flex: 1 !important;
    width: 100% !important;
    height: 46px !important;
  }

  .form-section-footer>button.andes-button--mute {
    width: 100% !important;
    text-align: center !important;
    height: 40px !important;
  }

  /* PÁGINA 5: Dias da semana responsivos */
  .days-container, .andes-tag-group, [class*="days"], [class*="day-tag"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .day-tag, .andes-tag {
    min-width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    padding: 0 !important;
  }

  /* PÁGINA DE SUCESSO (ultimapagina.html) */
  .andes-feedback-screen {
    width: 100% !important;
    padding: 32px 16px !important;
    box-sizing: border-box !important;
  }

  .andes-feedback-screen__content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .andes-feedback-screen__title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  .andes-feedback-screen__description {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .andes-feedback-screen__actions {
    width: 100% !important;
  }

  .andes-feedback-screen__actions .andes-button {
    width: 100% !important;
    height: 48px !important;
  }

  /* Rodapé Desktop ML */
  .nav-footer {
    display: block !important;
    width: 100% !important;
    padding: 20px 16px 100px 16px !important;
    box-sizing: border-box !important;
  }

  .nav-footer .nav-bounds {
    padding: 0 !important;
  }

  .nav-footer-navigation__menu {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .nav-footer-navigation__item {
    margin: 0 !important;
  }

  /* Barra de Navegação Inferior Amarela (Mobile) */
  #nav-ml-custom {
    padding: 8px 12px !important;
    height: 60px !important;
    box-sizing: border-box !important;
  }

  #nav-ml-custom button {
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }

  #nav-ml-custom > div:nth-child(2) {
    flex: 1 !important;
    padding: 0 8px !important;
    max-width: 160px !important;
  }

  #nav-ml-custom > div:nth-child(2) > div:first-child {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 3px !important;
  }

  #nav-ml-custom > div:nth-child(2) > div:last-child {
    width: 100% !important;
    max-width: 100% !important;
    height: 5px !important;
  }
}