body {
      height: 100vh; /* Убедимся, что body занимает всю высоту */
      overflow: hidden; /* Добавим overflow: hidden по умолчанию, чтобы не было прокрутки за меню */
    }
    html {
      height: 100%; /* Убедимся, что html занимает всю высоту */
    }

    /* Custom styles for mobile menu slide-in */
    .mobile-menu {
      transform: translateX(100%);
      transition: transform 0.3s ease-out;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      max-width: 320px;
      background-color: white;
      z-index: 50;
      padding: 1rem;
      box-shadow: -4px 0 10px rgba(0,0,0,0.1);
      height: 100vh; /* Заставляем меню занимать всю высоту видимой области */
      overflow-y: auto; /* Если контента в меню много, чтобы можно было прокрутить */
    }
    .mobile-menu.active {
      transform: translateX(0);
    }

    /* Стиль для оверлея */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 40;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    }
    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
  
  .instrument-serif-regular {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.instrument-serif-regular-italic {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
}

.herbsmetics-logo-sign {
    display: inline-block;
    width: 48px;
    height: 28px;
    margin-right: 5px;
}

.herbsmetics-logotype {
    font-size: 18pt;
    color: #4b3434;
}

.herbsmetics-heading-main {
    font-size: 3rem;
}

/* General form styling */
form {
  max-width: 500px;
  margin: 40px auto;
  padding: 30px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
  color: #333;
}

form h2 {
  text-align: center;
  color: #5C6BC0; /* A nice shade of blue */
  margin-bottom: 25px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="date"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box; /* Ensures padding doesn't add to width */
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="number"]:focus,
.form-group input[type="date"]:focus {
  border-color: #5C6BC0;
  outline: none;
}

/* Time slots styling */
.time-slots {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.time-slot-option {
  flex: 1;
  min-width: 100px; /* Adjust as needed */
  text-align: center;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #f9f9f9;
  user-select: none; /* Prevent text selection */
  position: relative; /* For custom radio button styling */
}

.time-slot-option input[type="radio"] {
  display: none; /* Hide default radio button */
}

.time-slot-option input[type="radio"] + span { /* If you want to use a span inside label */
  display: block;
}

.time-slot-option:hover {
  border-color: #A5D6A7; /* Light green for hover */
  background-color: #E8F5E9; /* Lighter green background on hover */
}

.time-slot-option input[type="radio"]:checked + span { /* Target when checked, if span used */
  background-color: #81C784; /* Green for selected */
  color: white;
  border-color: #66BB6A;
}

.time-slot-option input[type="radio"]:checked {
  background-color: #81C784; /* Green for selected */
  color: white;
  border-color: #66BB6A;
}

/* Custom radio button appearance (optional, if you want more control) */
.time-slot-option input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  outline: none;
  margin-right: 8px; /* Space between custom radio and text */
  vertical-align: middle;
  position: absolute; /* Position custom radio */
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  background-color: #f9f9f9; /* Initial background */
}

.time-slot-option input[type="radio"]:checked {
  background-color: #81C784; /* Fill when checked */
  border-color: #66BB6A;
}

/* Make sure the text is clickable */
.time-slot-option label {
    display: block;
    cursor: pointer;
    padding-left: 30px; /* Space for the custom radio button */
    position: relative;
    text-align: left;
}


/* Checkbox styling */
.checkbox-group {
  display: flex;
  align-items: flex-start;
  margin-top: 25px;
}

.checkbox-group input[type="checkbox"] {
  margin-top: 5px; /* Align checkbox with text */
  margin-right: 10px;
  min-width: 18px;
  min-height: 18px;
  cursor: pointer;
}

.checkbox-group label {
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  font-weight: normal; /* Override bold from form-group label */
}

.checkbox-group label a {
  color: #5C6BC0;
  text-decoration: none;
}

.checkbox-group label a:hover {
  text-decoration: underline;
}

/* Button styling */
button[type="submit"] {
  width: 100%;
  padding: 15px;
  background-color: #81C784; /* Green button */
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 25px;
}

button[type="submit"]:hover {
  background-color: #66BB6A; /* Darker green on hover */
}

.form-note {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin-top: 20px;
  line-height: 1.4;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  form {
    margin: 20px;
    padding: 20px;
  }
  .time-slots {
    flex-direction: column;
  }
  .time-slot-option {
    min-width: unset;
  }
}