/* Contenedor: inline y con z-index alto por si hay dropdowns cerca */
.mini-search { display:inline-block; position:relative; z-index: 5; }

/* Layout del formulario */
.mini-search__form { position: relative; width: var(--mini-width, 320px); max-width: 100%; }

/* Icono lupa dentro del input */
.mini-search__icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  line-height: 0; opacity: .7; pointer-events: none;
}

/* Input pill */
.mini-search__input {
  width: 100%; height: 40px;
  border: 1px solid #e5e7eb; border-radius: 999px;
  padding: 0 14px 0 40px;
  font-size: 14px; background:#fff; outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.mini-search__input:focus { border-color:#d1d5db; box-shadow:0 0 0 3px rgba(0,0,0,.04); }

/* Botón submit invisible (fallback Enter) */
.mini-search__submit {
  position: absolute; right: 6px; top: 6px; height: 28px; width: 28px;
  border:0; background:transparent; cursor:pointer; opacity:0;
}

/* Texto accesible oculto */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ====== RESPONSIVE ====== */
@media (max-width: 992px) {
  /* En móvil ocupa todo el ancho disponible */
  .mini-search { display:block; width:100%; }
  .mini-search__form { width:100% !important; }
}

/* Utilidad por defecto para cabecera */
.dfms--header { margin-left: 12px; }


/* ===== MOBILE: que el buscador vaya debajo de los iconos y a 100% ===== */
@media (max-width: 992px){
  /* Nuestro contenedor del módulo */
  .mini-search.dfms--header{
    /* si el padre es flex, lo mandamos a la siguiente línea */
    flex: 0 0 100% !important;
    order: 99 !important;

    /* y por si NO es flex, aseguramos línea propia igualmente */
    display: block !important;
    width: 100% !important;

    padding: 8px 12px !important;
    margin: 0 !important;
  }

  .mini-search.dfms--header .mini-search__form{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .mini-search.dfms--header .mini-search__input{
    height: 46px;
    font-size: 16px;
  }
}
