*,
:before,
:after {
    box-sizing: border-box;
}

:before,
:after {
    font-weight: normal;
}

:root {
    --font: "Inter";
}

/* [FIX 2026-05-26 mobile-embed] Horizontal-overflow guard.
   Symptom report: embedded form looked fine on desktop but on mobile the
   visitor had to scroll far right/up to find it — "as if the form had a
   -900px margin-right". Root cause: `form#page-form { margin: 0 auto }` with
   only a max-width (no width cap on the document). If ANY descendant is wider
   than the mobile viewport (long unbreakable label, an over-wide control, or
   iOS Safari's content-based iframe sizing), the document grows wider than the
   screen, and the `auto` side-margins then center the form inside that
   oversized canvas — pushing it half off-screen. Locking html/body to the
   viewport width + clipping horizontal overflow makes `margin:auto` center
   within the *visible* width instead. Vertical scroll (the real form length)
   is unaffected. */
html,
body {
    max-width: 100%;
    /* `clip` (not `hidden`) so we DON'T accidentally promote overflow-y to
       `auto` — that would turn the iframe body into a nested scroll container
       and fight embed.js's height sizing. `hidden` is the fallback for the
       few engines without `clip` support. */
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: var(--font);
    font-size: 14px;
    min-height: 100vh;
    line-height: 1.5em;
    color: #444;
    user-select: none;
    background-color: var(--page-background-color, #efeff5);
    background-image: var(--page-background-image);
    background-repeat: var(--page-background-repeat);
    background-attachment: var(--page-background-attachment);
    background-size: var(--page-background-size);
}

p {
    margin: 0
}

button {
    user-select: none;
    cursor: pointer;
    border: none;
}

/* FONTS */
@font-face {
    font-family: "icons";
    src: url("/assets/builder/fonts/icons.woff?1");
    font-style: normal;
    font-weight: normal;
    font-display: block;
}

/* [FIX 2026-05-26 rtl-honeypot] THE real mobile-overflow culprit.
   ────────────────────────────────────────────────────────────────────────
   builder.php::save_form() injects an anti-spam honeypot input hidden with
   `position:absolute; left:-9999px`. That off-screen technique is built for
   LTR pages — but on an RTL form (dir="rtl", Arabic) a -9999px LEFT becomes
   9999px of REAL horizontal scroll width. Measured live: the document grew
   from 1933px → 11932px (exactly +9999). In RTL the page then anchors to the
   right, so the visitor sees a near-empty screen and must scroll ~9999px right
   to reach the form — the "as if -900px margin-right" report.
   This rule overrides the inline style (note `!important`, which beats a
   non-important inline declaration) with a clip-based hide that occupies zero
   scrollable space, in BOTH directions. Fixes every already-published form the
   instant it is served with this stylesheet — no per-form re-save needed.
   save_form() is ALSO updated to emit this safe style for new forms. */
input[name="website_url"][aria-hidden="true"] {
    position: absolute !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
}

/* COMMON */
.hide {
    display: none !important;
}

.hidden {
    opacity: 0;
}

.page-wrapper {
    max-width: var(--max-width, 960px);
    width: 95%;
    margin: 0 auto;
}

/**/
form#page-form {
    margin: 0 auto;
    /* [FIX 2026-05-26 mobile-embed v2] Canonical responsive-centered pattern:
       `width:100%` fills the available width; `max-width` caps it at the
       author's chosen size on wide screens. On a phone narrower than the cap,
       width:100% simply yields the (smaller) viewport width — so the form
       always fits without overflow AND without ever collapsing. (The earlier
       `min(.., 100%)` form was redundant and is removed to avoid surprises if
       the containing block width is ever indefinite.) */
    width: 100%;
    max-width: var(--general-max-width, 600px);
    background-color: var(--page-form-background, #FFF);
}

.form-content {
    padding: var(--general-padding, 30px);
    gap: var(--general-gap, 20px 20px);
    display: flex;
    flex-direction: column;
}


label.form-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* margin-bottom: 20px; */
    /* pointer-events: none; */
}

/* [FIX 2026-05-26] Broadened from `label.form-label b.label-text` to `.label-text`
   so the Label-group styling reaches every kind of label, not just the <b>
   inside .form-label. Previously:
     - Checkbox's <p class="label-text"> never picked up the author's font.
     - Radio's <b class="label-text"> sits inside .options-label, not
       .form-label — same problem.
   `.label-text` is a class deliberately reserved for "label text", so the
   broader match is semantically correct. */
.label-text {
    font-weight: 600;
    flex-shrink: 0;
    color: var(--label-font-color, revert);
    font-family: var(--label-font-family, revert);
    font-size: var(--label-font-size, revert);
    font-weight: var(--label-font-weight, revert);
    line-height: 1.5;
    font-style: var(--label-font-style, revert);
    /* [FIX 2026-05-26 mobile-embed] A long label (common in Arabic forms) with
       no wrapping forces the document wider than the phone viewport. Force
       wrapping so a label can never push horizontal overflow. */
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

/* [FIX 2026-05-26] Same broadening — checkbox/radio "Required" toggles set
   `is-required` on their <p>/<b>.label-text, but the old rule only matched
   `b.label-text.is-required` so the red asterisk never showed there. */
.label-text.is-required:after {
    content: " \ecbf";
    font-family: icons;
    color: #c70000;
    font-size: 10px;
    line-height: 100%;
}

.label-text.is-hidden:after {
    content: "Hidden";
    background-color: #e7e7e7;
    padding: 2px 5px;
    margin-inline-start: 5px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
}

.input-wrap {
    width: 100%;
}

.input-wrap input,
.input-wrap textarea {
    width: 100%
}

label.form-label input[type="text"],
label.form-label input[type="tel"],
label.form-label input[type="email"],
label.form-label input[type="date"],
label.form-label input[type="number"],
label.form-label input[type="file"],
label.form-label select,
label.form-label input[type="url"],
label.form-label textarea {
    outline: none;
    width: 100%;
    color: var(--inputs-font-color, revert);
    font-family: var(--inputs-font-family, revert);
    font-size: var(--inputs-font-size, revert);
    font-weight: var(--inputs-font-weight, revert);
    font-style: var(--inputs-font-style, revert);
    border-style: var(--inputs-border-style, solid);
    border-width: var(--inputs-border-width, 1px);
    border-color: var(--inputs-border-color, #DDD);
    border-radius: var(--inputs-border-radius, 5px);
    padding: var(--inputs-padding, 10px 15px);
    background-color: var(--inputs-background-color, #FFF);
    box-shadow: var(--inputs-box-shadow, revert);
}

label.form-label textarea {
    padding: 20px;
    resize: vertical;
    min-height: 100px;
}

[data-style="line"] label.form-label input[type="text"],
[data-style="line"] label.form-label input[type="tel"],
[data-style="line"] label.form-label input[type="email"],
[data-style="line"] label.form-label input[type="date"],
[data-style="line"] label.form-label input[type="number"],
[data-style="line"] label.form-label input[type="file"],
[data-style="line"] label.form-label select,
[data-style="line"] label.form-label input[type="url"],
[data-style="line"] label.form-label textarea,
[data-style="line"] label.form-label select {
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0;
    padding: 10px 0;
}

label.form-label input[type="text"]::placeholder,
label.form-label input[type="tel"]::placeholder,
label.form-label input[type="email"]::placeholder,
label.form-label input[type="date"]::placeholder,
label.form-label input[type="number"]::placeholder,
label.form-label input[type="file"]::placeholder,
label.form-label input[type="url"]::placeholder,
label.form-label textarea::placeholder {
    font-family: var(--placeholder-font-family, revert);
    font-size: var(--placeholder-font-size, revert);
    font-weight: var(--placeholder-font-weight, revert);
    font-style: var(--placeholder-font-style, revert);
    color: var(--placeholder-font-color, revert);
}

button.submit {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* [FIX 2026-05-26] Expose all submit-button typography + box vars so the
       Properties panel's new font/padding/border/shadow controls actually
       reach the rendered button. Defaults preserve the original look so
       existing forms render unchanged until the author opts into a value. */
    background-color: var(--style-background-color, #35b171);
    color:            var(--style-font-color, #FFF);
    font-family:      var(--style-font-family, revert);
    font-size:        var(--style-font-size, revert);
    font-weight:      var(--style-font-weight, revert);
    font-style:       var(--style-font-style, revert);
    padding:          var(--style-padding, 15px);
    border-style:     var(--style-border-style, none);
    border-width:     var(--style-border-width, 0);
    border-color:     var(--style-border-color, transparent);
    border-radius:    var(--style-border-radius, 5px);
    box-shadow:       var(--style-box-shadow, revert);
}

button.submit .subtext {
    font-size: 12px;
    opacity: 0.7;
}

button.reset {
    width: 100%;
    padding: 15px;
    background-color: #bbb;
    color: #000;
    border-radius: 5px;
    margin-bottom: 20px;
}

/**/

.element {
    position: relative;
}

span.input-tip {
    font-size: 12px;
    opacity: 0.8;

    font-family: var(--shortlabel-font-family, revert);
    font-size: var(--shortlabel-font-size, revert);
    font-weight: var(--shortlabel-font-weight, revert);
    font-style: var(--shortlabel-font-style, revert);
    color: var(--shortlabel-font-color, revert);
}

span.input-tip:empty {
    display: none;
}

[data-alignment="horizontal"] label.form-label {
    flex-direction: row;
    gap: 30px;
}

[data-alignment="horizontal"] label.form-label b.label-text {
    padding-top: 8px;
    width: 170px
}

[data-alignment="horizontal"]>label.form-label {
    flex-direction: row;
    gap: 30px;
}

[data-alignment="horizontal"]>label.form-label b.label-text {
    padding-top: 8px;
    width: 170px
}

[data-alignment="vertical"]>label.form-label {
    flex-direction: column;
    gap: 2px;
}

[data-alignment="vertical"]>label.form-label b.label-text {
    padding-top: 0;
    width: auto
}


.address-wrapper {
    display: grid;
    grid-template-columns: repeat(var(--general-cols, 2), 1fr);
    gap: var(--general-gap, 20px 20px);
}

.element[data-element-type="street"] {
    grid-column: 1/-1;
}

.options-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.options-wrapper {
    display: grid;
    grid-template-columns: repeat(var(--cols, 1), 1fr);
    gap: 5px;
}

.options-wrapper label {
    display: flex;
    align-items: center;
    gap: 5px;
}

label.checkbox-label {
    display: flex;
    gap: 5px;
}

/* [FIX 2026-05-26] Variable name typo — there is no `--form-inputs-font-color`
   anywhere in the codebase; the actual var written by the studio is
   `--inputs-font-color`. Also expose family/size/weight/style so radio option
   text follows the rest of the input typography. */
span.option-text {
    color:       var(--inputs-font-color, revert);
    font-family: var(--inputs-font-family, revert);
    font-size:   var(--inputs-font-size, revert);
    font-weight: var(--inputs-font-weight, revert);
    font-style:  var(--inputs-font-style, revert);
}

header.form-header img {
    display: block;
    width: 100%;
}

/**/
body.form-page {
    background: transparent !important;
    min-height: auto;
}

body.form-page form#page-form {
    max-width: 100%
}

/**/
.countries-dropdown img {
    border-radius: 5px;
}

.countries-dropdown li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    border-bottom: 1px solid rgb(0 0 0 / 10%);
    cursor: pointer;
}

.countries-dropdown ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.countries-dropdown {
    position: absolute;
    top: 100%;
    background-color: var(--form-background-color, #ffffff);
    padding: 10px;
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
    border-radius: 5px;
    max-height: 250px;
    overflow: hidden auto;
    width: 200px;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}

.open .countries-dropdown {
    visibility: visible;
    pointer-events: all;
    z-index: 1;
}

.countries-dropdown li:Hover {
    background-color: rgb(0 0 0 / 5%);
}

img.country-flag {
    position: absolute;
    bottom: 10px;
    inset-inline-start: 10px;
    border-radius: 5px;
}

label.country-label input {
    padding-inline-start: 40px !important;
}

.countries-dropdown ul li:last-of-type {
    border: none;
}

/* [PHASE-1.5 forms-wiring][PHASE-2.2 success-state] Inline confirmation shown
   by assets/forms/js/demo/scripts.js after a successful submit when no
   Redirect URL is set. The <form> element is replaced with this block.

   Layout: centered card, optional logo at top, heading, then body message.
   Each part renders only if the form author filled it in. The card adapts
   to single-line text or multi-paragraph messages without code changes. */
.form-success {
    padding: 32px 28px;
    border: 1px solid #cfe8d8;
    border-radius: 12px;
    background: #f2faf5;
    color: #184a2d;
    font-size: 15px;
    line-height: 1.55;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    /* Stay tidy on wide containers — the card looks better as a column
       than as a banner, and the parent .form-content already provides
       horizontal centering for whatever width we choose here. */
    max-width: 520px;
    margin: 0 auto;
}

.form-success__logo {
    max-width: 96px;
    max-height: 96px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* No border/background — the form author's logo carries its own visual.
       If their PNG has transparency, we don't want a forced backdrop. */
}

.form-success__heading {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #0b3a1f;
}

.form-success__message {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #184a2d;
    /* Allow long URLs / words inside the message to wrap instead of forcing
       horizontal scroll on narrow embeds. */
    overflow-wrap: anywhere;
}

/* ════════════════════════════════════════════════════════════════════════
   [FIX 2026-05-26 mobile-embed] MOBILE RESPONSIVE LAYER
   ────────────────────────────────────────────────────────────────────────
   The form had ZERO @media rules — every embed rendered with desktop padding
   and (for horizontal-aligned fields) a fixed 170px label column, both of
   which cramp or overflow a phone screen. These rules only ADD constraints
   below 600px; desktop rendering is untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* Tighten the outer padding so inputs aren't squeezed on narrow screens.
       Respect the author's value as a ceiling, but never exceed ~5vw. */
    .form-content {
        padding: min(var(--general-padding, 30px), 5vw);
    }

    /* Horizontal-aligned labels use a fixed 170px label column on desktop.
       On a phone that leaves almost no room for the input — stack them. */
    [data-alignment="horizontal"] label.form-label,
    [data-alignment="horizontal"] > label.form-label {
        flex-direction: column;
        gap: 4px;
    }
    [data-alignment="horizontal"] label.form-label b.label-text,
    [data-alignment="horizontal"] > label.form-label b.label-text {
        width: auto;
        padding-top: 0;
    }

    /* Multi-column address / option grids collapse to a single column so the
       individual fields keep a usable width. */
    .address-wrapper,
    .options-wrapper {
        grid-template-columns: 1fr;
    }
}