/**
 * ixiun Forms — front-end styles.
 *
 * Layout is driven by the schema's `layout` rows: each .ixiun-form__row is a
 * CSS grid whose column count comes from the --ixf-cols custom property set
 * inline per row. On narrow screens every row collapses to a single column.
 *
 * BRAND-AWARE BY DESIGN: the look is driven by --ixf-* variables that default to
 * the host theme's own tokens (Nunito Sans, the body font, the accent/button
 * colours) with plain fallbacks. On the ixiun-onyx theme the form picks up the
 * site's fonts and gold accent automatically; on any other theme it degrades to
 * a clean neutral. To restyle, a theme need only set these variables.
 */

.ixiun-form {
    /* Type — labels get the theme's Nunito Sans as an editorial accent; fields
       use the theme body font. Both fall back cleanly off the ixiun theme. */
    --ixf-font:       var(--font-body, 'Helvetica Neue', Arial, sans-serif);
    --ixf-label-font: var(--wp--preset--font-family--nunito-sans, 'Nunito Sans', var(--font-body, sans-serif));

    /* Colour — sampled from the theme palette with fallbacks.
       NOTE: ink deliberately reads --color-text (the body text colour), NOT
       --color-primary. "Primary" is a brand colour that can legitimately be light,
       which would render labels/buttons unreadable; body text is reliably legible. */
    --ixf-ink:     var(--color-text, #1a1b1a);
    --ixf-muted:   var(--color-muted, #6b7280);
    --ixf-accent:  var(--color-accent, #ddbd7d);
    --ixf-surface: var(--color-surface, #ffffff);
    /* Background of the native <option> popup, used only by the Outline variant
       (see the select rules below). Kept a dark warm near-black by default because
       Outline is meant for dark backgrounds; --color-bg/--color-surface can be
       white and so can't drive it. Override per form if the field sits on light. */
    --ixf-dropdown: #1f211d;
    /* Field border: tinted from the ink so it always relates to the text colour.
       Strong enough (30%) that a pale field still reads as a FIELD when it sits
       on a coloured card — a near-invisible hairline just looks like a blank gap. */
    --ixf-border:  color-mix(in srgb, var(--ixf-ink) 30%, transparent);
    --ixf-error:   #b3261e;

    /* Button palette. --ixf-btn (fill / border) and --ixf-btn-text (the label) are
       BOTH overridable from Form Settings, so the button never depends on a theme
       variable happening to resolve to a readable value. */
    --ixf-btn:           var(--color-btn, #d6a84b);
    --ixf-btn-secondary: var(--color-btn-secondary, #e7dcdc);
    --ixf-btn-text:      var(--ixf-ink);
    --ixf-inverse:       var(--color-text-inverse, #ffffff);
    /* The label colour once the hover wipe has filled the button. Without this the
       label keeps its resting colour and vanishes into the fill (black-on-black).
       Defaults to the inverse (white), which is right for a dark fill; override it
       from Form Settings if the button colour is light. */
    --ixf-btn-text-hover: var(--ixf-inverse);

    /* Input focus ring/border colour — its own variable so it can be recoloured
       (Forms ▸ Form Settings ▸ Focus color) independently of the button. */
    --ixf-focus:    var(--color-btn, #d6a84b);
    /* The required-field mark colour, likewise independently recolourable. */
    --ixf-required: var(--ixf-accent);

    --ixf-radius: 10px;
    --ixf-gap: 1.25rem;      /* horizontal gap between side-by-side fields */
    --ixf-row-gap: 1.75rem;  /* vertical rhythm between rows — the "air" */

    max-width: 640px;
    margin: 0 auto;
    font-family: var(--ixf-font);
    color: var(--ixf-ink);
}

.ixiun-form__title {
    margin: 0 0 var(--ixf-row-gap);
}

/* --- Rows / columns ---------------------------------------------------- */
.ixiun-form__row {
    display: grid;
    grid-template-columns: repeat(var(--ixf-cols, 1), 1fr);
    column-gap: var(--ixf-gap);
    row-gap: var(--ixf-row-gap);
    margin-bottom: var(--ixf-row-gap);
}

@media (max-width: 600px) {
    .ixiun-form__row {
        grid-template-columns: 1fr;
    }
}

/* --- Fields ------------------------------------------------------------ */
.ixiun-form__field {
    display: flex;
    flex-direction: column;
    min-width: 0; /* let inputs shrink inside the grid */
    border: 0;
    padding: 0;
    margin: 0;
}

/* Editorial label: Nunito Sans, tracked-out, small — echoing the theme's
   eyebrow/label treatment. Case is left as authored (so "(optional)" hints stay
   lowercase); it just gets the spacing and the accent font. */
.ixiun-form__label {
    font-family: var(--ixf-label-font);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.45;
    color: var(--ixf-ink);
    margin-bottom: 0.6rem;
}

.ixiun-form__required {
    color: var(--ixf-required);
    margin-left: 0.15em;
}

/* Labels hidden — placeholder-only look (Form Settings ▸ Field labels ▸ Hidden).
   The <label>/<legend> stays in the DOM as the field's accessible name, so screen
   readers still announce it; only the VISUAL label is removed. This is the standard
   "screen-reader-only" pattern, not display:none (which would drop it from the
   accessibility tree too). margin:0 also removes the label's usual bottom gap so
   fields sit flush. */
.ixiun-form--labels-hidden .ixiun-form__label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ixiun-form__field input,
.ixiun-form__field textarea,
.ixiun-form__field select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.78rem 0.9rem;
    font-family: var(--ixf-font);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--ixf-ink);
    background: var(--ixf-surface);
    border: 1px solid var(--ixf-border);
    border-radius: var(--ixf-radius);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.ixiun-form__field input::placeholder,
.ixiun-form__field textarea::placeholder {
    color: var(--ixf-muted);
    opacity: 0.7;
}

.ixiun-form__field textarea {
    min-height: 8.5rem;
    resize: vertical;
}

/* Custom dropdown chevron so selects match the inputs instead of the OS look. */
.ixiun-form__field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23726a58' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.95rem center;
    background-size: 12px 8px;
}

.ixiun-form__field input:focus,
.ixiun-form__field textarea:focus,
.ixiun-form__field select:focus {
    outline: none;
    border-color: var(--ixf-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ixf-focus) 40%, transparent);
}

/* --- Browser autofill -------------------------------------------------- */
/* When the browser fills a remembered value it paints its own pale background
   and blue-grey text straight onto the control. That paint is UA-level and
   outranks any `background`/`color` here, so the field flashes to a light block
   that ignores the whole palette. The one lever that does land is an inset
   box-shadow large enough to cover the field, plus -webkit-text-fill-color for
   the text — both pinned to the same variables the resting field uses, so an
   autofilled field is indistinguishable from a typed one.

   The long background-color transition is the companion half of the trick:
   Chrome animates its fill in, and the shadow can't stop the animation, only
   hide what it lands on — pushing the transition out to ~never means the fill
   never becomes visible in the first place. border-color/box-shadow keep their
   real timings so the focus ring still animates normally.

   :-webkit-autofill (not the standard :autofill) is deliberate: Chrome, Safari
   and Firefox 86+ all honour the prefixed form, while Safari never learned the
   standard one. Keep them in one list ONLY if that stays true — an unsupported
   pseudo in a selector list invalidates the entire rule. */
.ixiun-form__field input:-webkit-autofill,
.ixiun-form__field textarea:-webkit-autofill,
.ixiun-form__field select:-webkit-autofill {
    -webkit-text-fill-color: var(--ixf-ink);
    caret-color: var(--ixf-ink);
    box-shadow: 0 0 0 100px var(--ixf-surface) inset;
    transition: background-color 10000s ease-in-out 0s,
                border-color 0.16s ease,
                box-shadow 0.16s ease;
}

/* Autofilled AND focused: the focus rule above and the fill rule here both want
   box-shadow, and the later/equal-specificity one wins outright — so whichever
   lost would take its half of the effect with it. Declared together: the inset
   fill covers the field, the 3px ring sits outside the border box. */
.ixiun-form__field input:-webkit-autofill:focus,
.ixiun-form__field textarea:-webkit-autofill:focus,
.ixiun-form__field select:-webkit-autofill:focus {
    box-shadow: 0 0 0 100px var(--ixf-surface) inset,
                0 0 0 3px color-mix(in srgb, var(--ixf-focus) 40%, transparent);
}

/* --- Field style: Outline --------------------------------------------- */
/* An alternative to the default solid fill, chosen in Forms ▸ Form Settings ▸
   Field style. For forms on a dark or photographic background, where an opaque
   light fill reads as a heavy block: the field goes transparent and leans on a
   slightly stronger border, so it relates to the text colour instead of sitting
   on top of the background. The default ('filled') adds no class and is
   unchanged, so no existing form is affected. */
.ixiun-form--fields-outline .ixiun-form__field input,
.ixiun-form--fields-outline .ixiun-form__field textarea,
.ixiun-form--fields-outline .ixiun-form__field select {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--ixf-ink) 42%, transparent);
}

/* The default chevron is tinted for a light fill; on a transparent field it can
   vanish, so re-tint it to a soft light tone that reads on a dark background
   (which is where Outline is meant to be used). */
.ixiun-form--fields-outline .ixiun-form__field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23cfc8ba' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
}

/* Native date picker: the browser draws its own calendar icon and popup in a
   dark tone that disappears on a transparent dark field. color-scheme tells the
   browser to render that built-in chrome for a dark background instead. */
.ixiun-form--fields-outline .ixiun-form__field input[type="date"] {
    color-scheme: dark;
}

/* Native dropdown list: on the outline (dark) variant the select's text is light
   ink, but the <option> popup is drawn by the browser and lands on its default
   WHITE list — so the closed control reads fine while the open list is light-on-
   white and invisible (Chrome/Windows). Same fix as the date picker above:
   color-scheme: dark makes the browser render the popup (and its scrollbar and
   selected-row highlight) for a dark background. Explicit option colours back it
   up for engines that don't fully honour color-scheme on the list. --ixf-dropdown
   is overridable; it defaults to a warm near-black since Outline is for dark
   backgrounds (the theme's own --color-bg/--color-surface can be white). */
.ixiun-form--fields-outline .ixiun-form__field select {
    color-scheme: dark;
}
.ixiun-form--fields-outline .ixiun-form__field select option,
.ixiun-form--fields-outline .ixiun-form__field select optgroup {
    color: var(--ixf-ink);
    background-color: var(--ixf-dropdown, #1f211d);
}

/* Autofill on Outline: the base rule above fills with --ixf-surface, which is
   the light Field background colour this variant deliberately turned OFF — so
   an autofilled field would light up as the solid block Outline exists to
   avoid. Refill from --ixf-dropdown instead (the same near-black already
   backing the dropdown list) and add color-scheme: dark so the browser picks
   its dark autofill affordances — the key-icon and suggestion popup — to match.

   The fill is necessarily OPAQUE: there is no way to keep a browser-autofilled
   field transparent, so on a photographic background an autofilled field reads
   as a solid dark panel until the visitor edits it. That's the trade, and it
   only ever affects fields the browser filled. Override --ixf-dropdown per form
   if Outline is ever used over a light surface. */
.ixiun-form--fields-outline .ixiun-form__field input:-webkit-autofill,
.ixiun-form--fields-outline .ixiun-form__field textarea:-webkit-autofill,
.ixiun-form--fields-outline .ixiun-form__field select:-webkit-autofill {
    color-scheme: dark;
    box-shadow: 0 0 0 100px var(--ixf-dropdown, #1f211d) inset;
}

.ixiun-form--fields-outline .ixiun-form__field input:-webkit-autofill:focus,
.ixiun-form--fields-outline .ixiun-form__field textarea:-webkit-autofill:focus,
.ixiun-form--fields-outline .ixiun-form__field select:-webkit-autofill:focus {
    box-shadow: 0 0 0 100px var(--ixf-dropdown, #1f211d) inset,
                0 0 0 3px color-mix(in srgb, var(--ixf-focus) 40%, transparent);
}

/* --- Choice groups (radio / checkbox) --------------------------------- */
/* radio/checkbox groups render as a <fieldset><legend> for correct labelling;
   strip the browser's default fieldset chrome so it matches other fields. */
.ixiun-form__control {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.ixiun-form__options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

.ixiun-form__option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--ixf-font);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.ixiun-form__option input {
    width: auto;
    accent-color: var(--ixf-focus);
}

/* --- Choice groups: Segmented buttons --------------------------------- */
/* Opt-in per field (choice_style => 'segmented'): a radio/checkbox group drawn
   as a connected row of buttons — a Buy / Sell / Both toggle — instead of the
   stacked list. The native inputs stay in the DOM (visually hidden below, not
   display:none) so keyboard use, focus and the accessible name are all intact;
   only the visual control changes. Selected/focus states are read off the input
   with :has(), so the whole button reacts, not just the label text. */
.ixiun-form__options--segmented {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ixiun-form__options--segmented .ixiun-form__option {
    flex: 1 1 0;
    /* Wide enough that a few short options share one row; when they can't fit,
       the row wraps rather than squashing the labels. */
    min-width: 7rem;
    justify-content: center;
    gap: 0;
    padding: 0.9rem 1rem;
    text-align: center;
    font-family: var(--ixf-label-font);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ixf-ink);
    background: var(--ixf-surface);
    border: 1.5px solid var(--ixf-border);
    border-radius: var(--ixf-radius);
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease,
                color 0.16s ease, box-shadow 0.16s ease;
}

/* Hide the native control without dropping it from the tab order or the
   accessibility tree — opacity + a 1px box keeps it focusable, which is what
   drives the :focus-visible ring below. */
.ixiun-form__options--segmented .ixiun-form__option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.ixiun-form__options--segmented .ixiun-form__option:hover {
    border-color: color-mix(in srgb, var(--ixf-ink) 45%, transparent);
}

/* Selected: tinted fill + the accent border/label, tied to --ixf-focus so it
   matches the form's focus ring and picks up the site's brand colour. */
.ixiun-form__options--segmented .ixiun-form__option:has(input:checked) {
    color: var(--ixf-focus);
    background: color-mix(in srgb, var(--ixf-focus) 12%, var(--ixf-surface));
    border-color: var(--ixf-focus);
    font-weight: 700;
}

/* Keyboard focus lands on the hidden input; surface it on the button itself. */
.ixiun-form__options--segmented .ixiun-form__option:has(input:focus-visible) {
    outline: none;
    border-color: var(--ixf-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ixf-focus) 40%, transparent);
}

/* --- Help + error ------------------------------------------------------ */
.ixiun-form__help {
    margin: 0.4rem 0 0;
    font-size: 0.85em;
    color: var(--ixf-muted);
}

.ixiun-form__error {
    margin: 0.4rem 0 0;
    font-size: 0.85em;
    color: var(--ixf-error);
}

.ixiun-form__field.has-error input,
.ixiun-form__field.has-error textarea,
.ixiun-form__field.has-error select {
    border-color: var(--ixf-error);
}

.ixiun-form__summary {
    padding: 0.8rem 1rem;
    margin-bottom: var(--ixf-row-gap);
    border-radius: var(--ixf-radius);
    border-left: 3px solid var(--ixf-error);
    background: color-mix(in srgb, var(--ixf-error) 8%, transparent);
    color: var(--ixf-error);
    font-weight: 600;
}

/* --- The confirmation, and the swap animation -------------------------- */
/* With JS, submitting doesn't reload the page: the form fades out and this panel
   slides up into exactly the space it left. The shell pins its height for the
   duration so the page never lurches. Without JS the same panel is printed by
   the server after a redirect — it just appears, already in place, with no
   animation classes on it. Both look identical once settled. */

.ixiun-form-shell {
    transition: height 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* The form on its way out. */
.ixiun-form.is-leaving {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
}

/* The confirmation sits directly on whatever the form sat on — no panel of its
   own. The form is usually already inside the theme's card, and a tinted box
   inside that card just reads as a box inside a box. */
.ixiun-form--done {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}

.ixiun-form__done-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

/* The tick, in a soft gold disc. */
.ixiun-form__done-mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ixf-accent) 22%, transparent);
    color: var(--ixf-accent);
}

.ixiun-form__done-mark svg {
    width: 1.5rem;
    height: 1.5rem;
}

.ixiun-form__success {
    margin: 0;
    color: var(--ixf-ink);
    font-family: var(--ixf-label-font);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.5;
    max-width: 34ch;
}

/* Entry animation. These classes are added by the script only — the server-
   rendered (no-JS) panel carries neither, so it is simply visible. That's the
   whole trick: if the animation classes were the default, a visitor with JS off
   would be left staring at an invisible confirmation. */
.ixiun-form--done.is-entering {
    opacity: 0;
    transform: translateY(14px);
}

.ixiun-form--done.is-entering.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* The panel is focused programmatically so screen-reader and keyboard users land
   on it; that shouldn't paint a focus ring for mouse users. */
.ixiun-form--done:focus {
    outline: none;
}

.ixiun-form--done:focus-visible {
    outline: 2px solid var(--ixf-focus);
    outline-offset: 3px;
}

/* Respect a stated preference for less motion: same swap, no travel. */
@media (prefers-reduced-motion: reduce) {

    .ixiun-form-shell,
    .ixiun-form.is-leaving,
    .ixiun-form--done.is-entering.is-in {
        transition: none;
    }

    .ixiun-form--done.is-entering {
        transform: none;
    }
}

/* --- Submit button styles --------------------------------------------- */
/* Ported from the ixiun-onyx theme's editorial button system so the form's
   button looks the same whether or not that theme is active. Choose one in
   Forms ▸ Form Settings ▸ Button style; it maps to a --primary / --secondary /
   --outline / --simple modifier below.
     Primary   — solid gold, dark label, hover-wipes to dark, sliding →
     Secondary — soft fill, hover-wipes to gold, sliding →
     Outline   — ghost with a thin border, hover-wipes to solid
     Simple    — a clean rounded gold pill, no frills                         */
/* Turnstile captcha widget, when configured. Cloudflare renders the box itself
   at a fixed size; we only give it room to breathe above the button. */
.ixiun-form__captcha {
    margin-top: calc(var(--ixf-row-gap) * 1.25);
    /* The "flexible" widget will not render below 300px, and its interior is a
       cross-origin iframe that can't be reflowed. Centre it in the field column
       (so it can't only splay to the right) and cap the wrapper to the column so
       it never forces the layout wider. */
    display: flex;
    justify-content: center;
    max-width: 100%;
}

/* On phones whose card inner width drops under the widget's 300px floor it would
   otherwise poke past the padding. We can't resize the iframe without clipping
   Cloudflare's logo/links, so scale the whole widget down to fit — scaling keeps
   the fixed content intact. The step-down ladder tracks how much room a typical
   card leaves at each width; nudge the factors if a card uses heavier padding.
   The centred wrapper keeps its column width, so this never causes page scroll. */
@media (max-width: 430px) {
    .ixiun-form__captcha { transform: scale(0.94); transform-origin: center top; }
}
@media (max-width: 360px) {
    .ixiun-form__captcha { transform: scale(0.86); transform-origin: center top; }
}
@media (max-width: 320px) {
    .ixiun-form__captcha { transform: scale(0.78); transform-origin: center top; }
}

.ixiun-form__actions {
    margin-top: calc(var(--ixf-row-gap) * 1.25);
}

.ixiun-form__submit {
    cursor: pointer;
    font-family: var(--ixf-label-font);
}

.ixiun-form__submit[disabled] {
    opacity: 0.6;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* Shared editorial base — Primary / Secondary / Outline */
.ixiun-form__submit--primary,
.ixiun-form__submit--secondary,
.ixiun-form__submit--outline {
    position: relative;
    z-index: 0;               /* stacking context so the wipe sits behind the label */
    overflow: hidden;         /* clip the wipe to the button box */
    display: inline-block;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 1.4rem 3.4rem;
    min-width: 240px;
    border: 1.5px solid transparent;
    border-radius: 2px;       /* barely-rounded, editorial */
    background-color: transparent;
    color: var(--ixf-btn-text);
    transition: color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Left-to-right colour wipe, revealed on hover (behind the label) */
.ixiun-form__submit--primary::before,
.ixiun-form__submit--secondary::before,
.ixiun-form__submit--outline::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1);
}

.ixiun-form__submit--primary:hover::before,
.ixiun-form__submit--secondary:hover::before,
.ixiun-form__submit--outline:hover::before {
    transform: scaleX(1);
}

.ixiun-form__submit--primary:hover,
.ixiun-form__submit--secondary:hover,
.ixiun-form__submit--outline:hover {
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}

/* Sliding arrow — solid styles only */
.ixiun-form__submit--primary::after,
.ixiun-form__submit--secondary::after {
    content: '\2192';
    display: inline-block;
    margin-left: 0.75em;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.ixiun-form__submit--primary:hover::after,
.ixiun-form__submit--secondary:hover::after {
    transform: translateX(7px);
}

/* Resting raised shadow — solid buttons only */
.ixiun-form__submit--primary,
.ixiun-form__submit--secondary {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

/* Primary — solid gold gradient; wipes to the dark colour */
.ixiun-form__submit--primary {
    color: var(--ixf-btn-text);
    border-color: var(--ixf-btn);
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--ixf-btn) 82%, #fff) 0%,
        color-mix(in srgb, var(--ixf-btn) 90%, #000) 100%);
}
.ixiun-form__submit--primary::before {
    background-color: var(--ixf-btn-text);
}
.ixiun-form__submit--primary:hover {
    /* Primary wipes to the dark ink, so the label flips for the same reason. */
    color: var(--ixf-btn-text-hover);
    border-color: var(--ixf-btn-text);
}

/* Secondary — soft fill; wipes to gold */
.ixiun-form__submit--secondary {
    color: var(--ixf-btn-text);
    border-color: var(--ixf-btn-secondary);
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--ixf-btn-secondary) 97%, #fff) 0%,
        color-mix(in srgb, var(--ixf-btn-secondary) 93%, #000) 100%);
}
.ixiun-form__submit--secondary::before {
    background-color: var(--ixf-btn);
}
.ixiun-form__submit--secondary:hover {
    color: var(--ixf-btn-text);
    border-color: var(--ixf-btn);
}

/* Outline — a PROMINENT ghost: a full-strength 2px border in the button colour,
   a faint tint so it still reads as a button (a border alone disappears on a
   coloured background), and a solid wipe to the button colour on hover.
   Deliberately not the theme's on-photo white variant, which vanishes on light. */
.ixiun-form__submit--outline {
    color: var(--ixf-btn-text);
    border-width: 2px;
    border-color: var(--ixf-btn);
    /* A TRUE ghost: fully transparent and flat at rest. No tint fill, no resting
       shadow — those are what make an outline button read as a washed-out solid
       one. Its presence comes from the 2px border and a confident label. */
    background-color: transparent;
    box-shadow: none;
}
.ixiun-form__submit--outline::before {
    background-color: var(--ixf-btn);
}
.ixiun-form__submit--outline:hover {
    /* The wipe fills with --ixf-btn, so the label MUST flip or it disappears
       into the fill (e.g. black label on a black fill). */
    color: var(--ixf-btn-text-hover);
    border-color: var(--ixf-btn);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

/* Simple — a clean rounded gold pill, no wipe/arrow */
.ixiun-form__submit--simple {
    display: inline-block;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 1rem 2.6rem;
    border: 0;
    border-radius: var(--ixf-radius);
    color: var(--ixf-btn-text);
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--ixf-btn) 88%, #fff) 0%,
        color-mix(in srgb, var(--ixf-btn) 94%, #000) 100%);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ixf-btn) 38%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.ixiun-form__submit--simple:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--ixf-btn) 46%, transparent);
}
.ixiun-form__submit--simple:active {
    transform: translateY(0);
}

/* Optional full-width submit — set via the "Button width" setting. */
.ixiun-form__actions--full .ixiun-form__submit {
    display: block;
    width: 100%;
}

/* --- Honeypot: visually and semantically hidden, but present in the DOM.
       Not display:none — some bots skip display:none fields. -------------- */
.ixiun-form__hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Editor-only hint when a shortcode id doesn't resolve. */
.ixiun-form__notice {
    padding: 0.6rem 0.8rem;
    border: 1px dashed var(--ixf-error);
    border-radius: var(--ixf-radius);
    color: var(--ixf-error);
}