/* =============================================================================
   WBV — Date Picker styles (paired with wbv-25-date-picker.code-snippets.php)

   Purpose: standalone styles for the wbvDatePicker overlay so it can be reused
   on any page (villa detail, homepage hero search, etc.) without dragging in
   page-specific CSS.

   Owns:
     - .wbv-picker-shell, .wbv-picker-mount, .wbv-picker-footer
     - .wbv-picker-clear, .wbv-picker-close, .wbv-picker-close-x, .wbv-picker-backdrop
     - .litepicker .container__*, .month-item, .day-item (all picker chrome + cells)
     - .button-previous-month, .button-next-month (month nav)
     - All hover/locked/start/end/in-range/wbv-prev-* states
     - Mobile (≤700px / ≤900px) modal-mode + fluid grid overrides

   Variables relied on (defined in main site CSS, e.g. wbv-villas-detail.css):
     --wbv-cta, --wbv-cta-grad, --wbv-cta-grad-hover, --wbv-text, --wbv-text-muted,
     --wbv-bg, --wbv-divider, --wbv-font-body
   ============================================================================= */

/* OUR PICKER SHELL — owns the visual chrome (card, padding, header, footer).
   Litepicker mounts inside .wbv-picker-mount as plain calendar, no chrome. */
.wbv-picker-shell {
  position: absolute;
  top: 67px;
  right: -32px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  padding: 20px;
  z-index: 1200;          /* above site header (1001), mobile bar (1100), guests overlay (1101) */
  display: inline-block;  /* shrink-wrap to content width */
}
.wbv-picker-shell[hidden] { display: none; }
.wbv-picker-shell { transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), transform 280ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; transform: translateY(0); }
.wbv-picker-shell.is-closing { opacity: 0; transform: translateY(-4px); pointer-events: none; }

/* X close button — visible only on mobile/tablet via @media below */
.wbv-picker-close-x { display: none; position: absolute; top: 12px; right: 12px; background: transparent; border: 0; padding: 8px; border-radius: 6px; color: var(--wbv-text); cursor: pointer; line-height: 0; transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1); font-family: inherit; }
.wbv-picker-close-x:hover { background: color-mix(in srgb, var(--wbv-cta) 12%, transparent); }

/* Backdrop dim — visibility CSS-gated to mobile/tablet via @media below */
.wbv-picker-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1190; opacity: 1; transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); }
.wbv-picker-backdrop[hidden] { display: none; }
.wbv-picker-backdrop.is-closing { opacity: 0; }

.wbv-picker-mount { min-height: 0; }
.wbv-picker-footer { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--wbv-divider); margin-top: 12px; }
.wbv-picker-footer button { background: transparent; border: 0; padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; border-radius: 8px; }
.wbv-picker-clear { color: var(--wbv-text); text-decoration: underline; }
.wbv-picker-clear:hover { background: var(--wbv-bg); }
.wbv-picker-close { background: var(--wbv-cta-grad); color: white; padding: 10px 24px; transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.wbv-picker-close:hover { background: var(--wbv-cta-grad-hover); }

/* LITEPICKER ROOT — naked calendar (shell provides chrome) */
.litepicker {
  font-family: var(--wbv-font-body);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  position: static;
  width: 100%;
  z-index: auto;
  --litepicker-day-color: var(--wbv-text);
  --litepicker-day-color-hover: var(--wbv-text);
  --litepicker-month-header-color: var(--wbv-text);
  --litepicker-button-prev-month-color-hover: var(--wbv-cta);
  --litepicker-button-next-month-color-hover: var(--wbv-cta);
  --litepicker-day-width: 38px;
}
.litepicker .container__main { padding: 0; min-width: 0; box-shadow: none; background: transparent; }
.litepicker .container__months { padding: 0; box-shadow: none; display: flex; flex-wrap: nowrap; background: transparent; gap: 16px; }
.litepicker .container__months .month-item { padding: 0; flex: 0 0 auto; }
.litepicker .container__months .month-item-header { font-size: 16px; font-weight: 600; padding: 8px 0 16px; }

/* PREV / NEXT MONTH BUTTONS — nav arrows in each month header */
.litepicker .button-previous-month,
.litepicker .button-next-month {
  background: transparent;
  border: 0;
  font-size: 20px;
  cursor: pointer;
  padding: 0 8px;
  color: inherit;
  font-family: inherit;
  line-height: 1;
}
.litepicker .button-previous-month:hover,
.litepicker .button-next-month:hover { color: var(--wbv-cta); }

/* DAY CELL — base styling */
.litepicker .container__days .day-item {
  width: 38px; height: 38px; line-height: 38px;
  padding: 0; margin: 0;
  font-size: 14px; font-weight: 500;
  text-align: center;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  color: var(--wbv-text);
}
.litepicker .container__days .day-item.is-empty { cursor: default; }

/* HOVER — border in CTA, no fill */
.litepicker .container__days .day-item:hover:not(.is-locked):not(.is-empty):not(.is-start-date):not(.is-end-date) {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--wbv-cta);
}

/* IN-RANGE — light CTA fill (0.15 opacity), rectangle (pill ends come from start/end ::before) */
.litepicker .container__days .day-item.is-in-range {
  background: color-mix(in srgb, var(--wbv-cta) 15%, transparent);
  border-radius: 0;
}

/* SELECTED start/end — filled circle 0.8 opacity + 1px border */
.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date {
  background: color-mix(in srgb, var(--wbv-cta) 80%, transparent);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--wbv-cta);
  border-radius: 50%;
  z-index: 1;
}

/* PILL CAPS — half-rectangle behind start/end so the in-range fill connects to the circle without a gap */
.litepicker .container__days .day-item.is-start-date::before,
.litepicker .container__days .day-item.is-end-date::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--wbv-cta) 15%, transparent);
  z-index: -1;
}
.litepicker .container__days .day-item.is-start-date::before { left: 50%; right: -1px; }
.litepicker .container__days .day-item.is-end-date::before { right: 50%; left: -1px; }
/* If start === end (zero-night, edge case) hide the half-rect so it's just a circle */
.litepicker .container__days .day-item.is-start-date.is-end-date::before { display: none; }

/* LOCKED — strikethrough muted, no interaction */
.litepicker .container__days .day-item.is-locked {
  color: var(--wbv-text-muted);
  text-decoration: line-through;
  opacity: .5;
  cursor: not-allowed;
  background: transparent;
  box-shadow: none;
}
/* LOCKED + IN-RANGE — keep the in-range fill so the band looks continuous */
.litepicker .container__days .day-item.is-locked.is-in-range {
  background: color-mix(in srgb, var(--wbv-cta) 15%, transparent);
  border-radius: 0;
}

/* Suppress Litepicker's native hover-chase — we paint our own preview below */
.litepicker .container__days .day-item.is-tooltip:not(.is-start-date):not(.is-end-date):not(.is-in-range):not(.wbv-prev-fill):not(.wbv-prev-edge) {
  background: transparent;
}

/* Custom hover preview painted by JS — keeps existing range visuals intact */
.litepicker .container__days .day-item.wbv-prev-fill {
  background: color-mix(in srgb, var(--wbv-cta) 15%, transparent);
  border-radius: 0;
}
.litepicker .container__days .day-item.wbv-prev-edge {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--wbv-cta);
  border-radius: 50%;
  z-index: 1;
}
.litepicker .container__footer { display: none; }
.litepicker .container__tooltip { display: none; }

@media (max-width: 700px) {
  .litepicker .container__months { gap: 0; }
  .litepicker .container__months .month-item { min-width: 0; }
}

/* MODAL MODE — centered card with backdrop on mobile/tablet (≤900px).
   The shell goes from anchored absolute to viewport-centered fixed. */
@media (max-width: 900px) {
  /* Bigger prev/next month arrows — easier touch targets */
  .litepicker .button-previous-month,
  .litepicker .button-next-month { font-size: 30px; padding: 0 12px; }

  .wbv-picker-shell {
    position: fixed;
    top: 50%; left: 50%;
    right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    width: calc(100% - 48px);    /* 24px breathing room each side */
    max-width: 720px;            /* fits 2-month layout at tablet */
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 56px 24px 24px;     /* extra top space so X has room above month header */
    border-radius: 16px;
    display: block;
  }
  .wbv-picker-shell.is-closing { transform: translate(-50%, calc(-50% - 4px)); }
  .wbv-picker-close-x { display: block; }
  .wbv-picker-shell .wbv-picker-footer { justify-content: space-between; }
  .wbv-picker-backdrop:not([hidden]) { display: block; }
}

/* SINGLE-MONTH variant — narrower modal at all mobile/tablet sizes
   + fluid 7-column grid so cells fill the modal width */
@media (max-width: 900px) {
  .wbv-picker-shell { max-width: 380px; padding: 56px 16px 16px; }
  /* Force the chain of parents to fill the modal width so 1fr columns expand */
  .wbv-picker-shell .litepicker,
  .wbv-picker-shell .container__main,
  .wbv-picker-shell .container__months,
  .wbv-picker-shell .month-item { width: 100%; }
  .wbv-picker-shell .container__months { display: block; }
  .wbv-picker-shell .month-item { flex: 1 1 100%; }
  .wbv-picker-shell .container__days,
  .wbv-picker-shell .month-item-weekdays-row {
    grid-template-columns: repeat(7, 1fr) !important;
    width: 100%;
  }
  .wbv-picker-shell .container__days .day-item {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}