/* JC theme overrides for Easepick. Variable list: https://easepick.com/sections/customization
   Easepick's host is a custom element <easepick-wrapper>, not a div.class —
   so the element selector (no leading dot) is what we need. */
easepick-wrapper,
.easepick-wrapper {
    --primary-color: #c89656;
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f7f7f7;
    --color-fg-primary: #1a1a1a;
    --color-fg-secondary: #6b6b6b;
    --color-fg-locked: #d0d0d0;
    --color-bg-locked: #ffffff;
    --color-fg-selected: #ffffff;
    --color-bg-selected: #c89656;
    --color-fg-inrange: #1a1a1a;
    --color-bg-inrange: #faf2e6;
    --font-family: inherit;
    --day-width: 40px;
    --day-height: 40px;
    --radius: 12px;

    /* Stack the picker above subsequent sections when its host's parent
       creates a stacking context. */
    z-index: 99999 !important;
    position: relative !important;
}

/* Common section ancestors (.hero, .inner-banner, .banner) often use
   `overflow: hidden` to clip background visuals. That also clips Easepick
   popups, since they're positioned absolutely inside the section. Force
   visible overflow site-wide so pickers can extend past their parent.
   The original visuals are sized to fill these containers and don't need
   clipping. */
.hero,
.inner-banner,
.banner-section,
.banner {
    overflow: visible !important;
}

/* The home-hero booking bar is too narrow (max-width: 900px) for the
   text-input layout. Widen it so the four fields + button fit cleanly. */
.booking-bar {
    max-width: 1200px !important;
    width: min(1200px, 95%) !important;
}

/* Inputs bound to the picker should look clickable, not "disabled-grey".
   Browsers grey out `readonly` text inputs by default; we don't want that
   here — these inputs ARE the trigger for the picker. */
input[data-jc-datepicker]:not([disabled]):not(.jc-datepicker-locked) {
    cursor: pointer;
    background-color: transparent;
    color: inherit;
    opacity: 1;
}

/* Native `<input type="date">` had a narrow intrinsic width sized to the
   date display (~110-150px). A text input defaults to size=20 chars (~200px),
   which overflows tight flex layouts like the home-hero `.booking-bar`.
   Constrain the picker's text inputs and their paired check-out inputs so
   they respect the parent's allotted width. */
input[data-jc-datepicker],
input[data-jc-datepicker] ~ input[readonly],
.booking-bar__field,
.check-avail-input,
.date-box input[readonly] {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Mobile centered modal */
@media (max-width: 640px) {
    .easepick-wrapper.jc-mobile {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 9999;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4);
    }
}

/* Disabled state — used on checkout.blade.php where the input is read-only */
input[data-jc-datepicker][disabled],
input[data-jc-datepicker][readonly].jc-datepicker-locked {
    background-color: #f7f7f7;
    cursor: not-allowed;
}