@font-face {
    font-family: "Lekton";
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url("/shared/e9295ac1c5bc825e707746d85a91c875571641e1044014c32d002220a8267f76.woff2") format("woff2");
}
@font-face {
    font-family: "Lekton";
    font-style:  normal;
    font-weight: 700;
    font-display: swap;
    src: url("/shared/50e3da72118ac99f5a5a7d8ba9050ac4aeb806f073b8cf5237e2e3548b2556a8.woff2") format("woff2");
}
@font-face {
    font-family: "Lekton";
    font-style:  italic;
    font-weight: 400;
    font-display: swap;
    src: url("/shared/ef7d4430052f6ef8166706d8fa188a61b78e1cade6ff9fa9e5257b7e9229aafc.woff2") format("woff2");
}

@font-face {
    font-family: "Phosphor-PUA";
    font-style:  normal;
    font-weight: normal;
    font-display: block;
    /* Point to the same file the plugin's phosphor/style.css uses, so the
       browser dedupes by URL (the file under /uploads/ has the same bytes
       but a different URL, which forces a duplicate fetch). */
    src: url("/shared/18a8efef57657147db34851abb2b8d874485ce0704ee60026b33a6c6a5adcf1a.woff2") format("woff2");
    unicode-range: U+E000-F8FF;
}

textarea.jfb-height-s   { min-height: 42px;  height: 42px;  resize: vertical; }
textarea.jfb-height-s2  { min-height: 62px;  height: 62px;  resize: vertical; }
textarea.jfb-height-m   { min-height: 100px; resize: vertical; }
textarea.jfb-height-l   { min-height: 200px; resize: vertical; }
textarea.jfb-height-xl  { min-height: 300px; resize: vertical; }
textarea.jfb-height-xxl { min-height: 400px; resize: vertical; }
/* Custom: min-height set inline (style="min-height:Npx") by the template. */
textarea.jfb-height-custom { resize: vertical; }

.wp-block-column:has(> .jet-form-builder-row textarea.jfb-height-stretch),
.wp-block-group:has(> .jet-form-builder-row textarea.jfb-height-stretch) {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}
.jet-form-builder-row:has(textarea.jfb-height-stretch) {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.jet-form-builder-row:has(textarea.jfb-height-stretch) .jet-form-builder__field-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}
textarea.jfb-height-stretch {
    flex: 1 !important;
    resize: vertical;
}

textarea.jfb-icon-placeholder::placeholder {
    font-family: "Phosphor-PUA", 'Lekton', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: normal;
    font-size: 17px;
    font-style: normal;
    color: var(--jfb-ph-color, #dedede);
    opacity: 1;
}

/* All JFB field placeholders */
.jet-form-builder__field::placeholder {
    color: var(--jfb-ph-color, #dedede);
    opacity: 1;
}

.jet-form-builder__field {
    border: 1px solid #dedede;
    padding: 10px 12px 10px;
    font-size: 17px;
    line-height: 20px;
    font-family: 'Lekton';
    border-radius: 5px;
    color: #00374a;
}

/* Number field: height to match jfb-height-s */
input[type="number"].jet-form-builder__field {
    height: 42px;
    box-sizing: border-box;
}

/* Icon placeholder for input elements (e.g. number field with Phosphor icon) */
input.jfb-icon-placeholder::placeholder {
    font-family: "Phosphor-PUA", 'Lekton', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: normal;
    font-size: 17px;
    font-style: normal;
    color: var(--jfb-ph-color, #dedede);
    opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────────────
   Select field — match the 42px height of the number field / textarea XS,
   strip the native dropdown arrow, and draw a Phosphor chevron-down in the
   field-wrap (styled to match the number field's Phosphor icon).
   ────────────────────────────────────────────────────────────────────────── */
select.select-field.jet-form-builder__field:not([multiple]) {
    height: 42px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* room for the chevron drawn on the wrap */
    padding-right: 38px;
    background-image: none;
    /* Explicit white background: with appearance:none, iOS/Safari otherwise
       paints the native control chrome as a grey fill. */
    background-color: #fff;
    cursor: pointer;
}

/* Safari draws its OWN caret-down via two CSS gradients
   (modules/option-field .../select.css, body class .jet--ua-safari). We already
   draw a Phosphor chevron on the wrap, so kill JFB's gradient caret — otherwise
   both show (most visible on narrow screens). Higher specificity than JFB's
   `.jet--ua-safari .jet-form-builder__field-wrap select.select-field`. */
.jet--ua-safari .jet-form-builder__field-wrap select.select-field.jet-form-builder__field {
    background-image: none;
    background-color: #fff;
}

/* The select sits inside .jet-form-builder__field-wrap; anchor the chevron
   there. :has() scopes it to single-value selects only (not number/text/
   multiple). */
.jet-form-builder__field-wrap:has(> select.select-field:not([multiple])) {
    position: relative;
}
.jet-form-builder__field-wrap:has(> select.select-field:not([multiple]))::after {
    content: "\e136"; /* ph-caret-down */
    font-family: "Phosphor";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    font-size: 18px;
    color: #00374a;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none; /* clicks pass through to the select */
}

/* Phosphor icon in the placeholder option. Phosphor-PUA is unicode-range
   gated (U+E000–F8FF), so normal option text still renders in Lekton — only
   the PUA icon char in the value="" option paints from the icon font. */
select.jfb-icon-placeholder.jet-form-builder__field {
    font-family: "Phosphor-PUA", 'Lekton', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Placeholder colour: while the empty value="" option is the current
   selection, colour the closed select like the other fields' placeholders
   (--jfb-ph-color, default #dedede; per-field override via the editor). Once a
   real option is chosen, option[value=""]:checked no longer matches and the
   select reverts to its normal text colour. */
select.select-field.jet-form-builder__field:has(> option[value=""]:checked) {
    color: var(--jfb-ph-color, #dedede);
}