.availability-status {
  display: none;
  padding: 12px 14px;
  border-left: 4px solid var(--line);
  background: #f7f8f9;
  font-size: 14px;
}

.availability-status:not(:empty) {
  display: block;
}

.availability-status.available {
  border-color: var(--green);
  background: #eef8f3;
  color: #155f43;
}

.availability-status.unavailable {
  border-color: var(--red);
  background: #fff0f1;
  color: var(--red);
}

.availability-status.warning {
  border-color: var(--amber);
  background: #fff8ed;
  color: #7a4b0b;
}

.availability-status.checking {
  color: var(--muted);
}

.slot-suggestions strong {
  display: block;
  margin-bottom: 8px;
}

.slot-suggestions #slot-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.form-actions button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.employee-week-link {
  display: inline-block;
  margin-top: 9px;
  color: var(--blue);
  font-size: 11px;
}

.service-combobox {
  position: relative;
}

.vehicle-combobox {
  position: relative;
}

.vehicle-combobox #id_vehicle {
  margin-bottom: 0;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, #69737d 50%), linear-gradient(135deg, #69737d 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.vehicle-combobox #id_vehicle:focus {
  border-color: var(--blue);
  outline: 2px solid #2673a820;
}

.service-search {
  margin-bottom: 0;
  padding-right: 38px !important;
  background-image: linear-gradient(45deg, transparent 50%, #69737d 50%), linear-gradient(135deg, #69737d 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.service-search:focus {
  border-color: var(--blue);
  outline: 2px solid #2673a820;
}

.service-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid #bfc7ce;
  background: var(--white);
  box-shadow: 0 10px 28px #17202a24;
}

.vehicle-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid #bfc7ce;
  background: var(--white);
  box-shadow: 0 10px 28px #17202a24;
}

.service-option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #edf0f2;
  background: var(--white);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.vehicle-option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #edf0f2;
  background: var(--white);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.vehicle-option:hover,
.vehicle-option.active {
  background: #eef5f9;
}

.vehicle-option small,
.vehicle-option span {
  display: block;
}

.vehicle-option small {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 11px;
}

.vehicle-option span {
  font-size: 14px;
}

.vehicle-option-custom {
  background: #fff8ed;
}

.service-option:last-child {
  border-bottom: 0;
}

.service-option:hover,
.service-option.active {
  background: #eef5f9;
}

.service-option small,
.service-option span {
  display: block;
}

.service-option small {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 11px;
}

.service-option span {
  font-size: 14px;
}

.service-options-empty {
  padding: 14px 12px;
  color: var(--muted);
  font-size: 13px;
}

.vehicle-options-empty {
  padding: 14px 12px;
  color: var(--muted);
  font-size: 13px;
}