/* Bayan Forms — base form styles. Layout via CSS gap (no floats), RTL-safe, reduced-motion aware. */
.bayan-form { --bayan-gap: 1rem; max-width: 48rem; }
.bayan-row { display: flex; flex-wrap: wrap; gap: var(--bayan-gap); margin-bottom: var(--bayan-gap); }
.bayan-field { flex: 1 1 100%; min-width: 0; }
.bayan-w-half { flex-basis: calc(50% - (var(--bayan-gap) / 2)); }
.bayan-w-third { flex-basis: calc(33.333% - (var(--bayan-gap) * 2 / 3)); }
@media (max-width: 600px) { .bayan-w-half, .bayan-w-third { flex-basis: 100%; } }
.bayan-label { display: block; font-weight: 600; margin-bottom: .35rem; }
.bayan-req { color: #b32d2e; }
.bayan-field input:not([type=checkbox]):not([type=radio]):not([type=file]),
.bayan-field textarea,
.bayan-field select { width: 100%; box-sizing: border-box; }
.bayan-help { margin: .25rem 0 0; font-size: .85em; opacity: .8; }
.bayan-error { margin: .25rem 0 0; color: #b32d2e; font-size: .9em; }
.bayan-summary { margin-bottom: var(--bayan-gap); padding: .75rem 1rem; border: 1px solid #b32d2e; color: #b32d2e; }
.bayan-name-split { display: flex; gap: var(--bayan-gap); }
.bayan-name-part { flex: 1 1 50%; }
.bayan-sublabel { display:block; font-size:.8em; opacity:.8; }
.bayan-choices { display: flex; flex-direction: column; gap: .35rem; }
.bayan-choice { font-weight: 400; }
.bayan-section-title { margin: 1.5rem 0 .25rem; }
/* honeypot: off-screen, never display:none (bots skip hidden), out of tab order via tabindex=-1 */
.bayan-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
[dir="rtl"] .bayan-name-split { flex-direction: row-reverse; }
.bayan-success { padding: 1rem 1.25rem; border: 1px solid #2d7a33; color: #1e5a26; }
.bayan-submit[disabled] { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .bayan-form * { transition: none !important; animation: none !important; } }

/* ============================================================
   Bayan styling system — everything themeable via custom props.
   Defaults are polished and distinctive; forms inherit page typography.
   ============================================================ */
.bayan-form {
    --bayan-accent: #2563eb;
    --bayan-radius: 6px;
    --bayan-bg: transparent;
    --bayan-fg: inherit;
    --bayan-muted: #6b7280;
    --bayan-border: #d1d5db;
    --bayan-field-bg: #fff;
    --bayan-error: #b32d2e;
    color: var(--bayan-fg);
    background: var(--bayan-bg);
}

/* fields share one set of tokens */
.bayan-field input:not([type=checkbox]):not([type=radio]):not([type=file]),
.bayan-field textarea,
.bayan-field select {
    border: 1px solid var(--bayan-border);
    border-radius: var(--bayan-radius);
    background: var(--bayan-field-bg);
    color: inherit;
    padding: .55rem .7rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bayan-field input:focus,
.bayan-field textarea:focus,
.bayan-field select:focus {
    border-color: var(--bayan-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5); /* fallback for browsers without color-mix */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bayan-accent) 50%, transparent);
}
/* Visible focus ring for keyboard users — WCAG 2.4.7 + 2.4.11. A solid outline (not just a
   low-opacity box-shadow) guarantees the 3:1 focus-appearance contrast on any background. */
.bayan-field input:focus-visible,
.bayan-field textarea:focus-visible,
.bayan-field select:focus-visible {
    outline: 2px solid var(--bayan-accent);
    outline-offset: 2px;
}
.bayan-field input[aria-invalid="true"],
.bayan-field textarea[aria-invalid="true"],
.bayan-field select[aria-invalid="true"] { border-color: var(--bayan-error); border-width: 2px; }

/* submit button */
.bayan-submit {
    background: var(--bayan-accent);
    color: #fff;
    border: 1px solid var(--bayan-accent);
    border-radius: var(--bayan-radius);
    padding: .6rem 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease;
}
.bayan-submit:hover { filter: brightness(1.07); }
.bayan-submit:focus-visible { outline: 2px solid var(--bayan-accent); outline-offset: 2px; }

/* ---- field styles ---- */
.bayan-fs-filled .bayan-field input:not([type=checkbox]):not([type=radio]):not([type=file]),
.bayan-fs-filled .bayan-field textarea,
.bayan-fs-filled .bayan-field select { --bayan-field-bg: #f3f4f6; border-color: transparent; }
.bayan-fs-underlined .bayan-field input:not([type=checkbox]):not([type=radio]):not([type=file]),
.bayan-fs-underlined .bayan-field textarea,
.bayan-fs-underlined .bayan-field select {
    border: 0; border-bottom: 2px solid var(--bayan-border);
    border-radius: 0; background: transparent; padding-left: 0; padding-right: 0;
}

/* Hard guard: author display rules (e.g. the inline-labels grid below) override the UA's
   [hidden]{display:none}, which silently defeated conditional.js's wrap.hidden in flat
   forms (review P1-5 — same bug class wizard.css already guards for wizard forms). */
.bayan-form [hidden] { display: none !important; }

/* Visually hidden, available to AT (theme-independent — front pages have no core
   .screen-reader-text guarantee). Used for the required-group legend hint (P2-17).
   Full recipe (padding/margin/border:0) so the utility never leaks pixels if a theme
   pads/borders spans, or if it is reused on a padded element (review: design). */
.bayan-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The stale-token reload button lives inside the .bayan-summary error box (form.js
   offerReload). Themes commonly reset button outlines, so give it an explicit focus ring
   like .bayan-submit, and separate it from the message (review: design). */
.bayan-reload {
    display: inline-block;
    margin-block-start: .5rem;
    padding: .4rem .9rem;
    border: 1px solid var(--bayan-border, #767676);
    border-radius: var(--bayan-radius, 4px);
    background: var(--bayan-surface, #fff);
    color: inherit;
    cursor: pointer;
    font: inherit;
}
.bayan-reload:focus-visible {
    outline: 2px solid var(--bayan-accent, #1a4fbf);
    outline-offset: 2px;
}

/* ---- label position ---- */
.bayan-labels-inline .bayan-field:not(.bayan-field--section):not(.bayan-field--consent) {
    display: grid; grid-template-columns: minmax(7rem, 25%) 1fr; align-items: center; gap: .75rem;
}
.bayan-labels-inline .bayan-label { margin-bottom: 0; }
@media (max-width: 600px) {
    .bayan-labels-inline .bayan-field { grid-template-columns: 1fr; }
    .bayan-labels-inline .bayan-label { margin-bottom: .35rem; }
}

/* ---- skins ---- */
.bayan-skin-card {
    --bayan-bg: #fff;
    padding: 1.75rem; border-radius: calc(var(--bayan-radius) + 4px);
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
}
.bayan-skin-bordered { padding: 1.5rem; border: 1px solid var(--bayan-border); border-radius: calc(var(--bayan-radius) + 2px); }
/* minimal = no wrapper chrome (base) */

/* ---- themes ---- */
.bayan-theme-dark {
    --bayan-fg: #e5e7eb; --bayan-muted: #9ca3af; --bayan-border: #4b5563;
    --bayan-field-bg: #1f2937;
}
.bayan-theme-dark.bayan-skin-card,
.bayan-theme-dark.bayan-skin-bordered { --bayan-bg: #111827; }
.bayan-theme-dark .bayan-help { opacity: .9; }
@media (prefers-color-scheme: dark) {
    .bayan-theme-auto {
        --bayan-fg: #e5e7eb; --bayan-muted: #9ca3af; --bayan-border: #4b5563;
        --bayan-field-bg: #1f2937;
    }
    .bayan-theme-auto.bayan-skin-card,
    .bayan-theme-auto.bayan-skin-bordered { --bayan-bg: #111827; }
}

/* International phone: country-code select + national number side by side. */
.bayan-phone-row { display: flex; gap: 8px; }
.bayan-phone-row .bayan-phone-cc { flex: 0 1 12em; min-width: 0; }
.bayan-phone-row input[type="tel"] { flex: 1 1 auto; min-width: 0; }