/* Checkout da anuidade SBRV — etapas do wizard e formulario de cartao.
   O visual e do Bootstrap; aqui fica a estrutura que o Bootstrap nao cobre:
   a barra de etapas, o resumo e os blocos proprios da tela de pagamento. */

.checkout-navegacao-link {
  background: transparent;
  color: #0075de;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .12em;
}

.checkout-navegacao-link:hover,
.checkout-navegacao-link:focus,
.checkout-navegacao-link:active {
  color: #005bab;
}

.checkout-navegacao-link:focus-visible {
  outline: 2px solid #005bab;
  outline-offset: 2px;
}

.checkout-etapas {
  display: flex;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.checkout-etapas li {
  flex: 1 1 0;
  text-align: center;
  font-size: 0.9rem;
  color: #6c757d;
  padding: 0.5rem 0.25rem;
  border-bottom: 3px solid #e9ecef;
}

.checkout-etapas li.ativa {
  color: #007bff;
  font-weight: 600;
  border-bottom-color: #007bff;
}

#formPagamento .card {
  margin-bottom: 1.5rem;
}

#blocoRenovacao {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.25rem;
  padding: 0.75rem;
}

#blocoRenovacao small {
  line-height: 1.4;
}

#errosCartao ul {
  margin-bottom: 0;
  padding-left: 1.25rem;
}

/* Os tres campos (Mes/Ano/CVV) alinham entre si; a LINHA abre espaco para o
   que vem depois - o bloco do botao ficava grudado. */
#blocoCartao .form-row .form-group {
  margin-bottom: 0;
}

#blocoCartao .form-row {
  margin-bottom: 1rem;
}

#parcelas option {
  font-weight: normal;
}

/* Etapa 2: item de seleção em formato linha-card. */
/* O flex-wrap e o que faz o aviso cair na linha de baixo: sem ele o
   container e nowrap, o `flex-basis: 100%` do aviso fica inerte e o aviso
   sai espremido na mesma linha dos valores. A primeira linha (seletor |
   info | valores) continua junta enquanto a soma das tres couber na largura
   do item (com 480px de tela sobra folga; com 360px ja nao cabe e o
   "valores" desce junto — limite do conteudo da linha, nao do aviso). */
.checkout-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.checkout-item:hover { border-color: #007bff; }
.checkout-item--selecionado { border-color: #007bff; background: rgba(0,123,255,.04); }
.checkout-item--pago { cursor: default; background: #f8f9fa; }
.checkout-item--pago:hover { border-color: #e9ecef; }
.checkout-item--bloqueado { cursor: default; }
.checkout-item__info { flex: 1 1 auto; }
.checkout-item__estado { display: block; color: #6c757d; }
.checkout-item__valores { text-align: right; }
.text-line-through { text-decoration: line-through; }
.checkout-item__aviso { flex-basis: 100%; font-size: 0.8rem; }

/* Etapa 2: dados do associado em grade, acima da lista de anuidades. */
.checkout-associado {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}

.checkout-associado small {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
}

/* Respiro entre as colunas da grade: o Bootstrap 4.5.3 nao da gap em .row,
   entao o espaco vem do proprio checkout-associado. O row-gap e o que
   separa as linhas da grade (as duas linhas da grade larga e as colunas
   empilhadas abaixo de 576px) nos navegadores que aplicam gap em flexbox.
   O @supports abaixo e o plano B para quem nem CONHECE a propriedade (o
   IE11 e os navegadores anteriores a ela): o teste `not (row-gap: 1px)`
   so e verdadeiro nesses. Os que conhecem o row-gap mas nao o aplicam em
   flexbox (Chrome 57-83, Safari 10.1-14, Firefox 52-62) NAO sao cobertos
   por ele e ficam sem respiro. */
.checkout-associado .row {
  row-gap: .75rem;
}

@supports not (row-gap: 1px) {
  @media (max-width: 575.98px) {
    .checkout-associado .col-sm-6 {
      margin-bottom: .75rem;
    }

    .checkout-associado .col-sm-6:last-child {
      margin-bottom: 0;
    }
  }
}

/* Wizard em mobile: número em cima, rótulo embaixo — cada etapa numa coluna.
   O desktop mantém os dois spans na mesma linha (espaço literal do markup). */
@media (max-width: 575.98px) {
  .checkout-etapas li {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .checkout-etapas__numero {
    white-space: nowrap;
  }
}