/*
//Hero Calculator Module
*/

.calculator-container{
    container-type: inline-size;
    container-name: calc-module;
}

.hero-calculator-module {
  color: #B9DCFF; 
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap:15px;
  width:100%;
      .noUi-horizontal {
        height: 5px;
          .noUi-handle {
              width: 10px;
              height: 10px;
              right: -3px;
              top: -3px;
              background: #fff;
              border: 1px solid #8C9DAB;
              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--secondary);
          }
      }
      .noUi-target {
          background: rgba(255,255,255, 0.6);
          border-radius: 4px;
          border: none;
        }
    p {
      margin:0;
      &.hero-calculator--label{
        font-family: var(--wp--preset--font-family--lato);
        font-size: 14px;
        font-weight: 400;
        color:var(--wp--preset--color--light-blue);
      }
      &.hero-calculator--value{
        color: #FFF !important;
        font-family: var(--wp--preset--font-family--outfit);
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0.48px;
        margin-bottom:13px;
        *{
            color: #FFF !important;
        }
      }
    }
    h3{
      color: #FFF !important;
      font-size: 24px;
      letter-spacing: 0.48px;
      margin:0;
      flex-basis: 100%;
      flex-shrink: 0;
      margin-bottom: 20px;
    }


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

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

    .result-cell {
        flex-basis: 35%;
        flex-grow: 1;
        flex-shrink: 0;
        text-align: center;
    }
}

    .hero-calculator--result{
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    padding: 12px 19px 19px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        p{
        text-align: center;
        font-family: var(--wp--preset--font-family--lato);
        font-size: 14px;
            *{
                color: var(--wp--preset--color--white) !important;
            }
        }
    }

    .slider-result{
    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 <= 585px){
    .hero-calculator-module {
        flex-direction: column;
        padding-top:24px;
        padding-bottom:39px;
        gap:39px;
    }
    .hero-calculator--result{
        min-width: 291px;
    }
}   

@container calc-module (width <= 387px){
    
    .hero-calculator--result, .input-cell {
        width: 100%;
    }
    .result-cell {
        width:100%
    }
    .hero-calculator--result-label br {
        display: none;
    }
    .hero-calculator--result{
        min-width: 240px;
            .wp-block-button{
                display: inline-block;
            }
    }
}


@media (max-width: 480px){
    .hero-calculator {
        flex-basis: 100%;
          &:not(:last-child) {
            margin-bottom: 17px;
          }
    }
}