#appointment_time_container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Default 4 columns for Mon-Fri */
  border: 1px solid #c9c9c9;
  background-color: #c9c9c9;
  gap: 1px;
  border-radius: 1rem;
  overflow: hidden;
  font-size: 1rem;
  color: #757575;
  text-align: center;
}

/* Saturday specific layout: 3 columns */
#appointment_time_container.saturday-grid {
  grid-template-columns: repeat(3, 1fr);
}

.time-option {
  display: grid;
  place-items: center;
  padding: 1rem;
  cursor: pointer;
  background: white;
  transition: background 0.2s, color 0.2s;
}
.time-option.available:hover {
  background-color: #142f86;
  color: #fff;
}

.time-option.selected {
  background-color: #142f86;
  color: white;
  font-weight: bold;
}
.time-option.booked {
  background-color: #f1f1f1;
  color: #bbb;
  cursor: not-allowed;
}

/* -----------------------------------------------------------
   FORM & UTILITY STYLES
   ----------------------------------------------------------- */

span.wpcf7-not-valid-tip[data-name="time-submitted"] {
  display: none !important;
}

.toplevel_page_pflegekompass-appointments .column-Message {
  width: 200px !important;
}

.toplevel_page_pflegekompass-appointments .column-Message div {
  word-break: break-all;
  overflow-y: auto;
  max-height: 100px;
}

.message-content-box {
  padding: 10px;
  border: 1px solid #ccc;
  background: #fff;
  max-width: 600px;
  word-break: break-all;
}

.btn-back {
  float: right;
}

input[name="time-submitted"] {
  display: none !important;
}

/* SCSS/Nested selectors converted to standard CSS */
.wpcf7-form {
  font-family: "Plus Jakarta Sans";
}
.no-resize {
  resize: none;
}

.wpcf7-form .appointment-heading {
  font-size: 2rem;
  font-weight: 600;
}
.wpcf7-form p {
  color: #142f86;
  font-size: 1.25rem;
  font-weight: 500;
}
.wpcf7-form .form-field .error-message-appointment {
  font-size: 1rem;
  color: red;
  display: flex;
  justify-content: center;
  padding-bottom: 1rem;
}

.wpcf7-form .form-field {
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.wpcf7-form .form-field label {
  margin-bottom: 1rem;
  color: #142f86;
  font-size: 1.25rem;
  font-weight: 500;
}

.wpcf7-form .form-field input {
  border-radius: 0.5rem;
  color: #757575;
  border-color: #c9c9c9;
}
.wpcf7-form .form-field textarea {
  border-radius: 1rem;
  color: #757575;
  border-color: #c9c9c9;
}

.wpcf7-form .form-field .wpcf7-submit {
  background-color: #142f86;
  border-radius: 8px;
  padding: 1rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.wpcf7-form .form-field .wpcf7-submit:hover {
  background-color: #204cd9;
}
.wpcf7-form .form-field .wpcf7-submit svg {
  flex-shrink: 0;
  width: 1rem;
}

.wpcf7-form .personal-info {
  display: grid;
  grid-template-columns: 2fr 2fr;
  column-gap: 1rem;
}

/* -----------------------------------------------------------
   DATEPICKER STYLES
   ----------------------------------------------------------- */

#appointment-form .ui-datepicker-header {
  background: #fff;
  box-shadow: none;
  border: none;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#appointment-form .ui-datepicker-title {
  text-align: left;
  margin: 0 auto 0 0;
  font-size: 1.5rem;
  font-weight: 600;
  order: 1;
  color: #639ff5;
}

#appointment-form .ui-state-hover {
  border: unset !important;
  background: #fff;
  font-weight: 400;
}

#appointment-form .ui-widget {
  font-family: "Plus Jakarta Sans";
  padding: 15px;
  border-radius: 15px;
  border-color: #c9c9c9;
}

#appointment-form .ui-datepicker td {
  border: 1px solid #c9c9c9;
  padding: 0 !important;
}

#appointment-form .ui-state-active,
#appointment-form .ui-widget-content .ui-state-active,
#appointment-form .ui-widget-header .ui-state-active,
#appointment-form a.ui-button:active,
#appointment-form .ui-button:active,
#appointment-form .ui-button.ui-state-active:hover {
  border: 1px solid #142f86 !important;
  background: #142f86 !important;
  color: #fff !important;
  font-weight: 500;
}

#appointment-form .ui-state-default,
#appointment-form .ui-widget-content .ui-state-default {
  border: unset !important;
  background-color: #fff;
	color:#757575;
	font-weight:400;
}

#appointment-form .ui-datepicker-calendar td span,
#appointment-form .ui-datepicker-calendar td a {
  line-height: 3.2;
  text-align: center;
  height: 100%;
  font-size: 1rem;
  font-weight: 500;
}

#appointment-form .ui-datepicker-calendar td {
  height: 60px;
  width: 60px;
}

#appointment-form .ui-datepicker {
  width: unset;
}

#appointment-form table thead:first-child tr:first-child th {
  border-block-start: unset;
}

#appointment-form .ui-datepicker th {
  padding: 1.3em 0.3em;
  font-weight: 400;
  color: #757575;
}

#appointment-form .ui-datepicker-calendar td .ui-state-hover {
  background-color: #142f86;
  color: #fff;
}

/* --- FIXED ARROW STYLES --- */

/* 1. Target the main arrow buttons (<a> tags) */
#appointment-form .ui-datepicker .ui-datepicker-prev,
#appointment-form .ui-datepicker .ui-datepicker-next {
  position: relative;
  left: unset;
  right: unset;
  top: unset;
  bottom: unset;
  order: 2;
  cursor: pointer;
  border: none !important;
  background: none !important;
  transition: all 0.1s ease-in-out;
  transform-origin: center center;
}

/* 2. COMPLETELY HIDE the span inside the arrow button */
#appointment-form .ui-datepicker .ui-datepicker-prev span,
#appointment-form .ui-datepicker .ui-datepicker-next span {
  display: none;
}

/* 3. Add your NEW arrow content using ::before */
#appointment-form .ui-datepicker .ui-datepicker-prev::before,
#appointment-form .ui-datepicker .ui-datepicker-next::before {
  content: "";
  font-weight: 900;
  font-size: 1rem;
  color: #639ff5;
  line-height: 1;
}

/* 4. Define the specific arrow for each button */
#appointment-form .ui-datepicker .ui-datepicker-prev::before {
  content: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 7.99591C0.00556087 7.39465 0.247822 6.8198 0.674285 6.39591L5.57714 1.48163C5.79127 1.26877 6.08093 1.14929 6.38286 1.14929C6.68478 1.14929 6.97444 1.26877 7.18857 1.48163C7.29569 1.58787 7.38071 1.71427 7.43873 1.85354C7.49675 1.99281 7.52663 2.14218 7.52663 2.29306C7.52663 2.44393 7.49675 2.5933 7.43873 2.73257C7.38071 2.87184 7.29569 2.99824 7.18857 3.10448L3.42857 6.85306H14.8571C15.1602 6.85306 15.4509 6.97346 15.6653 7.18779C15.8796 7.40212 16 7.69281 16 7.99591C16 8.29902 15.8796 8.58971 15.6653 8.80403C15.4509 9.01836 15.1602 9.13877 14.8571 9.13877H3.42857L7.18857 12.8988C7.40378 13.1125 7.52528 13.4029 7.52635 13.7062C7.52742 14.0094 7.40797 14.3007 7.19429 14.5159C6.9806 14.7311 6.69017 14.8526 6.3869 14.8537C6.08362 14.8548 5.79235 14.7353 5.57714 14.5216L0.674285 9.60734C0.245042 9.18065 0.00255108 8.60114 0 7.99591Z' fill='%23C9C9C9'/></svg>");
  display: inline-block;
  vertical-align: middle;
}

#appointment-form .ui-datepicker .ui-datepicker-next::before {
  content: url("data:image/svg+xml;utf8,<svg width='16' height='14' viewBox='0 0 16 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M16 6.84662C15.9944 6.24536 15.7522 5.6705 15.3257 5.24662L10.4229 0.332335C10.2087 0.119477 9.91907 0 9.61714 0C9.31522 0 9.02556 0.119477 8.81143 0.332335C8.70431 0.438578 8.61929 0.564979 8.56127 0.704247C8.50325 0.843515 8.47337 0.992893 8.47337 1.14376C8.47337 1.29463 8.50325 1.44401 8.56127 1.58328C8.61929 1.72255 8.70431 1.84895 8.81143 1.95519L12.5714 5.70376H1.14286C0.839753 5.70376 0.549063 5.82417 0.334735 6.0385C0.120408 6.25283 0 6.54352 0 6.84662C0 7.14972 0.120408 7.44041 0.334735 7.65474C0.549063 7.86907 0.839753 7.98948 1.14286 7.98948H12.5714L8.81143 11.7495C8.59622 11.9632 8.47472 12.2536 8.47365 12.5569C8.47258 12.8601 8.59203 13.1514 8.80571 13.3666C9.0194 13.5818 9.30983 13.7033 9.6131 13.7044C9.91638 13.7055 10.2077 13.586 10.4229 13.3723L15.3257 8.45805C15.755 8.03136 15.9974 7.45185 16 6.84662Z' fill='%23639FF5'/></svg>");
  display: inline-block;
  vertical-align: middle;
}

/* 5. Keep your hover effect */
#appointment-form .ui-datepicker .ui-datepicker-prev.ui-state-hover,
#appointment-form .ui-datepicker .ui-datepicker-next.ui-state-hover {
  transform: scale(1.1);
  transform-origin: center center;
  transition: all 0.1s ease-in-out;
  border: none !important;
  background: none !important;
}
@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 767px) {
  /* Styles for mobile phones and smaller screens */
  .wpcf7-form .personal-info {
    grid-template-columns: 2fr;
  }
  .wpcf7-form .appointment-heading {
    font-size: 1.25rem;
  }
  .wpcf7-form .form-field label {
    font-size: 1rem;
  }
  #appointment-form .ui-datepicker-title {
    font-size: 1.25rem;
  }
  .wpcf7-form p {
    font-size: 1rem;
  }
  .wpcf7-form .form-field .wpcf7-submit {
    width: 100%;
  }
}