/*=========================================================
  SOUMYA'S CALCULATOR
  UPDATED CSS - PART 1
=========================================================*/


/*=========================================================
GLOBAL
=========================================================*/

*,
*::before,
*::after{
    box-sizing:border-box;
}


body{
    margin:0;
    padding:0;
}



/*=========================================================
WRAPPER
=========================================================*/

.sc-wrapper{

    width:100%;

    max-width:1380px;

    margin:50px auto;

    padding:0 20px;

}



/*=========================================================
SECTION
=========================================================*/

.sc-section{

    background:#F4F4F4;

    border-radius:28px;

    padding:40px;

    margin-bottom:25px;

    transition:.35s;

    overflow:hidden;

}


.sc-section.active{

    opacity:1;

}


.sc-section.sc-locked{

    opacity:.75;

}

/*=========================================================
 HEADER
=========================================================*/


.sc-section-header{

    margin-bottom:30px;

}


.sc-step-info{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}



.sc-header-left h2{

    margin:0;

    font-size:26px;

    line-height:1.3;

    font-weight:700;

    color:#111;

}



.sc-header-right{

    max-width:350px;

}



.sc-header-right p{

    margin:0;

    font-size:12px;

    line-height:1.5;

    color:#666;

}



/*=========================================================
 MAIN LAYOUT
=========================================================*/


.sc-step-layout{

    display:grid;

    grid-template-columns:1fr 330px;

    gap:28px;

    align-items:start;

}



/*=========================================================
 INPUT GRID
=========================================================*/


.sc-grid{

    display:grid;

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

    gap:22px 18px;

}



.sc-field label{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    font-weight:600;

    color:#111;

}



/*=========================================================
 INPUT BOX
=========================================================*/


.sc-input{

    height:45px;

    display:flex;

    align-items:center;

    background:#fff;

    border-radius:12px;

    overflow:hidden;

}



.sc-input span{

    width:45px;

    text-align:center;

    font-size:15px;

    color:#555;

}



.sc-input input{

    flex:1;

    height:100%;

    border:0;

    outline:none;

    background:transparent;

    font-size:14px;

    color:#111;

    padding:0 12px;

}



.sc-input input::placeholder{

    color:#aaa;

}



/*=========================================================
 RIGHT SUMMARY
=========================================================*/


.sc-summary{

    width:100%;

}



.summary-box{

    background:#1d1d1b;

    border-radius:18px;

    padding:12px;

    height:245px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}



.summary-box::before{

    content:"";

    position:absolute;

}



.summary-box small{

    width:100%;

    padding:28px 15px;

    border:1px solid #3a3a38;

    border-radius:10px;

    text-align:center;

    color:#fff;

    font-size:13px;

    font-weight:600;

    margin-bottom:0;

}



#step1Total{

    width:100%;

    text-align:center;

    color:#ffbd00;

    font-size:32px;

    font-weight:700;

    margin-top:-45px;

    transform:translateY(20px);

}



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


@media(max-width:992px){

    .sc-step-layout{

        grid-template-columns:1fr;

    }


    .sc-grid{

        grid-template-columns:1fr;

    }


    .sc-header-right{

        max-width:100%;

    }

}

/*=========================================================
  SOUMYA'S CALCULATOR
  UPDATED CSS - PART 2
=========================================================*/


/*=========================================================
STEP ICON
=========================================================*/

.sc-step-number{

    width:42px;

    height:42px;

    background:#1d1d1b;

    color:#ffbd00;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    flex-shrink:0;

}


.sc-header-left{

    display:flex;

    align-items:center;

    gap:15px;

}



/*=========================================================
STEP 2 LOCKED STATE
=========================================================*/


.sc-locked .sc-input input{

    cursor:not-allowed;

    opacity:.6;

}


.sc-collapsed .sc-section-body{

    opacity:.75;

}



/*=========================================================
YEARLY VALUE
=========================================================*/


.sc-yearly{

    margin-top:10px;

    height:32px;

    background:#ffffff;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 12px;

}



.sc-yearly span{

    font-size:12px;

    font-weight:500;

    color:#777;

}



.sc-yearly strong{

    font-size:13px;

    font-weight:700;

    color:#111;

}



/*=========================================================
STEP 2 SUMMARY
=========================================================*/


#monthlyTotal,
#yearlyTotal,
#grandTotal{


    width:100%;

    text-align:center;

    color:#ffbd00;

    font-size:28px;

    font-weight:700;

    margin-top:-38px;

    transform:translateY(20px);

}



.summary-box hr{

    width:80%;

    border:0;

    border-top:1px solid #3a3a38;

    margin:18px 0;

}



/*=========================================================
SUMMARY HEIGHT FOR MULTIPLE VALUES
=========================================================*/


#step2 .summary-box{

    height:auto;

    min-height:360px;

    justify-content:flex-start;

    padding-top:15px;

}



#step2 .summary-box small{

    padding:18px 10px;

}



/*=========================================================
INPUT NUMBER REMOVE ARROWS
=========================================================*/


.step2-input::-webkit-inner-spin-button,
.step2-input::-webkit-outer-spin-button{

    -webkit-appearance:none;

    margin:0;

}


.step2-input{

    -moz-appearance:textfield;

}

.sc-collapsed .sc-section-body{
    display:none;
}

.sc-locked{
    cursor:not-allowed;
}


/*=========================================================
MOBILE
=========================================================*/


@media(max-width:992px){


    #step2 .summary-box{

        min-height:auto;

    }


    #monthlyTotal,
    #yearlyTotal,
    #grandTotal{

        font-size:24px;

    }

}