/* Artsiderz brand-pink theme for Litepicker.
   Litepicker 2.x exposes CSS custom properties on the .litepicker
   container. We remap the accent + range colours to the brand pink.
   All other palette entries (bg, text, border) inherit from the site. */

.litepicker {
  --litepicker-container-months-color-bg: #ffffff;
  --litepicker-container-months-box-shadow-color: rgba(26, 26, 46, 0.12);
  --litepicker-month-header-color: #1a1a2e;
  --litepicker-button-prev-month-color: #d946a8;
  --litepicker-button-next-month-color: #d946a8;
  --litepicker-button-prev-month-color-hover: #e06bb8;
  --litepicker-button-next-month-color-hover: #e06bb8;
  --litepicker-month-week-number-color: #888899;
  --litepicker-day-color: #1a1a2e;
  --litepicker-day-color-hover: #d946a8;
  --litepicker-is-today-color: #d946a8;
  --litepicker-is-in-range-color: rgba(217, 70, 168, 0.15);
  --litepicker-is-start-color: #ffffff;
  --litepicker-is-start-color-bg: #d946a8;
  --litepicker-is-end-color: #ffffff;
  --litepicker-is-end-color-bg: #d946a8;
  --litepicker-button-apply-color: #ffffff;
  --litepicker-button-apply-color-bg: #d946a8;
  --litepicker-button-cancel-color: #1a1a2e;
  --litepicker-button-cancel-color-bg: transparent;
  --litepicker-button-reset-color: #888899;
  --litepicker-button-reset-color-hover: #d946a8;
  --litepicker-highlighted-day-color: #d946a8;
  --litepicker-highlighted-day-color-bg: rgba(217, 70, 168, 0.15);

  border-radius: 4px;
  font-family: inherit;
}

.litepicker .container__months .month-item-header .month-item-name,
.litepicker .container__months .month-item-header .month-item-year {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
}

/* Slight lift + border to match the site's card look */
.litepicker .container__months {
  border: 1px solid rgba(26, 26, 46, 0.1);
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(26, 26, 46, 0.12);
  padding: 4px;
}

/* "Confirmer" button in brand pink at the bottom */
.litepicker .container__footer .button-apply {
  padding: 8px 24px;
  font-weight: 700;
  border-radius: 20px;
  text-transform: none;
}

/* ── Mobile (≤ 640 px) ─────────────────────────────────────────────
   The JS init switches to numberOfMonths=1 on narrow viewports, but
   Litepicker still applies its default 300 px per-month width inline
   via JS. On iPhone SE (320 px viewport) that overflows even at
   numberOfMonths=1. Every rule below carries `!important` because we
   fight against Litepicker's inline style="width:300px" pushes. */
@media (max-width: 640px) {
  /* Fixed positioning + inset — escapes any overflow-hidden parent
     and centres the popover on the viewport regardless of where the
     triggering input sits. */
  .litepicker {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: 60px !important;
    bottom: auto !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    margin: 0 !important;
    z-index: 9999;
  }
  /* Wipe Litepicker's inline widths on every layout container. */
  .litepicker .container__main,
  .litepicker .container__months,
  .litepicker .container__months .month-item,
  .litepicker .container__days,
  .litepicker .container__days .day-item {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .litepicker .container__months {
    padding: 4px !important;
  }
  .litepicker .container__months .month-item {
    padding: 8px 2px !important;
  }
  /* Days grid: force 7 equal columns via flex + flex:1 so cells auto-
     size to viewport width — even 320 px phones fit. */
  .litepicker .container__days,
  .litepicker .container__months .month-item-weekdays-row {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .litepicker .container__days .day-item,
  .litepicker .container__months .month-item-weekdays-row > div {
    flex: 1 1 calc(100% / 7) !important;
    max-width: calc(100% / 7) !important;
    min-height: 38px !important;
    line-height: 38px !important;
    font-size: 13px !important;
    padding: 0 !important;
  }
  /* Header text + nav controls compact but tappable. */
  .litepicker .month-item-header {
    padding: 4px 2px !important;
    font-size: 13px !important;
  }
  .litepicker .month-item-header div > .button-previous-month,
  .litepicker .month-item-header div > .button-next-month {
    padding: 8px 10px !important;
  }
  .litepicker .container__footer {
    padding: 8px !important;
  }
  .litepicker .container__footer .button-apply {
    width: 100% !important;
    padding: 12px 16px !important;
  }
  /* Very narrow — sub-360 px (iPhone 5/SE 1st gen, folded Samsungs). */
  @media (max-width: 360px) {
    .litepicker .container__days .day-item,
    .litepicker .container__months .month-item-weekdays-row > div {
      min-height: 32px !important;
      line-height: 32px !important;
      font-size: 12px !important;
    }
    .litepicker .month-item-header { font-size: 12px !important; }
  }
}