// Sidebar container
#photoberry-studio-welcome .photoberry-studio-tabs-container.photoberry-studio-tabs-steps {
  display        : flex;
  flex-direction : row;
  gap            : 20px;
  flex-wrap      : wrap;
  margin-top     : 25px;

  .photoberry-studio-title-container {
    display : none;
    }

  .photoberry-studio-tabs-nav {
    width          : 230px;
    border         : 0;
    display        : flex;
    flex-direction : column;
    margin-top     : 0;
    position       : relative;

    li:not(:has(a)) {
      padding : 10px 15px 10px 50px;
      }

    li {
      position    : relative;
      padding     : 0 15px 0 50px;
      font-weight : 600;
      font-size   : 14px;
      display     : flex;
      align-items : center;

      // Icons and connecting line
      &::before {
        content          : "";
        position         : absolute;
        left             : 15px;
        top              : 50%;
        transform        : translateY(-50%);
        width            : 15px;
        height           : 15px;
        border           : 2px solid $gray-2;
        border-radius    : 50%;
        background-color : #fff;
        z-index          : 1;
        }

      &:not(:last-child)::after {
        content          : "";
        position         : absolute;
        left             : 24px;
        top              : 0;
        transform        : translateY(50%);
        width            : 2px;
        height           : 100%;
        background-color : $gray-2;
        z-index          : 0;
        }

      &.photoberry-studio-complete {
        color : $primary-color;

        &::before {
          border-color : $primary-color;
          background   : $primary-color url("../img/icons/white/check.svg") center/contain no-repeat;
          }
        }

      &.photoberry-studio-active {
        color : $primary-color;

        &::before {
          border-color : $primary-color;
          background   : $primary-color;
          box-shadow   : inset 0 0 0 3px $gray-2;
          }
        }

      a {
        padding         : 10px 15px 10px 0;
        color           : $primary-color;
        text-decoration : none;
        font-weight     : 600;
        font-size       : 14px;
        border          : 0;
        }

      &.photoberry-studio-active a {
        color       : $primary-color;
        font-weight : 600;
        border      : 0;
        }
      }
    }

  .photoberry-studio-tabs-contents {
    flex-grow        : 1;
    padding          : 25px;
    background-color : #fff;
    border-radius    : 5px;
    box-shadow       : $box-shadow-light;
    position         : relative;
    width            : calc(100% - 300px);
    color            : $text-primary;

    @media screen and (max-width : 768px) {
      padding : 15px;
      width   : 100%;
      }

    > div {
      padding-top : 10px;
      margin-top  : 0;
      }

    .photoberry-studio-step-title {

      margin-bottom : 25px;

      h2 {
        margin-top : 0;
        @include h1;
        }
      }

    p {
      margin-bottom : 25px;
      }

    .photography-studio-list {
      list-style-type     : disc;
      list-style-position : inside;
      margin-bottom       : 10px;
      }

    .photoberry-studio-welcome-features {
      display               : grid;
      grid-template-columns : 1fr;
      gap                   : 20px;

      li {
        @include container(false, false);
        background-color : $gray-1;
        padding          : 25px;

        h3 {
          @include h3();
          margin-top    : 0;
          margin-bottom : 10px;
          }

        a {
          font-weight : bold;
          }
        }
      }

    .photoberry-studio-video-link {
      position  : relative;
      display   : block;
      width     : 100%;
      max-width : 640px;

      img {
        display       : block;
        border-radius : 10px;
        }

      // Overlay style
      &::before {
        content          : "";
        position         : absolute;
        top              : 0;
        left             : 0;
        width            : 100%;
        height           : 100%;
        border-radius    : 10px;
        background-color : rgba(0, 0, 0, 0.05); // Semi-transparent black
        opacity          : 1;
        transition       : opacity 0.3s ease;
        z-index          : 1;
        }

      // Play icon
      &::after {
        content             : "";
        background-image    : url("../img/icons/gray/play.svg");
        background-repeat   : no-repeat;
        background-position : center;
        background-size     : 30px;
        position            : absolute;
        top                 : 50%;
        left                : 50%;
        transform           : translate(-50%, -50%);
        opacity             : 1;
        transition          : opacity 0.3s ease;
        z-index             : 2;
        background-color    : #fff;
        border-radius       : 50%;
        width               : 60px;
        height              : 60px;
        }
      }

    .photoberry-studio-field-wrapper {
      line-height : 20px;

      .photoberry-studio-info {
        display     : inline-block;
        margin-top  : 15px;
        font-weight : normal;
        color       : $text-primary;

        }

      }

    .photoberry-studio-welcome-links {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 30px;
      }

    }

  .photoberry-studio-buttons-nav {
    width      : 100%;
    text-align : right;
    }

  .photoberry-studio-tabs-contents > div.photoberry-studio-loading {
    max-width : 700px;

    &:before {
      content          : "";
      background-color : rgba(255, 255, 255, 0.8);
      width            : 100%;
      height           : 100%;
      position         : absolute;
      z-index          : 10;
      }
    }

  .photoberry-studio-step-body {
    max-width : 800px;

    dl {
      display               : grid;
      grid-template-columns : repeat(auto-fill, minmax(300px, 1fr));
      gap                   : 10px;
      align-items           : start;

      dt {
        font-weight      : normal;
        color            : $text-primary;
        background-color : #e6f7e9;
        padding          : 10px;
        border-left      : 4px solid $accent-green;
        border-radius    : 5px;

        &.photoberry-studio-status-fail {
          color            : $accent-red;
          border-color     : $accent-red;
          background-color : rgba(214, 54, 56, 0.15);
          }
        }

      dd {
        word-wrap   : break-word;
        margin-left : 0;
        }
      }

    }

  /* Responsive */
  @media screen and (max-width : 768px) {

    flex-direction : column;

    .photoberry-studio-tabs-nav {
      width          : 100%;
      flex-direction : row;
      flex-wrap      : wrap;

      li:not(:has(a)), li {
        padding-left  : 26px;
        padding-right : 10px;
        }

      li::before {
        left : 0;
        }

      li:not(:last-child):after {
        display : none;
        }
      }
    }

  }


/* Hide Admin notices */
#photoberry-studio-welcome .photoberry-studio-tabs-container > .notice {
  display : none!important;
  }