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

.add__signal-plan {
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 2rem;

  background: rgba(4, 4, 6, 0.82);
  backdrop-filter: blur(14px);

  overflow-y: auto;

  @media only screen and (max-width: 1000px) {
    align-items: flex-start;
    padding: 1rem;
  }

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  &__content {
    position: relative;

    width: 100%;
    max-width: 540px;

    margin: auto;

    max-height: calc(100vh - 4rem);
    overflow-y: auto;

    border-radius: 24px;

    padding: 2rem;

    background: linear-gradient(
      180deg,
      rgba(22, 22, 24, 0.98) 0%,
      rgba(15, 15, 18, 1) 100%
    );

    border: 1px solid rgba(255, 255, 255, 0.05);

    box-shadow:
      0 30px 80px rgba(0, 0, 0, .45);

    scrollbar-width: 0;
    scrollbar-color: none !important;

    &::-webkit-scrollbar {
      width: 6px;
      display: none !important;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(247,147,24,.35);
      border-radius: 30px;
      display: none !important;
    }

    &::before {
      content: "";

      position: absolute;
      inset: 0;

      pointer-events: none;

      background:
        radial-gradient(
          circle at top right,
          rgba(247,147,24,.06),
          transparent 45%
        );
    }

    @media only screen and (max-width:1000px){

      margin:4rem 0 2rem;

      max-height:none;

      padding:1.4rem;

      border-radius:20px;
    }

    &--close {

      position:absolute;
      z-index: 888;
      top:1.25rem;
      right:1.25rem;

      display:flex;
      align-items:center;
      justify-content:center;

      height:34px;

      padding:0 .9rem;

      border:none;

      border-radius:10px;

      cursor:pointer;

      background:
        rgba(239,68,68,.12);

      border:
        1px solid
        rgba(239,68,68,.18);

      color:#ef4444;

      font-size:.75rem;

      font-weight:600;

      transition:.25s ease;

      &:hover{
        background:
          rgba(239,68,68,.2);
      }
    }

    &--details {

      position:relative;
      z-index:2;

      &--header {

        padding-bottom:1.6rem;

        margin-bottom:1.7rem;

        border-bottom:
          1px solid
          rgba(255,255,255,.06);

        &--helper {

          display:inline-flex;

          align-items:center;
          justify-content:center;

          height:30px;

          padding:0 1rem;

          margin-bottom:1rem;

          border-radius:999px;

          background:
            rgba(247,147,24,.1);

          border:
            1px solid
            rgba(247,147,24,.18);

          color:#f79318;

          font-size:.66rem;

          font-weight:700;

          letter-spacing:.08em;

          text-transform:uppercase;

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

        h2 {

          color:variables.$col-white;

          font-size:1.12rem;

          font-weight:600;

          margin-bottom:.75rem;

          padding-right:4rem;

          border:none;

          @media(max-width:1000px){
            font-size:1rem;
          }
        }

        p{

          color:
            rgba(255,255,255,.72)!important;

          font-size:.84rem!important;

          line-height:1.85;

          font-weight:400!important;

          max-width:95%;

          padding:0!important;
        }
      }

      form{

        display:flex;
        flex-direction:column;
        gap:1.2rem;

        > div{

          display:flex;
          flex-direction:column;
        }

        label{

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

          font-size:.8rem;

          font-weight:600;

          margin-bottom:.55rem;
        }

        input,
        select,
        textarea{

          width:100%;

          background:
            rgba(255,255,255,.025);

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

          color:variables.$col-white;

          border-radius:14px;

          transition:.25s ease;

          font-size:.84rem;

          &:focus{

            outline:none;

            border-color:
              rgba(247,147,24,.45);

            box-shadow:
              0 0 0 4px
              rgba(247,147,24,.08);
          }
        }

        input,
        select{

          height:50px;

          padding:0 1rem;
        }

        textarea{

          resize:vertical;

          min-height:140px;

          padding:1rem;

          line-height:1.8;
        }

        input::placeholder,
        textarea::placeholder{

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

          font-size:.8rem;
        }
                /* =====================================
           MONEY INPUT COMPONENT
        ===================================== */

        /*
          Your MoneyInput component already renders
          its own label and input.
          These styles simply make it match
          the rest of the modal.
        */

        :global(.moneyInput),
        :global(.money-input) {

          width: 100%;

          display: flex;
          flex-direction: column;

          label {

            color:
              rgba(255,255,255,.82) !important;

            font-size: .8rem !important;

            font-weight: 600 !important;

            margin-bottom: .55rem !important;
          }

          input {

            width: 100% !important;

            height: 50px !important;

            padding: 0 1rem !important;

            border-radius: 14px !important;

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

            border:
              1px solid
              rgba(255,255,255,.06) !important;

            color:
              variables.$col-white !important;

            font-size: .84rem !important;

            transition: .25s ease !important;

            &::placeholder {

              color:
                rgba(255,255,255,.38) !important;

              font-size: .8rem !important;
            }

            &:focus {

              outline: none !important;

              border-color:
                rgba(247,147,24,.45) !important;

              box-shadow:
                0 0 0 4px
                rgba(247,147,24,.08) !important;
            }
          }
        }

        /* =====================================
           BUTTON
        ===================================== */

        button {

          width: 100%;

          height: 52px;

          margin-top: .5rem;

          border: none;

          border-radius: 14px;

          cursor: pointer;

          font-size: .86rem;

          font-weight: 700;

          color: #111111;

          background:
            linear-gradient(
              135deg,
              #f79318,
              #ffb454
            );

          transition: .25s ease;

          &:hover:not(:disabled) {

            transform: translateY(-2px);

            box-shadow:
              0 16px 35px
              rgba(
                247,
                147,
                24,
                .28
              );
          }

          &:disabled {

            opacity: .65;

            cursor: not-allowed;

            transform: none;

            box-shadow: none;
          }
        }
      }
    }
  }
}

/* =====================================
   MOBILE POLISH
===================================== */

@media only screen and (max-width:1000px){

  .add__signal-plan{

    &__content{

      &--details{

        &--header{

          h2{

            padding-right:0;

            line-height:1.45;
          }

          p{

            max-width:100%;
          }

          &--helper{

            font-size:.65rem;

            padding:0 .85rem;
          }
        }

        form{

          gap:1rem;

          input,
          select{

            height:48px;
          }

          textarea{

            min-height:120px;
          }

          button{

            height:50px;
          }
        }
      }
    }
  }
}

/* =====================================
   SCROLLBAR
===================================== */

::-webkit-scrollbar{

  width:6px;
}

::-webkit-scrollbar-track{

  background:transparent;
}

::-webkit-scrollbar-thumb{

  background:
    rgba(
      247,
      147,
      24,
      .28
    );

  border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{

  background:
    rgba(
      247,
      147,
      24,
      .45
    );
}

/* =====================================
   ANIMATIONS
===================================== */

@keyframes modalFade{

  from{

    opacity:0;
  }

  to{

    opacity:1;
  }
}

@keyframes modalScale{

  from{

    opacity:0;

    transform:
      translateY(18px)
      scale(.96);
  }

  to{

    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }
}

.add__signal-plan{

  animation:
    modalFade
    .22s ease;
}

.add__signal-plan__content{

  animation:
    modalScale
    .28s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    );
}