/* Remove default table borders/striping */
.webform-multiple-table table {
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.webform-multiple-table thead {
  display: none; /* hides the empty "Fahrzeuge" header row */
}

/* Card styling per car row */
.webform-multiple-table tbody tr {
  display: block;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.webform-multiple-table tbody tr td {
  display: block;
  border: none;
  padding: 0;
}

/* Fields inside the card */
.webform-multiple-table .form-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  margin-bottom: 1rem;
}
.webform-multiple-table .form-item label {
  font-weight: 600;
  font-size: 0.9rem;
  color: #444;
  margin-bottom: 0.35rem !important;
}
.webform-multiple-table input[type="text"],
.webform-multiple-table input[type="number"],
.webform-multiple-table textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Two-column layout on wider screens */
@media (min-width: 700px) {
  .webform-multiple-table td > div#ajax-wrapper,
  .webform-multiple-table td {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .webform-multiple-table td .form-item {
    flex: 1 1 220px;
  }
  .webform-multiple-table td .form-item[class*="besonderheiten"],
  .webform-multiple-table td div#ajax-wrapper {
    flex-basis: 100%;
  }
}

/* Add/remove icon buttons */
.webform-multiple-table--operations {
  text-align: right;
  padding-top: 0.5rem;
}
.webform-multiple-table--operations input.image-button {
  width: 28px;
  height: 28px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.webform-multiple-table--operations input.image-button:hover {
  opacity: 1;
}

/* "Auto hinzufügen" and Submit buttons — square corners */
.webform-multiple-add input.button,
input#edit-submit {
  background: #5a6b2c;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0;
  font-weight: 600;
  cursor: pointer;
}
.webform-multiple-add input.button:hover,
input#edit-submit:hover {
  background: #47581f;
}

/* Hint text below "Auto hinzufügen" */
.webform-multiple-add::after {
  content: "Maximal 4 Fahrzeuge möglich.";
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #666;
}
html[lang="en"] .webform-multiple-add::after {
  content: "You can add a maximum of 4 vehicles.";
}

/* Fahrzeuge composite title */
[data-drupal-selector="edit-fahrzeuge"] > label {
  display: block;
  margin: 0 0 1rem 0;
  color: #5a6b2c;
  font-size: 1.1rem;
  border-bottom: 2px solid #5a6b2c;
  padding-bottom: 0.3rem;
}

/* Per-item numbering, e.g. "Fahrzeug 1" */
[data-drupal-selector="edit-fahrzeuge-items"] > tbody {
  counter-reset: fahrzeug-counter;
}
[data-drupal-selector="edit-fahrzeuge-items"] tbody tr {
  counter-increment: fahrzeug-counter;
}
[data-drupal-selector="edit-fahrzeuge-items"] tbody tr td:first-child::before {
  content: "Fahrzeug " counter(fahrzeug-counter);
  display: block;
  margin: 0 0 1rem 0;
  color: #5a6b2c;
  font-size: 1.1rem;
  font-weight: 600;
  border-bottom: 2px solid #5a6b2c;
  padding-bottom: 0.3rem;
}
html[lang="en"] [data-drupal-selector="edit-fahrzeuge-items"] tbody tr td:first-child::before {
  content: "Vehicle " counter(fahrzeug-counter);
}

/* Exhibitor/Club name — match composite field styling */
.form-item-exhibitor-club-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.form-item-exhibitor-club-name label {
  font-weight: 600;
  font-size: 0.9rem;
  color: #444;
  margin-bottom: 0.35rem;
}
.form-item-exhibitor-club-name input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}