/* ==========================================================
   RoboAir Hintalaskuri
   Extends styles.css
========================================================== */

#hintalaskuri{
    padding:5rem 0;
    background: #fafdff;
}

#hintalaskuri .counter button,
#hintalaskuri .choice,
#hintalaskuri .extra,
#hintalaskuri .summary-btn {
    touch-action: manipulation;
}

#hintalaskuri #formMessage{

    margin-top:1rem;

    text-align:center;

    font-weight:600;

    min-height:1.4rem;

}

#hintalaskuri #formMessage.success{

    color:#2e7d32;

}

#hintalaskuri #formMessage.error{

    color:#d32f2f;

}

#hintalaskuri #prelude{
    text-align:center;
    max-width:760px;
    margin:0 auto 3rem;
}

#ref-text {
  letter-spacing: 0.12em;
  font-size: medium;
  color: #38b6ff;
}

#ex-text {
  font-family: 'TikTok Sans';
  font-weight: 800;
  color:#12343b;
}

#intro-ref {
  font-size: large;
  color: rgba(0, 0, 0, 0.692);
}

#hintalaskuri .calculator-layout{

    display:grid;
    grid-template-columns:minmax(0,2fr) 360px;

    gap:2rem;

    align-items:start;
}

/* ==========================================================
   Card
========================================================== */

#hintalaskuri .price-card{

    background:#fff;

    border-radius:20px;

    box-shadow:var(--shadow-soft);

    padding:clamp(1.5rem,3vw,3rem);

}

#hintalaskuri .field{

    padding-bottom:2rem;

    margin-bottom:2rem;

    border-bottom:1px solid #edf1f4;

}

#hintalaskuri .field:last-child{

    margin-bottom:0;

    padding-bottom:0;

    border:none;

}

#hintalaskuri .field h3{

    color:var(--text);

    font-size:1.05rem;

    font-weight:700;

    margin-bottom:.6rem;

}

#hintalaskuri .field p{

    color:var(--muted);

    line-height:1.6;

    margin-bottom:1rem;

}

/* ==========================================================
   Choice Buttons
========================================================== */

#hintalaskuri .option-group{

    display:flex;

    flex-direction:column;

    gap:.8rem;

}

#hintalaskuri .choice{

    width:100%;

    padding:1rem 1.25rem;

    background:white;

    border:2px solid #dfe8ed;

    border-radius:14px;

    color:var(--text);

    text-align:left;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

}

#hintalaskuri .choice:hover{

    border-color:var(--accent);

    transform:translateY(-2px);

}

#hintalaskuri .choice.active{

    border-color:var(--accent);

    background:rgba(56,182,255,.08);

    color:var(--accent-2);

}

/* ==========================================================
   Counter
========================================================== */

#hintalaskuri .counter{

    display:grid;

    grid-template-columns:56px 1fr 56px;

    width:220px;

    max-width:100%;

    border:2px solid #dfe8ed;

    border-radius:14px;

    overflow:hidden;

}

#hintalaskuri .counter button{

    border:none;

    background:white;

    font-size:1.6rem;

    cursor:pointer;

    transition:.2s;

    user-select: none;
    -webkit-user-select: none;
}


}

#hintalaskuri .counter button:hover{

    background:var(--bg);

}

#hintalaskuri .counter button:disabled{

    cursor:not-allowed;

    opacity:.35;

}

#hintalaskuri .counter .value{

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    font-size:1.2rem;

    border-inline:2px solid #dfe8ed;

}

/* ==========================================================
   Extras
========================================================== */

#hintalaskuri .extras{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

#hintalaskuri .extra{

    display:flex;

    align-items:flex-start;

    gap:1rem;

    cursor:pointer;

    padding:1rem;

    border:2px solid #dfe8ed;

    border-radius:14px;

    transition:.2s;

}

#hintalaskuri .extra:hover{

    border-color:var(--accent);

}

#hintalaskuri .extra.checked{

    border-color:var(--accent);

    background:rgba(56,182,255,.08);

}

#hintalaskuri .extra input{

    width:20px;

    height:20px;

    margin-top:2px;

    accent-color:var(--accent);

}

#hintalaskuri .extra span{

    display:flex;

    flex-direction:column;

    color:var(--text);

    font-weight:600;

}

#hintalaskuri .extra small{

    margin-top:.35rem;

    color:var(--muted);

    font-weight:400;

    line-height:1.5;

}

/* ==========================================================
   Summary Card
========================================================== */

#hintalaskuri .calculator-sidebar{
    position:static;
    display:flex;
    flex-direction:column;
    gap:1.5rem;

}

#hintalaskuri .price-summary,
#hintalaskuri .quote-card{

    background:white;

    border-radius:20px;

    box-shadow:var(--shadow-soft);

    padding:2rem;

}

.quote-form{

    margin-top:0;

}

#hintalaskuri .price-summary h4{

    margin-bottom:.4rem;

    color:var(--text);

}

#hintalaskuri #price{

    font-size:3rem;

    font-weight:800;

    color:var(--accent);

    line-height:1;

    margin-bottom:.6rem;

}

#hintalaskuri .vat{

    color:var(--muted);

    margin-bottom:1.5rem;

}

#hintalaskuri .summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:.8rem;

}

#hintalaskuri .summary-row span{

    color:var(--muted);

}

#hintalaskuri .summary-row strong{

    color:var(--text);

}

#hintalaskuri #extrasSummary{

    margin-top:1rem;

    color:var(--muted);

}

#hintalaskuri #extrasSummary ul{

    margin:0;

    padding-left:1.2rem;

}

#hintalaskuri #extrasSummary li{

    margin-bottom:.4rem;

}

#hintalaskuri .summary-btn{

    width:100%;

    margin-top:2rem;

    padding:1rem;

    border:none;

    border-radius:12px;

    background:var(--accent);

    color:white;

    font-weight:700;

    transition:.2s;

}

#hintalaskuri .summary-btn:hover{

    background:var(--accent-2);

}

#hintalaskuri .calculator-note{

    margin-top:1rem;

    color:var(--muted);

    font-size:.9rem;

    text-align:center;

    line-height:1.5;

}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:992px){

    #hintalaskuri .calculator-layout{

        grid-template-columns:1fr;

    }

    #hintalaskuri .calculator-sidebar{

        position: static;

    }

}

@media (max-width:576px){

    #hintalaskuri{

        padding:3rem 0;

    }

    #hintalaskuri .price-card{

        padding:1.25rem;

    }

    #hintalaskuri .price-summary{

        padding:1.5rem;

    }

    #hintalaskuri #price{

        font-size:2.5rem;

    }

    #hintalaskuri .counter{

        width:100%;

        max-width:220px;

    }

}

#hintalaskuri .after-tax{

    margin-top:1.5rem;

    padding-top:1rem;

    border-top:1px solid #edf1f4;

}

#hintalaskuri .after-tax span{

    display:block;

    color:var(--muted);

    margin-bottom:.15rem;

    font-size:.95rem;

}

#hintalaskuri #afterTaxPrice{

    color:var(--accent);

    font-size:1.8rem;

    font-weight:600;

}

#hintalaskuri .quote-form{

    margin-top:2rem;

}

#hintalaskuri .quote-form h5{

    margin-bottom:.4rem;

    color:var(--text);

}

#hintalaskuri .quote-text{

    color:var(--muted);

    margin-bottom:1.5rem;

    font-size:.95rem;

}

#hintalaskuri .form-group{

    margin-bottom:1rem;

}

#hintalaskuri .form-group label{

    display:block;

    margin-bottom:.45rem;

    font-weight:600;

    color:var(--text);

}

#hintalaskuri .form-group input,
#hintalaskuri .form-group textarea{

    width:100%;

    padding:.9rem 1rem;

    border:2px solid #dfe8ed;

    border-radius:12px;

    background:white;

    color:var(--text);

    transition:.2s;

    resize:vertical;

}

#hintalaskuri .form-group input:focus,
#hintalaskuri .form-group textarea:focus{

    outline:none;

    border-color:var(--accent);

    box-shadow:0 0 0 4px rgba(56,182,255,.12);

}

#hintalaskuri .form-group textarea{

    min-height:120px;

}