@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;800&display=swap');

* {
    padding: 0;
    margin: 0;
}

:root{
    --soft-cyan: 174, 77%, 80%;
    --strong-cyan: 174, 86%, 45%;
    --light-grayish-red: 14, 92%, 95%;
    --light-red: 15, 100%, 70%;
    --pale-blue: 226, 100%, 87%;

    --white: 0, 0%, 100%;
    --very-pale-blue: 230, 100%, 99%;
    --light-grayish-blue-bar: 224, 65%, 95%;
    --light-grayish-blue-toggle: 223, 50%, 87%;
    --grayish-blue: 225, 20%, 60%;
    --dark-desaturated-blue: 227, 35%, 25%;

    --switch-width: 3rem;
    --switch-height: 1.5rem;
    --slider-size: calc(var(--switch-height) * 0.70);
    --space: calc((var(--switch-height) - var(--slider-size)) / 2);
    --movement: calc(var(--switch-width) - var(--slider-size) - (var(--space) * 2));
}

body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Manrope', sans-serif;
    overflow-x: hidden;
    min-height: 100svh;
    width: 100svw;
    background-image: url(../images/bg-pattern.svg);
    background-repeat: no-repeat;
}

header{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-image: url(../images/pattern-circles.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 1rem 0rem;
    padding: 1.5rem 0rem;
    color: hsl(var(--grayish-blue));
}

header h1{
    font-size: 1.3rem;
    font-weight: 800;
    color: hsl(var(--dark-desaturated-blue));
}

header h6{
    font-size: 0.8rem;
    font-weight: 600;
}

body>main{
    display: grid;
    place-items: center;
    width: 100%;
}

.component{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    aspect-ratio: 2/3;
    width: min(95%, 22rem);
    background-color: hsl(var(--white));
    box-shadow: 0px 0.4rem 1rem 0.2rem hsla(var(--dark-desaturated-blue), 0.3);
}

.component>main{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 90%;
    height: 60%;
}

.component>main>div.top{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  padding: 7% 0rem;
}

.component>main h4{
    letter-spacing: 0.15rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: hsl(var(--grayish-blue));
}

.component>main input[type="range"]{
  appearance: none;
    width: 100%;
    height: 0.5rem;
    background-color: hsl(var(--soft-cyan));
    border: none;
    border-radius: 0.5rem;
}

.component>main input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    aspect-ratio: 1/1;
    width: 2.5rem;
    border: none;
    background-image: url("../images/icon-slider.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-color: hsl(var(--strong-cyan));
    background-size: 1.5rem;
    cursor: grab;
    border-radius: 3rem;
    z-index: 2;
  box-shadow: hsl(var(--soft-cyan)) 0rem 1rem 2rem 0.5rem;
}

.component>main input[type="range"]::-webkit-slider-thumb:active{
    cursor: grabbing;
}



.component>main>p{
    font-size: 0.9rem;
    font-weight: 600;
    color: hsl(var(--grayish-blue));
}

.component span.amount{
    font-size: 2rem;
    font-weight: 800;
    color: hsl(var(--dark-desaturated-blue));
}

.component>main .billing-option{
  width: 100%;
  display: grid;
  gap: 5%;
  grid-template-columns: 1fr auto 1.1fr;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 2rem;
  color: hsl(var(--grayish-blue));
}

.component>main .billing-option>p{
  width: 100%;
}

.component>main .billing-option>p:nth-of-type(1){
  text-align: right;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: block;
    width: var(--switch-width);
    height: var(--switch-height);
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: var(--slider-size);
    width: var(--slider-size);
    left: var(--space);
    bottom: var(--space);
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: hsl(var(--strong-cyan));
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(var(--movement));
    -ms-transform: translateX(var(--movement));
    transform: translateX(var(--movement));
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: var(--switch-height);
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

.component>main span.discount-text{
  display: none;
}

.component>main span.discount-amount{
  font-size: 0.65rem;
  background-color: hsla(var(--light-red), 0.25);
  padding: 0.2rem 0.5rem;
  border-radius: 1rem;
  color: hsl(var(--light-red));
}

.component>main div.line{
  position: absolute;
  width: 100%;
  height: 0.1rem;
  bottom: 0;
  background-color: hsla(var(--grayish-blue), 0.3);
}

.component>footer{
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
}

.component>footer p{
  margin-bottom: 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: hsl(var(--grayish-blue));
  text-align: center;
}

.component>footer p::before{
  content: "";
  display: inline-block;
  aspect-ratio: 1/1;
  width: 0.5rem;
  margin-right: 0.65rem;
  background-image: url("../images/icon-check.svg");
}

.component>footer button{
  border: none;
  border-radius: 20rem;
  font-size: 0.9rem;
  font-weight: 400;
  padding: 0.8rem 3rem;
  color: hsl(var(--pale-blue));
  background-color: hsl(var(--dark-desaturated-blue));
  cursor: pointer;
}


@media (min-width: 1100px){

  header{
    display: grid;
    grid-template-areas: 
    "heading heading"
    "sign1 sign2";
    gap: 0.3rem;
  }

  header h1{
    grid-area: heading;
  }



  body{
    background-size: 100svw auto;
  }

  .component{
    aspect-ratio: 3/2;
    width: min(95%, 35rem);
  }

  .component>main span.discount-text{
    display: initial;
  }
  .component>main span.discount-amount{
    margin-left: 0.5rem;
  }

  .component>main>div.top{
    width: 100%;
    display: grid;
    grid-template-areas: 
    "views price"
    "slider slider";
    padding: initial;
  }

  .component>main>div.top h4{
    grid-area: views;
  }
  .component>main>div.top input[type="range"]{
    grid-area: slider;
  }
  .component>main>div.top p{
    grid-area: price;
  }

  .component>footer{
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 80%;
    flex-grow: 1;
  }

  .component>footer p{
    text-align: left;
  }

  .component>footer button{
    width: 80%;
    justify-self: end;
  }
}