/* Minification failed. Returning unminified contents.
(77,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */
/* jQuery UI datepicker skin for the customer site.

   A dedicated file on purpose. jQuery UI ships no CSS in this repo, and the shared
   customer stylesheets (style.css / responsive.css) must not be appended to, so the
   datepicker gets its own page scoped file loaded only where a date field exists.

   Only the datepicker widget is styled here, not the rest of jQuery UI. */

/* Clear button. The field is readonly so the picker is the only thing that can write to
   it, which leaves no way to remove a date once one is set - this is that way. */
.om-date-wrap {
    position: relative;
}

.om-date-wrap .om-datepicker {
    padding-right: 38px; /* keep typed text clear of the button */
    cursor: pointer; /* the field is readonly, so without this it reads as disabled */
}

/* The cross is an inline SVG in the markup, not an icon font character. The customer
   layout loads no icon font at all - not Font Awesome, not Material Symbols - so a
   ligature would render as nothing there. The SVG draws in currentColor, so it picks up
   the colour below and works unchanged on the admin side too. */
.om-date-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    padding: 0;
    color: #6b7280;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.om-date-clear svg {
    display: block;
}

.om-date-clear:hover {
    background: #e5e7eb;
    color: #111827;
}

/* nothing to clear, so nothing to show */
.om-date-clear.om-hidden {
    display: none;
}

/* Everything below is scoped to #ui-datepicker-div - the id jQuery UI always gives the
   widget - and not to .ui-datepicker on its own.

   assets/css/style.css already carries an older datepicker skin written entirely as
   #ui-datepicker-div rules, for the date fields on the widget and booking pages. That
   file is loaded site wide and must not be edited, and an id beats a class no matter
   which stylesheet comes last, so a plain .ui-datepicker rule here loses every property
   the old skin also sets. Matching on the id puts the two on equal footing, and the extra
   .ui-datepicker / .ui-datepicker-header in each selector puts this file ahead.

   That is also why several rules below reset a property they do not appear to need - the
   sprite on the arrows, the grid line on each cell, the padding on the title. Those come
   from the old skin, and only setting them back turns them off.

   The admin side loads this file without style.css, where there is nothing to override.
   The id is on the widget there too, so the same selectors still match. */

#ui-datepicker-div.ui-datepicker {
    /* Bump on every change to this file. It survives bundling and minification, so
       inspecting #ui-datepicker-div in devtools tells you which copy the server is
       serving without having to read the css and guess. */
    --om-datepicker-version: 7;

    display: none;
    width: 300px;
    padding: 10px; /* old skin says 20px */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.14), 0 3px 8px rgba(0,0,0,0.06);
    font-family: inherit;
    font-size: 14px;

    /* jQuery UI writes z-index: 1 inline, so a value is needed here or the widget opens
       behind the customer site header, which sits at 1000.

       4444 rather than something just clear of 1000 because the admin stylesheet already
       sets #ui-datepicker-div { z-index: 4444 !important } for its own stacking, and the
       selector here is more specific, so a lower value would quietly win on the admin
       member edit screen and undo it. One value that satisfies both, and nothing on the
       customer side stacks anywhere near it. */
    z-index: 4444 !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: 2px 0 10px;
    background: none;
    border: none;
}

/* Month and year pickers. Without these a date of birth means clicking back one month at
   a time for thirty years.

   padding is reset because the old skin pads the title 10px 40px, which on top of the
   margin here leaves the two dropdowns squeezed into the middle third of the widget. */
#ui-datepicker-div.ui-datepicker .ui-datepicker-title {
    display: flex;
    gap: 8px;
    margin: 0 34px;
    padding: 0;
    font-weight: 400;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-title select {
    flex: 1;
    min-width: 0; /* a flex item will not shrink below its content without this */
    height: 34px;
    padding: 0 8px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    cursor: pointer;
}

/* Height matches the month and year selects, and top matches the header's top padding,
   so the arrows line up with the middle of those dropdowns instead of sitting above them.
   Flex centres the chevron, which is why the chevron rule below needs no top or left.

   background and text-indent are reset because the old skin draws these arrows as a
   sprite from arrow.svg and pushes the anchor text off screen to hide it. Left alone the
   sprite sits behind the chevron below at a size and offset meant for a 40px box, and the
   text-indent is inherited by the chevron and drags it out of view. */
#ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
#ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    position: absolute;
    top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 34px;
    background: none;
    text-indent: 0;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
}

/* jQuery UI renders each arrow as <a><span class="ui-icon">Prev</span></a>. Without a
   jQuery UI theme that span has no sprite, so its text shows through and appears next to
   the chevron drawn below. Hide the span outright - a text-indent hack does not reliably
   clip it - and zero the anchor's font size so any markup without a span is hidden too. */
#ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
#ui-datepicker-div.ui-datepicker .ui-datepicker-header .ui-datepicker-next { font-size: 0; }

#ui-datepicker-div.ui-datepicker .ui-datepicker-prev span,
#ui-datepicker-div.ui-datepicker .ui-datepicker-next span { display: none; }

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

#ui-datepicker-div.ui-datepicker .ui-datepicker-prev:hover,
#ui-datepicker-div.ui-datepicker .ui-datepicker-next:hover { background: #f3f4f6; }

/* jQuery UI adds ui-state-disabled to an arrow when minDate or maxDate blocks that
   direction - with maxDate today, the next arrow is dead on the current month. Without
   this it looks identical to a live arrow and clicking it does nothing. */
#ui-datepicker-div.ui-datepicker .ui-datepicker-prev.ui-state-disabled,
#ui-datepicker-div.ui-datepicker .ui-datepicker-next.ui-state-disabled {
    opacity: 0.3;
    cursor: default;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-prev.ui-state-disabled:hover,
#ui-datepicker-div.ui-datepicker .ui-datepicker-next.ui-state-disabled:hover { background: none; }

/* Centred by the flex parent above, so no top or left offsets to get wrong. The margin
   only compensates for a rotated square sitting slightly off its own visual centre. */
#ui-datepicker-div.ui-datepicker .ui-datepicker-prev:after,
#ui-datepicker-div.ui-datepicker .ui-datepicker-next:after {
    content: '';
    width: 9px;
    height: 9px;
    border-top: 2px solid #4b5563;
    border-right: 2px solid #4b5563;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-prev:after { transform: rotate(-135deg); margin-left: 3px; }
#ui-datepicker-div.ui-datepicker .ui-datepicker-next:after { transform: rotate(45deg); margin-right: 3px; }

#ui-datepicker-div.ui-datepicker .ui-datepicker-unselectable.ui-state-disabled { opacity: 0.35; cursor: default; }
#ui-datepicker-div.ui-datepicker .ui-datepicker-unselectable.ui-state-disabled:hover { background: none; }

#ui-datepicker-div.ui-datepicker table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

#ui-datepicker-div.ui-datepicker th {
    padding: 6px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9ca3af;
    text-align: center;
    border: none;
}

/* border is reset because the old skin rules a grey line round every cell, which turns
   the rounded day below into a rounded shape sitting inside a square box. */
#ui-datepicker-div.ui-datepicker td { padding: 1px; text-align: center; border: none; }

#ui-datepicker-div.ui-datepicker td a,
#ui-datepicker-div.ui-datepicker td span {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    color: #111827;
    text-decoration: none;
    border-radius: 8px;
}

#ui-datepicker-div.ui-datepicker td a:hover { background: #f3f4f6; text-decoration: none; }

#ui-datepicker-div.ui-datepicker td .ui-state-active {
    background: #fc6143;
    color: #fff;
    font-weight: 700;
}

#ui-datepicker-div.ui-datepicker td .ui-state-active:hover { background: #fc6143; color: #fff; }

/* today, when it is not the selected day. background is reset because the old skin fills
   it grey, which together with the ring below reads as two different highlights. */
#ui-datepicker-div.ui-datepicker td .ui-state-highlight {
    background: transparent;
    box-shadow: inset 0 0 0 1px #fc6143;
}

#ui-datepicker-div.ui-datepicker .ui-state-disabled span { color: #d1d5db; }

/* The picker is positioned absolutely against the document, so on a narrow screen
   it must never push the page wider than the viewport. */
@media (max-width: 360px) {
    #ui-datepicker-div.ui-datepicker { width: 280px; padding: 8px; }
    #ui-datepicker-div.ui-datepicker .ui-datepicker-title { margin: 0 30px; }
    #ui-datepicker-div.ui-datepicker td a,
    #ui-datepicker-div.ui-datepicker td span { padding: 7px 0; font-size: 13px; }
}