/**
 * Hero-Schnellsuche: neues Marketplace-Markup (.mpquicksearch-module) im Look der
 * bisherigen .car-search-panel.top auf der Startseite.
 *
 * Einbindung in functions.php (nach Marketplace-Styles laden):
 *
 *   wp_enqueue_style(
 *       'marketplace-hero-quicksearch',
 *       get_stylesheet_directory_uri() . '/assets/css/marketplace-hero-quicksearch.css',
 *       array( 'marketplace-frontend-style' ),
 *       '1.0.0'
 *   );
 *
 * Shortcode auf der Startseite: [mpquicksearch]
 * Im Marketplace-Backend unter „Schnellsuche“ nur Fahrzeugart, Hersteller, Modell aktivieren.
 */

/* -------------------------------------------------------------------------- */
/* Wrapper – Plugin-Defaults zurücksetzen                                     */
/* -------------------------------------------------------------------------- */

.hero-section .car-search-section .nr-quick-search-section {
  padding: 0;
  margin: 0;
  background: transparent;
  width: 58%;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module {
  width: 100%;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .results,
.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .loading-overlay {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Layout: linker Filterbereich + rechter Ergebnis-Button                     */
/* -------------------------------------------------------------------------- */

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module form {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .fields {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 68%;
  box-sizing: border-box;
  padding: 1.85vw;
  margin: 0;
  background-color: var(--darkBgColor);
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .fields::before {
  content: "Fahrzeugsuche";
  flex: 0 0 100%;
  border-left: 2px solid var(--baseFontColor);
  padding-left: 1em;
  margin-bottom: 1em;
  text-transform: uppercase;
  font-size: 1.77em;
  line-height: 1.2;
  color: var(--baseFontColor);
}

/* -------------------------------------------------------------------------- */
/* Filter-Felder (links)                                                      */
/* -------------------------------------------------------------------------- */

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:not(:last-child) {
  flex: 1;
  min-width: 0;
  margin: 0 1em 0 0;
  padding: 0;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:nth-last-child(2) {
  margin-right: 0;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:not(:last-child) label {
  display: block;
  font-weight: bold;
  padding-bottom: 0.5em;
  margin: 0;
  color: var(--baseFontColor);
  text-transform: none;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:not(:last-child) select {
  width: 100%;
  display: block;
  padding: 0.25em;
  margin: 0;
  color: var(--baseFontColor);
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--baseFontColor);
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg width='20' height='12' viewBox='0 0 20 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 12L0 1.99998L1.4 0.599976L10 9.19998L18.6 0.599976L20 1.99998L10 12Z' fill='%23343a40'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1em 1em;
  background-position: right center;
  cursor: pointer;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:not(:last-child) select::-ms-expand {
  display: none;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:not(:last-child) select:hover {
  cursor: pointer;
}

/* -------------------------------------------------------------------------- */
/* Ergebnis-Button (rechts) – entspricht .car-search-link                     */
/* -------------------------------------------------------------------------- */

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:last-child {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32%;
  box-sizing: border-box;
  margin: 0;
  padding: 1.85vw;
  background-color: var(--primaryColor);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}


.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:last-child > label {
  display: none;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:last-child .revertbuttons {
  display: none;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:last-child #nrcarsearchlink {
  display: block;
  width: 100%;
  margin: 0;
  text-decoration: none;
  color: inherit;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:last-child #nrcarsearchlink .button.is-primary {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 0;
  border: none;
  border-radius: 0;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:last-child #nrcarsearchlink .button.is-primary svg {
  display: none;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:last-child #nrcarsearchlink .button.is-primary .ergebnisse {
  display: block;
  font-size: 0;
  line-height: 1.2;
  min-width: 0;
  text-transform: none;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:last-child #nrcarsearchlink .button.is-primary .ergebnisse .count {
  display: block;
  font-family: var(--headlineFamily);
  color: #fff;
  font-size: 2.25rem;
  font-weight: normal;
  line-height: 1.1;
  transition: var(--transition);
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:last-child #nrcarsearchlink .button.is-primary .ergebnisse::after {
  content: "Fahrzeuge anzeigen";
  display: block;
  color: #fff;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.3;
  transition: var(--transition);
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:last-child #nrcarsearchlink:hover .button.is-primary .ergebnisse .count,
.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:last-child #nrcarsearchlink:hover .button.is-primary .ergebnisse::after {
  color: var(--darkBgColor);
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module.should-get-styling .field:last-child #nrcarsearchlink .button.is-primary {
  background-color: transparent !important;
  height: auto;
  padding: 0;
}

/* Plugin-„Standard-Styling“ (should-get-styling) im Hero-Kontext neutralisieren */
.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module.should-get-styling .fields {
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module.should-get-styling .field:not(:last-child) {
  color: inherit;
  flex-grow: 1;
  width: auto;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module.should-get-styling .field:not(:last-child) label {
  color: var(--baseFontColor);
  text-transform: none;
}

.hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module.should-get-styling .field:not(:last-child) select {
  border-radius: 0;
  padding: 0.25em;
}

/* -------------------------------------------------------------------------- */
/* Responsive – angelehnt an critical.css                                     */
/* -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .hero-section .car-search-section .nr-quick-search-section {
    width: 100%;
  }

  .hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .fields,
  .hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:last-child {
    padding: 2em 5%;
  }
}

@media (max-width: 600px) {
  .hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module form {
    display: flex;
    flex-direction: column;
  }

  .hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .fields {
    width: 100%;
    flex-wrap: wrap;
  }

  .hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:not(:last-child) {
    flex: unset;
    width: 47%;
    margin-right: 0;
  }

  .hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:not(:last-child):nth-child(2) {
    margin-right: 1.5em;
  }

  .hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:not(:last-child):nth-child(3) {
    margin-top: 1.5em;
    margin-right: 1.5em;
  }

  .hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:last-child {
    position: static;
    width: 47%;
    margin-top: -6em;
    margin-left: auto;
    padding: 1em 5% 1em 1em;
    align-self: flex-end;
  }

  .hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:last-child #nrcarsearchlink .button.is-primary .ergebnisse .count {
    font-size: 2rem;
  }

  .hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:last-child #nrcarsearchlink .button.is-primary .ergebnisse::after {
    font-size: 0.8rem;
  }
}

@media (max-width: 400px) {
  .hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:not(:last-child):nth-child(2),
  .hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:not(:last-child):nth-child(3) {
    margin-right: 1em;
  }

  .hero-section .car-search-section .nr-quick-search-section .mpquicksearch-module .field:last-child {
    width: 49%;
  }
}