Rooms

Select Room
Standard Room
Double Room
Family Room

Check

/* General Styling for Inline Form */
.booking-form-inline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px;
background-color: #f8f9fa; /* Light modern background */
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
overflow-x: auto; /* Smooth scrolling for narrower spaces */
max-width: 100%;
}
/* Inputs and Select Styling */
.form-input {
padding: 6px 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
width: 100%;
max-width: 150px; /* Compact size */
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
background-color: #fff;
color: #000; /* Black text */
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-input:focus {
border-color: #007bff; /* Modern blue highlight */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
outline: none;
}
select.form-input {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 4 5’%3E%3Cpath fill=’%23000000′ d=’M2 0L0 2h4zm0 5L0 3h4z’/%3E%3C/svg%3E”) no-repeat right 8px center;
background-size: 10px;
}
/* Button Styling */
.form-button {
background-color: #198754; /* Green modern style */
color: #fff;
padding: 8px 14px;
font-size: 14px;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.form-button:hover {
background-color: #145f41; /* Darker green */
transform: scale(1.02); /* Slight hover effect */
}
/* Responsive Design */
@media (max-width: 768px) {
.booking-form-inline {
flex-wrap: wrap; /* Stack inputs for smaller screens */
gap: 5px;
}
.form-input {
max-width: 100%; /* Take full width on small screens */
font-size: 12px;
}
.form-button {
font-size: 13px;
padding: 6px 10px;
width: 100%; /* Full width for mobile */
}
}
@media (max-width: 480px) {
.form-input {
font-size: 12px;
padding: 5px 7px;
}
.form-button {
font-size: 12px;
}
}