.dual-calendar {
    position: relative;
    display: grid;
    gap: .45rem;
    min-width: 0;
}

.dual-calendar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.dual-calendar-switcher {
    display: inline-flex;
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    padding: .18rem;
    border: 1px solid var(--ed-separator-soft);
    border-radius: var(--ed-radius-md);
    background: var(--ed-surface-sunken);
}

.dual-calendar-mode-button {
    min-height: 2rem;
    padding: .28rem .72rem;
    border: 0;
    border-radius: var(--ed-radius-sm);
    color: var(--ed-text-secondary);
    background: transparent;
    font-size: var(--ed-text-subhead);
    font-weight: var(--ed-weight-semibold);
    line-height: 1.3;
    transition: background-color var(--ed-duration) var(--ed-ease),
                color var(--ed-duration) var(--ed-ease),
                box-shadow var(--ed-duration) var(--ed-ease);
}

.dual-calendar-mode-button.is-active {
    color: var(--ed-text);
    background: var(--ed-surface);
    box-shadow: var(--ed-shadow-raised);
}

.dual-calendar-field-shell {
    position: relative;
    flex: 1 1 8rem;
    min-width: 8rem;
}

.dual-calendar-native.is-concealed {
    position: absolute !important;
    inset: 0 auto auto 0;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
}

.dual-calendar-persian-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    min-height: calc(2.25rem + 2px);
    text-align: start;
    color: var(--ed-text);
    background: var(--ed-surface);
}

.dual-calendar-persian-trigger[hidden] {
    display: none !important;
}

.dual-calendar-persian-value {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

.dual-calendar-glyph {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--ed-radius-sm);
    color: var(--ed-accent);
    background: var(--ed-accent-tint);
    font-size: var(--ed-text-subhead);
}

.dual-calendar-equivalent {
    min-height: 1.25rem;
    color: var(--ed-text-secondary);
    font-size: var(--ed-text-subhead);
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}

.dual-calendar-equivalent-value {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

.dual-calendar-popover {
    position: absolute;
    z-index: 1080;
    inset-block-start: calc(100% + .45rem);
    inset-inline-start: 0;
    width: min(21rem, calc(100vw - 2rem));
    padding: .85rem;
    border: 1px solid var(--ed-separator-soft);
    border-radius: var(--ed-radius-md);
    color: var(--ed-text);
    background: var(--ed-surface);
    box-shadow: var(--ed-shadow-overlay);
}

.dual-calendar-popover[hidden] {
    display: none !important;
}

.dual-calendar-popover.is-flipped {
    inset-block-start: auto;
    inset-block-end: calc(100% + .45rem);
}

.dual-calendar-header {
    display: grid;
    grid-template-columns: 2.35rem 1fr 2.35rem;
    align-items: center;
    gap: .4rem;
    margin-bottom: .65rem;
}

.dual-calendar-nav-button {
    min-height: 2.35rem;
    border: 1px solid var(--ed-separator-soft);
    border-radius: var(--ed-radius-sm);
    color: var(--ed-text);
    background: var(--ed-surface-sunken);
    font-size: var(--ed-text-title);
    line-height: 1;
}

.dual-calendar-month-label {
    text-align: center;
    font-weight: var(--ed-weight-semibold);
    line-height: 1.35;
}

.dual-calendar-weekdays,
.dual-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .25rem;
}

.dual-calendar-weekdays {
    margin-bottom: .28rem;
}

.dual-calendar-weekday {
    display: grid;
    min-height: 1.7rem;
    place-items: center;
    color: var(--ed-text-secondary);
    font-size: var(--ed-text-caption);
    font-weight: var(--ed-weight-semibold);
}

.dual-calendar-day {
    min-width: 0;
    min-height: 2.35rem;
    padding: .15rem;
    border: 1px solid transparent;
    border-radius: var(--ed-radius-sm);
    color: var(--ed-text);
    background: transparent;
    font-size: var(--ed-text-subhead);
    font-variant-numeric: tabular-nums;
}

.dual-calendar-day:hover {
    border-color: var(--ed-accent-ring);
    background: var(--ed-accent-tint);
}

.dual-calendar-day.is-today {
    border-color: var(--ed-accent);
}

.dual-calendar-day.is-selected {
    color: var(--ed-text-on-accent);
    border-color: var(--ed-accent);
    background: var(--ed-accent);
}

.dual-calendar-day.is-empty {
    visibility: hidden;
}

.dual-calendar-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem;
    margin-top: .7rem;
    padding-top: .65rem;
    border-top: 1px solid var(--ed-separator-soft);
}

.dual-calendar-footer-button {
    min-height: 2.1rem;
    padding: .3rem .68rem;
    border: 1px solid var(--ed-separator-soft);
    border-radius: var(--ed-radius-sm);
    color: var(--ed-text);
    background: var(--ed-surface-sunken);
    font-size: var(--ed-text-subhead);
    font-weight: var(--ed-weight-semibold);
}

[dir="rtl"] .dual-calendar-popover {
    direction: rtl;
}

[dir="rtl"] .dual-calendar-native.is-concealed {
    inset: 0 0 auto auto;
}

@media (max-width: 575.98px) {
    .dual-calendar-popover {
        position: fixed;
        inset: auto 1rem 1rem 1rem;
        width: auto;
        max-height: calc(100vh - 2rem);
        overflow: auto;
    }

    .dual-calendar-day {
        min-height: 2.65rem;
    }
}