/* booking-form.css — the shared look of the WPForms booking forms.
   ADDED 2026-10-07, split out of appointment.css the same day when the health
   package pages got the same form design. Used by page-make-an-appointment.php
   and single-health_package.php; scoped to their .ah-booking wrapper.

   The forms are WPForms "modern" markup, themed through its --wpforms-*
   variables where they exist. Several rules carry !important because the DB
   custom-CSS snippet (Simple Custom CSS and JS, post 1061) forces every WPForms
   input to `height: 30px !important`, field padding to 5px and the submit
   button colour, site-wide; scoping to .ah-booking lets only these pages opt out. */

.ah-booking {
    --bk-teal: #009d8b;        /* logo teal: interactive */
    --bk-teal-dark: #00786a;   /* text-safe teal (5.4:1 on white) */
    --bk-navy: #2c3d8f;        /* headings */
    --bk-ink: #243352;         /* body text */
    --bk-muted: #5b6b85;       /* secondary text */
    --bk-aqua: #e6f6f7;        /* tint */
    --bk-line: #d7e9ea;        /* hairlines */
    --bk-field-line: #cbdcdf;  /* input borders: 3:1 on white for non-text contrast */
    --bk-radius: 22px;

    color: var(--bk-ink);
}

.ah-booking .wpforms-container {
    --wpforms-field-border-radius: 10px;
    --wpforms-field-border-color: var(--bk-field-line);
    --wpforms-field-background-color: #ffffff;
    --wpforms-field-text-color: var(--bk-ink);
    --wpforms-field-size-input-height: 46px;
    --wpforms-field-size-font-size: 15px;
    --wpforms-label-color: var(--bk-ink);
    --wpforms-label-size-font-size: 14px;
    --wpforms-label-sublabel-color: var(--bk-muted);
    --wpforms-label-error-color: #c0392b;
    --wpforms-button-background-color: var(--bk-teal);
    --wpforms-button-text-color: #ffffff;
    --wpforms-button-border-radius: 999px;
    margin: 0 !important;
}

/* Two columns; everything full width unless the form marks it ah-appt-half
   (set by _alliance-tools/migrate-appointment-form.php). */
.ah-booking .wpforms-field-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
}

.ah-booking .wpforms-field-container > .wpforms-field {
    grid-column: 1 / -1;
    padding: 9px 0 !important;
}

.ah-booking .wpforms-field-container > .wpforms-field.ah-appt-half {
    grid-column: auto;
}

.ah-booking .wpforms-field-label {
    margin-bottom: 7px !important;
    font-weight: 600 !important;
}

.ah-booking .wpforms-field-description {
    font-size: 13px !important;
    color: var(--bk-muted) !important;
}

/* Text-like inputs and selects. Radios are left to WPForms' own sizing. */
.ah-booking div.wpforms-container-full input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=hidden]),
.ah-booking div.wpforms-container-full select {
    height: 46px !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 10px !important;
    border: 1px solid var(--bk-field-line) !important;
    background-color: #ffffff;
    color: var(--bk-ink);
    font-size: 15px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ah-booking div.wpforms-container-full select:disabled {
    background-color: #f3f6f8;
    color: var(--bk-muted);
    cursor: not-allowed;
}

.ah-booking div.wpforms-container-full input:not([type=radio]):not([type=checkbox]):focus,
.ah-booking div.wpforms-container-full select:focus {
    border-color: var(--bk-teal) !important;
    box-shadow: 0 0 0 3px rgba(0, 157, 139, .18) !important;
    outline: none;
}

.ah-booking div.wpforms-container-full input.wpforms-error,
.ah-booking div.wpforms-container-full select.wpforms-error {
    border-color: #c0392b !important;
}

/* Date + time sit side by side inside one field. The field is "medium" (60%
   wide) in the form; let the pair fill the row like the inputs above it. */
.ah-booking .wpforms-field-date-time .wpforms-field-row {
    max-width: 100% !important;
    gap: 20px;
}

/* WPForms' clearfix ::before/::after become empty flex items inside a flex
   row, each taking a gap: the pair was pushed 20px in from the left. */
.ah-booking .wpforms-field-date-time .wpforms-field-row::before,
.ah-booking .wpforms-field-date-time .wpforms-field-row::after {
    display: none !important;
}

.ah-booking .wpforms-field-date-time .wpforms-field-row-block {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 !important;
}

.ah-booking .wpforms-field-date-time input {
    margin: 0 !important;
}

/* Sex radios: give them room, align with the 46px inputs beside them. */
.ah-booking .wpforms-field-radio ul {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px 22px;
    min-height: 46px;
    align-items: center;
    margin: 0 !important;
}

.ah-booking .wpforms-field-radio li label {
    color: var(--bk-ink) !important;
    font-size: 15px !important;
}

/* Section headings ("Patient details" / "Appointment details"). */
.ah-booking .wpforms-field-divider.ah-appt-section {
    padding: 22px 0 4px !important;
    border-top: 0 !important; /* WPForms rules off every divider after the first */
    margin-top: 0 !important; /* ...and spaces it 30px down; the padding above is the spacing */
}

/* WPForms prints the divider's label AND an <h3> with the same text; the h3
   is the heading, the label is a duplicate. */
.ah-booking .wpforms-field-divider.ah-appt-section > .wpforms-field-label {
    display: none !important;
}

.ah-booking .wpforms-field-divider.ah-appt-section:first-child {
    padding-top: 6px !important;
}

.ah-booking .wpforms-field-divider.ah-appt-section h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bk-teal-dark) !important;
}

.ah-booking .wpforms-field-divider.ah-appt-section h3::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bk-line);
}

/* Submit. The DB snippet colours this with :not(:hover):not(:active) and
   !important, so match that specificity here. */
.ah-booking .wpforms-submit-container {
    padding-top: 22px !important;
}

.ah-booking div.wpforms-container-full button[type=submit],
.ah-booking div.wpforms-container-full button[type=submit]:not(:hover):not(:active) {
    height: 50px !important;
    padding: 0 38px !important;
    border-radius: 999px !important;
    background-color: var(--bk-teal) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 14px 28px -14px rgba(0, 157, 139, .7);
    transition: background-color .2s ease, transform .2s ease;
}

.ah-booking div.wpforms-container-full button[type=submit]:hover,
.ah-booking div.wpforms-container-full button[type=submit]:focus-visible {
    background-color: var(--bk-teal-dark) !important;
    transform: translateY(-1px);
}

.ah-booking .wpforms-confirmation-container-full {
    border-radius: 14px;
    border-color: rgba(0, 157, 139, .35) !important;
    background: var(--bk-aqua) !important;
    color: var(--bk-ink) !important;
}

@media (max-width: 575px) {
    .ah-booking .wpforms-field-container {
        grid-template-columns: 1fr;
    }

    .ah-booking .wpforms-field-container > .wpforms-field.ah-appt-half {
        grid-column: 1 / -1;
    }

    .ah-booking div.wpforms-container-full button[type=submit],
    .ah-booking div.wpforms-container-full button[type=submit]:not(:hover):not(:active) {
        width: 100% !important;
    }
}