/* Patientforeningernes dag tilmelding - custom site styles. */

/* ---------------------------------------------------------------------
 * Privacy policy page: force the site header menu links to black
 * regardless of the header's transparent / light / sticky state.
 * The theme lightens the menu when transparent + over a light hero,
 * but the privacy-policy page sits on a white background where the
 * lightened menu becomes invisible. body.privacy-policy is the WP
 * core class added to the page set in Settings > Privacy.
 * ------------------------------------------------------------------- */

body.privacy-policy #site-header,
body.privacy-policy #site-header.is-transparent,
body.privacy-policy #site-header.light,
body.privacy-policy #site-header.sticky,
body.privacy-policy #site-header.transparent,
body.privacy-policy #site-header .main-nav,
body.privacy-policy #site-header .nav-holder,
body.privacy-policy #site-header .main-nav a,
body.privacy-policy #site-header .nav-holder a,
body.privacy-policy #site-header .menu-item > a,
body.privacy-policy #site-header .sub-menu a,
body.privacy-policy #site-header a {
    color: #242424 !important;
}

/* Hamburger / burger menu icon (the three-line button). The visible
   bars are .hamburger-inner + its ::before/::after pseudo-elements,
   which the theme styles via background-color. */
body.privacy-policy #site-header .hamburger-inner,
body.privacy-policy #site-header .hamburger-inner:before,
body.privacy-policy #site-header .hamburger-inner:after {
    background-color: #242424 !important;
}

/* Some Weston builds wire the toggle as .menu-toggle with a
   background-image SVG; fall back to color and border in case it is
   styled via currentColor. */
body.privacy-policy #site-header .menu-toggle,
body.privacy-policy #site-header .menu-toggle:before,
body.privacy-policy #site-header .menu-toggle:after {
    color: #242424 !important;
    border-color: #242424 !important;
}


/*
 * WPForms styling.
 *
 * All themeable values live in CSS custom properties scoped to
 * .wpforms-container. To override per-form, set a class under the form's
 * Settings > Advanced > Form CSS Class (e.g. "pfd26-signup") and override
 * the vars on that class - they cascade to every input/label/button inside:
 *
 *   .pfd26-signup {
 *       --pfd26-color-submit-bg: #385c56;
 *       --pfd26-color-error: tomato;
 *       --pfd26-radius-form: 0;
 *   }
 *
 * Avoid targeting #wpforms-NNN-container by numeric id - the id changes
 * across local/staging/prod when forms are imported via WPForms' native
 * Tools > Export/Import.
 *
 * Adjust the defaults below to match the site palette/typography. Mixins
 * and theme tokens from the source SCSS were inlined as best-guess defaults.
 */

/*
Colors shortlist
 #a67542
 #dcd6b3
 #242424
 #385c56
 #ccd0c6
 #a9b7a2
 #385c56
 #f90
 */

.wpforms-container {
    /* Colors - mapped from the site palette in the shortlist above */
    --pfd26-color-error:        #d82e20;            /* not from palette - errors must stand out */
    --pfd26-color-required:     #d82e20;            /* required-field asterisk; defaults to error red */
    --pfd26-color-focus:        #dcd6b3;            /* light beige */
    --pfd26-color-border:       #ccd0c6;            /* light sage */
    --pfd26-color-text:         #242424;            /* near-black */
    --pfd26-color-bg:           #ffffff;
    --pfd26-color-placeholder:  rgba(36, 36, 36, 0.40);
    --pfd26-color-checked-bg:   #385c56;            /* dark teal */
    --pfd26-color-radio-dot:    #ffffff;
    --pfd26-color-submit-bg:    #f90;               /* brand orange */
    --pfd26-color-submit-text:  #ffffff;
    --pfd26-color-submit-border:#f90;
    --pfd26-color-submit-overlay: rgba(0, 0, 0, 0.2);  /* hover darken */

    /* Typography */
    --pfd26-font-family:        "Montserrat", sans-serif;
    --pfd26-font-weight-reg:    400;
    --pfd26-font-weight-bold:   700;
    --pfd26-font-size-small:    14px;
    --pfd26-font-size-normal:   16px;
    --pfd26-font-size-medium:   18px;
    --pfd26-font-size-large:    24px;

    /* Sizing */
    --pfd26-radius-form:        5px;
    --pfd26-input-height:       64px;
    --pfd26-input-padding-y:    0.5em;
    --pfd26-input-padding-x:    1.5em;
    --pfd26-block-margin:       1.5em;
    --pfd26-form-block-margin:  1.5em;
    --pfd26-max-width-content:  800px;
    --pfd26-checkbox-size:      30px;
    --pfd26-checkmark-icon-size: 80%;
    --pfd26-radio-dot-size:     14px;

    /* Checkmark icon (inline SVG so no extra asset is needed) */
    --pfd26-checkmark-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='%23ffffff'/%3E%3C/svg%3E");

    /*
     * Pipe our submit colors into the variables that WPForms' "Modern
     * Markup" submit-button CSS reads from. Without this, WPForms'
     * own selectors win on specificity and the button renders with
     * the theme/WPForms defaults instead of the brand orange.
     */
    --wpforms-button-background-color: var(--pfd26-color-submit-bg);
    --wpforms-button-text-color: var(--pfd26-color-submit-text);
    --wpforms-button-border-color: var(--pfd26-color-submit-border);
    --wpforms-button-border-radius: var(--pfd26-radius-form);

    position: relative;
    max-width: var(--pfd26-max-width-content);
    margin: var(--pfd26-block-margin) auto;
}

.wpforms-container .wpforms-hidden {
    display: none;
}

/* ---------------------------------------------------------------------
 * Layout: rows / columns / fields
 * ------------------------------------------------------------------- */

.wpforms-container .wpforms-layout-row:not(:first-child) {
    margin-top: 1.5em;
}

@media (max-width: 767.98px) {
    .wpforms-container .wpforms-layout-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .wpforms-container .wpforms-layout-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .wpforms-container .wpforms-layout-column:not(:last-child) {
        margin-bottom: 1em;
    }
}

.wpforms-container .wpforms-field-container {
    margin-bottom: 1em;
}

.wpforms-container .wpforms-field {
    position: relative;
    margin: var(--pfd26-form-block-margin) 0;
    margin-top: 0;
}

.wpforms-container .wpforms-field-large .wpforms-one-half:not(:last-child) {
    margin-bottom: 1em;
}

/* ---------------------------------------------------------------------
 * Labels
 * ------------------------------------------------------------------- */

.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-sublabel {
    display: block;
    color: var(--pfd26-color-text);
    margin-bottom: 4px;
    padding: 0;
    width: 100%;
    font-family: var(--pfd26-font-family);
    font-size: var(--pfd26-font-size-medium);
    font-weight: var(--pfd26-font-weight-bold);
}

.wpforms-container .wpforms-field-label.wpforms-label-hide,
.wpforms-container .wpforms-field-sublabel.wpforms-sublabel-hide {
    display: none;
}

.wpforms-container .wpforms-field-limit-text {
    display: none;
}

.wpforms-container .wpforms-required-label {
    color: var(--pfd26-color-required);
    font-weight: var(--pfd26-font-weight-reg);
}

/*
 * Inline error message. Default rule covers regular text/email/textarea/
 * radio/checkbox fields where the error sits directly under the form
 * control. The -6px pulls it tight to the control above.
 *
 * Phone (.iti wrapper) and select have different intrinsic spacing
 * below their control area, so they get their own override below.
 */
.wpforms-container label.wpforms-error,
.wpforms-container em.wpforms-error {
    display: block;
    color: var(--pfd26-color-error);
    margin: -8px 0 0;
    padding: 0;
    font-style: normal;
    font-family: var(--pfd26-font-family);
    font-weight: var(--pfd26-font-weight-bold);
    font-size: var(--pfd26-font-size-normal);
    line-height: 1.3;
}

/*
 * Phone + select error overrides. Adjust the margin-top value to taste -
 * tweak in this single rule rather than touching the default above.
 */
.wpforms-container .wpforms-field-phone em.wpforms-error,
.wpforms-container .wpforms-field-phone label.wpforms-error,
.wpforms-container .wpforms-field-select em.wpforms-error,
.wpforms-container .wpforms-field-select label.wpforms-error {
    margin-top: 10px;
}
.wpforms-container .wpforms-field-radio em.wpforms-error,
.wpforms-container .wpforms-field-checkbox em.wpforms-error,
.wpforms-container .wpforms-field-gdpr-checkbox em.wpforms-error {
	margin-top: 0;
}

/*
 * Reset browser-default fieldset chrome so radio groups don't get extra
 * border/padding/margin that throws off the spacing of the error <em>
 * that follows the fieldset.
 */
.wpforms-container fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.wpforms-container fieldset > legend.wpforms-field-label {
    /* Make the fieldset legend behave like a regular label. */
    float: none;
    width: 100%;
    padding: 0;
}

.wpforms-container .wpforms-field-description {
    color: var(--pfd26-color-text);
    padding: 0.75em 2em 0 0;
    font-size: var(--pfd26-font-size-small);
}

/* ---------------------------------------------------------------------
 * HTML field (free-form copy block, e.g. consent / disclaimer text)
 * ------------------------------------------------------------------- */

.wpforms-container .wpforms-field-html {
    color: var(--pfd26-color-text);
    font-family: var(--pfd26-font-family);
    font-size: var(--pfd26-font-size-normal);
    font-weight: var(--pfd26-font-weight-reg);
    line-height: 1.5;
}

/*
 * Force every text node inside the HTML field to the normal font-size.
 * Weston (and many WP themes) ship rules like `.wpforms-container ul { font-size: ... }`
 * or `body ul li { font-size: ... }` that can outrank inheritance, so we
 * pin font-size explicitly on each tag we expect inside an HTML field
 * and use !important to win against any deeper theme selector.
 */
.wpforms-container .wpforms-field-html,
.wpforms-container .wpforms-field-html p,
.wpforms-container .wpforms-field-html ul,
.wpforms-container .wpforms-field-html ol,
.wpforms-container .wpforms-field-html li,
.wpforms-container .wpforms-field-html span,
.wpforms-container .wpforms-field-html strong,
.wpforms-container .wpforms-field-html b,
.wpforms-container .wpforms-field-html em,
.wpforms-container .wpforms-field-html a {
    font-size: var(--pfd26-font-size-normal) !important;
    line-height: 1.5 !important;
}

.wpforms-container .wpforms-field-html p {
    margin: 0 0 0.75em;
}

.wpforms-container .wpforms-field-html p:last-child {
    margin-bottom: 0;
}

.wpforms-container .wpforms-field-html ul,
.wpforms-container .wpforms-field-html ol {
    list-style-position: outside;
    padding-left: 1.5em;
    margin: 0.5em 0;
}

.wpforms-container .wpforms-field-html ul {
    list-style-type: disc;
}

.wpforms-container .wpforms-field-html ol {
    list-style-type: decimal;
}

.wpforms-container .wpforms-field-html li {
    margin: 0 0 0.4em;
    padding: 0;
}

.wpforms-container .wpforms-field-html li:last-child {
    margin-bottom: 0;
}

.wpforms-container .wpforms-field-html li:before {
    /* Override any theme-injected pseudo bullet so the native list marker shows. */
    display: none !important;
}

.wpforms-container .wpforms-field-html a {
    color: var(--pfd26-color-checked-bg);
    text-decoration: underline;
}

.wpforms-container .wpforms-field-html strong,
.wpforms-container .wpforms-field-html b {
    font-weight: var(--pfd26-font-weight-bold);
}

/* ---------------------------------------------------------------------
 * Text-style inputs + textarea + native select
 * ------------------------------------------------------------------- */

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="password"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container textarea,
.wpforms-container select {
    position: relative;
    box-sizing: border-box;
    display: block;
    border: 1px solid var(--pfd26-color-border);
    background: var(--pfd26-color-bg);
    color: var(--pfd26-color-text);
    margin: 0;
    padding: var(--pfd26-input-padding-y) var(--pfd26-input-padding-x);
    width: 100%;
    height: var(--pfd26-input-height);
    line-height: 1.4;                       /* explicit so option/text align identically across input vs select */
    border-radius: var(--pfd26-radius-form);
    font-family: var(--pfd26-font-family);
    font-size: var(--pfd26-font-size-normal);
    vertical-align: middle;
}

.wpforms-container input[type="text"]::placeholder,
.wpforms-container input[type="email"]::placeholder,
.wpforms-container input[type="password"]::placeholder,
.wpforms-container input[type="tel"]::placeholder,
.wpforms-container input[type="number"]::placeholder,
.wpforms-container textarea::placeholder {
    color: var(--pfd26-color-placeholder);
}

.wpforms-container input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container input[type="password"]:focus,
.wpforms-container input[type="tel"]:focus,
.wpforms-container input[type="number"]:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
    background-color: var(--pfd26-color-focus);
    border-color: var(--pfd26-color-text);
    outline: none;
}

.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error,
.wpforms-container select.wpforms-error {
    border-color: var(--pfd26-color-error);
}

.wpforms-container textarea {
    padding: var(--pfd26-input-padding-y) 1em;
    min-height: 160px;
    height: auto;
}

/* ---------------------------------------------------------------------
 * Phone field (intl-tel-input wraps the <input> in <div class="iti">)
 * Without this normalization the phone field renders ~10px higher than
 * sibling text/select fields because .iti is inline-block + auto-width.
 * ------------------------------------------------------------------- */

/*
 * Force the .iti wrapper to behave exactly like a regular form control:
 * full-width block, no margin/padding/border of its own, with the same
 * min-height as our other inputs. The library defaults are inline-block
 * + auto-width and inject some library CSS we have to win against.
 */
.wpforms-container .wpforms-field-phone .iti,
.wpforms-container .wpforms-field-phone .iti.iti--allow-dropdown,
.wpforms-container .wpforms-field-phone .iti.iti--show-flags,
.wpforms-container .wpforms-field-phone .iti.iti--inline-dropdown {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
    min-height: var(--pfd26-input-height);
}

.wpforms-container .wpforms-field-phone .iti input[type="tel"] {
    margin: 0;
    vertical-align: top;
}

/* ---------------------------------------------------------------------
 * Native <select> arrow
 * ------------------------------------------------------------------- */

.wpforms-container select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23242424'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 24px top 55%;
    background-size: 24px 24px;
    padding-right: 3em;
    white-space: nowrap;
    /*
     * Native <select> ignores line-height for option-text vertical
     * centering and uses its own internal logic, which puts the text
     * higher than an <input>'s text. Match input by setting line-height
     * equal to the inner content area: input-height - 2*padding-y - 2px
     * border. With defaults this is 64 - 16 - 2 = 46px; using calc keeps
     * it tied to the vars.
     */
    line-height: calc(var(--pfd26-input-height) - 2 * var(--pfd26-input-padding-y) - 2px);
}

.wpforms-container select[disabled] {
    pointer-events: none;
    opacity: 0.5;
}

/* WPForms "modern" select (Choices.js) */
.wpforms-container .wpforms-field-select-style-modern .choices__inner {
    border: 1px solid var(--pfd26-color-text);
    background: var(--pfd26-color-bg);
    color: var(--pfd26-color-text);
    padding: 0 !important;
    width: 100%;
    height: var(--pfd26-input-height);
    border-radius: var(--pfd26-radius-form);
    font-family: var(--pfd26-font-family);
    font-weight: var(--pfd26-font-weight-reg);
    font-size: var(--pfd26-font-size-normal);
}

.wpforms-container .wpforms-field-select-style-modern .choices__inner .choices__list--single {
    padding: 0.5em 1.25em;
}

.wpforms-container .wpforms-field-select-style-modern .choices__item.choices__item--selectable {
    font-size: var(--pfd26-font-size-normal);
}

/* ---------------------------------------------------------------------
 * Checkboxes + radios + GDPR
 * ------------------------------------------------------------------- */

.wpforms-container .wpforms-field-checkbox,
.wpforms-container .wpforms-field-radio,
.wpforms-container .wpforms-field-gdpr-checkbox {
    font-size: var(--pfd26-font-size-normal);
}

.wpforms-container .wpforms-field-checkbox ul,
.wpforms-container .wpforms-field-checkbox li,
.wpforms-container .wpforms-field-radio ul,
.wpforms-container .wpforms-field-radio li,
.wpforms-container .wpforms-field-gdpr-checkbox ul,
.wpforms-container .wpforms-field-gdpr-checkbox li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0 !important;
}

.wpforms-container .wpforms-field-checkbox ul,
.wpforms-container .wpforms-field-radio ul,
.wpforms-container .wpforms-field-gdpr-checkbox ul {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.wpforms-container .wpforms-field-checkbox li,
.wpforms-container .wpforms-field-radio li,
.wpforms-container .wpforms-field-gdpr-checkbox li {
    margin: 0 0 5px !important;
}

.wpforms-container .wpforms-field-checkbox li:last-child,
.wpforms-container .wpforms-field-radio li:last-child,
.wpforms-container .wpforms-field-gdpr-checkbox li:last-child {
    margin-bottom: 0 !important;
}

.wpforms-container .wpforms-field-checkbox li:before,
.wpforms-container .wpforms-field-radio li:before,
.wpforms-container .wpforms-field-gdpr-checkbox li:before {
    display: none !important;             /* kill any list bullet from theme */
}

.wpforms-container .wpforms-field-checkbox.wpforms-list-inline ul,
.wpforms-container .wpforms-field-radio.wpforms-list-inline ul,
.wpforms-container .wpforms-field-gdpr-checkbox.wpforms-list-inline ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em 2em;
}

.wpforms-container .wpforms-field-gdpr-checkbox {
    margin: var(--pfd26-block-margin) 0;
}

/* Visually hide the native input but keep it accessible */
.wpforms-container .wpforms-field-checkbox input[type="checkbox"],
.wpforms-container .wpforms-field-gdpr-checkbox input[type="checkbox"],
.wpforms-container .wpforms-field-radio input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The label wraps the visible "box" + caption */
.wpforms-container .wpforms-field-checkbox input[type="checkbox"] ~ label,
.wpforms-container .wpforms-field-gdpr-checkbox input[type="checkbox"] ~ label,
.wpforms-container .wpforms-field-radio input[type="radio"] ~ label {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0 10px;
    position: relative;
    margin: 0;
    cursor: pointer;
    color: var(--pfd26-color-text);
	font-size: var(--pfd26-font-size-normal);
}

/* The empty box / circle */
.wpforms-container .wpforms-field-checkbox input[type="checkbox"] ~ label:before,
.wpforms-container .wpforms-field-gdpr-checkbox input[type="checkbox"] ~ label:before,
.wpforms-container .wpforms-field-radio input[type="radio"] ~ label:before {
    flex-shrink: 0;
    display: block;
    content: '';
    position: relative;
    top: 0;
    background: var(--pfd26-color-bg);
    border: 1px solid var(--pfd26-color-border);
    border-radius: 2px;
    width: var(--pfd26-checkbox-size);
    height: var(--pfd26-checkbox-size);
}

/* The checkmark / dot */
.wpforms-container .wpforms-field-checkbox input[type="checkbox"] ~ label:after,
.wpforms-container .wpforms-field-gdpr-checkbox input[type="checkbox"] ~ label:after,
.wpforms-container .wpforms-field-radio input[type="radio"] ~ label:after {
    flex-shrink: 0;
    flex-grow: 0;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-image: var(--pfd26-checkmark-image);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: var(--pfd26-checkmark-icon-size);
    width: var(--pfd26-checkbox-size);
    height: var(--pfd26-checkbox-size);
    opacity: 0;
	font-size: var(--pfd26-font-size-normal);
}

/* Checked state: fill the box, show checkmark */
.wpforms-container .wpforms-field-checkbox input[type="checkbox"]:checked ~ label:before,
.wpforms-container .wpforms-field-gdpr-checkbox input[type="checkbox"]:checked ~ label:before,
.wpforms-container .wpforms-field-radio input[type="radio"]:checked ~ label:before {
    background: var(--pfd26-color-checked-bg);
    border-color: var(--pfd26-color-checked-bg);
}

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

/* Radio: round shape, dot instead of checkmark */
.wpforms-container .wpforms-field-radio input[type="radio"] ~ label:before {
    border-radius: 50%;
}

.wpforms-container .wpforms-field-radio input[type="radio"] ~ label:after {
    background-image: none;
    background-color: var(--pfd26-color-radio-dot);
    border-radius: 50%;
    top:  calc((var(--pfd26-checkbox-size) - var(--pfd26-radio-dot-size)) / 2);
    left: calc((var(--pfd26-checkbox-size) - var(--pfd26-radio-dot-size)) / 2);
    width: var(--pfd26-radio-dot-size);
    height: var(--pfd26-radio-dot-size);
}

/* Tighten spacing when a checkbox is followed by a conditional checkbox */
.wpforms-container .wpforms-field-checkbox:has(+ .wpforms-field-checkbox.wpforms-conditional-field.wpforms-conditional-show) {
    margin-bottom: 10px;
}

/* GDPR consent label: regular weight, no extra padding */
.wpforms-container .wpforms-field-gdpr-checkbox input[type="checkbox"] ~ label,
.wpforms-container .wpforms-field-gdpr-checkbox input[type="radio"] ~ label {
    padding-top: 0;
    font-weight: var(--pfd26-font-weight-reg);
    font-size: var(--pfd26-font-size-normal);
}

.wpforms-container .wpforms-field-gdpr-checkbox a {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * Submit button
 * ------------------------------------------------------------------- */

.wpforms-container .wpforms-submit-container {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 2.25em 0 0;
}

.wpforms-container .wpforms-submit-container .wpforms-submit-spinner {
    display: none !important;
}

/*
 * Submit button rule. Doubled-up selector matches WPForms' modern-markup
 * selector (.wpforms-container.wpforms-render-modern button[type="submit"])
 * to win the specificity fight; !important on color/bg/border guards
 * against any remaining theme-level rules.
 */
.wpforms-container .wpforms-submit,
.wpforms-container.wpforms-render-modern .wpforms-form button[type="submit"].wpforms-submit {
    position: relative;
    cursor: pointer;
    padding: 0 50px;
    min-height: var(--pfd26-input-height);
    font-size: var(--pfd26-font-size-medium) !important;
    color: var(--pfd26-color-submit-text) !important;
    background-color: var(--pfd26-color-submit-bg) !important;
    border: 1px solid var(--pfd26-color-submit-border) !important;
    border-radius: var(--pfd26-radius-form) !important;
    transition: background-image 0.15s ease;
}

.wpforms-container .wpforms-submit:hover,
.wpforms-container .wpforms-submit:focus {
    /* Darken on hover by layering a translucent overlay over the bg color. */
    background-image: linear-gradient(var(--pfd26-color-submit-overlay), var(--pfd26-color-submit-overlay));
}

/* ---------------------------------------------------------------------
 * Title + description + confirmation
 * ------------------------------------------------------------------- */

.wpforms-container .wpforms-title {
    font-size: var(--pfd26-font-size-medium);
    font-weight: var(--pfd26-font-weight-reg);
    margin-bottom: 1em;
}

.wpforms-container .wpforms-description {
    font-size: var(--pfd26-font-size-normal);
    font-weight: var(--pfd26-font-weight-reg);
}

.wpforms-container .wpforms-confirmation-container,
.wpforms-container .wpforms-confirmation-container p {
    color: var(--pfd26-color-text);
    padding: 1em 0;
    text-align: center;
    font-size: var(--pfd26-font-size-large) !important;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------
 * Variant: .pfd26-on-dark
 *
 * Use when the form sits on a solid dark-teal background (#385c56).
 * Apply via Settings > Advanced > Form CSS Class on the WPForms form,
 * e.g. `pfd26-signup pfd26-on-dark`.
 *
 * Strategy: input internals (white bg + dark text) stay untouched -
 * inputs need to remain readable against their own white background.
 * Only elements that sit directly on the dark page background flip
 * to white, plus the checked-state fill which would otherwise blend
 * into the matching #385c56 page color.
 * ------------------------------------------------------------------- */

.pfd26-on-dark {
    /* Lighter sage border keeps input edges visible against dark teal. */
    --pfd26-color-border: #a9b7a2;
    /* Without this, the checkbox/radio "checked" fill (#385c56) would
       be the same color as the page, making the checked state vanish.
       Use brand orange instead - white checkmark stays legible on it. */
    --pfd26-color-checked-bg: #f90;
    /* Description/required text live on the dark bg so we shift them
       slightly to keep contrast without going pure white. */
    --pfd26-color-required: #f90;
    /* The default error red (#d82e20) is too dark to read on #385c56 -
       lift to a lighter coral that still reads as "error". This also
       drives the .wpforms-error border on invalid inputs. */
    --pfd26-color-error: #ff6b6b;
}

/* Labels, helper copy, and the HTML field all sit on the page bg. */
.pfd26-on-dark .wpforms-field-label,
.pfd26-on-dark .wpforms-field-sublabel,
.pfd26-on-dark legend.wpforms-field-label,
.pfd26-on-dark .wpforms-field-description,
.pfd26-on-dark .wpforms-field-html,
.pfd26-on-dark .wpforms-field-html p,
.pfd26-on-dark .wpforms-field-html ul,
.pfd26-on-dark .wpforms-field-html ol,
.pfd26-on-dark .wpforms-field-html li,
.pfd26-on-dark .wpforms-field-html span,
.pfd26-on-dark .wpforms-field-html strong,
.pfd26-on-dark .wpforms-field-html b,
.pfd26-on-dark .wpforms-field-html em {
    color: #ffffff;
}

/* Inline labels next to checkboxes and radios. The default rule colors
   these with var(--pfd26-color-text) which is dark and would disappear. */
.pfd26-on-dark .wpforms-field-checkbox input[type="checkbox"] ~ label,
.pfd26-on-dark .wpforms-field-gdpr-checkbox input[type="checkbox"] ~ label,
.pfd26-on-dark .wpforms-field-radio input[type="radio"] ~ label,
.pfd26-on-dark .wpforms-field-label-inline {
    color: #ffffff;
}

/* Links inside the HTML field need to stand out from the white body text. */
.pfd26-on-dark .wpforms-field-html a {
    color: #f90;
}

/* Confirmation message appears on the same dark page bg after submit. */
.pfd26-on-dark + .wpforms-confirmation-container,
.pfd26-on-dark .wpforms-confirmation-container,
.pfd26-on-dark .wpforms-confirmation-container p {
    color: #ffffff;
}

/* ---------------------------------------------------------------------
 * Variant: .pfd26-submit-above-gdpr
 *
 * Lift the submit button visually above the GDPR consent checkbox and
 * any trailing HTML disclaimer field. Add together with other classes
 * in Settings > Advanced > Form CSS Class:
 *
 *   pfd26-signup pfd26-submit-above-gdpr
 *
 * How it works: WPForms emits the submit container as a sibling of
 * .wpforms-field-container (not as a field inside it), so we make the
 * form a flex column and lift .wpforms-field-container to
 * display:contents - its field children then act as direct flex
 * siblings of the submit container, and CSS `order` decides display
 * order without touching the DOM.
 *
 * AJAX validation and data submission see the original DOM order, so
 * nothing functional changes - only visual layout.
 *
 * Default (unset) elements have order:0. We assign:
 *   - submit container .................. order: 100
 *   - GDPR checkbox field ............... order: 200
 *   - HTML field (typically disclaimer) . order: 300
 *
 * If a form has multiple HTML fields and only the trailing one should
 * sit below submit, swap the .wpforms-field-html selector below for a
 * more specific class (e.g. .wpforms-container_field-html-disclaimer)
 * set on that single field via its Advanced > CSS Classes setting.
 * ------------------------------------------------------------------- */

/*
 * The class lands on .wpforms-container (outer wrapper), not on the
 * <form>. The form is what holds .wpforms-field-container and
 * .wpforms-submit-container as siblings, so the form needs to be the
 * flex parent - not the outer container.
 *
 * Flexbox does NOT collapse vertical margins, so the previous per-
 * element margin pattern (.wpforms-field has margin-bottom 1.5em,
 * .wpforms-submit-container has margin-top 2.25em) would stack and
 * produce ~3.75em gaps. We use `gap` on the flex parent for a single
 * uniform spacing value and zero out the per-element margins so they
 * don't double up. Negative margin on em.wpforms-error is internal to
 * each field so it's unaffected.
 */
.pfd26-submit-above-gdpr .wpforms-form {
    display: flex;
    flex-direction: column;
    /* Tighter than --pfd26-form-block-margin (1.5em) - tweak this single
       value if the visual gap between flex siblings still feels off. */
    gap: 0.75em;
}

.pfd26-submit-above-gdpr .wpforms-field-container {
    display: contents;
}

.pfd26-submit-above-gdpr .wpforms-field,
.pfd26-submit-above-gdpr .wpforms-submit-container {
    margin: 0;
}

.pfd26-submit-above-gdpr .wpforms-submit-container { order: 100; }
.pfd26-submit-above-gdpr .wpforms-field-gdpr-checkbox {
    order: 200;
    /* Extra breathing room between the submit button and the GDPR
       consent checkbox below it. Adds to the flex `gap` above. */
    margin-top: 1.5em;
}
.pfd26-submit-above-gdpr .wpforms-field-html { order: 300; }