/* ================================
   HelloTaxi – Estilos de Landing
   Foco: contraste, legibilidade e hierarquia
   ================================ */

/* Paleta/variáveis */
:root{
  --brand-yellow: #FFD60A;
  --brand-yellow-700:#e6c108;
  --brand-black: #0e0f10;
  --bg-hero: #0d0f12;
  --text-100:#F8FAFC; /* quase branco */
  --text-80:#E5E7EB;  /* cinza claro */
  --text-60:#CBD5E1;  /* cinza médio */
  --text-40:#9CA3AF;  /* cinza */
  --surface-900:#111317;
  --surface-800:#151820;
  --surface-700:#1B1F2A;
  --border:#2A2F3A;
}

/* Reset fino para garantir contraste */
body{
  background: var(--surface-900);
  color: var(--text-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------- Hero ---------------- */
.hero{
  position: relative;
  min-height: 100vh;
  background: url('../img/hero-bg.jpg') center/cover no-repeat fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero .overlay{
  position: absolute; inset: 0;
  /* Overlay mais forte para contraste do texto */
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.75) 100%),
    radial-gradient(1200px 600px at 50% 0%, rgba(0,0,0,.35), transparent);
}
.hero .container{
  position: relative;
  z-index: 1;
}

/* Títulos e textos principais com sombra sutil para legibilidade sobre imagem */
.hero h1{
  color: var(--text-100);
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  letter-spacing: .2px;
}
.hero p.lead{
  color: var(--text-80);
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

/* Texto secundário */
.hero .small{
  color: var(--text-60);
}

/* Badge de lançamento */
.badge.bg-success{
  background-color: var(--brand-yellow) !important;
  color: #000 !important;
  font-weight: 700;
  border-radius: 8px;
}

/* ---------------- Card/Form ---------------- */
.card{
  background: rgba(12, 14, 18, .82);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  border-radius: 16px;
}

.form-label{
  color: var(--text-80);
  font-weight: 600;
}

/* Inputs escuros com alto contraste */
.form-control,
.form-select{
  background: var(--surface-800);
  color: var(--text-100);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.form-control::placeholder{
  color: var(--text-40);
  opacity: 1;
}
.form-control:focus,
.form-select:focus{
  background: var(--surface-700);
  color: var(--text-100);
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 .2rem rgba(255,214,10,.20);
}

/* Botão principal – amarelo HelloTaxi */
.btn.btn-warning{
  --bs-btn-color: #000;
  --bs-btn-bg: var(--brand-yellow);
  --bs-btn-border-color: var(--brand-yellow);
  --bs-btn-hover-bg: var(--brand-yellow-700);
  --bs-btn-hover-border-color: var(--brand-yellow-700);
  --bs-btn-focus-shadow-rgb: 255,214,10;
  font-weight: 700;
  border-radius: 12px;
  padding: .75rem 1.25rem;
  box-shadow: 0 6px 18px rgba(255,214,10,.25);
}
.btn.btn-warning:hover{
  transform: translateY(-1px);
}

/* ---------------- Store Badges ---------------- */
.store-btn{
  display: inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  padding: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.store-btn img{ height: 48px; display:block; }
.store-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
}

/* ---------------- Logo ---------------- */
img[alt="HelloTaxi"]{
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
}

/* ---------------- Utilidades ---------------- */
.text-white{ color: var(--text-100) !important; }
.text-muted, .opacity-75{ color: var(--text-60) !important; }

/* Espaçamento melhor para o bloco do formulário no desktop */
@media (min-width: 992px){
  .hero .card{
    margin-top: 1.25rem;
  }
  .hero h1{
    font-size: 3.2rem;
  }
  .hero p.lead{
    font-size: 1.2rem;
  }
}

/* Ajustes mobile para legibilidade e toque */
@media (max-width: 576px){
  .hero h1{ font-size: 2rem; }
  .store-btn img{ height: 44px; }
  .btn.btn-warning{ padding: .65rem 1rem; }
}
.accordion-button {
  background: rgba(255,255,255,.06);
  color: var(--text-100);
}
.accordion-button:not(.collapsed) {
  background: rgba(255,214,10,.15);
  color: var(--text-100);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.15);
}
.accordion-item { border-color: rgba(255,255,255,.15); }

/* Ajusta o fundo e cor do texto das respostas no FAQ */
.accordion-body {
  background-color: #ffffff; /* fundo claro */
  color: #000000; /* texto preto */
}

/* Ajusta o fundo e cor do título (pergunta) */
.accordion-button {
  background-color: #f7f7f7; /* cinza claro */
  color: #000000;
}
.accordion-button:not(.collapsed) {
  background-color: #ffe680; /* amarelo suave */
  color: #000000;
}

.badge.bg-success {
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255,214,10,.25);
}
.badge.bg-success:hover {
  filter: brightness(0.95);
}

/* ====== Indicações: melhora de contraste ====== */

/* Ajuda abaixo do campo (Bootstrap .form-text) */
#refForm .form-text{
  color: var(--text-80) !important;  /* mais claro */
  opacity: 1 !important;             /* remove cinza fraco do Bootstrap */
}

/* Caixa de ajuda à direita */
.help-box{
  border-color: rgba(255,255,255,.12) !important;
}
.help-box h6,
.help-box b,
.help-box strong{
  color: var(--text-100) !important;  /* títulos e destaques bem claros */
}
.help-box .list-small li,
.help-box p,
.help-box ol li,
.help-box ul li{
  color: var(--text-80) !important;   /* corpo do texto mais claro */
}

/* Placeholders dos campos dessa página um pouco mais visíveis */
#refForm input.form-control::placeholder,
#refForm textarea.form-control::placeholder{
  color: var(--text-60) !important;   /* antes estava muito apagado */
}

/* (opcional) bordas levemente mais visíveis nos inputs dessa página */
#refForm .form-control{
  border-color: rgba(255,255,255,.18) !important;
}