.eql-form-wrap{
    --eql-primary:#17c3b2;
    --eql-primary-dark:#119c8f;
    --eql-border:#e2e5ec;
    --eql-text:#1e2129;
    --eql-muted:#8b93a7;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    border:1px solid var(--eql-border);
    border-radius:12px;
    padding:16px;
    background:#fff;
    max-width:100%;
    box-sizing:border-box;
    box-shadow:0 2px 10px rgba(20,25,40,.05);
    color:var(--eql-text);
}
.eql-form-wrap *{box-sizing:border-box}
.eql-image{margin:-16px -16px 12px;overflow:hidden;border-radius:14px 14px 0 0}
.eql-image img{width:100%;height:130px;object-fit:cover;display:block}

.eql-heading{
    font-size:17px;
    font-weight:800;
    letter-spacing:-.01em;
    margin:0 0 4px;
    padding-bottom:8px;
    position:relative;
    color:var(--eql-text);
}
.eql-heading::after{
    content:"";
    position:absolute;
    left:0;bottom:0;
    width:36px;height:3px;
    border-radius:3px;
    background:var(--eql-primary);
}
.eql-description{font-size:12.5px;color:var(--eql-muted);margin:0 0 12px;line-height:1.45}

.eql-field{margin-bottom:10px}
.eql-label{display:block;font-size:12.5px;font-weight:600;margin-bottom:4px;color:var(--eql-text)}
.eql-required{color:#e4453a;margin-left:3px}

.eql-input{
    width:100%;
    padding:9px 11px;
    border:1.5px solid var(--eql-border);
    border-radius:7px;
    font-size:13.5px;
    font-family:inherit;
    color:var(--eql-text);
    background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.eql-input::placeholder{color:#aeb4c2}
.eql-input:hover{border-color:#c8cddb}
.eql-input:focus{
    outline:none;
    border-color:var(--eql-primary);
    box-shadow:0 0 0 3px rgba(23,195,178,.18);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--eql-primary) 18%, transparent);
}
.eql-textarea{min-height:64px;resize:vertical;line-height:1.45}
select.eql-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238b93a7'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:15px;padding-right:32px}

.eql-choice-group{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:2px}
.eql-choice{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13.5px;
    font-weight:500;
    color:var(--eql-text);
    cursor:pointer;
}
.eql-choice input[type="radio"],
.eql-choice input[type="checkbox"]{
    appearance:none;-webkit-appearance:none;
    width:16px;height:16px;
    border:1.5px solid #c8cddb;
    background:#fff;
    display:inline-block;
    position:relative;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
    flex:0 0 auto;
}
.eql-choice input[type="radio"]{border-radius:50%}
.eql-choice input[type="checkbox"]{border-radius:5px}
.eql-choice input[type="radio"]:checked,
.eql-choice input[type="checkbox"]:checked{
    border-color:var(--eql-primary);
    background:var(--eql-primary);
}
.eql-choice input[type="radio"]:checked::after{
    content:"";
    position:absolute;inset:0;margin:auto;
    width:7px;height:7px;border-radius:50%;
    background:#fff;
}
.eql-choice input[type="checkbox"]:checked::after{
    content:"";
    position:absolute;left:5px;top:1px;
    width:4px;height:9px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}
.eql-choice input:focus-visible{box-shadow:0 0 0 3px rgba(23,195,178,.22);box-shadow:0 0 0 3px color-mix(in srgb, var(--eql-primary) 22%, transparent)}

.eql-help{display:block;color:var(--eql-muted);font-size:11.5px;margin-top:3px;line-height:1.35}
.eql-consent{margin:6px 0 10px;font-size:12.5px;line-height:1.35}

.eql-submit{
    width:100%;
    padding:11px;
    border:none;
    border-radius:7px;
    background:var(--eql-primary);
    color:#fff;
    font-weight:700;
    letter-spacing:.02em;
    cursor:pointer;
    font-size:13.5px;
    box-shadow:0 4px 10px -2px rgba(23,195,178,.45);
    box-shadow:0 4px 10px -2px color-mix(in srgb, var(--eql-primary) 45%, transparent);
    transition:filter .15s ease, box-shadow .15s ease, transform .05s ease;
}
.eql-submit:hover{filter:brightness(0.94);box-shadow:0 6px 16px -2px rgba(23,195,178,.55);box-shadow:0 6px 16px -2px color-mix(in srgb, var(--eql-primary) 55%, transparent)}
.eql-submit:active{transform:translateY(1px)}
.eql-submit:disabled{opacity:.55;cursor:default;filter:none;transform:none}

.eql-status{font-size:12.5px;margin:2px 0 8px;min-height:0;line-height:1.35}
.eql-status.eql-error{color:#e4453a}
.eql-status.eql-success{color:#0bb783;font-weight:600}
.eql-field-error{color:#e4453a;font-size:12px;margin-top:5px}

/* Phone field: joined "pill" group like a native intl phone input */
.eql-phone-group{
    display:flex;
    align-items:stretch;
    border:1.5px solid var(--eql-border);
    border-radius:8px;
    overflow:hidden;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.eql-phone-group:focus-within{
    border-color:var(--eql-primary);
    box-shadow:0 0 0 3px rgba(23,195,178,.18);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--eql-primary) 18%, transparent);
}
.eql-phone-country{
    flex:0 0 auto;
    width:auto;
    min-width:0;
    border:none;
    border-right:1.5px solid var(--eql-border);
    border-radius:0;
    background-color:#f8f9fb;
    padding:9px 16px 9px 10px;
    font-size:13.5px;
    font-variant-numeric:tabular-nums;
    color:var(--eql-text);
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238b93a7'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 6px center;
    background-size:13px;
}
.eql-phone-country:focus{box-shadow:none}
.eql-phone-group:focus-within .eql-phone-country{border-right-color:var(--eql-primary);transition:border-color .15s ease}
.eql-phone-number{
    flex:1 1 auto;
    min-width:0;
    border:none;
    border-radius:0;
}
.eql-phone-number:focus{box-shadow:none}

.eql-captcha{margin:10px 0}
.eql-invalid{border-color:#e4453a !important}

/* Horizontal layout: image beside the fields. The image column stretches
   to match the fields column's real height (not a fixed aspect-ratio
   box), so a short image next to a tall form never leaves a blank gutter
   beside it -- this is safe as long as the two columns' heights stay
   reasonably close, which the 2-column field grid below is responsible
   for (keeps the form compact instead of ballooning tall). */
.eql-layout-horizontal .eql-form-wrap{display:flex;flex-wrap:nowrap;gap:14px;align-items:stretch;padding:14px}
.eql-layout-horizontal .eql-image{
    flex:0 0 clamp(90px,30%,240px);
    width:clamp(90px,30%,240px);
    margin:0;
    border-radius:10px;
    overflow:hidden;
    background:linear-gradient(160deg,#eef1f6,#e2e7f0);
}
.eql-layout-horizontal .eql-image img{width:100%;height:100%;object-fit:cover;display:block}
.eql-layout-horizontal .eql-form-body{flex:1 1 auto;min-width:0}

/* Two-column field grid so the horizontal layout doesn't just stack every
   field in one tall column -- short fields (text/email/phone/etc) sit
   side by side; anything that needs the full width (textarea, choice
   groups, file, consent, submit) spans both columns. Kept down to a
   fairly narrow width on purpose: the taller a single-column field list
   gets, the more the image beside it has to stretch to match, and past a
   certain point that stretch starts distorting the image rather than
   just cropping it -- staying 2-column keeps the two sides close enough
   in height that the stretch stays a normal, unnoticeable crop. */
.eql-layout-horizontal .eql-form-body .eql-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 14px;
    align-items:start;
}
.eql-layout-horizontal .eql-form-body .eql-consent,
.eql-layout-horizontal .eql-form-body .eql-captcha,
.eql-layout-horizontal .eql-form-body .eql-status,
.eql-layout-horizontal .eql-form-body .eql-submit{
    grid-column:1 / -1;
}

/* Per-form image presentation, configured in the Design tab. */
.eql-layout-horizontal .eql-form-wrap.eql-image-position-top{
    display:block;
}
.eql-layout-horizontal .eql-form-wrap.eql-image-position-top .eql-image{
    width:auto;
    height:var(--eql-image-height,160px);
    margin:-14px -14px 12px;
}
.eql-form-wrap.eql-image-position-top .eql-image{
    height:var(--eql-image-height,160px);
    border-radius:var(--eql-image-radius,10px);
}
.eql-form-wrap.eql-image-position-top .eql-image img{
    height:100%;
    object-fit:var(--eql-image-fit,cover);
}
.eql-layout-horizontal .eql-form-wrap.eql-image-position-left{
    display:flex;
    align-items:stretch;
    gap:14px;
}
.eql-layout-horizontal .eql-form-wrap.eql-image-position-left .eql-image{
    flex:0 0 var(--eql-image-width,160px);
    width:var(--eql-image-width,160px);
    height:auto;
    margin:0;
    border-radius:var(--eql-image-radius,10px);
}
.eql-layout-horizontal .eql-form-wrap.eql-image-position-left .eql-image img{
    height:100%;
    object-fit:var(--eql-image-fit,cover);
}
.eql-layout-vertical .eql-form-wrap.eql-image-position-left{
    display:flex;
    align-items:stretch;
    gap:14px;
}
.eql-layout-vertical .eql-form-wrap.eql-image-position-left .eql-image{
    flex:0 0 var(--eql-image-width,160px);
    width:var(--eql-image-width,160px);
    height:auto;
    margin:0;
    border-radius:var(--eql-image-radius,10px);
}
.eql-layout-vertical .eql-form-wrap.eql-image-position-left .eql-image img{
    height:100%;
    object-fit:var(--eql-image-fit,cover);
}
.eql-layout-vertical .eql-form-wrap.eql-image-position-left .eql-form-body{
    flex:1 1 auto;
    min-width:0;
}

@media (max-width:560px){
    .eql-layout-horizontal .eql-form-body .eql-form{grid-template-columns:1fr}
}

/* Below this width there is no clean way to keep two real columns: with
   fields already forced to one column (see above), a form with more than
   a couple of fields gets tall enough that stretching the image to match
   would crush it into a thin, distorted strip -- not a smaller image, a
   visibly broken one. Every professional responsive two-column layout
   falls back to stacking at this point for exactly that reason; this
   isn't a workaround, it's the standard, correct behavior here. Image
   goes back to a plain full-width banner on top, same treatment Sidebar
   already uses, so it still looks intentional, not like a fallback. */
@media (max-width:560px){
    .eql-layout-horizontal .eql-form-wrap{flex-direction:column;padding:12px}
    .eql-layout-horizontal .eql-image{
        flex:0 0 auto;
        width:100%;
    }
    .eql-layout-horizontal .eql-image img{height:170px}
    .eql-layout-vertical .eql-form-wrap.eql-image-position-left{flex-direction:column}
    .eql-layout-vertical .eql-form-wrap.eql-image-position-left .eql-image{
        flex:0 0 auto;
        width:100%;
        height:var(--eql-image-height,160px);
        margin:-16px -16px 12px;
    }
}