/* =========================
BOXT SOLAR PREMIUM UI
========================= */

#boxt-app .step{
display:none !important;
animation:fadeBox .35s ease !important;
}

#boxt-app .step.active{
display:block !important;
}

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

/* WRAPPER */
#boxt-app{
max-width:760px !important;
margin:60px auto !important;
padding:56px !important;
background:#ffffff !important;
border-radius:34px !important;
box-shadow:
0 10px 35px rgba(0,0,0,.06) !important,
0 3px 14px rgba(0,0,0,.04) !important;
font-family:Inter,sans-serif !important;
}

/* HEADINGS */
#boxt-app h2{
font-size:25px !important;
line-height:1.1 !important;
font-weight:700 !important;
letter-spacing:-1.4px !important;
color:#243248 !important;
margin:0 0 34px !important;
max-width:650px !important;
}

/* QUESTION BADGE */
#boxt-app .step-badge{
display:inline-block !important;
background:#f6e7e3 !important;
color:#243248 !important;
padding:8px 18px !important;
border-radius:50px !important;
font-size:14px !important;
font-weight:600 !important;
margin-bottom:24px !important;
}

/* INPUTS */
#boxt-app input{
width:100% !important;
height:66px !important;
padding:0 22px !important;
border:2px solid #dce4ec !important;
border-radius:15px !important;
font-size:18px !important;
background:#fff !important;
margin-bottom:16px !important;
outline:none !important;
transition:.25s !important;
box-sizing:border-box !important;
}

#boxt-app input:focus{
border-color:#8AC53F !important;
box-shadow:0 0 0 4px rgba(138,197,63,.14)!important;
}

/* OPTION CARDS */
#boxt-app .card,
#boxt-app .card-custom{
background:#f4f6f9 !important;
border:2px solid #e5ebf1 !important;
border-radius:18px !important;
padding:15px 22px !important;
margin-bottom:12px !important;
display:flex !important;
align-items:flex-start !important;
gap:15px !important;
cursor:pointer !important;
font-size:18px !important;
font-weight:700 !important;
color:#243248 !important;
box-shadow:none !important;
transition:.25s !important;
}

#boxt-app .card:hover,
#boxt-app .card-custom:hover{
border-color:#d2dae3 !important;
transform:none !important;
}

#boxt-app .card.active,
#boxt-app .card-custom.active{
background:#ffffff !important;
border-color:#8AC53F !important;
box-shadow:0 0 0 4px rgba(138,197,63,.13)!important;
}

#boxt-app .card input[type=radio],
#boxt-app .card-custom input[type=radio]{
width:auto !important;
height:auto !important;
margin-top:6px !important;
transform:scale(1.3)!important;
accent-color:#8AC53F!important;
}



.card{
padding:16px !important;
min-height:auto!important;
}

.card label,
.card div{
font-size:16px!important;
}

#boxt-app h2{
font-size:25px!important;
line-height:1.1;
}



.sign-custom{
    color:#707a86 !important;
}

.sign-custom:hover{
    color:#20324a !important;
}



/* option descriptions */
#boxt-app .option-sub{
display:block !important;
font-size:15px !important;
font-weight:400 !important;
color:#707a86 !important;
}

/* INFO BOX */
#boxt-app .solar-info-box{
margin-top:18px !important;
background:#eaf3fb !important;
border-radius:14px !important;
padding:16px 18px !important;
font-size:15px !important;
font-weight:500 !important;
color:#20324a !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
}

#boxt-app .solar-info-box:before{
content:"ⓘ" !important;
opacity:.75 !important;
}

/* BUTTONS */
#boxt-app button{
border:none !important;
cursor:pointer !important;
transition:.25s !important;
font-weight:600 !important;
border-radius:14px !important;
}

/* NEXT */
#boxt-app .next,
#boxt-app .btn-custom{
margin-top:28px !important;
width:185px !important;
height:58px !important;
background:#fff !important;
color:#c23368 !important;
border:1px solid #c23368 !important;
font-size:18px !important;
box-shadow:none !important;
}

#boxt-app .next:hover:enabled,
#boxt-app .btn-custom:hover{
background:#c23368 !important;
color:#fff !important;
}

#boxt-app .next:disabled{
background:#e0e5ea !important;
border-color:#e0e5ea !important;
color:#8b95a1 !important;
cursor:not-allowed !important;
}

/* PRIMARY CTA */
#boxt-app .primary{
width:100% !important;
height:64px !important;
margin-top:20px !important;
background:#8AC53F !important;
color:#fff !important;
font-size:19px !important;
box-shadow:0 12px 24px rgba(138,197,63,.25)!important;
}

#boxt-app .primary:hover{
transform:translateY(-2px)!important;
}

/* SECONDARY */
#boxt-app .secondary{
width:100% !important;
height:62px !important;
margin-top:14px !important;
background:#fff !important;
border:2px solid #243248 !important;
color:#243248 !important;
font-size:18px !important;
}

#boxt-app .secondary:hover{
background:#243248 !important;
color:#fff !important;
}

/* COUNTER */
#boxt-app .counter{
margin-top:16px !important;
display:flex !important;
align-items:center !important;
gap:14px !important;
}


.card:hover{
border-color:#8AC53F !important;
}

.card.active{
border-color:#8AC53F !important;
box-shadow:0 0 0 3px rgba(138,197,63,.2)!important;
}






.counter button{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:44px !important;
height:44px !important;
font-size:28px !important;
font-weight:700 !important;
line-height:1 !important;
}





#boxt-app .counter button{
width:44px !important;
height:44px !important;
background:#fff !important;
border:1px solid #d8dfe6 !important;
border-radius:12px !important;
font-size:24px !important;
}

#boxt-app #panelCount{
font-size:22px !important;
font-weight:700 !important;
}

/* MODAL */
#boxt-app .modal{
display:none !important;
position:fixed !important;
inset:0 !important;
background:rgba(0,0,0,.45)!important;
justify-content:center !important;
align-items:center !important;
z-index:9999 !important;
}

#boxt-app .modal.active{
display:flex !important;
}

#boxt-app .modal-box{
background:#fff !important;
padding:44px !important;
border-radius:26px !important;
max-width:520px !important;
width:92% !important;
text-align:center !important;
box-shadow:0 22px 50px rgba(0,0,0,.15)!important;
}

#boxt-app .modal-box h3{
font-size:34px !important;
margin-bottom:14px !important;
color:#243248 !important;
}

#boxt-app .modal-box p{
font-size:18px !important;
color:#67717d !important;
margin-bottom:24px !important;
}

/* postcode search style */
#boxt-app .address-search-btn{
background:#f3f4f6 !important;
color:#243248 !important;
border-radius:12px !important;
}





.drawer-inner{
background:#fff;
width:100%;
max-width:900px;
height:80vh;
border-radius:30px 30px 0 0;
padding:40px;
position:relative;
overflow:auto;
transform:translateY(100%);
transition:.3s ease;
}

.finance-drawer.active .drawer-inner{
transform:translateY(0);
}

.drawer-inner button{
display:none;
}





.modal-close{
position:absolute;
right:20px;
top:20px;
font-size:28px;
cursor:pointer;
}


.finance-drawer{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.4);
z-index:99999;
justify-content:center;
align-items:flex-end;
}

.finance-drawer.active{
display:flex;
}

.drawer-inner{
background:#fff;
width:100%;
max-width:900px;
height:80vh;
border-radius:30px 30px 0 0;
padding:40px;
position:relative;
overflow:auto;
margin-top:20vh;
}

.modal-close{
position:absolute;
top:20px;
right:20px;
font-size:28px;
cursor:pointer;
}

.months-grid{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:20px;
}

.months-grid button{
padding:12px 18px;
border:1px solid #ccc;
background:#fff;
cursor:pointer;
}

.months-grid button.active{
background:#6bbf59;
color:#fff;
}

.result-box{
background:#f3f4f6;
padding:30px;
margin-top:30px;
text-align:center;
}


.finance-breakdown{
margin-top:40px;
background:#f7f7f7;
padding:30px;
border-radius:12px;
}

.finance-breakdown .grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
}

.finance-breakdown .grid div{
padding:10px 0;
border-bottom:1px dashed #ccc;
}









/* MOBILE */
@media(max-width:768px){

#boxt-app{
margin:20px 14px !important;
padding:30px 22px !important;
border-radius:24px !important;
}

#boxt-app h2{
font-size:24px !important;
}

#boxt-app .card,
#boxt-app .card-custom{
font-size:12px !important;
padding:15px !important;
}

#boxt-app .option-sub{
font-size:15px !important;
}

#boxt-app .next{
width:100% !important;
}

}