.itsumo-lunch-slots {
  --slot-brown: #806241;
  --slot-brown-deep: #5e4329;
  --slot-brown-soft: #cbbba6;
  --slot-gold: #9a7a50;
  --slot-line: rgba(94, 67, 41, 0.18);
  --slot-paper: #ffffff;
  --slot-paper-soft: #f8f6f2;
  display: grid;
  gap: clamp(30px, 5vw, 50px);
}

.itsumo-lunch-slots--empty {
  color: var(--c-txt);
  font-size: 1.6rem;
  line-height: 1.9;
  text-align: center;
  letter-spacing: 0.08em;
}

.itsumo-lunch-slots__empty-note {
  margin-block-start: 0.8em;
  font-size: 1.3rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  opacity: 0.76;
}

.itsumo-lunch-slots__empty-note code {
  font-family: Consolas, Monaco, monospace;
  letter-spacing: 0;
}

.itsumo-lunch-slots__month-nav {
  display: grid;
  grid-template-columns: minmax(92px, auto) 1fr minmax(92px, auto);
  gap: 12px;
  align-items: center;
}

.itsumo-lunch-slots__month-nav-current {
  color: var(--slot-brown-deep);
  font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-align: center;
}

.itsumo-lunch-slots__month-nav-button {
  appearance: none;
  border: 1px solid rgba(145, 114, 73, 0.36);
  border-radius: 0;
  background-color: #fff;
  color: var(--slot-brown-deep);
  cursor: pointer;
  min-height: 42px;
  padding-inline: 1.2em;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

.itsumo-lunch-slots__month-nav-button:disabled {
  cursor: default;
  opacity: 0.35;
}

.itsumo-lunch-slots__month-nav-button:focus-visible {
  background-color: var(--slot-brown-deep);
  color: #fff;
}

@media (any-hover: hover) {
  .itsumo-lunch-slots__month-nav-button:not(:disabled):hover {
    background-color: var(--slot-brown-deep);
    color: #fff;
  }
}

.itsumo-lunch-slots__month {
  display: grid;
}

.itsumo-lunch-slots__month[hidden] {
  display: none;
}

.itsumo-lunch-slots__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  color: #fff;
  background-color: var(--slot-brown-deep);
  border: 1px solid var(--slot-brown-deep);
  border-bottom: 0;
  margin-block-start: 8px;
}

.itsumo-lunch-slots__weekdays span {
  display: grid;
  place-items: center;
  min-height: 38px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.itsumo-lunch-slots__calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--slot-line);
  border: 1px solid var(--slot-line);
}

.itsumo-lunch-slots__date-card {
  appearance: none;
  border: 0;
  border-radius: 0;
  background-color: var(--slot-paper);
  color: inherit;
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 132px;
  padding: 12px;
  font: inherit;
  text-align: left;
}

button.itsumo-lunch-slots__date-card {
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
}

button.itsumo-lunch-slots__date-card:focus-visible,
button.itsumo-lunch-slots__date-card.is-selected {
  background-color: var(--slot-brown-deep);
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--slot-brown-deep);
}

@media (any-hover: hover) {
  button.itsumo-lunch-slots__date-card:hover {
    background-color: var(--slot-brown-deep);
    color: #fff;
  }
}

.itsumo-lunch-slots__date-card.is-empty {
  background-color: #f6f2ec;
}

.itsumo-lunch-slots__date-card.is-disabled {
  background-color: #eeeeee;
  color: rgba(58, 55, 55, 0.48);
}

.itsumo-lunch-slots__date-head {
  display: block;
}

.itsumo-lunch-slots__date-main {
  color: currentColor;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

.itsumo-lunch-slots__date-full {
  display: none;
}

.itsumo-lunch-slots__mobile-summary {
  display: none;
}

.itsumo-lunch-slots__time-summary {
  color: currentColor;
  display: block;
  width: 100%;
  padding-block-start: 0.2em;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.itsumo-lunch-slots__slot-label {
  color: currentColor;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  opacity: 0.74;
  text-align: left;
}

.itsumo-lunch-slots__slot-label.is-label {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  padding: 0.42em 0.7em;
  background-color: #f4eee5;
  border: 1px solid rgba(154, 122, 80, 0.32);
  color: var(--slot-brown-deep);
  opacity: 1;
}

button.itsumo-lunch-slots__date-card:focus-visible .itsumo-lunch-slots__slot-label.is-label,
button.itsumo-lunch-slots__date-card.is-selected .itsumo-lunch-slots__slot-label.is-label {
  background-color: rgba(255, 255, 255, 0.92);
  border-color: transparent;
  color: var(--slot-brown-deep);
}

@media (any-hover: hover) {
  button.itsumo-lunch-slots__date-card:hover .itsumo-lunch-slots__slot-label.is-label {
    background-color: rgba(255, 255, 255, 0.92);
    border-color: transparent;
    color: var(--slot-brown-deep);
  }
}

.form div.wpforms-container-full .wpforms-form input.itsumo-lunch-readonly-field {
  background-color: #f4f1ed;
  cursor: default;
}

@media (width < 740px) {
  .itsumo-lunch-slots {
    gap: 32px;
  }

  .itsumo-lunch-slots__month-nav {
    display: none;
    grid-template-columns: 1fr 1fr;
  }

  .itsumo-lunch-slots__month-nav-current {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: left;
  }

  .itsumo-lunch-slots__month-nav-button {
    grid-row: 2;
  }

  .itsumo-lunch-slots__weekdays {
    display: none;
  }

  .itsumo-lunch-slots__calendar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    background-color: transparent;
    border: 0;
  }

  .itsumo-lunch-slots__date-card {
    min-height: auto;
    background:
      linear-gradient(135deg, rgba(154, 122, 80, 0.09), rgba(154, 122, 80, 0.025)),
      #fffaf4;
    border: 1px solid rgba(94, 67, 41, 0.2);
    box-shadow: 0 2px 0 rgba(94, 67, 41, 0.05);
    padding: 18px;
    gap: 8px 14px;
  }

  .itsumo-lunch-slots__date-card.has-display-label {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .itsumo-lunch-slots__date-card.is-empty {
    display: none;
  }

  .itsumo-lunch-slots__date-head {
    display: none;
  }

  .itsumo-lunch-slots__date-full {
    display: none;
  }

  .itsumo-lunch-slots__mobile-summary {
    color: currentColor;
    display: grid;
    grid-column: 1 / -1;
    gap: 0.08em;
    min-width: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.04em;
  }

  .itsumo-lunch-slots__date-card.has-display-label .itsumo-lunch-slots__mobile-summary {
    grid-column: 1;
    padding-inline-end: 2px;
  }

  .itsumo-lunch-slots__mobile-summary span {
    display: block;
  }

  .itsumo-lunch-slots__mobile-summary span:first-child {
    font-size: 1.52rem;
  }

  .itsumo-lunch-slots__mobile-summary span:last-child {
    font-size: 1.45rem;
    letter-spacing: 0.02em;
  }

  .itsumo-lunch-slots__time-summary {
    display: none;
  }

  .itsumo-lunch-slots__slot-label {
    grid-column: 1 / -1;
    text-align: left;
    margin-block-start: 0.35em;
  }

  .itsumo-lunch-slots__date-card.has-display-label .itsumo-lunch-slots__slot-label.is-label {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    margin-block-start: 0.08em;
    max-width: 9em;
    padding: 0.34em 0.62em;
    font-size: 1.08rem;
    line-height: 1.35;
    text-align: center;
  }
}