#reservation {
    width: 100%;
    max-width: 1337px;
    margin: 0 auto;
}

.event {
    display: flex;
    flex-wrap: wrap;
}

.event-val {
    flex: 1 0 100%;
}

#calendar {
    background-color: #fff;
    border-radius: 14px;
    position: relative;
    padding: 0;
}

#calendar.step-two #step-one {
    overflow: hidden;
    display: none;
}

#calendar.step-two #blocks {
    height: 0;
}

#calendar.step-two .reservation-header {
    position: static;
}

#calendar.step-two .date-row,
#calendar.step-two .resize-container {
    display: none;
}

/*
sal
*/
#calendar-sal {
    background-color: #fff;
    border-radius: 14px;
    position: relative;
    padding: 0;
}

#calendar-sal.step-two #step-one {
    overflow: hidden;
    display: none;
}

#calendar-sal.step-two #blocks {
    height: 0;
}

#calendar-sal.step-two .reservation-header {
    position: static;
}

#calendar-sal.step-two .date-row,
#calendar-sal.step-two .resize-container {
    display: none;
}
/*
end sal
*/

.reservation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 11;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid var(--primary-dark);
    border-radius: 14px 14px 0 0;
}

@supports (backdrop-filter: blur()) {
    .reservation-header {
        background-color: rgba(255, 255, 255, 0.3);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}


.reservation-header h1 {
    margin: 0;
    color: var(--text);
}

.reservation-header #date {
    margin: 0 7px;
    color: var(--text);
    font-weight: bold;
}

.date-row-inner {
    display: flex;
    align-items: center;
    border-radius: 14px;
}

#calendar-form {
    position: relative;
    padding: 20px;
}

#step-one {
    width: 100%;
    flex: 1 0 100%;
    position: relative;
}

#step-two {
    position: relative;
    width: 100%;
    flex: 1 0 100%;
    display: none;
    background-color: #fff;
    z-index: 30;
    height: 100%;
}

.price-field{
    background-color: var(--secondary-light);
    padding: 10px;
    border-radius: 14px;
}

#step-two.next {
    display: block;
    top: 0;
}

#blocks {
    display: grid;
    grid-template-columns: 2rem repeat(7, 1fr);
    transition: cubic-bezier(0.4, 0, 0.2, 1) 250ms;
    column-gap: 4px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    min-height: 300px;
}

#blocks #times {
    display: flex;
    grid-row: 2 / -1;
    grid-column: 2rem;
    flex-direction: column;
}

#blocks .col-1 {
    grid-column: 1 / span 1;
}

#blocks .col-2 {
    grid-column: 2 / span 1;
}

#blocks .col-3 {
    grid-column: 3 / span 1;
}

#blocks .col-4 {
    grid-column: 4 / span 1;
}

#blocks .col-5 {
    grid-column: 5 / span 1;
}

#blocks .col-6 {
    grid-column: 6 / span 1;
}

#blocks .col-7 {
    grid-column: 7 / span 1;
}

#blocks .col-8 {
    grid-column: 8 / span 1;
}

.block {
    position: relative;
    border-radius: 14px;
    z-index: 3;
    width: 100%;
    transition: cubic-bezier(0.4, 0, 0.2, 1) 250ms;
    overflow: hidden;
    color: var(--text);
    margin-bottom: 3px;
}

.block.rekapitulace {
    height: 100%;
}

.block.rekapitulace .custom-radio {
    pointer-events: none;
}

.block.rekapitulace .block-label {
    cursor: default;
    pointer-events: none;


}

.block.rekapitulace .block-heading {

    margin-bottom: 10px;
}

.block.rekapitulace .block-info {
    display: flex;
    align-items: end;
}

.block .sports{
    font-size: 9px;
    flex: 1;
}
.custom-radio:disabled+.block-label {
    cursor: not-allowed;
    background-color: #878888;
    color: #fff;
}

.block.vyprodano:before {
    content: 'Vyprodáno';
    color: rgb(255, 145, 0);
}

.block.stary:before {
    content: 'Již nelze objednat';
    color: rgb(255, 255, 255);
}
.block.stary_vikend:before {
    content: 'Již nelze objednat';
    color: rgb(130, 130, 130);
}

.block.zruseno:before {
    content: 'Zrušeno';
    color: rgb(255, 0, 0);

}

.block.nejde:before {
    content: 'Pouze telefonicky';
    color: rgb(255, 255, 255);
}

.block.zruseno::before,
.block.stary::before,
.block.stary_vikend::before,
.block.nejde::before,
.block.vyprodano::before {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    text-align: center;
    left: 0;
    bottom: 0;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.block:hover {
    z-index: 4;
}

.block-label {
    display: flex;
    flex-direction: column;
    transition: cubic-bezier(0.4, 0, 0.2, 1) 250ms;
    padding: 7px;
    cursor: pointer;
    height: 100%;
}

.block-heading {
    margin: 0;
}

.block-info {
    display: flex;
    align-items: center;
    overflow: clip;
}

.block-price {
    margin: 0;
    flex: 1;
}

.price{
    margin-bottom: 5px;
}

.block-available {
    margin: 0;
    flex: 1;
    display: flex;
    justify-content: end;
    align-items: center;
}

.block:not(.rekapitulace) .block-desc {
    display: none;
}

.icon {
    margin-right: 5px;
}

#dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
    grid-column: 2 / span 7;
    grid-row: 1 / span 1;
    position: sticky;
    top: 85px;
    column-gap: 4px;
    z-index: 10;
    margin-bottom: 10px;
}

#dates .date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    background-color: var(--primary);
    color: var(--text-on-primary);
    padding: 5px 10px;
    border-radius: 14px;
    font-weight: bold;
    max-height: 51px;
    transition: 300ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
    cursor: pointer;
}
.loading.show img{
    animation: loading 1000ms cubic-bezier(.79,.14,.15,.86) infinite;
    width: 100px;
}

#extra-kecy p{
    margin: 0;
}

#extra p{
    width: 100%;
}
#extra{
    flex-wrap: wrap;
}


#step-one .loading.show,
.loading.show{
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading{
    display: none;
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.164);
}
#blocks.day-detail .date:not(.current) {
    display: none;
}

#dates .date.current {
    grid-column: 4;
}

#dates .date .date-str {
    margin-bottom: 5px;
}

.time {
    flex: 1 0;
}

.time::before {
    content: '';
    position: absolute;
    height: 1px;
    width: calc(100% - 12px);
    z-index: 2;
    background-color: hsla(216, 38%, 18%, 0.308);
}

.time .time-value {
    position: sticky;
    top: 85px;
    font-size: 13px;
}

@keyframes appear {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes loading {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

@media (max-width: 1300px) {}


@media (max-width: 1440px) {}

@media (max-width: 1000px) {}

@media (max-width: 500px) {

    .form-fields {
        width: 100%;
    }

    .resize-container {
        order: 1;
    }

    .date-row {
        order: 2;
        margin: 10px auto 0 auto;
    }

    .time .time-value {
        top: 120px;
    }

    #dates {
        top: 120px;
    }

    #dates .date {
        width: 100%;
        padding: 5px 0;
    }

    .reservation-header {
        padding: 10px;
    }

    #calendar-form {
        padding: 10px;
    }
}

@keyframes pop-up {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes expand {
    from {
        width: calc(100% + 1px);
        height: calc(100% + 1px);
    }

    to {
        width: calc(130% + 1px);
        height: calc(130% + 1px);

    }
}