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

.addNews {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1rem;

  background: rgba(4, 4, 6, 0.82);

  backdrop-filter: blur(14px);

  overflow-y: auto;

  &__content {
    position: relative;

    width: 100%;

    max-width: 540px;

    overflow: hidden;

    border-radius: 24px;

    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 25px 60px rgba(0, 0, 0, 0.45);

    padding: 1.5rem;
  }

  &__content::before {
    content: "";

    position: absolute;

    inset: 0;

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

    pointer-events: none;
  }

  &__content > * {
    position: relative;

    z-index: 2;
  }

  /* ==========================
     CLOSE
  ========================== */

  &__close {
    position: absolute;
    z-index: 999;
    top: 1rem;

    right: 1rem;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.04);

    color: rgba(255, 255, 255, 0.7);

    cursor: pointer;

    transition: 0.25s ease;

    &:hover {
      background: rgba(255, 255, 255, 0.08);

      color: #fff;
    }
  }

  /* ==========================
     HEADER
  ========================== */

  &__header {
    margin-bottom: 1.5rem;

    h2 {
      color: #fff;

      font-size: 1.15rem;

      font-weight: 700;

      line-height: 1.3;

      margin: 0.65rem 0 0.5rem;
    }

    p {
      color: rgba(255, 255, 255, 0.58);

      font-size: 0.78rem;

      line-height: 1.7;
    }
  }

  &__badge {
    display: inline-flex;

    align-items: center;

    padding: 0.35rem 0.75rem;

    border-radius: 999px;

    background: rgba(247, 147, 24, 0.08);

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

    color: #f79318;

    font-size: 0.6rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;
  }

  /* ==========================
     FORM
  ========================== */

  &__form {
    display: flex;

    flex-direction: column;

    gap: 1rem;
  }

  &__field {
    display: flex;

    flex-direction: column;

    label {
      margin-bottom: 0.45rem;

      color: rgba(255, 255, 255, 0.75);

      font-size: 0.75rem;

      font-weight: 500;
    }

    input,
    textarea {
      width: 100%;

      border-radius: 14px;

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

      background: rgba(255, 255, 255, 0.025);

      color: #fff;

      outline: none;

      appearance: none;

      transition: 0.25s ease;
    }

    input {
      height: 46px;

      padding: 0 0.9rem;

      font-size: 0.82rem;
    }

    textarea {
      min-height: 220px;

      max-height: 320px;

      resize: vertical;

      padding: 0.9rem;

      font-size: 0.82rem;

      line-height: 1.8;
    }

    input::placeholder,
    textarea::placeholder {
      color: rgba(255, 255, 255, 0.35);

      font-size: 0.78rem;
    }

    input:focus,
    textarea:focus {
      border-color: rgba(247, 147, 24, 0.35);

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

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

  &__submit {
    width: 100%;

    height: 46px;

    margin-top: 0.25rem;

    border: none;

    border-radius: 14px;

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

    color: #111;

    font-size: 0.82rem;

    font-weight: 700;

    cursor: pointer;

    transition: 0.25s ease;

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

      box-shadow:
        0 12px 28px rgba(247, 147, 24, 0.18);
    }

    &:disabled {
      opacity: 0.55;

      cursor: not-allowed;
    }
  }

  @media (max-width: 768px) {
    padding: 0.75rem;

    &__content {
      padding: 1.25rem;

      max-width: 100%;
    }

    &__header {
      h2 {
        font-size: 1.05rem;
      }
    }

    &__field {
      textarea {
        min-height: 180px;
      }
    }
  }
}

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