/* =========================================================
   RoofRate Quote Checker — Lone Star Roofing Pros
   Current production UI
   ========================================================= */

.rrq-wrap{
    --rrq-primary:#174f80;
    --rrq-primary-dark:#103a5d;
    --rrq-accent:#d71932;
    --rrq-bg:#f5f7f9;
    --rrq-surface:#fff;
    --rrq-text:#17324d;
    --rrq-muted:#5b7388;
    --rrq-border:#d7e0e7;
    --rrq-border-strong:#c8d5df;
    --rrq-soft:#eef3f7;
    --rrq-success:#24684f;
    --rrq-error:#9a3d3d;
    font-family:inherit;
    color:var(--rrq-text);
    background:var(--rrq-bg);
    width:100%;
    max-width:none;
    margin:0;
    padding:clamp(28px,3.2vw,48px) clamp(24px,5vw,72px) clamp(40px,4.5vw,64px);
    box-sizing:border-box;
    overflow:hidden;
}
.rrq-wrap *{box-sizing:border-box}

/* Layout */
.rrq-shell{
    width:min(100%,1420px);
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(430px,.94fr) minmax(600px,1.06fr);
    gap:clamp(48px,5vw,76px);
    align-items:start;
}
.rrq-intro{
    position:relative;
    min-width:0;
    min-height:690px;
    padding-bottom:190px;
}
.rrq-intro::after{
    content:"";
    position:absolute;
    left:-12%;
    bottom:-24px;
    width:min(720px,108%);
    height:360px;
    background-image:url('../images/roof-detail.png');
    background-size:cover;
    background-position:center bottom;
    background-repeat:no-repeat;
    opacity:.13;
    pointer-events:none;
    z-index:0;
    mask-image:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.35) 58%,transparent 100%);
    -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.35) 58%,transparent 100%);
}
.rrq-intro>*{position:relative;z-index:1}
.rrq-brand{
    margin:0 0 clamp(26px,3vw,38px);
    max-width:420px;
}
.rrq-brand img{
    display:block;
    width:min(100%,250px);
    height:auto;
    max-height:100px;
    object-fit:contain;
    object-position:left center;
}
.rrq-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:0;
    position:relative;
    padding-top:15px;
    color:var(--rrq-primary);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.13em;
    line-height:1.3;
}
.rrq-eyebrow span{
    position:absolute;
    left:0;
    top:0;
    width:54px;
    height:3px;
    border-radius:0;
    background:var(--rrq-accent);
}
.rrq-intro h2{
    color:var(--rrq-primary-dark);
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(48px,4.15vw,60px);
    line-height:1.02;
    letter-spacing:-.035em;
    font-weight:700;
    margin:16px 0 13px;
    max-width:610px;
}
.rrq-intro h2::first-line{color:var(--rrq-primary-dark)}
.rrq-intro h2 em{font-style:normal;color:var(--rrq-accent)}
.rrq-intro-subtitle{
    color:var(--rrq-primary-dark);
    font-size:clamp(25px,2.15vw,31px);
    line-height:1.14;
    letter-spacing:-.025em;
    font-weight:500;
    margin:0 0 21px;
    max-width:600px;
}
.rrq-intro>p:not(.rrq-offer-note){
    color:#45647d;
    font-size:16px;
    line-height:1.62;
    margin:0;
    max-width:600px;
}
.rrq-trust{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    margin-top:26px;
    color:var(--rrq-primary-dark);
    font-size:15px;
    font-weight:750;
}
.rrq-trust span{display:flex;align-items:center;gap:12px}
.rrq-trust span::before{
    content:"\2713";
    display:grid;
    place-items:center;
    flex:0 0 30px;
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--rrq-accent);
    color:#fff;
    font-size:17px;
    font-weight:900;
    line-height:1;
}
.rrq-offer-note{
    color:#6c8090!important;
    font-size:11.5px!important;
    line-height:1.55!important;
    margin:12px 0 0!important;
    max-width:560px!important;
}

/* Quote card and progress */
.rrq-card{
    width:100%;
    min-width:0;
    background:var(--rrq-surface);
    border:1px solid var(--rrq-border);
    border-radius:10px;
    box-shadow:0 10px 32px rgba(23,50,77,.075);
    padding:20px clamp(25px,2.5vw,34px) 30px;
}
.rrq-progress{margin:0 0 22px}
.rrq-progress-line{
    height:2px;
    background:#dce4eb;
    margin:0 29px -21px;
    position:relative;
}
.rrq-progress-line span{
    display:block;
    width:0;
    height:100%;
    background:var(--rrq-primary);
    transition:width .25s ease;
}
.rrq-progress-items{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    position:relative;
}
.rrq-progress-items button{
    border:0;
    background:transparent;
    padding:0;
    color:#72879a;
    font:inherit;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    cursor:default;
}
.rrq-progress-items b{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#e9eff4;
    color:#516c83;
    border:0;
    margin:0 auto 8px;
    font-size:14px;
}
.rrq-progress-items button.is-active{color:var(--rrq-primary-dark)}
.rrq-progress-items button.is-active b{background:var(--rrq-primary);color:#fff}

/* Form steps */
.rrq-step{display:none}
.rrq-step.is-active{display:block;animation:rrqFade .2s ease}
@keyframes rrqFade{
    from{opacity:.35;transform:translateY(4px)}
    to{opacity:1;transform:none}
}
.rrq-step-head>span{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.11em;
    color:var(--rrq-primary);
    font-weight:800;
}
.rrq-step-head h3{
    font-family:Georgia,"Times New Roman",serif;
    color:var(--rrq-primary-dark);
    font-size:clamp(29px,2.4vw,35px);
    line-height:1.08;
    letter-spacing:-.025em;
    margin:4px 0 8px;
}
.rrq-step-head p{
    margin:0 0 23px;
    color:var(--rrq-muted);
    font-size:15px;
    line-height:1.55;
}
.rrq-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:16px;
    row-gap:28px;
}
.rrq-field{
    display:flex;
    flex-direction:column;
    gap:16px;
    min-width:0;
    padding-bottom:10px;
}
.rrq-field.rrq-full{grid-column:1/-1}
.rrq-field>span{
    font-size:11.5px;
    line-height:1.3;
    font-weight:800;
    color:#38566f;
    text-transform:uppercase;
    letter-spacing:.055em;
    margin-bottom:0;
}
.rrq-field input,.rrq-field select,.rrq-field textarea,.rrq-status-form select{
    width:100%;
    border:1px solid var(--rrq-border-strong);
    background:#fff;
    border-radius:6px;
    padding:12px 14px;
    min-height:50px;
    font:inherit;
    font-size:16px;
    color:var(--rrq-text);
    outline:none;
    box-shadow:none;
    transition:border-color .15s,box-shadow .15s,background .15s;
}
.rrq-field textarea{min-height:112px;resize:vertical}
.rrq-field input::placeholder,.rrq-field textarea::placeholder{color:#98a9b6}
.rrq-field input:focus,.rrq-field select:focus,.rrq-field textarea:focus{
    border-color:var(--rrq-primary);
    box-shadow:0 0 0 3px rgba(23,79,128,.11);
    background:#fff;
}
.rrq-field input.rrq-invalid,.rrq-field select.rrq-invalid,.rrq-field textarea.rrq-invalid{
    border-color:#b84b4b;
    box-shadow:0 0 0 3px rgba(184,75,75,.08);
}
.rrq-money{position:relative;width:100%}
.rrq-money i{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    font-style:normal;
    color:#5d7488;
    font-weight:700;
    font-size:17px;
    z-index:1;
    pointer-events:none;
}
.rrq-money input{padding-left:35px!important;font-variant-numeric:tabular-nums}

/* Savings summary */
.rrq-savings{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);
    gap:8px 20px;
    align-items:center;
    border:1px solid #cbdbe7;
    border-left:4px solid var(--rrq-accent);
    border-radius:7px;
    background:#f6f9fb;
    padding:17px 18px;
    margin-top:1px;
    min-width:0;
    min-height:104px;
}
.rrq-savings-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.rrq-savings-label{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.09em;
    font-weight:800;
    color:#5c7183;
}
.rrq-savings-value{
    font-size:20px;
    line-height:1.08;
    letter-spacing:-.02em;
    color:var(--rrq-primary-dark);
    font-weight:800;
}
.rrq-savings-target{
    font-size:12px;
    line-height:1.45;
    color:#60788b;
    text-align:right;
    max-width:245px;
}
.rrq-savings-context{font-size:11.5px;line-height:1.35;color:#70879a}
.rrq-savings-details{
    display:grid;
    gap:8px;
    border-left:1px solid #d8e3ea;
    padding-left:18px;
}
.rrq-savings-details div{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:14px;
}
.rrq-savings-details span{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.055em;
    font-weight:800;
    color:#688096;
}
.rrq-savings-details strong{
    font-size:15px;
    color:var(--rrq-primary-dark);
    font-variant-numeric:tabular-nums;
}
.rrq-savings.has-value{background:#f2f8f5;border-color:#c8ddd0}
.rrq-savings.has-value .rrq-savings-value{color:var(--rrq-accent)}

/* Actions and supporting controls */
.rrq-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:27px;
    padding-top:20px;
    border-top:1px solid #e1e7ec;
}
.rrq-btn{
    border:0;
    border-radius:5px;
    background:var(--rrq-accent);
    color:#fff;
    font:inherit;
    font-size:15px;
    font-weight:800;
    min-height:49px;
    padding:12px 25px;
    cursor:pointer;
    box-shadow:none;
    transition:background .15s,transform .15s;
}
.rrq-btn:hover{background:#b9142b;transform:none}
.rrq-btn:focus-visible,.rrq-link:focus-visible,.rrq-progress-items button:focus-visible{
    outline:3px solid rgba(23,79,128,.25);
    outline-offset:3px;
}
.rrq-btn:disabled{opacity:.65;cursor:wait;transform:none}
.rrq-link{
    border:0;
    background:transparent;
    color:#688097;
    font:inherit;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    padding:10px 0;
}
.rrq-link:hover{color:var(--rrq-primary-dark)}

.rrq-drop{
    display:flex;
    min-height:180px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:1.5px dashed #b8c8d3;
    background:#f9fbfc;
    border-radius:8px;
    padding:25px;
    cursor:pointer;
    transition:border-color .15s,background .15s;
}
.rrq-drop:hover{border-color:var(--rrq-primary);background:#f3f8fb}
.rrq-drop input{position:absolute;opacity:0;pointer-events:none}
.rrq-upload-icon{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:8px;
    background:#eaf1f6;
    color:var(--rrq-primary);
    font-size:20px;
    font-weight:800;
    margin-bottom:11px;
}
.rrq-drop strong{font-size:14px}
.rrq-drop span{font-size:12px;color:var(--rrq-muted);margin-top:5px}
.rrq-file-name{font-size:12px;font-weight:700;color:var(--rrq-primary);margin:9px 2px}
.rrq-consent{display:flex;align-items:flex-start;gap:10px;margin-top:19px;color:#526a7c;font-size:12px;line-height:1.55}
.rrq-consent input{margin-top:3px;accent-color:var(--rrq-primary)}
.rrq-privacy{font-size:10.5px;color:#8293a0;line-height:1.55}
.rrq-alert{padding:14px 16px;border-radius:7px;margin-bottom:22px;font-size:13px}
.rrq-alert strong{display:block;margin-bottom:4px}
.rrq-alert p{margin:0;line-height:1.55}
.rrq-success{background:#edf7f1;border:1px solid #c6dfd0;color:var(--rrq-success)}
.rrq-error{background:#fff2f2;border:1px solid #eccaca;color:var(--rrq-error)}
.rrq-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}

/* Keep theme typography from adding spacing inside the component. */
.rrq-wrap h2,.rrq-wrap h3,.rrq-wrap p,.rrq-wrap span,.rrq-wrap label,.rrq-wrap button{
    margin-block-start:0;
}

/* Responsive */
@media(max-width:1050px){
    .rrq-wrap{padding-left:clamp(20px,3vw,42px);padding-right:clamp(20px,3vw,42px)}
    .rrq-shell{
        grid-template-columns:minmax(360px,.9fr) minmax(540px,1.1fr);
        gap:40px;
    }
    .rrq-intro h2{font-size:clamp(44px,4.6vw,56px)}
    .rrq-intro-subtitle{font-size:26px}
}
@media(max-width:840px){
    .rrq-wrap{padding:34px 22px 55px}
    .rrq-shell{grid-template-columns:1fr;gap:28px;max-width:800px}
    .rrq-intro{min-height:0;padding-bottom:130px}
    .rrq-intro::after{width:620px;height:290px;bottom:-25px;left:-8%}
    .rrq-brand{margin-bottom:30px}
    .rrq-brand img{width:250px}
    .rrq-card{max-width:none}
}
@media(max-width:560px){
    .rrq-wrap{padding:24px 14px 42px}
    .rrq-shell{gap:24px}
    .rrq-intro{padding-bottom:105px}
    .rrq-intro::after{
        width:540px;
        height:230px;
        left:-18%;
        bottom:-18px;
        opacity:.10;
    }
    .rrq-brand{margin-bottom:25px}
    .rrq-brand img{width:225px;max-height:82px}
    .rrq-eyebrow{font-size:10.5px}
    .rrq-intro h2{font-size:40px;line-height:1.03;margin-top:15px}
    .rrq-intro-subtitle{font-size:24px;margin-bottom:18px}
    .rrq-intro>p:not(.rrq-offer-note){font-size:15px;line-height:1.6}
    .rrq-trust{font-size:14px;gap:11px;margin-top:22px}
    .rrq-trust span::before{flex-basis:29px;width:29px;height:29px;font-size:17px}
    .rrq-card{padding:18px 16px 24px;border-radius:8px}
    .rrq-progress{margin-bottom:22px}
    .rrq-progress-items button{font-size:9px}
    .rrq-progress-items b{width:36px;height:36px;font-size:12px}
    .rrq-progress-line{margin:0 25px -18px}
    .rrq-step-head h3{font-size:27px}
    .rrq-step-head p{font-size:14px;margin-bottom:23px}
    .rrq-fields{grid-template-columns:1fr;row-gap:24px}
    .rrq-field.rrq-full{grid-column:auto}
    .rrq-field{gap:13px;padding-bottom:10px}
    .rrq-savings{
        grid-column:auto;
        grid-template-columns:1fr;
        gap:12px;
        padding:14px;
        min-height:0;
    }
    .rrq-savings-target{text-align:left;max-width:none}
    .rrq-savings-value{font-size:28px}
    .rrq-savings-details{
        border-left:0;
        border-top:1px solid #d8e3ea;
        padding:10px 0 0;
        gap:7px;
    }
    .rrq-actions{margin-top:24px;padding-top:18px}
    .rrq-btn{min-height:49px;padding:12px 18px}
    .rrq-drop{min-height:165px}
}