/* Opus datepicker — flatpickr repainted with the Opus design tokens. One sheet serves the
   Console and the storefront, and the two areas ship different token layers, so every
   --fp-* reads the admin token first (admin/styles.css), then the storefront one
   (opus-theme.css), then a literal: a var() fallback applies only when the token ahead of
   it is undefined. The literal also covers admin RTL mode, where styles.css is not loaded. */

.opus-flatpickr.flatpickr-calendar {
  --fp-accent: var(--opus-coral, var(--opus-color-primary, #E43961));
  --fp-accent-soft: var(--opus-coral-light, var(--opus-color-bg-surface-alt, #FDE8EF));
  --fp-heading: var(--opus-navy, var(--opus-color-text-heading, #1B1B3A));
  --fp-text: var(--opus-text, var(--opus-color-text-body, #1B1B3A));
  --fp-text-muted: var(--opus-text-secondary, var(--opus-color-text-muted, #6E6E8A));
  --fp-border: var(--opus-border, var(--opus-color-border, #E8E8F0));
  --fp-surface: var(--opus-white, var(--opus-color-bg-page, #FFFFFF));
  --fp-surface-muted: var(--opus-bg, var(--opus-color-bg-surface, #F7F7FB));

  /* bootstrap modals sit at 1055; the calendar is appended to the body and would
     otherwise open behind a date field shown inside one */
  z-index: 1060;

  width: 22rem;
  padding: 6px;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--opus-radius-lg, 14px);
  box-shadow: var(--opus-shadow-lg, 0 12px 40px rgba(27, 27, 58, 0.12));
  font-family: var(--opus-font, var(--opus-font-family-base, 'Inter', -apple-system, 'Segoe UI', sans-serif));
  color: var(--fp-text);
}

.opus-flatpickr.flatpickr-calendar.arrowTop:before,
.opus-flatpickr.flatpickr-calendar.arrowBottom:before {
  border-bottom-color: var(--fp-border);
  border-top-color: var(--fp-border);
}

.opus-flatpickr.flatpickr-calendar.arrowTop:after,
.opus-flatpickr.flatpickr-calendar.arrowBottom:after {
  border-bottom-color: var(--fp-surface);
  border-top-color: var(--fp-surface);
}

/* Header */
.opus-flatpickr .flatpickr-months {
  padding: 4px 0 8px;
}

/* flatpickr crams the month select and the year spinner into a 34px strip and gives
   the year 6ch — barely wider than the digits, with the step arrows sitting on top
   of them. The header gets a taller row and the two controls are laid out as
   separate, evenly spaced elements. */
.opus-flatpickr .flatpickr-month,
.opus-flatpickr .flatpickr-current-month {
  color: var(--fp-heading);
  fill: var(--fp-heading);
  height: 42px;
}

.opus-flatpickr .flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
}

.opus-flatpickr .flatpickr-current-month .flatpickr-monthDropdown-months {
  height: 32px;
  border-radius: 6px;
  padding: 0 8px;
  font-weight: 600;
  transition: background 0.15s;
}

.opus-flatpickr .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: var(--fp-surface-muted);
}

.opus-flatpickr .flatpickr-current-month .numInputWrapper {
  width: 8ch;
  height: 32px;
  border-radius: 6px;
  transition: background 0.15s;
}

.opus-flatpickr .flatpickr-current-month .numInputWrapper:hover {
  background: var(--fp-surface-muted);
}

.opus-flatpickr .flatpickr-current-month input.cur-year {
  height: 32px;
  line-height: 32px;
  padding: 0 20px 0 6px;
  font-weight: 600;
  color: var(--fp-heading);
}

/* the step arrows only fade in on hover and overlap the digits at their default width */
.opus-flatpickr .numInputWrapper span {
  width: 18px;
  border: none;
  opacity: 1;
  padding: 0;
}

.opus-flatpickr .numInputWrapper span:hover {
  background: var(--fp-accent-soft);
}

.opus-flatpickr .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--fp-text-muted);
}

.opus-flatpickr .numInputWrapper span.arrowDown:after {
  border-top-color: var(--fp-text-muted);
}

.opus-flatpickr .flatpickr-prev-month,
.opus-flatpickr .flatpickr-next-month {
  height: 42px;
  padding: 12px 10px;
  color: var(--fp-text-muted);
  fill: var(--fp-text-muted);
  border-radius: 8px;
  transition: background 0.15s, fill 0.15s;
}

.opus-flatpickr .flatpickr-prev-month:hover,
.opus-flatpickr .flatpickr-next-month:hover {
  background: var(--fp-surface-muted);
}

.opus-flatpickr .flatpickr-prev-month:hover svg,
.opus-flatpickr .flatpickr-next-month:hover svg {
  fill: var(--fp-accent);
}

/* Weekday row */
.opus-flatpickr span.flatpickr-weekday {
  color: var(--fp-text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Days */
.opus-flatpickr .flatpickr-day {
  border: none;
  border-radius: 8px;
  color: var(--fp-text);
  font-size: 13px;
  max-width: 40px;
  height: 36px;
  line-height: 36px;
  transition: background 0.12s, color 0.12s;
}

.opus-flatpickr .flatpickr-day:hover,
.opus-flatpickr .flatpickr-day:focus {
  background: var(--fp-accent-soft);
  color: var(--fp-accent);
}

.opus-flatpickr .flatpickr-day.today {
  box-shadow: inset 0 0 0 1px var(--fp-accent);
  color: var(--fp-accent);
  font-weight: 600;
}

.opus-flatpickr .flatpickr-day.selected,
.opus-flatpickr .flatpickr-day.selected:hover,
.opus-flatpickr .flatpickr-day.selected.today {
  background: var(--fp-accent);
  box-shadow: none;
  color: #fff;
  font-weight: 600;
}

.opus-flatpickr .flatpickr-day.prevMonthDay,
.opus-flatpickr .flatpickr-day.nextMonthDay {
  color: var(--fp-text-muted);
  opacity: 0.5;
}

.opus-flatpickr .flatpickr-day.flatpickr-disabled,
.opus-flatpickr .flatpickr-day.flatpickr-disabled:hover {
  background: transparent;
  color: var(--fp-text-muted);
  opacity: 0.35;
}

/* Time row */
.opus-flatpickr .flatpickr-time {
  border-top: 1px solid var(--fp-border);
  margin-top: 4px;
  height: 42px;
  line-height: 42px;
}

.opus-flatpickr .flatpickr-time input,
.opus-flatpickr .flatpickr-time .flatpickr-time-separator,
.opus-flatpickr .flatpickr-time .flatpickr-am-pm {
  color: var(--fp-heading);
  font-size: 14px;
  font-weight: 600;
}

.opus-flatpickr .flatpickr-time input:hover,
.opus-flatpickr .flatpickr-time input:focus,
.opus-flatpickr .flatpickr-time .flatpickr-am-pm:hover {
  background: var(--fp-surface-muted);
}

/* Today / Clear footer added by opus-datepicker.js */
.opus-flatpickr-footer {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding: 8px 4px 2px;
  border-top: 1px solid var(--fp-border);
}

.opus-flatpickr-btn {
  background: transparent;
  border: 1px solid var(--fp-border);
  border-radius: 6px;
  color: var(--fp-text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.opus-flatpickr-btn:hover {
  background: var(--fp-accent-soft, #FDE8EF);
  border-color: var(--fp-accent, #E43961);
  color: var(--fp-accent, #E43961);
}

/* The field itself — the native controls carried their own calendar glyph,
   so a text input needs one to stay recognisable as a date field. */
input[data-opus-datepicker] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6E8A' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* the glyph is a background image with no element of its own, so opus-datepicker.js
   flags when the pointer sits over it */
input[data-opus-datepicker].opus-datepicker-over-icon {
  cursor: pointer;
}

[dir="rtl"] input[data-opus-datepicker] {
  background-position: left 10px center;
  padding-right: 0.75rem;
  padding-left: 32px;
}