/* =========================================================
   Corridas Pro — CSS Mobile-First
   ========================================================= */

:root{
  --bg:#0d0f11;
  --panel:#14171a;
  --stroke:#1f2428;
  --txt:#e8eef2;
  --txt-dim:#b8c2cc;
  --accent:#11c76f; /* verde motorista */
  --accent-2:#3aa0ff; /* azul links */
  --danger:#ff5a6a;
  --shadow:0 8px 28px rgba(0,0,0,.35);
  --radius:16px;

  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,sans-serif;

  --field-h:56px;
  --btn-h:56px;
  --pad:16px;
  --gap:14px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--font); line-height:1.35; letter-spacing:.2px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Logo */
#logo{
  position:fixed; top:10px; left:50%; transform:translateX(-50%);
  height:52px; z-index:20; opacity:.95;
}

/* Container */
#main{
  width:100%; max-width:480px;
  margin:72px auto 20px; padding:var(--pad);
  display:flex; flex-direction:column; gap:calc(var(--gap)*1.5);
}

/* Cabeçalho */
#cabecalho{
  display:flex; align-items:center; justify-content:center; gap:10px;
  user-select:none; text-align:center;
}
h1{
  margin:0; font-size:clamp(20px,5vw,24px); font-weight:800; color:var(--accent);
}
.girar{ font-size:1.8rem; }

/* Seções */
section{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:calc(var(--pad)*1.1);
  display:flex; flex-direction:column; gap:calc(var(--gap)*1.2);
  text-align:center; /* centraliza textos estáticos/legendas */
}

/* Estrutura */
linha, linha2, coluna{ display:flex; gap:var(--gap); }
linha, linha2{ position:relative; flex-direction:column; }

/* Rótulos */
.label, linha > span:first-child, linha2 > span:first-child{
  font-size:.98rem; color:var(--txt-dim);
}

/* Campos */
.input-config,
.input-configAPIKEY,
.content-select,
textarea.input-config{
  width:100%; height:var(--field-h);
  padding:0 48px; /* espaço para ícones */
  border-radius:14px; border:1px solid var(--stroke);
  background:#0c0f12; color:var(--txt);
  font-weight:600; font-size:1.06rem; text-align:left;
  outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
}

#resumo.input-config{
  height: 160px;                /* maior conforme pedido */
  padding-top:12px; padding-bottom:12px;
  line-height:1.45; resize:vertical;
  font-size:1.02rem;
}

.input-config::placeholder{ color:#73808b; font-weight:500; }
.input-config:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(17,199,111,.28);
}

/* Destaque do Preço (Uber-like) */
.fare{
  height:72px;                 /* mais alto que os demais */
  font-size:2rem;              /* grande e legível */
  text-align:center !important;
  color:#17e38a;               /* tom vibrante */
  background:
    radial-gradient(120% 180% at 80% 0%, rgba(58,160,255,.12), transparent 60%),
    #0c0f12;
  border:1px solid rgba(23,227,138,.45);
  box-shadow:
    inset 0 0 0 1px rgba(23,227,138,.25),
    0 10px 26px rgba(23,227,138,.12);
}

/* Botão principal */
.action-button{
  width:100%; height:var(--btn-h);
  border:0; border-radius:14px;
  background:linear-gradient(180deg, var(--accent), #0ea95b);
  color:#06130b; font-weight:800; font-size:1.08rem; letter-spacing:.3px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .06s, filter .2s, box-shadow .2s;
  box-shadow:0 8px 18px rgba(17,199,111,.25);
}
.action-button:hover{ filter:brightness(1.05); }
.action-button:active{ transform:translateY(1px) scale(.985); }

/* Emoji de dinheiro no botão */
linha{ position:relative; } /* ancora o money dentro da linha do botão */
#money{
  position:absolute; right:16px; bottom:10px;
  font-size:1.8rem; opacity:.95; pointer-events:none;
  animation: coinFloat 2.4s ease-in-out infinite;
  transform-origin:center;
}
.action-button:hover + #money{
  animation: coinPop .8s ease-in-out infinite;
}

/* Animações do dinheiro */
@keyframes coinFloat{
  0%{ transform: translateY(0) rotate(0deg) }
  50%{ transform: translateY(-4px) rotate(8deg) }
  100%{ transform: translateY(0) rotate(0deg) }
}
@keyframes coinPop{
  0%{ transform: scale(1) rotate(0deg) }
  50%{ transform: scale(1.12) rotate(-8deg) }
  100%{ transform: scale(1) rotate(0deg) }
}

/* Botões inferiores */
coluna{
  flex-direction:row; align-items:center; justify-content:space-between;
}
#voltar, #maps, #waze{
  display:block; height:56px; width:auto; cursor:pointer;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
  transition: transform .08s, filter .2s, opacity .2s;
}
#voltar:hover, #maps:hover, #waze:hover{
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
#voltar:active, #maps:active, #waze:active{ transform: scale(.96); }

/* Localização (ícone dentro do 1º campo) */
.btn-localizacao{
  position:absolute; top:calc(2.1rem + 12px); left:10px;
  width:28px; height:28px; cursor:pointer; z-index:2; opacity:.95;
}
linha:first-of-type .input-config{ padding-left:52px; }

/* Microfones – mesmo tamanho nas duas linhas */
.mic{
  position:absolute; right:10px; top:calc(2.1rem + 12px);
  font-size:1.9rem;            /* maior e igual nos dois */
  cursor:pointer; user-select:none; z-index:2;
  transition: transform .08s, opacity .2s;
}
.mic:active{ transform: scale(.9); }
.mic.recording{ color:var(--danger); text-shadow:0 0 10px rgba(255,90,106,.45); }

.mic2{
  
  position:absolute; right:5px; top:calc(2.1rem + 12px);
  font-size:100px;            /* maior e igual nos dois */
  cursor:pointer; user-select:none; z-index:2;
  transition: transform .08s, opacity .2s;
}
/* Select2 escuro (caso use) */
.select2-container .select2-selection--single{
  height:var(--field-h)!important; background:#0c0f12!important;
  border:1px solid var(--stroke)!important; border-radius:14px!important;
  display:flex!important; align-items:center!important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--txt)!important; padding-left:14px!important; font-weight:600;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  height:var(--field-h)!important;
}

/* Acessibilidade / reduzir movimento */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
}

/* Responsivo fino */
@media (max-width:380px){
  #main{ padding:12px; }
  .action-button{ font-size:1rem; }
  #voltar,#maps,#waze{ height:52px; }
}

/* Roda do título (opcional, caso use) */
@keyframes girar{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* === Correção: Seção 2 inicia oculta e mantém flex ao .show() do jQuery === */
#secao2{ display:none; }
#secao1[style*="display:block"], #secao1[style*="display: block"]{ display:flex!important; }
#secao2[style*="display:block"], #secao2[style*="display: block"]{ display:flex!important; }

/* ===== Cabeçalho novo ===== */
#cabecalho.brand{
  display:flex; align-items:center; gap:12px; justify-content:center;
  text-align:left; user-select:none;
}

.brand-icon{
  width:80px; height:80px; border-radius:30px;
  background:#0c0f12; border:1px solid #11C76F; object-fit:cover;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}

.brand-texts{ display:flex; flex-direction:column; gap:4px; }
#cabecalho.brand h1{
  margin:0; padding:0;
  font-weight:800;
  font-size:clamp(40px, 10vw, 46px);
  letter-spacing:.3px;
  color:#11C76F;
;           /* título mais neutro para não “gritar” */
}
#cabecalho.brand .subtitle{
  margin:0;
  font-size:clamp(12px, 3.4vw, 18px);
  color:#8bb481;
}

/* Traço sutil em baixo do cabeçalho para “assentar” o topo */
#cabecalho.brand{
  position:relative; padding-bottom:6px;
}
#cabecalho.brand::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:1px; background:linear-gradient(90deg, transparent, #232a31, transparent);
  opacity:.7;
}

/* ======= FULL HD (até 1920px) ======= */
@media (max-width: 1920px) {
  #cabecalho {
    padding: 0 0px;
    margin-top: 0px;
  }
}

/* ======= HD (até 1366px) ======= */
@media (max-width: 1366px) {
  #cabecalho {
    padding: 0 12px;
    margin-top: 120px;
  }
}

/* ======= TABLET (até 1024px) ======= */
@media (max-width: 1024px) {
  #cabecalho {
    padding: 0 10px;
    margin-top: 80px;
    flex-direction: column; /* exemplo: cabeçalho empilhado */
    text-align: center;
  }
}

/* ======= CELULAR (até 768px) ======= */
@media (max-width: 768px) {
 #cabecalho {
    
    margin-top: 0px;
    flex-direction: column; /* exemplo: cabeçalho empilhado */
    text-align: center;
  }
}