/* ============================================
   ParkingPro Reservation Form – Flatpickr Overrides
   Scoped via .parkingpro-reservation-form-datepicker on the calendar container.
   Uses the --parkingpro-reservation-form-* design tokens from common.css.
   ============================================ */

/* ---- Calendar container ---- */

.parkingpro-reservation-form-datepicker {
  font-family: inherit;
  border-radius: var(--parkingpro-reservation-form-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 2px solid var(--parkingpro-reservation-form-primary);
}

/* Arrow (triangle) pointing to input */
.parkingpro-reservation-form-datepicker.arrowTop::before {
  border-bottom-color: var(--parkingpro-reservation-form-primary);
}
.parkingpro-reservation-form-datepicker.arrowTop::after {
  border-bottom-color: var(--parkingpro-reservation-form-surface);
}
.parkingpro-reservation-form-datepicker.arrowBottom::before {
  border-top-color: var(--parkingpro-reservation-form-primary);
}
.parkingpro-reservation-form-datepicker.arrowBottom::after {
  border-top-color: var(--parkingpro-reservation-form-surface);
}

/* Hide flatpickr's built-in time input — we use our own */
.parkingpro-reservation-form-datepicker .flatpickr-time {
  display: none !important;
}

.parkingpro-reservation-form-datepicker.parkingpro-reservation-form-datepicker--split-time .flatpickr-time {
  display: none !important;
}

.parkingpro-reservation-form-datepicker.parkingpro-reservation-form-datepicker--split-time {
  width: auto;
  min-width: 280px;
}

.parkingpro-reservation-form-datepicker.parkingpro-reservation-form-datepicker--split-time .parkingpro-reservation-form-datepicker__time-panel {
  display: block;
  padding: 24px;
}

/* ---- Theme reset for all custom buttons inside our container ---- */

.parkingpro-reservation-form-datepicker button.parkingpro-reservation-form-datepicker__tab,
.parkingpro-reservation-form-datepicker button.parkingpro-reservation-form-datepicker__spinner-button,
.parkingpro-reservation-form-datepicker button.parkingpro-reservation-form-datepicker__confirm-button {
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: normal !important;
  text-decoration: none !important;
  outline: none !important;
}

/* ---- Tab bar ---- */

.parkingpro-reservation-form-datepicker__tab-bar {
  display: flex;
  justify-content: center;
  border-bottom: 2px solid var(--parkingpro-reservation-form-border);
  padding: 0 16px;
  background: var(--parkingpro-reservation-form-surface);
  border-radius: var(--parkingpro-reservation-form-radius-sm) var(--parkingpro-reservation-form-radius-sm) 0 0;
}

.parkingpro-reservation-form-datepicker button.parkingpro-reservation-form-datepicker__tab {
  flex: 0 0 auto;
  padding: 12px 20px !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: 15px !important;
  font-family: inherit;
  color: var(--parkingpro-reservation-form-muted) !important;
  cursor: pointer;
  margin-bottom: -2px !important;
  transition: color 0.15s, border-color 0.15s;
}

.parkingpro-reservation-form-datepicker button.parkingpro-reservation-form-datepicker__tab:hover {
  color: var(--parkingpro-reservation-form-text) !important;
  background: none !important;
}

.parkingpro-reservation-form-datepicker button.parkingpro-reservation-form-datepicker__tab.parkingpro-reservation-form-datepicker__tab--active {
  color: var(--parkingpro-reservation-form-text) !important;
  font-weight: 600;
  border-bottom-color: var(--parkingpro-reservation-form-text) !important;
}

/* ---- Time panel (hidden by default, shown via .parkingpro-reservation-form-datepicker--show-time) ---- */

.parkingpro-reservation-form-datepicker__time-panel {
  display: none;
  padding: 32px 24px 24px;
  text-align: center;
}

.parkingpro-reservation-form-datepicker.parkingpro-reservation-form-datepicker--show-time .parkingpro-reservation-form-datepicker__time-panel {
  display: block;
}

/* When time tab is active, hide the calendar parts and shrink the popup */
.parkingpro-reservation-form-datepicker.parkingpro-reservation-form-datepicker--show-time .flatpickr-months,
.parkingpro-reservation-form-datepicker.parkingpro-reservation-form-datepicker--show-time .flatpickr-innerContainer {
  display: none !important;
}

.parkingpro-reservation-form-datepicker.parkingpro-reservation-form-datepicker--show-time {
  max-width: 280px;
}

.parkingpro-reservation-form-datepicker.parkingpro-reservation-form-datepicker--show-time-only {
  max-width: 280px;
}

/* ---- Time spinners ---- */

.parkingpro-reservation-form-datepicker__time-spinners {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 24px;
}

.parkingpro-reservation-form-datepicker__spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.parkingpro-reservation-form-datepicker button.parkingpro-reservation-form-datepicker__spinner-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 28px !important;
  min-height: 0 !important;
  border: none !important;
  background: none !important;
  font-size: 12px !important;
  color: var(--parkingpro-reservation-form-muted) !important;
  cursor: pointer;
  border-radius: calc(var(--parkingpro-reservation-form-radius-sm) / 2) !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background 0.15s, color 0.15s;
}

.parkingpro-reservation-form-datepicker button.parkingpro-reservation-form-datepicker__spinner-button:hover {
  background: color-mix(in srgb, var(--parkingpro-reservation-form-primary) 12%, white) !important;
  color: var(--parkingpro-reservation-form-text) !important;
}

.parkingpro-reservation-form-datepicker__spinner-value {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 64px;
  font-size: 36px;
  font-weight: 600;
  color: var(--parkingpro-reservation-form-text);
  background: #f5f5f5;
  border-radius: var(--parkingpro-reservation-form-radius);
}

.parkingpro-reservation-form-datepicker__time-separator {
  font-size: 36px;
  font-weight: 600;
  color: var(--parkingpro-reservation-form-text);
  padding: 0 2px;
  align-self: center;
}

/* ---- Confirm button ---- */

.parkingpro-reservation-form-datepicker button.parkingpro-reservation-form-datepicker__confirm-button {
  display: block !important;
  width: 100%;
  max-width: 220px;
  margin: 0 auto !important;
  padding: 12px 24px !important;
  background: var(--parkingpro-reservation-form-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 25px !important;
  font-size: 15px !important;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}

.parkingpro-reservation-form-datepicker button.parkingpro-reservation-form-datepicker__confirm-button:hover {
  opacity: 0.88;
  background: var(--parkingpro-reservation-form-primary) !important;
  color: #fff !important;
}

/* ---- Month navigation ---- */

.parkingpro-reservation-form-datepicker .flatpickr-months {
  border-radius: 0; /* tabs above, no top-rounding */
}

.parkingpro-reservation-form-datepicker .flatpickr-months .flatpickr-prev-month:hover svg,
.parkingpro-reservation-form-datepicker .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--parkingpro-reservation-form-primary);
}

/* ---- Day cells ---- */

.parkingpro-reservation-form-datepicker .flatpickr-day {
  border-radius: var(--parkingpro-reservation-form-radius-sm);
  color: var(--parkingpro-reservation-form-text);
}

.parkingpro-reservation-form-datepicker .flatpickr-day:hover,
.parkingpro-reservation-form-datepicker .flatpickr-day:focus {
  background: color-mix(in srgb, var(--parkingpro-reservation-form-primary) 12%, white);
  border-color: transparent;
}

.parkingpro-reservation-form-datepicker .flatpickr-day.today {
  border-color: var(--parkingpro-reservation-form-primary);
}

.parkingpro-reservation-form-datepicker .flatpickr-day.today:hover {
  background: color-mix(in srgb, var(--parkingpro-reservation-form-primary) 12%, white);
  border-color: var(--parkingpro-reservation-form-primary);
  color: var(--parkingpro-reservation-form-text);
}

.parkingpro-reservation-form-datepicker .flatpickr-day.selected,
.parkingpro-reservation-form-datepicker .flatpickr-day.selected:hover,
.parkingpro-reservation-form-datepicker .flatpickr-day.selected:focus {
  background: var(--parkingpro-reservation-form-primary);
  border-color: var(--parkingpro-reservation-form-primary);
  color: #fff;
}

/* ---- Range highlight ---- */

.parkingpro-reservation-form-datepicker .flatpickr-day.parkingpro-reservation-form-datepicker-day--in-range {
  background: color-mix(in srgb, var(--parkingpro-reservation-form-primary) 15%, white);
  border-color: transparent;
  border-radius: 0;
  box-shadow: -5px 0 0 color-mix(in srgb, var(--parkingpro-reservation-form-primary) 15%, white),
              5px 0 0 color-mix(in srgb, var(--parkingpro-reservation-form-primary) 15%, white);
}

.parkingpro-reservation-form-datepicker .flatpickr-day.parkingpro-reservation-form-datepicker-day--in-range:hover {
  background: color-mix(in srgb, var(--parkingpro-reservation-form-primary) 25%, white);
  box-shadow: -5px 0 0 color-mix(in srgb, var(--parkingpro-reservation-form-primary) 25%, white),
              5px 0 0 color-mix(in srgb, var(--parkingpro-reservation-form-primary) 25%, white);
}

.parkingpro-reservation-form-datepicker .flatpickr-day.parkingpro-reservation-form-datepicker-day--range-start,
.parkingpro-reservation-form-datepicker .flatpickr-day.parkingpro-reservation-form-datepicker-day--range-start:hover,
.parkingpro-reservation-form-datepicker .flatpickr-day.parkingpro-reservation-form-datepicker-day--range-start:focus {
  border-radius: 8px 0 0 8px;
  background: var(--parkingpro-reservation-form-primary);
  border-color: var(--parkingpro-reservation-form-primary);
  color: #fff;
  box-shadow: 5px 0 0 color-mix(in srgb, var(--parkingpro-reservation-form-primary) 15%, white);
}

.parkingpro-reservation-form-datepicker .flatpickr-day.parkingpro-reservation-form-datepicker-day--range-end,
.parkingpro-reservation-form-datepicker .flatpickr-day.parkingpro-reservation-form-datepicker-day--range-end:hover,
.parkingpro-reservation-form-datepicker .flatpickr-day.parkingpro-reservation-form-datepicker-day--range-end:focus {
  border-radius: 0 8px 8px 0;
  background: var(--parkingpro-reservation-form-primary);
  border-color: var(--parkingpro-reservation-form-primary);
  color: #fff;
  box-shadow: -5px 0 0 color-mix(in srgb, var(--parkingpro-reservation-form-primary) 15%, white);
}

/* ---- Alt input (the visible replacement input) ---- */

.parkingpro-reservation-form-datepicker__alt-input {
  cursor: pointer;
}

/* ---- WP admin bar offset fix ---- */
/* Flatpickr uses position:absolute on <body> but calculates top via
   getBoundingClientRect (viewport coords). The admin bar adds margin-top
   to <html>, which shifts the popup down by that amount. Compensate. */

body.admin-bar .parkingpro-reservation-form-datepicker {
  margin-top: calc(-1 * var(--wp-admin--admin-bar--height, 32px));
}

/* ---- Responsive: single month on small screens ---- */

@media (max-width: 767px) {
  .parkingpro-reservation-form-datepicker {
    max-width: 100vw;
  }
}