@use "../../../../styles/abstracts/variables";
@use "../../../../styles/abstracts/mixins";

.dash__plans {
  @include mixins.pageBase;

  width: 100%;
  overflow-x: hidden;
  position: relative;

  background:
    radial-gradient(
      circle at top right,
      rgba(255, 140, 66, 0.05),
      transparent 35%
    ),
    #101012;

  /* ==========================================
     ACTION BUTTONS
  ========================================== */

  a {
    @include mixins.dashPagesButton;
  }

  /* ==========================================
     COIN WIDGET WRAPPER
  ========================================== */

  iframe {
    border-radius: 12px !important;

    overflow: hidden;

    margin-bottom: 1.5rem;

    border: 1px solid variables.$col-border-lining;

    background: #171719;
  }

  /* ==========================================
     MARKET TABS
  ========================================== */

  &__tab {
    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.75rem;

    margin: 1.5rem 0;

    border-radius: 14px;

    border: 1px solid variables.$col-border-lining;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.02),
        rgba(255,255,255,.01)
      );

    overflow-x: auto;

    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    &--item {
      flex: 0 0 180px;

      display: flex;

      align-items: center;

      justify-content: center;

      height: 48px;

      border-radius: 12px;

      color: rgba(255,255,255,.65);

      font-size: .85rem;

      font-weight: 500;

      cursor: pointer;

      transition: all .25s ease;

      border: 1px solid transparent;

      &:hover {
        background: rgba(255,255,255,.03);

        color: variables.$col-white;
      }

      @media (max-width: 1000px) {
        flex: 0 0 160px;
      }
    }

    &--item--active {
      flex: 0 0 180px;

      display: flex;

      align-items: center;

      justify-content: center;

      height: 48px;

      border-radius: 12px;

      background:
        linear-gradient(
          180deg,
          #ff9f57,
          variables.$col-orange
        );

      color: #0f1115;

      font-weight: 700;

      font-size: .85rem;

      border: 1px solid rgba(255,255,255,.08);

      box-shadow:
        0 10px 30px rgba(255,140,66,.25),
        inset 0 1px 0 rgba(255,255,255,.15);

      cursor: pointer;

      @media (max-width: 1000px) {
        flex: 0 0 160px;
      }
    }
  }

  /* ==========================================
     MAIN CONTENT CONTAINER
  ========================================== */

  &__grid {
    position: relative;

    margin-top: 1.75rem;

    padding: 2rem;

    border-radius: 20px;

    border: 1px solid variables.$col-border-lining;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.02),
        rgba(255,255,255,.01)
      );

    backdrop-filter: blur(12px);

    overflow: hidden;

    &::before {
      content: "";

      position: absolute;

      inset: 0;

      background:
        radial-gradient(
          circle at top right,
          rgba(255,140,66,.08),
          transparent 40%
        );

      pointer-events: none;
    }

    @media (max-width: 1000px) {
      padding: 1.25rem;
    }

    form {
      position: relative;

      z-index: 2;

      display: flex;

      flex-direction: column;

      gap: 1rem;

      label {
        @include mixins.formLabel;

        font-size: .8rem;

        color: rgba(255,255,255,.75);

        letter-spacing: .03em;

        text-transform: uppercase;
      }

      select {
        @include mixins.formSelect;

        background: rgba(255,255,255,.02) !important;

        border: 1px solid variables.$col-border-lining;

        color: variables.$col-white;

        transition: all .25s ease;
      }

      input {
        @include mixins.formInput;

        background: rgba(255,255,255,.02) !important;

        border: 1px solid variables.$col-border-lining;

        color: variables.$col-white;

        transition: all .25s ease;
      }

      input::placeholder {
        color: rgba(255,255,255,.45);
      }

      input:focus,
      select:focus {
        border-color: rgba(255,140,66,.6);

        box-shadow:
          0 0 0 4px rgba(255,140,66,.08);

        outline: none;
      }

      small {
        display: block;

        margin-top: .5rem;

        font-size: .8rem;

        font-weight: 600;

        color: rgba(255,255,255,.65);
      }

      button {
        @include mixins.formButton;

        margin-top: 1rem;

        height: 52px;

        border-radius: 14px;

        background:
          linear-gradient(
            180deg,
            #ff9f57,
            variables.$col-orange
          );

        color: #0f1115;

        font-weight: 700;

        transition: all .25s ease;

        box-shadow:
          0 12px 30px rgba(255,140,66,.2);

        &:hover {
          transform: translateY(-2px);

          box-shadow:
            0 18px 35px rgba(255,140,66,.3);
        }
      }

      span {
        display: block;

        padding: 1rem;

        margin-top: .4rem;

        border-radius: 14px;

        border: 1px dashed rgba(255,140,66,.25);

        background:
          linear-gradient(
            180deg,
            rgba(255,140,66,.08),
            rgba(255,140,66,.03)
          );

        color: variables.$col-white;

        font-size: .82rem;

        font-weight: 600;

        line-height: 1.5;

        @media (max-width: 1000px) {
          padding: .9rem;
        }
      }
    }
  }
}