@charset "utf-8";
.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-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;
    max-width: 36px;
    background: #fff;
}


.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:block; }
.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: 4px;
  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-slot-start-order span:after { content: "Book"; }
html:lang(en) .booking-slot-start-order span:after { content: "Book"; }
html:lang(uk) .booking-slot-start-order span:after { content: "Забронювати"; }
html:lang(pl) .booking-slot-start-order span:after { content: "Zarezerwuj"; }
html:lang(ru) .booking-slot-start-order span:after { content: "Забронировать"; }




.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:"Бронирование произойдет после оплаты.";}

#dialog-booking-modal-content select{padding:5px;}