/* Entire page centered */ 
body { 
    font-family: 'Segoe UI', sans-serif; 
    background-color: #f5f5f5; 
    margin: 0; 
    padding: 0; 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
} 

/* Main container */ 
.booking-container { 
    background: linear-gradient(to bottom right, #fffdf2, #f1f1f1); 
    width: 100%; 
    max-width: 700px; 
    padding: 30px; 
    margin-top: 40px; 
    border-radius: 20px; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); 
    border: 1px solid #e3e3e3; 
} 

h2 { 
    text-align: center; 
    margin-bottom: 20px; 
} 

.form-section { 
    margin-bottom: 20px; 
} 

label { 
    display: block; 
    margin-bottom: 6px; 
    font-weight: 600; 
} 

input[type="date"], 
select, 
button { 
    width: 100%; 
    padding: 10px; 
    font-size: 16px; 
    border-radius: 8px; 
    border: 1px solid #ccc; 
    box-sizing: border-box; 
    margin-bottom: 10px; 
} 

input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}





/* Button Styles */
button {
  background-color: #f6c90e;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover:not(:disabled) {
  background-color: #e0b800;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* Bed layout container */
.bed-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  justify-content: center; /* center all beds neatly */
}

/* Bed box */
.bed {
  flex: 1 1 calc(25% - 12px); /* auto width, 4 per row on desktop */
  max-width: 120px;           /* prevents oversized beds */
  min-width: 80px;            /* keeps from being too tiny */
  background: #ffeb99;
  border: 2px solid #f2d16b;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #444;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  text-align: center;
}

/* Hover effect */ 
.bed:hover { 
    transform: scale(1.05); 
} 

/* Selected */ 
.bed.selected { 
    background: #f6c90e; 
    border-color: #d4aa00; 
    color: #000; 
    transform: scale(1.1); 
} 

/* Booked (unavailable) */ 
.bed.booked { 
    background: #dcdcdc; 
    border-color: #bcbcbc; 
    color: #888; 
    cursor: not-allowed; 
    text-decoration: line-through; 
    font-style: italic; 
    pointer-events: none; 
} 

/* Booking animation */ 
.bed.flash { 
    animation: flash 0.6s ease-in-out; 
} 

@keyframes flash { 
    0% { 
        background-color: #f6c90e; 
    } 
    50% { 
        background-color: #a2fca2; 
    } 
    100% { 
        background-color: #f6c90e; 
    } 
} 

/* Legend section */ 
.legend { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 30px; 
    margin-top: 20px; 
    font-size: 14px; 
} 

.legend div { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
} 

.legend-box { 
    width: 20px; 
    height: 20px; 
    border-radius: 4px; 
    border: 2px solid #999; 
} 

.legend-box.available { 
    background-color: #ffeb99; 
    border-color: #f2d16b; 
} 

.legend-box.booked { 
    background-color: #dcdcdc; 
    border-color: #bcbcbc; 
} 

.legend-box.selected { 
    background-color: #f6c90e; 
    border-color: #d4aa00; 
} 

.legend-label { 
    color: #555; 
    font-weight: 500; 
}

input[type="text"], select, input[type="date"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}