.popup-window {
    border-radius: 4px;
    padding: 0;
}

.popup-window.popup-window-with-titlebar {
    box-shadow: 0px -2px 9.8px 0px #127a8d29;
    border-radius: 4px;
    overflow: hidden;
}

.popup-window.popup-window-with-titlebar .popup-window-content {
    background: #fff;
    padding: 0;
}

.custom-calendar-input {
    backdrop-filter: blur(24px);
    box-sizing: border-box;
    box-shadow: 0px -2px 9.8px 0px #127a8d29;
    border: 1px solid;
    border: none;
    border-radius: 4px;
    background: linear-gradient(
        146.12deg,
        rgba(255, 255, 255, 0.7744) 54.24%,
        rgba(255, 255, 255, 0.4224) 97.96%
    );
    padding: 14px 8px;
    padding-right: 32px;
    width: 100%;
    max-width: 130px;
    font-family: "Manrope", sans-serif;
}

/* Calendar icon inside input */
.custom-calendar-icon {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 1;
    margin: 0;
    padding: 0;
    pointer-events: all;
}

/* Main calendar container */
.custom-calendar {
    display: flex;
    flex-direction: column;
    width: 270px;
}

/* Calendar header */
.custom-calendar-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    background-color: #127a8d;
    padding: 10px 20px;
    width: 270px;
}

.custom-calendar-left-arrow,
.custom-calendar-right-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.2s;
    cursor: pointer;
    width: 24px;
    height: 24px;
    text-decoration: none;
}

.custom-calendar-left-arrow-disabled,
.custom-calendar-right-arrow-disabled {
    opacity: 0.3 !important;
    cursor: not-allowed;
    pointer-events: none;
}

.custom-calendar-left-arrow svg,
.custom-calendar-right-arrow svg {
    display: block;
    width: 24px;
    height: 24px;
}

.custom-calendar-left-arrow svg path,
.custom-calendar-right-arrow svg path {
    fill: #e2eff4;
    transition: fill 0.2s;
}

.custom-calendar-left-arrow:hover svg path,
.custom-calendar-right-arrow:hover svg path {
    fill: #ffffff;
}

.custom-calendar-header-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.custom-calendar-top-month,
.custom-calendar-top-year {
    cursor: pointer;
    color: #fff;
    font-weight: 400;
    font-size: clamp(1rem, 0.9423rem + 0.2564vw, 1.25rem);
    line-height: 100%;
    font-family: "Manrope", sans-serif;
    text-align: center;
    text-decoration: none;
}

/* Weekday names */
.custom-calendar-name-day-wrap {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 16px 18px 0 18px;
}

.custom-calendar-name-day {
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    font-family: "Manrope", sans-serif;
    text-align: center;
}

/* Будние дни */
.custom-calendar-name-day-wrap .custom-calendar-name-day:nth-child(1),
.custom-calendar-name-day-wrap .custom-calendar-name-day:nth-child(2),
.custom-calendar-name-day-wrap .custom-calendar-name-day:nth-child(3),
.custom-calendar-name-day-wrap .custom-calendar-name-day:nth-child(4),
.custom-calendar-name-day-wrap .custom-calendar-name-day:nth-child(5) {
    color: #262626;
}

/* Выходные дни */
.custom-calendar-name-day-wrap .custom-calendar-name-day:nth-child(6),
.custom-calendar-name-day-wrap .custom-calendar-name-day:nth-child(7) {
    color: #f55454;
}

/* Calendar grid for dates */
.custom-calendar-cell-block {
    position: relative;
    padding: 18px;
}

.custom-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    justify-items: center;
    gap: 0;
}

.custom-calendar-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    border: 2px solid transparent;
    width: 26px;
    height: 26px;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    font-family: "Manrope", sans-serif;
    text-align: center;
    text-decoration: none;
}

/* Прошедшие будние даты (кликабельные) */
.custom-calendar-cell.custom-calendar-past:not(.custom-calendar-weekend):not(
        .custom-calendar-date-hidden
    ) {
    color: #262626;
}

/* Прошедшие выходные даты (кликабельные) */
.custom-calendar-cell.custom-calendar-past.custom-calendar-weekend:not(
        .custom-calendar-date-hidden
    ) {
    color: #f55454;
}

/* Будущие будние даты */
.custom-calendar-cell.custom-calendar-future:not(.custom-calendar-weekend):not(
        .custom-calendar-date-hidden
    ) {
    cursor: not-allowed;
    pointer-events: none;
    color: #6c6c6c;
}

/* Будущие выходные даты */
.custom-calendar-cell.custom-calendar-future.custom-calendar-weekend:not(
        .custom-calendar-date-hidden
    ) {
    cursor: not-allowed;
    pointer-events: none;
    color: #d8a9a9;
}

/* Будущие даты из других месяцев (заблокированные) */
.custom-calendar-cell.custom-calendar-future.custom-calendar-date-hidden {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    color: #6c6c6c;
}

/* Текущая неделя и далее - будние */
.custom-calendar-cell:not(.custom-calendar-past):not(.custom-calendar-future):not(
        .custom-calendar-weekend
    ):not(.custom-calendar-date-hidden) {
    color: #262626;
}

/* Текущая неделя и далее - выходные */
.custom-calendar-cell:not(.custom-calendar-past):not(.custom-calendar-future).custom-calendar-weekend:not(
        .custom-calendar-date-hidden
    ) {
    color: #f55454;
}

.custom-calendar-cell.custom-calendar-active {
    box-shadow: 0px -2px 9.8px 0px #127a8d29;
    border: 2px solid #127a8d;
    border-radius: 50%;
    background: linear-gradient(
        146.12deg,
        rgba(255, 255, 255, 0.7744) 54.24%,
        rgba(255, 255, 255, 0.4224) 97.96%
    );
    font-weight: bold;
}

.custom-calendar-cell.custom-calendar-date-hidden {
    opacity: 0.5;
    color: #6c6c6c;
}

/* Calendar layer */
.custom-calendar-layer {
    position: relative;
}

/* Time controls */
.custom-calendar-set-time-wrap {
    display: flex;
    flex-direction: column;
}

.custom-calendar-set-time {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
}

.custom-calendar-set-time-opened .custom-calendar-form-block {
    display: block;
}

.custom-calendar-form-block {
    display: none;
}

.custom-calendar-form-text {
    display: block;
}

.custom-calendar-form {
    display: flex;
    align-items: center;
}

.custom-calendar-form-input {
    border: 1px solid;
    text-align: center;
}

.custom-calendar-form-separator {
    display: inline-block;
}

.custom-calendar-form-arrow-l,
.custom-calendar-form-arrow-r {
    display: flex;
    flex-direction: column;
}

.custom-calendar-form-arrow-top,
.custom-calendar-form-arrow-bottom {
    display: block;
    cursor: pointer;
}

.custom-calendar-AM-PM-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-calendar-AM-PM-text {
    cursor: pointer;
}

.custom-calendar-form-close {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
}

/* Buttons */
.custom-calendar-button-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.custom-calendar-button {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.custom-calendar-buttons-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.custom-calendar-button-left,
.custom-calendar-button-right {
    display: none;
}

.custom-calendar-button-text {
    display: block;
}

/* Month and Year popups */
.custom-calendar-month-popup,
.custom-calendar-year-popup {
    display: block;
}

.custom-calendar-month-title,
.custom-calendar-year-title {
    font-weight: bold;
}

.custom-calendar-month-content,
.custom-calendar-year-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.custom-calendar-month,
.custom-calendar-year-number {
    cursor: pointer;
    text-align: center;
}

.custom-calendar-month-active,
.custom-calendar-year-active {
    font-weight: bold;
}

.custom-calendar-year-input {
    border: 1px solid;
    width: 100%;
    text-align: center;
}

/* Icon styles */
.custom-calendar-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
}

.custom-calendar-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.custom-calendar-icon .custom-calendar-icon-path {
    fill: #127a8d;
    transition: fill 0.2s;
}

.custom-calendar-icon:hover .custom-calendar-icon-path,
.custom-calendar-icon-hover .custom-calendar-icon-path {
    fill: #82aeb7;
}

/* Disabled state */
.custom-calendar-time-disabled .custom-calendar-set-time-wrap {
    opacity: 0.5;
    pointer-events: none;
}

.events-filter__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.events-filter__field {
    width: fit-content;
}

/* Month popup styles */
.custom-calendar-month-popup {
    box-shadow: 0px -2px 9.8px 0px #127a8d29;
    border: 1px solid #82aeb7;
    border-radius: 4px;
    background: #fff;
    min-width: 200px;
    overflow: hidden;
}

.custom-calendar-month-title {
    position: relative;
    background-color: #82aeb7;
    padding: 10px 20px;
    color: #fff;
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    font-family: "Manrope", sans-serif;
    text-align: center;
}

.custom-calendar-month-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px;
}

.custom-calendar-month {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
    cursor: pointer;
    border-radius: 4px;
    padding: 8px 12px;
    color: #262626;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    font-family: "Manrope", sans-serif;
    text-align: center;
}

.custom-calendar-month:hover {
    background: rgba(18, 122, 141, 0.1);
}

.custom-calendar-month-active {
    box-shadow: 0px -2px 9.8px 0px #127a8d29;
    border: 2px solid #127a8d;
    background: linear-gradient(
        146.12deg,
        rgba(255, 255, 255, 0.7744) 54.24%,
        rgba(255, 255, 255, 0.4224) 97.96%
    );
    font-weight: 700;
}

.custom-calendar-month-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Year popup styles */
.custom-calendar-year-popup {
    box-shadow: 0px -2px 9.8px 0px #127a8d29;
    border: 1px solid #82aeb7;
    border-radius: 4px;
    background: #fff;
    min-width: 200px;
    overflow: hidden;
}

.custom-calendar-year-title {
    position: relative;
    background-color: #82aeb7;
    padding: 10px 20px;
    color: #fff;
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    font-family: "Manrope", sans-serif;
    text-align: center;
}

.custom-calendar-year-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px;
}

.custom-calendar-year-number {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
    cursor: pointer;
    border-radius: 4px;
    padding: 8px 12px;
    color: #262626;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    font-family: "Manrope", sans-serif;
    text-align: center;
}

.custom-calendar-year-number:hover {
    background: rgba(18, 122, 141, 0.1);
}

.custom-calendar-year-active {
    box-shadow: 0px -2px 9.8px 0px #127a8d29;
    border: 2px solid #127a8d;
    background: linear-gradient(
        146.12deg,
        rgba(255, 255, 255, 0.7744) 54.24%,
        rgba(255, 255, 255, 0.4224) 97.96%
    );
    font-weight: 700;
}

.custom-calendar-year-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.custom-calendar-year-input {
    box-sizing: border-box;
    margin: 8px 16px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    width: 88%;
    color: #262626;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    font-family: "Manrope", sans-serif;
    text-align: center;
}

.custom-calendar-year-input:focus {
    outline: none;
    box-shadow: 0px -2px 9.8px 0px #127a8d29;
    border-color: #127a8d;
}

/* Центрирование попапов месяца/года под заголовком на узких экранах
   (аналогично поведению в custom_calendar_without_input) */
@media (max-width: 767.9px) {
    .popup-window.custom-calendar-popup {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        max-width: calc(100vw - 16px);
    }

    .custom-calendar-month-popup,
    .custom-calendar-year-popup {
        width: min(320px, calc(100vw - 16px));
    }
}

/* Popup close button */
.custom-calendar-popup-close {
    display: flex;
    position: absolute;
    top: 50%;
    right: 10px;
    justify-content: center;
    align-items: center;
    transform: translateY(-50%);
    transition: opacity 0.2s;
    cursor: pointer;
    width: 24px;
    height: 24px;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    user-select: none;
}

.custom-calendar-popup-close:hover {
    opacity: 0.7;
}

@media screen and (max-width: 767.9px) {
    .events-filter__container {
        width: 100%;
    }

    .custom-calendar-static-container {
        width: 100%;
    }

    .custom-calendar {
        width: 100%;
    }

    .custom-calendar-header {
        width: 100%;
    }

    .events-filter__field {
        width: 100%;
    }

    .custom-calendar-name-day-wrap,
    .custom-calendar-grid {
        gap: 10px 15px;
    }

    .custom-calendar-name-day,
    .custom-calendar-cell {
        font-size: 20px;
    }

    .custom-calendar-cell {
        width: 30px;
        height: 30px;
    }

    .custom-calendar-input {
        max-width: 100%;
    }
}