  .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      animation: fadeIn 0.2s ease-in-out;

      @keyframes fadeIn {
          from {
              opacity: 0;
          }

          to {
              opacity: 1;
          }
      }

      .modal {
          background: white;
          border-radius: 1.5rem;
          width: 90%;
          max-width: 500px;
          box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
          animation: slideUp 0.3s ease-out;

          @keyframes slideUp {
              from {
                  opacity: 0;
                  transform: translateY(20px);
              }

              to {
                  opacity: 1;
                  transform: translateY(0);
              }
          }

          .modal-header {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 1.5rem;
              border-bottom: 1px solid #E5E7EB;

              h3 {
                  font-size: 1.25rem;
                  font-weight: 700;
                  color: #111827;
              }

              .close-btn {
                  padding: 0.5rem;
                  background: transparent;
                  border: none;
                  border-radius: 0.5rem;
                  cursor: pointer;
                  transition: all 0.2s;

                  &:hover {
                      background-color: #F3F4F6;
                  }

                  svg {
                      width: 1.25rem;
                      height: 1.25rem;
                      color: #6B7280;
                  }
              }
          }

          .modal-body {
              padding: 1.5rem;
              max-height: 60vh;
              overflow-y: auto;

              .form-group {
                  margin-bottom: 1.25rem;

                  &:last-child {
                      margin-bottom: 0;
                  }

                  label {
                      display: block;
                      font-size: 0.875rem;
                      font-weight: 600;
                      color: #374151;
                      margin-bottom: 0.5rem;
                  }

                  input,
                  select,
                  textarea {
                      width: 100%;
                      padding: 0.75rem 1rem;
                      border: 1px solid #D1D5DB;
                      border-radius: 0.75rem;
                      font-size: 0.875rem;
                      color: #111827;
                      transition: all 0.2s;

                      &:focus {
                          outline: none;
                          border-color: #FF6B00;
                          box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
                      }

                      &::placeholder {
                          color: #9CA3AF;
                      }
                  }

                  select {
                      cursor: pointer;
                      appearance: none;
                      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
                      background-repeat: no-repeat;
                      background-position: right 0.75rem center;
                      background-size: 1.25rem;
                      padding-right: 2.5rem;
                  }

                  textarea {
                      resize: vertical;
                      min-height: 4rem;
                      font-family: inherit;
                  }
              }
          }

          .modal-footer {
              display: flex;
              align-items: center;
              justify-content: flex-end;
              gap: 0.75rem;
              padding: 1.5rem;
              border-top: 1px solid #E5E7EB;

              button {
                  padding: 0.75rem 1.5rem;
                  border-radius: 0.75rem;
                  font-size: 0.875rem;
                  font-weight: 600;
                  cursor: pointer;
                  transition: all 0.2s;
                  border: none;

                  &.cancel-btn {
                      background-color: #F3F4F6;
                      color: #374151;

                      &:hover {
                          background-color: #E5E7EB;
                      }
                  }

                  &.submit-btn {
                      color: white;

                      &.gave {
                          background: linear-gradient(to right, #10B981, #059669);
                          box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3);

                          &:hover {
                              box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.4);
                              transform: translateY(-1px);
                          }
                      }

                      &.got {
                          background: linear-gradient(to right, #EF4444, #DC2626);
                          box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.3);

                          &:hover {
                              box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.4);
                              transform: translateY(-1px);
                          }
                      }

                      &.add {
                          background: linear-gradient(to right, #3B82F6, #2563EB);
                          box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);

                          &:hover {
                              box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4);
                              transform: translateY(-1px);
                          }
                      }
                  }
              }
          }
      }
  }