/*
 * Check-in calendar (jQuery UI datepicker) - mobile first.
 * Phones (< 768px): bottom sheet over a dimmed page, large touch targets.
 * Tablets and desktop (>= 768px): centred dialog over a dimmed page.
 * Layout depends only on screen width; jQuery UI's own positioning (next to a
 * hidden, zero-size input) is overridden on purpose.
 * Overrides the jQuery UI base theme loaded from code.jquery.com.
 */
:root {
    --lido-cal-accent: #2a6d68;
    --lido-cal-accent-soft: #e3f4f1;
    --lido-cal-text: #1f2d2c;
    --lido-cal-muted: #b9c4c3;
    --lido-cal-bg: #ffffff;
    --lido-cal-radius: 18px;
    --lido-cal-day: 44px;
}

#ui-datepicker-div.ui-datepicker {
    position: fixed !important;
    z-index: 100000 !important;
    box-sizing: border-box;
    border: 0;
    background: var(--lido-cal-bg);
    color: var(--lido-cal-text);
    font-family: "Work Sans", "Lato", system-ui, sans-serif;
    font-size: 16px;
}

/* Phones: bottom sheet */
@media (max-width: 767px) {
    #ui-datepicker-div.ui-datepicker {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100%;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
        border-radius: var(--lido-cal-radius) var(--lido-cal-radius) 0 0;
        /* Second shadow dims the page; tapping outside closes the calendar. */
        box-shadow: 0 -8px 30px rgba(0, 0, 0, .18), 0 0 0 100vmax rgba(15, 35, 33, .45);
        animation: lido-cal-up .22s ease-out;
    }

    /* Grab handle */
    #ui-datepicker-div.ui-datepicker::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        margin: 0 auto 10px;
        border-radius: 2px;
        background: var(--lido-cal-muted);
    }
}

/* Tablets and desktop: centred dialog */
@media (min-width: 768px) {
    :root {
        --lido-cal-day: 48px;
    }

    #ui-datepicker-div.ui-datepicker {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: 420px;
        max-width: calc(100vw - 48px);
        padding: 20px 24px 24px;
        border-radius: var(--lido-cal-radius);
        transform: translate(-50%, -50%);
        box-shadow: 0 20px 60px rgba(0, 0, 0, .25), 0 0 0 100vmax rgba(15, 35, 33, .45);
        animation: lido-cal-pop .18s ease-out;
    }
}

@keyframes lido-cal-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes lido-cal-pop {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Header: month title and arrows */
#ui-datepicker-div .ui-datepicker-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0;
    border: 0;
    /* !important: the services results page forces a grey .ui-widget-header */
    background: none !important;
}

#ui-datepicker-div .ui-datepicker-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: .02em;
    color: var(--lido-cal-text);
}

#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    top: 0;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

#ui-datepicker-div .ui-datepicker-prev { left: 0; }
#ui-datepicker-div .ui-datepicker-next { right: 0; }

#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {
    background: var(--lido-cal-accent-soft);
}

/* Replace the sprite icons with chevrons */
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    margin: 0;
    border: solid var(--lido-cal-accent);
    border-width: 0 0 2.5px 2.5px;
    background: none;
    text-indent: -9999px;
    overflow: hidden;
}

#ui-datepicker-div .ui-datepicker-prev span { transform: translate(-30%, -50%) rotate(45deg); }
#ui-datepicker-div .ui-datepicker-next span { transform: translate(-70%, -50%) rotate(-135deg); }

/* No arrow outside the season */
#ui-datepicker-div .ui-datepicker-prev.ui-state-disabled,
#ui-datepicker-div .ui-datepicker-next.ui-state-disabled {
    visibility: hidden;
}

/* Grid */
#ui-datepicker-div table.ui-datepicker-calendar {
    width: 100%;
    margin: 4px 0 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 2px 4px;
    font-size: 16px;
    table-layout: fixed;
}

#ui-datepicker-div .ui-datepicker-calendar th {
    padding: 6px 0;
    border: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6f7d7c;
}

#ui-datepicker-div .ui-datepicker-calendar td {
    padding: 0;
    border: 0;
    background: none;
}

#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--lido-cal-day);
    height: var(--lido-cal-day);
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--lido-cal-text);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* Bookable days */
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-default {
    background: var(--lido-cal-accent-soft);
}

#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-hover,
#ui-datepicker-div .ui-datepicker-calendar td a:hover {
    background: #c9ebe6;
}

/* Today */
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-highlight {
    box-shadow: inset 0 0 0 2px var(--lido-cal-accent);
}

/* Selected day */
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active,
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-current-day a {
    background: var(--lido-cal-accent);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(42, 109, 104, .35);
}

/* Closed / blocked days */
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled {
    opacity: 1;
}

#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled span {
    background: none;
    color: var(--lido-cal-muted);
    font-weight: 400;
}

/* Hide the cookie-preferences button while the calendar is open (it would cover the days) */
body:has(#ui-datepicker-div[style*="display: block"]) .iubenda-tp-btn {
    display: none !important;
}