/* Iseld v30 – feltvalg for offentlig booking. */

.booking-field-settings-card {
  display: grid;
  gap: 10px;
}

.booking-field-setting {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #dbe6f5;
  border-radius: 16px;
  background: #f8fbff;
}

.booking-field-setting > div {
  display: grid;
  gap: 4px;
}

.booking-field-setting strong {
  color: #0f172a;
}

.booking-field-setting small {
  color: #64748b;
  line-height: 1.4;
}

.booking-field-setting > label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 118px;
  margin: 0;
  color: #334155;
  font-weight: 750;
}

.booking-field-setting input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 0;
}

.booking-field-setting input:disabled + * {
  opacity: .45;
}

.booking-field-required-badge {
  justify-self: end;
  padding: 7px 11px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  font-size: 12px;
  font-weight: 850;
}

.booking-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}

.booking-settings-actions p {
  margin: 0;
}

#bookingAddress {
  width: 100%;
}

@media (max-width: 768px) {
  .booking-field-setting {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .booking-field-setting > div {
    grid-column: 1 / -1;
  }

  .booking-field-setting > label {
    min-width: 0;
    min-height: 46px;
    padding: 9px 10px;
    border-radius: 12px;
    background: #fff;
  }

  .booking-field-setting.fixed {
    grid-template-columns: 1fr auto !important;
  }

  .booking-field-setting.fixed > div {
    grid-column: auto;
  }

  .booking-field-required-badge {
    justify-self: end;
  }

  .booking-settings-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .booking-settings-actions button {
    width: 100%;
    min-height: 48px;
  }
}

@media (max-width: 390px) {
  .booking-field-setting {
    grid-template-columns: 1fr !important;
  }

  .booking-field-setting > div,
  .booking-field-setting.fixed > div {
    grid-column: 1;
  }

  .booking-field-required-badge {
    justify-self: start;
  }
}