/* PLZ Autocomplete v8 */

/* ══════════════════════════════════════════════════════════
   TRANSITION SPEEDS — adjust these to taste:
   0ms   = instant (no animation)
   80ms  = very subtle
   120ms = noticeable but quick  ← current default
   200ms = clearly visible
   ══════════════════════════════════════════════════════════ */
:root {
  --plzac-appear:     120ms;   /* list fading IN  */
  --plzac-disappear:  0ms;     /* list fading OUT — 0ms = instant */

  /* ══════════════════════════════════════════════════════════
     MAP OPACITY TOGGLE (mobile ≤600px only)
     0   = map completely invisible
     0.2 = very subtle watermark
     0.5 = half visible  ← current
     1   = full opacity
     ══════════════════════════════════════════════════════════ */
  --map-opacity: 0.5;
}

/* ── INPUT AKTIV ────────────────────────────────────────────*/
input#postal-code-style.plzac-input-active,
input#postal-code-style.plzac-input-active:focus {
  border-top:    1px solid #888 !important;
  border-left:   1px solid #888 !important;
  border-right:  1px solid #888 !important;
  border-bottom: none !important;
  border-bottom-left-radius:  0 !important;
  border-bottom-right-radius: 0 !important;
  outline:    none !important;
  box-shadow: none !important;
}

/* ── DROPDOWN ───────────────────────────────────────────────*/
.plzac-dropdown {
  position: absolute;
  z-index: 999999;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--form_bg_color, #ffffff); /* matches Avada input background */
  border:        1px solid #888;
  border-top:    none;
  border-radius: 0 0 4px 4px;
  margin-top:    -1px; /* overlap by 1px to kill any gap */
  box-shadow: 0 6px 16px rgba(0,0,0,0.07);
  max-height: 154px; /* ~3.5 Zeilen Desktop — shrinks naturally with fewer results */
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--plzac-disappear) ease;
  scrollbar-width: thin;
  scrollbar-color: #b3b3b3 transparent;
}

.plzac-dropdown.plzac-open {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--plzac-appear) ease;
}

.plzac-dropdown::-webkit-scrollbar       { width: 4px; }
.plzac-dropdown::-webkit-scrollbar-track { background: transparent; }
.plzac-dropdown::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

/* ── JEDE ZEILE — keine Trennlinien, viel Luft ──────────────*/
.plzac-item {
  display: block;
  padding: 7px 14px;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-size:   15px;
  font-weight: 400;
  color:       #474747;
  letter-spacing: 0.3px;
  line-height: 1.4;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  border-bottom: none;
  transition: background 60ms ease;
}

.plzac-item:last-child {
  border-radius: 0 0 4px 4px;
}

.plzac-item:hover,
.plzac-item.plzac-active {
  background: rgba(0, 0, 0, 0.08);
}

/* ── HIGHLIGHT: plain, kein Bold, kein Underline ────────────*/
.plzac-item mark {
  background:      transparent;
  color:           inherit;
  font-weight:     400;
  text-decoration: none;
}

/* ── MOBILE: 7 Zeilen ───────────────────────────────────────*/
@media (max-width: 768px) {
  .plzac-dropdown { max-height: 344px; }
  .plzac-item     { padding: 7px 14px; }
}

@media (max-width: 658px) {
  .plzac-dropdown { max-height: 308px; }
}

@media (max-width: 480px) {
  .plzac-dropdown { max-height: 240px; }
}

/* ── INPUT DREI ZUSTÄNDE ────────────────────────────────────*/
input#postal-code-style.plzac-focused {
  border: 1px solid #bbb !important;  /* ← after-blur state */
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 150ms ease;
}
input#postal-code-style.plzac-focused:focus {
  border: 1px solid #888 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── DREI-ZUSTAND BORDER: Verwandtschaft + Alter/Geburtsdatum ─*/
input#angehoerigen-alter-style.input-touched {
  border: 1px solid #bbb !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 150ms ease;
}
input#angehoerigen-alter-style.input-touched:focus {
  border: 1px solid #888 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── SUPPRESS PASSWORD MANAGER ICONS ───────────────────────*/
#postal-code-style ~ [id*="lastpass"],
#postal-code-style ~ [class*="lastpass"],
#postal-code-style + div[id^="__"],
[data-lastpass-icon-root],
#postal-code-style::-webkit-credentials-auto-fill-button,
#postal-code-style::-webkit-contacts-auto-fill-button,
#postal-code-style::-webkit-caps-lock-indicator {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}
.plzac-wrapper div[id*="lastpass-icon"],
.plzac-wrapper div[data-lastpass-root] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   REGION FIELDSET (AND FIELDSETS AROUND IT) — mobile redesign (≤600px only)
   Height matches .tablet-height class at all breakpoints:
     base / ≤600px: 460px | ≤480px: 460px | ≤350px: 453px
   Map shown via ::before pseudo-element so opacity is controllable.
   ═══════════════════════════════════════════════════════════════ */

.search-field-wrapper {
  height: 319px;
}

@media screen and (max-width: 960px) {
  .search-field-wrapper {
    height: 430px !important;
  }

  .participant-wrapper {
    height: 366px;
  }
}

@media screen and (max-width: 865px) {
    .search-field-wrapper {
        height: 424px !important;
    }
}

@media screen and (max-width: 768px) {

  /* Remove original background-image — replaced by ::before below */
  #answer .map-wrapper,
  #answer img.map-img {
    display: none !important;
  }

  #answer .plz-wrapper {
    background-image: none !important;  /* pseudo-element takes over */
    position: relative !important;
    height: 495px !important;           /* matches .tablet-height base */
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top:    40px !important;  /* ← VERTICAL POSITION of content */
    padding-left:   20px !important;
    padding-right:  20px !important;
    padding-bottom: 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Map as pseudo-element — opacity controlled by --map-opacity */
  #answer .plz-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:    url(/wp-content/uploads/map_germany.png);
    background-repeat:   no-repeat;
    background-position: 89% 40%;
    background-size:     288px;
    opacity:             var(--map-opacity);  /* ← change --map-opacity in :root above */
    pointer-events:      none;
    z-index:             0;
  }

  /* Keep all content above the map */
  #answer .plz-wrapper > * {
    position: relative;
    z-index: 1;
  }

  /* Full width column, no float, no padding */
  #answer .plz-column {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }

  /* Full width plz box */
  #answer .plz {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  /* Title */
  #answer .plz-title {
    float: none !important;
    clear: none !important;
    display: block !important;
    margin: 0 0 10px 0 !important;
  }

  /* Input */
  #answer .plz-input {
    float: none !important;
    clear: none !important;
    width: 100% !important;
  }
  #answer input#postal-code-style {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    height: 45px !important;
  }

  /* Button — increase margin-top for more gap, decrease for less */
  #answer .plz-button-wrapper {
    width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 70px 0 0 0 !important;  /* ← GAP between input and button */
  }
  #answer .plz-button {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .search-field-wrapper {
    height: 496px !important;
  }

  .participant-wrapper {
    height: 438px;
  }
}

@media screen and (max-width: 680px) {
    .participant-wrapper {
        height: 527px !important;
    }

    .search-field-wrapper {
        height: 585px !important;
    }
}

@media screen and (max-width: 658px) {
    #answer .plz-wrapper {
      height: 459px !important;
    }
}

@media screen and (max-width: 601px) {
    .search-field-wrapper {
        height: 621px !important;
    }
}

/* ≤480px: matches .tablet-height (still 460px) + smaller map */
@media screen and (max-width: 480px) {
  #answer .plz-wrapper {
    height: 380px !important;
  }
  #answer .plz-wrapper::before {
    background-size: 195px;
  }

  .search-field-wrapper {
    height: 483px !important;
  }

  .participant-wrapper {
    height: 435px !important;
  }
}

@media screen and (max-width: 447px) {
  .search-field-wrapper {
    height: 501px !important;
  }
}

@media screen and (max-width: 385px) {
  .search-field-wrapper {
    height: 524px !important;
  }

  .participant-wrapper {
    height: 450px !important;
  }
}

/* ≤390px: hide map entirely */
@media screen and (max-width: 390px) {
  #answer .plz-wrapper::before {
    background-image: none !important;
  }
}

/* ≤350px: matches .tablet-height (453px) */
@media screen and (max-width: 350px) {
  #answer .plz-wrapper {
    height: 374px !important;
  }
}