.lio-advanced-calendar {
    position: relative;
    z-index: 300;
    color: var(--text);
    font-family: var(--font);
}

.lio-advanced-calendar,
.lio-advanced-calendar *,
.lio-advanced-calendar *::before,
.lio-advanced-calendar *::after {
    box-sizing: border-box;
}

.lio-advanced-calendar__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: calc(var(--control-h-md) + var(--space-xxs));
    padding: var(--space-xs2);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--text);
    font: var(--body-l-prominent);
    cursor: pointer;
}

.lio-advanced-calendar__trigger:hover {
    background: var(--surface-hover);
}

.lio-advanced-calendar__trigger-icon {
    display: inline-grid;
    inline-size: var(--size-xl);
    block-size: var(--size-xl);
    flex: none;
    place-items: center;
    color: var(--icon);
}

.lio-advanced-calendar__trigger-icon svg {
    inline-size: 100%;
    block-size: 100%;
}

.lio-advanced-calendar__trigger-preset {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--size-2xl) + var(--space-xxs));
    padding-inline: var(--space-sm);
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font: var(--body-m-prominent);
    white-space: nowrap;
}

.lio-advanced-calendar__trigger-range {
    padding-inline: var(--space-xs2);
    font: var(--body-l-prominent);
    white-space: nowrap;
}

.lio-advanced-calendar__trigger-chevron {
    display: inline-grid;
    place-items: center;
    width: var(--size-xl);
    height: var(--size-xl);
    margin-inline: var(--space-xs2);
    color: var(--icon);
}

.lio-advanced-calendar__trigger-chevron svg {
    width: 100%;
    height: 100%;
    transition: transform 160ms ease;
}

.lio-advanced-calendar__trigger[aria-expanded="true"] .lio-advanced-calendar__trigger-chevron svg {
    transform: rotate(180deg);
}

.lio-advanced-calendar__popover {
    position: absolute;
    z-index: 320;
    inset-block-start: calc(100% + var(--space-md));
    inset-inline-end: var(--space-zero);
    display: grid;
    grid-template-columns: calc((var(--size-6xl) * 4) + var(--space-lg)) minmax(0, 1fr);
    width: min(calc((var(--size-6xl) * 12) + var(--space-xl2)), calc(100vw - var(--space-xl4)));
    height: min(calc((var(--size-6xl) * 11) + var(--space-xs2)), calc(100dvh - (var(--space-xl6) * 2)));
    max-height: min(calc((var(--size-6xl) * 11) + var(--space-xs2)), calc(100dvh - (var(--space-xl6) * 2)));
    overflow: hidden;
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-2xl);
    background: var(--surface);
    box-shadow: var(--shadow-xl);
}

.lio-advanced-calendar__popover[hidden] {
    display: none;
}

.lio-advanced-calendar__presets {
    display: grid;
    align-content: start;
    padding-block: var(--space-xs);
    overflow-y: auto;
    border-inline-end: var(--border-w) solid var(--border);
    background: var(--surface);
}

.lio-advanced-calendar__preset {
    display: flex;
    align-items: center;
    min-height: var(--control-h-md);
    padding-inline: var(--space-lg);
    border: var(--space-zero);
    background: transparent;
    color: var(--text-secondary);
    font: var(--body-l);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
}

.lio-advanced-calendar__preset:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.lio-advanced-calendar__preset.is-active {
    background: var(--brand-surface);
    color: var(--text-brand-secondary);
    font: var(--body-l-prominent);
    box-shadow: inset var(--size-xs) var(--space-zero) var(--space-zero) var(--brand-solid);
}

.lio-advanced-calendar__panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--space-sm);
    min-width: var(--space-zero);
    min-height: var(--space-zero);
    padding: var(--space-md);
    overflow: hidden;
}

.lio-advanced-calendar__inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-base);
}

.lio-advanced-calendar__field {
    min-width: var(--space-zero);
}

.lio-advanced-calendar__months-host {
    min-height: var(--space-zero);
    overflow: auto;
    overscroll-behavior: contain;
}

.lio-advanced-calendar__months {
    display: grid;
    gap: var(--space-md);
}

.lio-advanced-calendar__month {
    display: grid;
    gap: var(--space-xs3);
}

.lio-advanced-calendar__month-title {
    margin: var(--space-zero);
    color: var(--text-secondary);
    font: var(--heading-m);
    letter-spacing: var(--space-px);
    text-transform: uppercase;
}

.lio-advanced-calendar__weekdays,
.lio-advanced-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-xs2);
}

.lio-advanced-calendar__weekdays span {
    display: grid;
    place-items: center;
    min-height: var(--size-2xl);
    color: var(--text-tertiary);
    font: var(--body-m-prominent);
}

.lio-advanced-calendar__day {
    min-width: var(--space-zero);
    min-height: calc(var(--space-xl) + var(--space-xxs));
    padding: var(--space-zero);
    border: var(--space-zero);
    border-radius: var(--radius-xl);
    background: transparent;
    color: var(--text);
    font: var(--body-m);
    cursor: pointer;
}

.lio-advanced-calendar__day:hover:not(:disabled):not(.is-selected) {
    background: var(--surface-hover);
}

.lio-advanced-calendar__day.is-in-range {
    background: var(--brand-surface);
}

.lio-advanced-calendar__day.is-selected {
    position: relative;
    z-index: 1;
    border-radius: var(--radius-full);
    background: var(--brand-solid);
    color: var(--text-inverse);
    font: var(--body-m-prominent);
    outline: var(--border-w-2) solid var(--brand-solid);
    outline-offset: var(--border-w-2);
}

.lio-advanced-calendar__day.is-selected:hover:not(:disabled) {
    background: var(--brand-solid-hover);
    color: var(--text-inverse);
}

.lio-advanced-calendar__day.is-muted {
    color: var(--text-tertiary);
}

.lio-advanced-calendar__day:disabled {
    background: transparent;
    color: var(--text-disabled);
    cursor: not-allowed;
}

.lio-advanced-calendar__day.is-empty {
    visibility: hidden;
}

.lio-advanced-calendar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-xs);
    padding-block-start: var(--space-base);
    border-block-start: var(--border-w) solid var(--border);
}

.lio-advanced-calendar__trigger:focus-visible,
.lio-advanced-calendar__preset:focus-visible,
.lio-advanced-calendar__day:focus-visible {
    position: relative;
    z-index: 2;
    outline: none;
    box-shadow: var(--ring-brand);
}

@media (max-width: 900px) {
    .lio-advanced-calendar {
        width: 100%;
    }

    .lio-advanced-calendar__trigger {
        width: 100%;
        justify-content: space-between;
    }

    .lio-advanced-calendar__popover {
        inset-inline: var(--space-zero);
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        width: 100%;
        max-height: calc(100dvh - (var(--space-xl6) * 2));
    }

    .lio-advanced-calendar__presets {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        overflow-y: hidden;
        border-inline-end: var(--space-zero);
        border-block-end: var(--border-w) solid var(--border);
    }

    .lio-advanced-calendar__preset.is-active {
        box-shadow: inset var(--space-zero) calc(var(--size-xs) * -1) var(--space-zero) var(--brand-solid);
    }
}

@media (max-width: 600px) {
    .lio-advanced-calendar__trigger {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "preset chevron"
            "range chevron";
        gap: var(--space-xs2) var(--space-sm);
        border-radius: var(--radius-2xl);
    }

    .lio-advanced-calendar__trigger-preset {
        grid-area: preset;
        justify-self: start;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lio-advanced-calendar__trigger-range {
        grid-area: range;
        justify-self: start;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lio-advanced-calendar__trigger-chevron {
        grid-area: chevron;
    }

    .lio-advanced-calendar__panel {
        gap: var(--space-base);
        padding: var(--space-base);
    }

    .lio-advanced-calendar__inputs {
        grid-template-columns: minmax(0, 1fr);
    }

    .lio-advanced-calendar__day {
        min-height: var(--control-h-sm);
        font: var(--body-m);
    }

    .lio-advanced-calendar__actions .lio-btn {
        flex: 1 1 var(--space-zero);
    }
}