/* Global Styles */
body { font-family: 'Poppins', sans-serif; background: #fff; margin: 0; padding: 0; }
.container { padding: 10px; max-width: 1080px; margin: auto; }
h2 { font-size: 24px; }

/* Slot detail */
.slot-detail { margin-bottom: 20px; }
.slot-detail h2 { margin-bottom: 10px; }
.slot-detail p { margin: 5px 0; }

/* Reservations List */
.reservations-list { margin-top: 20px; }
.reservation-item { padding: 10px; border: 1px solid #ccc; margin-bottom: 10px; border-radius: 5px; }
.reservation-item h3 { margin: 0; font-size: 16px; }
.reservation-item p { margin: 5px 0; }

/* Form Styles */
.form-container { margin-bottom: 20px; }
.form-container label { font-weight: 600; margin-bottom: 5px; display: block; }
.form-container input, .form-container select { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; }
.form-container input[type="submit"] { background-color: #FF8800; color: #fff; border: none; cursor: pointer; }
.form-container input[type="submit"]:hover { background-color: #E07000; }

/* Message and Buttons */
.message { background-color: #4CAF50; color: white; padding: 10px; margin-bottom: 20px; border-radius: 5px; }
.back-button, .button { background-color: #FF8800; color: #fff; text-decoration: none; padding: 10px 20px; border-radius: 5px; display: inline-block; margin-top: 20px; }
.back-button:hover, .button:hover { background-color: #E07000; }

/* Slot List Styles */
.slot { border-radius: 8px; padding: 15px; margin-bottom: 12px; color: #fff; position: relative; }
.slot.empty { background-color: #777; }
.slot.booked { background-color: #4CAF50; }

.slot-date { font-weight: 600; font-size: 20px; }

.buttons { position: absolute; bottom: 8px; right: 8px; padding-top: 5px; }
.buttons a { color: #fff; text-decoration: none; padding: 4px 8px; font-size: 18px; }
.buttons a:hover { opacity: 0.7; }