/* ==========================================================================
   Form Styles (reserve.html)
   ========================================================================== */
.form-container { max-width: 800px; margin: 0 auto; padding: 80px 5% 150px; }
.form-head { text-align: center; margin-bottom: 80px; }
.form-head p { color: var(--color-text-light); font-size: 14px; line-height: 1.8; }
.form-group { margin-bottom: 50px; }
.form-label { display: block; font-family: var(--font-serif); font-size: 16px; margin-bottom: 15px; letter-spacing: 0.1em; color: var(--color-accent); }
.form-label .req { display: inline-block; font-family: var(--font-sans); font-size: 10px; background: var(--color-primary); color: #fff; padding: 3px 8px; margin-left: 10px; vertical-align: middle; letter-spacing: 0; }
.form-label .opt { display: inline-block; font-family: var(--font-sans); font-size: 10px; background: #eee; color: #888; padding: 3px 8px; margin-left: 10px; vertical-align: middle; letter-spacing: 0; }
.form-control { width: 100%; border: none; border-bottom: 1px solid #ddd; background: transparent; padding: 15px 5px; font-size: 16px; font-family: var(--font-sans); color: var(--color-text); transition: 0.3s; border-radius: 0; }
.form-control:focus { outline: none; border-bottom-color: var(--color-primary); }
.form-control::placeholder { color: #ccc; font-weight: 300; }
textarea.form-control { resize: vertical; min-height: 100px; }

/* Custom Checkbox/Radio */
.form-options { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 10px; }
.opt-label { display: flex; align-items: center; cursor: pointer; font-size: 15px; gap: 10px; color: var(--color-text-light); transition: 0.3s; }
.opt-label:hover { color: var(--color-text); }
.opt-label input[type="radio"], .opt-label input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border: 1px solid #ddd; outline: none; transition: 0.3s; position: relative; cursor: pointer; flex-shrink: 0; background: #fff; }
.opt-label input[type="radio"] { border-radius: 50%; }
.opt-label input[type="checkbox"] { border-radius: 0; } /* Sharp edges for architecture feel */
.opt-label input:checked { border-color: var(--color-primary); background: var(--color-primary); }
.opt-label input[type="radio"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: #fff; border-radius: 50%; }
.opt-label input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 5px; height: 10px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; }

.form-submit { text-align: center; margin-top: 80px; }
.form-submit button { display: inline-flex; align-items: center; justify-content: center; padding: 20px 60px; background: var(--color-accent); color: #fff; border: 1px solid var(--color-accent); font-family: var(--font-sans); font-size: 16px; letter-spacing: 0.2em; cursor: pointer; transition: 0.4s; position: relative; overflow: hidden; z-index: 1; }
.form-submit button::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--color-bg); transition: 0.4s; z-index: -1; }
.form-submit button:hover { color: var(--color-accent); }
.form-submit button:hover::before { width: 100%; }

@media (max-width: 768px) {
    .form-container { padding: 60px 5% 100px; }
    .form-options { gap: 15px; flex-direction: column; }
    .form-submit button { width: 100%; }
}