:root {
    --nxp-easy-form-spacing: 1rem;
    --nxp-easy-form-font-size: 1rem;
    --nxp-easy-form-border-radius: var(--bs-border-radius, var(--template-button-border-radius, 4px));
    /* Field border. rgba(0,0,0,0.42) passes WCAG 1.4.11 non-text
     * contrast (~3.2:1 on white). No prefers-color-scheme override:
     * most Joomla templates (Cassiopeia) don't opt into OS dark mode,
     * so dark-host templates should override this token from their own
     * CSS rather than us flipping it under an unresponsive page. */
    --nxp-easy-form-border-color: rgba(0, 0, 0, 0.42);
    /* Inactive progress track + step badge. #9aa0a6 ~3.45:1 on white
     * (Bootstrap gray-300 is below the 3:1 non-text threshold). */
    --nxp-easy-form-progress-line: #9aa0a6;
    --nxp-easy-form-input-padding: 0.55rem 0.65rem;
    --nxp-easy-form-message-success: var(--template-success-text, #137333);
    --nxp-easy-form-message-error: var(--template-danger-text, #b71c1c);
    --nxp-easy-form-button-bg: var(--template-link-color, #0d6efd);
    --nxp-easy-form-button-color: var(--template-text-light, #ffffff);
    --nxp-easy-form-button-hover-bg: color-mix(in srgb, var(--nxp-easy-form-button-bg) 85%, #000 15%);
}

.nxp-easy-form {
    margin: calc(var(--nxp-easy-form-spacing) * 1.5) 0;
    color: inherit;
    font: inherit;
}

/* Color scheme via the data-nxp-form-theme attribute on the wrapper:
 *   light (default): the :root tokens above.
 *   dark: re-declare border + progress tokens inverted and set
 *         color-scheme: dark so native widget chrome follows.
 *   auto: the same dark overrides gated on prefers-color-scheme. The
 *         :not([data-nxp-form-theme="light"]) selector covers auto
 *         (and dark, harmlessly) while staying out of the way when
 *         light is pinned.
 * auto only behaves correctly when the host template itself responds
 * to prefers-color-scheme; Cassiopeia does not, so the safe default
 * is light (the component Options description warns admins). */
.nxp-easy-form[data-nxp-form-theme="dark"] {
    --nxp-easy-form-border-color: rgba(255, 255, 255, 0.55);
    --nxp-easy-form-progress-line: rgba(255, 255, 255, 0.35);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    .nxp-easy-form:not([data-nxp-form-theme="light"]) {
        --nxp-easy-form-border-color: rgba(255, 255, 255, 0.55);
        --nxp-easy-form-progress-line: rgba(255, 255, 255, 0.35);
        color-scheme: dark;
    }
}

/* Native dropdown / picker chrome is drawn by the browser, so
 * color-scheme: dark above does the heavy lifting; these explicit
 * option/optgroup colors are belt-and-braces for browsers that still
 * style the dropdown list from page CSS. */
.nxp-easy-form[data-nxp-form-theme="dark"] option,
.nxp-easy-form[data-nxp-form-theme="dark"] optgroup {
    background-color: #1f1f1f;
    color: #f1f1f1;
}

@media (prefers-color-scheme: dark) {
    .nxp-easy-form:not([data-nxp-form-theme="light"]) option,
    .nxp-easy-form:not([data-nxp-form-theme="light"]) optgroup {
        background-color: #1f1f1f;
        color: #f1f1f1;
    }
}

.nxp-easy-form__group {
    margin-bottom: var(--nxp-easy-form-spacing);
}

/* Block flex so the label owns its row even next to a narrow inline
 * input like the color swatch. */
.nxp-easy-form__label {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.nxp-easy-form__input,
.nxp-easy-form__textarea,
.nxp-easy-form__select {
    width: 100%;
    padding: var(--nxp-easy-form-input-padding);
    border: 1px solid var(--nxp-easy-form-border-color);
    border-radius: var(--nxp-easy-form-border-radius);
    font-size: var(--nxp-easy-form-font-size);
    background-color: var(--template-bg-input, var(--cassiopeia-color-bg, #ffffff));
    color: inherit;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.nxp-easy-form__input:focus,
.nxp-easy-form__textarea:focus,
.nxp-easy-form__select:focus {
    outline: none;
    /* Focus is a state cue: take the per-form brand color when set,
       otherwise stay template-native (--template-link-color). No brand
       set means no visual change for existing forms. */
    border-color: var(--nxp-brand, var(--template-link-color, #0d6efd));
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--nxp-brand, var(--template-link-color, #0d6efd)) 25%, transparent);
}

/* Constrain the native color swatch to a small square thumb so it
 * doesn't inherit the full-width input shape. width !important defends
 * against templates shipping a higher-specificity input { width: 100% }. */
.nxp-easy-form__input[type="color"] {
    width: 56px !important;
    height: 40px;
    padding: 4px;
    cursor: pointer;
}

.nxp-easy-form__textarea {
    min-height: 120px;
}

/* Checkbox / radio sized to 1.08em so they read proportionally with
 * body text across host templates. Rating-field radios are hidden by
 * a later same-specificity rule, so this doesn't affect rating chrome. */
.nxp-easy-form__group input[type="checkbox"],
.nxp-easy-form__group input[type="radio"] {
    width: 1.08em;
    height: 1.08em;
    vertical-align: middle;
}

/* Native control accent. With no brand color the var is unset and
   accent-color falls back to the browser default, so Classic stays
   template-native until an admin opts into a brand color. Pro theme
   rules override with their own branded accent-color at higher
   specificity (and keep their #3b82f6 floor). */
.nxp-easy-form input[type="checkbox"],
.nxp-easy-form input[type="radio"],
.nxp-easy-form__range {
    accent-color: var(--nxp-brand);
}

.nxp-easy-form__messages {
    margin-bottom: var(--nxp-easy-form-spacing);
    font-weight: 600;
}

.nxp-easy-form__messages--success {
    color: var(--nxp-easy-form-message-success);
}

.nxp-easy-form__messages--error {
    color: var(--nxp-easy-form-message-error);
}

/* Submit wrapper hugs its button (inline + left default) so the
 * draft-save sibling shares the row. Any non-default width/alignment
 * switches it to full-width flex below so justify-content applies. */
.nxp-easy-form__actions {
    display: inline-flex;
    align-items: center;
    vertical-align: top;
}

.nxp-easy-form__actions--width-inline.nxp-easy-form__actions--align-center,
.nxp-easy-form__actions--width-inline.nxp-easy-form__actions--align-right,
.nxp-easy-form__actions--width-full,
.nxp-easy-form__actions--width-half,
.nxp-easy-form__actions--width-third {
    display: flex;
    width: 100%;
}

.nxp-easy-form__actions--width-full > .nxp-easy-form__button {
    width: 100%;
}

.nxp-easy-form__actions--width-half > .nxp-easy-form__button {
    width: 50%;
}

.nxp-easy-form__actions--width-third > .nxp-easy-form__button {
    width: 33.3333%;
}

.nxp-easy-form__actions--align-left {
    justify-content: flex-start;
}

.nxp-easy-form__actions--align-center {
    justify-content: center;
}

.nxp-easy-form__actions--align-right {
    justify-content: flex-end;
}

/* Narrow button widths collapse to full at the form-grid breakpoints
 * so the button keeps a usable label width. */
@media (max-width: 991.98px) {
    .nxp-easy-form__actions--width-third > .nxp-easy-form__button {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .nxp-easy-form__actions--width-half > .nxp-easy-form__button {
        width: 100%;
    }
}

/* --nxp-brand is the inline per-form brand color (set by
 * ThemeOverlayResolver, cascading per-form -> component
 * brand_accent_color -> omitted). Reading the cascade here lets the
 * brand color apply on Classic without switching to a Pro preset. */
.nxp-easy-form__button,
.nxp-easy-form__actions button {
    background-color: var(--nxp-brand,
                          var(--nxp-easy-form-button-bg));
    color: var(--nxp-easy-form-button-color);
    border: none;
    border-radius: var(--nxp-easy-form-border-radius);
    padding: 0.55rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.nxp-easy-form__button:hover,
.nxp-easy-form__actions button:hover {
    background-color: color-mix(
        in srgb,
        var(--nxp-brand, var(--nxp-easy-form-button-bg)) 88%,
        black
    );
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
}

.nxp-easy-form__button:disabled,
.nxp-easy-form__actions button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    box-shadow: none;
}

/* Geolocation capture button. Outlined secondary style (distinct from
 * the primary Submit), brand-aware, with a brand-tinted hover fill. */
.nxp-easy-form__geolocation-capture {
    background-color: transparent;
    color: var(--nxp-brand, var(--nxp-easy-form-button-bg));
    border: 1.5px solid var(--nxp-brand, var(--nxp-easy-form-button-bg));
    border-radius: 20px;
    padding: 0.5rem 1.15rem 0.5rem 2.5rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    background-image: url("../assets/icons/map-2.svg");
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    background-size: 18px 18px;
    transition: background-color 0.18s ease-in-out,
                color 0.18s ease-in-out,
                border-color 0.18s ease-in-out,
                box-shadow 0.18s ease-in-out;
}
@media (max-width: 640px) {
    .nxp-easy-form__geolocation-capture {
        margin-left: 0;
    }
}
.nxp-easy-form__geolocation-capture:hover:not(:disabled),
.nxp-easy-form__geolocation-capture:focus-visible:not(:disabled) {
    background-color: color-mix(
        in srgb,
        var(--nxp-brand, var(--nxp-easy-form-button-bg)) 10%,
        transparent
    );
    color: var(--nxp-brand, var(--nxp-easy-form-button-hover-bg, var(--nxp-easy-form-button-bg)));
    border-color: var(--nxp-brand, var(--nxp-easy-form-button-hover-bg, var(--nxp-easy-form-button-bg)));
    box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.08);
    outline: none;
}
.nxp-easy-form__geolocation-capture:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* Spacing between the consent checkbox and the capture button. */
.nxp-easy-form__geolocation-consent-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 0.75rem 1rem;
}

@media (max-width: 640px) {
    .nxp-easy-form__geolocation-consent-check {
        margin-left: 0;
    }
}

.nxp-easy-form__geolocation-consent {
    margin: 0 0 0.5rem;
}

.nxp-easy-form__geolocation-status {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--nxp-easy-form-muted, #666);
}

label.nxp-easy-form__radio:not(:first-child) {
    margin-left: 1rem;
}
.nxp-easy-form__choices .nxp-easy-form__checkbox:not(:first-child) {
    margin-left: 1rem;
}

/* Save & Resume — secondary action styled as a quiet text link so it
 * doesn't compete with Submit. Stays a <button> for keyboard / SR access. */
.nxp-draft-save-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 0.75rem;
    vertical-align: middle;
    flex-wrap: wrap;
}
@media (max-width: 32rem) {
    .nxp-draft-save-wrap {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}
.nxp-draft-save {
    background: none;
    border: 0;
    padding: 0;
    color: var(--nxp-easy-form-button-bg);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    line-height: 1.4;
    transition: color 0.15s ease-in-out, text-decoration-color 0.15s ease-in-out;
}
.nxp-draft-save:hover,
.nxp-draft-save:focus-visible {
    color: var(--nxp-easy-form-button-hover-bg, var(--nxp-easy-form-button-bg));
    text-decoration-thickness: 2px;
    outline: none;
}
.nxp-draft-save:focus-visible {
    outline: 2px solid var(--nxp-easy-form-button-bg);
    outline-offset: 3px;
    border-radius: 2px;
}
.nxp-draft-save:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    text-decoration: none;
}
.nxp-draft-save-result {
    font-size: 0.92rem;
    line-height: 1.4;
    padding: 0.5rem 0.75rem;
    border-radius: var(--nxp-easy-form-border-radius);
    /* Take its own line on narrow viewports. */
    flex: 1 1 auto;
    min-width: min(20rem, 100%);
}
.nxp-draft-save-result--success {
    background: rgba(46, 160, 67, 0.10);
    color: rgb(31, 118, 49);
    border: 1px solid rgba(46, 160, 67, 0.35);
}
.nxp-draft-save-result--error {
    background: rgba(207, 34, 46, 0.10);
    color: rgb(176, 30, 40);
    border: 1px solid rgba(207, 34, 46, 0.35);
}

.nxp-easy-form__error {
    color: var(--nxp-easy-form-message-error);
    font-size: 0.875rem;
    margin: 0.35rem 0 0;
}

.nxp-easy-form__hint {
    display: block;
    font-size: 0.85rem;
    margin: 0.35rem 0 0;
    opacity: 0.75;
}

.nxp-easy-form__nxp_f {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.nxp-easy-form__required-marker {
    color: var(--template-danger-text, #d32f2f);
}

.nxp-easy-form__range-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nxp-easy-form__range {
    flex: 1;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* WCAG 2.4.7 — restore a deliberate keyboard-focus indicator for the
 * range input (the UA outline is removed above). Mirrored on the
 * webkit/moz thumb pseudo-elements so the ring reads as the control's. */
.nxp-easy-form__range:focus {
    outline: none;
}

.nxp-easy-form__range:focus-visible {
    outline: 2px solid var(--nxp-brand, var(--template-link-color, #0d6efd));
    outline-offset: 2px;
    border-radius: var(--nxp-easy-form-border-radius);
}

.nxp-easy-form__range:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--nxp-brand, var(--template-link-color, #0d6efd));
    outline-offset: 2px;
}

.nxp-easy-form__range:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--nxp-brand, var(--template-link-color, #0d6efd));
    outline-offset: 2px;
}

.nxp-easy-form__range-value {
    min-width: 3ch;
    text-align: right;
    font-weight: 600;
    font-size: var(--nxp-easy-form-font-size);
}

.nxp-easy-form__form .cf-turnstile {
    padding: 1rem 0;
}

/* Advanced column layouts (Pro, layout.two_column). A 12-track grid
 * lets half (6/12) and third (4/12) coexist:
 *   two_column:   half = 6, third = 6 (degrades to half)
 *   three_column: half = 8, third = 4
 * Mobile always collapses to a single column. */
.nxp-easy-form__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}

.nxp-easy-form__grid > * {
    /* Structural items (buttons, full-width fields) span the row. */
    grid-column: 1 / -1;
}

.nxp-easy-form__grid--two-column > .nxp-easy-form__group--half,
.nxp-easy-form__grid--two-column > .nxp-easy-form__group--third {
    grid-column: span 6;
}

.nxp-easy-form__grid--three-column > .nxp-easy-form__group--half {
    grid-column: span 8;
}

.nxp-easy-form__grid--three-column > .nxp-easy-form__group--third {
    grid-column: span 4;
}

/* Tablet: collapse three-column to two-column so third-width fields
 * don't shrink below a usable width. Stored layout is unchanged and
 * snaps back at >= 992px. */
@media (min-width: 641px) and (max-width: 991.98px) {
    .nxp-easy-form__grid--three-column > .nxp-easy-form__group--half,
    .nxp-easy-form__grid--three-column > .nxp-easy-form__group--third {
        grid-column: span 6;
    }
}

@media (max-width: 640px) {
    .nxp-easy-form__grid--two-column,
    .nxp-easy-form__grid--three-column {
        grid-template-columns: 1fr;
    }

    .nxp-easy-form__grid--two-column > .nxp-easy-form__group--half,
    .nxp-easy-form__grid--two-column > .nxp-easy-form__group--third,
    .nxp-easy-form__grid--three-column > .nxp-easy-form__group--half,
    .nxp-easy-form__grid--three-column > .nxp-easy-form__group--third {
        grid-column: 1 / -1;
    }
}

/* Multi-step forms */
.nxp-easy-form__progress {
    margin-bottom: 1.5rem;
}

.nxp-easy-form__step-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    counter-reset: none;
}

/* <li> shell — sizing only; the child <button> carries the visual
 * treatment and interaction (a real button, not a role on the li). */
.nxp-easy-form__step-indicator {
    flex: 1;
    padding: 0;
    margin: 0;
    list-style: none;
}

.nxp-easy-form__step-indicator-button {
    appearance: none;
    background: none;
    border: 0;
    margin: 0;
    text-align: left;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 0.85rem;
    color: #6c757d;
    border-bottom: 3px solid var(--nxp-easy-form-progress-line);
    transition: color 0.2s, border-color 0.2s;
}

.nxp-easy-form__step-indicator-button:hover {
    opacity: 0.8;
}

/* WCAG 2.4.7 keyboard-focus ring, scoped to keyboard focus. */
.nxp-easy-form__step-indicator-button:focus-visible {
    outline: 2px solid var(--template-link-color, #0d6efd);
    outline-offset: 2px;
}

.nxp-easy-form__step-indicator--active .nxp-easy-form__step-indicator-button {
    color: #212529;
    border-bottom-color: #2271b1;
    font-weight: 600;
}

.nxp-easy-form__step-indicator--completed .nxp-easy-form__step-indicator-button {
    color: #212529;
    border-bottom-color: #198754;
}

.nxp-easy-form__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--nxp-easy-form-progress-line);
    color: #212529;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.nxp-easy-form__step-indicator--active .nxp-easy-form__step-number {
    background: #2271b1;
    color: #fff;
}

.nxp-easy-form__step-indicator--completed .nxp-easy-form__step-number {
    background: #198754;
    color: #fff;
}

/* WCAG 4.1.3 — visually-hidden polite live region announcing step
 * transitions. clip-path pattern keeps focusable descendants reachable. */
.nxp-easy-form__step-announcer {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.nxp-easy-form__step-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nxp-easy-form__step-nav {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    justify-content: space-between;
}

/* Last step: Previous left, Submit right, same row. */
.nxp-easy-form__step-nav--last {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.nxp-easy-form__step-nav--last .nxp-easy-form__step-prev {
    order: 0;
}

.nxp-easy-form__step-nav--last .nxp-easy-form__button {
    margin-left: auto;
    order: 1;
}

.nxp-easy-form__step-prev,
.nxp-easy-form__step-next {
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--nxp-easy-form-border-color);
    border-radius: 4px;
    background: #fff;
    color: #212529;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

/* Previous: secondary "back" action — stays neutral so it doesn't
   compete with the accent-filled Next button. */
.nxp-easy-form__step-prev:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
}

/* Next: primary forward CTA — fills with the brand color, with the
   template blue (#2271b1) as the floor when no brand is set. */
.nxp-easy-form__step-next {
    margin-left: auto;
    background: var(--nxp-brand, #2271b1);
    color: #fff;
    border-color: var(--nxp-brand, #2271b1);
}

.nxp-easy-form__step-next:hover {
    background: color-mix(in srgb, var(--nxp-brand, #2271b1) 88%, black);
    border-color: color-mix(in srgb, var(--nxp-brand, #2271b1) 88%, black);
}

.nxp-easy-form__step-next:focus-visible {
    outline: 2px solid var(--nxp-brand, #2271b1);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .nxp-easy-form__step-list {
        flex-wrap: wrap;
        gap: 4px;
    }

    .nxp-easy-form__step-indicator {
        flex: none;
        min-width: 0;
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .nxp-easy-form__step-label {
        display: none;
    }

    .nxp-easy-form__step-nav {
        flex-direction: column;
        gap: 0.5rem;
    }

    .nxp-easy-form__step-prev,
    .nxp-easy-form__step-next {
        width: 100%;
        text-align: center;
    }

    .nxp-easy-form__step {
        overflow-x: hidden;
    }
}

.nxp-easy-form__step {
    max-width: 100%;
    overflow-x: hidden;
}

/* Prevent a flash of conditionally-hidden fields before the logic JS
 * evaluates; the evaluator sets explicit display on each field. */
.nxp-easy-form__form [data-logic] {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.nxp-easy-form__form [data-logic].nxp-logic-evaluated {
    visibility: visible;
    height: auto;
    overflow: visible;
    margin: revert;
    padding: revert;
}

/* Modal-mode form trigger (Pro, capability forms.modal). Uses the
 * native <dialog> element; animation via @starting-style + ::backdrop,
 * collapsed to instant under prefers-reduced-motion. */
.nxp-easy-form-modal-trigger {
    display: inline-block;
    padding: 0.6em 1.2em;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border-radius: 0.25em;
}

.nxp-easy-form-modal-trigger:hover,
.nxp-easy-form-modal-trigger:focus-visible {
    opacity: 0.85;
}

/* Theme + size are custom properties so the shortcode's theme= / width=
 * flags override per-element. --nxp-modal-width defaults to 680px and
 * is overridden via inline style when the shortcode carried width=. */
dialog.nxp-easy-form-modal {
    --nxp-modal-width: 680px;
    --nxp-modal-bg: #ffffff;
    --nxp-modal-color: #111111;
    --nxp-modal-field-bg: #ffffff;
    --nxp-modal-field-color: #111111;
    --nxp-modal-field-border: rgba(0, 0, 0, 0.2);
    --nxp-modal-backdrop: rgba(0, 0, 0, 0.5);
    --nxp-modal-close-hover-bg: rgba(0, 0, 0, 0.08);

    width: min(var(--nxp-modal-width), calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 2rem 1.5rem 1.5rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    background: var(--nxp-modal-bg);
    color: var(--nxp-modal-color);
    box-sizing: border-box;
}

dialog.nxp-easy-form-modal::backdrop {
    background: var(--nxp-modal-backdrop);
}

/* Pin field colors to the modal's theme tokens so inputs stay legible
 * on a dark dialog without touching the form's general stylesheet. */
dialog.nxp-easy-form-modal .nxp-easy-form__input,
dialog.nxp-easy-form-modal input[type="text"],
dialog.nxp-easy-form-modal input[type="email"],
dialog.nxp-easy-form-modal input[type="tel"],
dialog.nxp-easy-form-modal input[type="url"],
dialog.nxp-easy-form-modal input[type="number"],
dialog.nxp-easy-form-modal input[type="password"],
dialog.nxp-easy-form-modal input[type="search"],
dialog.nxp-easy-form-modal input[type="date"],
dialog.nxp-easy-form-modal input[type="datetime-local"],
dialog.nxp-easy-form-modal textarea,
dialog.nxp-easy-form-modal select {
    background-color: var(--nxp-modal-field-bg);
    color: var(--nxp-modal-field-color);
    border-color: var(--nxp-modal-field-border);
}

dialog.nxp-easy-form-modal .nxp-easy-form__input::placeholder,
dialog.nxp-easy-form-modal textarea::placeholder {
    color: color-mix(in srgb, var(--nxp-modal-field-color) 60%, transparent);
}

.nxp-easy-form-modal__title-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Visible heading variant (show-title=1). Right padding keeps long
 * titles clear of the absolutely-positioned close button. */
.nxp-easy-form-modal__title {
    margin: 0 0 1rem;
    padding-right: 2rem;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--nxp-modal-color);
}

.nxp-easy-form-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 0.25em;
}

.nxp-easy-form-modal-close:hover,
.nxp-easy-form-modal-close:focus-visible {
    background: var(--nxp-modal-close-hover-bg);
}

/* Entry animation: scale 0.96 -> 1 + fade, via @starting-style. */
dialog.nxp-easy-form-modal {
    opacity: 1;
    transform: scale(1);
    transition: opacity 150ms ease, transform 150ms ease, overlay 150ms allow-discrete, display 150ms allow-discrete;
}

@starting-style {
    dialog.nxp-easy-form-modal[open] {
        opacity: 0;
        transform: scale(0.96);
    }
    dialog.nxp-easy-form-modal[open]::backdrop {
        opacity: 0;
    }
}

dialog.nxp-easy-form-modal::backdrop {
    opacity: 1;
    transition: opacity 150ms ease, overlay 150ms allow-discrete, display 150ms allow-discrete;
}

@media (prefers-reduced-motion: reduce) {
    dialog.nxp-easy-form-modal,
    dialog.nxp-easy-form-modal::backdrop {
        transition-duration: 0ms;
    }
}

/* Dark variant: explicit theme=dark, or theme=auto + OS prefers dark.
 * :not([data-nxp-modal-theme="light"]) covers the auto path. */
dialog.nxp-easy-form-modal[data-nxp-modal-theme="dark"] {
    --nxp-modal-bg: #1f1f1f;
    --nxp-modal-color: #f1f1f1;
    --nxp-modal-field-bg: rgba(255, 255, 255, 0.06);
    --nxp-modal-field-color: #f1f1f1;
    --nxp-modal-field-border: rgba(255, 255, 255, 0.2);
    --nxp-modal-backdrop: rgba(0, 0, 0, 0.7);
    --nxp-modal-close-hover-bg: rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
    dialog.nxp-easy-form-modal:not([data-nxp-modal-theme="light"]) {
        --nxp-modal-bg: #1f1f1f;
        --nxp-modal-color: #f1f1f1;
        --nxp-modal-field-bg: rgba(255, 255, 255, 0.06);
        --nxp-modal-field-color: #f1f1f1;
        --nxp-modal-field-border: rgba(255, 255, 255, 0.2);
        --nxp-modal-backdrop: rgba(0, 0, 0, 0.7);
        --nxp-modal-close-hover-bg: rgba(255, 255, 255, 0.1);
    }
}

/* color-scheme: dark hands native dropdown / picker chrome to the
 * browser's dark variant; the option rules below are belt-and-braces. */
dialog.nxp-easy-form-modal[data-nxp-modal-theme="dark"] select,
dialog.nxp-easy-form-modal[data-nxp-modal-theme="dark"] input[type="date"],
dialog.nxp-easy-form-modal[data-nxp-modal-theme="dark"] input[type="datetime-local"],
dialog.nxp-easy-form-modal[data-nxp-modal-theme="dark"] input[type="time"],
dialog.nxp-easy-form-modal[data-nxp-modal-theme="dark"] input[type="month"],
dialog.nxp-easy-form-modal[data-nxp-modal-theme="dark"] input[type="week"] {
    color-scheme: dark;
}

dialog.nxp-easy-form-modal[data-nxp-modal-theme="dark"] option,
dialog.nxp-easy-form-modal[data-nxp-modal-theme="dark"] optgroup {
    background-color: #1f1f1f;
    color: #f1f1f1;
}

@media (prefers-color-scheme: dark) {
    dialog.nxp-easy-form-modal:not([data-nxp-modal-theme="light"]) select,
    dialog.nxp-easy-form-modal:not([data-nxp-modal-theme="light"]) input[type="date"],
    dialog.nxp-easy-form-modal:not([data-nxp-modal-theme="light"]) input[type="datetime-local"],
    dialog.nxp-easy-form-modal:not([data-nxp-modal-theme="light"]) input[type="time"],
    dialog.nxp-easy-form-modal:not([data-nxp-modal-theme="light"]) input[type="month"],
    dialog.nxp-easy-form-modal:not([data-nxp-modal-theme="light"]) input[type="week"] {
        color-scheme: dark;
    }
    dialog.nxp-easy-form-modal:not([data-nxp-modal-theme="light"]) option,
    dialog.nxp-easy-form-modal:not([data-nxp-modal-theme="light"]) optgroup {
        background-color: #1f1f1f;
        color: #f1f1f1;
    }
}

/* Explicit theme=light pins color-scheme: light so a dark OS doesn't
 * bleed into the modal's native widgets. */
dialog.nxp-easy-form-modal[data-nxp-modal-theme="light"] select,
dialog.nxp-easy-form-modal[data-nxp-modal-theme="light"] input[type="date"],
dialog.nxp-easy-form-modal[data-nxp-modal-theme="light"] input[type="datetime-local"],
dialog.nxp-easy-form-modal[data-nxp-modal-theme="light"] input[type="time"],
dialog.nxp-easy-form-modal[data-nxp-modal-theme="light"] input[type="month"],
dialog.nxp-easy-form-modal[data-nxp-modal-theme="light"] input[type="week"] {
    color-scheme: light;
}

/* Price + Calculation are presentational (label + formatted value, no
 * input box). Stack label-over-value, vertically centered, so they
 * align with the input row rhythm of sibling fields. */
.nxp-easy-form__price,
.nxp-easy-form__field--calculation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.125em;
    align-self: stretch;
    min-height: 3.25rem;
}
.nxp-easy-form__price-label,
.nxp-easy-form__field--calculation > .nxp-easy-form__label,
.nxp-easy-form__field--calculation > label {
    font-size: 0.875em;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}
.nxp-easy-form__price-value,
.nxp-easy-form__calculation {
    font-size: 1.5em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    /* reset <output>'s form-color defaults to body text color */
    color: inherit;
}
.nxp-easy-form__price--invalid .nxp-easy-form__price-value {
    display: none;
}

/* Static image presentational field. */
.nxp-easy-form__static-image {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.nxp-easy-form__static-image-img {
    max-width: 100%;
    height: auto;
    display: block;
}
.nxp-easy-form__static-image-caption {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: var(--nxp-muted-color, #6c757d);
}

/* Divider presentational field. --nxp-divider-color drives the line
 * and flips lighter on dark theme (explicit dark, or auto + prefers
 * dark) so it stays visible. */
.nxp-easy-form {
    --nxp-divider-color: #6c757d;
}
.nxp-easy-form[data-nxp-form-theme="dark"] {
    --nxp-divider-color: rgba(255, 255, 255, 0.55);
}
@media (prefers-color-scheme: dark) {
    .nxp-easy-form:not([data-nxp-form-theme="light"]) {
        --nxp-divider-color: rgba(255, 255, 255, 0.55);
    }
}
.nxp-easy-form__divider-line {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--nxp-divider-color);
    margin: 0.5em 0;
}
.nxp-easy-form__divider-line--solid  { border-top-style: solid;  }
.nxp-easy-form__divider-line--dashed { border-top-style: dashed; }
.nxp-easy-form__divider-line--dotted { border-top-style: dotted; }
.nxp-easy-form__divider--labelled .nxp-easy-form__divider-label {
    display: inline-block;
    font-weight: 600;
    margin-bottom: 0.25em;
    color: var(--nxp-divider-color);
}

/* Heading presentational field. */
.nxp-easy-form__heading-text {
    margin: 0.5em 0 0.25em;
}
.nxp-easy-form__heading--left   { text-align: left; }
.nxp-easy-form__heading--center { text-align: center; }
.nxp-easy-form__heading--right  { text-align: right; }

/* Rating widget. Reverse-order radio group rendered as stars; the
 * sibling selector fills stars to the left of :checked / :hover (radios
 * emitted in reverse under flex-direction: row-reverse). Degrades to a
 * plain accessible radio stack without CSS. */
.nxp-easy-form__rating {
    border: 0;
    padding: 0;
    margin: 0;
}
.nxp-easy-form__rating-legend {
    font-weight: 600;
    margin-bottom: 0.25em;
}
.nxp-easy-form__rating-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.nxp-easy-form__rating-stars input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.nxp-easy-form__rating-star {
    display: inline-block;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    padding: 0 0.05em;
    color: var(--nxp-rating-empty-color, #ccc);
    transition: color 0.15s ease;
}
.nxp-easy-form__rating-star::before {
    content: "\2605"; /* ★ */
}
.nxp-easy-form__rating-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
/* Filled stars: checked input and every sibling label to its right in
 * the DOM (left visually under row-reverse). */
.nxp-easy-form__rating-stars input[type="radio"]:checked ~ .nxp-easy-form__rating-star {
    color: var(--nxp-rating-filled-color, #f5b400);
}
/* Hover preview takes priority while pointing. */
.nxp-easy-form__rating-stars:hover .nxp-easy-form__rating-star {
    color: var(--nxp-rating-empty-color, #ccc);
}
.nxp-easy-form__rating-star:hover,
.nxp-easy-form__rating-star:hover ~ .nxp-easy-form__rating-star {
    color: var(--nxp-rating-hover-color, #ffcd3a);
}
.nxp-easy-form__rating-stars input[type="radio"]:focus-visible + .nxp-easy-form__rating-star {
    outline: 2px solid var(--nxp-focus-color, #2680eb);
    outline-offset: 2px;
}