:root {
  --azul-principal: #79c8eb;
  --azul-escuro: #2698ca;
  --azul-claro: #eaf8ff;
  --azul-fundo: #f5fcff;
  --texto: #34495e;
  --texto-claro: #718096;
  --branco: #ffffff;
  --borda: #dceef7;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.consulta-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px 20px;

  background:
    radial-gradient(circle at top right, #dff5ff, transparent 40%),
    linear-gradient(135deg, #f8fdff, #eaf8ff);
}

/*
|--------------------------------------------------------------------------
| CARD CONSULTA
|--------------------------------------------------------------------------
*/

.consulta-card {
  width: 100%;
  max-width: 480px;
  margin-left: 400px;
  background: var(--branco);

  border-radius: 28px;

  padding: 40px;

  box-shadow: 0 25px 70px rgba(41, 120, 155, 0.14);

  border: 1px solid rgba(121, 200, 235, 0.25);
}

/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/

.logo-area {
  text-align: center;
  margin-bottom: 25px;
}

.logo-area img {
  max-width: 210px;
  max-height: 100px;
  object-fit: contain;
}

/*
|--------------------------------------------------------------------------
| CABEÇALHO
|--------------------------------------------------------------------------
*/

.consulta-header {
  text-align: center;
  margin-bottom: 30px;
}

.icon-circle {
  width: 64px;
  height: 64px;

  margin: 0 auto 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--azul-claro);

  color: var(--azul-escuro);

  font-size: 28px;
}

.consulta-header h1 {
  margin: 0;

  color: var(--texto);

  font-size: 28px;

  font-weight: 750;
}

.consulta-header p {
  margin: 10px 0 0;

  color: var(--texto-claro);

  font-size: 15px;
}

/*
|--------------------------------------------------------------------------
| FORMULÁRIO
|--------------------------------------------------------------------------
*/

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;

  margin-bottom: 8px;

  color: var(--texto);

  font-size: 14px;

  font-weight: 600;
}

.form-group label i {
  color: var(--azul-escuro);

  margin-right: 5px;
}

.cpf-input {
  height: 55px;

  border-radius: 13px;

  border: 1px solid var(--borda);

  padding: 0 16px;

  font-size: 16px;

  box-shadow: none !important;
}

.cpf-input:focus {
  border-color: var(--azul-principal);

  box-shadow: 0 0 0 4px rgba(121, 200, 235, 0.15) !important;
}

/*
|--------------------------------------------------------------------------
| NÃO SOU ROBÔ
|--------------------------------------------------------------------------
*/

.robot-check {
  margin: 20px 0;
}

.robot-label {
  min-height: 70px;

  display: flex;
  align-items: center;

  gap: 12px;

  padding: 12px 15px;

  border: 1px solid #dfe8ed;

  border-radius: 10px;

  background: #fafcfd;

  cursor: pointer;

  transition: 0.2s;
}

.robot-label:hover {
  border-color: var(--azul-principal);

  background: var(--azul-fundo);
}

.robot-label input {
  width: 25px;
  height: 25px;

  accent-color: var(--azul-escuro);

  cursor: pointer;
}

.robot-text {
  color: #3d4d59;

  font-size: 15px;

  font-weight: 500;

  flex: 1;
}

.robot-icon {
  color: var(--azul-escuro);

  font-size: 25px;
}

/*
|--------------------------------------------------------------------------
| BOTÃO
|--------------------------------------------------------------------------
*/

.btn-consultar {
  width: 100%;

  height: 55px;

  border: 0;

  border-radius: 13px;

  background: linear-gradient(
    135deg,
    var(--azul-principal),
    var(--azul-escuro)
  );

  color: white;

  font-size: 16px;

  font-weight: 700;

  cursor: pointer;

  transition: 0.2s;

  box-shadow: 0 10px 25px rgba(38, 152, 202, 0.22);
}

.btn-consultar:hover {
  transform: translateY(-2px);

  box-shadow: 0 14px 30px rgba(38, 152, 202, 0.28);
}

/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

.consulta-footer {
  margin-top: 25px;

  text-align: center;

  color: #8b9aa4;

  font-size: 12px;
}

.consulta-footer i {
  color: var(--azul-escuro);

  margin-right: 4px;
}

/*
|--------------------------------------------------------------------------
| ALERTA
|--------------------------------------------------------------------------
*/

.alert {
  border-radius: 12px;

  font-size: 14px;

  margin-bottom: 20px;
}

/*
|--------------------------------------------------------------------------
| RESULTADO
|--------------------------------------------------------------------------
*/

.resultado-card {
  width: 100%;

  max-width: 480px;
  margin-left: 400px;
  overflow: hidden;

  background: white;

  border-radius: 30px;

  box-shadow: 0 25px 70px rgba(41, 120, 155, 0.15);
}

.resultado-topo {
  padding: 30px 35px 10px;

  display: flex;

  align-items: center;

  justify-content: space-between;
}

.resultado-topo .logo-area {
  margin: 0;

  text-align: left;
}

.resultado-topo .logo-area img {
  max-width: 170px;
}

.success-icon {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #e7f8ef;

  color: #27ae60;

  font-size: 24px;
}

.resultado-conteudo {
  padding: 25px 35px 35px;
}

.saudacao {
  color: var(--texto-claro);

  font-size: 15px;
}

.resultado-conteudo h1 {
  margin: 4px 0 20px;

  color: var(--texto);

  font-size: 28px;

  font-weight: 750;
}

/*
|--------------------------------------------------------------------------
| LOJA
|--------------------------------------------------------------------------
*/

.loja-info {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 16px;

  margin-bottom: 22px;

  background: var(--azul-fundo);

  border-radius: 14px;
}

.loja-info > i {
  font-size: 24px;

  color: var(--azul-escuro);
}

.loja-info div {
  display: flex;

  flex-direction: column;

  gap: 2px;
}

.loja-info strong {
  color: var(--texto);

  font-size: 14px;
}

.loja-info span {
  color: var(--texto-claro);

  font-size: 13px;
}

/*
|--------------------------------------------------------------------------
| PONTOS
|--------------------------------------------------------------------------
*/

.pontos-box {
  padding: 28px;

  text-align: center;

  border-radius: 20px;

  background: linear-gradient(135deg, #effaff, #dff4fd);

  border: 1px solid #ccecf9;
}

.pontos-label {
  display: block;

  color: var(--texto-claro);

  font-size: 14px;

  font-weight: 600;
}

.pontos-valor {
  margin-top: 3px;

  color: var(--azul-escuro);

  font-size: 58px;

  line-height: 1;

  font-weight: 800;
}

.pontos-texto {
  display: block;

  margin-top: 8px;

  color: #64808e;

  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| DATA ATUALIZAÇÃO
|--------------------------------------------------------------------------
*/

.atualizacao {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 18px;

  padding: 14px 16px;

  border: 1px solid #e5edf1;

  border-radius: 14px;

  background: #fff;
}

.atualizacao > i {
  color: var(--azul-escuro);

  font-size: 21px;
}

.atualizacao div {
  display: flex;

  flex-direction: column;

  gap: 2px;
}

.atualizacao span {
  color: var(--texto-claro);

  font-size: 12px;
}

.atualizacao strong {
  color: var(--texto);

  font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| AÇÕES
|--------------------------------------------------------------------------
*/

.resultado-acoes {
  margin-top: 25px;
}

.btn-nova-consulta {
  width: 100%;

  height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  border: 1px solid var(--borda);

  border-radius: 12px;

  color: var(--azul-escuro);

  background: white;

  text-decoration: none;

  font-weight: 600;

  transition: 0.2s;
}

.btn-nova-consulta:hover {
  background: var(--azul-fundo);

  border-color: var(--azul-principal);
}

/*
|--------------------------------------------------------------------------
| FOOTER RESULTADO
|--------------------------------------------------------------------------
*/

.resultado-footer {
  padding: 15px;

  text-align: center;

  border-top: 1px solid #edf2f5;

  color: #8b9aa4;

  font-size: 12px;
}

.resultado-footer i {
  color: #27ae60;

  margin-right: 4px;
}

/* ==========================================================
   CRÉDITO
========================================================== */

.credito-box {
  display: flex;
  align-items: center;
  gap: 15px;

  margin-top: 16px;
  padding: 18px;

  border-radius: 18px;

  background: #fff;

  border: 1px solid #dceff7;

  box-shadow: 0 5px 18px rgba(50, 130, 160, 0.06);
}

.credito-icon {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background: #e7f8ff;

  color: #2698ca;

  font-size: 22px;
}

.credito-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.credito-info span {
  color: #718096;

  font-size: 13px;
}

.credito-info strong {
  color: #2698ca;

  font-size: 23px;

  font-weight: 800;
}

.credito-faixa {
  display: block;

  margin-top: 5px;

  color: #718096;

  font-size: 12px;
}

/* ==========================================================
   TABELA DE PONTOS
========================================================== */

.tabela-pontos {
  margin-top: 20px;

  border: 1px solid #dceff7;

  border-radius: 18px;

  overflow: hidden;

  background: #fff;
}

/* Cabeçalho */

.tabela-pontos-header {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 16px;

  background: #f1faff;

  border-bottom: 1px solid #dceff7;
}

.tabela-pontos-header > div:first-child {
  width: 42px;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: #dff5ff;

  color: #2698ca;

  font-size: 20px;
}

.tabela-pontos-header div:last-child {
  display: flex;

  flex-direction: column;

  gap: 2px;
}

.tabela-pontos-header strong {
  color: #34495e;

  font-size: 14px;
}

.tabela-pontos-header span {
  color: #718096;

  font-size: 11px;
}

/* Faixas */

.faixas-pontos {
  padding: 8px;
}

.faixa-pontos {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 11px;

  border-radius: 12px;

  transition: 0.2s;
}

.faixa-pontos + .faixa-pontos {
  margin-top: 3px;
}

/* Número */

.faixa-numero {
  width: 42px;
  height: 42px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #edf8fc;

  color: #2698ca;

  font-size: 13px;

  font-weight: 800;
}

/* Descrição */

.faixa-descricao {
  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 2px;
}

.faixa-descricao strong {
  color: #34495e;

  font-size: 13px;
}

.faixa-descricao span {
  color: #718096;

  font-size: 12px;
}

/* Faixa atual */

.faixa-atual {
  background: #e9f8ff;

  border: 1px solid #bce6f7;
}

.faixa-atual .faixa-numero {
  background: #79c8eb;

  color: #fff;
}

.faixa-atual .faixa-descricao strong {
  color: #2698ca;
}

/* Check */

.faixa-check {
  color: #2698ca;

  font-size: 20px;

  padding-right: 5px;
}

/* ==========================================================
   REGULAMENTOS NA TELA DE CONSULTA
========================================================== */

.regulamentos-consulta {
  margin-bottom: 25px;

  padding: 16px;

  border-radius: 18px;

  background: #f8fcfe;

  border: 1px solid #dceff7;
}

/* Título */

.regulamentos-titulo {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 12px;
}

.regulamentos-icone {
  width: 42px;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: #e1f5fd;

  color: #2698ca;

  font-size: 20px;
}

.regulamentos-titulo > div:last-child {
  display: flex;

  flex-direction: column;

  gap: 2px;
}

.regulamentos-titulo strong {
  color: #34495e;

  font-size: 14px;
}

.regulamentos-titulo span {
  color: #718096;

  font-size: 11px;
}

/* Lista */

.regulamentos-lista {
  display: flex;

  flex-direction: column;

  gap: 7px;
}

/* Item */

.regulamento-item {
  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 12px;

  background: #fff;

  border: 1px solid #e4eef2;

  border-radius: 12px;

  text-decoration: none;

  transition: all 0.2s ease;
}

.regulamento-item:hover {
  border-color: #79c8eb;

  background: #f5fcff;

  transform: translateX(2px);
}

/* Ícone PDF */

.regulamento-pdf {
  width: 36px;
  height: 36px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: #fff0f0;

  color: #e55353;

  font-size: 18px;
}

/* Nome */

.regulamento-nome {
  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 1px;
}

.regulamento-nome strong {
  color: #34495e;

  font-size: 13px;
}

.regulamento-nome span {
  color: #8a9aa4;

  font-size: 10px;
}

/* Seta */

.regulamento-arrow {
  color: #79c8eb;

  font-size: 16px;
}

.regulamento-item:hover .regulamento-arrow {
  color: #2698ca;
}

/* Mobile */

@media (max-width: 576px) {
  .tabela-pontos-header {
    padding: 14px;
  }

  .faixa-pontos {
    padding: 10px 8px;
  }

  .faixa-numero {
    width: 38px;
    height: 38px;
  }
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 576px) {
  .consulta-page {
    padding: 20px 12px;
  }

  .consulta-card {
    padding: 28px 22px;

    border-radius: 22px;
  }

  .consulta-header h1 {
    font-size: 24px;
  }

  .resultado-topo {
    padding: 25px 22px 5px;
  }

  .resultado-topo .logo-area img {
    max-width: 140px;
  }

  .resultado-conteudo {
    padding: 20px 22px 28px;
  }

  .resultado-conteudo h1 {
    font-size: 23px;
  }

  .pontos-valor {
    font-size: 48px;
  }
}