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

.confirm__modal {
  position: fixed;
  inset: 0;

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

  padding: 1rem;

  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);

  z-index: 9999;

  animation: fadeIn 0.25s ease;

  &__content {
    position: relative;

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

    padding: 2rem;

    border-radius: 20px;

    background: linear-gradient(
      180deg,
      rgba(25, 25, 25, 0.98) 0%,
      rgba(18, 18, 18, 0.98) 100%
    );

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

    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.45),
      0 8px 20px rgba(0, 0, 0, 0.25);

    color: #fff;

    animation: slideUp 0.3s ease;

    h2 {
      font-size: .9rem !important;
      font-weight: 500;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      padding-top: 1rem;
    }

    p {
      font-size: 0.77rem !important;
      line-height: 2 !important;
      color: #FFF;
      font-weight: 400 !important;
      opacity: .8 !important;
    }

    &--close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: variables.$col-danger-bg;
      color: variables.$col-danger-color;
      padding: 0.3rem 0.6rem;
      border-radius: 0.35rem;
      cursor: pointer;
      font-weight: 600;
      font-size: 0.75rem;
      transition: opacity 0.2s ease;

      &:hover {
        opacity: 0.85;
      }
    }

    &--details {
      display: flex;
      flex-direction: column;

      /* ✅ CONFIRM BUTTON (FIXED SCOPE) */
      button {
        width: 100%;
        background: variables.$col-orange;
        padding: .65rem 0.75rem;
        border-radius: 0.6rem;
        color: variables.$col-dark;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: all 0.2s ease;

        &:hover:not(:disabled) {
          opacity: 0.9;
        }

        &:disabled {
          cursor: not-allowed;
          opacity: 0.6;
          background: darken(variables.$col-orange, 15%);
        }

        &.loading {
          pointer-events: none;
          position: relative;
          color: transparent;

          &::after {
            content: "";
            width: 18px;
            height: 18px;
            border: 2px solid variables.$col-dark;
            border-top-color: transparent;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: spin 0.7s linear infinite;
          }
        }
      }

      &--header {
        &--helper {
          background: variables.$col-orange;
          margin-bottom: 1rem;
          max-width: 45%;
          padding: 0.4rem 0.6rem;
          border-radius: 20px;
          color: variables.$col-dark;
          font-size: 0.75rem;
          font-weight: 600;
          text-align: center;
          text-transform: capitalize;
        }

        h2 {
          font-weight: 500;
          font-size: 1rem;
          border-bottom: 1px solid variables.$col-border-lining;
          padding-bottom: 0.3rem;
          color: variables.$col-white;
        }

        p {
          font-size: 0.85rem;
          padding: 0.6rem 0 1.5rem;
          opacity: 0.85;
          line-height: 1.6;
          color: variables.$col-white;
        }

        form {
          display: flex;
          flex-direction: column;

          label {
            font-size: 0.8rem;
            color: #ccc;
            margin-bottom: 0.3rem;
          }

          input,
          select,
          textarea {
            width: 100%;
            background: #1e1e1e;
            border: 1px solid #333;
            border-radius: 0.5rem;
            padding: 0.6rem 0.9rem;
            font-size: 0.85rem;
            color: #eee;
            margin-bottom: 1rem;
            transition: border-color 0.2s ease;

            &:focus {
              outline: none;
              border-color: variables.$col-orange;
            }

            &:disabled {
              opacity: 0.6;
              cursor: not-allowed;
            }

            &::placeholder {
              color: #777;
              font-size: 0.8rem;
            }
          }

          textarea {
            min-height: 5rem;
            resize: vertical;
          }
        }
      }
    }
  }

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

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}