/*=========================================================
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;
    border:none!important;
}

.sc-input input::placeholder{
    color:#aaa;
}

/* ================================
SUMMARY CARD
================================ */

.sc-summary{
    background:#1c1c1b;
    border-radius:22px;
    padding:16px;
    min-height:260px;
    position: relative;
}

/* Inner Result Box */

.summary-box{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

/* Amount Box */

.summary-inner{
    height:120px;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

/* Heading */
.summary-inner small{
    color:#ffffff;
    font-size:14px;
    font-weight:600;
    margin-bottom:12px;
}


/* Bottom Text */

.summary-note{
    width: 90%;
    margin: 0 auto 32px;
    text-align: center;
    color: #b0b0b0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
    position: absolute;
    bottom: 20px;
    padding: 0px 15px;
}

.qc-bottom-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.qc-bottom-text {
    flex: 1;
}

.qc-bottom-button {
    flex-shrink: 0;
}

.qc-bottom-button button {
    padding: 15px 30px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

/*=========================================================
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
=========================================================*/

#step2 .summary-inner{
    height:550px;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:12px;
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 30px;
}

.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;
}



/*=========================================================
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;
    }
}

/*=========================================================
STEP 3
=========================================================*/

#step3 .sc-step-layout{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:30px;
    align-items:start;
}

/*=========================================================
LEFT
=========================================================*/

#step3 .sc-form-area{
    display:flex;
    flex-direction:column;
    gap:22px;
}

/* Full Width Field */
#step3 .sc-full{
    width:100%;
}

/* Middle Row */

#step3 .sc-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}


/*=========================================================
FIELD
=========================================================*/

#step3 .sc-field label{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:600;
    color:#111;
}

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

#step3 .sc-input{
    height:46px;
    display:flex;
    align-items:center;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #E5E5E5;
}

#step3 .sc-input span{
    width:45px;
    text-align:center;
    color:#555;
    font-size:14px;
}


#step3 .sc-input input{
    flex:1;
    height:100%;
    border:0;
    outline:none;
    background:transparent;
    padding:0 15px;
    font-size:14px;
    color:#111;
}

#step3 .sc-input input::placeholder{
    color:#b4b4b4;
}

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

.sc-summary{
    width:100%;
    position: relative;
}

.summary-box{
    background:#1D1D1B;
    border-radius:18px;
    padding:18px;
}

/*=========================================================
SUMMARY ITEMS
=========================================================*/

.sc-summary-inner{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.sc-summary-item{
    background:#2A2A28;
    border-radius:12px;
    padding:18px;
    text-align:center;
}

.sc-summary-item small{
    display:block;
    color:#fff;
    font-size:12px;
    font-weight:600;
    margin-bottom:10px;
}

.sc-summary-item div{
    color:#FFBD00;
    font-size:28px;
    font-weight:700;
}


/*=========================================================
NOTE
=========================================================*/

.sc-summary-note{
    margin-top:18px;
    color:#fff;
    font-size:12px;
    line-height:1.6;
    text-align:center;
}

.sc-summary-note strong{
    color:#FFBD00;
}

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

@media(max-width:992px){
    #step3 .sc-step-layout{
        grid-template-columns:1fr;
    }

    #step3 .sc-row{
        grid-template-columns:1fr;
    }
}

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

#result .sc-section-header{
    margin-bottom:25px;
}

/*=========================================================
TOP BAR
=========================================================*/

#result .sc-result-top{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:15px;
    margin-bottom:25px;
}

/*=========================================================
BUTTONS
=========================================================*/

.sc-btn{
    height:48px;
    padding:0 28px;
    border:0;
    outline:0;
    border-radius:10px;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    transition:.3s;
}

.sc-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
}

.sc-btn-dark{
    background:#1D1D1B;
    color:#fff;
}

.sc-btn-dark:hover:not(:disabled){
    background:#000;
}


.sc-btn-light{
    background:#E9E9E9;
    color:#111;
}

.sc-btn-light:hover:not(:disabled){
    background:#dcdcdc;
}

.qc-bottom-row{
    background: #f4f4f4;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.qc-bottom-text{
    font-size: 24px;
    font-weight: 700;
}

/*=========================================================
RESULT BOX
=========================================================*/

#result .sc-result-box{
    background:#FFBD00;
    border-radius:18px;
    padding:30px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

/*=========================================================
RESULT ITEM
=========================================================*/

#result .sc-result-item{
    text-align:center;
}

#result .sc-result-item small{
    display:block;
    color:#111;
    font-size:13px;
    font-weight:600;
    margin-bottom:12px;
    line-height:1.5;
}

#result .sc-result-item div{
    color:#111;
    font-size:34px;
    font-weight:700;
    line-height:1.2;
}


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

@media(max-width:992px){

    #result .sc-result-top{
        justify-content:center;
        flex-wrap:wrap;
    }
    #result .sc-result-box{
        grid-template-columns:1fr;
        gap:20px;
    }
    .sc-step-info{
        display:block;
    }
}