/*
 * NHS.UK frontend styling for WPForms.
 *
 * WPForms' own form stylesheets are dropped from the print queue in
 * functions.php (n3inhs_remove_wpforms_styles), so these rules own the full
 * appearance of embedded forms. The declarations mirror the matching .nhsuk-*
 * components in nhsuk.css (v10.5.2): input, button, select, textarea, label,
 * fieldset, radios and checkboxes.
 *
 * Selectors target WPForms' own classes (.wpforms-field-*) rather than the
 * .wpforms-render-modern container, so they apply equally to Classic markup.
 * Everything is scoped under .wpforms-container to avoid affecting theme chrome.
 *
 * This file is loaded on the front end and in the block editor canvas alike, so
 * that the form-selector block's preview matches its published output. The one
 * canvas-only difference in WPForms' markup is handled at the end of the file.
 */

/* Field group spacing — mimics .nhsuk-form-group. */

.wpforms-container .wpforms-field {
    box-sizing: border-box;
    margin-bottom: 24px;
    padding: 0;
}

/*
 * Fieldset reset — WPForms groups radios and checkboxes in a fieldset, and wraps
 * the whole form in one more in the block editor preview. None of them should
 * draw the browser's default box.
 */

.wpforms-container fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

/* Labels and fieldset legends — .nhsuk-label / .nhsuk-fieldset__legend. */

.wpforms-container .wpforms-field-label {
    display: block;
    color: #212b32;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 4px;
    padding: 0;
}

.wpforms-container legend.wpforms-field-label {
    display: table;
    max-width: 100%;
    margin-bottom: 8px;
    white-space: normal;
}

/* Hint / sublabel text — .nhsuk-hint. */

.wpforms-container .wpforms-field-description,
.wpforms-container .wpforms-field-sublabel {
    color: #4c6272;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 8px;
}

/* Text inputs and textareas — .nhsuk-input / .nhsuk-textarea. */

.wpforms-container .wpforms-field-text input,
.wpforms-container .wpforms-field-number input,
.wpforms-container .wpforms-field-email input,
.wpforms-container .wpforms-field-phone input,
.wpforms-container .wpforms-field-url input,
.wpforms-container .wpforms-field-name input {
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid #4c6272;
    border-radius: 0;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: 400;
    height: 2.5rem;
    line-height: 1.5;
    margin-top: 0;
    padding: 0.25rem;
    width: 100%;
}

.wpforms-container .wpforms-field-textarea textarea {
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid #4c6272;
    border-radius: 0;
    box-sizing: border-box;
    display: block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    min-height: 10rem;
    padding: 0.25rem;
    resize: vertical;
    width: 100%;
}

/* Selects — .nhsuk-select. */

.wpforms-container .wpforms-field-select select {
    background-color: #fff;
    border: 2px solid #4c6272;
    border-radius: 0;
    box-sizing: border-box;
    color: #212b32;
    font-size: 1rem;
    font-weight: 400;
    height: 2.5rem;
    line-height: 1.25;
    max-width: 100%;
    min-width: 100%;
    padding: 0.25rem;
}

/* Focus state shared by all text controls — NHS yellow outline. */

.wpforms-container .wpforms-field input:focus,
.wpforms-container .wpforms-field textarea:focus,
.wpforms-container .wpforms-field select:focus {
    border: 2px solid #212b32;
    box-shadow: inset 0 0 0 2px #212b32;
    outline: 4px solid #ffeb3b;
    outline-offset: 0;
}

/*
 * Radios and checkboxes — .nhsuk-radios / .nhsuk-checkboxes custom controls.
 *
 * WPForms renders `fieldset > legend + ul > li > (input + label)`, which is the
 * same sibling order the NHS custom controls rely on: the native input is made
 * invisible and overlaid on a circle/box drawn with the label's ::before, and a
 * dot/tick drawn with ::after that is revealed when :checked.
 */

.wpforms-container .wpforms-field-radio ul,
.wpforms-container .wpforms-field-checkbox ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wpforms-container .wpforms-field-radio li,
.wpforms-container .wpforms-field-checkbox li {
    display: flex;
    flex-wrap: wrap;
    margin-top: 6px;
    position: relative;
}

.wpforms-container .wpforms-field-radio li:first-child,
.wpforms-container .wpforms-field-checkbox li:first-child {
    margin-top: 0;
}

.wpforms-container .wpforms-field-radio li input[type="radio"],
.wpforms-container .wpforms-field-checkbox li input[type="checkbox"] {
    cursor: pointer;
    height: 2.75rem;
    margin: 0;
    opacity: 0;
    width: 2.75rem;
    z-index: 1;
}

.wpforms-container .wpforms-field-radio li label.wpforms-field-label-inline,
.wpforms-container .wpforms-field-checkbox li label.wpforms-field-label-inline {
    align-self: center;
    box-sizing: border-box;
    cursor: pointer;
    margin-bottom: 0;
    max-width: calc(100% - 2.75rem);
    padding: 6px 0.75rem;
    touch-action: manipulation;
}

/* The circle (radio) / box (checkbox). */

.wpforms-container .wpforms-field-radio li label.wpforms-field-label-inline::before,
.wpforms-container .wpforms-field-checkbox li label.wpforms-field-label-inline::before {
    background: #fff;
    border: 2px solid #4c6272;
    box-sizing: border-box;
    content: "";
    height: 2.5rem;
    left: 0.125rem;
    position: absolute;
    top: 0.125rem;
    width: 2.5rem;
}

.wpforms-container .wpforms-field-radio li label.wpforms-field-label-inline::before {
    border-radius: 50%;
}

/* The dot (radio) / tick (checkbox), hidden until checked. */

.wpforms-container .wpforms-field-radio li label.wpforms-field-label-inline::after {
    background: currentcolor;
    border: 0.625rem solid;
    border-radius: 50%;
    content: "";
    height: 0;
    left: 0.75rem;
    opacity: 0;
    position: absolute;
    top: 0.75rem;
    width: 0;
}

.wpforms-container .wpforms-field-checkbox li label.wpforms-field-label-inline::after {
    background: transparent;
    border: solid;
    border-top-color: transparent;
    border-width: 0 0 0.25rem 0.25rem;
    box-sizing: border-box;
    content: "";
    height: 0.625rem;
    left: 0.75rem;
    opacity: 0;
    position: absolute;
    top: 0.9375rem;
    transform: rotate(-45deg);
    width: 1.375rem;
}

.wpforms-container .wpforms-field-radio li input[type="radio"]:checked + label.wpforms-field-label-inline::after,
.wpforms-container .wpforms-field-checkbox li input[type="checkbox"]:checked + label.wpforms-field-label-inline::after {
    opacity: 1;
}

/* Focus ring on the custom control. */

.wpforms-container .wpforms-field-radio li input[type="radio"]:focus + label.wpforms-field-label-inline::before {
    border: 4px solid #212b32;
    box-shadow: 0 0 0 0.3125rem #ffeb3b;
    outline: 4px solid transparent;
    outline-offset: 1px;
}

.wpforms-container .wpforms-field-checkbox li input[type="checkbox"]:focus + label.wpforms-field-label-inline::before {
    border: 4px solid #212b32;
    box-shadow: 0 0 0 4px #ffeb3b;
    outline: 4px solid transparent;
    outline-offset: 1px;
}

/* Submit button — .nhsuk-button. */

.wpforms-container button.wpforms-submit {
    -webkit-appearance: none;
    appearance: none;
    background-color: #007f3b;
    border: 2px solid transparent;
    border-radius: 0.25rem;
    box-shadow: 0 4px 0 #00401e;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1875;
    margin-top: 0;
    min-height: 2.75rem;
    overflow: visible;
    padding: 0.625rem 1rem;
    position: relative;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

@media (min-width: 40.0625em) {
    .wpforms-container button.wpforms-submit {
        width: auto;
    }
}

.wpforms-container button.wpforms-submit:hover {
    background-color: #00662f;
    text-decoration: none;
}

.wpforms-container button.wpforms-submit:active {
    background-color: #00401e;
    top: 4px;
}

.wpforms-container button.wpforms-submit:focus:not(:active),
.wpforms-container button.wpforms-submit:focus:not(:active):hover {
    background-color: #ffeb3b;
    box-shadow: 0 4px 0 0 #212b32;
    color: #212b32;
    outline: 4px solid transparent;
    outline-offset: 4px;
}

/*
 * Error states — .nhsuk-form-group--error / .nhsuk-input--error /
 * .nhsuk-error-message. WPForms adds .wpforms-has-error to the field container,
 * .wpforms-error to the invalid control, and inserts <em class="wpforms-error">
 * (a <label> in older versions) with the message.
 */

.wpforms-container .wpforms-field.wpforms-has-error {
    border-left: 4px solid #d5281b;
    padding-left: 16px;
}

.wpforms-container .wpforms-field input.wpforms-error,
.wpforms-container .wpforms-field textarea.wpforms-error,
.wpforms-container .wpforms-field select.wpforms-error {
    border-color: #d5281b;
}

.wpforms-container .wpforms-field em.wpforms-error,
.wpforms-container .wpforms-field label.wpforms-error {
    clear: both;
    color: #d5281b;
    display: block;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 16px;
    margin-top: 0;
}

/*
 * Block editor preview.
 *
 * WPForms renders the same server-side markup in the editor as on the front end,
 * but wraps it in a disabled fieldset so the preview isn't interactive, and adds
 * .wpforms-gutenberg-form-selector to the container. The disabled state makes
 * browsers grey out controls that have no colours of their own — WPForms' own
 * stylesheet normally masks that with a blanket reset, and we suppress it.
 *
 * Inputs and textareas are the affected controls: like .nhsuk-input and
 * .nhsuk-textarea, they deliberately leave text and background colour to the
 * browser, so the Field/FieldText system colours restore exactly what the front
 * end renders rather than hardcoding a substitute. Selects and the submit button
 * set both colours explicitly above, so they need nothing here.
 *
 * These selectors only ever match in the editor.
 */

.wpforms-gutenberg-form-selector .wpforms-field input:disabled,
.wpforms-gutenberg-form-selector .wpforms-field textarea:disabled {
    background-color: Field;
    color: FieldText;
}