/* Shared LUMA date, date-time, month, and time picker. */
.luma-picker-field {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.luma-picker-field > .luma-picker__input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-inline-end: 52px;
    direction: ltr;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.luma-picker-field.is-disabled > .luma-picker__input {
    cursor: not-allowed;
}

/* Date values remain left-to-right, but Arabic layouts place the calendar
   action on the physical left. Reserve space on that side so the trigger
   cannot cover the year or the YYYY portion of the placeholder. */
[dir="rtl"] .luma-picker-field > .luma-picker__input {
    padding-right: 14px !important;
    padding-left: 52px !important;
    text-align: right !important;
}

.luma-picker-field__trigger {
    position: absolute;
    top: 50%;
    inset-inline-end: 7px;
    z-index: 2;
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 9px;
    outline: 0;
    color: #7444c7;
    background: #eee7fa;
    font-size: 15px;
    cursor: pointer;
    transform: translateY(-50%);
}

.luma-picker-field__trigger:hover,
.luma-picker-field__trigger:focus-visible,
.luma-picker-field.is-open .luma-picker-field__trigger {
    color: #fff;
    background: #7444c7;
    box-shadow: 0 0 0 3px rgba(116, 68, 199, .14);
}

.luma-picker-field__trigger:disabled {
    color: #aaa2b2;
    background: #f0edf3;
    cursor: not-allowed;
}

.luma-picker-field.has-error > .luma-picker__input,
.luma-picker-field > .luma-picker__input.is-invalid {
    border-color: #d94d67 !important;
    box-shadow: 0 0 0 3px rgba(217, 77, 103, .1) !important;
}

.luma-picker {
    position: fixed;
    z-index: 4250;
    width: 390px;
    max-width: calc(100vw - 32px);
    color: #30203f;
    opacity: 0;
    transform: translateY(-5px) scale(.985);
    transform-origin: top center;
    transition: opacity .16s ease, transform .16s ease;
}

.luma-picker[hidden] {
    display: none !important;
}

.luma-picker.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.luma-picker.is-above {
    transform-origin: bottom center;
}

.luma-picker__panel {
    width: 100%;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #ded3e9;
    border-radius: 17px;
    background: rgba(255, 255, 255, .99);
    box-shadow: 0 22px 64px rgba(45, 26, 64, .22);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.luma-picker__mobile-head {
    display: none;
}

.luma-picker__body {
    padding: 14px;
}

.luma-picker__nav {
    display: grid;
    min-height: 44px;
    align-items: center;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 8px;
    margin-bottom: 7px;
    direction: ltr;
}

.luma-picker__nav-button {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 10px;
    outline: 0;
    color: #7040c7;
    background: #f1ebfa;
    font: inherit;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.luma-picker__nav-button:hover,
.luma-picker__nav-button:focus-visible {
    color: #fff;
    background: #7040c7;
}

.luma-picker__heading {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

[dir="rtl"] .luma-picker__heading {
    direction: rtl;
}

.luma-picker__heading button {
    min-height: 34px;
    padding: 6px 8px;
    border: 0;
    border-radius: 9px;
    outline: 0;
    color: #30203f;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.luma-picker__heading button:hover,
.luma-picker__heading button:focus-visible {
    color: #6534b6;
    background: #f2ecfb;
}

.luma-picker__weekdays,
.luma-picker__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.luma-picker__weekdays span {
    padding: 8px 1px;
    color: #82778c;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
}

.luma-picker__days {
    gap: 3px;
}

.luma-picker__day,
.luma-picker__day-spacer {
    min-width: 0;
    aspect-ratio: 1;
}

.luma-picker__day,
.luma-picker__month,
.luma-picker__year,
.luma-picker__time-list button {
    border: 0;
    border-radius: 9px;
    outline: 0;
    color: #40314e;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.luma-picker__day:hover:not(:disabled),
.luma-picker__day:focus-visible,
.luma-picker__month:hover:not(:disabled),
.luma-picker__month:focus-visible,
.luma-picker__year:hover:not(:disabled),
.luma-picker__year:focus-visible,
.luma-picker__time-list button:hover:not(:disabled),
.luma-picker__time-list button:focus-visible {
    color: #6534b6;
    background: #f2ecfb;
}

.luma-picker__day.is-today {
    box-shadow: inset 0 0 0 1px #cdbbe7;
}

.luma-picker__day[aria-selected="true"],
.luma-picker__month[aria-selected="true"],
.luma-picker__year[aria-selected="true"],
.luma-picker__time-list button[aria-selected="true"] {
    color: #fff;
    background: linear-gradient(135deg, #7040c7, #8b50d5);
    box-shadow: 0 6px 16px rgba(104, 55, 190, .2);
}

.luma-picker__day:disabled,
.luma-picker__month:disabled,
.luma-picker__year:disabled,
.luma-picker__time-list button:disabled {
    color: #c4bdca;
    background: #f8f6f9;
    cursor: not-allowed;
}

.luma-picker__months,
.luma-picker__years {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.luma-picker__month,
.luma-picker__year {
    min-height: 48px;
    padding: 8px 5px;
}

.luma-picker__time {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee8f4;
}

.luma-picker--time .luma-picker__time {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.luma-picker__time > div {
    min-width: 0;
}

.luma-picker__time strong {
    display: block;
    margin-bottom: 6px;
    color: #75687f;
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
}

.luma-picker__time-separator {
    color: #7040c7;
    font-size: 22px;
    font-weight: 900;
    text-align: center;
}

.luma-picker__time-list {
    display: grid;
    max-height: 160px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    overflow-y: auto;
    border: 1px solid #e6deed;
    border-radius: 11px;
    background: #faf8fc;
    overscroll-behavior: contain;
}

.luma-picker__time-list button {
    min-height: 34px;
}

.luma-picker__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    padding: 10px 14px 14px;
    border-top: 1px solid #eee8f4;
}

.luma-picker__action {
    min-height: 36px;
    padding: 7px 12px;
    border: 0;
    border-radius: 9px;
    outline: 0;
    color: #6534b6;
    background: #f2ecfb;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.luma-picker__action:hover,
.luma-picker__action:focus-visible {
    box-shadow: 0 0 0 3px rgba(113, 66, 202, .12);
}

.luma-picker__action:disabled {
    color: #aaa2b2;
    background: #f0edf3;
    box-shadow: none;
    cursor: not-allowed;
}

.luma-picker__action--clear {
    margin-inline-end: auto;
    color: #776b82;
    background: transparent;
}

.luma-picker__action--apply {
    color: #fff;
    background: linear-gradient(135deg, #7040c7, #8b50d5);
}

.luma-picker__backdrop {
    position: fixed;
    z-index: 4240;
    inset: 0;
    display: none;
    background: rgba(31, 18, 46, .42);
    backdrop-filter: blur(3px);
}

.luma-picker__backdrop[hidden] {
    display: none !important;
}

@media (max-width: 640px) {
    body.luma-picker-is-open {
        overflow: hidden !important;
    }

    .luma-picker-field > .luma-picker__input {
        min-height: 48px;
        font-size: 16px;
    }

    .luma-picker-field__trigger,
    .luma-picker__nav-button,
    .luma-picker__close {
        width: 44px;
        height: 44px;
    }

    .luma-picker__heading button,
    .luma-picker__time-list button,
    .luma-picker__action {
        min-height: 44px;
    }

    .luma-picker__backdrop:not([hidden]) {
        display: block;
    }

    .luma-picker {
        top: auto !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        left: 10px !important;
        width: auto !important;
        max-width: none;
        transform: translateY(6px) scale(.99);
        transform-origin: bottom center;
    }

    .luma-picker.is-visible {
        transform: translateY(0) scale(1);
    }

    .luma-picker__panel {
        max-height: min(88vh, 690px);
        max-height: min(88dvh, 690px);
        border-radius: 20px;
    }

    .luma-picker__mobile-head {
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 14px 4px;
    }

    .luma-picker__mobile-title {
        overflow: hidden;
        font-size: 14px;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .luma-picker__close {
        display: grid;
        width: 34px;
        height: 34px;
        padding: 0;
        place-items: center;
        border: 0;
        border-radius: 10px;
        color: #6540a6;
        background: #f1ebfa;
        font: inherit;
        font-size: 20px;
        cursor: pointer;
    }

    .luma-picker__body {
        padding: 10px 14px 14px;
    }

    .luma-picker__day {
        min-height: 38px;
        aspect-ratio: auto;
        font-size: 13px;
    }

    .luma-picker__day-spacer {
        min-height: 38px;
        aspect-ratio: auto;
    }

    .luma-picker__month,
    .luma-picker__year {
        min-height: 52px;
        font-size: 13px;
    }

    .luma-picker__actions {
        position: sticky;
        bottom: 0;
        background: #fff;
    }
}

@media (max-width: 360px) {
    .luma-picker__body {
        padding-inline: 10px;
    }

    .luma-picker__weekdays span {
        font-size: 9px;
    }

    .luma-picker__day,
    .luma-picker__day-spacer {
        min-height: 34px;
    }

    .luma-picker__actions {
        gap: 5px;
        padding-inline: 10px;
    }

    .luma-picker__action {
        padding-inline: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .luma-picker,
    .luma-picker-field__trigger {
        transition: none !important;
    }
}