/**
 * @file
 * Bloc recherche — générique + variante header Commerce (views exposed).
 * Templates : search-block-form, views-exposed-form--product-catalog--search.
 */

/* ============================================================
   Bloc recherche générique (search_form_block core)
   ============================================================ */
.block-search-form-block,
.block-search {
  width: 100%;
  max-width: 420px;
}
.block-search .form-type-search,
.block-search .form-item-keys {
  margin: 0;
}
.block-search form {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--dvd-paper);
  border: 1px solid var(--dvd-border);
  border-radius: 999px;
  padding: 0.125rem 0.375rem 0.125rem 1rem;
  transition: border-color .2s ease;
}
.block-search form:focus-within {
  border-color: var(--dvd-sage);
}
.block-search input[type="search"],
.block-search .form-search,
.block-search .form-control {
  flex: 1;
  border: 0;
  background: transparent;
  box-shadow: none !important;
  padding: 0.5rem 0.25rem;
  font-family: var(--dvd-sans);
  font-size: 0.875rem;
  color: var(--dvd-ink);
  outline: 0;
}
.block-search input::placeholder { color: var(--dvd-muted); }
.block-search .form-actions,
.block-search .btn,
.block-search input[type="submit"] {
  background: var(--dvd-ink);
  color: var(--dvd-paper);
  border: 0;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-family: var(--dvd-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background .2s ease;
}
.block-search .btn:hover,
.block-search input[type="submit"]:hover {
  background: var(--dvd-sage-d);
}

/* Masquage des filtres secondaires / labels bruts */
.block-search .form-item-search-api-fulltext,
.block-search .form-item-keys {
  flex: 1;
}
.block-search .form-item-category,
.block-search .form-item-field-category {
  display: none;
}
.block-search label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* ============================================================
   Search Commerce (views exposed en header) — pill minimaliste
   Structure DOM (BEF + norm-width) :
     #block-... > .content > form > .d-flex.flex-wrap
       > .js-form-item (select masqué)
       > .js-form-item (input texte)
       > .form-actions (button submit)
   La pill visuelle vit sur `form` ; le vrai conteneur flex est `.d-flex`.
   ============================================================ */
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search,
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search.norm-width {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  float: none;
}
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search .content {
  width: 100%;
}

/* La pill : on l'applique au form (englobe le .d-flex interne) */
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search form {
  position: relative;
  min-height: 52px;
  background: var(--dvd-paper-2);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 4px 4px 1.25rem;
  transition: border-color .2s ease, background .2s ease;
}
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search form:focus-within {
  border-color: var(--dvd-sage);
  background: var(--dvd-paper);
}

/* Le VRAI flex container (.d-flex.flex-wrap fourni par BEF) :
   on force nowrap + center, c'est lui qui distribue input / button */
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search form > .d-flex,
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search form > .d-flex.flex-wrap {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

/* Masque le dropdown "- Tout -" catégorie + labels */
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search .js-form-type-select,
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search .form-type-select,
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search .form-select,
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search select,
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search label {
  display: none !important;
}

/* Reset des margins Bootstrap (mb-3) sur les enfants flex */
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search .mb-3,
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search .form-item,
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search .js-form-item,
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search .form-actions {
  margin: 0 !important;
}

/* Wrapper de l'input texte → flex: 1 pour remplir */
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search .form-item-text,
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search .js-form-item-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* Wrapper submit → largeur fixe, pas de flex-grow */
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search .form-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* Input texte — transparent, centré verticalement */
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search input[type="text"],
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search input[type="search"],
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search .form-control {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
  font-family: var(--dvd-sans);
  font-size: 0.9375rem;
  color: var(--dvd-ink);
  outline: 0;
}
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search input::placeholder {
  color: var(--dvd-muted);
  font-size: 0.9375rem;
}

/* Submit : pastille ronde 40×40 avec loupe SVG — texte masqué */
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search button[type="submit"],
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search input[type="submit"],
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search .form-actions .btn {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background-color: var(--dvd-ink) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23faf6ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  font-size: 0 !important;
  color: transparent !important;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  flex: 0 0 40px;
  transition: background-color .2s ease, transform .2s ease;
}
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search button[type="submit"]:hover,
#block-dolcevitadog-exposedformproduct-catalogproduct-catalog-search input[type="submit"]:hover {
  background-color: var(--dvd-sage-d) !important;
  transform: scale(1.05);
}