.calculator-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    padding: 25px;
    
    border-radius: 12px;
    /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);*/
    max-width: 1400px;
    margin: auto;
    flex-wrap: nowrap;
    width: 100%;

   /* background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, 0.8)), url(../img/bg_calc.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;*/
}

/* Left - Inputs */
.calculator-left {
    flex: 1;
    min-width: 300px;
}


/* Inputs */
.form-group {
    margin-bottom: 40px;
}

.slider-wrapper label {
    min-width: 120px;
    margin: 0;
    font-weight: 500;
    display: block;
    color: black;
}


.slider-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.pincode {
    flex: 1;
    min-width: 0; 
    padding: 8px;
    border: none;
    outline:none;

}

    .pincode::-webkit-inner-spin-button,
    .pincode::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.pincode {
    -moz-appearance: textfield;
}


.crosshair-icon {
    font-size: 18px;
    cursor: pointer;
}

.rangevalueinput {
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 5px;
    transition: box-shadow 0.2s ease;
    color: #00b386;
    width: 100px;
}

    .input-with-icon {
    position: relative;
    display: inline-block;
}

.slider-wrapper input::placeholder {
    color: black;
}

@media screen and (min-width: 900px) {
    .slider-wrapper {
        flex-wrap: nowrap;
        gap: 10px;
    }

        .slider-wrapper label {
            white-space: nowrap;
            margin-right: 8px;
        }

    .range {
        flex: 1;
        min-width: 120px;
    }

    .rangevalueinput {
        width: 100px;
        flex-shrink: 0;
    }

    .slider-wrapper .btn {
        flex-shrink: 0;
    }

    .crosshair-icon {
        flex-shrink: 0;
    }
}

/* ✅ Mobile: 480px and below */
@media screen and (max-width: 480px) {
    .calculator-container {
        padding: 15px !important;
        gap: 20px;
    }

        .slider-wrapper label {
        min-width: unset;
        width: 100%;
        margin-bottom: 4px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    input[type=number],
    .slider-wrapper input[type=number] {
        width: 100% !important;
    }

    .range{
        width:100%;
    }
/*
    .input-with-icon {
        width: 100%;
    }
*/
    .currency-icon {
        font-size: 13px;
    }

    h2 {
        font-size: 18px;
        margin-bottom: 15px;
    }

}

/*average Monthly bill design*/

.bill-box {
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: 0.3s ease;
    display: inline-block;
    background-color: #f8f9fa;
    font-weight: 500;
    user-select: none;
    color: #002e52;
}

    .bill-box:hover {
        border-color: #acb2b9;
        background-color: #e9ecef;
    }

    .bill-box input[type="radio"]:checked + span {
        background-color: #545b62;
        color: white;
        padding: 6px 12px;
        border-radius: 5px;
        font-weight: 600;
    }

.form-section {
  /*  display: flex;*/
    align-items: center;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 15px;
    background:white;
}

.range {
    display: flex;
    align-items: center;
    max-width: 500px;
    width: 100%;
}
input[type="range"] {
    font-size: 1.5rem;
    width: 12.5em;
}

input[type="range"] {
    color: #006eaf;
    --thumb-height: 0.5em;
    --track-height: 0.125em;
    --track-color: rgba(0, 0, 0, 0.2);
    --brightness-hover: 180%;
    --brightness-down: 80%;
    --clip-edges: 0.125em;
}

input[type="range"] {
    position: relative;
    background: #fff0;
    overflow: hidden;
    border-radius:4px;
    width:100%;
}

    input[type="range"]:active {
        cursor: grabbing;
    }

    input[type="range"]:disabled {
        filter: grayscale(1);
        opacity: 0.3;
        cursor: not-allowed;
    }

    input[type="range"],
    input[type="range"]::-webkit-slider-runnable-track,
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        transition: all ease 100ms;
        height: var(--thumb-height);
    }

        input[type="range"]::-webkit-slider-runnable-track,
        input[type="range"]::-webkit-slider-thumb {
            position: relative;

        }

        input[type="range"]::-webkit-slider-thumb {
            --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
            --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
            --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
            --clip-further: calc(100% + 1px);
            --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
            width: var(--thumb-width, var(--thumb-height));
            background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
            background-color: currentColor;
            box-shadow: var(--box-fill);
            border-radius: var(--thumb-width, var(--thumb-height));
            filter: brightness(100%);
            clip-path: polygon( 100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further) );
        }

        input[type="range"]:hover::-webkit-slider-thumb {
            background-color: #006eaf;
            box-shadow: -407px 0 0 400px #006eaf;
            filter: none;
            cursor: grab;
        }

        input[type="range"]:active::-webkit-slider-thumb {
            filter: brightness(var(--brightness-down));
            cursor: grabbing;
        }

        input[type="range"]::-webkit-slider-runnable-track {
            background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
        }

        input[type="range"]:disabled::-webkit-slider-thumb {
            cursor: not-allowed;
        }

/* Tablet: up to 1024px */
@media screen and (max-width: 1024px) {
    .calculator-container {
        flex-direction: column;
        align-items: stretch;
        background: var(--bs-light) !important
    }

    .calculator-left,
    .calculator-right {
        width: 100% !important;
        min-width: unset;
    }
}