<style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: #f4f6f8;
      color: #222;
    }

    .page {
      max-width: 1100px;
      margin: 0 auto;
      padding: 20px;
    }

    .booking-box {
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }

    .header {
      padding: 22px;
      background: #1f4e79;
      color: #fff;
    }

    .header h1 {
      margin: 0 0 8px;
      font-size: 26px;
    }

    .header p {
      margin: 0;
      font-size: 15px;
      opacity: 0.9;
    }

    .controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 18px 22px;
      border-bottom: 1px solid #e5e8eb;
      flex-wrap: wrap;
    }

    .month-title {
      font-size: 22px;
      font-weight: bold;
    }

    .btn {
      border: none;
      border-radius: 8px;
      padding: 10px 14px;
      background: #1f4e79;
      color: #fff;
      font-size: 15px;
      cursor: pointer;
    }

    .btn:hover {
      background: #163b5d;
    }

    .calendar {
      padding: 20px 22px 24px;
    }

    .weekdays,
    .days {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
    }

    .weekday {
      text-align: center;
      font-weight: bold;
      color: #555;
      font-size: 14px;
      padding: 8px 0;
    }

    .day {
      min-height: 145px;
      background: #f9fafb;
      border: 1px solid #dfe4ea;
      border-radius: 10px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .day.empty {
      background: transparent;
      border: none;
    }

    .day.past {
      opacity: 0.45;
    }

    .day-number {
      font-weight: bold;
      font-size: 15px;
      margin-bottom: 2px;
    }

    .slot {
      width: 100%;
      border: 1px solid #b8d7ef;
      background: #eaf5ff;
      color: #17496f;
      border-radius: 7px;
      padding: 7px 6px;
      font-size: 13px;
      text-align: left;
      cursor: pointer;
    }

    .slot:hover {
      background: #d8edff;
    }

    .slot.selected {
      background: #1f4e79;
      color: #fff;
      border-color: #1f4e79;
    }

    .slot.nearby {
      background: #fff5d8;
      border-color: #f0c85a;
      color: #6a4b00;
    }

    .slot.nearby.selected {
      background: #c98c00;
      border-color: #c98c00;
      color: #fff;
    }

    .slot-note {
      display: block;
      font-size: 11px;
      margin-top: 3px;
      opacity: 0.85;
    }

    .summary {
      border-top: 1px solid #e5e8eb;
      padding: 18px 22px 22px;
      background: #fbfcfd;
    }

    .summary h2 {
      margin: 0 0 10px;
      font-size: 20px;
    }

    .summary-box {
      padding: 14px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid #dfe4ea;
    }

    .summary-line {
      margin: 4px 0;
    }

    .legend {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      padding: 0 22px 18px;
      font-size: 13px;
      color: #555;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .legend-color {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      border: 1px solid #ccc;
    }

    .legend-color.free {
      background: #eaf5ff;
      border-color: #b8d7ef;
    }

    .legend-color.nearby {
      background: #fff5d8;
      border-color: #f0c85a;
    }

    @media (max-width: 800px) {
      .page {
        padding: 10px;
      }

      .header h1 {
        font-size: 22px;
      }

      .controls {
        align-items: stretch;
      }

      .month-title {
        order: -1;
        width: 100%;
        text-align: center;
      }

      .btn {
        flex: 1;
      }

      .weekdays {
        display: none;
      }

      .days {
        display: flex;
        flex-direction: column;
      }

      .day {
        min-height: auto;
      }

      .day.empty {
        display: none;
      }

      .day-number::before {
        content: attr(data-weekday) ', ';
        font-weight: normal;
        color: #555;
      }
    }
.duration-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid #e5e8eb;
  background: #fbfcfd;
  flex-wrap: wrap;
}

.duration-select {
  padding: 9px 12px;
  border: 1px solid #cfd6dd;
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
}

@media (max-width: 800px) {
  .duration-row {
    align-items: stretch;
  }

  .duration-select {
    width: 100%;
  }
}
.slot.employee-aprochnow {
  background: #eaf5ff;
  border-color: #8cc7f0;
  color: #17496f;
}

.slot.employee-aprochnow:hover {
  background: #d8edff;
}

.slot.employee-mdoerr {
  background: #eaf8ea;
  border-color: #8fd19e;
  color: #1d5c2f;
}

.slot.employee-mdoerr:hover {
  background: #d7f0d9;
}
.booking-form {
  margin-top: 18px;
  padding: 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #dfe4ea;
}

.booking-form h3 {
  margin: 0 0 14px;
  font-size: 18px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.form-field label {
  font-weight: bold;
  font-size: 14px;
}

.form-field input,
.form-field textarea {
  padding: 10px 12px;
  border: 1px solid #cfd6dd;
  border-radius: 8px;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.btn-secondary {
  background: #6c757d;
}

.btn-secondary:hover {
  background: #5a6268;
}

.booking-message {
  margin-top: 14px;
  font-weight: bold;
}

.booking-message.success {
  color: #1d7a35;
}

.booking-message.error {
  color: #b00020;
}

@media (max-width: 800px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-actions .btn {
    width: 100%;
  }
}
.nearby-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid #e5e8eb;
  background: #ffffff;
  flex-wrap: wrap;
}

.nearby-zip-input {
  padding: 9px 12px;
  border: 1px solid #cfd6dd;
  border-radius: 8px;
  font-size: 15px;
  width: 150px;
}

@media (max-width: 800px) {
  .nearby-search-row {
    align-items: stretch;
  }

  .nearby-zip-input,
  .nearby-search-row .btn {
    width: 100%;
  }
}
ea;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 10px;
  line-height: 1.5;
}
.nearby-slot-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.nearby-slot-button {
  width: 100%;
  text-align: left;
  border: 1px solid #b8d7ef;
  background: #eaf5ff;
  color: #17496f;
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
}

.nearby-slot-button:hover {
  background: #d8edff;
}

.nearby-slot-button.selected {
  background: #1f4e79;
  border-color: #1f4e79;
  color: #fff;
}

.nearby-slot-button span {
  display: inline-block;
  margin-top: 4px;
}

.nearby-slot-button small {
  display: inline-block;
  margin-top: 4px;
  opacity: 0.85;
}
.employee-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 22px;
  border-bottom: 1px solid #e5e8eb;
  background: #fbfcfd;
  font-size: 14px;
}

.employee-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
}

.employee-legend-color {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: inline-block;
  border: 1px solid #ccc;
}

.employee-legend-color.employee-aprochnow {
  background: #eaf5ff;
  border-color: #8cc7f0;
}

.employee-legend-color.employee-mdoerr {
  background: #eaf8ea;
  border-color: #8fd19e;
}

@media (max-width: 800px) {
  .employee-legend {
    align-items: flex-start;
    gap: 10px;
  }
}
.help-box {
  padding: 12px 22px;
  border-bottom: 1px solid #e5e8eb;
  background: #ffffff;
}

.help-toggle {
  border: none;
  background: transparent;
  color: #1f4e79;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  padding: 0;
}

.help-toggle:hover {
  text-decoration: underline;
}

.help-content {
  margin-top: 12px;
  padding: 14px;
  border-radius: 10px;
  background: #f4f8fb;
  border: 1px solid #d8e5ef;
  font-size: 14px;
  line-height: 1.5;
}

.help-content h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.help-content ol {
  margin: 8px 0 12px 20px;
  padding: 0;
}

.help-content li {
  margin-bottom: 5px;
}

.help-content p {
  margin: 8px 0 0;
}

@media (max-width: 800px) {
  .help-box {
    padding: 12px 16px;
  }
}
  </style>