.artotel-booking-form {
font-family: "Inter", Arial, sans-serif;
display: flex;
flex-direction: row;
gap: 1em;
padding: 10px;
background: rgba(255, 255, 255, 1);
border-radius: 5px;
color: #333;
position: relative;
}
.booking-field {
display: flex;
flex-direction: column;
}
.room-count,
.guest-count {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.room-count span,
.guest-count span {
min-width: 50px;
text-align: center;
}
button.plus,
button.minus {
background: #333;
color: white;
border: none;
width: 30px;
height: 30px;
font-size: 18px;
cursor: pointer;
border-radius: 4px;
}
.room-minus, .room-plus, .adult-minus, .adult-plus, .child-minus, .child-plus{
padding: 0px;
background: none;
color: #000;
font-size: 1.5rem;
border: none;
}
.room-minus:hover, .room-plus:hover, .adult-minus:hover, .adult-plus:hover, .child-minus:hover, .child-plus:hover{
border: none;
}
.booking-search-btn {
background: #6b4c3b;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
font-weight: bold;
border-radius: 4px;
align-self: flex-start;
}
.booking-fields-wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: left;
margin-bottom: 0;
padding: 0;
}
.booking-fields-wrapper label{
color: rgb(108,117,125);
}
.booking-field {
padding: 0 15px;
box-sizing: border-box;
}
.booking-dates{
min-width: 20em;
max-width: 320px;
}
.booking-guests{
min-width: 15em;
max-width: 15em;
}
.booking-field label {
display: block;
margin-bottom: 8px;
margin: 0;
padding: 0;
font-size: 13px;
line-height: 25px;
letter-spacing: normal;
}
.booking-field label i {
color: #000;
}
.summary-display {
cursor: pointer;
padding: 10px;
border-bottom: 1px solid #000;
font-size: 15px;
height: 45px;
line-height: 25px;
font-weight: 700;
}
.rooms-details {
max-height: 400px;
overflow-y: auto;
position: absolute;
margin: 75px 0px;
width: 17rem;
padding: 15px;
background: #fff;
border-radius: 10px;
z-index: 9999;
} .rooms-details::-webkit-scrollbar {
width: 6px;
}
.rooms-details::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 3px;
}
.room-selector{
border-bottom: 1px solid #d1d1d1;
padding-bottom: 1rem !important;
}
.room-selector,
.guest-control {
display: flex;
align-items: center;
justify-content: space-between;
margin: 5px;
font-size: 15px;
padding: 0px;
line-height: 15px;
}
.room-numbering {
font-size: 0.7rem;
padding-left: 0.3rem;
color: rgb(108, 117, 125);
}
.guest-control .labelctrl{
width: 6.5rem;
}
.room-item {
margin: 0px;
padding: 0px;
line-height: 30px;
font-size: initial;
}
button {
background: #333;
color: #fff;
border: none;
padding: 5px 12px;
font-size: 14px;
border-radius: 4px;
cursor: pointer;
}
.booking-submit {
text-align: center;
}
.booking-search-btn, .booking-search-btn:hover {
background-color: #000;
color: white;
border: none;
padding: 10px 25px;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
margin-top: 30px;
}
.booking-search-btn:hover i{
color: #fff !important;
}
#stay-dates{
width: 50em;
color: #000;
font-weight: 700;
height: 3em;
}
span.flatpickr-day, span.flatpickr-day.prevMonthDay, span.flatpickr-day.nextMonthDay{
border: none !important;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay, .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus{
background-color: #000 !important;
color: #fff !important;
} @media (max-width: 768px) {
.booking-fields-wrapper {
flex-direction: column;
align-items: center;
}
.booking-field {
flex: 1 1 1px;
min-width: 25em;
max-width: 320px;
border-radius: 8px;
padding: 0 15px;
box-sizing: border-box;
}
.artotel-booking-form{
width: 30em;
}
#booking-form{
width: 100%;
}
}
@media (max-width: 640px) {
.artotel-booking-form{
width: 60em;
}
.booking-field {
flex: 1 1 1px;
min-width: 58em;
}
.room-item{
font-size: 15px;
}
.rooms-details {
max-height: 200px;
}
}