.custom-calendar {
    position: relative;
    min-width: 0;
}

.custom-calendar .custom-calendar__input {
    display: block;
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    padding: 12px 52px 12px 16px;
    border: 1px solid var(--cke-border, #c1cddb);
    border-radius: 14px;
    background: var(--cke-surface-strong, #fff);
    color: var(--cke-ink, #0f263b);
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    color-scheme: light;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.custom-calendar .custom-calendar__input:hover {
    border-color: var(--cke-brand, #004488);
    background: var(--semantic-surface-muted, #f8fafc);
}

.custom-calendar .custom-calendar__input:focus-visible {
    border-color: var(--cke-brand, #004488);
    outline: 3px solid var(--semantic-focus-40, #ffbf47);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--cke-brand, #004488);
}

.custom-calendar__icon {
    position: absolute;
    top: 50%;
    right: 16px;
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: translateY(-50%);
}

.custom-calendar__icon img {
    display: block;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(22%) sepia(18%) saturate(1035%) hue-rotate(172deg) brightness(87%);
}

.flatpickr-calendar {
    width: 320px;
    padding: 18px;
    border: 1px solid var(--cke-border, #c1cddb);
    border-radius: 16px;
    background: var(--cke-surface-strong, #fff);
    box-shadow: 0 10px 24px rgba(15, 38, 59, 0.16), 0 2px 5px rgba(15, 38, 59, 0.08);
    font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
}

.flatpickr-calendar:before,
.flatpickr-calendar:after {
    display: none;
}

.flatpickr-months {
    align-items: center;
    gap: 4px;
    padding: 2px 0 12px;
}

.flatpickr-months .flatpickr-month {
    height: 40px;
    color: var(--cke-ink, #0f263b);
}

.flatpickr-current-month {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    color: var(--cke-ink, #0f263b);
    font-size: 15px;
    font-weight: 600;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    height: 36px;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid var(--cke-border, #c1cddb);
    border-radius: 8px;
    background: var(--semantic-surface-muted, #f8fafc);
    color: var(--cke-ink, #0f263b);
    font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    width: 112px;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 28px;
    background-image: url("../images/figma/cke-home/arrow-down-cke.svg");
    background-position: right 9px center;
    background-repeat: no-repeat;
    background-size: 12px 7px;
    cursor: pointer;
}

.flatpickr-current-month input.cur-year {
    width: 66px;
    -moz-appearance: textfield;
}

.flatpickr-current-month input.cur-year::-webkit-inner-spin-button,
.flatpickr-current-month input.cur-year::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    position: static;
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
    color: var(--cke-brand, #004488);
    fill: var(--cke-brand, #004488);
}

.flatpickr-prev-month span,
.flatpickr-next-month span {
    display: block;
    color: var(--cke-brand, #004488);
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: var(--cke-surface-accent, #e4f1ff);
}

.flatpickr-prev-month:focus-visible,
.flatpickr-next-month:focus-visible,
.flatpickr-day:focus-visible,
.flatpickr-monthDropdown-months:focus-visible,
.flatpickr-current-month input.cur-year:focus-visible {
    outline: 3px solid var(--semantic-focus-40, #ffbf47);
    outline-offset: 2px;
}

.flatpickr-weekdays {
    height: 28px;
    background: transparent;
}

span.flatpickr-weekday {
    color: var(--cke-ink-soft, #37506e);
    font-size: 12px;
    font-weight: 700;
}

.flatpickr-days,
.dayContainer {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.flatpickr-day {
    height: 36px;
    max-width: none;
    margin: 2px 0;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--cke-ink, #0f263b);
    line-height: 34px;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    border-color: var(--semantic-border-info, #bfd7ff);
    background: var(--cke-surface-accent, #e4f1ff);
    color: var(--cke-brand, #004488);
}

.flatpickr-day.today {
    border-color: var(--cke-brand, #004488);
    color: var(--cke-brand, #004488);
    font-weight: 700;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    border-color: var(--cke-brand, #004488);
    background: var(--cke-brand, #004488);
    color: var(--text-inverse, #fff);
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--Base-Neutral-Neutral-40, #98a2b3);
}

@media (prefers-reduced-motion: reduce) {
    .custom-calendar .custom-calendar__input { transition: none; }
}

@media (max-width: 560px) {
    .flatpickr-calendar {
        width: min(320px, calc(100vw - 32px));
    }
}