/* ============================================================
   Flatpickr theme — NCC gold-on-dark / dark-on-light
   Overrides the vendor flatpickr.min.css. Everything driven by
   CSS variables so the theme toggle keeps working.
   ============================================================ */

/* ── Calendar container ─────────────────────────────────────── */
.flatpickr-calendar {
  background: var(--bg-secondary);
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  border-color: transparent;
}
.flatpickr-calendar.arrowTop::after {
  border-bottom-color: var(--bg-secondary);
}
.flatpickr-calendar.arrowBottom::after {
  border-top-color: var(--bg-secondary);
}
.flatpickr-calendar.arrowTop::before {
  border-bottom-color: rgba(201, 169, 110, 0.25);
}
.flatpickr-calendar.arrowBottom::before {
  border-top-color: rgba(201, 169, 110, 0.25);
}

/* ── Header (month/year + nav arrows) ───────────────────────── */
.flatpickr-months {
  background: transparent;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 8px 0 4px;
}
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: var(--accent-text);
  fill: var(--accent);
  height: 44px;
}
.flatpickr-current-month {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-text);
  padding-top: 8px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent;
  color: var(--accent-text);
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(201, 169, 110, 0.12);
}
.flatpickr-current-month .numInput.cur-year {
  color: var(--accent-text);
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}
.flatpickr-current-month .numInputWrapper span.arrowUp::after {
  border-bottom-color: var(--accent);
}
.flatpickr-current-month .numInputWrapper span.arrowDown::after {
  border-top-color: var(--accent);
}

/* Prev / next month arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--accent-text);
  fill: var(--accent);
  padding: 10px;
  transition: color 0.15s;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: var(--accent-hover-text);
  fill: var(--accent-hover);
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: inherit;
}

/* ── Weekday row ────────────────────────────────────────────── */
.flatpickr-weekdays {
  background: transparent;
}
.flatpickr-weekdaycontainer .flatpickr-weekday {
  background: transparent;
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Day cells ──────────────────────────────────────────────── */
.flatpickr-day {
  color: var(--text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(201, 169, 110, 0.15);
  border-color: transparent;
  color: var(--text-primary);
}
.flatpickr-day.today {
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
}
.flatpickr-day.today:hover {
  background: rgba(201, 169, 110, 0.15);
  color: var(--accent-text);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.today {
  background: var(--accent);
  color: #1a1a1a;
  border-color: var(--accent);
  font-weight: 700;
}

/* Disabled / outside-of-range days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: var(--text-secondary);
  opacity: 0.3;
  background: transparent;
  border-color: transparent;
  cursor: not-allowed;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--text-secondary);
  opacity: 0.4;
}

/* ── Time picker (used on cart.ejs combined picker) ─────────── */
.flatpickr-time {
  background: rgba(201, 169, 110, 0.06);
  border-top: 1px solid rgba(201, 169, 110, 0.15);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  height: 48px;
}
.flatpickr-time input {
  background: transparent;
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background: rgba(201, 169, 110, 0.1);
  color: var(--accent-text);
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  color: var(--text-primary);
  font-weight: 600;
}
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
  background: rgba(201, 169, 110, 0.1);
  color: var(--accent-text);
}
.flatpickr-time .numInputWrapper span.arrowUp::after {
  border-bottom-color: var(--accent);
}
.flatpickr-time .numInputWrapper span.arrowDown::after {
  border-top-color: var(--accent);
}

/* Focus indication for the input the picker is attached to is handled by
   the global `.form-group input:focus { border-color: var(--accent) }`
   rule in components.css — the 2px border going from grey to gold meets
   WCAG 1.4.11 (>3:1 non-text contrast). Adding an outline here on top
   produced a visible double border (own gold border + outer outline)
   on /book and /order/cart, so we suppress it for flatpickr inputs
   specifically. */
input.flatpickr-input:focus,
input.flatpickr-alt-input:focus {
  outline: none;
}