/*
//Hero Calculator Module
*/

.calculator-ext-split-container{
    container-type: inline-size;
    container-name: calc-module;
    position: relative;
    z-index: 1;
}

.hero-calculator-ext-split-module {
  padding: 60px 0;
  width:100%;
  text-align: center;
      &.running{
         .hero-calculator-ext-split--result{
            filter: blur(5px);
            transition: all 0.2s ease-in-out;
         }
      }
      .hero-calculator-ext-split--result{
            transition: all 0.2s ease-in-out;
      }
      .noUi-horizontal {
        height: 5px;
          .noUi-handle {
              width: 10px;
              height: 10px;
              right: -3px;
              top: -3px;
              background: var(--wp--preset--color--primary);
              border: 1px solid var(--wp--preset--color--primary);
              border-radius: 50%;
              box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
              &:before, &:after{
                display: none;
              }
          }
          .noUi-connect {
              background: var(--wp--preset--color--primary);
          }
      }
      .noUi-target {
          background: rgba(255,255,255, 0.6);
          border-radius: 4px;
          border: none;
        }
    p {
      margin:0;
      &.hero-calculator-ext-split--label{
        font-family: var(--wp--preset--font-family--outfit);
        font-size: 18px;
        font-weight: 500;
        color:var(--wp--preset--color--tertiary);
      }
      &.hero-calculator-ext-split--value{
        color:var(--wp--preset--color--tertiary) !important;
        font-family: var(--wp--preset--font-family--outfit);
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0.48px;
        margin-bottom:13px;
        *{
            color:var(--wp--preset--color--tertiary) !important;
        }
      }
    }
    h3{
      color:var(--wp--preset--color--tertiary) !important;
      font-size: 24px;
      letter-spacing: 0.48px;
      margin:0;
      flex-basis: 100%;
      flex-shrink: 0;
      margin-bottom: 20px;
    }

    

    .calculator-sliderwrap{
        flex:1;
        margin:0 13px;
        position: relative;
            &:before{
                content: '16%';
                position: absolute;
                top: 0;
                left: 0;
                transform: translateY(-100%);
                font-size:14px;
                font-family: var(--wp--preset--font-family--lato);
                color:var(--wp--preset--color--tertiary);
                font-weight: 500;
                opacity: 0.6;
            }
            &:after{
                content: '35.99%';
                position: absolute;
                top: 0;
                right: 0;
                transform: translateY(-100%);
                font-size:14px;
                font-family: var(--wp--preset--font-family--lato);
                color:var(--wp--preset--color--tertiary);
                font-weight: 500;
                opacity: 0.6;
            }
    }

    .res-wrapper{
        display: grid;
        grid-template-columns: repeat(6, auto);
        color:var(--wp--preset--color--tertiary);
        margin-top:10px;
            .box{
                padding:8px 0;
                text-align: center;
                &.bold-box{
                    border-left: solid 1px var(--wp--preset--color--tertiary);
                    border-right: solid 1px var(--wp--preset--color--tertiary);
                    border-top: solid 1px var(--wp--preset--color--tertiary);
                }
            }
            .row {
                display: contents;
                &:last-child{
                    .box{
                        &.bold-box{
                            border-bottom: solid 1px var(--wp--preset--color--tertiary);
                        }
                    }
                }
            }
            & > .row{
                .box{
                    border-top:solid 1px var(--wp--preset--color--tertiary);
                    &:not(:first-child){
                        span{
                            opacity:0.6;
                        }
                        
                    }
                }
            }
            & > .row ~ .row{
                .box{
                    border-top:solid 1px rgba(8, 61, 91, 0.5);
                }
            }

    }

    .calculator-apr{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        width:100%;
            .hero-calculator-ext-split--btn{
                width:30px;
                height:30px;
                background: transparent;
                border: 1px solid var(--wp--preset--color--tertiary);
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease-in-out;
                cursor: pointer;
                &:hover, &:active{
                    background: var(--wp--preset--color--primary);
                    border-color: var(--wp--preset--color--primary);
                }
            }
    }


    .input-cell-ext {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        width:100%;
        padding:0 35px;
    }

    .hero-calculator-row{
        padding:0 35px 20px;
        width:100%;
        position: relative;
    }

    .calc-desc{
        font-size:16px;
        font-weight:300;
        margin: 0 0 20px;
        font-family: var(--wp--preset--font-family--outfit);
        color:var(--wp--preset--color--tertiary);
    }

    .note{
        font-size:14px;
        font-weight:500;
        margin: 20px 0 0;
        font-family: var(--wp--preset--font-family--lato);
        color:var(--wp--preset--color--tertiary);
    }

    .hero-calculator{
        flex-basis: 45%;
    }

    .result-cell-ext {
        padding:20px 40px 0;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

    .hero-calculator-ext-split--result{
        padding:0 40px;
            p{
            text-align: center;
            font-family: var(--wp--preset--font-family--lato);
            font-size: 14px;
                *{
                    color: var(--wp--preset--color--white) !important;
                }
            }
    }

    .slider-result-ext{
        font-family: var(--wp--preset--font-family--outfit);
        font-size: 24px;
        font-weight: 500;
        margin-top: 5px;
        display: block;
        margin-bottom: 13px;
    }




@container calc-module (width <= 540px){
    .hero-calculator-ext-split-module {
        .input-cell-ext {
            padding: 0 15px;
        }
        .result-cell-ext {
            padding: 20px 15px 0;
                .hero-calculator-ext-split--result {
                    padding: 0 0 30px;
                }
        }
    }
}   

@container calc-module (width <= 450px){
    .hero-calculator-ext-split-module{
        &:not(.reverse-ammounts){
            .box:nth-child(6) {
                display: none;
            }
        }
        &.reverse-ammounts{
            .box:nth-child(2) {
                display: none;
            }
        }
        .box {
            font-size: 14px;
        }
        .res-wrapper{
            grid-template-columns: repeat(5, auto);
        }
        .hero-calculator-row {
            padding: 0 0 20px;
                .hero-calculator-ext-split--label{
                    margin-bottom:20px;
                }
        }
        & .hero-calculator-ext-split--form {
            .hero-calculator-submit {
                padding: 0 20px;
            }
            .hero-calculator-ext-split--input {
                max-width: calc(100% - 148px);
            }
        }
    }
}