.plan {

// background: url('./images/background/bg-tolls-classic.jpg') top right / contain no-repeat;
min-height: calc(100vh - 96px);
padding: 0;
width: 100%;

@media screen and (max-width: $desktop) {
  background-position: 130% 0;
  background-size: auto 100%;
}

@media screen and (max-width: $tablet) {
  background: $whisper !important;
  min-height: calc(100vh - 86px);
}

@media screen and (max-height: $max-height) {
  padding: 0;
  background-position: 100% 0;
}

// &--prime {
//   background: url("./images/background/bg-tolls-prime.jpg") top right /
//     contain no-repeat;
// }

// &--exclusive {
//   background: url("./images/background/bg-tolls-brown.jpg") top right /
//     contain no-repeat;
// }

// &--private {
//   background: url("./images/background/bg-tolls-private.jpg") top right /
//     contain no-repeat;
// }

.plan__title-header {
  padding-right: 20px;
}

.plans {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;

  @media screen and (min-width: $tablet) {
    flex-direction: row;
  }
}

&__intro {
  max-width: 690px;
  color: $osloGray;
  font-family: $ft-open-sans;
  font-size: 16px;
  line-height: 1.5;
  display: inline-block;
  margin: 0 0 20px 0;
  @media screen and (max-width: $tablet) {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 10px;
  }
}

&__row {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;

  @media screen and (max-width: $tablet) {
    flex-direction: column-reverse;
  }

  > * {
    margin: 20px 0 0;

    @media screen and (max-width: $tablet) {
      margin: 0;
      max-width: 100%;
    }
  }
}

&__brand {
  &--white {
    width: 218px;
    @media screen and (max-width: $tablet) {
      display: none !important;
    }
  }

  &--black {
    display: none;

    @media screen and (max-width: $tablet) {
      display: block !important;
    }
  }

  @media screen and (max-width: $tablet) {
    height: 50px;
    margin-top: 20px;
  }
}

&__title {
  color: $title-color;
  font-family: $ft-galano;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 10px;

  @media screen and (max-width: $tablet) {
    font-size: 22px;
    margin: 16px 0;
  }

  @media screen and (max-height: $max-height) {
    font-size: 29px;
  }

  &--row {
    display: block;
  }
}

&__box {
  background: $white;
  border-radius: 8px;
  box-shadow: 0 4px 12px 0 rgba(42, 34, 100, 0.24);
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  padding-bottom: 15px;
  width: 436px;

  @media screen and (max-height: $max-height) {
    width: 430px;
  }
}

&__header {
  padding: 12px 24px 15px;
  min-height: 90px;

  @if $plan-header-bg-color2 != null {
    background-image: linear-gradient(
      to bottom right,
      $plan-header-bg-color,
      $plan-header-bg-color2
    );
  } @else {
    background-color: $plan-header-bg-color;
  }
}

&__name {
  color: $plan-name-color;
  font-family: $ft-galano;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
  margin: 0;

  @media screen and (min-height: $tablet) {
    font-size: 23px;
  }
}

&__description {
  color: $white;
  font-family: $ft-open-sans;
  font-size: 15px;
  font-stretch: normal;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1.4;
  margin: 0;

  @media screen and (max-height: $max-height) {
    font-size: 13px;
  }
}

&__content {
  padding: 0 24px 10px;
}

&__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

&__item {
  align-items: center;
  display: flex;
  font-family: $ft-open-sans;
  height: 50px;
  justify-content: space-between;

  &:nth-child(3),
  &:last-child {
    height: 30px;

    @media screen and (max-height: $max-height) {
      height: 25px;
    }
  }

  &:not(:nth-child(3)) {
    box-shadow: 0 1px 0 0 $blueHaze;
  }

  @media screen and (max-height: $max-height) {
    height: 40px;
  }
}

&__text {
  font-size: 14px;
  @media screen and (max-height: $max-height) {
    font-size: 12px;
  }
}

&__value {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.56;

  @media screen and (max-height: $max-height) {
    font-size: 12px;
  }

  &--scratched {
    text-decoration: line-through;
  }

  &--free {
    background: url("./images/ic-check-free.svg") left center no-repeat;
    font-size: 16px;
    padding-left: 25px;

    @media screen and (max-height: $max-height) {
      font-size: 12px;
    }
  }
}

&__free {
  color: $manatee;
  display: inline-block;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  width: 100%;

  @media screen and (max-height: $max-height) {
    font-size: 12px;
  }
}

&__checkmark {
  border-radius: 4px;
  border: 1px solid $cadetBlue;
  display: inline-block;
  margin-right: 10px;
  min-height: 20px;
  min-width: 20px;
}

&__term {
  align-items: center;
  color: $manatee;
  cursor: pointer;
  display: flex;
  padding: 0 40px;

  @media screen and (max-width: $tablet) {
    padding: 0 20px;
  }

  @media screen and (max-height: $max-height) {
    padding: 0;
    margin-top: 10px;
  }

  input {
    display: none;

    &:checked ~ .plan__checkmark {
      background: $scooter url("./images/ic-check.svg") center no-repeat;
      border: 1px solid transparent;
      transition: $transition;
    }
  }

  p {
    color: $manatee;
    font-family: $ft-open-sans;
    font-size: 12px;
    line-height: 1.43;

    @media screen and (max-height: $max-height) {
      font-size: 10px;
      margin: 0;
    }
  }

  a {
    color: $manatee;
  }
}

&__button {
  background: $button-bg-color;
  border-radius: 6px;
  color: $button-color;
  cursor: pointer;
  font-family: $ft-open-sans;
  font-size: 16px;
  font-weight: bold;
  height: 48px;
  margin: 0 auto;
  text-align: center;
  transition: $transition;
  width: 176px;

  @media screen and (max-height: $max-height) {
    font-size: 14px;
    height: 40px;
  }

  &:disabled {
    background-color: $button-disabled-bg-color;
    color: $manatee;
    cursor: not-allowed;
    opacity: 0.5;
  }
}

}