/* ── Hospital Appointment Form Styles ───────────────────────────────────────── */
:root {
    --hab-primary: #003087;
    --hab-accent:  #00AEEF;
    --hab-light:   #f0f7ff;
    --hab-border:  #d1e3f8;
    --hab-error:   #ef4444;
    --hab-success: #10b981;
    --hab-radius:  10px;
    --hab-font:    'Noto Sans', 'Segoe UI', sans-serif;
}

.hab-wrap {
    max-width: 780px;
    margin: 0 auto;
    font-family: var(--hab-font);
    color: #1a2540;
}

/* Header */
.hab-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--hab-primary);
    color: #fff;
    padding: 24px 28px;
    border-radius: var(--hab-radius) var(--hab-radius) 0 0;
}
.hab-header .hab-icon { font-size: 36px; }
.hab-header h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.hab-header p  { margin: 0; opacity: .8; font-size: 14px; }

/* Form */
#hab-form {
    background: #fff;
    border: 1px solid var(--hab-border);
    border-top: none;
    border-radius: 0 0 var(--hab-radius) var(--hab-radius);
    padding: 28px;
}

.hab-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--hab-primary);
    border-bottom: 2px solid var(--hab-light);
    padding-bottom: 8px;
    margin: 24px 0 16px;
}
.hab-section-title:first-child { margin-top: 0; }

.hab-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.hab-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.hab-field label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #374151;
}

.hab-field .req { color: var(--hab-error); }
.hab-field .hab-optional { font-weight: 400; color: #9ca3af; font-size: 12px; }

.hab-field input,
.hab-field select,
.hab-field textarea {
    border: 1.5px solid var(--hab-border);
    border-radius: 7px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--hab-font);
    color: #1a2540;
    transition: border-color .2s, box-shadow .2s;
    background: #fafcff;
    outline: none;
}

.hab-field input:focus,
.hab-field select:focus,
.hab-field textarea:focus {
    border-color: var(--hab-accent);
    box-shadow: 0 0 0 3px rgba(0,174,239,.15);
    background: #fff;
}

.hab-field input.error,
.hab-field select.error,
.hab-field textarea.error {
    border-color: var(--hab-error);
}

.hab-error {
    font-size: 12px;
    color: var(--hab-error);
    margin-top: 4px;
    min-height: 16px;
}

/* Submit button */
.hab-btn {
    display: block;
    width: 100%;
    background: var(--hab-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: background .2s, transform .1s;
    font-family: var(--hab-font);
    letter-spacing: .02em;
}
.hab-btn:hover   { background: #00429e; }
.hab-btn:active  { transform: scale(.99); }
.hab-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Success message */
.hab-success {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ecfdf5;
    border: 1.5px solid var(--hab-success);
    border-radius: var(--hab-radius);
    padding: 18px 22px;
    margin-bottom: 20px;
    font-size: 14px;
}
.hab-success span { font-size: 28px; }
.hab-success strong { display: block; color: var(--hab-success); margin-bottom: 4px; }

/* Responsive */
@media (max-width: 600px) {
    .hab-grid-2 { grid-template-columns: 1fr; }
    #hab-form    { padding: 18px; }
    .hab-header  { padding: 18px; }
}