/*==================================================
    EMI CALCULATOR
    PART 01
===================================================*/



:root {

    --bg: #0d0d0d;
    --card: #171717;
    --card2: #1f1f1f;

    --gold: #caab06;
    --gold-light: #f5d78b;

    --white: #ffffff;

    --text: #e9e9e9;
    --muted: #8b8b8b;

    --border: #2d2d2d;

    --radius: 20px;

    --transition: .35s ease;

    --shadow:
        0 20px 50px rgba(0, 0, 0, .45);

}




/*==========================
Container
==========================*/



.emi-wrapper {

    display: flex;
    gap: 35px;

    align-items: flex-start;

}

/*==========================
Cards
==========================*/

.calculator-card {

    flex: 1;

    background: var(--card);

    border-radius: var(--radius);

    padding: 35px;

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

}

.result-card {

    width: 380px;

    background: linear-gradient(180deg,
            #202020,
            #171717);

    border-radius: var(--radius);

    border: 1px solid var(--border);

    padding: 35px;

    position: sticky;

    /* top: 30px; */

    box-shadow: var(--shadow);

}

/*==========================
Fields
==========================*/

.field {

    margin-bottom: 35px;

}

.small-field {

    margin-bottom: 28px;

}

.field-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 5px;

}

.field-header h2 {

    font-size: 20px;

    color: var(--gold);

    margin-top: 6px;

    font-weight: 600;

    line-height: 1.2;

}

.field-header label {

    color: #cfcfcf;

    font-size: 14px;

    font-weight: 500;

    letter-spacing: .3px;

}

/*==========================
Input
==========================*/

.dark-input {

    width: 180px;

    height: 50px;

    border-radius: 12px;

    border: 1px solid var(--border);

    background: #111;

    color: #fff;

    outline: none;

    text-align: right;

    padding: 0 16px;

    font-size: 16px;

    transition: var(--transition);

}

.dark-input:focus {

    border-color: var(--gold);

    box-shadow:
        0 0 0 3px rgba(212, 166, 79, .15);

}

.dark-input[readonly] {

    background: #1c1c1c;

    color: #bdbdbd;

}

/*==========================
Tenure Switch
==========================*/

.tenure-mode {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 25px;

    padding-top: 25px;

    border-top: 1px solid var(--border);

}

.tenure-mode span {

    color: #cfcfcf;

    font-size: 15px;

}

.tenure-mode label {

    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;

    color: #fff;

    font-size: 15px;

}

.tenure-mode input {

    accent-color: var(--gold);

}

/*==========================
Result Panel
==========================*/

.result-card h4 {

    color: #cfcfcf;

    font-size: 16px;

    font-weight: 500;

}

.emi-value {

    font-size: 44px;

    color: var(--gold);

    font-weight: 700;

    margin: 15px 0 28px;

    line-height: 1.2;

}

.divider {

    height: 1px;

    background: var(--border);

    margin-bottom: 25px;

}

/*==========================
Result Rows
==========================*/

.result-box,
.result-item {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 18px 0;

}

.result-box {

    border-bottom: 1px solid var(--border);

}

.result-item:not(:last-child) {

    border-bottom: 1px solid var(--border);

}

.result-box span,
.result-item span {

    display: block;

    color: #bdbdbd;

    font-size: 14px;

    margin-bottom: 5px;

}

.result-box h3,
.result-item h3 {

    font-size: 23px;

    font-weight: 600;

    color: #fff;

}

.result-box .icon, .result-item .icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #242424;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 20px;
    flex-shrink: 0;
}
.wpo-about-area.calcSec {background-color: #fff;}

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

@media(max-width:1100px) {

    .emi-wrapper {

        flex-direction: column;

    }

    .result-card {

        width: 100%;

        position: relative;

        top: 0;

    }

}

@media(max-width:768px) {

    .calculator-card,
    .result-card {

        padding: 25px;

    }

    .field-header {

        flex-direction: column;

        gap: 15px;

    }

    .dark-input {

        width: 100%;

    }

    .field-header h2 {

        font-size: 24px;

    }

    .emi-value {

        font-size: 34px;

    }

}

@media(max-width:480px) {

   

    .calculator-card,
    .result-card {

        padding: 18px;

        border-radius: 15px;

    }

    .result-box h3,
    .result-item h3 {

        font-size: 18px;

    }

}


/*=========================================
    RANGE SLIDERS
=========================================*/

input[type="range"] {

    width: 100%;
    height: 8px;

    appearance: none;
    -webkit-appearance: none;

    border-radius: 20px;

    outline: none;

    cursor: pointer;

    margin-top: 15px;

    background:
        linear-gradient(to right,
            var(--gold) 0%,
            var(--gold) var(--progress, 40%),
            #3a3a3a var(--progress, 40%),
            #3a3a3a 100%);

    transition: .25s;

}

/* Chrome */

input[type="range"]::-webkit-slider-thumb {

    appearance: none;
    -webkit-appearance: none;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: var(--gold);

    border: 4px solid #fff;

    cursor: pointer;

    transition: .3s;

    box-shadow:
        0 0 0 5px rgba(212, 166, 79, .18);

}

input[type="range"]::-webkit-slider-thumb:hover {

    transform: scale(1.12);

}

/* Firefox */

input[type="range"]::-moz-range-thumb {

    width: 22px;
    height: 22px;

    border: none;

    border-radius: 50%;

    background: var(--gold);

    cursor: pointer;

}


/*=========================================
    RANGE LABELS
=========================================*/

.range-labels {

    display: flex;

    justify-content: space-between;

    margin-top: 10px;

    color: #9f9f9f;

    font-size: 13px;

}


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

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

    -webkit-appearance: none;

    margin: 0;

}

.dark-input[type=number] {

    appearance: textfield;
    -moz-appearance: textfield;

}

.dark-input:hover {

    border-color: #4a4a4a;

}

.dark-input::placeholder {

    color: #777;

}





/*=========================================
    RESULT VALUE ANIMATION
=========================================*/

.result-item h3,
.result-box h3,
.emi-value {

    transition: .25s;

}

.result-item:hover h3,
.result-box:hover h3 {

    color: var(--gold);

}


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

.field {

    position: relative;

}

.field::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -18px;

    height: 1px;

    background: rgba(255, 255, 255, .05);

}

.field:last-of-type::after {

    display: none;

}


/*=========================================
    GOLD GLOW
=========================================*/

.calculator-card::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: 20px;

    background:

        radial-gradient(circle at top right,
            rgba(212, 166, 79, .08),
            transparent 40%);

}

.calculator-card {

    position: relative;

    overflow: hidden;

}

.result-card {

    position: relative;

    overflow: hidden;

}

.result-card::before {

    content: "";

    position: absolute;

    top: -80px;
    right: -80px;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(212, 166, 79, .12),
            transparent 70%);

}



/*=========================================
    SCROLLBAR
=========================================*/

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #111;

}

::-webkit-scrollbar-thumb {

    background: #444;

    border-radius: 20px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--gold);

}


/*=========================================
    BUTTON STYLE
=========================================*/



button:focus,
input:focus {

    outline: none;

}


/*=========================================
    SMALL SCREEN
=========================================*/

@media(max-width:768px) {

    .field {

        margin-bottom: 28px;

    }

    .field-header {

        margin-bottom: 15px;

    }

    .result-box .icon {

        width: 48px;
        height: 48px;

        font-size: 18px;

    }

    .tenure-mode {

        flex-wrap: wrap;

        gap: 12px;

    }

}


/*=========================================
    EXTRA SMALL
=========================================*/

@media(max-width:480px) {

    .range-labels {

        font-size: 11px;

    }

    .field-header h2 {

        font-size: 22px;

    }

    .dark-input {

        height: 46px;

        font-size: 15px;

    }

    .emi-value {

        font-size: 30px;

    }

    .result-item {

        gap: 12px;

    }

}


/*=========================================
    DESKTOP POLISH
=========================================*/

@media(min-width:1200px) {

    .calculator-card {

        padding: 42px;

    }

    .result-card {

        padding: 42px;

    }

    .field {

        margin-bottom: 38px;

    }

}




/*====================================
RENT VS BUY
====================================*/

.rent-buy-section{

    margin-top:70px;

}

.section-title{

    text-align:center;

    color:var(--gold);

    font-size:32px;

    margin-bottom:10px;

    font-weight:600;

}

.section-divider{

    width:170px;

    height:2px;

    background:var(--gold);

    margin:0 auto 40px;

    position:relative;

}

.section-divider::after{

    content:"";

    width:10px;
    height:10px;

    border-radius:50%;

    background:var(--gold);

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

}

.rent-buy-grid{

    display:grid;

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

    gap:25px;

}

.compare-card{

    background:#171717;

    border:1px solid #2d2d2d;

    border-radius:18px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.compare-card.active{

    border:1px solid var(--gold);

}

.compare-card h4{

    color:#d4d4d4;

    margin-bottom:25px;

    font-size:16px;

}

.compare-card h2{

    color:var(--gold);

    font-size:48px;

    margin-top:10px;

}

.compare-card select{

    width:100%;

    height:55px;

    background:#101010;

    color:#fff;

    border:1px solid #333;

    border-radius:12px;

    text-align:center;

    font-size:22px;

    outline:none;

}

.home-icon{

    font-size:40px;

    color:var(--gold);

}

.bottom-text{

    margin-top:35px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

}

.bottom-text span{

    width:90px;

    height:2px;

    background:var(--gold);

    position:relative;

}

.bottom-text span::after{

    content:"";

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--gold);

    position:absolute;

    right:-5px;
    top:50%;

    transform:translateY(-50%);

}

.bottom-text h3{

    color:var(--gold);

    font-size:28px;

    font-weight:500;

}

@media(max-width:900px){

.rent-buy-grid{

grid-template-columns:1fr;

}

.compare-card h2{

font-size:36px;

}

.bottom-text{

flex-direction:column;

}

.bottom-text span{

display:none;

}

}