/*
 * Isoliertes Layout fuer die oeffentliche Dienstleistersuche.
 * Diese Datei wird nach style.css geladen und setzt dessen altes
 * 12-Spalten-Formular fuer die neue verschachtelte Struktur gezielt zurueck.
 */
.djs-search-page .djs-search-hero{
  overflow:visible;
}

/* WICHTIG: Das globale .dj-search-form nutzt ein 12-Spalten-Raster mit !important.
   Die neue Struktur besteht aber aus eigenen Zeilen. Deshalb muss das Elternformular
   zwingend auf genau eine Spalte zurueckgesetzt werden. */
.djs-search-page form.dj-search-form.djs-search-form-modern{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-auto-flow:row !important;
  gap:20px !important;
  align-items:stretch !important;
  width:100% !important;
  min-width:0 !important;
  margin-top:26px !important;
}

.djs-search-page form.djs-search-form-modern > .provider-search-row,
.djs-search-page form.djs-search-form-modern > .provider-search-extra-locations,
.djs-search-page form.djs-search-form-modern > .provider-search-actions{
  grid-column:1 / -1 !important;
  width:100% !important;
  min-width:0 !important;
}

.djs-search-page .provider-search-row{
  display:grid !important;
  gap:16px !important;
  align-items:end !important;
  min-width:0 !important;
}

.djs-search-page .provider-search-row--primary{
  grid-template-columns:
    minmax(190px,1.15fr)
    minmax(155px,.78fr)
    minmax(205px,1.12fr)
    minmax(135px,.68fr)
    minmax(175px,.88fr) !important;
}

.djs-search-page .provider-search-row--secondary{
  grid-template-columns:
    minmax(220px,1.08fr)
    minmax(270px,1.42fr)
    minmax(235px,1.16fr)
    minmax(185px,.92fr) !important;
}

/* Alte nth-of-type-Regeln aus style.css duerfen die Felder in den neuen Zeilen
   nicht mehr ueber mehrere Spalten ziehen. */
.djs-search-page form.djs-search-form-modern .provider-search-row > label.provider-search-field,
.djs-search-page form.djs-search-form-modern .provider-search-row > label.provider-search-field:nth-of-type(n){
  grid-column:auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
}

.djs-search-page .provider-search-field > span{
  display:block;
  min-height:20px;
  color:#071d45;
  font-size:14px;
  font-weight:900;
  line-height:1.25;
  white-space:nowrap;
}

.djs-search-page .provider-search-field input,
.djs-search-page .provider-search-field select{
  width:100% !important;
  min-width:0 !important;
  height:50px !important;
  margin:0 !important;
  padding:0 15px !important;
  border:1px solid #cbd7e6 !important;
  border-radius:14px !important;
  background:#fff !important;
  color:#0b234c !important;
  font:inherit !important;
  font-weight:750 !important;
  box-shadow:0 5px 18px rgba(7,35,78,.05) !important;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

.djs-search-page .provider-search-field select{
  padding-right:36px !important;
}

.djs-search-page .provider-search-field input::placeholder{
  color:#8290a5;
  font-weight:700;
}

.djs-search-page .provider-search-field input:hover,
.djs-search-page .provider-search-field select:hover{
  border-color:#9fb3cb !important;
}

.djs-search-page .provider-search-field input:focus,
.djs-search-page .provider-search-field select:focus{
  outline:none !important;
  border-color:#ff850d !important;
  box-shadow:0 0 0 4px rgba(255,133,13,.14),0 8px 22px rgba(7,35,78,.08) !important;
  transform:none !important;
}

.djs-search-page [data-state-field][hidden]{
  display:none !important;
}

.djs-search-page .provider-search-extra-locations{
  display:grid;
  gap:12px;
}

.djs-search-page .provider-search-extra-locations:empty{
  display:none;
}

.djs-search-page .provider-search-extra-row{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(190px,.35fr) 46px;
  gap:12px;
  align-items:center;
  padding:14px;
  border:1px solid #d7e2ef;
  border-radius:18px;
  background:linear-gradient(135deg,#f8fbff 0%,#fff 100%);
  box-shadow:0 10px 28px rgba(7,35,78,.06);
}

.djs-search-page .provider-search-extra-row input,
.djs-search-page .provider-search-extra-row select{
  width:100%;
  min-width:0;
  height:48px;
  margin:0;
  padding:0 14px;
  border:1px solid #cbd7e6;
  border-radius:13px;
  background:#fff;
  color:#0b234c;
  font:inherit;
  font-weight:750;
}

.djs-search-page .provider-search-extra-row button{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid #e1b7b7;
  border-radius:13px;
  background:#fff7f7;
  color:#a52626;
  font-size:25px;
  font-weight:900;
  cursor:pointer;
}

.djs-search-page .provider-search-actions{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:16px !important;
  padding-top:2px;
}

.djs-search-page .provider-search-add-location{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:auto !important;
  max-width:100% !important;
  min-height:46px !important;
  padding:11px 16px !important;
  border:1px solid #b9c9dc !important;
  border-radius:14px !important;
  background:#fff !important;
  color:#0b2b5f !important;
  font-weight:900 !important;
  line-height:1.25 !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  cursor:pointer;
  box-shadow:0 7px 18px rgba(7,35,78,.06) !important;
}

.djs-search-page .provider-search-add-location[hidden]{
  display:none !important;
}

.djs-search-page form.djs-search-form-modern .djs-search-submit{
  grid-column:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:240px !important;
  min-height:50px !important;
  margin:0 !important;
  border-radius:14px !important;
  white-space:nowrap !important;
  box-shadow:0 12px 28px rgba(255,133,13,.22) !important;
}

.djs-search-page .djs-geo-status{
  margin-top:18px;
  padding:12px 16px;
  border:1px solid #d4e2f1;
  border-radius:13px;
  background:#f3f8fe;
  color:#173c6a;
  font-weight:800;
}

@media(max-width:1220px){
  .djs-search-page .provider-search-row--primary{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .djs-search-page .provider-search-row--secondary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:900px){
  .djs-search-page .provider-search-row--primary,
  .djs-search-page .provider-search-row--secondary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .djs-search-page .provider-search-field--term,
  .djs-search-page .provider-search-field--location,
  .djs-search-page .provider-search-field--style{
    grid-column:1 / -1 !important;
  }
  .djs-search-page .provider-search-extra-row{
    grid-template-columns:minmax(0,1fr) minmax(170px,.45fr) 46px;
  }
}

@media(max-width:600px){
  .djs-search-page form.dj-search-form.djs-search-form-modern{
    gap:16px !important;
    margin-top:20px !important;
  }
  .djs-search-page .provider-search-row--primary,
  .djs-search-page .provider-search-row--secondary{
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
  }
  .djs-search-page form.djs-search-form-modern .provider-search-row > label.provider-search-field,
  .djs-search-page form.djs-search-form-modern .provider-search-row > label.provider-search-field:nth-of-type(n){
    grid-column:1 / -1 !important;
  }
  .djs-search-page .provider-search-field > span{
    white-space:normal;
  }
  .djs-search-page .provider-search-extra-row{
    grid-template-columns:1fr;
  }
  .djs-search-page .provider-search-extra-row button{
    width:100%;
  }
  .djs-search-page .provider-search-actions{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .djs-search-page .provider-search-add-location,
  .djs-search-page form.djs-search-form-modern .djs-search-submit{
    width:100% !important;
    min-width:0 !important;
  }
}