/* BOOKING FORM STYLES Paste this into your css/ folder (e.g. css/booking-form.css) then link it in index.html's : */ .booking-form-section { padding: 60px 20px; max-width: 600px; margin: 0 auto; } .booking-form-container h2 { font-size: 28px; margin-bottom: 8px; text-align: center; } .booking-form-subtitle { text-align: center; color: #666; margin-bottom: 30px; } .form-group { margin-bottom: 18px; flex: 1; } .form-row { display: flex; gap: 16px; } .form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; } .form-group input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; box-sizing: border-box; } .form-group input:focus { outline: none; border-color: #444; } #booking-submit-btn { width: 100%; padding: 14px; background-color: #1a1a1a; color: #fff; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 10px; } #booking-submit-btn:hover { background-color: #333; } #booking-submit-btn:disabled { background-color: #999; cursor: not-allowed; } .booking-form-message { margin-top: 16px; padding: 12px; border-radius: 6px; text-align: center; font-size: 14px; display: none; } .booking-form-message.success { display: block; background-color: #d4edda; color: #155724; } .booking-form-message.error { display: block; background-color: #f8d7da; color: #721c24; } @media (max-width: 500px) { .form-row { flex-direction: column; gap: 0; } }