/**
 * VOSKA — JetFormBuilder Integration
 * Path:  integrations/jetformbuilder/jfb.css
 * Since: 1.0.0
 *
 * Two label patterns applied to JFB's native DOM:
 *   .vsk-jfb-ifta – Infield Top-Aligned (recommended, accessible)
 *   .vsk-jfb-fl   – Floating Labels (Material-style, animated)
 *
 * Scoped on the form wrapper or parent container.
 *
 * Depends on: voska-vars.css (--vsk-* tokens)
 *
 * Colour variants (add alongside pattern class):
 *   (default)        – dark fields: light bg, dark border/text
 *   .vsk-jfb--light  – light fields: for dark backgrounds
 *
 * DOM reference (JFB 3.x):
 *   .jet-form-builder-row
 *     ├ .jet-form-builder__label > __label-text
 *     ├ .jet-form-builder__field-wrap > input|textarea|select
 *     │   OR input directly in row (date/time/switcher)
 *     │   OR .jet-form-builder__fields-group (checkbox/radio)
 *     ├ .jet-form-builder__desc > small        (optional)
 *     └ .error-message                         (conditional)
 */

.grecaptcha-badge{
	display: none!important;
}


/* ═══════════════════════════════════════════════════════════════════
   1. LOCAL TOKENS (shared)
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl).jet-form-builder,
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder {

    /* ── Color ──────────────────────────────────────────────── */
    --_jfb-clr-text:        var(--vsk-clr--text);
    --_jfb-clr-text-faded:  var(--vsk-clr--text-faded);
    --_jfb-clr-accent:      var(--vsk-clr--accent);
    --_jfb-clr-bg:          transparent;
    --_jfb-clr-bg-active:   hsl(from var(--_jfb-clr-accent) h s l / .05);
    --_jfb-clr-border:      var(--vsk-clr--border);
    --_jfb-clr-border-act:  var(--_jfb-clr-accent);

    --_jfb-clr-danger:      var(--vsk-clr--danger);
    --_jfb-clr-success:     var(--vsk-clr--success);
    --_jfb-clr-warning:     var(--vsk-clr--warning);

    /* ── Shape ───────────────────────────────────────────────── */
    --_jfb-radius:       0px;
    --_jfb-radius-s:     0px;
    --_jfb-border-width: 1px;
    --_jfb-gap:          12px;
    --_jfb-pad-x:        1em;
    --_jfb-pad-y:        .3em;
	
	/* ── FL positioning ────────────────────────────────────── */
	--_jfb-fl-shift:  calc(var(--_jfb-size-label) * 1.3 + 2px);
	--_jfb-fl-rest:   calc(var(--_jfb-pad-y) + var(--_jfb-fl-shift) / 2);
	--_jfb-fl-lift:   calc(var(--_jfb-pad-y) * 0.5);

    /* ── Typography ──────────────────────────────────────────── */
    --_jfb-font:        var(--vsk-font--family-text);
    --_jfb-size-input:  var(--vsk-font--size-text);
    --_jfb-size-label:  max(12px, .78rem);
    --_jfb-size-desc:   max(11px, .7rem);
    --_jfb-size-error:  max(12px, .75rem);
    --_jfb-wgt-label:   var(--vsk-font--wgt-text-bold);

    /* ── Transition ──────────────────────────────────────────── */
    --_jfb-trns: .2s var(--vsk-trns--ease);
}


/* ═══════════════════════════════════════════════════════════════════
   2. LIGHT VARIANT (shared)
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl).vsk-jfb--light.jet-form-builder,
:is(.vsk-jfb-ifta, .vsk-jfb-fl).vsk-jfb--light .jet-form-builder{
    --_jfb-clr-text:       white;
    --_jfb-clr-text-faded: rgba(255, 255, 255, .6);
    --_jfb-clr-border:     rgba(255, 255, 255, .3);
    --_jfb-clr-bg-active:  rgba(255, 255, 255, .08);
}


/* ═══════════════════════════════════════════════════════════════════
   3. GUTENBERG BLOCK RESETS (shared)
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .wp-block-columns {
    margin: 0 !important;
    gap: var(--_jfb-gap) !important;
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .wp-block-spacer {
    margin: 0 !important;
}

@media (max-width: 767px) {
    :is(.vsk-jfb-ifta, .vsk-jfb-fl) .wp-block-columns {
        gap: 0 !important;
    }
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) fieldset {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   4. FIELD ROW — BOX (shared structure)
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-row:is(
    .field-type-text-field,
    .field-type-textarea-field,
    .field-type-number-field,
    .field-type-select-field,
    .field-type-date-field,
    .field-type-datetime-field,
    .field-type-time-field,
	.field-type-phone-field
) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-style: solid;
    border-width: var(--_jfb-border-width);
    border-color: var(--_jfb-clr-border);
    border-radius: var(--_jfb-radius);
    background: var(--_jfb-clr-bg);
    outline: 2px solid transparent;
    outline-offset: -2px;
    box-shadow: inset 0 0 0 0 transparent;
    transition:
        border-color  var(--_jfb-trns),
        box-shadow    var(--_jfb-trns),
        background    var(--_jfb-trns),
        outline-color var(--_jfb-trns);
    margin-bottom: var(--_jfb-gap);
	margin-top: 0;
}


/* §4a — IFTA padding */

.vsk-jfb-ifta .jet-form-builder-row:is(
    .field-type-text-field,
    .field-type-textarea-field,
    .field-type-number-field,
    .field-type-select-field,
    .field-type-date-field,
    .field-type-datetime-field,
    .field-type-time-field
) {
    position: relative;
    padding: var(--_jfb-pad-y) var(--_jfb-pad-x);
}


/* §4b — FL padding (extra top clearance for floating label) */

.vsk-jfb-fl .jet-form-builder-row:is(
    .field-type-text-field,
    .field-type-textarea-field,
    .field-type-number-field,
    .field-type-select-field,
    .field-type-date-field,
    .field-type-datetime-field,
    .field-type-time-field,
	.field-type-phone-field
) {
    position: relative;
    padding: calc(var(--_jfb-pad-y) + var(--_jfb-fl-shift)) var(--_jfb-pad-x) var(--_jfb-pad-y);
}


/* §4c — Label hit-area
   Both patterns: clicking anywhere on the row focuses the input.
   IFTA: <label>::after stretched over the row (label is in flow, not positioned).
   FL:   wrapper covers row via inset:0, <label> is 100% of wrapper.
   Both: field-wrap / direct inputs at z-index:2 above the label layer. */

/* IFTA: ::after overlay */
.vsk-jfb-ifta .jet-form-builder-row:is(
    .field-type-text-field,
    .field-type-textarea-field,
    .field-type-number-field,
    .field-type-select-field,
    .field-type-date-field,
    .field-type-datetime-field,
    .field-type-time-field,
	.field-type-phone-field
) label.jet-form-builder__label-text::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: text;
}

/* Shared: field-wrap above label layer */
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-row:is(
    .field-type-text-field,
    .field-type-textarea-field,
    .field-type-number-field,
    .field-type-select-field
) .jet-form-builder__field-wrap {
    position: relative;
    z-index: 2;
}

/* Shared: direct inputs above label layer (date/time — no .field-wrap) */
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-row:is(
    .field-type-date-field,
    .field-type-datetime-field,
    .field-type-time-field
) > input.jet-form-builder__field {
    position: relative;
    z-index: 2;
}

/* Shared: desc & error above overlay so text is selectable */
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder__desc,
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .error-message {
    position: relative;
    z-index: 2;
}


/* ── Focus state (shared) ────────────────────────────────── */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-row:is(
    .field-type-text-field,
    .field-type-textarea-field,
    .field-type-number-field,
    .field-type-select-field,
    .field-type-date-field,
    .field-type-datetime-field,
    .field-type-time-field,
	.field-type-phone-field
):focus-within {
    border-color: var(--_jfb-clr-border-act);
    box-shadow: inset 0 0 0 1px var(--_jfb-clr-border-act);
    outline-color: var(--_jfb-clr-border-act);
    background: var(--_jfb-clr-bg-active);
}


/* ── Error state (shared) ────────────────────────────────── */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-row:is(
    .field-type-text-field,
    .field-type-textarea-field,
    .field-type-number-field,
    .field-type-select-field,
    .field-type-date-field,
    .field-type-datetime-field,
    .field-type-time-field,
	.field-type-phone-field
).field-has-error {
    border-color: var(--_jfb-clr-danger);
    box-shadow: inset 0 0 0 1px var(--_jfb-clr-danger);
    outline-color: var(--_jfb-clr-danger);
    background: hsl(from var(--_jfb-clr-danger) h s l / .04);
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-row.field-has-error:focus-within {
    border-color: var(--_jfb-clr-danger);
    box-shadow: inset 0 0 0 1px var(--_jfb-clr-danger);
}


/* ── Forced-colors (shared) ──────────────────────────────── */

@media (forced-colors: active) {
    :is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-row:focus-within {
        outline: 2px solid Highlight;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   5a. LABEL — IFTA (static, always visible)
   ═══════════════════════════════════════════════════════════════════ */

.vsk-jfb-ifta .jet-form-builder__label {
    line-height: 1;
}

.vsk-jfb-ifta .jet-form-builder__label-text {
    font-family: var(--_jfb-font);
    font-size: var(--_jfb-size-label);
    font-weight: var(--_jfb-wgt-label);
    letter-spacing: 0.03em;
    line-height: 1.3;
    color: var(--_jfb-clr-text-faded);
    transition: color var(--_jfb-trns);
}

.vsk-jfb-ifta .jet-form-builder-row:is(
    .field-type-text-field,
    .field-type-textarea-field,
    .field-type-number-field,
    .field-type-select-field,
    .field-type-date-field,
    .field-type-datetime-field,
    .field-type-time-field
):focus-within .jet-form-builder__label-text {
    color: var(--_jfb-clr-accent);
}


/* ═══════════════════════════════════════════════════════════════════
   5b. LABEL — FL (floating, animated)
   ═══════════════════════════════════════════════════════════════════
   Wrapper covers full row (inset:0) → <label> fills wrapper →
   clicking anywhere on row triggers focus via for attr.
   Float effect: padding-top transition (no transform, no
   containing-block issues).
   Resting:  large padding-top pushes text to input level, input-size font.
   Active:   small padding-top lifts text to top, label-size font.
   Requires: JFB default placeholder attr for :placeholder-shown.
   ═══════════════════════════════════════════════════════════════════ */

.vsk-jfb-fl .jet-form-builder__label {
    line-height: 1;
}

/* Wrapper: covers entire row */
.vsk-jfb-fl .jet-form-builder-row:is(
    .field-type-text-field,
    .field-type-textarea-field,
    .field-type-number-field,
    .field-type-select-field,
    .field-type-date-field,
    .field-type-datetime-field,
    .field-type-time-field,
	.field-type-phone-field
) .jet-form-builder__label {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* <label>: fills wrapper, vertically centered in resting state */
.vsk-jfb-fl .jet-form-builder-row:is(
    .field-type-text-field,
    .field-type-textarea-field,
    .field-type-number-field,
    .field-type-select-field,
    .field-type-date-field,
    .field-type-datetime-field,
    .field-type-time-field,
	.field-type-phone-field
) label.jet-form-builder__label-text {
    display: flex;
    align-items: center;              /* ← było: flex-start */
	gap: 1ch;
    width: 100%;
    height: 100%;
    padding: 0 var(--_jfb-pad-x);    /* ← było: var(--_jfb-pad-y) var(--_jfb-pad-x) */
    cursor: text;

    font-family: var(--_jfb-font);
    font-size: var(--_jfb-size-input);
    font-weight: var(--vsk-font--wgt-text);
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: var(--_jfb-clr-text);

    transition:
        padding-top    var(--_jfb-trns),
        font-size      var(--_jfb-trns),
        font-weight    var(--_jfb-trns),
        letter-spacing var(--_jfb-trns),
        color          var(--_jfb-trns);
}


/* FL: textarea — label pinned to top (IFTA-style, no vertical float) */
.vsk-jfb-fl .jet-form-builder-row.field-type-textarea-field label.jet-form-builder__label-text {
    padding-top: var(--_jfb-fl-rest);
	align-items: flex-start;
}

/* FL: lifted state (focus OR filled) — text moves to top */
.vsk-jfb-fl .jet-form-builder-row:is(
    .field-type-text-field,
    .field-type-textarea-field,
    .field-type-number-field,
    .field-type-select-field,
    .field-type-date-field,
    .field-type-datetime-field,
    .field-type-time-field,
	.field-type-phone-field
):is(
    :focus-within,
    :has(input:not(:placeholder-shown)),
    :has(textarea:not(:placeholder-shown)),
    :has(select:not([data-placeholder-shown]))
) label.jet-form-builder__label-text {
    align-items: flex-start;                         /* snap do góry */
    padding-top: calc(var(--_jfb-pad-y) * 1);    /* drobny oddech od krawędzi */
    font-size: var(--_jfb-size-label);
    font-weight: var(--_jfb-wgt-label);
    letter-spacing: 0.03em;
	color: var(--_jfb-clr-text-faded);
}


/* FL: label accent on focus */

.vsk-jfb-fl .jet-form-builder-row:is(
    .field-type-text-field,
    .field-type-textarea-field,
    .field-type-number-field,
    .field-type-select-field,
    .field-type-date-field,
    .field-type-datetime-field,
    .field-type-time-field,
	.field-type-phone-field
):focus-within .jet-form-builder__label-text {
    color: var(--_jfb-clr-accent);
}


/* FL: hide placeholder (label IS the placeholder) */

.vsk-jfb-fl .jet-form-builder-row:is(
    .field-type-text-field,
    .field-type-textarea-field,
    .field-type-number-field,
    .field-type-date-field,
    .field-type-datetime-field,
    .field-type-time-field
) :where(input, textarea)::placeholder {
    color: transparent;
}


/* ═══════════════════════════════════════════════════════════════════
   5c. LABEL — Shared error & required
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-row.field-has-error .jet-form-builder__label-text {
    color: var(--_jfb-clr-danger);
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder__required {
    color: var(--_jfb-clr-danger);
    margin-left: 2px;
}


/* ═══════════════════════════════════════════════════════════════════
   6. INPUT / TEXTAREA / SELECT — Reset (shared)
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-row:is(
    .field-type-text-field,
    .field-type-textarea-field,
    .field-type-number-field,
    .field-type-select-field
) :where(input, textarea, select).jet-form-builder__field {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    outline: 0 !important;
    width: 100%;
    font-family: var(--_jfb-font);
    font-size: var(--_jfb-size-input);
    font-weight: var(--vsk-font--wgt-text);
    line-height: 1.5;
    color: var(--_jfb-clr-text);
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-row:is(
    .field-type-date-field,
    .field-type-datetime-field,
    .field-type-time-field
) > :where(input).jet-form-builder__field {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    outline: 0 !important;
    width: 100%;
    font-family: var(--_jfb-font);
    font-size: var(--_jfb-size-input);
    font-weight: var(--vsk-font--wgt-text);
    line-height: 1.5;
    color: var(--_jfb-clr-text);
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) textarea.jet-form-builder__field {
    resize: vertical;
    min-height: 3lh;
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) select.jet-form-builder__field {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23464646' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0 center !important;
    padding-right: 20px !important;
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl).vsk-jfb--light select.jet-form-builder__field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* IFTA: placeholder visible as hint */
.vsk-jfb-ifta :where(input, textarea)::placeholder {
    color: var(--_jfb-clr-text-faded);
    opacity: .45;
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) :where(input, textarea):-webkit-autofill {
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: var(--_jfb-clr-text) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}


/* ═══════════════════════════════════════════════════════════════════
   7. DESCRIPTION & ERROR MESSAGE (shared)
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder__desc {
    line-height: 1;
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder__desc small {
    font-family: var(--_jfb-font);
    font-size: var(--_jfb-size-desc);
    font-weight: var(--vsk-font--wgt-text);
    line-height: 1.4;
    color: var(--_jfb-clr-text-faded);
    opacity: .7;
}

body.wp-child-theme-voska :is(.vsk-jfb-ifta, .vsk-jfb-fl) .error-message {
    font-family: var(--_jfb-font);
    font-size: var(--_jfb-size-error);
    font-weight: var(--_jfb-wgt-label);
    line-height: 1.4;
    color: var(--_jfb-clr-danger);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
}

body.wp-child-theme-voska  :is(.vsk-jfb-ifta, .vsk-jfb-fl) .error-message::before {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M8 4.5v4M8 10.5v.01' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M8 4.5v4M8 10.5v.01' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}


/* ═══════════════════════════════════════════════════════════════════
   8. CHECKBOX & RADIO (shared)
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-row:is(.field-type-checkbox-field, .field-type-radio-field) {
    margin-bottom: var(--_jfb-gap);
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-row:is(.field-type-checkbox-field, .field-type-radio-field) > .jet-form-builder__label {
    margin-bottom: 8px;
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder__fields-group.checkradio-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder__fields-group.checkradio-wrap span{
    align-items: flex-start;
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder__field-label:is(.for-checkbox, .for-radio) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--_jfb-font);
    font-size: var(--_jfb-size-input);
    color: var(--_jfb-clr-text);
    cursor: pointer;
    padding: 6px 0;
    line-height: 1.4;
}

body.wp-child-theme-voska :is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder__field-wrap  .jet-form-builder__field-label :where(.checkradio-field) + span:before {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 0;
    border: 1px solid var(--_jfb-clr-border);
    background-color: var(--_jfb-clr-bg);
    cursor: pointer;
    transition: border-color var(--_jfb-trns), background var(--_jfb-trns), box-shadow var(--_jfb-trns);
    position: relative;
    margin-top: 1px;
}

body.wp-child-theme-voska :is(.vsk-jfb-ifta, .vsk-jfb-fl) .checkboxes-field + span:before { border-radius: var(--_jfb-radius-s)!important; }
body.wp-child-theme-voska :is(.vsk-jfb-ifta, .vsk-jfb-fl) .radio-field + span:before { border-radius: 50%!important; }

body.wp-child-theme-voska :is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder__field-wrap .jet-form-builder__field-label  :where(.checkradio-field):checked + span:before {
   border: 1px solid var(--_jfb-clr-border);
   background-color: var(--_jfb-clr-bg);
}

body.wp-child-theme-voska :is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder__field-wrap .jet-form-builder__field-label  .checkboxes-field:checked + span:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l3 3 5-5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 14px; background-position: center; background-repeat: no-repeat;
	background-color: var(--_jfb-clr-accent);
}

body.wp-child-theme-voska :is(.vsk-jfb-ifta, .vsk-jfb-fl) .radio-field:checked + span:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%238C9D34'/%3E%3C/svg%3E");
    background-size: 16px; background-position: center; background-repeat: no-repeat;
}

body.wp-child-theme-voska :is(.vsk-jfb-ifta, .vsk-jfb-fl) :where(.checkradio-field):focus-visible {
    outline: 2px solid var(--_jfb-clr-accent);
    outline-offset: 2px;
}

body.wp-child-theme-voska :is(.vsk-jfb-ifta, .vsk-jfb-fl) :where(.checkradio-field):not(:checked):hover {
    border-color: var(--_jfb-clr-accent);
    background: var(--_jfb-clr-bg-active);
}


/* ═══════════════════════════════════════════════════════════════════
   9. NUMBER FIELD — Spinner (shared)
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) input[type="number"].jet-form-builder__field::-webkit-inner-spin-button,
:is(.vsk-jfb-ifta, .vsk-jfb-fl) input[type="number"].jet-form-builder__field::-webkit-outer-spin-button {
    opacity: 0; transition: opacity var(--_jfb-trns);
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-number-field:hover ::-webkit-inner-spin-button,
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-number-field:focus-within ::-webkit-inner-spin-button { opacity: 1; }

:is(.vsk-jfb-ifta, .vsk-jfb-fl) input[type="number"].jet-form-builder__field { -moz-appearance: textfield; }
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-number-field:hover input[type="number"],
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-number-field:focus-within input[type="number"] { -moz-appearance: auto; }


/* ═══════════════════════════════════════════════════════════════════
   9b. PHONE FIELD — intl-tel-input (shared)
   ═══════════════════════════════════════════════════════════════════
   ITI replaces the JFB input with its own <input.iti__tel-input>
   inside a .iti wrapper. The visible input gets inline padding-left
   from ITI JS (space for flag + dial code) — never override it.
   Original JFB input (.phone-field) is hidden by ITI.
   ═══════════════════════════════════════════════════════════════════ */

/* ITI visible input — reset (preserves ITI's inline padding-left) */
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-phone-field .iti__tel-input {
    border: none !important;
    background: transparent !important;
    outline: 0 !important;
    width: 100%;
    font-family: var(--_jfb-font)!important;
    font-size: var(--_jfb-size-input)!important;
    font-weight: var(--vsk-font--wgt-text)!important;
    line-height: 1.5;
    color: var(--_jfb-clr-text)!important;
}

/* ITI container — fill the field-wrap */
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-phone-field .iti {
    width: 100%;
}

/* Country button — reset browser styles */
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-phone-field .iti__selected-country {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--_jfb-font);
    font-size: var(--_jfb-size-input);
    color: var(--_jfb-clr-text);
}

/* Dial code text */
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-phone-field .iti__selected-dial-code {
    font-family: var(--_jfb-font);
    font-size: var(--_jfb-size-input);
    color: var(--_jfb-clr-text-faded)!important;
}

/* FL: phone label pinned to top (like textarea — flag area
   makes vertical centering impractical) */
.vsk-jfb-fl .jet-form-builder-row.field-type-phone-field label.jet-form-builder__label-text {
    padding-top: var(--_jfb-fl-lift);
    align-items: flex-start;
    font-size: var(--_jfb-size-label);
    font-weight: var(--_jfb-wgt-label);
    letter-spacing: 0.03em;
    color: var(--_jfb-clr-text-faded);
}

/* FL: phone — keep ITI placeholder visible as format hint
   (overrides the transparent ::placeholder from §5b) */
.vsk-jfb-fl .field-type-phone-field .iti__tel-input::placeholder {
    color: var(--_jfb-clr-text-faded);
    opacity: .45;
}

/* Autofill */
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-phone-field .iti__tel-input:-webkit-autofill {
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: var(--_jfb-clr-text) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Phone: label nie przechwytuje kliknięć (for= celuje w ukryty input) */
.vsk-jfb-fl .jet-form-builder-row.field-type-phone-field .jet-form-builder__label {
    pointer-events: none;
}

/* ITI input — above everything, explicitly clickable */
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-phone-field .iti {
    width: 100%;
    position: relative;
    z-index: 3;
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-phone-field .iti__selected-dial-code {
    font-family: var(--_jfb-font);
    font-size: var(--_jfb-size-input);
    color: var(--_jfb-clr-text);
}

/* ═══════════════════════════════════════════════════════════════════
   10. SELECT — Native multiple & Select2 (shared)
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) select[multiple].jet-form-builder__field {
    padding: 4px 0 !important; min-height: 4lh;
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) select[multiple].jet-form-builder__field option {
    padding: 4px 6px; border-radius: var(--_jfb-radius-s);
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) select[multiple].jet-form-builder__field option:checked {
    background: var(--_jfb-clr-bg-active);
}

/* Select2: strip row box, Select2 becomes the box */
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-select-field:has(.select2-container) {
    border-color: transparent !important;
    box-shadow: none !important;
    outline-color: transparent !important;
    padding: 0 !important;
    background: transparent !important;
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-select-field:has(.select2-container) > .jet-form-builder__label {
    margin-bottom: 6px;
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .select2-container .select2-selection--single {
    border-style: solid !important;
    border-width: var(--_jfb-border-width) !important;
    border-color: var(--_jfb-clr-border) !important;
    border-radius: var(--_jfb-radius) !important;
    background: var(--_jfb-clr-bg) !important;
    height: auto !important;
    padding: var(--_jfb-pad-y) var(--_jfb-pad-x) !important;
    outline: 2px solid transparent; outline-offset: -2px;
    transition: border-color var(--_jfb-trns), box-shadow var(--_jfb-trns), outline-color var(--_jfb-trns), background var(--_jfb-trns);
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .select2-container--open .select2-selection--single,
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .select2-container .select2-selection--single:focus-within {
    border-color: var(--_jfb-clr-border-act) !important;
    box-shadow: inset 0 0 0 1px var(--_jfb-clr-border-act);
    outline-color: var(--_jfb-clr-border-act);
    background: var(--_jfb-clr-bg-active) !important;
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--_jfb-clr-text) !important;
    font-family: var(--_jfb-font); font-size: var(--_jfb-size-input); padding: 0 !important;
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .select2-container .select2-selection--multiple {
    border-style: solid !important;
    border-width: var(--_jfb-border-width) !important;
    border-color: var(--_jfb-clr-border) !important;
    border-radius: var(--_jfb-radius) !important;
    background: var(--_jfb-clr-bg) !important;
    padding: var(--_jfb-pad-y) var(--_jfb-pad-x) !important;
    min-height: 44px;
    outline: 2px solid transparent; outline-offset: -2px;
    transition: border-color var(--_jfb-trns), box-shadow var(--_jfb-trns), outline-color var(--_jfb-trns), background var(--_jfb-trns);
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .select2-container--open .select2-selection--multiple {
    border-color: var(--_jfb-clr-border-act) !important;
    box-shadow: inset 0 0 0 1px var(--_jfb-clr-border-act);
    outline-color: var(--_jfb-clr-border-act);
    background: var(--_jfb-clr-bg-active) !important;
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .select2-selection__choice {
    border-radius: 100vw !important;
    background: var(--_jfb-clr-bg-active) !important;
    border: 1px solid var(--_jfb-clr-border) !important;
    padding: 2px 8px !important;
    font-family: var(--_jfb-font); font-size: var(--_jfb-size-desc);
}

/* Select2 dropdown (outside scope in DOM) */
.select2-dropdown {
    border: 1px solid var(--_jfb-clr-border, hsl(from #464646 h s l / .28)) !important;
    border-radius: var(--_jfb-radius, 0px) !important;
    overflow: hidden;
}
.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"] {
    background-color: var(--_jfb-clr-bg-active, hsl(from #F47D2C h s l / .08)) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   11. RANGE FIELD (shared)
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-range-field { margin-bottom: var(--_jfb-gap); }
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-range-field > .jet-form-builder__label { margin-bottom: 8px; }

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder__field-wrap.range-wrap {
    display: flex; align-items: center; gap: 12px;
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) input[type="range"].range-field {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px;
    background: transparent; border-radius: 3px; outline: none;
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) input[type="range"].range-field::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--_jfb-clr-accent); border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer; transition: transform var(--_jfb-trns);
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) input[type="range"].range-field::-webkit-slider-thumb:hover { transform: scale(1.15); }
:is(.vsk-jfb-ifta, .vsk-jfb-fl) input[type="range"].range-field::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--_jfb-clr-accent); border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer;
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder__field-value.range-value {
    font-family: var(--_jfb-font); font-size: var(--_jfb-size-label);
    font-weight: var(--_jfb-wgt-label); color: var(--_jfb-clr-text); white-space: nowrap;
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) input[type="range"].range-field:focus-visible {
    outline: 2px solid var(--_jfb-clr-accent); outline-offset: 3px; border-radius: 3px;
}


/* ═══════════════════════════════════════════════════════════════════
   12. SWITCHER (shared)
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-switcher {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: var(--_jfb-gap);
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-switcher > .jet-form-builder__label { order: -1; flex: 1; }

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-switcher > input[role="switch"] {
    appearance: none; -webkit-appearance: none;
    width: 44px; height: 24px; border-radius: 12px;
    background: var(--_jfb-clr-border); border: none; cursor: pointer;
    position: relative; transition: background var(--_jfb-trns); flex-shrink: 0;
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-switcher > input[role="switch"]::before {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: white; box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform var(--_jfb-trns);
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-switcher > input[role="switch"]:checked { background: var(--_jfb-clr-accent); }
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-switcher > input[role="switch"]:checked::before { transform: translateX(20px); }
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-switcher > input[role="switch"]:focus-visible {
    outline: 2px solid var(--_jfb-clr-accent); outline-offset: 2px;
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-switcher > .jet-form-builder__desc { flex-basis: 100%; order: 10; }


/* ═══════════════════════════════════════════════════════════════════
   13. REPEATER (shared)
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-repeater-field { margin-bottom: var(--_jfb-gap); }
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-repeater-field > .jet-form-builder__label { margin-bottom: 8px; }

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-repeater__row {
    display: flex; align-items: flex-start; gap: 8px;
    padding: var(--_jfb-gap) 0; border-bottom: 1px solid var(--_jfb-clr-border);
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-repeater__row:last-child { border-bottom: none; }
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-repeater__row-fields { flex: 1; }

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-repeater__remove {
    appearance: none; border: 1px solid var(--_jfb-clr-border);
    border-radius: var(--_jfb-radius-s); background: transparent;
    color: var(--_jfb-clr-text-faded); width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 18px;
    transition: border-color var(--_jfb-trns), color var(--_jfb-trns), background var(--_jfb-trns);
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-repeater__remove:hover {
    border-color: var(--_jfb-clr-danger); color: var(--_jfb-clr-danger);
    background: hsl(from var(--_jfb-clr-danger) h s l / .06);
}

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-repeater__new {
    appearance: none; border: 1px dashed var(--_jfb-clr-border);
    border-radius: var(--_jfb-radius); background: transparent;
    color: var(--_jfb-clr-text-faded); font-family: var(--_jfb-font);
    font-size: var(--_jfb-size-input); font-weight: var(--_jfb-wgt-label);
    padding: 10px; width: 100%; cursor: pointer; margin-top: var(--_jfb-gap);
    transition: border-color var(--_jfb-trns), color var(--_jfb-trns), background var(--_jfb-trns);
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-repeater__new:hover {
    border-color: var(--_jfb-clr-accent); color: var(--_jfb-clr-accent);
    background: var(--_jfb-clr-bg-active);
}


/* ═══════════════════════════════════════════════════════════════════
   14. CALCULATED FIELD (shared)
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-calculated-field { margin-bottom: var(--_jfb-gap); }


/* ═══════════════════════════════════════════════════════════════════
   15. HEADING FIELD (shared)
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-heading-field {
    margin-bottom: var(--_jfb-gap); padding-top: var(--vsk-sp--m);
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder__heading .jet-form-builder__label-text {
    font-family: var(--vsk-font--family-subheading);
    font-size: var(--vsk-font--size-h6);
    font-weight: var(--vsk-font--wgt-subheading);
    line-height: var(--vsk-font--lh-heading);
    letter-spacing: var(--vsk-font--ls-h6);
    color: var(--_jfb-clr-text);
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder__heading-desc {
    font-family: var(--_jfb-font); font-size: var(--_jfb-size-desc);
    color: var(--_jfb-clr-text-faded); margin-top: 4px; line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════
   16. SUBMIT FIELD & CAPTCHA (shared)
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .field-type-submit-field {
    margin-bottom: 0; padding: 0 !important; border: none !important;
    background: transparent !important; box-shadow: none !important; outline: none !important;
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .captcha-token-container { margin: var(--vsk-sp--m) 0 0 !important; }


/* ═══════════════════════════════════════════════════════════════════
   17. FORM-LEVEL MESSAGES (shared)
   ═══════════════════════════════════════════════════════════════════ */

:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-message {
    font-family: var(--_jfb-font); font-size: var(--_jfb-size-input);
    font-weight: var(--_jfb-wgt-label); line-height: 1.5;
    padding: var(--_jfb-pad-y) var(--_jfb-pad-x);
    border-radius: var(--_jfb-radius); margin-top: var(--vsk-sp--m);
	margin-top: 1rem;
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-message--success {
    background: hsl(from var(--_jfb-clr-success) h s l / .1);
    color: var(--_jfb-clr-success);
    border: 1px solid hsl(from var(--_jfb-clr-success) h s l / .3);
}
:is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-message--error {
    background: hsl(from var(--_jfb-clr-danger) h s l / .1);
    color: var(--_jfb-clr-danger);
    border: 1px solid hsl(from var(--_jfb-clr-danger) h s l / .3);
}


/* ═══════════════════════════════════════════════════════════════════
   18. RESPONSIVE (shared)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    :is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder {
        --_jfb-pad-x: 12px; --_jfb-pad-y: 10px;
    }
    :is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-repeater__row { flex-direction: column; }
    :is(.vsk-jfb-ifta, .vsk-jfb-fl) .jet-form-builder-repeater__row-remove { align-self: flex-end; }
}


/* ═══════════════════════════════════════════════════════════════════
   19. REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════
   IFTA: no label animations by design — catches colour transitions.
   FL:   critical — kills label movement and size animation.
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    :is(.vsk-jfb-ifta, .vsk-jfb-fl) *,
    :is(.vsk-jfb-ifta, .vsk-jfb-fl) *::before,
    :is(.vsk-jfb-ifta, .vsk-jfb-fl) *::after {
        transition-duration: 0.01ms !important;
    }
}