header {
    display: none
}

#calendar {
    background: var(--black);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100svh;
    padding-top: 40px;
    padding-bottom: 40px;
    overflow-y: scroll
}

#calendar .h2.wonder-garden {
    line-height: 25%;
    margin-bottom: 100px;
}

#calendar .calendar__info {
    display: flex;
    flex-direction: column;
    align-items:center;
}

#calendar .calendar__info p {
    max-width: 680px;
    text-align: center;
    margin-bottom: 60px;
}

#calendar .calendar__info ul {
    display:flex;
    flex-direction: row;
    column-gap: 60px;
    list-style: none;
}

@media (max-width: 767px) {
    #calendar .calendar__info ul {
    flex-direction: column;
    row-gap: 30px;
    align-items: center;
    }
}

#hall__gallery .hall__items {
    display: flex;
    flex-direction: row;
    column-gap: 40px;
    justify-content: center;
    margin-bottom: 40px
}

#hall__gallery .hall__items a {
    color: var(--light-grey);
    display: inline-block;
    text-transform: uppercase;
    transition: .4s ease-out;
}

#hall__gallery .hall__items a:hover {
    color: var(--gold);
}

#hall__gallery .hall__items a:after {
    content: '';
    border-bottom: 1px solid var(--gold);
    padding-bottom: 5px;
    width: 0%;
    display: block;
    transition: width .4s ease-in-out;
}

#hall__gallery .hall__items a:hover:after {
    width: 100%; 
}

#hall__gallery .hall__items a.active {
    color: var(--gold);
}

#hall__gallery .hall__items a.active:after {
    content: '';
    border-bottom: 1px solid var(--gold);
    padding-bottom: 5px;
    width: 100%;
    display: block;
}

@media (max-width: 767px) {
    #hall__gallery .hall__items {
        width: 100%;
        overflow-x: scroll;
        justify-content: start;
        scrollbar-color: var(--gold) var(--light-grey);
        scrollbar-width: thin;
    }
    #hall__gallery .hall__items::-webkit-scrollbar {
        height: 2px;
    }
    #hall__gallery .hall__items::-webkit-scrollbar-track {
        background-color: var(--light-grey);
    }
    #hall__gallery .hall__items::-webkit-scrollbar-thumb {
        background: var(--gold);
    }
    #hall__gallery .hall__items a {
        min-width: 66%;
        text-align: center;
    }
    #hall__gallery .hall__items a.active:after {
        border-bottom: none;
    }
}


#calendar .calendar__info ul li {
    display:flex;
    flex-direction: row;
    column-gap: 35px;
    align-items:center;
}

#calendar .calendar__info ul li:nth-child(1):before {
    content: '';
    display: block;
    width: 10px;
    height:10px;
    border-radius:50px;
    background: var(--gold);
}

#calendar .calendar__info ul li:nth-child(2):before {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-radius:50px;
    background: (--black);
    border: 1px solid var(--white);
}

.calendar-slider {
    position: unset;
}

.vanilla-calendar {
    padding: 60px 0 35px;
    width: 100%;
    display: block;
}

.vanilla-calendar .vanilla-calendar-grid {
    gap: 0;
    max-width: 1100px;
}

@media (max-width: 1319px) {
    .vanilla-calendar .vanilla-calendar-grid {
        max-width: 767px;
    }
}

@media (max-width: 990px) {
    .vanilla-calendar .vanilla-calendar-grid {
        max-width: 545px;
    }    
}

@media (max-width: 576px) {
    .calendar-slider {
        width: 310px;
    }
}

.vanilla-calendar-header {
    margin-bottom: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--grey)
}

.vanilla-calendar-month,
.vanilla-calendar-year {
    color: var(--bg-grey);
    font-family: Verano Sans;
    font-size: 18px;
    line-height: 120%;
    font-weight: 400;
}

.vanilla-calendar-week {
    margin-bottom: 15px;
}

.vanilla-calendar-week__day {
    color: var(--bg-grey);
    font-family: Verano Sans;
    font-size: 16px;
    font-weight: 400;
}

.vanilla-calendar-day__btn {
    background: transparent;
    border-radius: 50px;
    color: var(--bg-grey);
    font-family: Verano Sans;
    font-size: 16px;
    font-weight: 400;
    width: 35px;
    height: 35px;
    transition: .4s ease-in-out
}

.vanilla-calendar-days {
    row-gap: 15px;
}

.vanilla-calendar-day__btn:hover {
    background: var(--white);
    color: var(--black)
}

.vanilla-calendar-day__btn_selected {
    background: var(--white);
    color: var(--black)
}

.vanilla-calendar-day__btn.booked {
    background: var(--gold);
    color: var(--black);
    cursor: auto
}


.vanilla-calendar-day span {
    opacity: 0;
    display:none;
    background-color: var(--white);
    color: var(--black);
    text-align: center;
    border-radius: 6px;
    padding: 15px;
    position: absolute;
    z-index: 1;
    bottom: 130%;
    right: 12%;
    min-width: 130px;
}

.vanilla-calendar-day span:after {
    content: "";
    position: absolute;
    top: 97%;
    left: 86%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.vanilla-calendar-day span.active {
    display: block;
    animation: bookedspan 2s ease
}

.vanilla-calendar-days .vanilla-calendar-day:nth-child(7n + 1)  span,
.vanilla-calendar-days .vanilla-calendar-day:nth-child(7n + 2)  span{
    left: 12%;
  }

.vanilla-calendar-days .vanilla-calendar-day:nth-child(7n + 1)  span:after,
.vanilla-calendar-days .vanilla-calendar-day:nth-child(7n + 2)  span:after{
    left: 14%;
  }


@keyframes bookedspan {
    0% {
    transform: translateY(-30px);
    opacity: 0
    }
    50% {
    transform: translateY(0px);
    opacity: 1
    }
    100% {
    transform: translateY(30px);
    opacity: 0
    }
}

@media (max-width: 1319px) {
    .vanilla-calendar-day span {
        right: 14%;
    }
    .vanilla-calendar-days .vanilla-calendar-day:nth-child(7n + 1)  span,
    .vanilla-calendar-days .vanilla-calendar-day:nth-child(7n + 2)  span {
        left: 14%;
    }
}

@media (max-width: 990px) {
    .vanilla-calendar-day span {
        right: 7%;
    }
    .vanilla-calendar-days .vanilla-calendar-day:nth-child(7n + 1)  span,
    .vanilla-calendar-days .vanilla-calendar-day:nth-child(7n + 2)  span {
        left: 10%;
    }
}

@media (max-width: 767px) {
    .vanilla-calendar-day span {
        right: 7%;
    }
}


.vanilla-calendar-day__btn_disabled {
    color: var(--grey)
}

.vanilla-calendar-day__btn.reserved {
    outline: 1px solid var(--white);
    color: var(--white);
    cursor: auto
}

.vanilla-calendar-day__btn.reserved:hover {
    outline: 1px solid var(--white);
    background: none;
    color: var(--white);
    cursor: auto;
}

.vanilla-calendar-day__btn.selected {
    background: var(--white);
    color: var(--black)
}

@media (min-width: 991px) {
.vanilla-calendar .swiper-button-next,
.vanilla-calendar .swiper-button-prev {
    width: 80px;
    height: 80px;
    border: 1px solid var(--white);
    border-radius: 50px;
    transition: .4s ease-out
    }

.vanilla-calendar .swiper-button-next:hover,
.vanilla-calendar .swiper-button-prev:hover {
    background: var(--gold);
    border: 1px solid var(--gold);
    }

.vanilla-calendar .swiper-button-next {
    right: -100px;
    }

.vanilla-calendar .swiper-button-prev {
    left: -100px;
    }
}

@media (max-width: 990px) {
.vanilla-calendar .swiper-button-next,
.vanilla-calendar .swiper-button-prev {
        top: var(--swiper-navigation-top-offset,16%);
        width: 30px;
        height: 30px;
    }
}

.vanilla-calendar .swiper-button-next:after,
.vanilla-calendar .swiper-button-prev:after {
    content: url(/themes/cafe51/assets/images/icons/arrow-90.svg);
    line-height: 0;
}

.vanilla-calendar .swiper-button-prev:after {
    transform: rotate(180deg)
}

#calendar .calendar__order {
    display: flex;
    flex-direction: row;
    column-gap: 90px;
    text-transform: uppercase;
}

#calendar .calendar__order .calendar__order__link  {
    display:flex;
    flex-direction: row;
    column-gap: 5px;
}

@media (max-width: 767px) {
    #calendar .calendar__order {
        flex-direction: column;
        row-gap: 30px;
    }
    #calendar .calendar__order .calendar__order__link a {
        text-align: center;
        width: 100%;
    }
}

#calendar .calendar__order .calendar__order__link a {
    display: flex;
    flex-direction: column;
    line-height:1.6;
}

#calendar .calendar__order .calendar__order__link a:after {
    content: '';
    border-bottom: 1px solid;
    width: 100%;
    display: block;
    transition: width .4s ease-out;
}

#calendar .calendar__order .calendar__order__link a:hover:after {
    width: 0%;
}

#calendar .calendar__order .calendar__order__link a + svg {
    transition: transform .4s ease-out;

}

#calendar .calendar__order a:hover + svg {
    transform: rotate(-45deg);
}

.calendar__overlay {
    position: fixed;
    top: 0;
    opacity: 0;
    background: var(--black);
    z-index: 1;
    transition: all 2s ease-out;
    width: 100vw;
    height: 100vh;
    transform: translateY(-100%)
}

.calendar__overlay.active {
	display: flex;
	opacity: 1;
	align-items: center;
	justify-content: center;
	transform: translateY(0%);
	z-index: 11;
	transition: all 2s ease-out;
	overflow-y: scroll;
    overflow-x: hidden
}

.calendar__overlay__burger {
    position: absolute;
    z-index: 1;
    top: 50px;
    right: 40px;
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    cursor: pointer
}

.calendar__overlay__burger span {
    text-transform: uppercase;
    color: var(--white)
}

.calendar__overlay__box {
	display: flex;
	flex-direction: column;
	row-gap: 70px;
}

@media (max-width: 768px) {
    .calendar__overlay__box {
        row-gap: 35px;
        height: fit-content;
        padding-top: 120px;
        padding-bottom: 20px;
        width: 100%;
        position: absolute;
        top: 0;
    }
    .calendar__overlay__box .h2 {
        font-size: 36px
    }
    .calendar__overlay__burger {
        top: 30px;
        right: 20px
    }
}



.calendar__overlay__title {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
    max-width: 960px
}

.calendar__overlay_dataorder {
    display:flex;
    flex-direction: row;
    column-gap: 150px;
    justify-content: space-between
}

.calendar__overlay__callback {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    flex-grow: 1
}

@media (max-width: 545px) {
    .calendar__overlay__callback {
        row-gap: 25px;
    }
}

.calendar__overlay__callback__messanger {
    border-bottom: 1px solid var(--grey);
    padding: 10px 0px;
    position: relative;
    z-index: 1
}

.calendar__overlay__callback__messanger label {
	width: 100%;
	cursor: pointer;
	display: flex;
	align-items: center;
	column-gap: 15px;
}

.calendar__overlay__callback__messangerbox input {
    position: absolute;
    left: -9999px;
    visibility: hidden;
}

.calendar__overlay__callback__messanger span,
.calendar__overlay__callback__messanger svg circle,
.calendar__overlay__callback__messanger svg path {
    transition: all .4s ease-out
}

.calendar__overlay__callback__messanger:hover span {
    color: var(--gold)
}

.calendar__overlay__callback__messangerbox div:hover svg circle {
    stroke: var(--gold)
}

.calendar__overlay__callback__messangerbox div:hover svg path {
    fill: var(--gold)
}

.calendar__overlay__callback__messangerbox div:nth-child(3):hover svg circle:nth-child(1) {
    stroke: var(--gold);
}

.calendar__overlay__callback__messangerbox div:nth-child(3):hover svg circle:nth-child(2) {
    fill: var(--gold)
}

.calendar__overlay__callback__messangerbox div:nth-child(3):hover svg path {
    fill: var(--black);
}

.calendar__overlay__callback__messangerbox div input[type="radio"]:checked ~ span {
    color: var(--gold)
}

.calendar__overlay__callback__messangerbox div input[type="radio"]:checked + svg circle {
    stroke: var(--gold)
}

.calendar__overlay__callback__messangerbox div input[type="radio"]:checked + svg path {
    fill: var(--gold)
}

.calendar__overlay__callback__messangerbox div:nth-child(3) input[type="radio"]:checked + svg circle:nth-child(1) {
    stroke: var(--gold)
}

.calendar__overlay__callback__messangerbox div:nth-child(3) input[type="radio"]:checked + svg circle:nth-child(2) {
    fill: var(--gold)
}

.calendar__overlay__callback__messangerbox div:nth-child(3) input[type="radio"]:checked + svg path {
    fill: var(--black);
}

.calendar__overlay__callback__messanger__inputs {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 0%;
    padding: 30px 0px;
    opacity:0;
    transform: translateY(-50px);
    overflow: hidden;
    z-index:0;
    transition: all .4s ease-out
}

.calendar__overlay__callback__messanger__inputs input {
    position: relative;
    left: 0;
    visibility: visible;
    text-transform: uppercase;
    border-bottom: 1px solid var(--white);
    padding: 15px 0px;
    width: 100%;
    display:none;
}

.calendar__overlay__callback__messanger__inputs input:focus {
    color: var(--white)
}

.calendar__overlay__callback__messangerbox {
    display:flex;
    flex-direction: column;
    padding: 10px 0px
}

.calendar__overlay__callback__messangerbox div:nth-child(1) {
    padding: 0 0 10px;
    display:none
}

.calendar__overlay__callback__button {
    display:none; /*flex*/
    align-items: center;
    color: var(--white)
}

.calendar__overlay__callback__button label {
    display:flex;
    flex-grow:1;
    flex-direction: column;
    row-gap: 5px;
}

.calendar__overlay__callback__button label input {
    text-transform: uppercase;
    transition: .4s ease-out
}

.calendar__overlay__callback__button label:hover input {
    color: var(--gold);
    cursor: pointer
}

.calendar__overlay__callback__button label::after {
	content: '';
	border-bottom: 1px solid;
	width: 100%;
	display: block;
	transition: width .4s ease-out;
}

.calendar__overlay__callback__button label:hover::after {
    width: 0%;
    color: var(--gold)
}

.calendar__overlay__callback__button svg {
    flex-grow: 0
}

.calendar__overlay__callback__button label + svg {
    transition: all .4s ease-out;
    margin-bottom: 15px;

}

.calendar__overlay__callback__button label:hover + svg {
    transform:rotate(45deg);
}

.calendar__overlay__callback__button label:hover + svg path {
    fill: var(--gold)
}

.calendar__overlay .vanilla-calendar {
    padding: 0;
}

.calendar__overlay .vanilla-calendar {
    padding: 0;
}

.calendar__overlay .calendar__overlay__dates {
    max-width: 360px;
    align-self: center
}

@media (max-width: 768px) {
    .calendar__overlay .calendar__overlay_dataorder {
        flex-direction: column;
        padding: 35px;
        row-gap: 0px
    }
}

.calendar__overlay .vanilla-calendar .swiper-button-next::after, .calendar__overlay .vanilla-calendar .swiper-button-prev::after {
	content: url(/themes/cafe51/assets/images/icons/arrow-90.svg);
	line-height: 0;
}

.calendar__overlay .vanilla-calendar .swiper-button-next, .calendar__overlay .vanilla-calendar .swiper-button-prev {
	top: var(--swiper-navigation-top-offset,5%);
	width: 30px;
	height: 30px;
    border: none;
	border-radius: none;
}

.calendar__overlay .vanilla-calendar .swiper-button-next {
    right: var(--swiper-navigation-sides-offset,10px);
}

.calendar__overlay .vanilla-calendar .swiper-button-prev {
    left:var(--swiper-navigation-sides-offset,10px)
}
.calendar__overlay .vanilla-calendar .swiper-button-next:hover, .calendar__overlay .vanilla-calendar .swiper-button-prev:hover {
	background: none;
	border: none;
}