.date-picker-calendar {
    --drp-surface: var(--chakra-colors-surface);
    --drp-surface-raised: var(--chakra-colors-surface-raised);
    --drp-surface-subtle: var(--chakra-colors-surface-subtle);
    --drp-surface-hover: var(--chakra-colors-surface-hover);
    --drp-surface-activity: var(--chakra-colors-surface-activity);

    --drp-text-primary: var(--chakra-colors-text-primary);
    --drp-text-secondary: var(--chakra-colors-text-secondary);
    --drp-text-muted: var(--chakra-colors-text-muted);
    --drp-text-subtle: var(--chakra-colors-text-subtle);
    --drp-border-subtle: var(--chakra-colors-border-subtle);
    --drp-border-default: var(--chakra-colors-border-default);

    --drp-brand: var(--chakra-colors-brand-primary);
    --drp-brand-hover: var(--chakra-colors-brand-primary-hover);
    --drp-brand-accent-soft: var(--chakra-colors-brand-accent-soft);

    --drp-accent: var(--chakra-colors-brand-accent);
    --drp-accent-soft: var(--chakra-colors-brand-accent-soft);

    background: var(--drp-surface);
    color: var(--drp-text-primary);
    border: 1px solid var(--drp-border-default);
    border-radius: 14px;
    overflow: hidden;
    font-family: inherit;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.date-picker-calendar .rdrCalendarWrapper {
    background: var(--drp-surface);
    color: var(--drp-text-primary);
    font-family: inherit;
}

.date-picker-calendar .rdrMonthAndYearWrapper {
    background: var(--drp-surface);
    padding: 12px 12px 8px;
}

.date-picker-calendar .rdrMonthAndYearPickers {
    color: var(--drp-text-primary);
    font-weight: 700;
}

.date-picker-calendar .rdrMonthPicker,
.date-picker-calendar .rdrYearPicker {
    color: var(--drp-text-primary);
}

.date-picker-calendar .rdrMonthPicker select,
.date-picker-calendar .rdrYearPicker select {
    color: var(--drp-text-primary);
    background: var(--drp-brand-accent-soft);
    border: none;
    outline: none;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}

.date-picker-calendar .rdrMonthPicker select:hover,
.date-picker-calendar .rdrYearPicker select:hover {
    background: var(--drp-brand-accent-soft);
}

.date-picker-calendar .rdrNextPrevButton {
    background: transparent;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.date-picker-calendar .rdrNextPrevButton:hover {
    background: var(--drp-surface-hover);
}

.date-picker-calendar .rdrNextButton,
.date-picker-calendar .rdrPrevButton {
    color: var(--drp-text-secondary);
}

.date-picker-calendar .rdrWeekDays {
    background: var(--drp-surface-subtle);
    border-top: 1px solid var(--drp-border-subtle);
    border-bottom: 1px solid var(--drp-border-subtle);
}

.date-picker-calendar .rdrWeekDay {
    color: var(--drp-text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.date-picker-calendar .rdrDays {
    background: var(--drp-surface);
}

.date-picker-calendar .rdrDay {
    color: var(--drp-text-secondary);
}

.date-picker-calendar .rdrDayNumber span {
    color: var(--drp-text-secondary);
    font-weight: 500;
    transition: background-color 0.15s ease,
    color 0.15s ease;
}


.date-picker-calendar .rdrDayToday .rdrDayNumber span {
    font-weight: 700;
}

.date-picker-calendar .rdrDayToday .rdrDayNumber span::after {
    background: var(--drp-accent);
}


.date-picker-calendar .rdrDaySelected .rdrDayNumber span {
    background: var(--drp-brand);
    color: #ffffff;
    font-weight: 700;
}

.date-picker-calendar .rdrDaySelected:hover .rdrDayNumber span {
    background: var(--drp-brand-hover);
    color: #ffffff;
}


.date-picker-calendar .rdrInRange {
    background: var(--drp-accent);
}

.date-picker-calendar .rdrInRange .rdrDayNumber span {
    color: var(--drp-brand);
    font-weight: 600;
}

.date-picker-calendar .rdrStartEdge {
    background: var(--drp-brand);
}

.date-picker-calendar .rdrStartEdge .rdrDayNumber span {
    color: #ffffff;
    font-weight: 700;
}

.date-picker-calendar .rdrEndEdge {
    background: var(--drp-brand);
}

.date-picker-calendar .rdrEndEdge .rdrDayNumber span {
    color: #ffffff;
    font-weight: 700;
}

.date-picker-calendar .rdrDayStartPreview,
.date-picker-calendar .rdrDayInPreview,
.date-picker-calendar .rdrDayEndPreview {
    border-color: var(--drp-brand);
}

.date-picker-calendar .rdrDayDisabled {
    background: transparent;
}

.date-picker-calendar .rdrDayDisabled .rdrDayNumber span {
    color: var(--drp-text-subtle);
    opacity: 0.45;
}

.date-picker-calendar .rdrDayPassive .rdrDayNumber span {
    color: var(--drp-text-subtle);
    opacity: 0.45;
}

.date-picker-calendar .rdrDateDisplayWrapper {
    background: var(--drp-surface-subtle);
}

.date-picker-calendar .rdrDateDisplayItem {
    background: var(--drp-surface);
    border: 1px solid var(--drp-border-default);
    color: var(--drp-text-primary);
}

.date-picker-calendar .rdrDateDisplayItem input {
    background: transparent;
    color: var(--drp-text-primary);
}

.date-picker-calendar .rdrMonth {
    background: var(--drp-surface);
}

.date-picker-calendar .rdrMonths {
    background: var(--drp-surface);
}

.date-picker-calendar .rdrMonthName {
    color: var(--drp-text-primary);
}

.date-picker-calendar .rdrDay:focus {
    outline: none;
}

.date-picker-calendar .rdrDay:focus-visible
.rdrDayNumber span {
    box-shadow:
            0 0 0 2px var(--drp-surface),
            0 0 0 4px var(--drp-brand);
}

.date-picker-calendar .rdrDayHovered{
    background: none;
}