/**
 * Fibre availability – address form layout.
 *
 * Targets the GravityForms form with CSS class "fibre-availability-address-form".
 * GravityForms appends "_wrapper" to each form CSS class on the outer wrapper div;
 * the original class name is also placed directly on the <form> element.
 *
 * Goal: render zip, street, and house-number fields in a single inline row with
 * the submit button at the end, matching the address-form.png mockup.
 */

/* --------------------------------------------------------------------------
   Form – flex row: fields body + submit button side by side
   -------------------------------------------------------------------------- */

form.fibre-availability-address-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.625rem;
}

form.fibre-availability-address-form .gform_body {
  flex: 1 1 auto;
  min-width: 0; /* prevent overflow in narrow containers */
}

/* --------------------------------------------------------------------------
   Fields list – horizontal flex row
   -------------------------------------------------------------------------- */

form.fibre-availability-address-form .gform_fields {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Remove the bottom margin GF normally adds to field wrappers */
form.fibre-availability-address-form .gfield {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Field widths
   GF 2.x sets gfield--width-small / gfield--width-full based on the "size"
   field setting; we override those to suit our inline layout.
   -------------------------------------------------------------------------- */

/* Postleitzahl (size: small) */
form.fibre-availability-address-form .fibre-availability-zip {
  flex: 0 0 110px;
}

/* Straße (size: large – takes the remaining space) */
form.fibre-availability-address-form .fibre-availability-street {
  flex: 1 1 auto;
  min-width: 0;
}

/* Hausnummer (size: small) */
form.fibre-availability-address-form .fibre-availability-number {
  flex: 0 0 110px;
}

/* Ensure inputs fill their field wrapper */
form.fibre-availability-address-form .ginput_container input[type="text"],
form.fibre-availability-address-form .ginput_container input:not([type]) {
  width: 100%;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   GF labels – keep above the inputs
   -------------------------------------------------------------------------- */

form.fibre-availability-address-form .gfield_label {
  display: block;
  margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
   Submit button row – align with fields
   -------------------------------------------------------------------------- */

form.fibre-availability-address-form .gform_footer {
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  /* Compensate for label height so the button sits level with inputs */
  padding-top: calc(1em + 0.25rem + 2px); /* approximate label line-height + margin */
}

/* --------------------------------------------------------------------------
   Validation / error messages – full width below the inline row
   -------------------------------------------------------------------------- */

form.fibre-availability-address-form .gfield_description,
form.fibre-availability-address-form .validation_message {
  flex-basis: 100%;
}

/* --------------------------------------------------------------------------
   Hide GravityForms character counter (triggered when maxLength is set).
   -------------------------------------------------------------------------- */

form.fibre-availability-address-form .charleft {
  display: none;
}

/* --------------------------------------------------------------------------
   Autocomplete dropdown
   (Positioned by JS relative to the input's offsetParent.)
   -------------------------------------------------------------------------- */

.fibre-availability-autocomplete-dropdown {
  position: absolute;
  z-index: 9999;
  background: #fff;
  border: 1px solid #c8d6c5;
  border-top: none;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
}

.fibre-availability-autocomplete-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #2c3e2d;
  transition: background 0.1s ease;
}

.fibre-availability-autocomplete-item:hover,
.fibre-availability-autocomplete-item--active {
  background: #f0f7f0;
  color: #1e5521;
}