/*
|--------------------------------------------------------------------------
| Royal Servicess LLC
| Global Premium Calendar
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Enhanced fields
|--------------------------------------------------------------------------
*/

body input.royal-calendar-input[type="date"],
body input.royal-calendar-input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;

    padding-right: 48px !important;

    color-scheme: dark;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23cda94f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position:
        right 14px center !important;
    background-size:
        19px 19px !important;

    cursor: pointer;
}

body input.royal-calendar-input[type="date"]::-webkit-calendar-picker-indicator,
body input.royal-calendar-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    pointer-events: none !important;
}


/*
|--------------------------------------------------------------------------
| Layer
|--------------------------------------------------------------------------
*/

.royal-calendar-layer {
    position: fixed;

    inset: 0;

    z-index: 20000;

    background:
        transparent;
}

.royal-calendar-layer[hidden] {
    display: none !important;
}

body.royal-calendar-open {
    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| Calendar shell
|--------------------------------------------------------------------------
*/

.royal-calendar {
    position: fixed;

    width:
        min(
            372px,
            calc(100vw - 24px)
        );

    overflow: hidden;

    border:
        1px solid
        rgba(202, 164, 73, .40);

    border-radius: 18px;

    color: #f5f2e9;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(205, 169, 79, .12),
            transparent 34%
        ),
        linear-gradient(
            150deg,
            #1b1b17,
            #0d0f0e
        );

    box-shadow:
        0
        30px
        80px
        rgba(0, 0, 0, .62),
        0
        0
        0
        1px
        rgba(255, 255, 255, .02);

    font-family:
        inherit;
}

.royal-calendar__top {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        42px;

    gap: 7px;

    align-items: center;

    padding:
        14px
        14px
        10px;
}

.royal-calendar__nav,
.royal-calendar__month-title {
    min-height: 42px;

    border:
        1px solid
        rgba(255, 255, 255, .07);

    border-radius: 11px;

    color:
        rgba(255, 255, 255, .88);

    background:
        rgba(255, 255, 255, .018);

    cursor: pointer;

    font: inherit;
}

.royal-calendar__nav {
    display: grid;

    place-items: center;

    font-size: 1.25rem;
}

.royal-calendar__nav:hover:not(:disabled),
.royal-calendar__nav:focus-visible,
.royal-calendar__month-title:hover,
.royal-calendar__month-title:focus-visible {
    border-color:
        rgba(205, 169, 79, .46);

    color: #f0d277;

    background:
        rgba(205, 169, 79, .07);

    outline: none;
}

.royal-calendar__nav:disabled {
    opacity: .28;

    cursor: not-allowed;
}

.royal-calendar__month-title {
    padding:
        7px
        10px;

    font-weight: 900;
    font-size: .78rem;
}


/*
|--------------------------------------------------------------------------
| Week / day grid
|--------------------------------------------------------------------------
*/

.royal-calendar__calendar-view {
    padding:
        0
        14px
        13px;
}

.royal-calendar__weekdays,
.royal-calendar__days {
    display: grid;

    grid-template-columns:
        repeat(
            7,
            minmax(0, 1fr)
        );
}

.royal-calendar__weekdays {
    margin-bottom: 5px;
}

.royal-calendar__weekday {
    padding:
        8px 2px;

    color:
        rgba(255, 255, 255, .38);

    font-size: .56rem;
    font-weight: 900;

    text-align: center;

    text-transform: uppercase;
}

.royal-calendar__days {
    gap: 4px;
}

.royal-calendar__blank {
    min-height: 39px;
}

.royal-calendar__day {
    position: relative;

    display: grid;

    min-width: 0;
    min-height: 39px;

    place-items: center;

    border:
        1px solid
        transparent;

    border-radius: 10px;

    color:
        rgba(255, 255, 255, .78);

    background:
        transparent;

    cursor: pointer;

    font: inherit;
    font-size: .68rem;
    font-weight: 800;
}

.royal-calendar__day:hover:not(:disabled),
.royal-calendar__day:focus-visible {
    border-color:
        rgba(205, 169, 79, .34);

    color: #fff;

    background:
        rgba(205, 169, 79, .07);

    outline: none;
}

.royal-calendar__day.is-today::after {
    content: "";

    position: absolute;

    bottom: 5px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #d6b454;
}

.royal-calendar__day.is-selected {
    border-color: #d7b34f;

    color: #15130d;

    background:
        linear-gradient(
            145deg,
            #edce72,
            #bd922f
        );

    box-shadow:
        0
        7px
        20px
        rgba(202, 164, 73, .17);
}

.royal-calendar__day.is-selected::after {
    background:
        rgba(20, 18, 12, .58);
}

.royal-calendar__day:disabled {
    color:
        rgba(255, 255, 255, .16);

    cursor: not-allowed;
}


/*
|--------------------------------------------------------------------------
| Month / year jump
|--------------------------------------------------------------------------
*/

.royal-calendar__jump {
    max-height: 360px;

    padding:
        0
        14px
        14px;
}

.royal-calendar__jump[hidden] {
    display: none !important;
}

.royal-calendar__jump-grid {
    display: grid;

    grid-template-columns:
        112px
        minmax(0, 1fr);

    gap: 10px;
}

.royal-calendar__years {
    max-height: 282px;

    overflow-y: auto;

    padding: 5px;

    border:
        1px solid
        rgba(255, 255, 255, .06);

    border-radius: 11px;

    background:
        rgba(0, 0, 0, .14);

    scrollbar-width: thin;
    scrollbar-color:
        rgba(205, 169, 79, .42)
        transparent;
}

.royal-calendar__year {
    width: 100%;
    min-height: 35px;

    margin-bottom: 3px;

    border:
        1px solid
        transparent;

    border-radius: 8px;

    color:
        rgba(255, 255, 255, .56);

    background:
        transparent;

    cursor: pointer;

    font: inherit;
    font-size: .65rem;
    font-weight: 800;
}

.royal-calendar__year:hover,
.royal-calendar__year:focus-visible,
.royal-calendar__year.is-active {
    border-color:
        rgba(205, 169, 79, .31);

    color: #edcb6d;

    background:
        rgba(205, 169, 79, .07);

    outline: none;
}

.royal-calendar__months {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 7px;

    align-content: start;
}

.royal-calendar__month {
    min-height: 58px;

    border:
        1px solid
        rgba(255, 255, 255, .06);

    border-radius: 10px;

    color:
        rgba(255, 255, 255, .62);

    background:
        rgba(255, 255, 255, .014);

    cursor: pointer;

    font: inherit;
    font-size: .62rem;
    font-weight: 900;
}

.royal-calendar__month:hover:not(:disabled),
.royal-calendar__month:focus-visible,
.royal-calendar__month.is-active {
    border-color:
        rgba(205, 169, 79, .38);

    color: #efce71;

    background:
        rgba(205, 169, 79, .07);

    outline: none;
}

.royal-calendar__month:disabled {
    opacity: .24;

    cursor: not-allowed;
}


/*
|--------------------------------------------------------------------------
| Datetime controls
|--------------------------------------------------------------------------
*/

.royal-calendar__time {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 10px;

    align-items: end;

    padding:
        13px
        14px;

    border-top:
        1px solid
        rgba(255, 255, 255, .06);

    border-bottom:
        1px solid
        rgba(255, 255, 255, .06);

    background:
        rgba(255, 255, 255, .012);
}

.royal-calendar__time[hidden] {
    display: none !important;
}

.royal-calendar__time-label {
    display: block;

    margin-bottom: 6px;

    color:
        rgba(255, 255, 255, .42);

    font-size: .56rem;
    font-weight: 900;

    text-transform: uppercase;
}

.royal-calendar__time-fields {
    display: grid;

    grid-template-columns:
        58px
        12px
        58px;

    gap: 5px;

    align-items: center;
}

.royal-calendar__time-input {
    width: 100%;
    height: 41px;

    padding:
        0
        8px;

    border:
        1px solid
        rgba(255, 255, 255, .09);

    border-radius: 9px;

    color: #fff;

    background:
        #111311;

    outline: none;

    font: inherit;
    font-size: .72rem;
    font-weight: 800;

    text-align: center;
}

.royal-calendar__time-input:focus {
    border-color:
        rgba(205, 169, 79, .54);

    box-shadow:
        0
        0
        0
        3px
        rgba(205, 169, 79, .08);
}

.royal-calendar__time-colon {
    color:
        rgba(255, 255, 255, .42);

    text-align: center;
}

.royal-calendar__period {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 4px;

    padding: 4px;

    border:
        1px solid
        rgba(255, 255, 255, .07);

    border-radius: 10px;

    background:
        rgba(0, 0, 0, .14);
}

.royal-calendar__period-button {
    min-width: 50px;
    min-height: 34px;

    border: 0;

    border-radius: 7px;

    color:
        rgba(255, 255, 255, .42);

    background:
        transparent;

    cursor: pointer;

    font: inherit;
    font-size: .58rem;
    font-weight: 900;
}

.royal-calendar__period-button.is-active {
    color: #15130d;

    background: #d2aa45;
}


/*
|--------------------------------------------------------------------------
| Status and footer
|--------------------------------------------------------------------------
*/

.royal-calendar__selection {
    padding:
        11px
        14px
        0;

    color:
        rgba(255, 255, 255, .55);

    font-size: .63rem;
    line-height: 1.45;
}

.royal-calendar__selection strong {
    color:
        rgba(255, 255, 255, .90);
}

.royal-calendar__error {
    min-height: 18px;

    padding:
        5px
        14px
        0;

    color: #e59c9c;

    font-size: .59rem;
}

.royal-calendar__footer {
    display: grid;

    grid-template-columns:
        auto
        auto
        minmax(0, 1fr);

    gap: 7px;

    padding:
        12px
        14px
        14px;
}

.royal-calendar__action {
    min-height: 42px;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(255, 255, 255, .08);

    border-radius: 10px;

    color:
        rgba(255, 255, 255, .72);

    background:
        rgba(255, 255, 255, .02);

    cursor: pointer;

    font: inherit;
    font-size: .62rem;
    font-weight: 900;
}

.royal-calendar__action:hover:not(:disabled),
.royal-calendar__action:focus-visible {
    border-color:
        rgba(205, 169, 79, .40);

    color: #fff;

    outline: none;
}

.royal-calendar__action--primary {
    justify-self: stretch;

    border-color:
        rgba(205, 169, 79, .50);

    color: #17140d;

    background:
        linear-gradient(
            145deg,
            #e2c363,
            #bc902d
        );
}

.royal-calendar__action--primary:disabled {
    opacity: .42;

    cursor: not-allowed;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {
    .royal-calendar-layer {
        background:
            rgba(0, 0, 0, .66);

        backdrop-filter:
            blur(6px);
    }

    .royal-calendar {
        inset:
            auto
            0
            0
            0 !important;

        width: 100%;

        max-height: 92vh;

        overflow-y: auto;

        border-right: 0;
        border-bottom: 0;
        border-left: 0;

        border-radius:
            20px
            20px
            0
            0;
    }

    .royal-calendar__day {
        min-height: 43px;
    }

    .royal-calendar__jump {
        max-height: none;
    }

    .royal-calendar__years {
        max-height: 260px;
    }

    .royal-calendar__footer {
        position: sticky;

        bottom: 0;

        background:
            rgba(14, 15, 14, .97);

        backdrop-filter:
            blur(8px);
    }
}


@media (max-width: 390px) {
    .royal-calendar__jump-grid {
        grid-template-columns:
            92px
            minmax(0, 1fr);
    }

    .royal-calendar__month {
        min-height: 52px;
    }

    .royal-calendar__time {
        grid-template-columns: 1fr;
    }

    .royal-calendar__period {
        width: 122px;
    }
}


@media (prefers-reduced-motion: reduce) {
    .royal-calendar * {
        scroll-behavior: auto !important;
    }
}


/*
|--------------------------------------------------------------------------
| Centered desktop / tablet calendar
|--------------------------------------------------------------------------
| The calendar is intentionally detached from the field position so the
| customer always gets a consistent, focused reading surface.
|--------------------------------------------------------------------------
*/

@media (min-width: 641px) {
    .royal-calendar-layer {
        display: grid;

        place-items: center;

        padding: 24px;

        background:
            rgba(0, 0, 0, .48);

        backdrop-filter:
            blur(5px);
    }

    .royal-calendar-layer[hidden] {
        display: none !important;
    }

    .royal-calendar {
        position: relative !important;

        inset: auto !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        margin: auto;
    }
}