/**
* 2007-2022 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author    Salman Hassan <miansalmanhassan@yahoo.com>
*  @copyright 2007-2022 Salman Hassan
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*
* Don't forget to prefix your containers with your own identifier
* to avoid any conflicts with others containers.
*/

.reservation-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2em;
  padding-top: 3em;
}
.reservation-details-section p {
  font-size: 18px;
}
.reservation-btn {
  font-size: 14pt;
  background-color: #000;
  border-color: #000;
}
.reservation-calendar {
  display: none;
  margin: 20px 20px;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
}
.reservation-datepicker {
  padding: 20px 15px;
  font-size: 18px;
}
.reservation-datepicker input {
  height: 30px;
}
ul.time-slots {
  display: inline-flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  background: #fff;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  padding: 10px 15px;
  margin: 0;
}
ul.time-slots li.time-slot {
  list-style: none;
}
ul.time-slots .slot {
  background: #fff;
  height: 40px;
  min-width: 110px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 10px 10px;
  border-radius: 0px;
  cursor: pointer;
  border: 2px solid rgb(0, 0, 0);
  transition: all 0.2s ease;
}
ul.time-slots .slot .slot-title {
  padding: 0 10px;
}
ul.time-slots .slot.disabled {
  border: 2px solid lightgrey;
  cursor: not-allowed;
}
ul.time-slots .slot.chosen {
  border: 2px solid #48a868;
  cursor: not-allowed;
}
.time-slots input[type="radio"] {
  display: none;
}
.slot-radio-button:checked:checked ~ .slot {
  border-color: #000000;
  background: #000000;
}

ul.time-slots .slot span {
  font-size: 18px;
  color: #000000;
}
ul.time-slots .slot.disabled span {
  color: #808080;
}
ul.time-slots .slot.chosen span {
  color: #48a868;
}
.slot-radio-button:checked:checked ~ .slot span {
  color: #fff;
}
.reserve-btn {
  text-align: right;
}
.reserve-btn .btn {
  margin-right: 15px;
  margin-bottom: 15px;
  text-transform: uppercase;
}

@media only screen and (max-width: 926px) {
  .reservation-section {
    grid-template-columns: auto;
  }
  .reservation-section .reservation-btn {
    margin-top: 1em;
  }
}