* { box-sizing: border-box; }

html { background: #fff url('assets/bgc.png') no-repeat left top; }

body {
  display: flow-root;
  margin: 0;
  min-height: 100vh;
  font-family: 'Barlow', sans-serif;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:window-inactive { background: #06529C; border-radius: 5px; }
.modal::-webkit-scrollbar-track { margin: 16px 0; }

p, h1, h2 { margin: 0; }

.bloco {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 80px;
}

.cabecalho { row-gap: 8px; margin-top: 40px; margin-bottom: 40px; }
.passo { row-gap: 24px; }
.passo-2 { margin-top: 48px; }
.pronto { row-gap: 8px; margin-top: 48px; margin-bottom: 40px; }

.sobretitulo {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 3px;
  color: #06529C;
}

.titulo {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  color: #091747;
}

.verde { color: #18B127; }

.corpo { font-size: 18px; line-height: 1.4; }

.pequeno {
  font-size: 12px;
  line-height: 1.4;
  color: #091747;
}

.passo-linha {
  display: flex;
  align-items: center;
  column-gap: 20px;
  width: 100%;
}

.passo-linha img { flex: none; display: block; }

.cidade {
  width: 100%;
  height: 40px;
  padding: 6px 24px 6px 0;
  font: 400 16px 'Barlow', sans-serif;
  color: #000;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M.5.5 4 4 7.5.5' fill='none' stroke='%23777' stroke-width='1'/%3E%3C/svg%3E") no-repeat right 0 center;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  border-radius: 0;
  outline: none;
  appearance: none;
  cursor: pointer;
}

.cidade:focus-visible { border-bottom-color: #06529C; }
.cidade.vazio { color: #555; }
.cidade option { color: #000; }

.lojas {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lojas legend { padding: 0; margin-bottom: 8px; float: left; width: 100%; }

.lojas-opcoes {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.loja {
  display: flex;
  align-items: center;
  min-height: 28px;
  font-size: 18px;
  line-height: 28px;
  cursor: pointer;
}

.loja input {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0 9px 0 0;
  background: #fff;
  border: 1px solid #AFAFAF;
  border-radius: 50%;
  appearance: none;
  cursor: pointer;
}

.loja input:checked {
  border-color: #06529C;
  background: radial-gradient(circle, #06529C 0 4.5px, #fff 5px);
}

.loja input:focus-visible {
  outline: 2px solid #06529C;
  outline-offset: 2px;
}

.loja-endereco,
.loja-mapa {
  display: block;
  margin-left: 26px;
  font-size: 14px;
  line-height: 1.4;
}

.loja-endereco { color: #444; }

.loja-mapa {
  width: fit-content;
  margin-bottom: 8px;
  font-weight: 600;
  color: #06529C;
}

.selecionado { margin-top: 8px; }

.enviar {
  width: 100%;
  height: 57px;
  padding: 0;
  font: 600 15px 'Barlow', sans-serif;
  color: #fff;
  background: linear-gradient(to right, #17DA37, #04AF20);
  border: 0;
  border-radius: 10px;
  box-shadow: rgba(2, 5, 211, .1) 0 7px 30px -10px;
  cursor: pointer;
}

.enviar:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Chama atenção para o botão depois que a loja é escolhida. */
.enviar:enabled { animation: crescer 2s ease-in-out infinite; }

@keyframes crescer {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); box-shadow: rgba(4, 175, 32, .45) 0 10px 30px -8px; }
}

@media (max-width: 499px) {
  .bloco { margin-left: 40px; margin-right: 40px; }
  .passo-2, .pronto { margin-top: 40px; }
  .loja { font-size: 15px; }
  .lojas-opcoes { grid-template-columns: 1fr; }
}

/* Desktop: conteúdo em modal centralizado. Abaixo de 768px a página fica como estava. */
@media (min-width: 768px) {
  html { background: #fff; }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 24px;
    overflow: hidden;
    background: rgba(9, 23, 71, .6);
  }

  .modal {
    width: 100%;
    max-width: 700px;
    max-height: 100%;
    overflow-y: auto;
    background: #fff url('assets/bgc.png') no-repeat left top;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(9, 23, 71, .35);
  }

  .bloco { margin-left: 40px; margin-right: 40px; }
}