/* ==========================================================
   NEXFLIX — Barra de busca (Torofilm-like, com fallback)
   ========================================================== */

/* Wrapper (entre categorias e slider) */
.nx-search-wrap,
.tor-search{
  max-width:760px;
  margin: clamp(6px, 1.6vw, 12px) auto clamp(10px, 2.4vw, 18px);
  padding:0 12px;
}

/* Form pill translúcido */
.nx-search,
.tor-search form{
  display:flex; align-items:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:48px; overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
}

/* Reset nativo */
.nx-search-input,
.nx-search-btn,
.tor-search input,
.tor-search button{
  -webkit-appearance:none; appearance:none;
  background:transparent; border:0; outline:0;
}

/* Input (classe oficial) */
.nx-search-input,
.tor-search input{
  flex:1; min-width:0; color:#fff;
  padding:12px 18px; font-size:16px;
}
.nx-search-input::placeholder,
.tor-search input::placeholder{ color:#cfd2d6; }
.nx-search-input::-webkit-search-cancel-button{ display:none }

/* Fallback: se vier sem classe, mas dentro do .tor-search/.nx-searchbar */
.tor-search input[type="text"],
.nx-searchbar input[type="text"]{
  flex:1; min-width:0; color:#fff;
  background:transparent; border:0; outline:0;
  padding:12px 18px; font-size:16px;
}

/* Botão redondo com gradiente */
.nx-search-btn,
.tor-search button{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; margin:6px; border-radius:50%;
  color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#16d2ff,#0b74ff);
  box-shadow:0 6px 16px rgba(11,116,255,.35);
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.nx-search-btn:hover,
.tor-search button:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.nx-search-btn:active,
.tor-search button:active{ transform:translateY(0) scale(.98) }
.nx-search-btn:focus-visible,
.tor-search button:focus-visible{ outline:2px solid #16d2ff; outline-offset:2px }
.nx-search-btn svg,
.tor-search button svg{ width:20px; height:20px; fill:currentColor }

/* Compactação com o 1º slider */
.tor-search + .section-head,
.nx-searchbar + .section-head{ margin-top: clamp(6px, 2vw, 12px) }
.tor-search + .cflow-root,
.nx-searchbar + .cflow-root{ margin-top: clamp(8px, 2.2vw, 14px) }

/* Mobile */
@media (max-width:768px){
  .nx-search-wrap, .tor-search{
    max-width:92vw;
    margin: clamp(6px,1.8vw,10px) auto clamp(10px,3vw,16px);
  }
  .nx-search-input, .tor-search input{ padding:10px 14px; font-size:.95rem }
  .nx-search-btn, .tor-search button{ width:38px; height:38px }
  .nx-search-btn svg, .tor-search button svg{ width:18px; height:18px }
}
@media (max-width:420px){
  .nx-search-wrap, .tor-search{ padding:0 8px }
  .nx-search-input, .tor-search input{ padding:10px 12px }
  .nx-search-btn, .tor-search button{ width:36px; height:36px }
}

/* === Mobile spacing overrides (added by ChatGPT on 2025-09-20) === */

@media (max-width: 640px){
  /* Diminui a distância do search para o slider */
  .nx-search-wrap, .tor-search{
    margin: 8px auto 4px !important; /* top,right/left,bottom */
    padding: 0 10px !important;
  }
  /* Compacta o pill do formulário no mobile sem quebrar o layout */
  .tor-search form{ min-height: 44px !important; }
  .nx-search-input, .tor-search input{ padding: 8px 10px !important; font-size: 15px !important; }
  .nx-search-btn, .tor-search button{ width: 34px !important; height: 34px !important; }
  /* Aproxima o slider do search */
  .nx-searchbar + .cflow-root,
  .cflow-root{ margin-top: 4px !important; }
}

/* === Mobile spacing + anti-zoom (revised) — 2025-09-20 === */
@media (max-width: 640px){
  /* Aproxima a barra do slider */
  .tor-search{ margin: 8px auto 2px !important; padding: 0 10px !important; }
  /* Anti-zoom iOS/Android: inputs >=16px */
  .tor-search input{ font-size: 16px !important; padding: 10px 12px !important; }
  .tor-search button{ width: 34px !important; height: 34px !important; }
}


/* === Mobile SEARCH SAFE — 2025-09-21 === */
@media (max-width: 640px){
  .tor-search input{ font-size: 16px !important; padding: 10px 12px !important; }
  .tor-search button{ width: 36px !important; height: 36px !important; }
}


/* anti-zoom mobile (v8) */
@media (max-width: 640px){
  .tor-search input{ font-size: 16px !important; }
}