/*
 * Layout rules are !important so themes can't break them; look-and-feel
 * (colors, radius, height) comes from CSS variables that captcha.js copies
 * from the host form's own inputs, so the field blends into any form.
 */
.cfif-captcha-wrap{
    --cfif-h:40px;
    --cfif-gap:8px;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    clear:both!important;
    float:none!important;
    box-sizing:border-box!important;
    container-type:inline-size;
}

/* fallback spacing; builder group classes copied onto the wrap win over it */
:where(.cfif-captcha-wrap){
    margin:12px 0;
}

:where(.cfif-no-margin, .cfif-no-margin > .cfif-captcha-wrap, li > .cfif-captcha-wrap){
    margin:0;
}

/* always a row of its own inside flex / grid field containers */
.cfif-full-flex{
    flex:0 0 100%!important;
    order:0;
}
.cfif-full-grid{
    grid-column:1 / -1!important;
}

.cfif-captcha-label{
    display:block!important;
    margin:0 0 6px;
}

.cfif-captcha-row{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:stretch!important;
    gap:var(--cfif-gap)!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
}

/* image + refresh: compact block, never wider than it needs */
.cfif-captcha-image-box{
    flex:0 1 240px!important;
    min-width:150px!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:var(--cfif-gap)!important;
    margin:0!important;
    box-sizing:border-box!important;
}

/* answer field takes the remaining width */
.cfif-captcha-input-row{
    flex:1 1 180px!important;
    min-width:0!important;
    display:flex!important;
    align-items:stretch!important;
    margin:0!important;
    box-sizing:border-box!important;
}

.cfif-captcha-image{
    flex:1 1 auto!important;
    min-width:0!important;
    width:100%!important;
    max-width:none!important;
    height:var(--cfif-h)!important;
    max-height:none!important;
    margin:0!important;
    padding:2px!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#fff!important;
    border:1px solid var(--cfif-border,rgba(128,128,128,.4))!important;
    border-radius:var(--cfif-radius,6px)!important;
    box-shadow:none!important;
    box-sizing:border-box!important;
}

.cfif-captcha-answer{
    flex:1 1 auto!important;
    width:100%!important;
    max-width:none!important;
    height:var(--cfif-h)!important;
    min-height:0!important;
    margin:0!important;
    box-sizing:border-box!important;
}

.cfif-captcha-refresh{
    flex:0 0 var(--cfif-h)!important;
    width:var(--cfif-h)!important;
    min-width:0!important;
    height:var(--cfif-h)!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:18px!important;
    line-height:1!important;
    color:var(--cfif-color,inherit)!important;
    background:var(--cfif-bg,transparent)!important;
    border:1px solid var(--cfif-border,rgba(128,128,128,.4))!important;
    border-radius:var(--cfif-radius,6px)!important;
    box-shadow:none!important;
    text-shadow:none!important;
    cursor:pointer!important;
    box-sizing:border-box!important;
    transition:opacity .15s ease!important;
}
.cfif-captcha-refresh:hover{
    opacity:.75!important;
}

.cfif-is-loading .cfif-refresh-icon{
    display:inline-block;
    animation:cfif-spin .8s linear infinite;
}
@keyframes cfif-spin{to{transform:rotate(360deg)}}

.cfif-captcha-message:empty{
    display:none;
}
.cfif-captcha-message{
    margin-top:6px;
    font-size:13px;
}
/* errors stay visible whatever the theme/builder hides */
.cfif-has-error .cfif-captcha-message{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    height:auto!important;
    margin-top:6px!important;
    color:#d63638!important;
    font-size:13px!important;
    line-height:1.6!important;
}
.cfif-has-error .cfif-captcha-answer{
    border-color:#d63638!important;
    box-shadow:0 0 0 1px #d63638!important;
}
.cfif-captcha-wrap:has(.cfif-captcha-answer[aria-invalid="false"]) .cfif-captcha-message{
    color:#1a7f37;
}

/* narrow forms (login box, sidebar, phone): image row above answer row */
@container (max-width:420px){
    .cfif-captcha-image-box,
    .cfif-captcha-input-row{
        flex:1 1 100%!important;
    }
}