/* =========================================================
   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;
  }
}

/* =========================================================
   FRETE FÁCIL — identidade visual inspirada na paleta dos Correios
   Azul-marinho + amarelo. Não representa identidade oficial.
   ========================================================= */
:root{
  --bg:#f2f5f8;
  --panel:#ffffff;
  --stroke:#dce3eb;
  --txt:#172b4d;
  --txt-dim:#53657d;
  --accent:#ffcc00;
  --accent-2:#003b70;
  --danger:#d93025;
  --shadow:0 10px 30px rgba(0,42,85,.10);
  --radius:18px;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
body{
  background:
    radial-gradient(circle at 10% 0%,rgba(255,204,0,.16),transparent 28%),
    linear-gradient(180deg,#f7f9fc 0%,#edf2f7 100%);
  color:var(--txt);
}
#logo{
  background:#fff;
  border:2px solid var(--accent);
  border-radius:50%;
  padding:7px;
  box-shadow:0 4px 14px rgba(0,42,85,.12);
}
#main{max-width:520px; margin-top:78px;}
#cabecalho.brand{
  background:linear-gradient(120deg,#003b70 0%,#07589a 100%);
  border-radius:22px;
  padding:18px 16px 20px;
  box-shadow:0 12px 28px rgba(0,59,112,.20);
  gap:14px;
}
#cabecalho.brand::after{display:none;}
.brand-icon{
  width:68px;height:68px;border-radius:18px;
  background:#fff;border:3px solid var(--accent);
  box-shadow:0 4px 12px rgba(0,0,0,.16);
}
#cabecalho.brand h1{
  color:#ffdc45;
  font-size:clamp(27px,7vw,38px);
  line-height:1.05;
}
#cabecalho.brand .subtitle{
  color:#fff;font-size:clamp(11px,3vw,14px);
  line-height:1.4;max-width:280px;
}
section{
  background:var(--panel);
  border:1px solid #e1e7ef;
  border-top:5px solid var(--accent);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:20px 18px;
  text-align:left;
}
.intro-frete{
  margin:0 0 2px;
  color:#53657d;
  font-size:.91rem;
  line-height:1.5;
  text-align:left;
}
.label,linha > span:first-child,linha2 > span:first-child{
  color:#173e68;font-weight:700;font-size:.91rem;
  text-align:left;
}
.input-config,.input-configAPIKEY,.content-select,textarea.input-config{
  background:#f8fafc;
  border:1.5px solid #d5deea;
  color:#172b4d;
  border-radius:12px;
  padding-left:15px;padding-right:15px;
  font-size:1rem;
}
.input-config::placeholder{color:#8795a8;}
.input-config:focus{
  border-color:#07589a;
  box-shadow:0 0 0 3px rgba(0,86,150,.13);
  background:#fff;
}
select.input-config{cursor:pointer;}
.fare{
  color:#003b70;
  background:linear-gradient(135deg,#fff9d9,#fff);
  border:2px solid #ffcc00;
  box-shadow:inset 0 0 0 1px rgba(255,204,0,.20),0 8px 20px rgba(0,59,112,.08);
  font-weight:800;
}
.action-button{
  background:linear-gradient(135deg,#ffdc45 0%,#ffcc00 100%);
  color:#003b70;
  border:1px solid #e5b800;
  border-radius:13px;
  font-weight:800;
  box-shadow:0 8px 18px rgba(210,165,0,.22);
}
.action-button:hover{filter:brightness(1.03);}
#money{filter:drop-shadow(0 2px 2px rgba(0,0,0,.12));}
#voltar,#maps,#waze{
  background:#f3f6fa;border:1px solid #e0e7ef;
  border-radius:14px;padding:8px;
  height:58px;max-width:31%;
}
#secao2{border-top-color:#003b70;}
#secao2 .fare{font-size:2rem;}
@media(max-width:768px){
  #cabecalho{margin-top:0;flex-direction:row;text-align:left;}
  #cabecalho.brand{flex-direction:row;text-align:left;}
}
@media(max-width:420px){
  #main{padding:12px;gap:16px;}
  section{padding:17px 14px;}
  .brand-icon{width:58px;height:58px;}
  #cabecalho.brand h1{font-size:29px;}
}


/* =========================================================
   LOGIN — preserva a identidade original do formulário
   O app usa fundo claro, então o login recebe seu próprio
   painel escuro para manter o contraste do texto branco.
   ========================================================= */
#login{
  background:#0c0f12;
  color:#f7f7f7;
  border:1px solid rgba(255,255,255,.10);
  border-top:4px solid #ffcc00;
  border-radius:20px;
  padding:24px 20px;
  margin:24px auto 30px;
  box-shadow:0 12px 30px rgba(0,42,85,.18);
}
#login #textologin{color:#f7f7f7;}
#login #textologin span{color:rgb(251,255,0);}
#login #textologin span:nth-child(2),
#login #textologin span:nth-child(4){color:brown;}
#login .input-configlogin{
  background-color:rgb(220,235,220);
  border:5px solid #0af81e;
  color:#172b4d;
}
#login .action-buttonlogin{
  background-color:#fff;
  border:4px solid #f00;
  color:#111;
}
#login .action-buttonlogin:hover{background-color:#ff9900;}
#login #whatsapplogin{width:60px;height:auto;}
@media(max-width:768px){
  #login{padding:20px 15px;margin:18px auto 24px;}
  #login .input-configlogin{font-size:14px;}
  #login .action-buttonlogin{font-size:16px;}
  #login #whatsapplogin{width:50px;}
}


/* Corrige o espaço dos ícones nos campos de endereço */
#enderecoPartida,
#enderecoDestino {
  padding-left: 52px !important;
  padding-right: 52px !important;
  box-sizing: border-box;
}

/* Mantém os ícones posicionados corretamente */
.btn-localizacao {
  left: 10px;
  z-index: 3;
}

.mic {
  right: 10px;
  z-index: 3;
}