/* Copyright (c) 2026 PrepLocal. All rights reserved. */
/* PrepLocal's own calendar (pl-datepicker.js) for every date, time and month
   field, in place of the browser's grey pop-up. The browser's calendar button
   gives way to ours - its icon kept over a page's own "background:" and
   padding for the field.

   Its colours are variables. In the console, Internal Tools and the customer
   pages they are the theme's (theme.css), so it follows day and night.
   On a kitchen's website they are the site's own, set at the end of this
   file. */
.pl-cal {
  --pl-cal-fill: var(--pl-primary);             /* the chosen day, Done */
  --pl-cal-on-fill: var(--pl-on-primary);
  --pl-cal-fill-hover: var(--pl-primary-hover);
  --pl-cal-mark: var(--pl-primary);             /* today, links, what the pointer is on */
  --pl-cal-soft: var(--pl-primary-soft);
}
input.pl-date {
  padding-right: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23677090' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 16px 16px !important;
  cursor: pointer;
}
input.pl-date[type="time"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23677090' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") !important;
}
input.pl-date::-webkit-calendar-picker-indicator {
  display: none;
}
.pl-cal.is-time {
  width: auto;
}
.pl-cal.is-time .pl-cal-time {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.pl-cal.is-time .pl-cal-time-label {
  margin-right: 6px;
}
.pl-cal {
  position: fixed;
  z-index: 2147483000;
  width: 296px;
  max-width: calc(100vw - 16px);
  padding: 10px;
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-md, 12px);
  background: var(--pl-surface);
  color: var(--pl-ink);
  box-shadow: var(--pl-shadow-pop, 0 12px 32px rgb(16 28 45 / 0.18));
  font-family: var(--pl-font);
  font-size: 0.86rem;
  line-height: 1.3;
}
.pl-cal button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.pl-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}
.pl-cal-title {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.pl-cal-nav {
  width: 34px;
  height: 34px;
  border: 1px solid var(--pl-border);
  border-radius: 999px;
  background: transparent;
  font-size: 1.15rem !important;
  line-height: 1;
}
.pl-cal-nav:hover {
  border-color: var(--pl-cal-mark);
  color: var(--pl-cal-mark);
}
.pl-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.pl-cal-grid.is-months {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.pl-cal-dow {
  padding: 4px 0;
  color: var(--pl-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}
.pl-cal-day {
  height: 36px;
  border: 0;
  border-radius: var(--pl-radius-md, 12px);
  background: transparent;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.is-months .pl-cal-day {
  height: 44px;
}
.pl-cal-day:hover:not([disabled]) {
  background: var(--pl-cal-soft);
  color: var(--pl-cal-mark);
}
.pl-cal-day.is-other {
  color: var(--pl-faint);
  font-weight: 500;
}
.pl-cal-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--pl-cal-mark);
}
.pl-cal-day[aria-selected="true"] {
  background: var(--pl-cal-fill);
  color: var(--pl-cal-on-fill);
}
.pl-cal-day[aria-selected="true"]:hover {
  background: var(--pl-cal-fill-hover);
  color: var(--pl-cal-on-fill);
}
.pl-cal-day[disabled] {
  opacity: 0.32;
  cursor: default;
}
.pl-cal-day:focus-visible,
.pl-cal-nav:focus-visible,
.pl-cal-link:focus-visible,
.pl-cal-done:focus-visible,
.pl-cal-ampm:focus-visible,
.pl-cal-select:focus-visible {
  outline: 2px solid var(--pl-cal-mark);
  outline-offset: 1px;
}
.pl-cal-time {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--pl-border-soft);
}
.pl-cal-time-label {
  margin-right: auto;
  color: var(--pl-muted);
  font-weight: 700;
  font-size: 0.78rem;
}
.pl-cal-select {
  min-height: 34px;
  padding: 0 6px;
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-sm, 8px);
  background: var(--pl-input);
  color: var(--pl-ink);
  font: inherit;
}
.pl-cal-colon {
  font-weight: 700;
}
.pl-cal-ampm {
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-sm, 8px);
  background: transparent;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
}
.pl-cal-ampm[aria-pressed="true"] {
  border-color: var(--pl-cal-mark);
  background: var(--pl-cal-soft);
  color: var(--pl-cal-mark);
}
.pl-cal-foot {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--pl-border-soft);
}
.pl-cal-link {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pl-cal-mark) !important;
  font-weight: 700 !important;
}
.pl-cal-link:hover:not([disabled]) {
  background: var(--pl-cal-soft);
}
.pl-cal-link[disabled] {
  opacity: 0.4;
  cursor: default;
}
.pl-cal-done {
  margin-left: auto;
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--pl-cal-fill);
  color: var(--pl-cal-on-fill) !important;
  font-weight: 700 !important;
}
.pl-cal-done:hover {
  background: var(--pl-cal-fill-hover);
}

/* On a kitchen's website (body.site-branded): its own colours, type and
   corners (sitestyle.py), each pair already checked for contrast - the
   accent fills with --on-accent on it; --accent-text is the accent as words. */
.site-branded .pl-cal {
  --pl-surface: var(--site-surface);
  --pl-ink: var(--ink);
  --pl-muted: var(--muted);
  --pl-faint: color-mix(in srgb, var(--muted) 60%, transparent);
  --pl-border: var(--border);
  --pl-border-soft: color-mix(in srgb, var(--border) 60%, transparent);
  --pl-input: var(--site-surface);
  --pl-font: var(--site-body-font);
  --pl-cal-fill: var(--accent);
  --pl-cal-on-fill: var(--on-accent);
  --pl-cal-fill-hover: color-mix(in srgb, var(--accent) 86%, var(--ink));
  --pl-cal-mark: var(--accent-text);
  --pl-cal-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: var(--radius);
}