/* ============================================================
   CLAGE Hot Water Calculator Styles
   ============================================================ */

.c-hero {
    background-image: url("../img/calculator/hero-calculator.jpg");
    h1 {
        font-size: 50px;
        color: #000;
        padding: 120px 0;
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .c-hero h1 {
        font-size: 25px;
    }
}

.c-container {
    padding-inline: 20px;
}

section.calculator {
    padding-top: 50px;
    padding-bottom: 50px;
}

.calculator-container {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-rows: auto 1fr 1fr;
}

.calculator-container .calculator-row {
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dotted rgb(0, 0, 0);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 30px;
}

.calculator-container .calculator-row .calculator-column {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calculator-container .calculator-row h2 {
    font-size: 22px;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
}

.calculator-container .calculator-row:nth-child(1) .title {
    overflow: hidden;
}

.calculator-container .calculator-row:nth-child(1) .icon {
    text-align: left;
    padding-left: 7%;
}

.calculator-container .calculator-row:nth-child(1) .icon img {
    height: 38px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* ── Slider column ── */
.calculator-container .calculator-row:nth-child(1) .slider-column {
    height: 400px;
    position: relative;
}

.calculator-container .calculator-row:nth-child(1) .slider-column .locker {
    width: 17px;
    height: 23px;
    cursor: pointer;
    bottom: 2px;
    left: 0%;
    position: absolute;
    background-image: url("../img/calculator/unlocked.svg");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 99;
    display: inline-block;
}

.calculator-container .calculator-row:nth-child(1) .slider-column.locked .locker {
    background-image: url("../img/calculator/locked.svg");
}

.calculator-container .calculator-row:nth-child(1) .slider-column.locked toolcool-range-slider {
    pointer-events: none;
}

/* Canvas scale lines */
.calculator-container .calculator-row:nth-child(1) .slider-column .slider-lines {
    width: 85%;
    left: 15%;
    top: 0px;
    height: 100%;
    position: absolute;
}

/* Gradient overlay (top fade) */
.calculator-container .calculator-row:nth-child(1) .slider-column .canvas-overlay {
    width: 52%;
    left: 2%;
    top: 0px;
    height: 100%;
    position: absolute;
    background: transparent;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 33%, rgba(255, 255, 255, 0) 100%);
}

/* Typical-use icons beside sliders */
.calculator-container .calculator-row:nth-child(1) .slider-column .typicals {
    width: 33%;
    height: 100%;
    top: 0px;
    left: 67%;
    position: absolute;
}

.calculator-container .calculator-row:nth-child(1) .slider-column .typicals img {
    width: 55%;
    position: absolute;
    left: 0px;
}

/* toolcool web component */
toolcool-range-slider {
    width: 80%;
    max-width: 120px;
    display: inline-block;
    height: 100%;
    position: absolute;
    left: 18%;
    top: 0px;
}

.type-vertical .range-slider .pointer {
    width: 120%;
    left: 0% !important;
}

.panel {
    background: transparent !important;
}

/* ── Value row ── */
.calculator-container .calculator-row:nth-child(1) .value {
    color: rgb(0, 0, 0);
    font-size: 28px;
    padding-top: 20px;
}

.calculator-container .calculator-row:nth-child(1) .value span {
    font-size: larger;
}

/* ── Input rows ── */
.calculator-container .calculator-row:nth-child(3) {
    grid-template-columns: 1fr 1fr 1fr;
}

.calculator-container .calculator-row .calculator-column.padding-right {
    padding-right: 14%;
}

/* Cold-water row icon */
.calculator-container .calculator-row:nth-child(4) .calculator-column:first-child {
    background-image: url("../img/calculator/temp-blue.svg");
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    padding-left: 30px;
}

/* Instructions row */
.calculator-container .calculator-row:last-child {
    padding-top: 20px;
    display: inline;
    border-bottom: none;
}

.calculator-container .calculator-row:last-child p {
    margin: 0px;
}

.calculator-container .calculator-row:last-child h3 {
    margin-top: 0px;
    margin-bottom: 7px;
    font-size: 24px;
}

/* ── Text inputs ── */
.calculator-container input[type="text"] {
    width: 100%;
    font-size: 16px;
    border: none;
    outline: none;
}

.calculator-container input[type="text"].editable {
    background-color: #F2F1F0;
}

.calculator-container .bold {
    font-weight: 600;
}

/* ── rangeslider pointer shape ── */
.range-slider-box {
    height: 100%;
}

.type-vertical .range-slider {
    height: 100%;
    width: 100%;
}

.type-vertical .range-slider .pointer {
    width: 100%;
}


/* ── Responsive ── */
@media only screen and (max-width: 650px) {
    .calculator-container input[type="text"] {
        font-size: 14px;
    }

    .calculator-container .calculator-row {
        column-gap: 16px;
    }

    .calculator-container .calculator-row h2 {
        font-size: 16px !important;
    }

    .calculator-container .calculator-row:nth-child(1) .value {
        font-size: 20px;
    }

    .calculator-container .calculator-row:nth-child(1) .slider-column {
        height: 240px;
    }
}

@media only screen and (max-width: 360px) {
    .calculator-container input[type="text"] {
        font-size: 12px;
    }
}