:root {

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);

    --shadow-md: 0 4px 10px rgba(0,0,0,0.15);

}



.calendar2 * {

    box-sizing: border-box;

}





.calendar2 {

    max-width: 100%;

    margin: 0 auto;

    padding: 0 20px;

    font-size: 14px;

}



.calendar2-row {

    margin-bottom: 15px;

}





.calendar2-title {

    font-size: 22px;

    margin-bottom: 20px;

}



.calendar2-halls {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}



.calendar2-hall-box {

    border: 1px solid #ddd;

    padding: 10px 15px;

    cursor: pointer;

    border-radius: 4px;

    user-select: none;

    background: #fff;

    box-shadow: var(--shadow-sm);

    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;

}



.calendar2-hall-box:hover {

    box-shadow: var(--shadow-md);

}



.calendar2-hall-box input:checked + span,

.calendar2-hall-box.active {

    background: #f5f5f5;

    border-color: #999;

}



.calendar2-filters,

.calendar2-date-select {

    display: flex;

    gap: 10px;

}



.calendar2-filters select,

.calendar2-date-select select {

    flex: 1;

    padding: 8px;

    border-radius: 0 8px 0 8px;

    background: #fff;

    box-shadow: var(--shadow-sm);

}



.calendar2-days {

    display: flex;

    align-items: center;

    gap: 8px;

    overflow: hidden;

}



.calendar2-nav {

    background: #fff;

    border: 1px solid #ccc;

    padding: 6px 10px;

    cursor: pointer;

    border-radius: 0 8px 0 8px;

    flex: 0 0 auto;

    box-shadow: var(--shadow-sm);

    transition: transform 0.15s ease, box-shadow 0.2s ease;

}



.calendar2-nav:hover,

.calendar2-nav:focus {

    transform: scale(1.1);

    box-shadow: var(--shadow-md);

}



.calendar2-day-strip {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    scroll-behavior: smooth;
}



.calendar2-day-strip::-webkit-scrollbar {

    display: none;

}





.calendar2-day {

    width: 72px;

    height: 72px;

    border: 1px solid #ddd;

    border-radius: 8px;

    background: #fff;

    cursor: pointer;



    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;



    box-shadow: var(--shadow-sm);

    transition:

        background 0.25s ease,

        border-color 0.25s ease,

        transform 0.2s ease,

        box-shadow 0.2s ease;



    animation: calendarDayIn 0.35s ease both;

}



.calendar2-day .dow {

    font-size: 12px;

    text-transform: uppercase;

    color: #777;

}



.calendar2-day .dom {

    font-size: 20px;

    font-weight: 600;

}



.calendar2-day:not(.active):hover {

    background: #f5f5f5;

    border-color: #999;

    transform: scale(1.05);

    box-shadow: var(--shadow-md);

}



.calendar2-day.active {

    transform: scale(1.1);

    background: #333;

    border-color: #333;

    color: #fff;

    z-index: 2;

    box-shadow: var(--shadow-md);

    animation: none;

}



.calendar2-day.active .dow {

    color: #ccc;

}



@keyframes calendarDayIn {

    from {

        opacity: 0;

        transform: translateY(10px) scale(0.95);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}





.calendar2-divider {

    border: none;

    border-top: 1px solid #eee;

    margin: 15px 0;

}





.calendar2-schedule,

.calendar2-schedule-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

    overflow: visible;

}



.calendar2-schedule-row {

    display: flex;

    align-items: center;

    gap: 10px;



    background: #fff;

    padding: 10px 12px;

    border-radius: 0 10px 0 10px;

    box-shadow: var(--shadow-sm);



    opacity: 0;

    transform: translateY(12px);

    animation: scheduleRowIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;



    transition:

        transform 0.15s ease,

        box-shadow 0.2s ease;



    will-change: transform;

}



.calendar2-schedule-row:hover {

    transform: translateY(-1px) scale(1.05);

    box-shadow: var(--shadow-md);

    z-index: 3;

}





.calendar2-schedule-action {

    order: -1;

    flex: 0 0 auto;

}



.calendar2-add {

    border: 1px solid #ccc;

    background: #fff;

    padding: 6px 10px;

    cursor: pointer;

    border-radius: 0 8px 0 8px;

    font-size: 16px;

    line-height: 1;

    box-shadow: var(--shadow-sm);

    transition: background 0.2s, border-color 0.2s, transform 0.15s ease, box-shadow 0.2s;

}



.calendar2-add:hover,

.calendar2-add:focus {

    background: #f5f5f5;

    border-color: #999;

    transform: scale(1.1);

    box-shadow: var(--shadow-md);

}





.calendar2-schedule-time,

.calendar2-schedule-info {

    opacity: 0;

    transform: translateX(-12px);

    animation: scheduleTextIn 0.35s ease forwards;

}



.calendar2-schedule-time {

    width: 60px;

    font-weight: bold;

}



.calendar2-schedule-info {

    flex: 1;

}



@keyframes scheduleRowIn {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes scheduleTextIn {

    to {

        opacity: 1;

        transform: translateX(0);

    }

}





.calendar2-schedule-row { animation-delay: 0.25s; }

.calendar2-schedule-time,

.calendar2-schedule-info { animation-delay: 0.35s; }



.calendar2-schedule-row:nth-child(1) { animation-delay: 0s; }

.calendar2-schedule-row:nth-child(2) { animation-delay: 0.18s; }

.calendar2-schedule-row:nth-child(3) { animation-delay: 0.32s; }

.calendar2-schedule-row:nth-child(4) { animation-delay: 0.46s; }

.calendar2-schedule-row:nth-child(5) { animation-delay: 0.60s; }

.calendar2-schedule-row:nth-child(6) { animation-delay: 0.72s; }

.calendar2-schedule-row:nth-child(7) { animation-delay: 0.84s; }

.calendar2-schedule-row:nth-child(8) { animation-delay: 0.96s; }



.calendar2-schedule-row:nth-child(1) .calendar2-schedule-time,

.calendar2-schedule-row:nth-child(1) .calendar2-schedule-info { animation-delay: 0.12s; }



.calendar2-schedule-row:nth-child(2) .calendar2-schedule-time,

.calendar2-schedule-row:nth-child(2) .calendar2-schedule-info { animation-delay: 0.30s; }



.calendar2-schedule-row:nth-child(3) .calendar2-schedule-time,

.calendar2-schedule-row:nth-child(3) .calendar2-schedule-info { animation-delay: 0.44s; }



.calendar2-schedule-row:nth-child(4) .calendar2-schedule-time,

.calendar2-schedule-row:nth-child(4) .calendar2-schedule-info { animation-delay: 0.58s; }



.calendar2-schedule-row:nth-child(5) .calendar2-schedule-time,

.calendar2-schedule-row:nth-child(5) .calendar2-schedule-info { animation-delay: 0.72s; }







.calendar2-empty {

    padding: 15px;

    color: #777;

    text-align: center;

}



.calendar2-selected-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.calendar2-selected-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;



    background: #fff;

    padding: 10px 12px;

    border-radius: 0 10px 0 10px;

    box-shadow: var(--shadow-sm);



    transition:

        transform 0.15s ease,

        box-shadow 0.2s ease;

}



.calendar2-selected-row:hover {

    transform: translateY(-1px) scale(1.05);

    box-shadow: var(--shadow-md);

}



.calendar2-selected-row button {

    background: #fff;

    border: 1px solid #ccc;

    border-radius: 0 8px 0 8px;

    padding: 4px 6px;

    cursor: pointer;

    box-shadow: var(--shadow-sm);

    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s;

}



.calendar2-selected-row button:hover {

    background: #f5f5f5;

    transform: scale(1.1);

    box-shadow: var(--shadow-md);

}



.calendar2-submit {

    text-align: right;

}



.calendar2-save {

    padding: 10px 20px;

    font-size: 15px;

    cursor: pointer;

    border: 1px solid #ccc;

    border-radius: 0 8px 0 8px;

    background: #fff;

    box-shadow: var(--shadow-sm);

    transition: background 0.2s, border-color 0.2s, transform 0.15s ease, box-shadow 0.2s;

}



.calendar2-save:hover,

.calendar2-save:focus {

    background: #f5f5f5;

    border-color: #999;

    transform: scale(1.1);

    box-shadow: var(--shadow-md);

}





.calendar2-message {

    margin-top: 15px;

    padding: 10px;

    border-radius: 4px;

}

.calendar2-days {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* стрелките са от двете страни */
.calendar2-nav-group {
    display: contents;
}

.calendar2-nav.prev {
    order: 0;
}

.calendar2-day-strip {
    order: 1;
    flex: 1;
    justify-content: center;
}

.calendar2-nav.next {
    order: 2;
}

.calendar2-message.success {

    background: #e6f4ea;

    color: #256029;

}



.calendar2-message.error {

    background: #fdecea;

    color: #7d1a15;

}

.calendar2-title {

    font-size: 22px;

    margin-bottom: 20px;

    padding-top: 20px;   

    text-align: center; 

}

.calendar2-divider {

    border: none !important;

    border-top: 1px solid #264b77 !important;

    margin: 10px 0 !important;

}
.calendar2-divider::before,
.calendar2-divider::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.calendar2-divider {
    background: none !important;
    background-image: none !important;
}
.calendar2-date-select,
.calendar2-days,
.calendar2-day-strip {
    overflow: visible;
}
.calendar2-days {
    position: relative;
    z-index: 1;
}

.calendar2-day {
    position: relative;
}
.calendar2 option {
    padding: 5px 10px;
}
.calendar2 select {
    background-image: linear-gradient(#333, #333);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 0.35s ease;
}

.calendar2 select:focus {
    background-size: 100% 2px;
}
.calendar2 select:hover {
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.15),
        var(--shadow-sm);
}
.calendar2 select {
    line-height: 1.4;
    height: 36px;
}
.calendar2 option:hover {
    background-color: #f2f6fb;
}
.calendar2 option {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap;
}
@media (max-width: 768px) {

    /* ===== Основен контейнер ===== */
    .calendar2-days {
        display: flex;
        flex-direction: column;   /* дните горе, стрелките долу */
        align-items: center;
        gap: 6px;
        overflow: hidden;
    }

    /* ===== Лента с дни (swipe зона) ===== */
    .calendar2-day-strip {
        width: 100%;
        display: flex;
        gap: 6px;

        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 2px;

        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;

        scroll-snap-type: x mandatory;
    }

    /* ===== Отделен ден ===== */
    .calendar2-day {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;

        scroll-snap-align: center;
        user-select: none;
    }

    /* ===== Активен ден (БЕЗ scale) ===== */
    .calendar2-day.active {
        transform: none;
        box-shadow: 0 6px 14px rgba(0,0,0,0.25);
    }

    /* ===== ГРУПА СТРЕЛКИ ===== */
    .calendar2-nav-group {
        display: flex;
        gap: 16px;
        justify-content: center;
        margin-top: 2px;
    }

    .calendar2-nav {
        min-width: 44px; /* touch friendly */
        margin: 0;
    }
}