/*!
 * BUx NDS — WPForms skin
 *
 * Makes WPForms (Lite/Pro, modern + classic markup) look native to the
 * NDS design system used by the theme. Loaded only when WPForms prints its
 * own stylesheet (see inc/wpforms-nds.php), always after it.
 *
 * Rules:
 *  - Colours, spacing, radius, typography, shadows and icons come exclusively
 *    from NDS custom properties (var(--…)); no hard-coded colours. Dark mode
 *    and theme switching therefore work automatically.
 *  - The NDS design-system files are NOT modified; their component rules
 *    (.nds-form-control, .nds-checkbox, .nds-radio, .nds-btn, .nds-alert,
 *    .nds-stepper, .nds-progress) are mirrored onto WPForms' own classes.
 *  - Logical properties are used so Arabic (RTL) works without overrides;
 *    explicit RTL rules exist only where WPForms base CSS uses physical sides.
 *  - Scope "div.wpforms-container .wpforms-form" out-ranks WPForms base CSS
 *    without !important. The only !important declarations override inline
 *    colours WPForms writes into the page-indicator markup.
 *
 * @package BUx_NDS
 */

/* ==========================================================================
   1. Local aliases (mapped to NDS tokens)
   ========================================================================== */

div.wpforms-container {
        --bux-wpf-input-size: 40px;
        --bux-wpf-icon-size: 20px;
        --bux-wpf-control-size: 16px;
        --bux-wpf-field-gap: var(--spacing-xl);
        --bux-wpf-label-gap: var(--spacing-xs);
        --bux-wpf-stripe: 8px;
        --bux-wpf-step-size: 32px;

        margin-block: var(--spacing-xl);
        font-family: var(--nds-font-family);
        color: var(--text-default);
}

div.wpforms-container .wpforms-form {
        font-size: var(--typo-text-md-FS);
        line-height: var(--typo-text-md-LH);
}

/* Title / description printed above the form (wpforms title="true"). */
div.wpforms-container .wpforms-head-container {
        margin-block-end: var(--spacing-xl);
}

div.wpforms-container .wpforms-title {
        margin: 0 0 var(--spacing-xs);
        color: var(--text-display);
        font-size: var(--typo-text-xl-FS);
        line-height: var(--typo-text-xl-LH);
        font-weight: var(--font-weight-semibold);
}

div.wpforms-container .wpforms-description {
        margin: 0;
        color: var(--text-secondary-paragraph);
        font-size: var(--typo-text-md-FS);
        line-height: var(--typo-text-md-LH);
}

/* ==========================================================================
   2. Field spacing
   ========================================================================== */

div.wpforms-container .wpforms-form .wpforms-field {
        padding-block: 0;
        margin-block-end: var(--bux-wpf-field-gap);
}

div.wpforms-container .wpforms-form .wpforms-field-container > .wpforms-field:last-child {
        margin-block-end: var(--bux-wpf-field-gap);
}

/* Hidden helpers must stay hidden. */
div.wpforms-container .wpforms-form .wpforms-field-hp,
div.wpforms-container .wpforms-form .wpforms-field-hidden,
div.wpforms-container .wpforms-form .wpforms-hidden {
        display: none;
}

div.wpforms-container .wpforms-form .wpforms-field-row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-md);
}

div.wpforms-container .wpforms-form .wpforms-field-row::before,
div.wpforms-container .wpforms-form .wpforms-field-row::after {
        content: none;
}

div.wpforms-container .wpforms-form .wpforms-field .wpforms-field-row .wpforms-field-row-block {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        padding: 0;
        margin: 0;
        float: none;
}

div.wpforms-container .wpforms-form .wpforms-field .wpforms-field-row .wpforms-field-row-block:not(:last-child) {
        margin: 0;
}

/* ==========================================================================
   3. Labels, sub-labels, descriptions, required marker
   ========================================================================== */

div.wpforms-container .wpforms-form .wpforms-field-label {
        display: block;
        margin: 0 0 var(--bux-wpf-label-gap);
        padding: 0;
        color: var(--form-field-text-label);
        font-size: var(--typo-text-md-FS);
        line-height: var(--typo-text-md-LH);
        font-weight: var(--font-weight-medium);
}

div.wpforms-container .wpforms-form .wpforms-required-label {
        margin-inline-start: 2px;
        color: var(--controls-text-error);
        font-weight: var(--font-weight-medium);
}

div.wpforms-container .wpforms-form .wpforms-field-sublabel {
        display: block;
        margin-block: var(--spacing-xxs) 0;
        color: var(--text-secondary-paragraph);
        font-size: var(--typo-text-sm-FS);
        line-height: var(--typo-text-sm-LH);
        font-weight: var(--font-weight-regular);
}

div.wpforms-container .wpforms-form .wpforms-field-sublabel.wpforms-sublabel-before {
        margin-block: 0 var(--spacing-xxs);
}

div.wpforms-container .wpforms-form .wpforms-field-description,
div.wpforms-container .wpforms-form .wpforms-field-limit-text {
        margin-block: var(--spacing-xs) 0;
        color: var(--text-secondary-paragraph);
        font-size: var(--typo-text-sm-FS);
        line-height: var(--typo-text-sm-LH);
}

div.wpforms-container .wpforms-form .wpforms-field-description.wpforms-field-description-before {
        margin-block: 0 var(--spacing-xs);
}

div.wpforms-container .wpforms-form .wpforms-field-description a {
        color: var(--text-primary);
}

/* Visually hidden labels (label/sub-label "hide" option). */
div.wpforms-container .wpforms-form .wpforms-label-hide,
div.wpforms-container .wpforms-form .wpforms-sublabel-hide,
div.wpforms-container .wpforms-screen-reader-element {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
}

/* ==========================================================================
   4. Text inputs, textarea, select  (mirrors .nds-form-control)
   ========================================================================== */

div.wpforms-container .wpforms-form input:is([type=text], [type=email], [type=url], [type=tel], [type=number], [type=password], [type=search], [type=date], [type=datetime], [type=datetime-local], [type=month], [type=time], [type=week]),
div.wpforms-container .wpforms-form select,
div.wpforms-container .wpforms-form textarea {
        box-sizing: border-box;
        width: 100%;
        height: var(--bux-wpf-input-size);
        min-height: var(--bux-wpf-input-size);
        margin: 0;
        padding: 0 var(--spacing-md);
        border: 1px solid var(--form-field-border-default);
        border-radius: var(--radius-sm);
        background-color: var(--form-field-background-default);
        box-shadow: none;
        color: var(--form-field-text-focused);
        font-family: inherit;
        font-size: var(--typo-text-md-FS);
        line-height: var(--typo-text-md-LH);
        outline: none;
        transition: var(--nds-transition);
}

div.wpforms-container .wpforms-form textarea {
        height: auto;
        min-height: calc(var(--bux-wpf-input-size) * 3);
        padding: var(--spacing-md);
        resize: vertical;
}

div.wpforms-container .wpforms-form textarea.wpforms-field-small {
        min-height: calc(var(--bux-wpf-input-size) * 2);
}

div.wpforms-container .wpforms-form textarea.wpforms-field-large {
        min-height: calc(var(--bux-wpf-input-size) * 5);
}

div.wpforms-container .wpforms-form :is(input, textarea)::placeholder {
        color: var(--form-field-text-placeholder);
        opacity: 1;
}

/* Hover */
div.wpforms-container .wpforms-form input:is([type=text], [type=email], [type=url], [type=tel], [type=number], [type=password], [type=search], [type=date], [type=datetime], [type=datetime-local], [type=month], [type=time], [type=week]):hover,
div.wpforms-container .wpforms-form select:hover,
div.wpforms-container .wpforms-form textarea:hover {
        border-color: var(--form-field-border-hovered);
}

/* Focus: NDS raises the field (shadow-md) and draws a 2px underline. */
div.wpforms-container .wpforms-form input:is([type=text], [type=email], [type=url], [type=tel], [type=number], [type=password], [type=search], [type=date], [type=datetime], [type=datetime-local], [type=month], [type=time], [type=week]):focus,
div.wpforms-container .wpforms-form select:focus,
div.wpforms-container .wpforms-form textarea:focus {
        border-color: var(--form-field-border-hovered);
        box-shadow: var(--shadow-md), inset 0 -2px 0 var(--form-field-border-pressed);
        outline: none;
}

/* Error state (jQuery Validate adds .wpforms-error, modern markup also .user-invalid). */
div.wpforms-container .wpforms-form :is(input, select, textarea):is(.wpforms-error, .user-invalid),
div.wpforms-container .wpforms-form .wpforms-has-error :is(input:not([type=checkbox], [type=radio]), select, textarea) {
        border-color: var(--form-field-border-error);
}

div.wpforms-container .wpforms-form :is(input, select, textarea):is(.wpforms-error, .user-invalid):focus,
div.wpforms-container .wpforms-form .wpforms-has-error :is(input:not([type=checkbox], [type=radio]), select, textarea):focus {
        box-shadow: var(--shadow-md), inset 0 -2px 0 var(--form-field-border-error);
}

/* Read-only / disabled */
div.wpforms-container .wpforms-form :is(input, select, textarea):read-only:not(select, [type=checkbox], [type=radio], .flatpickr-input, .wpforms-datepicker) {
        background-color: var(--form-field-background-darker);
        color: var(--form-field-text-readonly);
}

div.wpforms-container .wpforms-form :is(input, select, textarea):disabled {
        border-color: var(--border-disabled);
        background-color: transparent;
        color: var(--text-default-disabled);
        box-shadow: none;
        cursor: not-allowed;
}

/* Field sizes keep WPForms' width presets but never overflow on mobile. */
div.wpforms-container .wpforms-form :is(input, select, textarea, .wpforms-field-row).wpforms-field-large {
        max-width: 100%;
}

/* Select caret — a <select> can't host pseudo-elements, so the NDS chevron
   is drawn with two currentColor gradients (no colour literals). */
div.wpforms-container .wpforms-form select:not([multiple]) {
        appearance: none;
        -webkit-appearance: none;
        padding-inline-end: calc(var(--spacing-md) + var(--bux-wpf-icon-size));
        background-image:
                linear-gradient(45deg, transparent 50%, currentColor 50%),
                linear-gradient(135deg, currentColor 50%, transparent 50%);
        background-position:
                calc(100% - var(--spacing-md) - 5px) 50%,
                calc(100% - var(--spacing-md)) 50%;
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        cursor: pointer;
}

:is([dir=rtl], .rtl) div.wpforms-container .wpforms-form select:not([multiple]) {
        background-position:
                var(--spacing-md) 50%,
                calc(var(--spacing-md) + 5px) 50%;
}

div.wpforms-container .wpforms-form select[multiple] {
        height: auto;
        padding: var(--spacing-xs);
}

div.wpforms-container .wpforms-form select option {
        background-color: var(--background-default);
        color: var(--text-default);
}

div.wpforms-container .wpforms-form select option.placeholder {
        color: var(--form-field-text-placeholder);
}

/* RTL: WPForms forces LTR on email/url/tel; keep it but align with the
   Arabic reading edge. Number inputs follow the same rule. */
:is([dir=rtl], .rtl) div.wpforms-container .wpforms-form input:is([type=email], [type=url], [type=tel], [type=number]) {
        direction: ltr;
        text-align: right;
}

/* ==========================================================================
   5. Checkbox & radio  (mirrors .nds-checkbox / .nds-radio)
   ========================================================================== */

div.wpforms-container .wpforms-form .wpforms-field ul {
        margin: 0;
        padding: 0;
        list-style: none;
}

div.wpforms-container .wpforms-form .wpforms-field:is(.wpforms-field-checkbox, .wpforms-field-radio, .wpforms-field-payment-checkbox, .wpforms-field-payment-multiple, .wpforms-field-gdpr-checkbox) ul {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
}

div.wpforms-container .wpforms-form .wpforms-field ul li {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-xs);
        margin: 0;
        padding: 0;
}

div.wpforms-container .wpforms-form .wpforms-field .wpforms-list-inline ul {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: var(--spacing-xl);
}

div.wpforms-container .wpforms-form .wpforms-field .wpforms-list-inline ul li {
        margin: 0;
}

div.wpforms-container .wpforms-form .wpforms-field :is(.wpforms-checkbox-2-columns, .wpforms-multiplechoice-2-columns, .wpforms-list-2-columns) ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
}

div.wpforms-container .wpforms-form .wpforms-field :is(.wpforms-checkbox-3-columns, .wpforms-multiplechoice-3-columns, .wpforms-list-3-columns) ul {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
}

div.wpforms-container .wpforms-form input:is([type=checkbox], [type=radio]) {
        appearance: none;
        -webkit-appearance: none;
        position: relative;
        flex: 0 0 auto;
        box-sizing: border-box;
        width: var(--bux-wpf-control-size);
        height: var(--bux-wpf-control-size);
        margin: calc((var(--typo-text-md-LH) - var(--bux-wpf-control-size)) / 2) 0 0;
        padding: 0;
        border: 0;
        background-color: var(--background-default);
        box-shadow: inset 0 0 0 1px var(--controls-border);
        vertical-align: middle;
        cursor: pointer;
        transition: var(--nds-transition);
}

div.wpforms-container .wpforms-form input[type=checkbox] {
        border-radius: var(--radius-xs);
}

div.wpforms-container .wpforms-form input[type=radio] {
        border-radius: var(--radius-full);
}

/* Checkmark glyph (NDS icon mask, coloured with the on-colour icon token). */
div.wpforms-container .wpforms-form input[type=checkbox]::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--icon-oncolor);
        mask: var(--nds-icon-checkmark) center / 80% no-repeat;
        -webkit-mask: var(--nds-icon-checkmark) center / 80% no-repeat;
        opacity: 0;
        transition: var(--nds-transition);
}

div.wpforms-container .wpforms-form input:is([type=checkbox], [type=radio]):hover {
        box-shadow: inset 0 0 0 1px var(--controls-neutral-hovered);
}

div.wpforms-container .wpforms-form input[type=checkbox]:checked {
        background-color: var(--checkbox-primary-checked);
        box-shadow: inset 0 0 0 1px var(--checkbox-primary-checked);
}

div.wpforms-container .wpforms-form input[type=checkbox]:checked::before {
        opacity: 1;
}

div.wpforms-container .wpforms-form input[type=checkbox]:checked:hover {
        background-color: var(--checkbox-primary-hovered);
        box-shadow: inset 0 0 0 1px var(--checkbox-primary-hovered);
}

div.wpforms-container .wpforms-form input[type=radio]:checked {
        background-color: var(--radio-primary-checked);
        box-shadow: inset 0 0 0 1px var(--radio-primary-checked), inset 0 0 0 4px var(--background-default);
}

div.wpforms-container .wpforms-form input[type=radio]:checked:hover {
        background-color: var(--radio-primary-hovered);
        box-shadow: inset 0 0 0 1px var(--radio-primary-hovered), inset 0 0 0 4px var(--background-default);
}

div.wpforms-container .wpforms-form input:is([type=checkbox], [type=radio]):focus {
        outline: none;
}

div.wpforms-container .wpforms-form input:is([type=checkbox], [type=radio]):focus-visible {
        outline: 2px solid var(--focus-outline);
        outline-offset: 2px;
}

div.wpforms-container .wpforms-form input:is([type=checkbox], [type=radio]):is(.wpforms-error, .user-invalid),
div.wpforms-container .wpforms-form .wpforms-has-error input:is([type=checkbox], [type=radio]):not(:checked) {
        box-shadow: inset 0 0 0 1px var(--form-field-border-error);
}

div.wpforms-container .wpforms-form input:is([type=checkbox], [type=radio]):disabled {
        background-color: var(--background-disabled);
        box-shadow: inset 0 0 0 1px var(--border-disabled);
        cursor: not-allowed;
}

div.wpforms-container .wpforms-form input[type=checkbox]:disabled::before {
        background-color: var(--controls-icon-disabled);
}

div.wpforms-container .wpforms-form .wpforms-field-label-inline {
        display: inline;
        margin: 0;
        color: var(--text-default);
        font-size: var(--typo-text-md-FS);
        line-height: var(--typo-text-md-LH);
        font-weight: var(--font-weight-regular);
        cursor: pointer;
}

div.wpforms-container .wpforms-form input:disabled + .wpforms-field-label-inline {
        color: var(--text-default-disabled);
        cursor: not-allowed;
}

/* Image / icon choices: selectable NDS cards. */
div.wpforms-container .wpforms-form :is(.wpforms-image-choices-modern, .wpforms-icon-choices) li label {
        border-radius: var(--radius-md);
        background-color: var(--background-card);
        box-shadow: 0 0 0 1px var(--border-neutral-primary);
        transition: var(--nds-transition);
}

div.wpforms-container .wpforms-form :is(.wpforms-image-choices-modern, .wpforms-icon-choices) li label:hover {
        box-shadow: 0 0 0 1px var(--border-neutral-secondary), var(--shadow-sm);
}

div.wpforms-container .wpforms-form :is(.wpforms-image-choices-modern, .wpforms-icon-choices) li.wpforms-selected label {
        box-shadow: 0 0 0 2px var(--controls-primary-checked);
}

div.wpforms-container .wpforms-form .wpforms-image-choices-label,
div.wpforms-container .wpforms-form .wpforms-icon-choices-label {
        color: var(--text-default);
}

/* ==========================================================================
   6. Inline field errors  (mirrors NDS feedback text)
   ========================================================================== */

div.wpforms-container .wpforms-form :is(em, label).wpforms-error,
div.wpforms-container em#wpforms-field_recaptcha-error {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-xxs);
        min-width: 0;
        margin: var(--spacing-xs) 0 0;
        padding: 0;
        color: var(--text-error);
        font-size: var(--typo-text-sm-FS);
        line-height: var(--typo-text-sm-LH);
        font-style: normal;
        font-weight: var(--font-weight-medium);
}

div.wpforms-container .wpforms-form :is(em, label).wpforms-error::before,
div.wpforms-container em#wpforms-field_recaptcha-error::before {
        content: "";
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        margin-block-start: calc((var(--typo-text-sm-LH) - 16px) / 2);
        background-color: currentColor;
        mask: var(--nds-icon-alert-circle) center / contain no-repeat;
        -webkit-mask: var(--nds-icon-alert-circle) center / contain no-repeat;
}

div.wpforms-container .wpforms-form .wpforms-has-error > .wpforms-field-label {
        color: var(--text-error);
}

/* ==========================================================================
   7. Alerts: form-level errors, notices, confirmation  (mirrors .nds-alert)
   ========================================================================== */

div.wpforms-container :is(.wpforms-error-container, .wpforms-confirmation-container, .wpforms-confirmation-container-full, .wpforms-notice),
div.wpforms-container noscript.wpforms-error-noscript {
        position: relative;
        box-sizing: border-box;
        display: block;
        margin: 0 0 var(--spacing-xl);
        padding: var(--spacing-lg);
        padding-inline-start: calc(var(--spacing-lg) + var(--bux-wpf-stripe) + var(--bux-wpf-icon-size) + var(--spacing-md));
        overflow: clip;
        border: 1px solid var(--border-neutral-primary);
        border-radius: var(--radius-md);
        background-color: var(--background-card);
        box-shadow: none;
        color: var(--text-primary-paragraph);
        font-size: var(--typo-text-sm-FS);
        line-height: var(--typo-text-sm-LH);
}

div.wpforms-container .wpforms-error-container:empty {
        display: none;
}

/* Colour stripe on the inline-start edge. */
div.wpforms-container :is(.wpforms-error-container, .wpforms-confirmation-container, .wpforms-confirmation-container-full, .wpforms-notice)::after {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        width: var(--bux-wpf-stripe);
        background-color: var(--background-info, var(--text-primary));
        opacity: .7;
}

/* Status icon. */
div.wpforms-container :is(.wpforms-error-container, .wpforms-confirmation-container, .wpforms-confirmation-container-full, .wpforms-notice)::before {
        content: "";
        position: absolute;
        inset-block-start: var(--spacing-lg);
        inset-inline-start: calc(var(--spacing-lg) + var(--bux-wpf-stripe));
        width: var(--bux-wpf-icon-size);
        height: var(--bux-wpf-icon-size);
        background-color: var(--text-primary);
        mask: var(--nds-icon-information-circle) center / contain no-repeat;
        -webkit-mask: var(--nds-icon-information-circle) center / contain no-repeat;
}

div.wpforms-container :is(.wpforms-error-container, .wpforms-confirmation-container, .wpforms-confirmation-container-full, .wpforms-notice) > :first-child {
        margin-block-start: 0;
}

div.wpforms-container :is(.wpforms-error-container, .wpforms-confirmation-container, .wpforms-confirmation-container-full, .wpforms-notice) > :last-child {
        margin-block-end: 0;
}

div.wpforms-container :is(.wpforms-error-container, .wpforms-confirmation-container, .wpforms-confirmation-container-full, .wpforms-notice) :is(p, ul, ol) {
        margin: 0 0 var(--spacing-xs);
        color: inherit;
}

div.wpforms-container :is(.wpforms-error-container, .wpforms-confirmation-container, .wpforms-confirmation-container-full, .wpforms-notice) :is(strong, b, h1, h2, h3, h4, h5, h6) {
        color: var(--text-default);
        font-weight: var(--font-weight-semibold);
}

div.wpforms-container :is(.wpforms-error-container, .wpforms-confirmation-container, .wpforms-confirmation-container-full, .wpforms-notice) a {
        color: var(--text-primary);
}

/* Error variant. */
div.wpforms-container :is(.wpforms-error-container, .wpforms-notice.wpforms-error) {
        border-color: var(--border-error-light);
}

div.wpforms-container :is(.wpforms-error-container, .wpforms-notice.wpforms-error)::after {
        background-color: var(--background-error);
}

div.wpforms-container :is(.wpforms-error-container, .wpforms-notice.wpforms-error)::before {
        background-color: var(--text-error);
        mask-image: var(--nds-icon-alert-circle);
        -webkit-mask-image: var(--nds-icon-alert-circle);
}

div.wpforms-container .wpforms-error-container :is(.wpforms-error, p) {
        margin: 0;
        color: var(--text-primary-paragraph);
        font-size: var(--typo-text-sm-FS);
        line-height: var(--typo-text-sm-LH);
        font-style: normal;
}

div.wpforms-container .wpforms-error-container .wpforms-error::before {
        content: none;
}

/* Success variant (confirmation message). */
div.wpforms-container :is(.wpforms-confirmation-container, .wpforms-confirmation-container-full) {
        border-color: var(--border-success-light);
        background-color: var(--background-card);
        color: var(--text-primary-paragraph);
        font-size: var(--typo-text-md-FS);
        line-height: var(--typo-text-md-LH);
}

div.wpforms-container :is(.wpforms-confirmation-container, .wpforms-confirmation-container-full)::after {
        background-color: var(--background-success);
}

div.wpforms-container :is(.wpforms-confirmation-container, .wpforms-confirmation-container-full)::before {
        background-color: var(--text-success);
        mask-image: var(--nds-icon-checkmark-circle-01);
        -webkit-mask-image: var(--nds-icon-checkmark-circle-01);
}

div.wpforms-container noscript.wpforms-error-noscript {
        padding-inline-start: var(--spacing-lg);
        border-color: var(--border-error-light);
        color: var(--text-error);
}

/* Small screens: NDS moves the stripe to the top edge. */
@media (max-width: 599px) {
        div.wpforms-container :is(.wpforms-error-container, .wpforms-confirmation-container, .wpforms-confirmation-container-full, .wpforms-notice) {
                padding: calc(var(--spacing-lg) + var(--bux-wpf-stripe)) var(--spacing-lg) var(--spacing-lg);
                padding-inline-start: calc(var(--spacing-lg) + var(--bux-wpf-icon-size) + var(--spacing-md));
        }

        div.wpforms-container :is(.wpforms-error-container, .wpforms-confirmation-container, .wpforms-confirmation-container-full, .wpforms-notice)::after {
                inset-block: 0 auto;
                inset-inline: 0;
                width: auto;
                height: var(--bux-wpf-stripe);
        }

        div.wpforms-container :is(.wpforms-error-container, .wpforms-confirmation-container, .wpforms-confirmation-container-full, .wpforms-notice)::before {
                inset-block-start: calc(var(--spacing-lg) + var(--bux-wpf-stripe));
                inset-inline-start: var(--spacing-lg);
        }
}

/* ==========================================================================
   8. Buttons: submit = NDS primary, page prev/next = NDS secondary outline
   ========================================================================== */

div.wpforms-container .wpforms-form .wpforms-submit-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-md);
        padding: 0;
        margin-block-start: var(--spacing-xs);
}

div.wpforms-container .wpforms-form :is(button.wpforms-submit, input[type=submit].wpforms-submit, button.wpforms-page-button, .wpforms-field-repeater button) {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-xs);
        height: var(--bux-wpf-input-size);
        min-height: var(--bux-wpf-input-size);
        margin: 0;
        padding: 0 calc((var(--bux-wpf-input-size) - 8px) / 2);
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        box-shadow: none;
        font-family: inherit;
        font-size: calc(var(--bux-wpf-input-size) / 4 + 6px);
        line-height: 1.5;
        font-weight: var(--font-weight-medium);
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: var(--nds-transition);
}

/* Primary */
div.wpforms-container .wpforms-form :is(button.wpforms-submit, input[type=submit].wpforms-submit) {
        background-color: var(--button-background-primary-default);
        color: var(--text-oncolor-primary);
}

div.wpforms-container .wpforms-form :is(button.wpforms-submit, input[type=submit].wpforms-submit):hover {
        background-color: var(--button-background-primary-hovered);
        color: var(--text-oncolor-primary);
}

div.wpforms-container .wpforms-form :is(button.wpforms-submit, input[type=submit].wpforms-submit):active {
        background-color: var(--button-background-primary-pressed);
}

/* Secondary outline (multi-page navigation, repeater add/remove). */
div.wpforms-container .wpforms-form :is(button.wpforms-page-button, .wpforms-field-repeater button) {
        border-color: var(--border-neutral-primary);
        background-color: var(--button-background-transparent-default);
        color: var(--text-default);
}

div.wpforms-container .wpforms-form :is(button.wpforms-page-button, .wpforms-field-repeater button):hover {
        border-color: var(--border-neutral-secondary);
        background-color: var(--button-background-secondary-hovered);
        color: var(--text-default);
}

div.wpforms-container .wpforms-form :is(button.wpforms-page-button, .wpforms-field-repeater button):active {
        background-color: var(--button-background-secondary-pressed);
}

/* "Next" is the forward action: give it primary weight like the NDS stepper. */
div.wpforms-container .wpforms-form button.wpforms-page-button.wpforms-page-next {
        border-color: transparent;
        background-color: var(--button-background-primary-default);
        color: var(--text-oncolor-primary);
}

div.wpforms-container .wpforms-form button.wpforms-page-button.wpforms-page-next:hover {
        background-color: var(--button-background-primary-hovered);
        color: var(--text-oncolor-primary);
}

div.wpforms-container .wpforms-form button.wpforms-page-button.wpforms-page-next:active {
        background-color: var(--button-background-primary-pressed);
}

/* Focus ring (identical to .nds-btn:focus-visible). */
div.wpforms-container .wpforms-form :is(button.wpforms-submit, input[type=submit].wpforms-submit, button.wpforms-page-button, .wpforms-field-repeater button):focus {
        outline: none;
}

div.wpforms-container .wpforms-form :is(button.wpforms-submit, input[type=submit].wpforms-submit, button.wpforms-page-button, .wpforms-field-repeater button):focus-visible {
        outline: 2px solid var(--focus-outline);
        outline-offset: -2px;
        box-shadow: inset 0 0 0 3px var(--focus-inner);
}

/* Disabled / submitting */
div.wpforms-container .wpforms-form :is(button.wpforms-submit, input[type=submit].wpforms-submit, button.wpforms-page-button, .wpforms-field-repeater button):is(:disabled, .wpforms-disabled),
div.wpforms-container .wpforms-form :is(button.wpforms-submit, input[type=submit].wpforms-submit, button.wpforms-page-button, .wpforms-field-repeater button):is(:disabled, .wpforms-disabled):hover {
        border-color: transparent;
        background-color: var(--background-disabled);
        color: var(--text-default-disabled);
        cursor: not-allowed;
        opacity: 1;
}

div.wpforms-container .wpforms-form :is(.wpforms-submit-spinner, .wpforms-page-button-spinner) {
        width: 24px;
        height: 24px;
        margin: 0;
        margin-inline-start: var(--spacing-xs);
}

/* Page-break navigation row. */
div.wpforms-container .wpforms-form .wpforms-field-pagebreak {
        margin-block: var(--spacing-xs) var(--bux-wpf-field-gap);
}

div.wpforms-container .wpforms-form .wpforms-field-pagebreak > [class*="wpforms-pagebreak-"] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-md);
}

div.wpforms-container .wpforms-form .wpforms-field-pagebreak .wpforms-pagebreak-left {
        justify-content: flex-start;
}

div.wpforms-container .wpforms-form .wpforms-field-pagebreak .wpforms-pagebreak-right {
        justify-content: flex-end;
}

div.wpforms-container .wpforms-form .wpforms-field-pagebreak .wpforms-pagebreak-center {
        justify-content: center;
}

div.wpforms-container .wpforms-form .wpforms-field-pagebreak .wpforms-pagebreak-split {
        justify-content: space-between;
}

div.wpforms-container .wpforms-form .wpforms-page-button-group {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-md);
}

/* Section divider field. */
div.wpforms-container .wpforms-form .wpforms-field-divider {
        padding-block-start: var(--spacing-lg);
        border-block-start: 1px solid var(--divider-color);
}

div.wpforms-container .wpforms-form .wpforms-field-divider h3 {
        margin: 0 0 var(--spacing-xs);
        color: var(--text-display);
        font-size: var(--typo-text-lg-FS);
        line-height: var(--typo-text-lg-LH);
        font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   9. Page indicator  (circles → .nds-stepper, connector, progress → .nds-progress)
   WPForms prints inline colours from the builder; !important is the only way
   to replace them with NDS tokens.
   ========================================================================== */

div.wpforms-container .wpforms-form .wpforms-page-indicator {
        margin: 0 0 var(--spacing-xl);
        overflow: visible;
        color: var(--stepper-text-primary);
        font-size: var(--typo-text-sm-FS);
        line-height: var(--typo-text-sm-LH);
}

/* --- Circles ----------------------------------------------------------- */
div.wpforms-container .wpforms-form .wpforms-page-indicator.circles {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page {
        display: flex;
        flex: 1 1 0;
        align-items: center;
        gap: var(--spacing-xs);
        min-width: 0;
        margin: 0;
        float: none;
        color: var(--stepper-text-tertiary);
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page:last-of-type {
        flex: 0 1 auto;
}

/* Connector line after each step except the last. */
div.wpforms-container .wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page:not(:last-of-type)::after {
        content: "";
        flex: 1 1 var(--spacing-md);
        min-width: var(--spacing-md);
        height: 2px;
        background-color: var(--stepper-line-upcoming);
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page-number {
        box-sizing: border-box;
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: var(--bux-wpf-step-size);
        height: var(--bux-wpf-step-size);
        margin: 0;
        border: 2px solid var(--stepper-button-upcoming);
        border-radius: var(--radius-full);
        background-color: var(--stepper-button-background) !important;
        color: var(--stepper-button-upcoming);
        font-size: calc(var(--bux-wpf-step-size) / 2);
        line-height: 1;
        font-weight: var(--font-weight-medium);
        transition: var(--nds-transition);
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: var(--font-weight-medium);
}

/* Current step */
div.wpforms-container .wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page.active {
        color: var(--stepper-text-primary);
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page.active .wpforms-page-indicator-page-number {
        border-color: var(--stepper-button-current);
        color: var(--stepper-button-current);
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page.active .wpforms-page-indicator-page-title {
        font-weight: var(--font-weight-semibold);
}

/* Completed steps = every step before the active one (pure CSS, :has). */
div.wpforms-container .wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page:has(~ .active) {
        color: var(--stepper-text-primary);
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page:has(~ .active)::after {
        background-color: var(--stepper-line-completed);
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page:has(~ .active) .wpforms-page-indicator-page-number {
        border-color: var(--stepper-button-completed);
        background-color: var(--stepper-button-completed) !important;
        color: transparent;
        font-size: 0;
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page:has(~ .active) .wpforms-page-indicator-page-number::before {
        content: "";
        width: calc(var(--bux-wpf-step-size) / 2);
        height: calc(var(--bux-wpf-step-size) / 2);
        background-color: var(--text-oncolor-primary);
        mask: var(--nds-icon-checkmark) center / contain no-repeat;
        -webkit-mask: var(--nds-icon-checkmark) center / contain no-repeat;
}

/* Clickable steps (page navigation enabled in the builder). */
div.wpforms-container .wpforms-form .wpforms-page-indicator[data-allow-page-navigation="1"] .wpforms-page-indicator-page:not(.active, .wpforms-disabled) {
        cursor: pointer;
        opacity: 1;
}

div.wpforms-container .wpforms-form .wpforms-page-indicator[data-allow-page-navigation="1"] .wpforms-page-indicator-page:not(.active, .wpforms-disabled) .wpforms-page-indicator-page-title {
        text-decoration: none;
}

div.wpforms-container .wpforms-form .wpforms-page-indicator[data-allow-page-navigation="1"] .wpforms-page-indicator-page:not(.active, .wpforms-disabled):hover .wpforms-page-indicator-page-title {
        color: var(--text-primary);
}

div.wpforms-container .wpforms-form .wpforms-page-indicator[data-allow-page-navigation="1"] .wpforms-page-indicator-page:not(.active, .wpforms-disabled):focus-visible .wpforms-page-indicator-page-number {
        outline: 2px solid var(--focus-outline);
        outline-offset: 2px;
}

/* --- Connector --------------------------------------------------------- */
div.wpforms-container .wpforms-form .wpforms-page-indicator.connector {
        display: flex;
        gap: var(--spacing-xs);
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.connector .wpforms-page-indicator-page {
        flex: 1 1 0;
        min-width: 0 !important;
        margin: 0;
        padding: 0;
        float: none;
        color: var(--stepper-text-tertiary);
        text-align: center;
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.connector .wpforms-page-indicator-page-number {
        display: block;
        height: 4px;
        margin: 0 0 var(--spacing-sm);
        border-radius: var(--radius-full);
        background-color: var(--stepper-line-upcoming) !important;
        text-indent: -9999px;
        overflow: visible;
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.connector .wpforms-page-indicator-page:has(~ .active) .wpforms-page-indicator-page-number {
        background-color: var(--stepper-line-completed) !important;
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.connector .wpforms-page-indicator-page.active .wpforms-page-indicator-page-number {
        background-color: var(--stepper-button-current) !important;
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.connector .wpforms-page-indicator-page-triangle {
        display: none;
        inset-inline-start: 50%;
        border-top-color: var(--stepper-button-current) !important;
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.connector .wpforms-page-indicator-page.active .wpforms-page-indicator-page-triangle {
        display: block;
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.connector .wpforms-page-indicator-page-title {
        display: inline-block;
        padding: 0 var(--spacing-xs);
        font-size: var(--typo-text-sm-FS);
        line-height: var(--typo-text-sm-LH);
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.connector .wpforms-page-indicator-page.active {
        color: var(--stepper-text-primary);
        font-weight: var(--font-weight-semibold);
}

/* --- Progress bar  (mirrors NDS "Progress Line": .nds-progress-bar.nds-lg) ---
   WPForms markup: span.page-title + span.page-title-sep + span.steps, then
   div.page-progress-wrap (= .nds-progress-track) > div.page-progress
   (= .nds-progress-fill, inline width + builder colour).
   NDS scopes --progress-color / --progress-track-color to its own component,
   so the private --bux-wpf-progress-* vars below resolve the same root tokens
   that .nds-progress-bar falls back to. */
div.wpforms-container .wpforms-form .wpforms-page-indicator.progress {
        --bux-wpf-progress-height: 16px;                               /* nds-lg */
        --bux-wpf-progress-track: var(--colors-neutral-100);
        --bux-wpf-progress-color: var(--background-primary);
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: var(--spacing-xs);
        row-gap: var(--spacing-sm);
        width: 100%;
        color: var(--text-default);
        font-size: var(--typo-text-sm-FS);
        line-height: var(--typo-text-sm-LH);
}

:root[data-theme~=dark] div.wpforms-container .wpforms-form .wpforms-page-indicator.progress {
        --bux-wpf-progress-track: var(--colors-alpha-white-10);
}

/* Label row = .nds-progress-label */
div.wpforms-container .wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-title {
        color: var(--text-default);
        font-weight: var(--font-weight-medium);
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-title-sep {
        color: var(--stepper-text-tertiary);
}

div.wpforms-container .wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-steps {
        margin-inline-start: auto;
        color: var(--stepper-text-secondary);
        font-weight: var(--font-weight-medium);
}

/* Track = .nds-progress-track */
div.wpforms-container .wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress-wrap {
        position: relative;
        display: block;
        flex: 0 0 100%;
        width: 100%;
        height: var(--bux-wpf-progress-height);
        margin: 0;
        overflow: hidden;
        border-radius: var(--radius-full);
        background-color: var(--bux-wpf-progress-track);
        transform: none;
}

/* Fill = .nds-progress-fill (inline width kept, builder colour replaced) */
div.wpforms-container .wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress {
        position: absolute;
        inset: 0 auto;
        inset-inline-start: 0;
        height: 100%;
        max-width: 100%;
        border-radius: var(--radius-full);
        background-color: var(--bux-wpf-progress-color) !important;
        transition: width .3s ease;
}

@media (max-width: 599px) {
        div.wpforms-container .wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page:not(.active) .wpforms-page-indicator-page-title {
                display: none;
        }
}

/* ==========================================================================
   10. Choices.js (modern select / multi-select)
   ========================================================================== */

div.wpforms-container .wpforms-form .choices {
        margin: 0;
        font-size: var(--typo-text-md-FS);
        color: var(--form-field-text-focused);
}

div.wpforms-container .wpforms-form .choices .choices__inner {
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        min-height: var(--bux-wpf-input-size);
        padding: var(--spacing-xxs) var(--spacing-md);
        padding-inline-end: calc(var(--spacing-md) + var(--bux-wpf-icon-size));
        border: 1px solid var(--form-field-border-default);
        border-radius: var(--radius-sm);
        background-color: var(--form-field-background-default);
        transition: var(--nds-transition);
}

div.wpforms-container .wpforms-form .choices:hover .choices__inner {
        border-color: var(--form-field-border-hovered);
}

div.wpforms-container .wpforms-form .choices:is(.is-focused, .is-open) .choices__inner {
        border-color: var(--form-field-border-hovered);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-md), inset 0 -2px 0 var(--form-field-border-pressed);
}

div.wpforms-container .wpforms-form .wpforms-has-error .choices .choices__inner {
        border-color: var(--form-field-border-error);
}

div.wpforms-container .wpforms-form .choices.is-disabled .choices__inner,
div.wpforms-container .wpforms-form .choices.is-disabled .choices__input {
        border-color: var(--border-disabled);
        background-color: transparent;
        color: var(--text-default-disabled);
}

div.wpforms-container .wpforms-form .choices .choices__list--single {
        padding: 0;
}

div.wpforms-container .wpforms-form .choices .choices__placeholder {
        color: var(--form-field-text-placeholder);
        opacity: 1;
}

div.wpforms-container .wpforms-form .choices .choices__inner input.choices__input {
        height: auto;
        min-height: 0;
        background-color: transparent;
        color: var(--form-field-text-focused);
        font-size: var(--typo-text-md-FS);
        box-shadow: none;
}

/* NDS chevron (arrow-left-01 rotated, as .nds-select does). */
div.wpforms-container .wpforms-form .choices[data-type*=select-one]::after {
        content: "";
        position: absolute;
        inset-block-start: 50%;
        inset-inline-end: var(--spacing-md);
        width: var(--bux-wpf-icon-size);
        height: var(--bux-wpf-icon-size);
        margin: calc(var(--bux-wpf-icon-size) / -2) 0 0;
        border: 0;
        background-color: currentColor;
        mask: var(--nds-icon-arrow-left-01) center / contain no-repeat;
        -webkit-mask: var(--nds-icon-arrow-left-01) center / contain no-repeat;
        rotate: -90deg;
        transition: var(--nds-transition);
        pointer-events: none;
}

div.wpforms-container .wpforms-form .choices[data-type*=select-one].is-open::after {
        margin: calc(var(--bux-wpf-icon-size) / -2) 0 0;
        border: 0;
        rotate: 90deg;
}

/* Dropdown panel */
div.wpforms-container .wpforms-form .choices .choices__list--dropdown,
div.wpforms-container .wpforms-form .choices .choices__list[aria-expanded] {
        margin-block-start: var(--spacing-xxs);
        border: 1px solid var(--border-neutral-primary);
        border-radius: var(--radius-sm);
        background-color: var(--background-menu);
        box-shadow: var(--shadow-md);
        color: var(--text-default);
        overflow: hidden;
}

div.wpforms-container .wpforms-form .choices.is-flipped .choices__list--dropdown {
        margin-block: 0 var(--spacing-xxs);
        border-radius: var(--radius-sm);
}

div.wpforms-container .wpforms-form .choices .choices__list--dropdown .choices__input {
        margin: 0;
        padding: var(--spacing-xs) var(--spacing-md);
        border: 0;
        border-block-end: 1px solid var(--divider-color);
        background-color: transparent;
        color: var(--text-default);
}

div.wpforms-container .wpforms-form .choices .choices__list--dropdown .choices__item {
        padding: var(--spacing-xs) var(--spacing-md);
        color: var(--text-default);
        font-size: var(--typo-text-md-FS);
        line-height: var(--typo-text-md-LH);
}

div.wpforms-container .wpforms-form .choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
        background-color: var(--button-background-secondary-hovered);
}

div.wpforms-container .wpforms-form .choices .choices__list--dropdown .choices__item--selectable.is-selected {
        color: var(--text-primary);
        font-weight: var(--font-weight-medium);
}

div.wpforms-container .wpforms-form .choices .choices__list--dropdown .choices__item--selectable::after {
        display: none;
}

div.wpforms-container .wpforms-form .choices .choices__list--dropdown :is(.has-no-results, .has-no-choices) {
        color: var(--text-secondary-paragraph);
}

/* Multi-select tags */
div.wpforms-container .wpforms-form .choices .choices__list--multiple .choices__item {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xxs);
        margin: 2px;
        margin-inline-start: 0;
        padding-block: 2px;
        padding-inline: var(--spacing-xs) var(--spacing-xxs);
        border: 0;
        border-radius: var(--radius-xs);
        background-color: var(--background-primary-light);
        color: var(--text-primary);
        font-size: var(--typo-text-sm-FS);
        line-height: var(--typo-text-sm-LH);
        font-weight: var(--font-weight-medium);
}

div.wpforms-container .wpforms-form .choices .choices__list--multiple .choices__item.is-highlighted {
        border: 0;
        background-color: var(--background-primary);
        color: var(--text-oncolor-primary);
}

div.wpforms-container .wpforms-form .choices[data-type*=select-multiple] .choices__button,
div.wpforms-container .wpforms-form .choices[data-type*=text] .choices__button {
        position: static;
        width: 14px;
        height: 14px;
        margin: 0;
        padding: 0;
        border: 0;
        background-image: none;
        background-color: currentColor;
        mask: var(--nds-icon-cancel-01) center / contain no-repeat;
        -webkit-mask: var(--nds-icon-cancel-01) center / contain no-repeat;
        opacity: .75;
}

div.wpforms-container .wpforms-form .choices .choices__button:is(:hover, :focus-visible) {
        opacity: 1;
}

/* ==========================================================================
   11. Date / time pickers (flatpickr + jquery-timepicker, appended to <body>)
   This stylesheet is only loaded on pages that render a WPForms form.
   ========================================================================== */

div.wpforms-container .wpforms-form .wpforms-datepicker-wrap {
        position: relative;
}

div.wpforms-container .wpforms-form .wpforms-datepicker-wrap .wpforms-datepicker-clear {
        inset-inline-end: var(--spacing-md);
        right: auto;
        background-color: currentColor;
        background-image: none;
        color: var(--form-field-text-placeholder);
        mask: var(--nds-icon-cancel-01) center / contain no-repeat;
        -webkit-mask: var(--nds-icon-cancel-01) center / contain no-repeat;
}

body .flatpickr-calendar {
        border: 1px solid var(--border-neutral-primary);
        border-radius: var(--radius-md);
        background: var(--background-menu);
        box-shadow: var(--shadow-md);
        color: var(--text-default);
        font-family: var(--nds-font-family);
}

body .flatpickr-calendar::before,
body .flatpickr-calendar::after {
        display: none;
}

body .flatpickr-calendar :is(.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-monthDropdown-months, .numInputWrapper input, span.flatpickr-weekday) {
        background: transparent;
        color: var(--text-default);
        fill: currentColor;
}

body .flatpickr-calendar span.flatpickr-weekday {
        color: var(--text-secondary-paragraph);
        font-weight: var(--font-weight-medium);
}

body .flatpickr-calendar :is(.flatpickr-prev-month, .flatpickr-next-month) {
        color: var(--text-default);
        fill: currentColor;
}

body .flatpickr-calendar :is(.flatpickr-prev-month, .flatpickr-next-month):hover svg {
        fill: var(--text-primary);
}

body .flatpickr-calendar .flatpickr-day {
        border-radius: var(--radius-sm);
        color: var(--text-default);
}

body .flatpickr-calendar .flatpickr-day:is(:hover, :focus) {
        border-color: transparent;
        background: var(--form-datecell-background-hovered);
}

body .flatpickr-calendar .flatpickr-day.today {
        border-color: var(--border-neutral-secondary);
}

body .flatpickr-calendar .flatpickr-day:is(.selected, .startRange, .endRange),
body .flatpickr-calendar .flatpickr-day:is(.selected, .startRange, .endRange):hover {
        border-color: var(--button-background-primary-default);
        background: var(--button-background-primary-default);
        color: var(--text-oncolor-primary);
}

body .flatpickr-calendar .flatpickr-day.inRange {
        border-color: transparent;
        background: var(--form-datecell-background-range);
        box-shadow: none;
}

body .flatpickr-calendar .flatpickr-day:is(.flatpickr-disabled, .prevMonthDay, .nextMonthDay),
body .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
        background: transparent;
        color: var(--text-default-disabled);
}

body .ui-timepicker-wrapper {
        border: 1px solid var(--border-neutral-primary);
        border-radius: var(--radius-sm);
        background: var(--background-menu);
        box-shadow: var(--shadow-md);
        color: var(--text-default);
}

body .ui-timepicker-list li {
        color: var(--text-default);
}

body .ui-timepicker-list :is(li:hover, .ui-timepicker-selected) {
        background: var(--button-background-secondary-hovered);
        color: var(--text-default);
}

body .ui-timepicker-list li.ui-timepicker-selected {
        background: var(--button-background-primary-default);
        color: var(--text-oncolor-primary);
}

/* ==========================================================================
   12. Layout columns, repeater, column presets, RTL floats
   ========================================================================== */

div.wpforms-container .wpforms-form .wpforms-field-layout .wpforms-field-layout-columns,
div.wpforms-container .wpforms-form .wpforms-field-repeater .wpforms-field-layout-columns {
        gap: var(--spacing-md);
}

div.wpforms-container .wpforms-form .wpforms-layout-column .wpforms-field:last-child {
        margin-block-end: 0;
}

div.wpforms-container .wpforms-form .wpforms-field-repeater {
        padding-block: var(--spacing-md);
        border-block: 1px solid var(--divider-color);
}

div.wpforms-container .wpforms-form .wpforms-field-repeater > .wpforms-field-label {
        color: var(--text-display);
        font-size: var(--typo-text-lg-FS);
        line-height: var(--typo-text-lg-LH);
        font-weight: var(--font-weight-semibold);
}

/* Legacy column classes (wpforms-one-half …) float left with margin-left in
   WPForms base CSS; mirror them for RTL. */
:is([dir=rtl], .rtl) div.wpforms-container :is(.wpforms-one-half, .wpforms-one-third, .wpforms-two-thirds, .wpforms-one-fourth, .wpforms-three-fourths, .wpforms-two-fourths, .wpforms-one-fifth, .wpforms-two-fifths, .wpforms-three-fifths, .wpforms-four-fifths, .wpforms-one-sixth, .wpforms-two-sixths, .wpforms-three-sixths, .wpforms-four-sixths, .wpforms-five-sixths) {
        float: right;
        margin-left: 0;
        margin-right: 20px;
}

:is([dir=rtl], .rtl) div.wpforms-container .wpforms-first {
        margin-left: 0 !important;
        margin-right: 0 !important;
}

/* ==========================================================================
   13. Payments: total, order summary, number slider, rating, file upload
   ========================================================================== */

div.wpforms-container .wpforms-form .wpforms-payment-total {
        color: var(--text-display);
        font-size: var(--typo-text-lg-FS);
        line-height: var(--typo-text-lg-LH);
        font-weight: var(--font-weight-semibold);
}

div.wpforms-container .wpforms-form .wpforms-order-summary-container {
        max-width: 100%;
}

div.wpforms-container .wpforms-form .wpforms-order-summary-container table.wpforms-order-summary-preview {
        width: 100%;
        margin: 0;
        overflow: hidden;
        border: 1px solid var(--table-cell-border);
        border-collapse: separate;
        border-spacing: 0;
        border-radius: var(--radius-md);
        background-color: var(--background-card);
        color: var(--text-default);
        font-size: var(--typo-text-sm-FS);
        line-height: var(--typo-text-sm-LH);
}

div.wpforms-container .wpforms-form .wpforms-order-summary-container table.wpforms-order-summary-preview :is(th, td) {
        padding: var(--spacing-sm) var(--spacing-md);
        border: 0;
        border-block-end: 1px solid var(--table-cell-border);
        background: transparent;
        color: inherit;
}

div.wpforms-container .wpforms-form .wpforms-order-summary-container table.wpforms-order-summary-preview thead th {
        background-color: var(--table-background-header);
        color: var(--text-default);
        font-weight: var(--font-weight-semibold);
}

div.wpforms-container .wpforms-form .wpforms-order-summary-container table.wpforms-order-summary-preview tr:last-child td {
        border-block-end: 0;
}

div.wpforms-container .wpforms-form .wpforms-order-summary-container table.wpforms-order-summary-preview tr.wpforms-order-summary-preview-total td {
        color: var(--text-display);
        font-weight: var(--font-weight-semibold);
}

div.wpforms-container .wpforms-form .wpforms-order-summary-container table.wpforms-order-summary-preview tr.wpforms-order-summary-preview-coupon-total td {
        color: var(--text-success);
}

/* Number slider */
div.wpforms-container .wpforms-form .wpforms-field-number-slider input[type=range] {
        height: 4px;
        border: 0;
        border-radius: var(--radius-full);
        background: var(--slider-track-bg);
        accent-color: var(--slider-track-fill);
        box-shadow: none;
}

div.wpforms-container .wpforms-form .wpforms-field-number-slider .wpforms-field-number-slider-hint {
        color: var(--text-secondary-paragraph);
        font-size: var(--typo-text-sm-FS);
}

/* Rating stars use the brand colour */
div.wpforms-container .wpforms-form .wpforms-field-rating-item svg {
        transition: var(--nds-transition);
}

/* File upload (modern drop zone) */
div.wpforms-container .wpforms-form .wpforms-uploader {
        border: 1px dashed var(--form-field-border-default);
        border-radius: var(--radius-md);
        background-color: var(--form-field-background-lighter);
        color: var(--text-secondary-paragraph);
        transition: var(--nds-transition);
}

div.wpforms-container .wpforms-form .wpforms-uploader:hover,
div.wpforms-container .wpforms-form .wpforms-uploader.dz-drag-hover {
        border-color: var(--form-field-border-pressed);
}

div.wpforms-container .wpforms-form .wpforms-uploader .modern-title {
        color: var(--text-default);
}

div.wpforms-container .wpforms-form .wpforms-uploader .modern-title span {
        color: var(--text-primary);
}

div.wpforms-container .wpforms-form .wpforms-has-error .wpforms-uploader {
        border-color: var(--form-field-border-error);
}

div.wpforms-container .wpforms-form input[type=file] {
        max-width: 100%;
        color: var(--text-default);
        font-size: var(--typo-text-sm-FS);
}

div.wpforms-container .wpforms-form input[type=file]::file-selector-button {
        margin-inline-end: var(--spacing-md);
        padding: var(--spacing-xs) var(--spacing-md);
        border: 1px solid var(--border-neutral-primary);
        border-radius: var(--radius-sm);
        background: var(--button-background-transparent-default);
        color: var(--text-default);
        font: inherit;
        cursor: pointer;
}

/* HTML / content field inherits theme typography. */
div.wpforms-container .wpforms-form .wpforms-field-html,
div.wpforms-container .wpforms-form .wpforms-field-content {
        color: var(--text-primary-paragraph);
}

/* ==========================================================================
   14. Responsive
   ========================================================================== */

@media (max-width: 599px) {
        div.wpforms-container .wpforms-form :is(input, select, textarea, .wpforms-field-row):is(.wpforms-field-small, .wpforms-field-medium) {
                max-width: 100%;
        }

        div.wpforms-container .wpforms-form .wpforms-field .wpforms-field-row {
                flex-direction: column;
        }

        div.wpforms-container .wpforms-form .wpforms-field :is(.wpforms-checkbox-3-columns, .wpforms-multiplechoice-3-columns, .wpforms-list-3-columns) ul {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        div.wpforms-container .wpforms-form .wpforms-submit-container button.wpforms-submit {
                flex: 1 1 auto;
        }
}

@media (prefers-reduced-motion: reduce) {
        div.wpforms-container *,
        div.wpforms-container *::before,
        div.wpforms-container *::after {
                transition: none !important;
        }
}