/* Estilos CYBERPUNK para el filtro de búsqueda de repuestos - FONDO BLANCO */
:root{
  --bg: rgba(255, 255, 255, 0.95);
  --accent: #00D4FF;
  --muted: rgba(0, 65, 194, 0.6);
  --dark: #0041C2;
  --card: rgba(255, 255, 255, 0.9);
  --neon-blue: #00D4FF;
  --electric-blue: #0091FF;
}

*{box-sizing:border-box;font-family:'Segoe UI', 'Segoe UI Symbol' !important}

body{
  margin:0;
  background: #FFFFFF !important;
}

.filter-section{
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(0, 65, 194, 0.15) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 40px 20px !important;
  border-radius: 30px !important;
  position: relative !important;
  overflow: hidden !important;
}

.container{max-width:1200px;margin:0 auto}

.heading{
  text-align: center;
  font-weight: 900 !important;
  margin: 0 0 40px;
  font-size: 2.5rem;
  font-family: 'Segoe UI', 'Segoe UI Symbol' !important;
  color: #0041C2 !important;
  
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
}

.filter-wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center;padding:12px}

.filter-item{
  background: rgba(240, 248, 255, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(0, 65, 194, 0.15) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding:28px 38px;
  border-radius:22px;
  display:flex;
  align-items:center;
  min-width:340px;
  max-width:480px;
  overflow:hidden;
  transition: all 0.3s ease;
}
.filter-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
  border-color: rgba(0, 212, 255, 0.5) !important;
}
.filter-item.control{
  min-width:340px;
  max-width:480px;
  gap:28px;
  padding-left:0;
}
.ctrl-icon{
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:22px;
  flex-shrink:0;
  border-radius:50%;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 145, 255, 0.15) 100%) !important;
  border: 1px solid rgba(0, 65, 194, 0.15) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  color: #0091FF !important;
  transition: all 0.3s ease;
}

.filter-item:hover .ctrl-icon {
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.6));
}
.ctrl-icon svg{
  width:38px;
  height:38px;
  stroke:currentColor;
  fill:none;
  opacity:1;
  stroke-width:2.6;
}
.control-label{
  display:block;
  margin-bottom:6px;
  width:100%;
}
.label-text{
  display:block;
  font-size:17px;
  color: #0041C2 !important;
  font-weight:800;
  margin-bottom:4px;
  text-align:left;
  letter-spacing:1px;
  text-transform: uppercase;
  
}

.control-select{
  appearance:none;
  -webkit-appearance:none;
  border:none;
  background:transparent;
  outline:none;
  font-size:18px;
  color: #0041C2 !important;
  padding:12px 8px;
  min-width:180px;
  width:100%;
  font-weight:600;
}

.control-select option {
  background: #0F172A;
  color: #ffffff;
}
.search-btn{
  min-width:160px;
  display:flex;
  justify-content:center;
}
.btn-primary{
  background: linear-gradient(135deg, #0041C2 0%, #0091FF 100%) !important;
  color: #fff !important;
  border: 2px solid #00D4FF !important;
  padding: 20px 50px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 900;
  font-size: 19px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 120ms ease, box-shadow 120ms ease;
  text-transform: uppercase;
  letter-spacing: 2px;
  
}

.btn-primary:hover{
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  
  background: linear-gradient(135deg, #00D4FF 0%, #0091FF 100%) !important;
}
@media (max-width:980px){
  .filter-item{min-width:200px;max-width:100vw;padding:14px 10px;}
  .filter-item.control{max-width:100vw;gap:12px;}
  .ctrl-icon{width:44px;height:44px;margin-right:10px;}
  .ctrl-icon svg{width:26px;height:26px;}
}
@media (max-width:640px){
  .filter-wrap{flex-direction:column;align-items:stretch}
  .filter-item{width:100%;max-width:none;padding:12px 8px;}
  .ctrl-icon{order:-1;justify-content:flex-start;margin-bottom:8px;}
  .search-btn{width:100%;margin-top:8px}
  .btn-primary{width:100%}
}
.icon-circle{width:64px;height:64px;border-radius:9999px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(18,51,74,0.06);background:linear-gradient(180deg,#ffffff,#f7fbff)}
.control-label{display:block;margin-bottom:6px}
.label-text{display:block;font-size:12px;color:var(--dark);font-weight:700;margin-bottom:4px}
.control-select{appearance:none;-webkit-appearance:none;border:none;background:transparent;outline:none;font-size:15px;color:var(--dark);padding:8px 6px}

.search-btn{min-width:120px;display:flex;justify-content:center}
.btn-primary{background:var(--accent);color:#fff;border:none;padding:12px 28px;border-radius:8px;cursor:pointer;font-weight:700;box-shadow:0 8px 18px rgba(106,166,223,0.18);transition:transform 120ms ease, box-shadow 120ms ease}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(106,166,223,0.22)}

/* Eliminada la flecha gris fuera de la tarjeta, solo se mantiene la flecha personalizada interna */

/* responsive */
@media (max-width:980px){
  .filter-item{min-width:170px}
  .filter-item.control{max-width:200px}
}
@media (max-width:640px){
  .filter-wrap{flex-direction:column;align-items:stretch}
  .filter-item{width:100%;max-width:none}
  .ctrl-icon{order:-1;justify-content:flex-start;margin-bottom:6px}
  .search-btn{width:100%;margin-top:6px}
  .btn-primary{width:100%}
}

/* pequeña mejora visual para inputs / selects cuando están enfocados */
.control-select:focus, .control-checkbox:focus, .btn-primary:focus{outline:3px solid rgba(106,166,223,0.14);outline-offset:2px}