/*
 * Answer Builder frontend
 * Mobile-first base styles.
 * The single desktop breakpoint is generated per form from:
 * Settings -> Form responsive breakpoint (px).
 */

/* ==========================================================
   1. Form shell and shared variables
   ========================================================== */

.ab_form{
    --ab-mobile-scroll-offset:120px;
    position:relative;
    container:ab-form / inline-size;
    width:100%;
    max-width:var(--ab-form-max-width,1024px);
    margin:20px auto;
    overflow-anchor:none;
    box-sizing:border-box;
}

.ab_form:has(.ab_group:not([hidden]) .ab_step_media img){
    max-width:var(--ab-form-image-max-width,1250px);
}

.ab_honeypot{
    position:absolute!important;
    left:-10000px!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
}

.ab_group[hidden],
.ab_question[hidden],
.ab_result[hidden],
.ab_button[hidden],
.ab_copy_modal[hidden]{
    display:none!important;
}

/* ==========================================================
   2. Progress, status and step transitions
   ========================================================== */

.ab_progress{
    position:relative;
    scroll-margin-top:var(--ab-mobile-scroll-offset);
}

.ab_progress_bar{
    width:0;
    transition:width 180ms ease;
}

.ab_status:not(:empty){
    margin-block:1rem;
}

.ab_group{
    opacity:1;
    transition:opacity 180ms ease;
}

.ab_group.ab_is_leaving,
.ab_group.ab_is_entering{
    opacity:0;
}

/* JS only sets --ab-mobile-step-height while the form is below
   the user-defined responsive breakpoint. */
.ab_steps{
    position:relative;
    min-height:var(--ab-mobile-step-height,auto);
}

.ab_step.ab_step_is_short{
    min-height:var(--ab-mobile-step-height);
}

.ab_step.ab_step_is_short .ab_step_inner{
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:100%;
    min-height:calc(var(--ab-mobile-step-height) - 20px);
    transform:translateY(20px);
}

.ab_step.ab_step_is_short .ab_step_content{
    width:100%;
}

/* ==========================================================
   3. Step card and mobile-first layout
   ========================================================== */

.ab_step_card{
    overflow:hidden;
    overflow-anchor:none;
    border:2px solid rgba(31,41,51,.30);
    border-radius:10px;
    scroll-margin-top:var(--ab-mobile-scroll-offset);
}

.ab_step{
    box-sizing:border-box;
    width:100%;
    padding:28px 24px;
}

.ab_step_inner,
.ab_step_content,
.ab_question_inner,
.ab_question_content{
    width:100%;
    min-width:0;
}

.ab_step:has(.ab_step_media img) .ab_step_inner{
    display:block;
}

.ab_step_media{
    display:none;
    min-width:0;
    margin-bottom:24px;
}

.ab_step_show_mobile_image .ab_step_media{
    display:block;
}

.ab_step_media img{
    display:block;
    width:100%;
    height:auto;
    max-height:150px;
    object-fit:cover;
}

.ab_step_content .ab_question+.ab_question{
    margin-top:32px;
}

/* ==========================================================
   4. Questions
   ========================================================== */

.ab_question_title{
    margin:0 0 14px;
    font-size:24px;
    line-height:1.15;
}

.ab_question_description{
    margin:-3px 0 14px;
    font-size:16px;
    line-height:1.5;
}

.ab_question_description p{
    margin:0;
}

.ab_required{
    margin-left:4px;
    color:#d63638;
    font-weight:600;
}

/* ==========================================================
   5. Text fields and selects
   ========================================================== */

.ab_form input[type="text"],
.ab_form input[type="email"],
.ab_form input[type="tel"],
.ab_form input[type="number"],
.ab_form textarea,
.ab_form select{
    box-sizing:border-box;
    width:100%;
    min-height:56px;
    padding:12px 16px;
    border:2px solid rgba(31,41,51,.18);
    border-radius:18px;
    background:#fff;
    font:inherit;
    font-size:18px;
    line-height:1.3;
    transition:border-color .18s ease,box-shadow .18s ease;
}

.ab_form textarea{
    min-height:140px;
    resize:vertical;
}

.ab_form input[type="text"]:focus,
.ab_form input[type="email"]:focus,
.ab_form input[type="tel"]:focus,
.ab_form input[type="number"]:focus,
.ab_form textarea:focus,
.ab_form select:focus{
    outline:none;
    border-color:rgba(31,41,51,.45);
    box-shadow:0 0 0 4px rgba(31,41,51,.08);
}

.ab_form .ab_input::placeholder,
.ab_form textarea::placeholder{
    color:rgba(31,41,51,.5);
    opacity:1;
}

.ab_form .ab_input:focus::placeholder,
.ab_form textarea:focus::placeholder{
    opacity:.3;
}

/* ==========================================================
   6. Choices
   ========================================================== */

.ab_choices{
    display:grid;
    gap:.5rem;
}

.ab_selection_modern .ab_choices{
    gap:6px;
}

.ab_selection_modern .ab_choice{
    position:relative;
    display:block;
    width:100%;
    padding:8px 10px;
    border:1px solid rgba(31,41,51,.12);
    border-radius:10px;
    background:transparent;
    box-sizing:border-box;
    cursor:pointer;
    transition:background-color .16s ease,border-color .16s ease;
}

.ab_selection_modern .ab_choice:hover{
    background:#f7f7f7;
}

.ab_selection_modern .ab_choice:has(input:checked){
    border-color:rgba(34,197,94,.45);
    background:rgba(34,197,94,.07);
}

.ab_selection_modern .ab_choice input[type="radio"],
.ab_selection_modern .ab_choice input[type="checkbox"]{
    position:absolute;
    width:1px;
    height:1px;
    margin:0;
    opacity:0;
    pointer-events:none;
}

.ab_selection_modern .ab_choice_label{
    position:relative;
    display:flex;
    align-items:center;
    min-height:24px;
    padding-left:42px;
    line-height:1.35;
}

.ab_selection_modern .ab_choice_label::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:32px;
    height:18px;
    border-radius:999px;
    background:#c8cdd2;
    transform:translateY(-50%);
    transition:background-color .16s ease;
}

.ab_selection_modern .ab_choice_label::after{
    content:"";
    position:absolute;
    left:2px;
    top:50%;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px rgba(31,41,51,.28);
    transform:translateY(-50%);
    transition:transform .16s ease;
}

.ab_selection_modern .ab_choice input:checked+.ab_choice_label::before{
    background:#22c55e;
}

.ab_selection_modern .ab_choice input:checked+.ab_choice_label::after{
    transform:translate(14px,-50%);
}

.ab_selection_modern .ab_choice input:focus-visible+.ab_choice_label{
    outline:2px solid currentColor;
    outline-offset:4px;
    border-radius:4px;
}

/* ==========================================================
   7. Number fields and slider
   ========================================================== */

.ab_number_wrap{
    display:flex;
    align-items:center;
    gap:.5rem;
    min-width:0;
}

.ab_number_slider_wrap{
    display:block;
    width:100%;
}

.ab_range_track_row{
    display:block;
    width:100%;
}

.ab_number_wrap input[type="range"]{
    --ab-range-progress:0%;
    --ab-range-fill:rgba(31,41,51,.58);
    --ab-range-track:rgba(31,41,51,.18);
    -webkit-appearance:none;
    appearance:none;
    display:block;
    box-sizing:border-box;
    width:100%;
    max-width:none;
    min-height:48px;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
}

.ab_number_wrap input[type="range"]::-webkit-slider-runnable-track{
    height:10px;
    border-radius:999px;
    background:linear-gradient(
        to right,
        var(--ab-range-fill) 0,
        var(--ab-range-fill) var(--ab-range-progress),
        var(--ab-range-track) var(--ab-range-progress),
        var(--ab-range-track) 100%
    );
}

.ab_number_wrap input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:32px;
    height:32px;
    margin-top:-11px;
    border:2px solid rgba(31,41,51,.24);
    border-radius:50%;
    background:#fff;
    box-shadow:0 3px 10px rgba(31,41,51,.20);
    transition:transform .12s ease,box-shadow .12s ease;
}

.ab_number_wrap input[type="range"].ab_range_dragging::-webkit-slider-thumb{
    transform:scale(1.12);
    box-shadow:0 4px 14px rgba(31,41,51,.28);
}

.ab_number_wrap input[type="range"]::-moz-range-track{
    height:10px;
    border-radius:999px;
    background:var(--ab-range-track);
}

.ab_number_wrap input[type="range"]::-moz-range-progress{
    height:10px;
    border-radius:999px;
    background:var(--ab-range-fill);
}

.ab_number_wrap input[type="range"]::-moz-range-thumb{
    width:32px;
    height:32px;
    border:2px solid rgba(31,41,51,.24);
    border-radius:50%;
    background:#fff;
    box-shadow:0 3px 10px rgba(31,41,51,.20);
}

.ab_number_wrap input[type="range"]:focus-visible{
    outline:none;
}

.ab_number_wrap input[type="range"]:focus-visible::-webkit-slider-thumb{
    box-shadow:0 0 0 5px rgba(31,41,51,.10),0 3px 10px rgba(31,41,51,.20);
}

.ab_range_meta{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    width:100%;
    min-height:22px;
    margin-top:6px;
    gap:.4em;
    box-sizing:border-box;
    line-height:20px;
}

.ab_range_output,
.ab_range_unit{
    display:block;
    height:20px;
    margin:0;
    padding:0;
    border:0;
    color:rgba(31,41,51,.62);
    font-family:inherit;
    font-size:15px;
    font-weight:400;
    line-height:20px;
    white-space:nowrap;
}

.ab_range_output{
    width:var(--ab-range-output-ch,2ch);
    min-width:var(--ab-range-output-ch,2ch);
    text-align:right;
}

/* ==========================================================
   8. File upload
   ========================================================== */

.ab_file_upload{
    display:grid;
    gap:8px;
}

.ab_file_input{
    width:100%;
    padding:12px;
    border:1px dashed rgba(31,41,51,.35);
    border-radius:12px;
    background:#fff;
    box-sizing:border-box;
}

.ab_file_help,
.ab_file_selection{
    color:#646970;
    font-size:13px;
    line-height:1.45;
}

.ab_file_selection:empty{
    display:none;
}

/* ==========================================================
   9. Navigation
   ========================================================== */

.ab_form .ab_step_footer{
    display:block!important;
    width:100%;
    padding:22px 24px 14px;
    border-top:1px solid rgba(31,41,51,.10);
    background:rgba(31,41,51,.025);
    box-sizing:border-box;
}

.ab_form .ab_navigation{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box;
}

.ab_navigation_buttons{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:10px;
    width:100%;
    padding:0 20px;
    box-sizing:border-box;
}

.ab_nav_column{
    width:100%;
    min-width:0;
    box-sizing:border-box;
}

.ab_nav_column_back{
    display:flex;
    justify-content:flex-start;
    order:2;
}

.ab_nav_column_next{
    display:flex;
    justify-content:flex-end;
    order:1;
}

.ab_nav_column .ab_button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    max-width:none;
    min-height:56px;
    padding:10px;
    border:2px solid rgba(31,41,51,.16);
    border-radius:18px;
    box-sizing:border-box;
    font:inherit;
    font-size:18px;
    font-weight:600;
    line-height:1;
    text-align:center;
    white-space:normal;
    cursor:pointer;
    transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;
}

.ab_back{
    background:rgba(31,41,51,.05);
    color:inherit;
}

.ab_next,
.ab_submit{
    background:rgba(31,41,51,.92);
    color:#fff;
}

.ab_back:hover,
.ab_next:hover,
.ab_submit:hover{
    transform:translateY(-1px);
    border-color:rgba(31,41,51,.28);
    box-shadow:0 6px 16px rgba(31,41,51,.10);
}

.ab_back:focus-visible,
.ab_next:focus-visible,
.ab_submit:focus-visible{
    outline:none;
    box-shadow:0 0 0 4px rgba(31,41,51,.10);
}

.ab_back:disabled,
.ab_next:disabled,
.ab_submit:disabled{
    cursor:not-allowed;
    opacity:.42;
    transform:none;
    box-shadow:none;
}

.ab_required_note{
    width:100%;
    padding:3px 20px;
    box-sizing:border-box;
    color:rgba(31,41,51,.5);
    font-size:.85rem;
    line-height:1.4;
    text-align:center;
    user-select:none;
}

/* ==========================================================
   10. Result
   ========================================================== */

.ab_result{
    width:100%;
    max-width:600px;
    margin:20px auto;
}

.ab_result_message{
    max-width:900px;
    margin:32px auto 20px;
    color:#1f2937;
    font-size:18px;
    font-weight:500;
    line-height:1.6;
    text-align:center;
}

.ab_result_message p{
    margin:0;
}

.ab_estimate_heading{
    margin:0 0 1rem;
}

.ab_estimate_project,
.ab_estimate_monthly{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:.5rem;
    margin:.5rem 0;
}

.ab_estimate_label,
.ab_estimate_value{
    display:inline-block;
}

.ab_disclaimer{
    margin-top:1rem;
}

.ab_view_footer{
    margin-top:1.25rem;
    font-size:.875rem;
    text-align:center;
}

/* ==========================================================
   11. Copy email dialog
   No viewport breakpoint needed: the dialog is intrinsically fluid.
   ========================================================== */

.ab_copy_modal{
    position:fixed;
    inset:0;
    z-index:2147483647;
    isolation:isolate;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
}

.ab_copy_modal_backdrop{
    position:absolute;
    inset:0;
    z-index:0;
    background:rgba(0,0,0,.55);
}

.ab_copy_modal_card{
    position:relative;
    z-index:1;
    width:min(560px,calc(100vw - 24px));
    max-height:calc(100dvh - 24px);
    overflow:auto;
    padding:clamp(24px,5vw,34px);
    border-radius:clamp(14px,2vw,18px);
    background:#fff;
    box-sizing:border-box;
    box-shadow:0 24px 80px rgba(0,0,0,.28);
    text-align:center;
}

.ab_copy_modal_card h2{
    margin:0 0 18px;
}

.ab_copy_modal_card p{
    margin:0 0 22px;
}

.ab_copy_modal_card .ab_copy_email{
    width:100%;
    min-height:52px;
    margin:0 0 18px;
    padding:12px 16px;
    border:2px solid rgba(31,41,51,.18);
    border-radius:16px;
    background:#fff;
    box-sizing:border-box;
    font:inherit;
    font-size:18px;
    line-height:1.3;
    transition:border-color .18s ease,box-shadow .18s ease;
}

.ab_copy_modal_card .ab_copy_email:focus{
    outline:none;
    border-color:rgba(31,41,51,.45);
    box-shadow:0 0 0 4px rgba(31,41,51,.08);
}

.ab_copy_modal_card .ab_copy_email::placeholder{
    color:rgba(31,41,51,.50);
    opacity:1;
}

.ab_copy_modal_card .ab_copy_email:focus::placeholder{
    opacity:.30;
}

.ab_copy_error{
    min-height:1.25em;
    color:#b32d2e;
}

.ab_copy_actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.ab_copy_send,
.ab_copy_skip{
    min-height:52px;
    padding:10px 18px;
    border:2px solid rgba(31,41,51,.16);
    border-radius:16px;
    font:inherit;
    font-size:17px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;
}

.ab_copy_send{
    background:rgba(31,41,51,.92);
    color:#fff;
}

.ab_copy_skip{
    background:rgba(31,41,51,.05);
    color:inherit;
}

.ab_copy_send:hover,
.ab_copy_skip:hover{
    transform:translateY(-1px);
    border-color:rgba(31,41,51,.28);
    box-shadow:0 6px 16px rgba(31,41,51,.10);
}

.ab_copy_send:focus-visible,
.ab_copy_skip:focus-visible{
    outline:none;
    box-shadow:0 0 0 4px rgba(31,41,51,.10);
}

body.ab_modal_open{
    overflow:hidden;
}

/* ==========================================================
   12. Async button feedback
   ========================================================== */

.ab_submit,
.ab_copy_send{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.ab_submit:active:not(:disabled),
.ab_copy_send:active:not(:disabled){
    transform:translateY(8px);
    box-shadow:none;
}

.ab_submit.ab_is_loading,
.ab_copy_send.ab_is_loading,
.ab_submit.ab_is_success,
.ab_copy_send.ab_is_success{
    opacity:1!important;
    cursor:default;
}

.ab_submit.ab_is_loading::after,
.ab_copy_send.ab_is_loading::after{
    content:"";
    display:inline-block;
    flex:0 0 auto;
    width:18px;
    height:18px;
    margin-left:12px;
    border:3px solid rgba(255,255,255,.38);
    border-top-color:#fff;
    border-radius:50%;
    animation:ab_button_spin .75s linear infinite;
}

.ab_submit.ab_is_success,
.ab_copy_send.ab_is_success{
    background:#2f8f57!important;
    border-color:#2f8f57!important;
    color:#fff!important;
    transition:
        background-color .65s ease,
        border-color .65s ease,
        color .25s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

@keyframes ab_button_spin{
    to{transform:rotate(360deg)}
}

/* ==========================================================
   13. Accessibility
   ========================================================== */

@media(prefers-reduced-motion:reduce){
    .ab_group,
    .ab_progress_bar,
    .ab_selection_modern .ab_choice,
    .ab_selection_modern .ab_choice_label::before,
    .ab_selection_modern .ab_choice_label::after{
        transition:none;
    }

    .ab_submit.ab_is_loading::after,
    .ab_copy_send.ab_is_loading::after{
        animation-duration:1.5s;
    }
}


/* Required acceptance */
.ab_acceptance{
    width:100%;
    margin:0 0 16px;
    padding:0 20px;
    box-sizing:border-box;
}
.ab_acceptance[hidden]{
    display:none!important;
}
.ab_acceptance_label{
    display:flex;
    align-items:flex-start;
    gap:10px;
    line-height:1.45;
    cursor:pointer;
}
.ab_acceptance_checkbox{
    flex:0 0 auto;
    margin-top:.2em;
}
.ab_acceptance_text{
    min-width:0;
}
.ab_acceptance_text p{
    margin:0;
}


/* Boolean switch */
.ab_boolean_switch_wrap{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
}
.ab_boolean_label{
    font:inherit;
    line-height:1.35;
}
.ab_boolean_switch{
    position:relative;
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    cursor:pointer;
}
.ab_boolean_switch_input{
    position:absolute;
    width:1px;
    height:1px;
    margin:0;
    opacity:0;
}
.ab_boolean_switch_track{
    position:relative;
    display:block;
    width:52px;
    height:30px;
    border-radius:999px;
    background:rgba(31,41,51,.22);
    transition:background-color .16s ease;
}
.ab_boolean_switch_thumb{
    position:absolute;
    top:3px;
    left:3px;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 4px rgba(31,41,51,.25);
    transition:transform .16s ease;
}
.ab_boolean_switch_input:checked + .ab_boolean_switch_track{
    background:#22c55e;
}
.ab_boolean_switch_input:checked + .ab_boolean_switch_track .ab_boolean_switch_thumb{
    transform:translateX(22px);
}
.ab_boolean_switch_input:focus-visible + .ab_boolean_switch_track{
    box-shadow:0 0 0 4px rgba(31,41,51,.10);
}
@media (prefers-reduced-motion: reduce){
    .ab_boolean_switch_track,
    .ab_boolean_switch_thumb{
        transition:none;
    }
}


/* 2.5.5 — Conditional branching motion */
.ab_question{
    box-sizing:border-box;
}

.ab_question.ab_condition_entering,
.ab_question.ab_condition_leaving{
    overflow:hidden;
    will-change:max-height,opacity,transform;
    transition:
        max-height 200ms ease,
        opacity 160ms ease,
        transform 200ms ease,
        margin-top 200ms ease,
        margin-bottom 200ms ease;
}

@media (prefers-reduced-motion: reduce){
    .ab_question.ab_condition_entering,
    .ab_question.ab_condition_leaving{
        transition:none!important;
        transform:none!important;
    }
}

/* 2.5.5 — Boolean switch polish */
.ab_boolean_switch_wrap{
    justify-content:flex-start;
    gap:22px;
    margin:10px 0 6px;
}

.ab_boolean_label{
    min-width:0;
    color:rgba(31,41,51,.54);
    font-size:.96em;
    font-weight:500;
    transition:color .16s ease,font-weight .16s ease,opacity .16s ease;
}

.ab_boolean_switch{
    padding:2px 0;
}

.ab_boolean_switch_track{
    width:64px;
    height:34px;
    background:rgba(31,41,51,.18);
    box-shadow:inset 0 0 0 1px rgba(31,41,51,.08);
}

.ab_boolean_switch_thumb{
    top:3px;
    left:3px;
    width:28px;
    height:28px;
    box-shadow:0 2px 6px rgba(31,41,51,.24);
}

.ab_boolean_switch_input:checked + .ab_boolean_switch_track .ab_boolean_switch_thumb{
    transform:translateX(30px);
}

.ab_boolean_switch_wrap.ab_boolean_is_false .ab_boolean_label_false,
.ab_boolean_switch_wrap.ab_boolean_is_true .ab_boolean_label_true{
    color:inherit;
    font-weight:650;
    opacity:1;
}

.ab_boolean_switch_wrap.ab_boolean_is_false .ab_boolean_label_true,
.ab_boolean_switch_wrap.ab_boolean_is_true .ab_boolean_label_false{
    opacity:.72;
}

@media (max-width:420px){
    .ab_boolean_switch_wrap{
        gap:16px;
    }
}

@media (prefers-reduced-motion: reduce){
    .ab_boolean_label{
        transition:none!important;
    }
}

/* 2.5.5 — Small spacing consistency for newer components */
.ab_acceptance{
    margin-top:4px;
    margin-bottom:18px;
}

.ab_file_upload{
    margin-top:6px;
}

.ab_question_content > .ab_boolean_switch_wrap,
.ab_question_content > .ab_file_upload{
    margin-bottom:4px;
}