/*
 * The delivery-date field and its calendar.
 *
 * It lives in the shop's own page, so every rule is scoped under
 * `.personalizy-delivery .pzdp` (specific enough to beat `form.cart button` and
 * friends) and starts from `all: unset` — themes style `button` and `input`
 * globally, and a calendar day that inherits a theme's 52px add-to-cart button
 * is a calendar nobody can use. Colours come from one variable, set from the
 * connector's settings.
 */
.personalizy-delivery { width: 100%; flex: 0 0 100%; grid-column: 1 / -1; margin: 20px 0; clear: both; }
.personalizy-delivery > label { display: block; font-weight: 600; margin-bottom: 8px; }
.personalizy-delivery > p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.personalizy-delivery > input[type=date] { box-sizing: border-box; width: 100%; max-width: 360px; min-height: 46px; padding: 10px 12px;
  border: 1px solid #b9b9c4; border-radius: 10px; background: #fff; color: #1b1b22; font: inherit; }
#personalizy-delivery-error { color: #a32121; font-weight: 500; }
#personalizy-delivery-error:empty { display: none; }
.wc-eta-rs-timeline { opacity: 1; visibility: visible; }
.wc-eta-rs-timeline-step { opacity: 1 !important; transform: none !important; visibility: visible !important; }

.personalizy-delivery .pzdp { --pzdp-accent: #5145cd; --pzdp-ink: #1b1b22; --pzdp-muted: #6b6b78; --pzdp-line: #cfcfd8;
  --pzdp-soft: rgba(81, 69, 205, .1); --pzdp-ring: rgba(81, 69, 205, .22);
  position: relative; display: block; width: 100%; max-width: 360px; box-sizing: border-box; color: var(--pzdp-ink);
  font-family: inherit; font-size: 15px; line-height: 1.4; text-align: left; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .personalizy-delivery .pzdp { --pzdp-soft: color-mix(in srgb, var(--pzdp-accent) 11%, transparent);
    --pzdp-ring: color-mix(in srgb, var(--pzdp-accent) 24%, transparent); }
}
.personalizy-delivery .pzdp *, .personalizy-delivery .pzdp *::before, .personalizy-delivery .pzdp *::after { box-sizing: border-box; }
.personalizy-delivery .pzdp button, .personalizy-delivery .pzdp input { all: unset; box-sizing: border-box; font-family: inherit; }
.personalizy-delivery .pzdp [hidden] { display: none !important; }
.personalizy-delivery .pzdp svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

/* The field: what was picked, in the shop's format, with the calendar button. */
.personalizy-delivery .pzdp .pzdp-field { position: relative; display: flex; align-items: center; width: 100%; min-height: 48px;
  background: #fff; border: 1.5px solid var(--pzdp-line); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.personalizy-delivery .pzdp .pzdp-field:hover { border-color: #a9a9b6; }
.personalizy-delivery .pzdp .pzdp-field:focus-within, .personalizy-delivery .pzdp.is-open .pzdp-field {
  border-color: var(--pzdp-accent); box-shadow: 0 0 0 4px var(--pzdp-ring); }
.personalizy-delivery .pzdp.is-invalid .pzdp-field { border-color: #c62828; }
.personalizy-delivery .pzdp .pzdp-input { flex: 1; min-width: 0; height: 45px; padding: 0 6px 0 14px; cursor: text;
  font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--pzdp-ink); background: transparent; }
.personalizy-delivery .pzdp .pzdp-input[readonly] { cursor: pointer; }
.personalizy-delivery .pzdp .pzdp-input::placeholder { color: #9a9aa6; opacity: 1; letter-spacing: .04em; }
.personalizy-delivery .pzdp .pzdp-clear, .personalizy-delivery .pzdp .pzdp-toggle {
  display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; cursor: pointer; color: var(--pzdp-muted);
  border-radius: 8px; -webkit-tap-highlight-color: transparent; transition: color .15s, background-color .15s; }
.personalizy-delivery .pzdp .pzdp-clear svg { width: 17px; height: 17px; }
.personalizy-delivery .pzdp .pzdp-toggle { margin-right: 2px; color: var(--pzdp-accent); }
.personalizy-delivery .pzdp .pzdp-clear:hover, .personalizy-delivery .pzdp .pzdp-toggle:hover { background: var(--pzdp-soft); }
.personalizy-delivery .pzdp button:focus-visible { outline: 2px solid var(--pzdp-accent); outline-offset: 2px; }

/* The calendar opens in the page flow, pushing what is below it down: an
   overlay would be clipped by the overflow-hidden product column most themes
   have, and on a phone this is simply a card under the field. */
.personalizy-delivery .pzdp .pzdp-panel { margin-top: 8px; padding: 12px; background: #fff; border: 1px solid #e3e3ea;
  border-radius: 14px; box-shadow: 0 1px 2px rgba(16,16,32,.06), 0 12px 32px -12px rgba(16,16,32,.25); }
.personalizy-delivery .pzdp .pzdp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.personalizy-delivery .pzdp .pzdp-title { flex: 1; text-align: center; font-weight: 700; font-size: 15.5px; letter-spacing: -.005em; }
.personalizy-delivery .pzdp .pzdp-nav { display: grid; place-items: center; width: 40px; height: 40px; cursor: pointer; border-radius: 10px;
  color: var(--pzdp-ink); background: #f3f3f6; transition: background-color .15s; }
.personalizy-delivery .pzdp .pzdp-nav:hover { background: #e9e9ef; }
.personalizy-delivery .pzdp .pzdp-nav:disabled { opacity: .3; cursor: default; background: #f3f3f6; }
.personalizy-delivery .pzdp .pzdp-grid { display: block; }
.personalizy-delivery .pzdp .pzdp-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-bottom: 2px; }
.personalizy-delivery .pzdp .pzdp-wd { padding: 6px 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--pzdp-muted);
  text-transform: none; }
.personalizy-delivery .pzdp .pzdp-wd.is-off { color: #b3b3be; }
.personalizy-delivery .pzdp .pzdp-cell { display: flex; justify-content: center; min-width: 0; }
.personalizy-delivery .pzdp .pzdp-day { position: relative; display: grid; place-items: center; width: 100%; max-width: 44px; aspect-ratio: 1;
  min-height: 38px; cursor: pointer; border-radius: 10px; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--pzdp-ink); -webkit-tap-highlight-color: transparent; transition: background-color .12s, color .12s; }
.personalizy-delivery .pzdp .pzdp-day:hover { background: var(--pzdp-soft); color: var(--pzdp-accent); }
/* A day the shop does not deliver on: visibly unavailable and not a target. */
.personalizy-delivery .pzdp .pzdp-day.is-disabled { cursor: not-allowed; color: #b8b8c2; font-weight: 500; text-decoration: line-through;
  text-decoration-color: rgba(120,120,135,.45); background: transparent; }
.personalizy-delivery .pzdp .pzdp-day.is-today::after { content: ''; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px;
  margin-left: -2px; border-radius: 99px; background: currentColor; }
.personalizy-delivery .pzdp .pzdp-day.is-selected, .personalizy-delivery .pzdp .pzdp-day.is-selected:hover {
  background: var(--pzdp-accent); color: #fff; text-decoration: none; }
.personalizy-delivery .pzdp .pzdp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 10px; border-top: 1px solid #ececf1; }
.personalizy-delivery .pzdp .pzdp-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pzdp-muted); }
.personalizy-delivery .pzdp .pzdp-legend i { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: #b8b8c2; }
.personalizy-delivery .pzdp .pzdp-first { cursor: pointer; padding: 8px 12px; border-radius: 99px; font-size: 13px; font-weight: 600;
  color: var(--pzdp-accent); background: var(--pzdp-soft); }
.personalizy-delivery .pzdp .pzdp-first:hover { filter: brightness(.95); }

/* Themes that force their form styles with !important (a 3px coloured border
   on every input, uppercase tracked buttons, fixed heights) are answered in
   kind, for exactly the properties they tend to force and nothing else. */
.personalizy-delivery .pzdp .pzdp-input { border: 0 !important; background: transparent !important; box-shadow: none !important;
  outline: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; height: 45px !important;
  min-height: 0 !important; padding: 0 6px 0 14px !important; font-size: 16px !important; line-height: 45px !important;
  border-radius: 0 !important; text-transform: none !important; letter-spacing: .02em !important; color: var(--pzdp-ink) !important; }
.personalizy-delivery .pzdp button { margin: 0 !important; min-width: 0 !important; text-transform: none !important;
  letter-spacing: normal !important; box-shadow: none !important; text-shadow: none !important; float: none !important;
  border: 0 !important; line-height: 1 !important; }
.personalizy-delivery .pzdp .pzdp-day, .personalizy-delivery .pzdp .pzdp-nav, .personalizy-delivery .pzdp .pzdp-clear,
.personalizy-delivery .pzdp .pzdp-toggle { padding: 0 !important; }

@media (pointer: coarse) {
  .personalizy-delivery .pzdp .pzdp-day { min-height: 42px; }
  .personalizy-delivery .pzdp .pzdp-nav { width: 44px; height: 44px; }
}
@media (max-width: 360px) {
  .personalizy-delivery .pzdp .pzdp-panel { padding: 10px 8px; }
  .personalizy-delivery .pzdp .pzdp-row { gap: 1px; }
  .personalizy-delivery .pzdp .pzdp-day { font-size: 14px; border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .personalizy-delivery .pzdp * { transition: none !important; }
}
@media (forced-colors: active) {
  .personalizy-delivery .pzdp .pzdp-day.is-selected { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .personalizy-delivery .pzdp .pzdp-day.is-disabled { color: GrayText; }
}