/* FPVSHOP — identidade laranja neon (#FF6B00)
   Tema claro (padrão): fundo branco com destaques laranja.
   Tema escuro (via botão): carbono #0D0F12 · superfícies #1A1D22 · texto #E8EAED */

/* ---------- tema claro (padrão) ---------- */
.joog-light,
[data-theme=joog-light] {
  --heroui-background: 0 0% 100%;
  --heroui-foreground: 220 14% 11%;

  --heroui-focus: 25 100% 45%;
  --heroui-primary-50: 27 100% 95%;
  --heroui-primary-100: 27 100% 90%;
  --heroui-primary-200: 26 100% 80%;
  --heroui-primary-300: 26 100% 70%;
  --heroui-primary-400: 25 100% 60%;
  --heroui-primary-500: 25 100% 50%;
  --heroui-primary-600: 25 100% 40%;
  --heroui-primary-700: 24 100% 30%;
  --heroui-primary-800: 24 100% 20%;
  --heroui-primary-900: 23 100% 10%;
  --heroui-primary: 25 100% 45%;
  --heroui-primary-foreground: 0 0% 100%;

  --heroui-secondary-50: 38 100% 95%;
  --heroui-secondary-100: 38 100% 90%;
  --heroui-secondary-200: 38 100% 80%;
  --heroui-secondary-300: 38 100% 70%;
  --heroui-secondary-400: 38 100% 60%;
  --heroui-secondary-500: 38 100% 50%;
  --heroui-secondary-600: 38 100% 40%;
  --heroui-secondary-700: 38 100% 30%;
  --heroui-secondary-800: 38 100% 20%;
  --heroui-secondary-900: 38 100% 10%;
  --heroui-secondary: 38 100% 45%;
  --heroui-secondary-foreground: 38 100% 10%;
}

.joog-light body {
  background-color: #fff;
  color: hsl(220 14% 11%);
}

/* ---------- tema escuro (ativado pelo usuário) ---------- */
.joog-dark,
[data-theme=joog-dark] {
  /* fundos e superfícies (carbono) */
  --heroui-background: 216 16% 6%;
  --heroui-foreground: 220 14% 92%;
  --heroui-content1: 216 12% 11%;
  --heroui-content1-foreground: 220 14% 92%;
  --heroui-content2: 215 10% 15%;
  --heroui-content2-foreground: 220 14% 92%;
  --heroui-content3: 214 9% 20%;
  --heroui-content3-foreground: 220 14% 92%;
  --heroui-content4: 213 8% 26%;
  --heroui-content4-foreground: 220 14% 92%;

  /* primária: laranja neon #FF6B00 (hsl 25 100% 50%) */
  --heroui-focus: 25 100% 50%;
  --heroui-primary-50: 25 100% 8%;
  --heroui-primary-100: 25 100% 15%;
  --heroui-primary-200: 25 100% 24%;
  --heroui-primary-300: 25 100% 32%;
  --heroui-primary-400: 25 100% 42%;
  --heroui-primary-500: 25 100% 50%;
  --heroui-primary-600: 26 100% 58%;
  --heroui-primary-700: 28 100% 68%;
  --heroui-primary-800: 30 100% 80%;
  --heroui-primary-900: 33 100% 92%;
  --heroui-primary: 25 100% 50%;
  --heroui-primary-foreground: 220 20% 7%;

  /* secundária: âmbar de telemetria */
  --heroui-secondary-50: 38 100% 10%;
  --heroui-secondary-100: 38 100% 20%;
  --heroui-secondary-200: 38 100% 30%;
  --heroui-secondary-300: 38 100% 40%;
  --heroui-secondary-400: 38 100% 50%;
  --heroui-secondary-500: 38 100% 60%;
  --heroui-secondary-600: 38 100% 70%;
  --heroui-secondary-700: 38 100% 80%;
  --heroui-secondary-800: 38 100% 90%;
  --heroui-secondary-900: 38 100% 95%;
  --heroui-secondary: 38 100% 50%;
  --heroui-secondary-foreground: 220 20% 7%;
}

.joog-dark body {
  background-color: hsl(216 16% 6%);
  color: hsl(220 14% 92%);
}

/* logo do header: fixa na variante colorida/transparente em qualquer
   tema — o header agora segue o estilo BYDJI (sempre claro, ver
   fpv-header.css), então a troca para a versão clara-sobre-escuro
   deixou de fazer sentido aqui. */

/* ícone do botão de tema criado pelo script de fallback */
.fpv-ic-sun { display: none; }
.joog-dark .fpv-ic-moon { display: none; }
.joog-dark .fpv-ic-sun { display: block; }

/* ---------- rodapé: carbono #0A0A0A com colmeia #161616 (ambos os temas) ---------- */
.tps-footer,
.tps-footer:is(.joog-light, .joog-light *),
.tps-footer:is(.joog-dark, .joog-dark *) {
  background-color: #0A0A0A !important;
}

.tps-footer .tps-footer-content {
  background-color: #0A0A0A !important;
  background-image: url("pattern_dark.png");
  background-size: 588px 340px;
  background-repeat: repeat;
  color: #E8EAED !important;
}

.tps-footer .tps-footer-content a,
.tps-footer .tps-footer-content p {
  color: #E8EAED;
}

.tps-footer .tps-footer-content a:hover {
  color: #FF6B00;
}

/* banner de consentimento de cookies oculto temporariamente (estava cobrindo o rodapé) */
div.fixed.bottom-0.left-0.z-30.w-screen {
  display: none !important;
}

/* faixa do copyright (© ... | Desenvolvido por) */
.tps-footer > div:not(.tps-footer-content) {
  background-color: #161616 !important;
  color: #E8EAED;
}

/* ---------- hero principal estático (Racer X5) ---------- */
.fpv-hero {
  position: relative;
  min-height: clamp(420px, 62vh, 640px);
  display: flex;
  align-items: center;
  background-color: #0A0A0A;
  z-index: 30; /* acima das dobras seguintes, abaixo do nav (z-40) */
}

.fpv-hero-img,
.fpv-hero-overlay {
  border-radius: inherit;
}

.fpv-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.fpv-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(10, 10, 10, 0.68) 0%, rgba(10, 10, 10, 0.45) 55%, rgba(10, 10, 10, 0.6) 100%);
}

.fpv-hero-content {
  position: relative;
  z-index: 1;
  width: min(680px, 92vw);
  padding: 3rem 1rem;
  margin: 0 auto;
  color: #E8EAED;
  text-align: center;
}

.fpv-hero-kicker {
  color: #FF6B00;
  font-weight: 700;
  letter-spacing: 0.25em;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.fpv-hero-title {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 800;
  font-style: italic;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 1rem;
}

.fpv-hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.6;
  color: #D5D8DC;
  margin-bottom: 1.75rem;
}

.fpv-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.fpv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.9rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fpv-btn-primary {
  background-color: #FF6B00;
  color: #101114;
}

.fpv-btn-primary:hover {
  background-color: #FF8A3D;
}

.fpv-btn-ghost {
  border: 1.5px solid rgba(232, 234, 237, 0.65);
  color: #E8EAED;
}

.fpv-btn-ghost:hover {
  border-color: #FF6B00;
  color: #FF6B00;
}

/* ---------- busca principal do hero ---------- */
.fpv-search {
  position: relative;
  margin-top: 1.5rem;
  text-align: left;
}

/* ---------- caixa/painel no estilo do campo de busca do header BYDJI:
   fundo branco, borda preta 2px, cantos levemente arredondados (4px,
   não pílula), botão de busca preto com ícone branco — ver os tokens
   ThemesHeaderInput e ThemesHeaderIconSearch no report da tarefa.

   ATENÇÃO: não escreva a sequência de fechamento de comentário dentro
   deste bloco. Ela já apareceu aqui uma vez (numa citação literal dos
   nomes dos tokens), fechou o comentário mais cedo, e o resto do texto
   virou lixo que fez o parser descartar TODA a regra .fpv-search-bar
   abaixo — a caixa de busca ficou sem fundo, sem borda e sem altura,
   praticamente invisível sobre o banner escuro. ---------- */
.fpv-search-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0 0 1.25rem;
  height: 54px;
  border-radius: 4px;
  background: #FFFFFF;
  border: 2px solid #000000;
  /* sombra para destacar a caixa do banner escuro atrás dela */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fpv-search-bar:focus-within {
  border-color: #000000;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

.fpv-search-ic {
  width: 20px;
  height: 20px;
  color: #000000;
  flex-shrink: 0;
}

/* spinner discreto (task 33) — visível só enquanto a busca no catálogo
   real está em voo; some assim que a resposta chega (sucesso ou erro). */
.fpv-search-spinner {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 2px solid #D9D9D9;
  border-top-color: #FF6B00;
  border-radius: 50%;
  animation: fpv-search-spin 0.6s linear infinite;
}

@keyframes fpv-search-spin {
  to { transform: rotate(360deg); }
}

.fpv-search-bar input {
  flex: 1;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: #000000;
  font-size: 1rem;
}

.fpv-search-bar input::placeholder {
  color: #888888;
}

.fpv-search-bar input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.fpv-search-kbd {
  flex-shrink: 0;
  align-self: center;
  margin-right: 0.9rem;
  font-size: 0.75rem;
  color: #888888;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 2px 8px;
}

.fpv-search-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 40;
  background: #FFFFFF;
  border: 1px solid #EDEDED;
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  max-height: 380px;
  overflow-y: auto;
  padding: 0.5rem;
}

.fpv-search-h {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888888;
  padding: 0.6rem 0.75rem 0.3rem;
}

.fpv-search-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 4px;
  color: #404852;
  font-size: 0.95rem;
}

.fpv-search-item:hover,
.fpv-search-item.is-sel {
  background: #F5F5F5;
}

.fpv-search-item b {
  color: #FF830A;
  font-weight: 700;
}

.fpv-search-item img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
  flex-shrink: 0;
}

.fpv-search-nm {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fpv-search-pr {
  flex-shrink: 0;
  color: #000000;
  font-weight: 700;
  font-size: 0.85rem;
}

.fpv-search-tag {
  width: 42px;
  text-align: center;
  color: #FF830A;
  font-weight: 800;
  flex-shrink: 0;
}

/* badge "Sem estoque" (task 33) — mesma paleta do estado is-out de
   .fpv-qv-stock (fpv-quickview.css), para consistência no site inteiro. */
.fpv-search-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: #c0392b;
  background: rgba(192, 57, 43, 0.1);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

.fpv-search-empty {
  padding: 1.2rem 0.75rem;
  color: #888888;
  text-align: center;
}

.fpv-search-empty-link {
  display: inline-block;
  margin-top: 0.6rem;
  color: #FF6B00;
  font-weight: 700;
  font-size: 0.9rem;
}

.fpv-search-empty-link:hover {
  text-decoration: underline;
}

/* ---------- busca no modo escuro ----------
   A busca vive DENTRO do hero, que é escuro em QUALQUER tema (imagem +
   overlay fixos). Uma variante escura da caixa (#1A1D22 sobre #0A0A0A)
   sumia contra o banner — foi exatamente o "input quase invisível"
   relatado. Como o fundo atrás dela nunca muda, a caixa mantém o
   tratamento claro do BYDJI nos dois temas; só o anel de foco vira
   laranja no escuro, para combinar com o resto do site. */
.joog-dark .fpv-search-bar:focus-within {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.35);
}

/* ---------- faixa de parceiros sobre o banner pré-footer ---------- */
.fpv-partners {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2rem;
  padding: 2rem 1.5rem;
  background: linear-gradient(to bottom,
    transparent,
    rgba(10, 10, 10, 0.72) 28%,
    rgba(10, 10, 10, 0.72) 72%,
    transparent);
}

.fpv-partners img {
  box-sizing: content-box;
  height: 52px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65));
  opacity: 0.95;
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.fpv-partners img:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* logos quadrados/empilhados ganham mais altura para equilibrar o tamanho visual */
.fpv-partners img[src*="flywoo"],
.fpv-partners img[src*="iflyth"] {
  height: 72px;
}

@media (max-width: 767px) {
  .fpv-partners img[src*="flywoo"],
  .fpv-partners img[src*="iflyth"] {
    height: 42px;
  }
}

.fpv-partners img:hover {
  opacity: 1;
  transform: scale(1.08);
}

@media (max-width: 767px) {
  .fpv-partners {
    gap: 0.6rem 1.1rem;
    padding: 1.4rem 0.8rem 0.7rem;
  }

  .fpv-partners img {
    height: 30px;
    max-width: 110px;
    padding: 6px 10px;
    border-radius: 10px;
  }
}

/* Logo do header: largura própria (as classes w-[110px]/xs:w-[160px] não existem
   no bundle Tailwind estático — tamanho controlado aqui). */
.fpv-logo-a { display: block; width: 130px; margin-left: 0; padding-left: 0; }
@media (min-width: 480px) { .fpv-logo-a { width: 190px; } }
/* compensa o px-6 do container do header para a logo encostar à esquerda (só desktop,
   onde a logo é o primeiro item; no mobile o hambúrguer vem antes) */
@media (min-width: 640px) { .fpv-logo-a { margin-left: -24px; } }