/*BOOKING BLOCK 1*/
    #booking .section1200{ z-index:2; position: relative;}
.phomeBooking1-main{position:relative; overflow:hidden; height:auto; color: #efece7;}
.phomeBooking-block{background:#081e47; padding-bottom:0px; }
.phomeBooking1-background:before {
    content: '';
    position: absolute;
    top: -1248px;
    right: -1246px;
    width: 642.51971px;
    height: 3964.7244px;
    background-image: url(/upload/catalog/16235/files/style/lines_golg.svg);
    background-size: 100%; 
    transform: rotate(305deg);
    z-index: 0; opacity:0.2; 
}

.phomeBooking1-background:after {
    content: '';
    position: absolute;
    bottom: -450px;
    left: -1445px;
    width: 1857.1653px;
    height: 1001.5748px;
    mask-image: url(/upload/catalog/16235/files/style/lines_golg2.svg);
    -webkit-mask-image: url(/upload/catalog/16235/files/style/lines_golg2.svg);
    background-color: #887554;
    -webkit-mask-size: 100%;
    opacity: 1;
    z-index: 0;
    transform: rotate(350deg);
    opacity: 0.2;
}

@media (max-width: 1000px) {   

.phomeBooking1-background:before {
    top: -1381px;
    right: -1513px;

    }
}

 .phomeBooking1-maintitle-inside {
  display: block; padding: 40px 0px;
}

    	
.phomeBooking1-maintitle-inside .phomeBooking1-maintitle-title{  font-weight: 900;
       font-size: var(--font-medium29);
    line-height: var(--line-height29); display:block; }
	
	
	.phomeBooking1-maintitle-line{    border-bottom: 3px solid #7d6d53;
    display: block;
    width: 60%; max-width:320px;
    margin: 20px 0px;
	}	
	
	
	
	.phomeBooking1-maintitle-title2{
  font-weight: 900;
   font-size:var(--font-small20); margin-top:20px; line-height:var(--line-height20); }
    
 
/*BOOKING BLOCK 1*/

/*BOOKING BLOCK 1 2*/
.phomeBooking1{background: #0a162e; display:block; min-height:500px; padding:10px 0px; vertical-align: top;}
	
.phomeBooking-floortitle{ color:#887554; font-weight: 900;
   font-size:var(--font-small20); margin-top:20px; line-height:var(--line-height20); }


.phomeBooking1 .photo {background:url(/upload/catalog/16235/files/style/booking/1floor.webp) no-repeat center top;	
	width: 100%;
  height: auto;
  aspect-ratio: 1502 / 561!important; display:block; margin:auto;
	background-size: cover!important;
  background-position: center!important; transition: background-image 0.7s ease-in-out, opacity 0.7s ease-in-out;
}
	

.phomeBooking2 .photo {background:url(/upload/catalog/16235/files/style/booking/2floor.webp?v1) no-repeat center top;	
	width: 100%;
  height: auto;
  aspect-ratio: 1431 / 384!important; display:block; margin:auto;
	background-size: cover!important;
  background-position: center!important; transition: background-image 0.7s ease-in-out, opacity 0.7s ease-in-out;
}	
.phomeBooking2{padding-bottom: 20px;}




/*BOOKING BLOCK 1 2*/
/*BOOKING BLOCK 2  */
.phomeBooking3 {  color: #efece7; }
.phomeBooking3 .phomeBooking3-maintitle-title{  font-weight: 900;
font-size: var(--font-medium29); color: #efece7;
line-height: var(--line-height29); display:block; text-align: center;}
    
.phomeBooking3 .phomeBooking3-maintitle-line{    border-bottom: 3px solid #7d6d53;
    display: block;
    width: 60%; max-width:320px;
    margin: 20px auto; text-align: center;
	}	
.phomeBooking3 .phomeBooking3-maintitle-title2{
  font-weight: 900; text-align: center; 
   font-size:var(--font-small20); margin:20px auto; line-height:var(--line-height20); }  
    
    
    
    
.phomeBooking3-main .phomeBooking-floortitle{ color:#887554; }
.phomeBooking4-main .phomeBooking-floortitle{ color:#887554; }
    
.phomeBooking3{/*background: #0a162e;*/ display:block; min-height:500px; padding:48px 0px; vertical-align: top;}
/*.phomeBooking4{ display:block; min-height:500px; padding:48px 0px; vertical-align: top;}*/

    
@media (max-width: 1200px) {
    .phomeBooking1-maintitle-inside { padding-left:10px; padding-right: 10px; } 
    .phomeBooking1, .phomeBooking2, .phomeBooking-floortitle, .booking_blocks{ padding-left:10px; padding-right: 10px; }
}
    
.booking_blocks{display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    display:contents; 
}
    
    
    
    
.booking-slot{ display:inline-block; margin:10px 5px 20px 5px; position: relative; min-width:220px; min-width: calc(25% - 13px);}
.booking-table-designblock {
    border: 3px solid #887554;
    margin-bottom: 10px;
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80px;
}
  
    
.booking-slot[data-booking-status="busy"] .booking-table-designblock{ border:3px solid #555; }
.booking-slot[data-booking-status="busy"] {
    filter: grayscale(100%) opacity(50%);
   
        cursor: no-drop;
}
.booking-slot[data-booking-status="busy"] .booking-slot-start-order {
   pointer-events: none;       
}
    
.booking-table-designblock .iconbooking { width:80px; height:80px; margin:0px auto; }
.booking-table-designblock .iconbooking.iconbool {
    background: url(/upload/catalog/16235/files/style/booking/ball.svg) no-repeat center center;
    background-size: 62px;
    position: relative;
}
    
.booking-table-designblock .iconbooking.pingpong {
    background: url(/upload/catalog/16235/files/style/booking/tennis.svg) no-repeat center center;
    background-size: 62px;
    position: relative;
} 
    
.booking-table-designblock .iconbooking.iconbool:before, .booking-table-designblock .iconbooking.pingpong:before{    
    white-space: pre-line;
    position: relative;
    left: calc(-100% + 17px);
    top: calc(50% - 17px);
    text-align: left; display:block;
    
   
    font-weight: 100;
    font-size: 13px;
    color: #efece7;
    }

.tablepyramid12 .booking-table-designblock .iconbooking.iconbool:before{   content: "Table\A Pyramid 12`";}
.tablepool9 .booking-table-designblock .iconbooking.iconbool:before{   content: "Table\A Pool Dynamic 9`";}
.brunswick8 .booking-table-designblock .iconbooking.iconbool:before{   content: "Table\A Pool Brunswick 8`";}  
.tablepingpong .booking-table-designblock .iconbooking.pingpong:before{   content: "Table\A Ping Pong`";}  
    
    
.hotengine-footpanel-vertical-body .booking-slot:after {    
    content: attr(data-booking-slot-group-id); /* Получаем содержимое атрибута */
    white-space: pre-wrap;
    position: absolute;
    right:0px;
    top: 0px;;
    text-align: left;
    display: inline-block;
    font-weight: 100;
    font-size: 13px;
    color: #efece7;
    background: #000; font-size:12px; padding:3px 5px;
    
}

    
    
 
    
.booking-table-designblock .iconbooking .tnum {
    font-weight: 900;
    font-size: var(--font-small20);
    line-height: var(--line-height20);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000000;
}
    
.tablepingpong .booking-table-designblock .iconbooking .tnum {
    top: 58%;
    left: 48%;
}
    
         
    
    
.booking-table-designblock .iconbooking .tnum:before{content:"№"; font-size: 12px;}  
    
    
    
.booking-slot.blue-table  .booking-table-designblock{background: #0060b930;}
.booking-slot.green-table .booking-table-designblock{background: #057b3566;}
.booking-slot.black-table .booking-table-designblock{background: #00000082;}   
.booking-table-designblock .booking-slot-price{display: inline-block;
    width: 30px;
    position: absolute;
    right: 5%;
    font-weight: 100;
    font-size: 13px;
    color: #efece7;
    
    }
    
    
/* v2*/    
    .booking-table-designblock .iconbooking{width:100%;}
.booking-table-designblock{height: 110px; } 
.booking-table-designblock .iconbooking.iconbool:before, .booking-table-designblock .iconbooking.pingpong:before {
    white-space: nowrap;
    position: relative;
    left: 0px;
    top: -8px;
    text-align: center;
    }
 .booking-table-designblock .booking-slot-price {
    display: inline-block;
    width: 100%;
    position: absolute;
    right: 0%;
    bottom: 2px;
}
    
/* v2*/   
    
    
    
@media (max-width: 700px) {
    .booking_blocks{display:block; text-align: center;}
    
.booking-slot {
    display: inline-block;
    margin: 10px 5px 20px 5px;
    position: relative;
    min-width: calc(33% - 10px);
}

    
}    
    
@media (max-width: 450px) {
    .booking-slot {
        min-width: calc(50% - 12px);
    }
}   
    
.booking-calendar-date-select-container {margin-bottom: 10px;}

.booking-calendar-days-list{display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 280px; text-align: center;}

.booking-calendar-time-list { max-width: 280px;  }
.booking-calendar-time-list-grid {display: grid; grid-template-columns: repeat(1, 1fr); gap: 5px; text-align: center; }




.booking-button{margin:15px 5px 25px 0px; padding:5px 15px;}

.booking-calendar-time-button{padding: 8px; border: 1px solid #ccc; cursor: pointer; background: #fff; white-space: nowrap; }
.booking-calendar-time-button.selected{background:#f3f3f3;}
.booking-calendar-time-button.not-allowed{cursor:not-allowed; background:#eee;}

.booking-calendar-days-button{padding: 8px; border: 1px solid #ccc; cursor:pointer; background:#fff;}
.booking-calendar-days-button.selected{background:#f3f3f3;}
.booking-calendar-days-button.disabled{cursor:not-allowed; background:#eee;}

.booking-slot-status-block{ display:none; }
.booking-slot[data-booking-status="busy"] .booking-slot-status-block span{
    pointer-events: none;
    opacity: 0.6;
}

.booking-slot[data-booking-status="busy"] .booking-slot-status-block {color:#ff2727;}
.booking-slot[data-booking-status="free"] .booking-slot-status-block { color:#93b300; }

.booking-slot[data-booking-status="busy"] .booking-slot-status-block span:after {
    content: "Occupied";  
}
html:lang(en) .booking-slot[data-booking-status="busy"] .booking-slot-status-block span:after {
    content: "Occupied";  
}
html:lang(uk) .booking-slot[data-booking-status="busy"] .booking-slot-status-block span:after {
    content: "Зайнято";  
}
html:lang(pl) .booking-slot[data-booking-status="busy"] .booking-slot-status-block span:after {
    content: "Zajęte";  
}
html:lang(ru) .booking-slot[data-booking-status="busy"] .booking-slot-status-block span:after {
    content: "Занято";  
}

.booking-slot[data-booking-status="free"] .booking-slot-status-block span:after {
    content: "Available"; 
}
html:lang(en) .booking-slot[data-booking-status="free"] .booking-slot-status-block span:after {
    content: "Available"; 
}
html:lang(uk) .booking-slot[data-booking-status="free"] .booking-slot-status-block span:after {
    content: "Вільно"; 
}
html:lang(pl) .booking-slot[data-booking-status="free"] .booking-slot-status-block span:after {
    content: "Dostępne"; 
}
html:lang(ru) .booking-slot[data-booking-status="free"] .booking-slot-status-block span:after {
    content: "Свободно"; 
}

.booking-text-select-time:after{ content: "Select time:"; }
html:lang(en) .booking-text-select-time:after{ content: "Select time:"; }
html:lang(uk) .booking-text-select-time:after{ content: "Виберіть час:"; }
html:lang(pl) .booking-text-select-time:after{ content: "Wybierz czas:"; }
html:lang(ru) .booking-text-select-time:after{ content: "Выберите время:"; }

.booking-text-select-date:after{ content: "Select date:"; }
html:lang(en) .booking-text-select-date:after{ content: "Select date:"; }
html:lang(uk) .booking-text-select-date:after{ content: "Виберіть дату:"; }
html:lang(pl) .booking-text-select-date:after{ content: "Wybierz datę:"; }
html:lang(ru) .booking-text-select-date:after{ content: "Выберите дату:"; }

.booking-text-select-date-end:after { content: "Select end date:"; }
html:lang(en) .booking-text-select-date-end:after { content: "Select end date:"; }
html:lang(uk) .booking-text-select-date-end:after { content: "Виберіть дату завершення:"; }
html:lang(pl) .booking-text-select-date-end:after { content: "Wybierz datę zakończenia:"; }
html:lang(ru) .booking-text-select-date-end:after { content: "Выберите дату окончания:"; }


.booking-text-select-preiod:after{ content: "For which period:"; }
html:lang(en) .booking-text-select-preiod:after{ content: "For which period:"; }
html:lang(uk) .booking-text-select-preiod:after{ content: "На який період:"; }
html:lang(pl) .booking-text-select-preiod:after{ content: "Na jaki okres:"; }
html:lang(ru) .booking-text-select-preiod:after{ content: "На какой период:"; }

.booking-text-select-start-date:after { content: "Select start time"; } 
html:lang(en) .booking-text-select-start-date:after { content: "Select start time"; } 
html:lang(uk) .booking-text-select-start-date:after { content: "Виберіть початковий час"; } 
html:lang(pl) .booking-text-select-start-date:after { content: "Wybierz godzinę rozpoczęcia"; } 
html:lang(ru) .booking-text-select-start-date:after { content: "Выберите начальное время"; }

.booking-text-select-end-date:after { content: "Select end time"; }
html:lang(en) .booking-text-select-end-date:after { content: "Select end time"; }
html:lang(uk) .booking-text-select-end-date:after { content: "Виберіть час завершення"; }
html:lang(pl) .booking-text-select-end-date:after { content: "Wybierz godzinę zakończenia"; }
html:lang(ru) .booking-text-select-end-date:after { content: "Выберите время окончания"; }


.booking-text-time-not-available:after{ content: "No available time"; }
html:lang(en) .booking-text-time-not-available:after{ content: "No available time"; }
html:lang(uk) .booking-text-time-not-available:after{ content: "Немає доступного часу"; }
html:lang(pl) .booking-text-time-not-available:after{ content: "Brak dostępnego czasu"; }
html:lang(ru) .booking-text-time-not-available:after{ content: "Нет доступного времени"; }

.booking-text-time-loading-error:after{ content: "Time loading error"; }
html:lang(en) .booking-text-time-loading-error:after{ content: "Time loading error"; }
html:lang(uk) .booking-text-time-loading-error:after{ content: "Помилка завантаження часу"; }
html:lang(pl) .booking-text-time-loading-error:after{ content: "Błąd ładowania czasu"; }
html:lang(ru) .booking-text-time-loading-error:after{ content: "Ошибка загрузки времени"; }








.booking-slot-start-order{display:block; }
.booking-slot-start-order span {
  display: inline-block;
  margin: 10px auto;
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-radius: 0px;
  background-color: #f5f5f5;
  color: #333;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.booking-slot-start-order span:hover {
  background-color: #eaeaea;
  border-color: #bbb;
}

.booking-slot[data-booking-status="free"] .booking-slot-start-order span:active {
  background-color: #ddd;
  border-color: #aaa;
  top:1px; position:relative; 
}

.booking-slot[data-booking-status="busy"] .booking-slot-start-order span{
opacity: 0.6;
}



.booking-text-form-group-title{ display:block; text-align:center; font-size:150%; margin:10px auto;}
.booking-text-form-date{ display:block; text-align:center; font-size:200%; margin:10px auto; }
.booking-text-form-time{ display:block; text-align:center; font-size:150%; margin:10px auto;}

.booking-text-form-date-double{ display:inline-block; width: calc(50% - 10px); text-align:center; font-size:150%; margin:10px auto; }
.booking-text-form-time-double{ display: block; text-align: center; font-size: 85%;}
.booking-text-form-price { display:block; text-align:center; font-size:150%; margin:10px auto;}
.booking-text-form-group-id span:before{content:"№";}
.booking-text-form-group-id{display:none; text-align:center;}
.booking-text-form-payment-required{display:block; text-align:center;}
.booking-text-form-payment-required span:before{content:"Booking will occur after payment.";}
html:lang(en) .booking-text-form-payment-required span:before{content:"Booking will occur after payment.";}
html:lang(uk) .booking-text-form-payment-required span:before{content:"Бронювання відбудеться після оплати.";}
html:lang(pl) .booking-text-form-payment-required span:before{content:"Rezerwacja odbędzie się po dokonaniu płatności.";}
html:lang(ru) .booking-text-form-payment-required span:before{content:"Бронирование произойдет после оплаты.";}  
    
.booking-slot-start-order span{display:inline-block; color:#efece7; text-decoration:none; font-family: "Roboto", system-ui;
    font-weight: 600; font-size:var( --font-small20);
    font-style: normal; text-align:center; border:none; background:#887554; line-height:var(--line-height50); padding:0px 0px; width:100%;  text-transform:uppercase;
}
.booking-slot-start-order span:before{ content:"";}
		 												  
																			  
.booking-slot-start-order span:hover{ background:none!important; color:#fff!important; position:relative!important; }
.booking-slot-start-order span:hover:before{ content:""; border-top:4px solid #887554; border-left:4px solid #887554; position:absolute; top:0px; left:0px; width:100%; height: 100%;}
.booking-slot-start-order span:hover:after{ content:""; border-bottom:4px solid #887554; border-right:4px solid #887554; position:absolute; bottom:0px; right:0px; width:100%; height: 100%;} 
    
    
.booking-calendar-weekdays{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    max-width: 280px;
    text-align: center; 
}
.booking-calendar-weekday {
    padding: 8px;
    border: 1px solid #fefefe;
    background: #fff;
    font-size: 10px;
    max-width: 36px;
}
/*BOOKING BLOCK 2 end  */