@import 'mixins.scss';

[data-payment-page-admin-section="header"] {
  width : 100%;
  display : flex;
  flex-direction: column;

  margin : 0 0 20px 0;

  > [data-payment-page-admin-section="logo-container"] {
    display : flex;
    width : 100%;

    > img {
      margin : 0 auto;
    }
  }

  > [data-payment-page-admin-section="navigation"] {
    > [data-payment-page-admin-section="menu_container"] {
      @include payment-page-navigation-container();
    }
  }
}

body.post-type-pp_payment_form.post-new-php,
body.post-type-pp_payment_form.post-php {
  [data-payment-page-admin-section="header"] {
    margin-top : 30px !important;
  }
}


.payment-page-trigger-container-show-form-types-container {
  background     : var( --payment-page-layout-primary-background-color );
  margin         : 5px auto 20px auto;
  overflow       : hidden;
  padding        : 20px 20px 0 20px;
  border         : 1px solid #DAE4F1;
  display        : flex;
  flex-direction : row;
  flex-wrap      : wrap;
  gap            : 20px;

  @include border-radius( 10px );
  @include box-sizing( border-box );
  @include box-shadow( 0 0 32px #C2C8CC54 );

  .payment-page-trigger-container-show-form-types {
    display : flex;
    flex-direction: row;
    justify-content: center;
    gap : 20px;
    margin: 0;

    > li {
      display: inline-block;
      font-size: 18px;
      line-height: 27px;
      text-decoration: unset;
      padding-bottom: 15px;
      cursor: pointer;
      margin : 0;

      &[data-payment-page-interaction-state="active"],
      &:hover {
        border-bottom: 3px solid var(--payment-page-primary-color);
        color: var(--payment-page-primary-color);
      }
    }
  }

  .payment-page-form-type-description {
    display: block;
    font-size: 18px;
    text-align : center;
    margin: 0;
  }
}

.payment-page-header-container {
  display : flex;
  flex-direction: row;
  width : 100%;
  background: var(--payment-page-layout-primary-background-color);
  padding: 20px;
  box-sizing : border-box;
  align-self: flex-start;
  position:sticky;
  top : 32px;
  z-index: 9999;
  border         : 1px solid #DAE4F1;

  @include border-radius( 10px );
  @include box-sizing( border-box );
  @include box-shadow( 0 0 32px #C2C8CC54 );
}

.payment-page-header-container > h1 {
  margin : 0;
  padding : 0;
}

.payment-page-header-container .payment-page-publish-container {
  width: 200px;
  margin: auto 0 auto auto;
  display: flex;
  flex-direction: row;
}

#post_status {
  width : 100%;
}

#publishing-action {
  float : none;
  flex-shrink : 0;
  display : flex;
  flex-direction: row-reverse;
}

#publishing-action {

}

body.post-type-pp_payment_form #title.edit-page {
  margin: 0 0 10px 0 !important;
}

.payment-page-template-selection {
  background     : var( --payment-page-layout-primary-background-color );
  margin         : 10px auto 0 auto;
  overflow       : hidden;
  padding        : 20px;
  border         : 1px solid #DAE4F1;
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 30px;

  @include border-radius( 10px );
  @include box-sizing( border-box );

  > label {
    display: flex;
    flex-direction: column;
    padding        : 20px;
    border         : 1px solid #DAE4F1;

    &[data-payment-page-interaction-state="active"] {
      border: 1px solid var(--payment-page-primary-color);
    }

    &[data-payment-page-interaction-state="inactive"] {
      cursor : pointer;
    }

    > img {
      max-width : 100%;
      max-height: 250px;
      margin: 0 auto;
    }

    > span {
      margin  : 10px 0 0 0;
      text-align : center;
      font-size: 18px;
      font-weight: 700;
      color: #555;

      > input {
        display : none !important;
      }
    }
  }

  @media (max-width: $break_point_x_large_width) {
    grid-template-columns : repeat(2, 1fr);
  }

  @media (max-width: $break_point_medium_width) {
    grid-template-columns : 100%;
  }
}