/*
 * CWH form controls — text, date, email, number, textarea, native <select>.
 *
 * Loaded globally via sharedAssets/sharedCSS.php. Mirrors the trigger styling
 * of bootstrap-multiselect (bootstrap-multiselect-bs5.css) and Select2
 * (select2.css) so every input on a form sits on the same baseline:
 *   - same height
 *   - same border (cwh-border, 10px radius)
 *   - same font family / weight / size
 *   - same dark-blue text colour
 *   - same focus state (open-blue border + soft brand-blue glow)
 *
 * !important is used on colour/border/font properties because per-portal
 * theme.min.css and Bootstrap's own .form-control rules (loaded earlier in
 * each portal head) target the same selectors.
 */

@import url('brandingPalette.css');

/* ── Base form-control (covers text, email, password, search, number, tel,
        url, date, time, datetime-local, month, week, and textarea) ──────── */

.form-control,
.form-control-sm,
input.form-control,
textarea.form-control,
select.form-control,
select.form-select {
    height: calc(1.5em + 0.75rem + 2px);
    border: 1px solid var(--cwh-border) !important;
    border-radius: 10px !important;
    background-color: var(--cwh-white) !important;
    color: var(--cwh-dark-grey) !important;
    font-family: var(--cwh-font-family) !important;
    font-weight: var(--cwh-font-medium);
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    box-shadow: none;
}

/* Textarea — height auto so it grows with rows attribute */
textarea.form-control {
    height: auto;
    min-height: calc(1.5em + 0.75rem + 2px);
}

/* Native <select> — give it the same chevron position as the styled controls */
select.form-control,
select.form-select {
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2300337e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* ── Placeholder text ────────────────────────────────────────────────────── */

.form-control::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--cwh-light-grey) !important;
    font-weight: var(--cwh-font-medium);
    opacity: 1; /* Firefox lowers placeholder opacity by default */
}

/* ── Focus state — matches the dropdown trigger focus ────────────────────── */

.form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
select.form-select:focus {
    border-color: var(--cwh-open-blue) !important;
    box-shadow: 0 0 0 0.15rem rgba(0, 51, 126, 0.10) !important;
    outline: 0;
    background-color: var(--cwh-white) !important;
    color: var(--cwh-dark-grey) !important;
}

/* ── Disabled / read-only ─────────────────────────────────────────────────── */

.form-control:disabled,
.form-control[readonly],
input.form-control:disabled,
input.form-control[readonly],
textarea.form-control:disabled,
textarea.form-control[readonly],
select.form-control:disabled {
    background-color: var(--cwh-white) !important;
    color: var(--cwh-light-grey) !important;
    cursor: not-allowed;
}

/* ── Labels above inputs ─────────────────────────────────────────────────── */

label,
.form-label {
    color: var(--cwh-dark-blue);
    font-family: var(--cwh-font-family);
    font-weight: var(--cwh-font-medium);
    font-size: 0.875rem;
    margin-bottom: 0.35rem;
}

/* ── Field-info icon + hover tooltip ─────────────────────────────────────────
 *
 * A small "why do we ask this?" affordance that sits INSIDE the field at the
 * right edge — the same spot a password-manager extension (e.g. Keeper) drops
 * its icon — vertically centred on the input. Hovering or keyboard-focusing it
 * reveals a short brand-styled bubble. Pure CSS (no JS init) so it works on
 * dynamically cloned rows (e.g. the booking participant step's clones).
 *
 *     <label for="email_1">Email <b style="color:red;">*</b></label>
 *     <div class="cwh-field-control">
 *         <input id="email_1" type="email" class="form-control form-control-sm cwh-has-info">
 *         <span class="cwh-field-info" tabindex="0" role="note"
 *               aria-label="Why we ask for your email">
 *             <i class="fa fa-info-circle" aria-hidden="true"></i>
 *             <span class="cwh-field-info__bubble">We use this to contact you about your booking.</span>
 *         </span>
 *     </div>
 *
 * Add .cwh-field-control--date on the wrapper for native date inputs so the
 * icon clears the browser's calendar-picker button.
 */
.cwh-field-control {
    position: relative;
}

/* formValidator injects the `.invalid-feedback` message as a sibling of the
 * input INSIDE this wrapper. Left in flow it grows the wrapper, which drags the
 * vertically-centred info icon (top: 50% of the wrapper) downward. Pull the
 * message out of flow so the wrapper stays the input's height and the icon
 * stays centred on the field; the message still renders just beneath it. */
.cwh-field-control .invalid-feedback {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
}

/* Reserve room at the right of the input so its text/value never runs under
 * the icon. */
.cwh-has-info {
    padding-right: 2rem !important;
}
/* Date input: fill the wrapper and show a pointer cursor so the whole field
 * reads as clickable. Height/padding match the sibling text inputs via the
 * shared `#msform input[type=date]` rule in booking-pharmacy.css
 * (min-height: 47px) — do NOT pin a height here or the date box renders shorter
 * than the others. */
.cwh-field-control--date .cwh-has-info {
    width: 100%;
    cursor: pointer;
}

/* Hide the visible calendar button but keep it clickable by stretching the
 * native picker indicator transparently across the whole input — clicking
 * anywhere in the field then opens the native date picker, no JS required.
 * (WebKit/Blink: Chrome, Edge, Safari. Firefox keeps its own native control.) */
.cwh-field-control--date .cwh-has-info::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    background: transparent;
}

.cwh-field-info {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    color: var(--cwh-open-blue);
    cursor: help;
    font-size: 0.95rem;
    line-height: 1;
}

/* The icon glyph itself sits at 50% opacity (subtle, like a password-manager
 * field icon) and brightens to full on hover/focus to read as interactive. */
.cwh-field-info > i {
    opacity: 0.5;
    transition: opacity 0.12s ease;
}
.cwh-field-info:hover > i,
.cwh-field-info:focus > i,
.cwh-field-info:focus-within > i {
    opacity: 1;
}

.cwh-field-info__bubble {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: max-content;
    max-width: 240px;
    padding: 8px 10px;
    background: var(--cwh-dark-blue);
    color: var(--cwh-white);
    font-family: var(--cwh-font-family);
    font-weight: var(--cwh-font-medium);
    font-size: 0.75rem;
    line-height: 1.35;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 51, 126, 0.20);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
    pointer-events: none;
}

/* Caret pointing up toward the info icon. */
.cwh-field-info__bubble::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 8px;
    border: 6px solid transparent;
    border-bottom-color: var(--cwh-dark-blue);
}

.cwh-field-info:hover .cwh-field-info__bubble,
.cwh-field-info:focus .cwh-field-info__bubble,
.cwh-field-info:focus-within .cwh-field-info__bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

/* ── Validation states (keep Bootstrap red/green semantics, brand-tinted) ── */

/* Red border on every invalid field. The cwh base border uses !important, so
 * the invalid state must too or the grey base border wins while unfocused. */
.form-control.is-invalid,
input.form-control.is-invalid,
textarea.form-control.is-invalid,
select.form-control.is-invalid {
    border-color: var(--cwh-danger) !important;
}

.form-control.is-invalid:focus,
input.form-control.is-invalid:focus,
textarea.form-control.is-invalid:focus,
select.form-control.is-invalid:focus {
    border-color: var(--cwh-danger) !important;
    box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.15) !important;
}

/* Fields that already carry our own right-aligned info icon (.cwh-has-info —
 * Email / DOB on the participant step) suppress Bootstrap's invalid background
 * icon so its red exclamation doesn't stack on top of the info icon. The red
 * border alone signals the error. Fields WITHOUT an info icon (names) keep
 * Bootstrap's icon as normal. */
.cwh-has-info.is-invalid,
.cwh-has-info.is-invalid:focus {
    background-image: none !important;
    padding-right: 2rem !important;
}

/* ── Radio / checkbox rows ───────────────────────────────────────────────────
 *
 * Shared component for a radio or checkbox followed by its label text, sized
 * and aligned the same everywhere. Browser-rendered radios sit at the text
 * baseline by default which leaves the label visually below the radio's
 * centre on multi-line layouts. Wrapping in `.cwh-radio-row` (or
 * `.cwh-checkbox-row`) flips that to a flexbox with explicit vertical
 * centring, brand-tinted accent colour, and consistent spacing.
 *
 * Use whenever you render `<input type="radio">` or `<input type="checkbox">`
 * alongside a label, instead of repeating the alignment rules per component.
 * Recommended markup — either inline with `<span>`:
 *
 *     <label class="cwh-radio-row">
 *         <input type="radio" name="example" value="yes">
 *         <span>Yes</span>
 *     </label>
 *
 * — or a separate `<label>` referencing the input by id:
 *
 *     <div class="cwh-radio-row">
 *         <input type="radio" id="example_yes" name="example" value="yes">
 *         <label for="example_yes">Yes</label>
 *     </div>
 *
 * The `<label>` inside the row inherits the override below so the global
 * `label { margin-bottom: 0.35rem; }` rule doesn't push the text off-centre.
 */

/* `.cwh-radio-row.cwh-radio-row` and `.cwh-checkbox-row.cwh-checkbox-row`
 * double-class their selectors to bump specificity above any per-portal
 * `form label { display: block }` resets that would otherwise collapse the
 * flex row back to a stacked layout. */
.cwh-radio-row.cwh-radio-row,
.cwh-checkbox-row.cwh-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0 0 6px;
    font-family: var(--cwh-font-family);
    font-size: 0.875rem;
    font-weight: var(--cwh-font-medium);
    color: var(--cwh-dark-blue);
    line-height: 1.3;
    user-select: none;
}

.cwh-radio-row:last-child,
.cwh-checkbox-row:last-child {
    margin-bottom: 0;
}

.cwh-radio-row input[type="radio"],
.cwh-checkbox-row input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--cwh-dark-blue);
    flex-shrink: 0;
    cursor: pointer;
}

/* Per-row label sits to the right of the input — strip the global label
 * margin-bottom so it stays centred on the radio's geometric middle, and
 * keep it clickable but not draggable. */
.cwh-radio-row > label,
.cwh-radio-row > span,
.cwh-checkbox-row > label,
.cwh-checkbox-row > span {
    margin: 0;
    line-height: 1.3;
    cursor: pointer;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
}

/* Disabled state — dim the whole row so the customer doesn't try to click it. */
.cwh-radio-row.is-disabled,
.cwh-checkbox-row.is-disabled,
.cwh-radio-row input:disabled,
.cwh-checkbox-row input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Vertical stack helper — use on a parent <div> when several radio rows
 * belong to the same question, so each row is its own line with consistent
 * spacing. */
.cwh-radio-group,
.cwh-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 0;
}