/* Visually hidden element */
.sr-only {
  position: absolute;
  top: -125rem;
  /* -2000px */
  left: -187.5rem;
  /* -3000px */
}

.dialog-ok-cancel-group {
  display: none;
}

/* Datepicker wrapper */
/*
.datepicker {
    margin-top: 1em;
    position: relative;
}

.datepicker label {
    display: block;
    color: var(--Color-greyscale-white, #FFF);
    font-family: "dinafont";
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 145%;
}
*/
.datepicker .group .icon-calendar {
  width: 1.75rem;
  /* 28px */
  height: 1.75rem;
  /* 28px */
  background-image: var(--dina-icon-url__dina-calendar);
  color: white;
  background-size: 1.8125rem 2rem;
  /* 29px 32px */
  background-position: center;
  display: block;
}

.datepicker .group button {
  border: none;
  background: var(--Color-greyscale-white, #fff);
  padding: 0.875rem 0 0.875rem 0.875rem;
  /* 14px */
  width: 3.5rem;
  /* 56px */
  justify-content: center;
  align-items: center;
}

.datepicker .group {
  background: var(--Color-primary-2-80, #49974c);
  justify-content: space-between;
  border-radius: var(--Radius-2, 0.25rem);
  border: 1px solid var(--Color-primary-2-20, #d2e5d2);
  display: flex;
  position: relative;
  overflow: visible;
  /* Changed from hidden to allow focus outline to be visible */
}

/*
.group input:focus {
  outline: 0.1875rem solid #003e23;
  outline-offset: 0;
  position: relative;
  z-index: 1;
}

.group button:focus {
  outline: 0.125rem solid #003e23;
  outline-offset: 0.125rem;
  position: relative;
  z-index: 1;
}
*/

.datepicker input[type="text"] {
  padding-left: 1rem;
  color: var(--Color-greyscale-white, #fff);
  border: none;
  font-family: "dinafont";
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  border-radius: 0.25rem 0 0 0.25rem;
  /* 4px */
  background-clip: padding-box;
}

.datepicker .group .calendar-button {
  flex-shrink: 0;
  border-radius: 0 0.125rem 0.125rem 0;
  /* 2px */
}

.datepicker button.icon:focus {
  outline: none;
  padding: 0.125rem;
  /* 2px */
  border-width: 0.125rem;
  /* 2px */
  background-color: #def;
}

.datepicker .desc {
  position: absolute;
  left: 0;
  top: 2em;
}

.datepicker .fa-calendar-alt {
  color: #003e23;
}

/* Dialog container */
.datepicker-dialog {
  position: absolute;
  width: 20.5rem;
  /* 328px */
  clear: both;
  margin-top: 0.15em;
  padding: 0;
  background-color: #fff;
  display: none;
  border-radius: var(--Radius-3, 0.5rem);
  /* 8px */

  /* Shadow/green/sm */
  box-shadow: 0 0.125rem 1rem -0.25rem rgba(69, 167, 72, 0.19),
    /* 2px 16px -4px */
    0 0.25rem 0.5rem -0.125rem rgba(0, 0, 0, 0.05);
  /* 4px 8px -2px */
}

/* Dialog header */
.datepicker-dialog .header {
  cursor: default;
  background-color: #003e23;
  padding: var(--Spacing-5, 16px) var(--Spacing-6, 24px);
  font-weight: bold;
  color: white;
  justify-content: space-around;
}

.datepicker-dialog h2 {
  color: var(--Color-greyscale-white, #fff);
  font-family: "dinafont";
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.08px;
  margin: 0;
}

/* Dialog controls */
.datepicker-dialog button {
  border-style: none;
  background: transparent;
}

.datepicker-dialog button::-moz-focus-inner {
  border: 0;
}

.datepicker-dialog .prev-month,
.datepicker-dialog .next-month,
.datepicker-dialog .next-year {
  padding-top: 5px;
  width: 36px;
  height: 36px;
  color: white;
  border-radius: var(--Radius-12, 64px);
  border: 1px solid var(--Color-Opacity-White-40, rgba(255, 255, 255, 0.4));
}

.datepicker-dialog .prev-month {
  transform: rotate(90deg);
}

.datepicker-dialog .next-month,
.datepicker-dialog .next-year {
  transform: rotate(-90deg);
}

.datepicker-dialog .prev-year:focus,
.datepicker-dialog .prev-month:focus,
.datepicker-dialog .next-month:focus,
.datepicker-dialog .next-year:focus {
  padding: 2px;
  border: 2px solid white;
  outline: 0;
}

.datepicker-dialog .prev-year:hover,
.datepicker-dialog .prev-month:hover,
.datepicker-dialog .next-month:hover,
.datepicker-dialog .next-year:hover {
  border: 1px solid white;
}

/* Calendar icon override */
.datepicker-dialog .fa-calendar-alt {
  color: hsl(216deg 89% 51%);
}

/* Month and year display */
.datepicker-dialog .month-year {
  display: inline-block;
  width: 12em;
  text-align: center;
}

/* Date table */
.datepicker-dialog table.dates {
  padding: var(--Spacing-5, 16px) var(--spacing-6, 17px);
  border-collapse: separate;
}

.datepicker-dialog table.dates th,
.datepicker-dialog table.dates td {
  text-align: center;
  background: white;
  color: black;
  border: none;
}


.datepicker-dialog table.dates td {
  width: 40px;
  height: 40px;
  padding: 10px 8px;
  justify-content: center;
  position: relative;
  align-items: center;
  border-radius: var(--border-radius-9, 48px);
  cursor: default;
  /* Default cursor */
}

.datepicker-dialog table.dates td:not(.disabled):not(.other-month) {
  cursor: pointer;
}

/* Hover/focus states */
.datepicker-dialog table.dates td.disabled.invalid-date:hover {
  background-color: transparent !important;
}

.datepicker-dialog table.dates td.disabled:focus {
  padding: 2px;
  border: none;
  height: 31px;
  width: 41px;
  background-color: transparent;
}

.datepicker-dialog table.dates td:focus,
.datepicker-dialog table.dates td:hover {
  padding: 0;
  color: black;
}

.datepicker-dialog table.dates td:focus {
  padding: 1px;
  border: 2px solid #646464;
  outline: 0;
}

.datepicker-dialog table.dates td:not(.disabled):hover {
  padding: 2px;
  border: 1px solid #646464;
}

.datepicker-dialog table.dates td[aria-selected]:focus {
  border: 2px solid #646464;
}

.datepicker-dialog table.dates td[tabindex="0"] {
  background-color: #003e23;
  color: white;
  /* Changed from #50bb4e for better contrast */
}

/* Today's date */
.datepicker-dialog table.dates td.today {
  background-color: #ffffff;
  color: #003e23;
  font-weight: bold;
}

/* Selected date */
.datepicker-dialog table.dates td[aria-selected="true"] {
  background-color: #003e23;
  color: white;
}

/* Disabled dates */
.datepicker-dialog table.dates td.disabled {
  color: #595959;
}

.datepicker-dialog table.dates td.disabled::after {
  content: "";
  position: absolute;
  right: 50%;
  height: 1.5rem;
  width: 0.078125rem;
  background-color: #595959;
  transform: rotate(45deg);
  border: none !important;
}

/* Other month dates */
.datepicker-dialog table.dates td.other-month {
  visibility: hidden;
}

.datepicker-dialog table.dates td.invalid-date {
  color: rgb(148, 148, 148);
}

/* Dialog footer message */
.datepicker-dialog .dialog-message {
  display: flex;
  padding: var(--spacing-5, 1rem) var(--Spacing-6, 1.5rem);
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--spacing-4, 0.75rem);
  align-self: stretch;
  border-top: 1px solid var(--Color-greyscale-20, #efefef);
  background: var(--Color-primary-2-10, #e8f2e9);
}

/* Error message styling */
.date-error-message {
  color: #D92D20;
  margin-top: 8px;
  font-family: "dinafont";
  font-size: 14px;
  height: 0;
  opacity: 0;
  font-weight: 500;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  display: none;
  border-radius: var(--Radius-2, 4px);
  background: var(--Color-Secondary-1-10, #FAECEA);
  padding: var(--Spacing-3, 8px) var(--Spacing-4, 12px);

}

.date-error-message.show {
  height: auto;
  opacity: 1;
  margin-top: 8px;
  position: absolute;
  max-width: 239px;
  display: block;
}

.input-error-message {
  color: #D92D20;
  font-weight: 500;
  margin-top: 8px;
  font-family: "dinafont";
  letter-spacing: -0.07px;
  font-size: 14px;
  display: none;
  border-radius: var(--Radius-2, 4px);
  background: var(--Color-Secondary-1-10, #FAECEA);
}

.input-error-message.show {
  height: auto;
  opacity: 1;
  margin-bottom: 16px;
  padding: var(--Spacing-3, 8px) var(--Spacing-4, 12px);
  letter-spacing: -0.07px;
  position: absolute;
  max-width: 239px;
  display: block;
}

.datepicker .group .calendar-button:focus {
  outline: 3px solid #003e23;
  outline-offset: 0px;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 430px) {
  .datepicker-dialog {
    width: 100%;
    margin: 0;
    z-index: 1000;
  }

  .datepicker-dialog .header {
    width: 100%;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .datepicker-dialog table.dates {
    width: 100%;
    padding: 16px;
  }
}

@media screen and (max-width: 26.875rem) {

  /* 430px */
  .datepicker-dialog {
    max-width: 342px;
    margin: 0;
    z-index: 1000;
  }

  .datepicker-dialog .header {
    width: 100%;
    padding: 1rem;
    /* 16px */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* 16px */
  }

  .datepicker-dialog .month-year {
    width: auto;
    flex: 1;
    text-align: center;
  }

  .datepicker-dialog table.dates {
    width: 100%;
    padding: 1rem;
    /* 16px */
  }

  .datepicker-dialog table.dates td {
    width: calc(100% / 7);
    height: auto;
    aspect-ratio: 1;
  }

  .table-wrap {
    width: 100%;
    overflow-x: hidden;
  }
}