/* ### CUSTOM PROPERTIES ### */

:root {
  /* # PRIMARY # */
  /* full slider bar */
  --soft-cyan: hsl(174, 77%, 80%);
  /* slider background */
  --strong-cyan: hsl(174, 86%, 45%);
  /* discount background */
  --light-red: hsl(15, 100%, 70%);
  /* cta text */
  --pale-blue: hsl(226, 100%, 87%);

  /* # NEUTRAL #*/
  /* pricing component bg */
  --white: hsl(0, 0%, 100%);
  /* main bg */
  --very-pale-blue: hsl(230, 100%, 99%);
  /* empty slider bar */
  --light-grayish-blue-slider: hsl(224, 65%, 95%);
  /* toggle background */
  --light-grayish-blue-toggle: hsl(223, 50%, 87%);
  /* text */
  --grayish-blue: hsl(225, 20%, 60%);
  /* text and cta bg */
  --dark-desaturated-blue: hsl(227, 35%, 25%);

  /* # TYPOGRAPHY # */
  --ff-manrope: "Manrope", sans-serif;
  --fw-600: 600;
  --fw-800: 800;
}

/* ### CSS RESET ### */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

picture,
img,
svg {
  max-width: 100%;
  display: block;
}

button {
  border: none;
  font: inherit;
  background: unset;
}

button:hover {
  cursor: pointer;
  color: var(--white);
}

/* ### GENERAL SYLING ### */

body {
  font-family: var(--ff-manrope);
  font-weight: var(--fw-600);
  background-color: var(--very-pale-blue);
  /* background-color: deeppink; */
  color: var(--grayish-blue);
  padding: 3.5rem 1.5rem;
  position: relative;
  z-index: 0;
}

body::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #f1f5fe;
  height: 420px;
  width: 100%;
  z-index: -1;
  border-end-start-radius: 12rem;
}

/* ### INTERACTIVE PRICING COMPONENT ### */

.intro-section {
  text-align: center;
  padding-block: 2rem;
  background-image: url(./images/pattern-circles.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.title {
  color: var(--dark-desaturated-blue);
  font-size: 1.3rem;
  font-weight: var(--fw-800);
}

.subtitle {
  margin-top: 0.8rem;
  font-size: 0.985rem;
  max-width: 22ch;
  margin-inline: auto;
}

form {
  border-radius: 0.6rem;
  margin-top: 1.5rem;
  background-color: var(--white);
  padding: 3rem 1.5rem;
  text-align: center;
  box-shadow: 0px 10px 18px rgba(202, 202, 202, 0.383);
  max-width: 575px;
  margin-inline: auto;
}

.slider-container {
  display: grid;
  gap: 2.6rem;
  grid-template-areas: "pageviews" "input" "price";
}

.pageviews-container {
  grid-area: pageviews;
  text-transform: uppercase;
  font-weight: var(--fw-800);
  letter-spacing: 2px;
  font-size: 0.845rem;
}

.slider-container input {
  grid-area: input;
}

.price-container {
  grid-area: price;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  font-size: 0.875rem;
}

.price {
  color: var(--dark-desaturated-blue);
  font-size: 2.3rem;
  font-weight: var(--fw-800);
}

.toggle-switch-container {
  margin-top: 2rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.discount {
  color: #e99c86;
  background-color: #fcecea;
  border-radius: 200px;
  padding: 3px 6px;
  display: inline-block;
  font-size: 0.7rem;
  font-weight: var(--fw-800);
  margin-inline-start: 0.3rem;
}

.discount-text {
  display: none;
}

.cta-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
  position: relative;
  margin-top: 2.5rem;
  padding-top: 1.8rem;
}

form ul {
  display: grid;
  gap: 0.5rem;
}

.cta-section::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: calc(100% + (1.5rem * 2));
  transform: translateX(-1.5rem);
  height: 2px;
  background-color: #f7f6f8;
}

form ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.8rem;
}

form button {
  background-color: var(--dark-desaturated-blue);
  color: var(--pale-blue);
  padding: 0.8rem 2.8rem;
  font-size: 0.8rem;
  font-weight: var(--fw-800);
  border-radius: 200px;
}

/* ### SLIDER ### */

.slider-container {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: var(--light-grayish-blue-slider);
  outline: none;
  opacity: 0.7;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--strong-cyan);
  cursor: pointer;
  border: none;
  background-image: url(./images/icon-slider.svg);
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0px 10px 20px rgb(0, 255, 229);
}

.slider::-moz-range-thumb {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--strong-cyan);
  cursor: pointer;
  border: none;
  background-image: url(./images/icon-slider.svg);
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0px 10px 20px rgb(0, 255, 229);
}

.slider::-webkit-slider-thumb:active {
  background: #23ada1;
  background-image: url(./images/icon-slider.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.slider::-moz-range-thumb:active {
  background: #23ada1;
  background-image: url(./images/icon-slider.svg);
  background-repeat: no-repeat;
  background-position: center;
}

/* ### TOGGLE SWITCHER ### */

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 25px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider-switch {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--light-grayish-blue-toggle);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider-switch:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider-switch {
  background-color: #74ecd9;
}

input:focus + .slider-switch {
  outline: 3px solid #2196f3;
}

input:checked + .slider-switch:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* Rounded sliders */
.slider-switch.round {
  border-radius: 34px;
}

.slider-switch.round:before {
  border-radius: 50%;
}

/* ### MEDIA QUERIES ### */

@media (min-width: 40em) {
  body {
    min-height: 100vh;
    display: grid;
    align-content: center;
  }

  body::before {
    height: 540px;
  }

  .intro-section {
    padding-block: 2.5rem;
  }

  .title {
    font-size: 2rem;
  }

  .subtitle {
    max-width: unset;
  }

  form {
    padding: 3rem 2.5rem;
    margin-top: 3.5rem;
  }

  .discount-text {
    display: inline;
  }

  .slider-container {
    grid-template-areas: "pageviews price" "input input";
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }

  .pageviews-container {
    justify-self: start;
  }

  .price-container {
    justify-self: end;
  }

  .toggle-switch-container {
    margin-top: 3.5rem;
    gap: 0.8rem;
    transform: translateX(45px);
  }

  .cta-section {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: start;
  }

  form ul li {
    justify-content: flex-start;
  }
}