.radio-player-getting-started {

  * {
    box-sizing: border-box;
  }

  .getting-started-header {
    background: url("../images/getting-started/bg-shapes.png") no-repeat center / cover, darken(#40CE87, 22%);
    padding: 80px 80px 120px 80px;
    color: #FFF;
    text-align: center;

    .header-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      line-height: 1.5;

      img {
        width: 50px;
        margin-right: 15px;
      }

      span {
        font-size: 32px;
        font-weight: 600;
      }
    }

    p {
      max-width: 600px;
      font-size: 1rem;
      margin: auto;
      line-height: 1.5;
    }

    .header-title {
      background: rgba(#40CE87, .5);
      width: max-content;
      padding: 20px 30px;
      border-radius: 30px;
      margin: 20px auto 0;
      font-size: 1.5rem;
      font-weight: 600;
      color: #FFF;
    }


    @media (max-width: 767px) {
      padding: 30px 30px 100px 30px;

      .header-title {
        img {
          width: 40px;
        }

        span {
          font-size: 28px;
        }
      }
    }

  }

  .getting-started-main {
    max-width: 1000px;
    margin: -64px auto 0 auto;

    @media (max-width: 1199px) and (min-width: 768px) {
      width: calc(100% - 40px);
    }
  }

  .getting-started-menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #FFF;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom: 1px solid #e5e5e5;

    .menu-item {
      display: flex;
      align-items: center;
      padding: 20px 15px;
      cursor: pointer;
      color: #4d4d4d;
      transition: all 0.3s ease-in-out;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      white-space: nowrap;
      overflow: hidden;

      svg, img {
        margin-right: 5px;
      }

      span {
        font-size: .9rem;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &:hover {
        color: $radio_player_color_dark;

        svg, path {
          fill: $radio_player_color_dark;
        }
      }

      &.active {
        color: $radio_player_color;
        border-bottom: 2px solid $radio_player_color;

        svg, path {
          fill: $radio_player_color;
        }
      }

    }

    @media (max-width: 991px) and (min-width: 768px) {
      .menu-item {
        padding: 20px 15px;
      }
    }
    @media (max-width: 767px) {
      border-radius: 0;
      flex-direction: column;
      align-items: normal;
    }

  }

  .getting-started-content {
    display: none;
    margin-top: 30px;

    .section-wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 30px;

      section {
        width: 48%;
      }
    }

    section {
      display: flex;
      flex-wrap: wrap;
      padding: 30px;
      border-radius: 15px;
      margin-bottom: 20px;

      &.section-full {
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2rem;

        & > div {
          width: 48%;
        }
      }

      &.section-half {
        justify-content: center;

        .col-description {
          text-align: center;
          margin-bottom: 1rem;
        }

        .col-image {
          margin-top: auto;
        }

      }

      &.section-introduction,
      &.section-add-new-player, {
        background: #EFF3FE;
      }

      &.section-http-player,
      &.section-documentation,
      &.section-contact,
      &.section-play-http-streams,
      &.section-fullwidth-player {
        background: #EAF7ED;
      }

      &.section-multiple-skins,
      &.section-display-sticky-player,
      &.section-multiple-stations {
        background: #FDF6EC;
      }

      &.section-editing-preview,
      &.section-display-player, {
        background: #EAF7ED;
      }

      &.section-popup-player,
      &.section-embed-code,
      &.section-schedule {
        background: #F7F8FA;
      }

      &.section-radio-player-ads {
        background: #EAF7ED;

        h3 {
          color: #000;
          text-align: center;
          margin-top: 30px;
          font-size: 1.5rem;
        }
      }

      .col-image {
        width: 100%;
        text-align: center;

        img {
          max-width: 100%;
          border-radius: 7px;
        }

        iframe {
          width: 100%;
          border-radius: 7px;
          aspect-ratio: 16/9;
        }
      }

      .radio-player-btn {
        padding: 15px 20px;
        margin: 30px auto 0 auto;
      }

      &.integrations {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 -10px;
        padding: 0;

        .integration {
          width: calc(33% - 20px);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          text-align: center;
          background: #F7F8FA;
          margin: 10px;
          padding: 20px;
          border-radius: 15px;

          h3 {
            margin-bottom: 10px;
          }

          img {
            width: 70px;
            height: 70px;
            margin-bottom: 10px;
            border-radius: 50%;
          }

        }

      }

    }

    .content-heading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 80px auto 20px auto;
      text-align: center;
      max-width: 650px;
      line-height: 1.3;

      h2 {
        margin: 5px 0;
        font-size: 30px;
        font-weight: 700;
      }

      p {
        margin: 5px;
        font-size: .875rem;
      }
    }

    &.active {
      display: block;
    }

    p {
      font-size: 1rem;
      margin-top: 0;
    }

    ul {
      list-style: disc;
      margin-left: 20px;
    }

    li {
      font-size: 1rem;
      margin-bottom: 12px;
      line-height: 1.5;

      ul {
        margin-top: 10px;

        ul {
          margin-top: 10px;
          margin-left: 20px;
        }

      }

    }

    @media (max-width: 767px) {
      padding: 10px;

      .section-wrap {
        section {
          width: 100%;
          margin-bottom: 30px;
        }
      }

      section {
        &.section-full {
          flex-direction: column;
          align-items: center;
          justify-content: center;

          & > div {
            width: 100%;
          }
        }

        &.integrations {
          margin: 0;

          .integration {
            width: 100%;
            margin: 0 0 20px 0;
          }
        }

      }

    }

  }

  .log {
    border-radius: 15px;
    margin-bottom: 20px;

    &-header {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 20px;
      background: #EFF3FE;
      border-radius: 15px;

      span {
        font-size: 1rem;
        font-weight: 500;
        margin-right: 10px;

        &.log-version {
          background: $radio_player_color;
          color: #FFF;
          padding: 5px 10px;
          border-radius: 5px;
        }

      }

      i {
        margin-left: auto;
        background: $radio_player_color;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFF;
        border-radius: 50%;
        height: 25px;
        width: 25px;
      }
    }

    &-body {
      display: none;

      .log-section {
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(#2fb44b, .1);

        &:last-child {
          border-bottom: none;
        }

      }

      .log-item {
        font-size: 1rem;
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        i {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          margin-right: 7px;
          border-radius: 50%;
          height: 25px;
          width: 25px;
          padding: 5px;
        }


        &-new {
          color: #3265A6;

          i {
            background: #3265A6;
            color: #FFF;
          }
        }

        &-fix {
          color: #2fb44b;

          i {
            background: #2fb44b;
            color: #FFF;
          }
        }

        &-enhancement {
          color: #F5A623;

          i {
            background: #F5A623;
            color: #FFF;
          }
        }

        &-remove {
          color: #F3754D;

          i {
            background: transparent;
          }
        }


      }

    }

    &.active {
      border: 1px solid rgba(#2fb44b, .3);

      .log-header {
        border-bottom: 1px solid rgba(#2fb44b, .3);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }

      .log-body {
        display: block;
        padding: 20px;
      }

    }

  }

  .free-vs-pro {
    h2 {
      span {
        margin: 0 10px;
      }

      span:first-child {
        color: #7a7a7a;
      }

      span:last-child {
        color: $radio_player_color_light;
      }
    }
  }

  .features-list {
    background: #EFF3FE;
    border-radius: 15px;

    .list-header {
      display: flex;
      align-items: center;
      padding: 30px;
      font-size: 1.2rem;
      border-bottom: 1px solid rgba(#2fb44b, .1);
      font-weight: 600;
      background: rgba(#7788FF, .1);
      border-radius: 15px;


      .feature-title {
        width: 75%;
      }

      .feature-free {
        width: 12%;
      }

      .feature-pro {
        width: 12%;
        margin-left: auto;
        text-align: center;
      }

    }

    .feature {
      display: flex;
      align-items: center;
      padding: 20px 30px;
      font-size: 1rem;
      font-weight: 500;
      border-bottom: 1px solid rgba(#2fb44b, .1);

      &:last-child {
        border-bottom: none;
      }

      .feature-title {
        width: 75%;
      }

      i {
        color: #FFF;
        background: $radio_player_color_light;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;

        &.dashicons-no-alt {
          background: #7a7a7a;
        }
      }

      .feature-free {
        width: 12%;
      }

      .feature-pro {
        width: 12%;
        margin-left: auto;
        text-align: center;
      }
    }


  }

  .get-pro-cta,
  .demo-cta {
    display: flex;
    align-items: center;
    border-radius: 15px;
    padding: 30px;
    margin: 60px 0;
    background: darken(#40CE87, 10%);

    .cta-content {
      display: flex;
      flex-direction: column;
      width: 60%;
      color: #FFF;

      h2 {
        margin-bottom: 5px;
        font-size: 1.5rem;
        font-weight: bold;
        color: #FFF;
        line-height: 1.3;
      }

    }

    .cta-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      .radio-player-btn {
        padding: 15px 20px;
        text-decoration: none;
        background: #FFF;
        color: $radio_player_color;
        font-weight: 500;

        &:hover {
          color: #FFF;
          background: $radio_player_color;
        }

      }

    }

    @media (max-width: 767px) {
      flex-direction: column;
      align-items: center;
      padding: 30px 20px;
      text-align: center;

      .cta-content {
        width: 100%;
        margin-bottom: 20px;
      }

      .cta-btn {
        width: 100%;
      }
    }

  }

  .demo-cta {
    background-color: rgba(#40CE87, .3);

    .cta-content {
      color: #555;

      h2 {
        color: #333;
      }
    }

    .cta-btn {
      .radio-player-btn {
        background: #40CE87;
        color: #FFF;
        font-weight: 500;
        padding: 15px 20px;
        text-decoration: none;
        border-radius: 5px;
        transition: all .3s ease-in-out;

        &:hover {
          background: #FFF;
          color: #40CE87;
        }
      }
    }

  }

  .faq-item {
    margin-bottom: 30px;
    border: 1px solid #EFF3FE;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    width: 100%;
    flex-direction: column;
    user-select: none;

    .faq-header {
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      background: #EFF3FE;
      padding: 15px 20px;


      i {
        margin-right: 15px;
        font-size: 1.2rem;
        transition: all .3s ease-in-out;
        background: #FFF;
        color: #333;
        width: 35px;
        height: 35px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
      }

      h3 {
        font-size: 1.2rem;
        margin: 0;
      }

    }

    .faq-body {
      display: none;
      line-height: 1.5;
      padding: 10px 20px;

      p {
        font-size: 1rem;
        color: #444;
      }

    }

    &.active {

      .faq-header {
        i {
          color: $radio_player_color;
          transform: rotate(180deg);
        }
      }

      .faq-body {
        display: block;
      }
    }
  }


}