/* ==========================================================
   ML STUMP REMOVAL LLC
   HOME — COMPACT APPOINTMENT APP
   Independent / isolated CSS
   Minimum readable text: 14px
========================================================== */

.mla-app,
.mla-app *{
    box-sizing:border-box;
}

.mla-app{
    position:relative;
    padding:58px 0 68px;
    overflow:hidden;
    background:
        radial-gradient(circle at 12% 0%,rgba(240,196,54,.10),transparent 25%),
        #f6f4ee;
    color:#000;
}

.mla-shell{
    display:grid;
    grid-template-columns:minmax(290px,.60fr) minmax(620px,1.40fr);
    align-items:stretch;
    gap:18px;
}


/* ==========================================================
   LEFT FEATURE PANEL
========================================================== */

.mla-intro{
    position:relative;
    min-height:540px;
    padding:34px 30px 28px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    background:
        radial-gradient(circle at 85% 10%,rgba(240,196,54,.16),transparent 25%),
        #000;
    color:#fff;
    border-radius:17px;
}

.mla-intro::after{
    content:"";
    position:absolute;
    right:-80px;
    bottom:-100px;
    width:260px;
    height:260px;
    border:1px solid rgba(240,196,54,.15);
    border-radius:50%;
    pointer-events:none;
}

.mla-intro-badge{
    width:max-content;
    min-height:39px;
    padding:0 12px;
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:7px;
    background:rgba(255,255,255,.05);
}

.mla-intro-badge i{
    color:#f0c436;
    font-size:14px;
}

.mla-intro-badge span{
    color:#fff;
    font-size:14px;
    font-weight:900;
    letter-spacing:.08em;
}

.mla-kicker,
.mla-step-head > span{
    display:block;
    margin-bottom:8px;
    color:#ae692b;
    font-size:14px;
    font-weight:900;
    letter-spacing:.16em;
}

.mla-intro .mla-kicker{
    margin-top:34px;
    color:#f0c436;
}

.mla-intro h1{
    margin:0;
    color:#fff;
    font-size:clamp(42px,4vw,61px);
    line-height:.89;
    letter-spacing:-.045em;
    font-weight:950;
}

.mla-intro h1 span{
    display:block;
    color:#f0c436;
}

.mla-intro > p{
    max-width:440px;
    margin:17px 0 0;
    color:#c6c6c6;
    font-size:14px;
    line-height:1.62;
}

.mla-intro-categories{
    margin-top:26px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
}

.mla-intro-categories > div{
    min-width:0;
    padding:12px 10px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.08);
    border-radius:9px;
}

.mla-intro-categories strong{
    display:block;
    color:#f0c436;
    font-size:20px;
    line-height:1;
}

.mla-intro-categories span{
    display:block;
    margin-top:8px;
    color:#fff;
    font-size:14px;
    font-weight:900;
}

.mla-intro-categories small{
    display:block;
    margin-top:3px;
    color:#929292;
    font-size:14px;
    font-weight:600;
}

.mla-intro-bottom{
    position:relative;
    z-index:2;
    margin-top:auto;
    padding-top:22px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    border-top:1px solid rgba(255,255,255,.09);
}

.mla-intro-bottom > div{
    min-width:0;
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    align-items:center;
    gap:8px;
}

.mla-intro-bottom i{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:#f0c436;
    color:#000;
    font-size:14px;
}

.mla-intro-bottom span{
    min-width:0;
    color:#fff;
    font-size:14px;
    line-height:1.15;
    font-weight:900;
}

.mla-intro-bottom small{
    display:block;
    margin-top:3px;
    color:#8e8e8e;
    font-size:14px;
    line-height:1.25;
    font-weight:600;
}


/* ==========================================================
   FORM PANEL
========================================================== */

.mla-panel{
    min-width:0;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(0,0,0,.07);
    border-radius:17px;
    box-shadow:0 18px 45px rgba(0,0,0,.07);
}


/* ==========================================================
   PROGRESS
========================================================== */

.mla-progress{
    padding:17px 22px 15px;
    background:#000;
    color:#fff;
}

.mla-progress-line{
    position:relative;
    height:3px;
    overflow:hidden;
    background:rgba(255,255,255,.12);
    border-radius:20px;
}

.mla-progress-line span{
    display:block;
    width:0;
    height:100%;
    background:#f0c436;
    border-radius:20px;
    transition:width .3s ease;
}

.mla-progress-steps{
    margin:11px 0 0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:5px;
    list-style:none;
}

.mla-progress-steps li{
    min-width:0;
    display:flex;
    align-items:center;
    gap:5px;
    color:#777;
}

.mla-progress-steps li > span{
    width:25px;
    height:25px;
    flex:0 0 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.17);
    border-radius:50%;
    color:#999;
    font-size:14px;
    font-weight:900;
}

.mla-progress-steps li small{
    min-width:0;
    overflow:hidden;
    color:inherit;
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.mla-progress-steps li.is-active,
.mla-progress-steps li.is-complete{
    color:#fff;
}

.mla-progress-steps li.is-active > span,
.mla-progress-steps li.is-complete > span{
    background:#f0c436;
    border-color:#f0c436;
    color:#000;
}


/* ==========================================================
   FORM / STEPS
========================================================== */

.mla-form{
    position:relative;
}

.mla-step{
    min-width:0;
    margin:0;
    padding:25px 25px 23px;
    border:0;
    display:none;
}

.mla-step.is-active{
    display:block;
    animation:mlaCompactStep .28s ease;
}

@keyframes mlaCompactStep{
    from{
        opacity:0;
        transform:translateY(7px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

.mla-step-head{
    margin-bottom:18px;
}

.mla-step-head h2{
    margin:0;
    color:#000;
    font-size:clamp(26px,2.4vw,35px);
    line-height:1;
    letter-spacing:-.03em;
    font-weight:950;
}

.mla-step-head p{
    margin:6px 0 0;
    color:#686868;
    font-size:14px;
    line-height:1.5;
}


/* ==========================================================
   FIELDS
========================================================== */

.mla-fields{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.mla-field{
    min-width:0;
}

.mla-field-wide{
    grid-column:1 / -1;
}

.mla-field label{
    display:block;
    margin-bottom:5px;
    color:#1b1b1b;
    font-size:14px;
    font-weight:850;
}

.mla-field input,
.mla-field select,
.mla-field textarea{
    width:100%;
    min-width:0;
    border:1px solid #d8d8d8;
    outline:0;
    background:#fff;
    color:#000;
    border-radius:8px;
    font-family:inherit;
    font-size:14px;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.mla-field input,
.mla-field select{
    height:47px;
    padding:0 12px;
}

.mla-field textarea{
    min-height:105px;
    padding:11px 12px;
    resize:vertical;
    line-height:1.5;
}

.mla-field input:focus,
.mla-field select:focus,
.mla-field textarea:focus{
    border-color:#f0c436;
    box-shadow:0 0 0 3px rgba(240,196,54,.13);
}

.mla-field.has-error input,
.mla-field.has-error select,
.mla-field.has-error textarea{
    border-color:#fa1f2a;
    background:#fff8f8;
}

.mla-error{
    min-height:16px;
    margin-top:3px;
    display:block;
    color:#c31821;
    font-size:14px;
    line-height:1.2;
}


/* ==========================================================
   CATEGORY
========================================================== */

.mla-category-grid{
    margin-bottom:16px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.mla-category-card{
    position:relative;
    min-height:127px;
    padding:14px;
    display:flex;
    flex-direction:column;
    cursor:pointer;
    background:#f8f7f3;
    border:1px solid rgba(0,0,0,.08);
    border-radius:10px;
    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.mla-category-card:hover{
    transform:translateY(-2px);
    border-color:#d7b337;
}

.mla-category-card:has(input:checked){
    background:#fff9e7;
    border-color:#f0c436;
    box-shadow:0 0 0 2px rgba(240,196,54,.13);
}

.mla-category-card input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.mla-category-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:7px;
}

.mla-category-top strong{
    color:#000;
    font-size:14px;
    font-weight:950;
}

.mla-category-top em{
    padding:4px 6px;
    border-radius:4px;
    background:#000;
    color:#f0c436;
    font-size:14px;
    font-style:normal;
    font-weight:900;
}

.mla-category-card b{
    margin-top:auto;
    padding-top:16px;
    color:#000;
    font-size:18px;
    line-height:1.1;
}

.mla-category-card small{
    margin-top:4px;
    color:#666;
    font-size:14px;
    line-height:1.3;
}


/* ==========================================================
   ZONE
========================================================== */

.mla-zone-result{
    margin-top:12px;
    padding:12px 14px;
    display:grid;
    grid-template-columns:37px 1fr;
    align-items:center;
    gap:9px;
    border:1px solid rgba(0,0,0,.07);
    border-radius:9px;
    background:#f8f8f6;
}

.mla-zone-result > i{
    width:35px;
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:#000;
    color:#f0c436;
    font-size:14px;
}

.mla-zone-result strong,
.mla-zone-result span{
    display:block;
    font-size:14px;
}

.mla-zone-result strong{
    color:#000;
}

.mla-zone-result span{
    margin-top:2px;
    color:#676767;
    line-height:1.35;
}

.mla-zone-result.is-covered{
    border-color:rgba(174,105,43,.23);
    background:#fff9e8;
}

.mla-zone-result.is-covered > i{
    background:#f0c436;
    color:#000;
}

.mla-zone-result.is-check{
    border-color:rgba(250,31,42,.2);
    background:#fff7f7;
}

.mla-zone-result.is-check > i{
    background:#fa1f2a;
    color:#fff;
}


/* ==========================================================
   NOTE
========================================================== */

.mla-schedule-note{
    margin-top:12px;
    padding:11px 13px;
    display:flex;
    align-items:flex-start;
    gap:8px;
    border-left:3px solid #f0c436;
    background:#faf8ef;
}

.mla-schedule-note i{
    margin-top:2px;
    color:#ae692b;
    font-size:14px;
}

.mla-schedule-note p{
    margin:0;
    color:#5e5e5e;
    font-size:14px;
    line-height:1.45;
}


/* ==========================================================
   UPLOAD
========================================================== */

.mla-upload-zone{
    position:relative;
    min-height:142px;
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
    border:2px dashed #c8c8c8;
    border-radius:10px;
    background:#fafafa;
    cursor:pointer;
    transition:
        border-color .2s ease,
        background .2s ease;
}

.mla-upload-zone.is-dragover{
    border-color:#f0c436;
    background:#fff9e8;
}

.mla-upload-zone input{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
}

.mla-upload-icon{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#000;
    color:#f0c436;
    font-size:17px;
}

.mla-upload-zone strong{
    margin-top:9px;
    color:#000;
    font-size:16px;
}

.mla-upload-zone > span,
.mla-upload-zone > small{
    color:#666;
    font-size:14px;
}

.mla-upload-zone > span{
    margin-top:2px;
}

.mla-upload-zone > small{
    margin-top:5px;
}

.mla-file-list{
    margin:8px 0 14px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
}

.mla-file-item{
    min-width:0;
    padding:8px 9px;
    display:grid;
    grid-template-columns:31px minmax(0,1fr) 31px;
    align-items:center;
    gap:7px;
    background:#f6f5f1;
    border-radius:7px;
}

.mla-file-item > i{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#000;
    color:#f0c436;
    border-radius:6px;
    font-size:14px;
}

.mla-file-item div{
    min-width:0;
}

.mla-file-item strong,
.mla-file-item span{
    display:block;
    font-size:14px;
}

.mla-file-item strong{
    overflow:hidden;
    color:#000;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.mla-file-item span{
    margin-top:1px;
    color:#777;
}

.mla-file-item button{
    width:30px;
    height:30px;
    border:0;
    border-radius:6px;
    background:#fff;
    color:#fa1f2a;
    cursor:pointer;
}


/* ==========================================================
   REVIEW
========================================================== */

.mla-review{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.mla-review-section{
    min-width:0;
    padding:13px;
    border:1px solid rgba(0,0,0,.07);
    border-radius:9px;
    background:#fafafa;
}

.mla-review-section h3{
    margin:0 0 8px;
    color:#000;
    font-size:16px;
}

.mla-review-grid{
    display:grid;
    gap:7px;
}

.mla-review-item span,
.mla-review-item strong{
    display:block;
    font-size:14px;
}

.mla-review-item span{
    color:#777;
}

.mla-review-item strong{
    margin-top:1px;
    overflow-wrap:anywhere;
    color:#000;
    line-height:1.3;
}

.mla-consent{
    margin-top:13px;
    display:grid;
    grid-template-columns:20px 1fr;
    align-items:start;
    gap:8px;
    color:#525252;
    font-size:14px;
    line-height:1.45;
    cursor:pointer;
}

.mla-consent input{
    width:18px;
    height:18px;
    margin-top:1px;
    accent-color:#f0c436;
}


/* ==========================================================
   ACTIONS
========================================================== */

.mla-actions{
    margin-top:18px;
    padding-top:15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:9px;
    border-top:1px solid #ededed;
}

.mla-actions-end{
    justify-content:flex-end;
}

.mla-back,
.mla-next,
.mla-submit{
    min-height:46px;
    padding:0 16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:7px;
    font-family:inherit;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
    transition:
        transform .2s ease,
        background .2s ease;
}

.mla-back{
    border:1px solid #d8d8d8;
    background:#fff;
    color:#000;
}

.mla-next,
.mla-submit{
    border:1px solid #f0c436;
    background:#f0c436;
    color:#000;
}

.mla-back:hover,
.mla-next:hover,
.mla-submit:hover{
    transform:translateY(-1px);
}

.mla-submit[disabled]{
    opacity:.65;
    cursor:not-allowed;
    transform:none;
}

.mla-submit-loading{
    display:none;
}

.mla-submit.is-loading .mla-submit-label{
    display:none;
}

.mla-submit.is-loading .mla-submit-loading{
    display:inline-flex;
    align-items:center;
    gap:7px;
}


/* ==========================================================
   SUCCESS
========================================================== */

.mla-success{
    padding:38px 25px;
    text-align:center;
}

.mla-success-icon{
    width:58px;
    height:58px;
    margin:0 auto 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f0c436;
    color:#000;
    font-size:23px;
}

.mla-success > span{
    color:#ae692b;
    font-size:14px;
    font-weight:900;
    letter-spacing:.14em;
}

.mla-success h2{
    max-width:620px;
    margin:8px auto 0;
    color:#000;
    font-size:clamp(28px,3vw,40px);
    line-height:.97;
    font-weight:950;
}

.mla-success h2 strong{
    display:block;
    color:#f0c436;
}

.mla-success p{
    max-width:620px;
    margin:14px auto 0;
    color:#666;
    font-size:14px;
    line-height:1.55;
}

.mla-success-reference{
    width:max-content;
    max-width:100%;
    margin:15px auto 0;
    padding:8px 12px;
    border-radius:7px;
    background:#f5f4ef;
    color:#666;
    font-size:14px;
}

.mla-success-reference strong{
    color:#000;
}

.mla-success > a{
    min-height:45px;
    width:max-content;
    margin:15px auto 0;
    padding:0 15px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    border-radius:7px;
    background:#000;
    color:#fff;
    font-size:14px;
    font-weight:900;
    text-decoration:none;
}

.mla-success > a i{
    color:#f0c436;
}


/* ==========================================================
   MESSAGE / HONEYPOT
========================================================== */

.mla-form-message{
    margin:0 25px 20px;
    font-size:14px;
    line-height:1.4;
}

.mla-form-message.is-error{
    padding:10px 12px;
    border:1px solid rgba(250,31,42,.2);
    background:#fff4f4;
    color:#a90e16;
    border-radius:7px;
}

.mla-honeypot{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1100px){

    .mla-shell{
        grid-template-columns:1fr;
    }

    .mla-intro{
        min-height:auto;
        padding:28px 25px;
    }

    .mla-intro > p{
        max-width:760px;
    }

    .mla-intro-categories{
        max-width:700px;
    }

    .mla-intro-bottom{
        max-width:700px;
        margin-top:22px;
    }

}


@media(max-width:767px){

    .mla-app{
        padding:45px 0 55px;
    }

    .mla-shell{
        gap:12px;
    }

    .mla-intro{
        padding:25px 20px;
        border-radius:14px;
    }

    .mla-intro h1{
        font-size:clamp(38px,11.5vw,53px);
    }

    .mla-intro-categories{
        grid-template-columns:1fr;
    }

    .mla-intro-bottom{
        grid-template-columns:1fr;
    }

    .mla-panel{
        border-radius:14px;
    }

    .mla-progress{
        padding:14px 15px;
    }

    .mla-progress-steps{
        grid-template-columns:repeat(6,25px);
        justify-content:space-between;
    }

    .mla-progress-steps li{
        display:block;
    }

    .mla-progress-steps li small{
        display:none;
    }

    .mla-step{
        padding:22px 16px 20px;
    }

    .mla-fields,
    .mla-category-grid,
    .mla-file-list,
    .mla-review{
        grid-template-columns:1fr;
    }

    .mla-field-wide{
        grid-column:auto;
    }

    .mla-category-card{
        min-height:112px;
    }

    .mla-actions{
        align-items:stretch;
        flex-direction:column-reverse;
    }

    .mla-actions-end{
        flex-direction:column;
    }

    .mla-back,
    .mla-next,
    .mla-submit{
        width:100%;
    }

    .mla-success{
        padding:34px 17px;
    }

    .mla-form-message{
        margin:0 16px 18px;
    }

}