/* ==========================================================
   CADASTRO DE CAMINHÕES
   Componentes exclusivos da página de onboarding.
========================================================== */

.form-page{

    min-height:100vh;
    background:
        radial-gradient(circle at 12% 8%,rgba(237,28,36,.08),transparent 30%),
        linear-gradient(180deg,#fff 0%,var(--bg) 100%);

}

.lead-form-shell{

    width:min(100% - 40px,760px);
    margin:0 auto;
    padding:36px 0 56px;

}

.lead-form-brand{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;

}

.lead-form-brand a{

    display:flex;
    width:142px;

}

.lead-form-brand img{

    width:100%;
    height:auto;
    object-fit:contain;

}

.lead-form-brand span{

    color:var(--text);
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    text-align:right;

}

.lead-form-card{

    background:rgba(255,255,255,.96);
    border:1px solid rgba(50,16,20,.1);
    border-radius:28px;
    box-shadow:0 24px 70px rgba(50,16,20,.1);
    padding:36px;

}

.lead-form-progress{

    margin-bottom:48px;

}

.lead-form-progress-meta{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:12px;
    color:var(--text);
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;

}

.lead-form-progress-meta span:first-child{

    color:var(--blue);

}

.lead-form-progress-counter{

    margin-left:auto;

}

.lead-form-restart{

    padding:0;
    border:0;
    background:transparent;
    color:#927c7f;
    cursor:pointer;
    font:inherit;
    font-size:10px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    transition:color .2s ease;

}

.lead-form-restart:hover{

    color:var(--blue);

}

.lead-form-action-restart{

    margin-right:auto;

}

.lead-form-progress-track{

    width:100%;
    height:5px;
    overflow:hidden;
    border-radius:999px;
    background:#f2dddd;

}

.lead-form-progress-track span{

    display:block;
    width:8%;
    height:100%;
    border-radius:inherit;
    background:var(--blue);
    transition:width .35s ease;

}

.lead-form-step{

    min-height:390px;
    animation:lead-form-step-in .35s ease both;

}

@keyframes lead-form-step-in{

    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.lead-form-kicker{

    display:block;
    margin-bottom:18px;
    color:var(--blue);
    font-size:11px;
    font-weight:800;
    letter-spacing:.2em;
    text-transform:uppercase;

}

.lead-form-step h1{

    max-width:620px;
    margin:0;
    color:var(--ink);
    font-size:clamp(32px,5vw,48px);
    line-height:1.04;
    letter-spacing:-2px;
    font-weight:900;

}

.lead-form-step > p:not(.lead-form-help):not(.lead-form-error),
.lead-form-intro{

    max-width:580px;
    margin:18px 0 32px;
    color:var(--text);
    font-size:16px;
    line-height:1.65;

}

.lead-form-help{

    margin:10px 0 0;
    color:var(--text);
    font-size:13px;
    line-height:1.55;

}

.lead-form-followup-field{

    margin-top:24px;

}

.lead-form-field-title{

    display:block;
    margin-bottom:10px;
    color:var(--ink);
    font-size:13px;
    font-weight:800;
    line-height:1.35;

}

.lead-form-choice-grid{

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;

}

.lead-form-choice-grid.compact{

    grid-template-columns:repeat(2,minmax(0,1fr));

}

.lead-form-choice{

    position:relative;
    display:block;
    cursor:pointer;

}

.lead-form-choice input{

    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;

}

.lead-form-choice-body{

    display:flex;
    flex-direction:column;
    min-height:100%;
    gap:8px;
    padding:20px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    transition:.2s ease;

}

.lead-form-choice-body strong{

    color:var(--ink);
    font-size:16px;
    line-height:1.25;

}

.lead-form-choice-body span{

    color:var(--text);
    font-size:13px;
    line-height:1.5;

}

.lead-form-choice.is-selected .lead-form-choice-body,
.lead-form-choice:focus-within .lead-form-choice-body{

    border-color:var(--blue);
    background:var(--blue-soft);
    box-shadow:0 0 0 3px rgba(237,28,36,.1);

}

.lead-form-field-grid{

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 16px;

}

.lead-form-field-grid.single{

    grid-template-columns:1fr;

}

.lead-form-field{

    display:flex;
    flex-direction:column;
    gap:8px;

}

.lead-form-field.full{

    grid-column:1 / -1;

}

.lead-form-field > label,
.lead-form-field > span{

    color:var(--ink);
    font-size:13px;
    font-weight:800;
    line-height:1.35;

}

.lead-form-field input,
.lead-form-field select,
.lead-form-field textarea{

    width:100%;
    min-height:52px;
    padding:14px 15px;
    border:1px solid #dfcfd0;
    border-radius:12px;
    outline:none;
    background:#fff;
    color:var(--ink);
    font:inherit;
    font-size:15px;
    transition:border-color .2s ease,box-shadow .2s ease;

}

.lead-form-field textarea{

    min-height:132px;
    resize:vertical;

}

.lead-form-field input::placeholder,
.lead-form-field textarea::placeholder{

    color:#a89496;

}

.lead-form-field input:focus,
.lead-form-field select:focus,
.lead-form-field textarea:focus{

    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(237,28,36,.1);

}

.lead-form-field input[aria-invalid="true"],
.lead-form-field select[aria-invalid="true"],
.lead-form-field textarea[aria-invalid="true"]{

    border-color:var(--blue);

}

.lead-form-field small{

    color:var(--text);
    font-size:12px;
    line-height:1.45;

}

.lead-form-combinations{

    display:grid;
    gap:14px;

}

.lead-form-combination{

    padding:20px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;

}

.lead-form-combination-head{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;

}

.lead-form-combination-head strong{

    color:var(--navy);
    font-size:14px;

}

.lead-form-remove{

    border:0;
    background:transparent;
    color:var(--blue-dark);
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:800;

}

.lead-form-add{

    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:16px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--blue-dark);
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:800;

}

.lead-form-add svg{

    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;

}

.lead-form-actions{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-top:28px;
    border-top:1px solid var(--line);

}

.lead-form-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:50px;
    padding:13px 20px;
    border-radius:999px;
    cursor:pointer;
    font:inherit;
    font-size:14px;
    font-weight:800;
    line-height:1.25;
    transition:.25s ease;

}

.lead-form-btn svg{

    width:18px;
    height:18px;
    flex:0 0 18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;

}

.lead-form-btn-primary{

    margin-left:auto;
    border:1px solid var(--blue);
    background:var(--blue);
    color:#fff;
    box-shadow:0 10px 22px rgba(237,28,36,.18);

}

.lead-form-btn-primary:hover{

    transform:translateY(-2px);
    background:var(--blue-dark);

}

.lead-form-btn-back{

    border:1px solid var(--line);
    background:#fff;
    color:var(--navy);

}

.lead-form-btn-back:hover{

    border-color:var(--navy);

}

.lead-form-btn:disabled{

    cursor:wait;
    opacity:.65;
    transform:none;

}

.lead-form-error{

    min-height:22px;
    margin:16px 0 0;
    color:var(--blue-dark);
    font-size:13px;
    font-weight:700;
    line-height:1.5;

}

.lead-form-success{

    min-height:390px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

}

.lead-form-success[hidden],
.lead-form-card [hidden]{

    display:none;

}

.lead-form-success h1{

    max-width:560px;
    margin:0;
    font-size:clamp(34px,5vw,52px);
    line-height:1;
    letter-spacing:-2px;

}

.lead-form-success p{

    max-width:550px;
    margin:20px 0 30px;
    color:var(--text);
    font-size:16px;
    line-height:1.65;

}

.lead-form-success .lead-form-btn{

    text-decoration:none;

}

.lead-form-note{

    margin:18px 0 0;
    color:var(--text);
    font-size:12px;
    line-height:1.5;
    text-align:center;

}

@media(max-width:600px){

    .lead-form-shell{

        width:calc(100% - 28px);
        padding:18px 0 30px;

    }

    .lead-form-brand{

        align-items:flex-start;
        margin-bottom:16px;

    }

    .lead-form-brand a{

        width:124px;

    }

    .lead-form-brand span{

        max-width:140px;
        font-size:9px;
        line-height:1.4;

    }

    .lead-form-card{

        border-radius:22px;
        padding:24px 18px 20px;

    }

    .lead-form-progress{

        margin-bottom:36px;

    }

    .lead-form-step{

        min-height:440px;

    }

    .lead-form-step h1{

        font-size:clamp(30px,9vw,40px);
        letter-spacing:-1.4px;

    }

    .lead-form-step > p:not(.lead-form-help):not(.lead-form-error),
    .lead-form-intro{

        margin-top:16px;
        font-size:15px;

    }

    .lead-form-choice-grid,
    .lead-form-choice-grid.compact,
    .lead-form-field-grid{

        grid-template-columns:1fr;

    }

    .lead-form-choice-body{

        padding:16px;

    }

    .lead-form-combination{

        padding:16px;

    }

    .lead-form-combination-head{

        margin-bottom:16px;

    }

    .lead-form-actions{

        padding-top:22px;

    }

    .lead-form-btn{

        min-height:48px;
        padding:12px 15px;

    }

    .lead-form-success{

        min-height:440px;

    }

    .lead-form-note{

        padding:0 12px;

    }

}